From 81269f7fad2bdef0f9b5d6ca83b4b5ca23f4920e Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Sun, 29 Dec 2024 18:34:19 +0100
Subject: [PATCH] fix(front): set label prop resp. slot in inputs

---
 front/src/components/auth/LoginForm.vue  | 44 +++++++++++++-----------
 front/src/components/auth/SignupForm.vue | 13 +++----
 2 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/front/src/components/auth/LoginForm.vue b/front/src/components/auth/LoginForm.vue
index 25a9d6d61..e8e766779 100644
--- a/front/src/components/auth/LoginForm.vue
+++ b/front/src/components/auth/LoginForm.vue
@@ -108,15 +108,6 @@ const submit = async () => {
     <Spacer v-if="errors.length > 0" />
     <template v-if="domain === store.getters['instance/domain']">
       <div style="margin-bottom: 16px">
-        <label for="username-field">
-          {{ t('components.auth.LoginForm.label.username') }}
-          <template v-if="showSignup">
-            <span class="middle pipe symbol" />
-            <router-link :to="{ path: '/signup' }">
-              {{ t('components.auth.LoginForm.link.createAccount') }}
-            </router-link>
-          </template>
-        </label>
         <Input
           id="username-field"
           ref="username"
@@ -126,24 +117,35 @@ const submit = async () => {
           type="text"
           autofocus
           :placeholder="labels.usernamePlaceholder"
-        />
+        >
+          <template #label>
+            {{ t('components.auth.LoginForm.label.username') }}
+            <template v-if="showSignup">
+              <span class="middle pipe symbol" />
+              <router-link :to="{ path: '/signup' }">
+                {{ t('components.auth.LoginForm.link.createAccount') }}
+              </router-link>
+            </template>
+          </template>
+        </Input>
       </div>
       <div style="margin-bottom: 16px">
-        <label for="password-field">
-          {{ t('components.auth.LoginForm.label.password') }}
-          <span class="middle pipe symbol" />
-          <router-link
-            tabindex="1"
-            :to="{ name: 'auth.password-reset', query: { email: credentials.username } }"
-          >
-            {{ t('components.auth.LoginForm.link.resetPassword') }}
-          </router-link>
-        </label>
         <Input password
           v-model="credentials.password"
           field-id="password-field"
           required
-        />
+        >
+          <template #label>
+            {{ t('components.auth.LoginForm.label.password') }}
+            <span class="middle pipe symbol" />
+            <router-link
+              tabindex="1"
+              :to="{ name: 'auth.password-reset', query: { email: credentials.username } }"
+            >
+              {{ t('components.auth.LoginForm.link.resetPassword') }}
+            </router-link>
+          </template>
+        </Input>
       </div>
     </template>
     <template v-else>
diff --git a/front/src/components/auth/SignupForm.vue b/front/src/components/auth/SignupForm.vue
index 18875a564..b18f96516 100644
--- a/front/src/components/auth/SignupForm.vue
+++ b/front/src/components/auth/SignupForm.vue
@@ -149,7 +149,7 @@ fetchInstanceSettings()
     <div class="required field">
       <Input
         id="username-field"
-        label = "t('components.auth.SignupForm.label.username')"
+        :label = "t('components.auth.SignupForm.label.username')"
         ref="username"
         v-model="payload.username"
         name="username"
@@ -161,7 +161,7 @@ fetchInstanceSettings()
     </div>
     <div class="required field">
       <Input
-        label="t('components.auth.SignupForm.label.email')"
+        :label="t('components.auth.SignupForm.label.email')"
         id="email-field"
         ref="email"
         v-model="payload.email"
@@ -173,7 +173,7 @@ fetchInstanceSettings()
     </div>
     <div class="required field">
       <Input password
-        label="t('components.auth.SignupForm.label.password')"
+        :label="t('components.auth.SignupForm.label.password')"
         v-model="payload.password1"
         field-id="password-field"
       />
@@ -183,7 +183,7 @@ fetchInstanceSettings()
       class="required field"
     >
       <Input
-        label="t('components.auth.SignupForm.label.invitation')"
+        :label="t('components.auth.SignupForm.label.invitation')"
         id="invitation-code"
         v-model="payload.invitation"
         required
@@ -198,8 +198,9 @@ fetchInstanceSettings()
         :key="idx"
         :class="[{required: field.required}, 'field']"
       >
+        <!-- TODO: Add `label` prop to `Textarea` component -->
         <Textarea
-          label="field.label"
+          :label="field.label"
           v-if="field.input_type === 'long_text'"
           :id="`custom-field-${idx}`"
           v-model="payload.request_fields[field.label]"
@@ -209,7 +210,7 @@ fetchInstanceSettings()
         <Input
           v-else
           :id="`custom-field-${idx}`"
-          label="field.label"
+          :label="field.label"
           v-model="payload.request_fields[field.label]"
           type="text"
           :required="field.required"