adrinux
/
frontend
forked from vikunja/frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: move forgot password link next to password label 

In some languages, the texts on the "log in" and "register" buttons were so long they wrapped underneath each other. Moving the "forgot password" link next to the password label leaves these two buttons enough space to always stay next to each other.
This commit is contained in:
kolaente 2021-11-28 16:04:38 +01:00 committed by Dominik Pschenitschni
parent 063592ca3d
commit f7eb160509
Signed by untrusted user: dpschen
GPG Key ID: B257AC0149F43A77
1 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,11 +20,21 @@
autocomplete="username"
v-focus
@keyup.enter="submit"
tabindex="1"
/>
</div>
</div>
<div class="field">
<label class="label" for="password">{{ $t('user.auth.password') }}</label>
<div class="label-with-link">
<label class="label" for="password">{{ $t('user.auth.password') }}</label>
<router-link
:to="{ name: 'user.password-reset.request' }"
class="reset-password-link"
tabindex="6"
>
{{ $t('user.auth.forgotPassword') }}
</router-link>
</div>
<div class="control">
<input
class="input"
@ -36,6 +46,7 @@
type="password"
autocomplete="current-password"
@keyup.enter="submit"
tabindex="2"
/>
</div>
</div>
@ -52,6 +63,7 @@
type="text"
v-focus
@keyup.enter="submit"
tabindex="3"
/>
</div>
</div>
@ -61,6 +73,7 @@
<x-button
@click="submit"
:loading="loading"
tabindex="4"
>
{{ $t('user.auth.login') }}
</x-button>
@ -68,15 +81,11 @@
:to="{ name: 'user.register' }"
v-if="registrationEnabled"
type="secondary"
tabindex="5"
>
{{ $t('user.auth.register') }}
</x-button>
</div>
<div class="control">
<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">
{{ $t('user.auth.forgotPassword') }}
</router-link>
</div>
</div>
</form>
@ -227,6 +236,15 @@ export default {
.reset-password-link {
display: inline-block;
padding-top: 5px;
}
.label-with-link {
display: flex;
justify-content: space-between;
margin-bottom: .5rem;
.label {
margin-bottom: 0;
}
}
</style>