fix: Adds forgot password link for login form (#8927)

- focus ring not appearing issue - missing forgot password link Fixes: https://linear.app/chatwoot/issue/CW-3090/fix-fixes-issues-with-login-form
chatwoot · Feb 14, 2024 · 7298002 · 7298002
1 parent 96b781b
commit 7298002
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/app/javascript/v3/components/Form/Input.vue b/app/javascript/v3/components/Form/Input.vue
@@ -6,24 +6,29 @@
     :has-error="hasError"
     :error-message="errorMessage"
   >
+    <template #rightOfLabel>
+      <slot />
+    </template>
     <input
       :id="name"
       :name="name"
       :type="type"
       autocomplete="off"
+      :tabindex="tabindex"
       :required="required"
       :placeholder="placeholder"
       :data-testid="dataTestid"
       :value="value"
       :class="{
-        'focus:ring-red-600 ring-red-600': hasError,
-        'dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200':
+        'focus:outline-red-600 outline-red-600 dark:focus:outline-red-600 dark:outline-red-600':
+          hasError,
+        'outline-slate-200 dark:outline-slate-600 dark:focus:outline-woot-500 focus:outline-woot-500':
           !hasError,
         'px-3 py-3': spacing === 'base',
         'px-3 py-2 mb-0': spacing === 'compact',
         'pl-9': icon,
       }"
-      class="block w-full border-none shadow-sm appearance-none rounded-xl outline outline-1 outline-slate-200 dark:outline-slate-200/20 focus:outline-none focus:outline-0 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-800"
+      class="block w-full border-none shadow-sm appearance-none rounded-xl outline outline-1 focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 sm:text-sm sm:leading-6 dark:bg-slate-800"
       @input="onInput"
       @blur="$emit('blur')"
     />
@@ -48,6 +53,10 @@ export default {
       type: String,
       default: 'text',
     },
+    tabindex: {
+      type: Number,
+      default: undefined,
+    },
     required: {
       type: Boolean,
       default: false,

diff --git a/app/javascript/v3/components/Form/WithLabel.vue b/app/javascript/v3/components/Form/WithLabel.vue
@@ -9,6 +9,9 @@
       <slot name="label">
         {{ label }}
       </slot>
+      <slot name="rightOfLabel">
+        {{ label }}
+      </slot>
     </label>
     <div class="w-full">
       <div class="flex items-center relative w-full">

diff --git a/app/javascript/v3/views/login/Index.vue b/app/javascript/v3/views/login/Index.vue
@@ -46,6 +46,7 @@
             name="email_address"
             type="text"
             data-testid="email_input"
+            :tabindex="1"
             required
             :label="$t('LOGIN.EMAIL.LABEL')"
             :placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
@@ -58,19 +59,25 @@
             name="password"
             data-testid="password_input"
             required
+            :tabindex="2"
             :label="$t('LOGIN.PASSWORD.LABEL')"
             :placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
             :has-error="$v.credentials.password.$error"
             @input="$v.credentials.password.$touch"
           >
             <p v-if="!globalConfig.disableUserProfileUpdate">
-              <router-link to="auth/reset/password" class="text-link">
+              <router-link
+                to="auth/reset/password"
+                class="text-link text-sm"
+                tabindex="4"
+              >
                 {{ $t('LOGIN.FORGOT_PASSWORD') }}
               </router-link>
             </p>
           </form-input>
           <submit-button
             :disabled="loginApi.showLoading"
+            :tabindex="3"
             :button-text="$t('LOGIN.SUBMIT')"
             :loading="loginApi.showLoading"
           />