refactor(frontend): migrate auth views to FormField component

Migrate Login, Register, RequestPasswordReset, and LinkSharingAuth
views to use the new FormField component instead of manual
field/control/input markup.

frontend/src/views/sharing/LinkSharingAuth.vue

@@ -10,19 +10,14 @@
 			<p class="pbe-2">
 				{{ $t('sharing.passwordRequired') }}
 			</p>
-			<div class="field">
-				<div class="control">
-					<input
-						id="linkSharePassword"
-						v-model="password"
-						v-focus
-						type="password"
-						class="input"
-						:placeholder="$t('user.auth.passwordPlaceholder')"
-						@keyup.enter.prevent="authenticate()"
-					>
-				</div>
-			</div>
+			<FormField
+				id="linkSharePassword"
+				v-model="password"
+				v-focus
+				type="password"
+				:placeholder="$t('user.auth.passwordPlaceholder')"
+				@keyup.enter.prevent="authenticate()"
+			/>
 
 			<XButton
 				:loading="loading"
@@ -49,6 +44,7 @@ import {useI18n} from 'vue-i18n'
 import {useTitle} from '@vueuse/core'
 
 import Message from '@/components/misc/Message.vue'
+import FormField from '@/components/input/FormField.vue'
 import {LINK_SHARE_HASH_PREFIX} from '@/constants/linkShareHash'
 
 import {useBaseStore} from '@/stores/base'

frontend/src/views/user/Login.vue

@@ -20,34 +20,21 @@
 			id="loginform"
 			@submit.prevent="submit"
 		>
-			<div class="field">
-				<label
-					class="label"
-					for="username"
-				>{{ $t('user.auth.usernameEmail') }}</label>
-				<div class="control">
-					<input
-						id="username"
-						ref="usernameRef"
-						v-focus
-						class="input"
-						name="username"
-						:placeholder="$t('user.auth.usernamePlaceholder')"
-						required
-						type="text"
-						autocomplete="username"
-						tabindex="1"
-						@keyup.enter="submit"
-						@focusout="validateUsernameField()"
-					>
-				</div>
-				<p
-					v-if="!usernameValid"
-					class="help is-danger"
-				>
-					{{ $t('user.auth.usernameRequired') }}
-				</p>
-			</div>
+			<FormField
+				id="username"
+				ref="usernameRef"
+				v-focus
+				:label="$t('user.auth.usernameEmail')"
+				name="username"
+				:placeholder="$t('user.auth.usernamePlaceholder')"
+				required
+				type="text"
+				autocomplete="username"
+				tabindex="1"
+				:error="usernameValid ? null : $t('user.auth.usernameRequired')"
+				@keyup.enter="submit"
+				@focusout="validateUsernameField()"
+			/>
 			<div class="field">
 				<div class="label-with-link">
 					<label
@@ -71,30 +58,20 @@
 					@submit="submit"
 				/>
 			</div>
-			<div
+			<FormField
 				v-if="needsTotpPasscode"
-				class="field"
-			>
-				<label
-					class="label"
-					for="totpPasscode"
-				>{{ $t('user.auth.totpTitle') }}</label>
-				<div class="control">
-					<input
-						id="totpPasscode"
-						ref="totpPasscode"
-						v-focus
-						autocomplete="one-time-code"
-						class="input"
-						:placeholder="$t('user.auth.totpPlaceholder')"
-						required
-						type="text"
-						tabindex="3"
-						inputmode="numeric"
-						@keyup.enter="submit"
-					>
-				</div>
-			</div>
+				id="totpPasscode"
+				ref="totpPasscode"
+				v-focus
+				:label="$t('user.auth.totpTitle')"
+				autocomplete="one-time-code"
+				:placeholder="$t('user.auth.totpPlaceholder')"
+				required
+				type="text"
+				tabindex="3"
+				inputmode="numeric"
+				@keyup.enter="submit"
+			/>
 			<div class="field">
 				<label class="label">
 					<input
@@ -152,6 +129,7 @@ import {useDebounceFn} from '@vueuse/core'
 
 import Message from '@/components/misc/Message.vue'
 import Password from '@/components/input/Password.vue'
+import FormField from '@/components/input/FormField.vue'
 
 import {getErrorText} from '@/message'
 import {redirectToProvider} from '@/helpers/redirectToProvider'

frontend/src/views/user/Register.vue

@@ -11,62 +11,34 @@
 			id="registerform"
 			@submit.prevent="submit"
 		>
