From fe8c7aa564f6805fd3bd9e2bf13c4b855a51fded Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sun, 29 Dec 2024 17:55:05 +0100
Subject: [PATCH] refactor(front): replace password-input with input; set label
 prop

---
 front/src/components/auth/LoginForm.vue       |  3 +--
 front/src/components/auth/SignupForm.vue      | 14 +++++++-------
 front/src/views/auth/PasswordReset.vue        |  2 +-
 front/src/views/auth/PasswordResetConfirm.vue |  6 ++----
 4 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/front/src/components/auth/LoginForm.vue b/front/src/components/auth/LoginForm.vue
index 4dedcc95d..25a9d6d61 100644
--- a/front/src/components/auth/LoginForm.vue
+++ b/front/src/components/auth/LoginForm.vue
@@ -7,7 +7,6 @@ import { useEventListener } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
-import PasswordInput from '~/components/forms/PasswordInput.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Input from '~/components/ui/Input.vue'
 import Button from '~/components/ui/Button.vue'
@@ -140,7 +139,7 @@ const submit = async () => {
             {{ t('components.auth.LoginForm.link.resetPassword') }}
           </router-link>
         </label>
-        <password-input
+        <Input password
           v-model="credentials.password"
           field-id="password-field"
           required
diff --git a/front/src/components/auth/SignupForm.vue b/front/src/components/auth/SignupForm.vue
index e93efe25c..18875a564 100644
--- a/front/src/components/auth/SignupForm.vue
+++ b/front/src/components/auth/SignupForm.vue
@@ -9,7 +9,6 @@ import { useStore } from '~/store'
 import axios from 'axios'
 
 import LoginForm from '~/components/auth/LoginForm.vue'
-import PasswordInput from '~/components/forms/PasswordInput.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Input from '~/components/ui/Input.vue'
 import Textarea from '~/components/ui/Textarea.vue'
@@ -148,9 +147,9 @@ fetchInstanceSettings()
       </ul>
     </Alert>
     <div class="required field">
-      <label for="username-field">{{ t('components.auth.SignupForm.label.username') }}</label>
       <Input
         id="username-field"
+        label = "t('components.auth.SignupForm.label.username')"
         ref="username"
         v-model="payload.username"
         name="username"
@@ -161,8 +160,8 @@ fetchInstanceSettings()
       />
     </div>
     <div class="required field">
-      <label for="email-field">{{ t('components.auth.SignupForm.label.email') }}</label>
       <Input
+        label="t('components.auth.SignupForm.label.email')"
         id="email-field"
         ref="email"
         v-model="payload.email"
@@ -173,8 +172,8 @@ fetchInstanceSettings()
       />
     </div>
     <div class="required field">
-      <label for="password-field">{{ t('components.auth.SignupForm.label.password') }}</label>
-      <password-input
+      <Input password
+        label="t('components.auth.SignupForm.label.password')"
         v-model="payload.password1"
         field-id="password-field"
       />
@@ -183,8 +182,8 @@ fetchInstanceSettings()
       v-if="!store.state.instance.settings.users.registration_enabled.value"
       class="required field"
     >
-      <label for="invitation-code">{{ t('components.auth.SignupForm.label.invitation') }}</label>
       <Input
+        label="t('components.auth.SignupForm.label.invitation')"
         id="invitation-code"
         v-model="payload.invitation"
         required
@@ -199,8 +198,8 @@ fetchInstanceSettings()
         :key="idx"
         :class="[{required: field.required}, 'field']"
       >
-        <label :for="`custom-field-${idx}`">{{ field.label }}</label>
         <Textarea
+          label="field.label"
           v-if="field.input_type === 'long_text'"
           :id="`custom-field-${idx}`"
           v-model="payload.request_fields[field.label]"
@@ -210,6 +209,7 @@ fetchInstanceSettings()
         <Input
           v-else
           :id="`custom-field-${idx}`"
+          label="field.label"
           v-model="payload.request_fields[field.label]"
           type="text"
           :required="field.required"
diff --git a/front/src/views/auth/PasswordReset.vue b/front/src/views/auth/PasswordReset.vue
index 1171411a1..3304c2d02 100644
--- a/front/src/views/auth/PasswordReset.vue
+++ b/front/src/views/auth/PasswordReset.vue
@@ -80,8 +80,8 @@ onMounted(() => emailInput.value.focus())
         {{ t('views.auth.PasswordReset.help.form') }}
       </p>
       <div class="field">
-        <label for="account-email">{{ t('views.auth.PasswordReset.label.email') }}</label>
         <Input
+          label="t('views.auth.PasswordReset.label.email')"
           id="account-email"
           ref="emailInput"
           v-model="email"
diff --git a/front/src/views/auth/PasswordResetConfirm.vue b/front/src/views/auth/PasswordResetConfirm.vue
index 7a562df0d..02dc1c739 100644
--- a/front/src/views/auth/PasswordResetConfirm.vue
+++ b/front/src/views/auth/PasswordResetConfirm.vue
@@ -6,7 +6,6 @@ import { computed, ref } from 'vue'
 
 import axios from 'axios'
 
-import PasswordInput from '~/components/forms/PasswordInput.vue'
 import Alert from '~/components/ui/Alert.vue'
 import Button from '~/components/ui/Button.vue'
 
@@ -81,10 +80,9 @@ const submit = async () => {
       </Alert>
       <template v-if="token && uid">
         <div class="field">
-          <label for="password-field">{{ t('views.auth.PasswordResetConfirm.label.newPassword') }}</label>
-          <password-input
+          <Input password
+            label = "t('views.auth.PasswordResetConfirm.label.newPassword')"
             v-model="newPassword"
-            field-id="password-field"
           />
         </div>
         <router-link :to="{path: '/login'}">