vikunja
/
frontend
Archived
6
39
Fork 49
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.",
"passwordRequired": "Please provide a 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": {
"title": "Settings",

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

@ -83,26 +83,24 @@
</div>
</div>
<div class="field is-grouped login-buttons">
<div class="control is-expanded">
<x-button
@click="submit"
:loading="loading"
tabindex="4"
:disabled="!allFieldsValid"
>
{{ $t('user.auth.login') }}
</x-button>
<x-button
:to="{ name: 'user.register' }"
v-if="registrationEnabled"
type="secondary"
tabindex="5"
>
{{ $t('user.auth.createAccount') }}
</x-button>
</div>
</div>
<x-button
@click="submit"
:loading="loading"
tabindex="4"
:disabled="!allFieldsValid"
>
{{ $t('user.auth.login') }}
</x-button>
<p class="mt-2" v-if="registrationEnabled">
{{ $t('user.auth.noAccountYet') }}
<router-link
:to="{ name: 'user.register' }"
type="secondary"
tabindex="5"
>
{{ $t('user.auth.createAccount') }}
</router-link>
</p>
</form>
<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>
<style lang="scss" scoped>
.login-buttons {
@media screen and (max-width: 450px) {
flex-direction: column;
.control:first-child {
margin-bottom: 1rem;
}
}
}
.button {
margin: 0 0.4rem 0 0;
}

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

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