vikunja/frontend
Archived
6
39
Fork 48
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: improve login and register ux #1104

Merged
dpschen merged 23 commits from feature/login-improvements into main 2022-02-05 17:22:43 +00:00
Conversation 3 Commits 23 Files Changed 13 +37 -48
3 changed files with 37 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5558d91f44 - Show all commits

4
src/i18n/lang/en.json
View File

@ -54,7 +54,9 @@
"usernameRequired": "Please provide a username.", "usernameRequired": "Please provide a username.",
"passwordRequired": "Please provide a password.", "passwordRequired": "Please provide a password.",
"showPassword": "Show the password", "showPassword": "Show the password",
"hidePassword": "Hide the password" "hidePassword": "Hide the password",
"noAccountYet": "Don't have an account yet?",
"alreadyHaveAnAccount": "Already have an account?"
}, },
"settings": { "settings": {
"title": "Settings", "title": "Settings",

48
src/views/user/Login.vue
View File

@ -83,26 +83,24 @@
</div> </div>
</div> </div>
<div class="field is-grouped login-buttons"> <x-button
<div class="control is-expanded"> @click="submit"
<x-button :loading="loading"
@click="submit" tabindex="4"
:loading="loading" :disabled="!allFieldsValid"
tabindex="4" >
:disabled="!allFieldsValid" {{ $t('user.auth.login') }}
> </x-button>
{{ $t('user.auth.login') }} <p class="mt-2" v-if="registrationEnabled">
</x-button> {{ $t('user.auth.noAccountYet') }}
<x-button <router-link
:to="{ name: 'user.register' }" :to="{ name: 'user.register' }"
v-if="registrationEnabled" type="secondary"
type="secondary" tabindex="5"
tabindex="5" >
> {{ $t('user.auth.createAccount') }}
{{ $t('user.auth.createAccount') }} </router-link>
</x-button> </p>
</div>
</div>
</form> </form>
<div <div
konrad marked this conversation as resolved Outdated
dpschen commented 2021-12-10 11:21:26 +00:00
Outdated
Review
Copy Link

What happens if neither hasApiUrl && localAuthEnabled nor hasOpenIdProviders is true?

What happens if neither `hasApiUrl && localAuthEnabled` nor `hasOpenIdProviders` is true?
konrad commented 2021-12-11 13:11:49 +00:00
Outdated
Review
Copy Link

The <ready> component wrapper will prompt the user to set an api url.

The `<ready>` component wrapper will prompt the user to set an api url.
👍 1
dpschen commented 2021-12-11 13:15:13 +00:00
Outdated
Review
Copy Link

Ahh for sure. Makes sense =)

Ahh for sure. Makes sense =)
@ -263,16 +261,6 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.login-buttons {
@media screen and (max-width: 450px) {
flex-direction: column;
.control:first-child {
margin-bottom: 1rem;
}
}
}
.button { .button {
margin: 0 0.4rem 0 0; margin: 0 0.4rem 0 0;
} }

33
src/views/user/Register.vue
View File

@ -60,7 +60,7 @@
@focusout="validatePassword" @focusout="validatePassword"
/> />
<a <a
@click="togglePasswordFieldType" @click="togglePasswordFieldType"
class="password-field-type-toggle" class="password-field-type-toggle"
aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')" aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"> v-tooltip="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')">
@ -72,22 +72,21 @@
</p> </p>
</div> </div>
<div class="field is-grouped"> <x-button
<div class="control"> :loading="loading"
<x-button id="register-submit"
:loading="loading" @click="submit"
id="register-submit" class="mr-2"
@click="submit" :disabled="!everythingValid"
class="mr-2" >
:disabled="!everythingValid" {{ $t('user.auth.createAccount') }}
> </x-button>
{{ $t('user.auth.createAccount') }} <p class="mt-2">
</x-button> {{ $t('user.auth.alreadyHaveAnAccount') }}
<x-button :to="{ name: 'user.login' }" type="secondary"> <router-link :to="{ name: 'user.login' }">
{{ $t('user.auth.login') }} {{ $t('user.auth.login') }}
</x-button> </router-link>
</div> </p>
</div>
</form> </form>
</div> </div>
</template> </template>