From 7298002da73daf6eee7d857ceaffaf1af95bffb1 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 14 Feb 2024 03:01:32 -0800
Subject: [PATCH] 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
---
 app/javascript/v3/components/Form/Input.vue     | 15 ++++++++++++---
 app/javascript/v3/components/Form/WithLabel.vue |  3 +++
 app/javascript/v3/views/login/Index.vue         |  9 ++++++++-
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/app/javascript/v3/components/Form/Input.vue b/app/javascript/v3/components/Form/Input.vue
index b9e73387d..753157ab0 100644
--- 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
index d8c339a53..17bdeb202 100644
--- 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
index d840c27a5..8be74e709 100644
--- 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"
           />