-			<div class="field">
-				<label
-					class="label"
-					for="username"
-				>{{ $t('user.auth.username') }}</label>
-				<div class="control">
-					<input
-						id="username"
-						v-model="credentials.username"
-						v-focus
-						class="input"
-						name="username"
-						:placeholder="$t('user.auth.usernamePlaceholder')"
-						required
-						type="text"
-						autocomplete="username"
-						@keyup.enter="submit"
-						@focusout="() => {validateUsername(); validateUsernameAfterFirst = true}"
-						@keyup="() => {validateUsernameAfterFirst ? validateUsername() : null}"
-					>
-				</div>
-				<p
-					v-if="usernameValid !== true"
-					class="help is-danger"
-				>
-					{{ usernameValid }}
-				</p>
-			</div>
-			<div class="field">
-				<label
-					class="label"
-					for="email"
-				>
-					{{ $t('user.auth.email') }}
-				</label>
-				<div class="control">
-					<input
-						id="email"
-						v-model="credentials.email"
-						class="input"
-						name="email"
-						:placeholder="$t('user.auth.emailPlaceholder')"
-						required
-						type="email"
-						@keyup.enter="submit"
-						@focusout="() => {validateEmail(); validateEmailAfterFirst = true}"
-						@keyup="() => {validateEmailAfterFirst ? validateEmail() : null}"
-					>
-				</div>
-				<p
-					v-if="!emailValid"
-					class="help is-danger"
-				>
-					{{ $t('user.auth.emailInvalid') }}
-				</p>
-			</div>
+			<FormField
+				id="username"
+				v-model="credentials.username"
+				v-focus
+				:label="$t('user.auth.username')"
+				name="username"
+				:placeholder="$t('user.auth.usernamePlaceholder')"
+				required
+				type="text"
+				autocomplete="username"
+				:error="usernameValid !== true ? usernameValid : null"
+				@keyup.enter="submit"
+				@focusout="() => {validateUsername(); validateUsernameAfterFirst = true}"
+				@keyup="() => {validateUsernameAfterFirst ? validateUsername() : null}"
+			/>
+			<FormField
+				id="email"
+				v-model="credentials.email"
+				:label="$t('user.auth.email')"
+				name="email"
+				:placeholder="$t('user.auth.emailPlaceholder')"
+				required
+				type="email"
+				:error="emailValid ? null : $t('user.auth.emailInvalid')"
+				@keyup.enter="submit"
+				@focusout="() => {validateEmail(); validateEmailAfterFirst = true}"
+				@keyup="() => {validateEmailAfterFirst ? validateEmail() : null}"
+			/>
 			<div class="field">
 				<label
 					class="label"
@@ -124,6 +96,7 @@ import router from '@/router'
 import Message from '@/components/misc/Message.vue'
 import {isEmail} from '@/helpers/isEmail'
 import Password from '@/components/input/Password.vue'
+import FormField from '@/components/input/FormField.vue'
 
 import {useAuthStore} from '@/stores/auth'
 import {useConfigStore} from '@/stores/config'

frontend/src/views/user/RequestPasswordReset.vue

@@ -25,24 +25,16 @@
 			v-if="!isSuccess"
 			@submit.prevent="requestPasswordReset"
 		>
-			<div class="field">
-				<label
-					class="label"
-					for="email"
-				>{{ $t('user.auth.email') }}</label>
-				<div class="control">
-					<input
-						id="email"
-						v-model="passwordReset.email"
-						v-focus
-						class="input"
-						name="email"
-						:placeholder="$t('user.auth.emailPlaceholder')"
-						required
-						type="email"
-					>
-				</div>
-			</div>
+			<FormField
+				id="email"
+				v-model="passwordReset.email"
+				v-focus
+				:label="$t('user.auth.email')"
+				name="email"
+				:placeholder="$t('user.auth.emailPlaceholder')"
+				required
+				type="email"
+			/>
 
 			<div class="is-flex">
 				<XButton
@@ -68,6 +60,7 @@ import {ref, shallowReactive} from 'vue'
 import PasswordResetModel from '@/models/passwordReset'
 import PasswordResetService from '@/services/passwordReset'
 import Message from '@/components/misc/Message.vue'
+import FormField from '@/components/input/FormField.vue'
 
 const passwordResetService = shallowReactive(new PasswordResetService())
 const passwordReset = ref(new PasswordResetModel())