Skip to content

Commit 0dc3a9f

Browse files
authored
Merge pull request #764 from Adamant-im/fix/password-field-fit
fix: remove autofocus on field
2 parents 6ab1e71 + 59a7980 commit 0dc3a9f

File tree

2 files changed

+44
-3
lines changed

2 files changed

+44
-3
lines changed

src/components/LoginForm.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,20 @@ export default defineComponent({
165165
@use '@/assets/styles/settings/_colors.scss';
166166
@use 'vuetify/settings';
167167
168+
.login-form {
169+
&__textfield {
170+
&:deep(.v-field__append-inner) {
171+
padding-left: 0;
172+
margin-left: -28px; // compensate the append-inner icon
173+
}
174+
175+
&:deep(.v-field__input) {
176+
width: 100%;
177+
padding-right: 0;
178+
}
179+
}
180+
}
181+
168182
/** Themes **/
169183
.v-theme--light {
170184
.login-form {

src/components/LoginPasswordForm.vue

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
2-
<v-form ref="form" class="login-form" @submit.prevent="submit">
2+
<v-form ref="form" :class="classes.root" @submit.prevent="submit">
33
<v-row no-gutters>
44
<v-text-field
55
ref="passwordInput"
66
v-model="password"
7-
autofocus
87
autocomplete="new-password"
8+
autofocus
9+
:class="classes.textField"
910
:label="$t('login_via_password.user_password_title')"
1011
:name="Date.now()"
1112
:type="showPassword ? 'text' : 'password'"
12-
class="text-center"
1313
variant="underlined"
1414
>
1515
<template #append-inner>
@@ -59,6 +59,12 @@ import { isAllNodesDisabledError, isAllNodesOfflineError } from '@/lib/nodes/uti
5959
import { mdiEye, mdiEyeOff } from '@mdi/js'
6060
import { useSaveCursor } from '@/hooks/useSaveCursor'
6161
62+
const className = 'login-form'
63+
const classes = {
64+
root: className,
65+
textField: `${className}__textfield`
66+
}
67+
6268
export default defineComponent({
6369
props: {
6470
modelValue: {
@@ -132,6 +138,7 @@ export default defineComponent({
132138
passwordInput,
133139
showSpinner,
134140
password,
141+
classes,
135142
showPassword,
136143
mdiEye,
137144
mdiEyeOff,
@@ -142,3 +149,23 @@ export default defineComponent({
142149
}
143150
})
144151
</script>
152+
153+
<style lang="scss" scoped>
154+
.login-form {
155+
&__textfield {
156+
&:deep(.v-field__append-inner) {
157+
padding-left: 0;
158+
margin-left: -28px; // compensate the append-inner icon
159+
}
160+
161+
&:deep(.v-field__input) {
162+
width: 100%;
163+
padding-right: 0;
164+
}
165+
166+
:deep(input) {
167+
font-size: 16px !important;
168+
}
169+
}
170+
}
171+
</style>

0 commit comments

Comments
 (0)