Merge branch 'develop' into fix-signup-captcha

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue

@@ -202,7 +202,7 @@ defineExpose({ state, isSubmitDisabled });
                 size="sm"
                 type="button"
                 :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
-                class="!h-[2.4rem] !w-[2.375rem] absolute top-[1.94rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
+                class="!h-[2.39rem] !w-[2.375rem] absolute top-px !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
                 @click="isEmojiPickerOpen = !isEmojiPickerOpen"
               />
               <EmojiInput

app/javascript/dashboard/components-next/NewConversation/components/ContentTemplateSelector.vue

@@ -82,12 +82,12 @@ const handleSendMessage = template => {
           :placeholder="
             t('COMPOSE_NEW_CONVERSATION.FORM.TWILIO_OPTIONS.SEARCH_PLACEHOLDER')
           "
-          custom-input-class="ltr:pl-10 rtl:pr-10"
+          class="ltr:!pl-8 rtl:!pr-8"
         >
           <template #prefix>
             <Icon
               icon="i-lucide-search"
-              class="absolute top-2 size-3.5 ltr:left-3 rtl:right-3"
+              class="absolute top-3 size-3.5 ltr:left-3 rtl:right-3"
             />
           </template>
         </Input>

app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useMapGetter } from 'dashboard/composables/store';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import WhatsappTemplate from './WhatsappTemplate.vue';
 
@@ -77,11 +78,7 @@ const handleSendMessage = template => {
       class="absolute top-full mt-1.5 max-h-96 overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-2 p-4 items-center w-[21.875rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
     >
       <div class="relative w-full">
-        <Icon
-          icon="i-lucide-search"
-          class="absolute size-3.5 top-2 ltr:left-3 rtl:right-3"
-        />
-        <input
+        <Input
           v-model="searchQuery"
           type="search"
           :placeholder="
@@ -89,8 +86,15 @@ const handleSendMessage = template => {
               'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
             )
           "
-          class="w-full h-8 py-2 ltr:pl-10 rtl:pr-10 ltr:pr-2 rtl:pl-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
-        />
+          class="ltr:!pl-8 rtl:!pr-8"
+        >
+          <template #prefix>
+            <Icon
+              icon="i-lucide-search"
+              class="absolute top-3 size-3.5 ltr:left-3 rtl:right-3"
+            />
+          </template>
+        </Input>
       </div>
       <div
         v-for="template in filteredTemplates"

app/javascript/dashboard/components-next/input/Input.vue

@@ -1,5 +1,8 @@
 <script setup>
 import { computed, ref, onMounted, nextTick, getCurrentInstance } from 'vue';
+import { useToggle } from '@vueuse/core';
+import Button from 'dashboard/components-next/button/Button.vue';
+
 const props = defineProps({
   modelValue: { type: [String, Number], default: '' },
   type: { type: String, default: 'text' },
@@ -17,10 +20,10 @@ const props = defineProps({
   messageType: {
     type: String,
     default: 'info',
-    validator: value => ['info', 'error', 'success'].includes(value),
+    validator: value => !value || ['info', 'error', 'success'].includes(value),
   },
-  min: { type: String, default: '' },
-  max: { type: String, default: '' },
+  min: { type: [String, Number], default: '' },
+  max: { type: [String, Number], default: '' },
   autofocus: { type: Boolean, default: false },
 });
 
@@ -32,6 +35,10 @@ const emit = defineEmits([
   'enter',
 ]);
 
+defineOptions({
+  inheritAttrs: false,
+});
+
 // Generate a unique ID per component instance when `id` prop is not provided.
 const { uid } = getCurrentInstance();
 const uniqueId = computed(() => props.id || `input-${uid}`);
@@ -39,25 +46,42 @@ const uniqueId = computed(() => props.id || `input-${uid}`);
 const isFocused = ref(false);
 const inputRef = ref(null);
 
-const messageClass = computed(() => {
-  switch (props.messageType) {
-    case 'error':
-      return 'text-n-ruby-9 dark:text-n-ruby-9';
-    case 'success':
-      return 'text-n-teal-10 dark:text-n-teal-10';
-    default:
-      return 'text-n-slate-11 dark:text-n-slate-11';
+const FIELDS = {
+  TEXT: 'text',
+  PASSWORD: 'password',
+};
+
+const [isPasswordVisible, togglePasswordVisibility] = useToggle();
+
+const isPasswordField = computed(() => props.type === FIELDS.PASSWORD);
+
+const currentInputType = computed(() => {
+  if (isPasswordField.value) {
+    return isPasswordVisible.value ? FIELDS.TEXT : FIELDS.PASSWORD;
   }
+  return props.type;
 });
 
-const inputOutlineClass = computed(() => {
-  switch (props.messageType) {
-    case 'error':
-      return 'outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8';
-    default:
-      return 'outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 disabled:outline-n-weak dark:disabled:outline-n-weak focus:outline-n-brand dark:focus:outline-n-brand';
-  }
-});
+const MESSAGE_STYLES = {
+  error: 'text-n-ruby-9 dark:text-n-ruby-9',
+  success: 'text-n-teal-10 dark:text-n-teal-10',
+  info: 'text-n-slate-11 dark:text-n-slate-11',
+};
+
+const OUTLINE_STYLES = {
+  error:
+    'outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8',
+  default:
+    'outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 disabled:outline-n-weak dark:disabled:outline-n-weak focus:outline-n-brand dark:focus:outline-n-brand',
+};
+
+const messageClass = computed(
+  () => MESSAGE_STYLES[props.messageType || 'info'] || MESSAGE_STYLES.info
+);
+
+const inputOutlineClass = computed(
+  () => OUTLINE_STYLES[props.messageType || 'info'] || OUTLINE_STYLES.default
+);
 
 const handleInput = event => {
   let value = event.target.value;
@@ -104,7 +128,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="relative flex flex-col min-w-0 gap-1">
+  <div class="relative flex flex-col min-w-0 gap-1 w-full">
     <label
       v-if="label"
       :for="uniqueId"
@@ -112,40 +136,57 @@ onMounted(() => {
     >
       {{ label }}
     </label>
-    <!-- Added prefix slot to allow adding icons to the input -->
-    <slot name="prefix" />
-    <input
-      :id="uniqueId"
-      v-bind="$attrs"
-      ref="inputRef"
-      :value="modelValue"
-      :class="[
-        customInputClass,
-        inputOutlineClass,
-        sizeClass,
-        {
-          error: messageType === 'error',
-          focus: isFocused,
-        },
-      ]"
-      :type="type"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :min="['date', 'datetime-local', 'time'].includes(type) ? min : undefined"
-      :max="
-        ['date', 'datetime-local', 'time', 'number'].includes(type)
-          ? max
-          : undefined
-      "
-      class="block w-full reset-base text-sm !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-      @input="handleInput"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @keyup.enter="handleEnter"
-    />
+    <div class="relative flex min-w-0 items-center">
+      <!-- Added prefix slot to allow adding icons to the input -->
+      <slot name="prefix" />
+      <input
+        :id="uniqueId"
+        ref="inputRef"
+        v-bind="$attrs"
+        :value="modelValue"
+        :class="[
+          customInputClass,
+          inputOutlineClass,
+          sizeClass,
+          {
+            error: messageType === 'error',
+            focus: isFocused,
+            'ltr:!pr-10 rtl:!pl-10': isPasswordField,
+          },
+        ]"
+        :type="currentInputType"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :min="
+          ['date', 'datetime-local', 'time'].includes(type) ? min : undefined
+        "
+        :max="
+          ['date', 'datetime-local', 'time', 'number'].includes(type)
+            ? max
+            : undefined
+        "
+        class="block w-full reset-base text-sm !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @keyup.enter="handleEnter"
+      />
+      <Button
+        v-if="isPasswordField"
+        type="button"
+        slate
+        sm
+        link
+        class="absolute inset-y-0 ltr:right-3.5 rtl:left-3.5"
+        :icon="isPasswordVisible ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+        :aria-label="isPasswordVisible ? 'Hide password' : 'Show password'"
+        :aria-pressed="isPasswordVisible"
+        @click="togglePasswordVisibility()"
+      />
+    </div>
     <p
       v-if="message"
-      class="min-w-0 mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+      class="min-w-0 mt-0.5 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
       :class="messageClass"
     >
       {{ message }}

app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue

@@ -163,7 +163,7 @@ watch(
   <div>
     <div
       v-on-clickaway="() => closeCountryDropdown()"
-      class="relative flex items-center h-8 transition-all duration-500 ease-in-out outline outline-1 outline-offset-[-1px] rounded-lg bg-n-alpha-black2"
+      class="relative flex items-center h-8 transition-all duration-500 ease-in-out outline outline-1 outline-offset-[-1px] w-full rounded-lg bg-n-alpha-black2"
       :class="[inputBorderClass, { 'cursor-not-allowed opacity-50': disabled }]"
     >
       <Input
@@ -171,8 +171,7 @@ watch(
         type="tel"
         :placeholder="placeholder"
         :disabled="disabled"
-        custom-input-class="!border-0 !outline-none h-8 !py-0.5 !bg-transparent ltr:!pl-1 rtl:!pr-1"
-        class="w-full !flex-row"
+        class="!border-0 !outline-none h-8 !py-0.5 !bg-transparent ltr:!pl-1 rtl:!pr-1"
       >
         <template #prefix>
           <div class="flex items-center flex-shrink-0">
@@ -186,7 +185,7 @@ watch(
               trailing-icon
               :disabled="disabled"
               type="button"
-              class="!h-[1.875rem] top-1 ltr:ml-px rtl:mr-px !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
+              class="!h-[1.875rem] top-1 ltr:ml-px rtl:mr-px !px-2 outline-0 !outline-none !rounded-[7px] border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
               @click="toggleCountryDropdown"
             >
               <span

app/javascript/dashboard/components/auth/MfaVerification.vue

@@ -7,7 +7,7 @@ import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 import { useAccount } from 'dashboard/composables/useAccount';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
-import FormInput from 'v3/components/Form/Input.vue';
+import FormInput from 'dashboard/components-next/input/Input.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 
@@ -200,7 +200,7 @@ const handleTryAnotherMethod = () => {
       <form class="space-y-4" @submit.prevent="handleVerification">
         <!-- OTP Code Input -->
         <div v-if="verificationMethod === OTP">
-          <label class="block text-sm font-medium text-n-slate-12 mb-2">
+          <label class="block text-sm font-medium text-n-slate-12 mb-1.5">
             {{ $t('MFA_VERIFICATION.ENTER_OTP_CODE') }}
           </label>
           <div class="flex justify-between gap-2">
@@ -213,7 +213,7 @@ const handleTryAnotherMethod = () => {
               maxlength="1"
               pattern="[0-9]"
               inputmode="numeric"
-              class="w-12 h-12 text-center text-lg font-semibold border-2 border-n-weak hover:border-n-strong rounded-lg focus:border-n-brand bg-n-alpha-black2 text-n-slate-12 placeholder:text-n-slate-10"
+              class="w-12 h-10 text-center text-lg font-semibold outline outline-1 outline-n-weak hover:outline-n-slate-6 rounded-lg focus:outline-n-brand bg-n-alpha-black2 text-n-slate-12 placeholder:text-n-slate-10"
               @input="handleOtpInput(i)"
               @keydown.left.prevent="focusInput(i - 1)"
               @keydown.right.prevent="focusInput(i + 1)"
@@ -229,6 +229,7 @@ const handleTryAnotherMethod = () => {
             v-model="backupCode"
             name="backup_code"
             type="text"
+            autocomplete="one-time-code"
             data-testid="backup_code_input"
             :tabindex="1"
             required

app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue

@@ -1,6 +1,6 @@
 <script>
 import validations from './helpers/validations';
-import FormInput from 'v3/components/Form/Input.vue';
+import FormInput from 'dashboard/components-next/input/Input.vue';
 import { reactive } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 
@@ -69,21 +69,19 @@ export default {
       <FormInput
         v-model="state.title"
         name="title"
-        spacing="compact"
         :label="$t('TEAMS_SETTINGS.FORM.NAME.LABEL')"
         :placeholder="$t('TEAMS_SETTINGS.FORM.NAME.PLACEHOLDER')"
-        :has-error="v$.title.$error"
-        :error-message="v$.title.$error ? v$.title.$errors[0].$message : ''"
+        :message-type="v$.title.$error ? 'error' : ''"
+        :message="v$.title.$error ? v$.title.$errors[0].$message : ''"
         @blur="v$.title.$touch"
       />
       <FormInput
         v-model="state.description"
         name="description"
-        spacing="compact"
         :label="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.LABEL')"
         :placeholder="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.PLACEHOLDER')"
-        :has-error="v$.description.$error"
-        :error-message="
+        :message-type="v$.description.$error ? 'error' : ''"
+        :message="
           v$.description.$error ? v$.description.$errors[0].$message : ''
         "
         @blur="v$.description.$touch"

app/javascript/v3/App.vue

@@ -1,48 +1,51 @@
-<script>
+<script setup>
+import { ref, onMounted, getCurrentInstance } from 'vue';
 import SnackbarContainer from './components/SnackBar/Container.vue';
 
-export default {
-  components: { SnackbarContainer },
-  data() {
-    return { theme: 'light' };
-  },
-  mounted() {
-    this.setColorTheme();
-    this.listenToThemeChanges();
-    this.setLocale(window.chatwootConfig.selectedLocale);
-  },
-  methods: {
-    setColorTheme() {
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        this.theme = 'dark';
-        document.documentElement.classList.add('dark');
-      } else {
-        this.theme = 'light';
-        document.documentElement.classList.remove('dark');
-      }
-    },
-    listenToThemeChanges() {
-      const mql = window.matchMedia('(prefers-color-scheme: dark)');
+const theme = ref('light');
 
-      mql.onchange = e => {
-        if (e.matches) {
-          this.theme = 'dark';
-          document.documentElement.classList.add('dark');
-        } else {
-          this.theme = 'light';
-          document.documentElement.classList.remove('dark');
-        }
-      };
-    },
-    setLocale(locale) {
-      this.$root.$i18n.locale = locale;
-    },
-  },
+const setColorTheme = () => {
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    theme.value = 'dark';
+    document.documentElement.classList.add('dark');
+  } else {
+    theme.value = 'light';
+    document.documentElement.classList.remove('dark');
+  }
 };
+
+const listenToThemeChanges = () => {
+  const mql = window.matchMedia('(prefers-color-scheme: dark)');
+
+  mql.onchange = e => {
+    if (e.matches) {
+      theme.value = 'dark';
+      document.documentElement.classList.add('dark');
+    } else {
+      theme.value = 'light';
+      document.documentElement.classList.remove('dark');
+    }
+  };
+};
+
+const setLocale = locale => {
+  const instance = getCurrentInstance();
+  if (instance) {
+    instance.appContext.config.globalProperties.$i18n.locale = locale;
+  }
+};
+
+onMounted(() => {
+  // Add background color class once - it automatically handles light/dark modes
+  document.documentElement.classList.add('bg-n-background');
+  setColorTheme();
+  listenToThemeChanges();
+  setLocale(window.chatwootConfig.selectedLocale);
+});
 </script>
 
 <template>
-  <div class="h-full min-h-screen w-full antialiased" :class="theme">
+  <div class="h-full min-h-screen w-full antialiased" dir="ltr" :class="theme">
     <router-view />
     <SnackbarContainer />
   </div>

app/javascript/v3/components/GoogleOauth/Button.vue

@@ -34,7 +34,7 @@ export default {
   <div class="flex flex-col">
     <a
       :href="getGoogleAuthUrl()"
-      class="inline-flex justify-center w-full px-4 py-3 bg-n-background dark:bg-n-solid-3 items-center rounded-md shadow-sm ring-1 ring-inset ring-n-container dark:ring-n-container focus:outline-offset-0 hover:bg-n-alpha-2 dark:hover:bg-n-alpha-2"
+      class="inline-flex justify-center w-full px-4 py-3 items-center bg-n-background dark:bg-n-solid-3 rounded-lg shadow-sm ring-1 ring-inset ring-n-container dark:ring-n-container focus:outline-offset-0 hover:bg-n-alpha-2 dark:hover:bg-n-alpha-2"
     >
       <span class="i-logos-google-icon h-6" />
       <span class="ml-2 text-base font-medium text-n-slate-12">

app/javascript/v3/views/auth/confirmation/Index.vue

@@ -1,32 +1,30 @@
-<script>
+<script setup>
+import { onMounted } from 'vue';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import { verifyPasswordToken } from '../../../api/auth';
 import Spinner from 'shared/components/Spinner.vue';
 
-export default {
-  components: { Spinner },
-  props: {
-    confirmationToken: {
-      type: String,
-      default: '',
-    },
-  },
-  mounted() {
-    this.confirmToken();
-  },
-  methods: {
-    async confirmToken() {
-      try {
-        await verifyPasswordToken({
-          confirmationToken: this.confirmationToken,
-        });
-        window.location = DEFAULT_REDIRECT_URL;
-      } catch (error) {
-        window.location = DEFAULT_REDIRECT_URL;
-      }
-    },
+const props = defineProps({
+  confirmationToken: {
+    type: String,
+    default: '',
   },
+});
+
+const confirmToken = async () => {
+  try {
+    await verifyPasswordToken({
+      confirmationToken: props.confirmationToken,
+    });
+    window.location = DEFAULT_REDIRECT_URL;
+  } catch (error) {
+    window.location = DEFAULT_REDIRECT_URL;
+  }
 };
+
+onMounted(() => {
+  confirmToken();
+});
 </script>
 
 <template>

app/javascript/v3/views/auth/password/Edit.vue

@@ -1,88 +1,72 @@
-<script>
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
+import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
-import FormInput from '../../../components/Form/Input.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import { setNewPassword } from '../../../api/auth';
 
-export default {
-  components: {
-    FormInput,
-    NextButton,
-  },
-  props: {
-    resetPasswordToken: { type: String, default: '' },
-  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      // We need to initialize the component with any
-      // properties that will be used in it
-      credentials: {
-        confirmPassword: '',
-        password: '',
-      },
-      newPasswordAPI: {
-        message: '',
-        showLoading: false,
-      },
-      error: '',
-    };
-  },
-  mounted() {
-    // If url opened without token
-    // redirect to login
-    if (!this.resetPasswordToken) {
-      window.location = DEFAULT_REDIRECT_URL;
-    }
-  },
-  validations: {
-    credentials: {
-      password: {
-        required,
-        minLength: minLength(6),
-      },
-      confirmPassword: {
-        required,
-        minLength: minLength(6),
-        isEqPassword(value) {
-          if (value !== this.credentials.password) {
-            return false;
-          }
-          return true;
-        },
+const props = defineProps({
+  resetPasswordToken: { type: String, default: '' },
+});
+
+const { t } = useI18n();
+
+const credentials = reactive({
+  confirmPassword: '',
+  password: '',
+});
+
+const showLoading = ref(false);
+
+const rules = computed(() => ({
+  credentials: {
+    password: {
+      required,
+      minLength: minLength(6),
+    },
+    confirmPassword: {
+      required,
+      minLength: minLength(6),
+      isEqPassword(value) {
+        return value === credentials.password;
       },
     },
   },
-  methods: {
-    showAlertMessage(message) {
-      // Reset loading, current selected agent
-      this.newPasswordAPI.showLoading = false;
-      useAlert(message);
-    },
-    submitForm() {
-      this.newPasswordAPI.showLoading = true;
-      const credentials = {
-        confirmPassword: this.credentials.confirmPassword,
-        password: this.credentials.password,
-        resetPasswordToken: this.resetPasswordToken,
-      };
-      setNewPassword(credentials)
-        .then(() => {
-          window.location = DEFAULT_REDIRECT_URL;
-        })
-        .catch(error => {
-          this.showAlertMessage(
-            error?.message || this.$t('SET_NEW_PASSWORD.API.ERROR_MESSAGE')
-          );
-        });
-    },
-  },
+}));
+
+const v$ = useVuelidate(rules, { credentials });
+
+const showAlertMessage = message => {
+  showLoading.value = false;
+  useAlert(message);
 };
+
+const submitForm = async () => {
+  showLoading.value = true;
+  const credentialsData = {
+    confirmPassword: credentials.confirmPassword,
+    password: credentials.password,
+    resetPasswordToken: props.resetPasswordToken,
+  };
+
+  try {
+    await setNewPassword(credentialsData);
+    window.location = DEFAULT_REDIRECT_URL;
+  } catch (error) {
+    showAlertMessage(error?.message || t('SET_NEW_PASSWORD.API.ERROR_MESSAGE'));
+  }
+};
+
+onMounted(() => {
+  // If url opened without token, redirect to login
+  if (!props.resetPasswordToken) {
+    window.location = DEFAULT_REDIRECT_URL;
+  }
+});
 </script>
 
 <template>
@@ -99,24 +83,32 @@ export default {
         {{ $t('SET_NEW_PASSWORD.TITLE') }}
       </h1>
 
-      <div class="space-y-5">
-        <FormInput
+      <div class="space-y-6 mt-5">
+        <Input
           v-model="credentials.password"
-          class="mt-3"
           name="password"
           type="password"
-          :has-error="v$.credentials.password.$error"
-          :error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
+          autocomplete="new-password"
+          :message-type="v$.credentials.password.$error ? 'error' : ''"
+          :message="
+            v$.credentials.password.$error
+              ? $t('SET_NEW_PASSWORD.PASSWORD.ERROR')
+              : ''
+          "
           :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
           @blur="v$.credentials.password.$touch"
         />
-        <FormInput
+        <Input
           v-model="credentials.confirmPassword"
-          class="mt-3"
           name="confirm_password"
           type="password"
-          :has-error="v$.credentials.confirmPassword.$error"
-          :error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
+          autocomplete="confirm-password"
+          :message-type="v$.credentials.confirmPassword.$error ? 'error' : ''"
+          :message="
+            v$.credentials.confirmPassword.$error
+              ? $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')
+              : ''
+          "
           :placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
           @blur="v$.credentials.confirmPassword.$touch"
         />
@@ -129,9 +121,9 @@ export default {
           :disabled="
             v$.credentials.password.$invalid ||
             v$.credentials.confirmPassword.$invalid ||
-            newPasswordAPI.showLoading
+            showLoading
           "
-          :is-loading="newPasswordAPI.showLoading"
+          :is-loading="showLoading"
         />
       </div>
     </form>

app/javascript/v3/views/auth/reset/password/Index.vue

@@ -1,64 +1,54 @@
-<script>
+<script setup>
+import { ref, reactive, computed } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
-import { useAlert } from 'dashboard/composables';
 import { required, minLength, email } from '@vuelidate/validators';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
 import { useBranding } from 'shared/composables/useBranding';
-import FormInput from '../../../../components/Form/Input.vue';
 import { resetPassword } from '../../../../api/auth';
+import Input from 'dashboard/components-next/input/Input.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
-export default {
-  components: { FormInput, NextButton },
-  setup() {
-    const { replaceInstallationName } = useBranding();
-    return { v$: useVuelidate(), replaceInstallationName };
-  },
-  data() {
-    return {
-      credentials: { email: '' },
-      resetPassword: {
-        message: '',
-        showLoading: false,
-      },
-      error: '',
-    };
-  },
-  validations() {
-    return {
-      credentials: {
-        email: {
-          required,
-          email,
-          minLength: minLength(4),
-        },
-      },
-    };
-  },
-  methods: {
-    showAlertMessage(message) {
-      // Reset loading, current selected agent
-      this.resetPassword.showLoading = false;
-      useAlert(message);
-    },
-    submit() {
-      this.resetPassword.showLoading = true;
-      resetPassword(this.credentials)
-        .then(res => {
-          let successMessage = this.$t('RESET_PASSWORD.API.SUCCESS_MESSAGE');
-          if (res.data && res.data.message) {
-            successMessage = res.data.message;
-          }
-          this.showAlertMessage(successMessage);
-        })
-        .catch(error => {
-          let errorMessage = this.$t('RESET_PASSWORD.API.ERROR_MESSAGE');
-          if (error?.response?.data?.message) {
-            errorMessage = error.response.data.message;
-          }
-          this.showAlertMessage(errorMessage);
-        });
+const { t } = useI18n();
+const { replaceInstallationName } = useBranding();
+
+const credentials = reactive({ email: '' });
+const showLoading = ref(false);
+
+const rules = computed(() => ({
+  credentials: {
+    email: {
+      required,
+      email,
+      minLength: minLength(4),
     },
   },
+}));
+
+const v$ = useVuelidate(rules, { credentials });
+
+const showAlertMessage = message => {
+  showLoading.value = false;
+  useAlert(message);
+};
+
+const submit = async () => {
+  showLoading.value = true;
+
+  try {
+    const res = await resetPassword(credentials);
+    let successMessage = t('RESET_PASSWORD.API.SUCCESS_MESSAGE');
+    if (res.data && res.data.message) {
+      successMessage = res.data.message;
+    }
+    showAlertMessage(successMessage);
+  } catch (error) {
+    let errorMessage = t('RESET_PASSWORD.API.ERROR_MESSAGE');
+    if (error?.response?.data?.message) {
+      errorMessage = error.response.data.message;
+    }
+    showAlertMessage(errorMessage);
+  }
 };
 </script>
 
@@ -81,11 +71,15 @@ export default {
         {{ replaceInstallationName($t('RESET_PASSWORD.DESCRIPTION')) }}
       </p>
       <div class="space-y-5">
-        <FormInput
+        <Input
           v-model="credentials.email"
           name="email_address"
-          :has-error="v$.credentials.email.$error"
-          :error-message="$t('RESET_PASSWORD.EMAIL.ERROR')"
+          autocomplete="email"
+          type="email"
+          :message="
+            v$.credentials.email.$error ? $t('RESET_PASSWORD.EMAIL.ERROR') : ''
+          "
+          :message-type="v$.credentials.email.$error ? 'error' : ''"
           :placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
           @input="v$.credentials.email.$touch"
         />
@@ -95,8 +89,8 @@ export default {
           data-testid="submit_button"
           class="w-full"
           :label="$t('RESET_PASSWORD.SUBMIT')"
-          :disabled="v$.credentials.email.$invalid || resetPassword.showLoading"
-          :is-loading="resetPassword.showLoading"
+          :disabled="v$.credentials.email.$invalid || showLoading"
+          :is-loading="showLoading"
         />
       </div>
       <p class="mt-4 -mb-1 text-sm text-n-slate-11">

app/javascript/v3/views/auth/signup/Index.vue

@@ -1,38 +1,28 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
 import { useBranding } from 'shared/composables/useBranding';
 import SignupForm from './components/Signup/Form.vue';
 import Testimonials from './components/Testimonials/Index.vue';
 import Spinner from 'shared/components/Spinner.vue';
 
-export default {
-  components: {
-    SignupForm,
-    Spinner,
-    Testimonials,
-  },
-  setup() {
-    const { replaceInstallationName } = useBranding();
-    return { replaceInstallationName };
-  },
-  data() {
-    return { isLoading: false };
-  },
-  computed: {
-    ...mapGetters({ globalConfig: 'globalConfig/get' }),
-    isAChatwootInstance() {
-      return this.globalConfig.installationName === 'Chatwoot';
-    },
-  },
-  beforeMount() {
-    this.isLoading = this.isAChatwootInstance;
-  },
-  methods: {
-    resizeContainers() {
-      this.isLoading = false;
-    },
-  },
+const { replaceInstallationName } = useBranding();
+
+const globalConfig = useMapGetter('globalConfig/get');
+
+const isLoading = ref(false);
+
+const isAChatwootInstance = computed(() => {
+  return globalConfig.value.installationName === 'Chatwoot';
+});
+
+const resizeContainers = () => {
+  isLoading.value = false;
 };
+
+onBeforeMount(() => {
+  isLoading.value = isAChatwootInstance.value;
+});
 </script>
 
 <template>
@@ -62,8 +52,8 @@ export default {
           </div>
           <SignupForm />
           <div class="px-1 text-sm text-n-slate-12">
-            <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }} </span>
-            <router-link class="text-link text-n-brand" to="/app/login">
+            <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
+            <router-link class="text-link text-n-brand mx-1" to="/app/login">
               {{ replaceInstallationName($t('LOGIN.TITLE')) }}
             </router-link>
           </div>

app/javascript/v3/views/auth/signup/components/Signup/Form.vue

@@ -1,188 +1,196 @@
-<script>
+<script setup>
+import { ref, reactive, computed } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
-import { required, minLength, email, sameAs } from '@vuelidate/validators';
-import { mapGetters } from 'vuex';
+import { required, minLength, email } from '@vuelidate/validators';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
 import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 import SimpleDivider from '../../../../../components/Divider/SimpleDivider.vue';
-import FormInput from '../../../../../components/Form/Input.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
 import { isValidPassword } from 'shared/helpers/Validators';
 import GoogleOAuthButton from '../../../../../components/GoogleOauth/Button.vue';
 import { register } from '../../../../../api/auth';
 import * as CompanyEmailValidator from 'company-email-validator';
+import PasswordRequirements from './PasswordRequirements.vue';
 
 const MIN_PASSWORD_LENGTH = 6;
-const SPECIAL_CHAR_REGEX = /[!@#$%^&*()_+\-=[\]{}|'"/\\.,`<>:;?~]/;
 
-export default {
-  components: {
-    FormInput,
-    GoogleOAuthButton,
-    NextButton,
-    SimpleDivider,
-    Icon,
-    VueHcaptcha,
-  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
-  data() {
-    return {
-      credentials: {
-        accountName: '',
-        fullName: '',
-        email: '',
-        password: '',
-        confirmPassword: '',
-        hCaptchaClientResponse: '',
+const store = useStore();
+const { t } = useI18n();
+
+const hCaptcha = ref(null);
+const credentials = reactive({
+  accountName: '',
+  fullName: '',
+  email: '',
+  password: '',
+  hCaptchaClientResponse: '',
+});
+const didCaptchaReset = ref(false);
+const isSignupInProgress = ref(false);
+const isPasswordFocused = ref(false);
+
+const rules = computed(() => ({
+  credentials: {
+    accountName: {
+      required,
+      minLength: minLength(2),
+    },
+    fullName: {
+      required,
+      minLength: minLength(2),
+    },
+    email: {
+      required,
+      email,
+      businessEmailValidator(value) {
+        return CompanyEmailValidator.isCompanyEmail(value);
       },
-      didCaptchaReset: false,
-      isSignupInProgress: false,
-      error: '',
-    };
-  },
-  validations() {
-    return {
-      credentials: {
-        accountName: {
-          required,
-          minLength: minLength(2),
-        },
-        fullName: {
-          required,
-          minLength: minLength(2),
-        },
-        email: {
-          required,
-          email,
-          businessEmailValidator(value) {
-            return CompanyEmailValidator.isCompanyEmail(value);
-          },
-        },
-        password: {
-          required,
-          isValidPassword,
-          minLength: minLength(MIN_PASSWORD_LENGTH),
-        },
-        confirmPassword: {
-          required,
-          minLength: minLength(MIN_PASSWORD_LENGTH),
-          sameAsPassword: sameAs(this.credentials.password),
-        },
-      },
-    };
-  },
-  computed: {
-    ...mapGetters({ globalConfig: 'globalConfig/get' }),
-    termsLink() {
-      return this.$t('REGISTER.TERMS_ACCEPT')
-        .replace('https://www.chatwoot.com/terms', this.globalConfig.termsURL)
-        .replace(
-          'https://www.chatwoot.com/privacy-policy',
-          this.globalConfig.privacyURL
-        );
     },
-    hasAValidCaptcha() {
-      if (this.globalConfig.hCaptchaSiteKey) {
-        return !!this.credentials.hCaptchaClientResponse;
-      }
-      return true;
-    },
-    confirmPasswordErrorText() {
-      const { confirmPassword } = this.v$.credentials;
-      if (!confirmPassword.$error) return '';
-      if (confirmPassword.sameAsPassword.$invalid) {
-        return this.$t('REGISTER.CONFIRM_PASSWORD.ERROR');
-      }
-      return '';
-    },
-    showGoogleOAuth() {
-      return Boolean(window.chatwootConfig.googleOAuthClientId);
-    },
-    isFormValid() {
-      return !this.v$.$invalid && this.hasAValidCaptcha;
-    },
-    passwordRequirements() {
-      const password = this.credentials.password || '';
-      return {
-        length: password.length >= MIN_PASSWORD_LENGTH,
-        uppercase: /[A-Z]/.test(password),
-        lowercase: /[a-z]/.test(password),
-        number: /[0-9]/.test(password),
-        special: SPECIAL_CHAR_REGEX.test(password),
-      };
-    },
-    passwordRequirementItems() {
-      const reqs = this.passwordRequirements;
-      return [
-        {
-          id: 'length',
-          met: reqs.length,
-          label: this.$t('REGISTER.PASSWORD.REQUIREMENTS_LENGTH', {
-            min: MIN_PASSWORD_LENGTH,
-          }),
-        },
-        {
-          id: 'uppercase',
-          met: reqs.uppercase,
-          label: this.$t('REGISTER.PASSWORD.REQUIREMENTS_UPPERCASE'),
-        },
-        {
-          id: 'lowercase',
-          met: reqs.lowercase,
-          label: this.$t('REGISTER.PASSWORD.REQUIREMENTS_LOWERCASE'),
-        },
-        {
-          id: 'number',
-          met: reqs.number,
-          label: this.$t('REGISTER.PASSWORD.REQUIREMENTS_NUMBER'),
-        },
-        {
-          id: 'special',
-          met: reqs.special,
-          label: this.$t('REGISTER.PASSWORD.REQUIREMENTS_SPECIAL'),
-        },
-      ];
-    },
-    passwordRequirementsMet() {
-      return Object.values(this.passwordRequirements).every(Boolean);
-    },
-  },
-  methods: {
-    async submit() {
-      this.v$.$touch();
-      if (this.v$.$invalid) {
-        this.resetCaptcha();
-        return;
-      }
-      this.isSignupInProgress = true;
-      try {
-        await register(this.credentials);
-        window.location = DEFAULT_REDIRECT_URL;
-      } catch (error) {
-        let errorMessage =
-          error?.message || this.$t('REGISTER.API.ERROR_MESSAGE');
-        this.resetCaptcha();
-        useAlert(errorMessage);
-      } finally {
-        this.isSignupInProgress = false;
-      }
-    },
-    onRecaptchaVerified(token) {
-      this.credentials.hCaptchaClientResponse = token;
-      this.didCaptchaReset = false;
-      this.v$.$touch();
-    },
-    resetCaptcha() {
-      if (!this.globalConfig.hCaptchaSiteKey) return;
-      this.$refs.hCaptcha.reset();
-      this.credentials.hCaptchaClientResponse = '';
-      this.didCaptchaReset = true;
+    password: {
+      required,
+      isValidPassword,
+      minLength: minLength(MIN_PASSWORD_LENGTH),
     },
   },
+}));
+
+const v$ = useVuelidate(rules, { credentials });
+
+const blurredFields = reactive({
+  fullName: false,
+  accountName: false,
+  email: false,
+  password: false,
+});
+
+const shouldShowError = fieldName => {
+  // only when field has content and was blurred
+  const field = v$.value.credentials[fieldName];
+  const hasValue = credentials[fieldName] && credentials[fieldName].length > 0;
+  return hasValue && blurredFields[fieldName] && field.$error;
+};
+
+const shouldShowPasswordRequirementError = computed(() => {
+  const hasValue =
+    Boolean(credentials.password) && credentials.password.length > 0;
+  return hasValue && v$.value.credentials.password.$error;
+});
+
+const globalConfig = computed(() => store.getters['globalConfig/get']);
+
+const termsLink = computed(() => {
+  return t('REGISTER.TERMS_ACCEPT')
+    .replace('https://www.chatwoot.com/terms', globalConfig.value.termsURL)
+    .replace(
+      'https://www.chatwoot.com/privacy-policy',
+      globalConfig.value.privacyURL
+    );
+});
+
+const hasAValidCaptcha = computed(() => {
+  if (globalConfig.value.hCaptchaSiteKey) {
+    return !!credentials.hCaptchaClientResponse;
+  }
+  return true;
+});
+
+const showGoogleOAuth = computed(() => {
+  return Boolean(window.chatwootConfig.googleOAuthClientId);
+});
+
+const isFormValid = computed(() => {
+  return !v$.value.$invalid;
+});
+const resetCaptcha = () => {
+  if (!globalConfig.value.hCaptchaSiteKey) return;
+  hCaptcha.value.reset();
+  credentials.hCaptchaClientResponse = '';
+  didCaptchaReset.value = true;
+};
+
+const submit = async () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) {
+    resetCaptcha();
+    return;
+  }
+
+  // For invisible captcha, there is no user input. We have to execute it if when
+  // the user submits the form. If 99.9% Passive mode is enabled, the users won't
+  // be prompted to solve the captcha
+  if (
+    globalConfig.value.hCaptchaSiteKey &&
+    !credentials.hCaptchaClientResponse
+  ) {
+    hCaptcha.value.execute();
+    return;
+  }
+
+  isSignupInProgress.value = true;
+  try {
+    await register(credentials);
+    window.location = DEFAULT_REDIRECT_URL;
+  } catch (error) {
+    let errorMessage = error?.message || t('REGISTER.API.ERROR_MESSAGE');
+    resetCaptcha();
+    useAlert(errorMessage);
+  } finally {
+    isSignupInProgress.value = false;
+  }
+};
+
+const onRecaptchaVerified = token => {
+  credentials.hCaptchaClientResponse = token;
+  didCaptchaReset.value = false;
+  v$.value.$touch();
+  // Auto-submit after captcha verification for invisible mode
+  submit();
+};
+
+const onCaptchaExpired = () => {
+  credentials.hCaptchaClientResponse = '';
+  didCaptchaReset.value = true;
+};
+
+const onCaptchaError = () => {
+  credentials.hCaptchaClientResponse = '';
+  didCaptchaReset.value = true;
+  useAlert(t('SET_NEW_PASSWORD.CAPTCHA.ERROR'));
+};
+
+const handleFieldFocus = fieldName => {
+  // Clear blur state when user focuses field again
+  blurredFields[fieldName] = false;
+};
+
+const handleFieldBlur = fieldName => {
+  // Mark field as blurred and touch for validation
+  blurredFields[fieldName] = true;
+  v$.value.credentials[fieldName].$touch();
+};
+
+const handlePasswordInput = () => {
+  // Touch password field for real-time validation in requirements panel
+  if (credentials.password && credentials.password.length > 0) {
+    v$.value.credentials.password.$touch();
+  }
+};
+
+const handlePasswordFocus = () => {
+  handleFieldFocus('password');
+  isPasswordFocused.value = true;
+};
+
+const handlePasswordBlur = () => {
+  handleFieldBlur('password');
+  // Delay hiding requirements to allow submit button click to register
+  setTimeout(() => {
+    isPasswordFocused.value = false;
+  }, 150);
 };
 </script>
 
@@ -190,90 +198,78 @@ export default {
   <div class="flex-1 px-1 overflow-auto">
     <form class="space-y-3" @submit.prevent="submit">
       <div class="grid grid-cols-2 gap-2">
-        <FormInput
+        <Input
           v-model="credentials.fullName"
           name="full_name"
+          autocomplete="name"
           class="flex-1"
-          :class="{ error: v$.credentials.fullName.$error }"
           :label="$t('REGISTER.FULL_NAME.LABEL')"
           :placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
-          :has-error="v$.credentials.fullName.$error"
-          :error-message="$t('REGISTER.FULL_NAME.ERROR')"
-          @blur="v$.credentials.fullName.$touch"
+          :message-type="shouldShowError('fullName') ? 'error' : ''"
+          :message="
+            shouldShowError('fullName') ? $t('REGISTER.FULL_NAME.ERROR') : ''
+          "
+          @focus="handleFieldFocus('fullName')"
+          @blur="handleFieldBlur('fullName')"
         />
-        <FormInput
+        <Input
           v-model="credentials.accountName"
           name="account_name"
+          autocomplete="organization"
           class="flex-1"
-          :class="{ error: v$.credentials.accountName.$error }"
           :label="$t('REGISTER.COMPANY_NAME.LABEL')"
           :placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
-          :has-error="v$.credentials.accountName.$error"
-          :error-message="$t('REGISTER.COMPANY_NAME.ERROR')"
-          @blur="v$.credentials.accountName.$touch"
+          :message-type="shouldShowError('accountName') ? 'error' : ''"
+          :message="
+            shouldShowError('accountName')
+              ? $t('REGISTER.COMPANY_NAME.ERROR')
+              : ''
+          "
+          @focus="handleFieldFocus('accountName')"
+          @blur="handleFieldBlur('accountName')"
         />
       </div>
-      <FormInput
+      <Input
         v-model="credentials.email"
         type="email"
         name="email_address"
-        :class="{ error: v$.credentials.email.$error }"
+        autocomplete="email"
         :label="$t('REGISTER.EMAIL.LABEL')"
         :placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
-        :has-error="v$.credentials.email.$error"
-        :error-message="$t('REGISTER.EMAIL.ERROR')"
-        @blur="v$.credentials.email.$touch"
+        :message-type="shouldShowError('email') ? 'error' : ''"
+        :message="shouldShowError('email') ? $t('REGISTER.EMAIL.ERROR') : ''"
+        @focus="handleFieldFocus('email')"
+        @blur="handleFieldBlur('email')"
       />
-      <FormInput
+      <Input
         v-model="credentials.password"
         type="password"
         name="password"
-        :class="{ error: v$.credentials.password.$error }"
+        autocomplete="new-password"
         :label="$t('LOGIN.PASSWORD.LABEL')"
         :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
-        :has-error="v$.credentials.password.$error"
+        :message-type="shouldShowError('password') ? 'error' : ''"
         aria-describedby="password-requirements"
-        @blur="v$.credentials.password.$touch"
+        @input="handlePasswordInput"
+        @focus="handlePasswordFocus"
+        @blur="handlePasswordBlur"
       />
-      <div
-        id="password-requirements"
-        class="text-xs rounded-md px-4 py-3 outline outline-1 outline-n-weak bg-n-alpha-black2"
-      >
-        <ul role="list" class="grid grid-cols-2 gap-1">
-          <li
-            v-for="item in passwordRequirementItems"
-            :key="item.id"
-            class="inline-flex gap-1 items-start"
-          >
-            <Icon
-              class="flex-none flex-shrink-0 w-3 mt-0.5"
-              :icon="item.met ? 'i-lucide-circle-check-big' : 'i-lucide-circle'"
-              :class="item.met ? 'text-n-teal-10' : 'text-n-slate-10'"
-            />
-
-            <span :class="item.met ? 'text-n-slate-11' : 'text-n-slate-10'">
-              {{ item.label }}
-            </span>
-          </li>
-        </ul>
-      </div>
-      <FormInput
-        v-model="credentials.confirmPassword"
-        type="password"
-        name="confirm_password"
-        :class="{ error: v$.credentials.confirmPassword.$error }"
-        :label="$t('REGISTER.CONFIRM_PASSWORD.LABEL')"
-        :placeholder="$t('REGISTER.CONFIRM_PASSWORD.PLACEHOLDER')"
-        :has-error="v$.credentials.confirmPassword.$error"
-        :error-message="confirmPasswordErrorText"
-        @blur="v$.credentials.confirmPassword.$touch"
+      <PasswordRequirements
+        :password="credentials.password"
+        :open="isPasswordFocused"
+        :show-error="shouldShowPasswordRequirementError"
+        :min-length="MIN_PASSWORD_LENGTH"
       />
       <div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
         <VueHcaptcha
           ref="hCaptcha"
           :class="{ error: !hasAValidCaptcha && didCaptchaReset }"
           :sitekey="globalConfig.hCaptchaSiteKey"
+          size="invisible"
           @verify="onRecaptchaVerified"
+          @expired="onCaptchaExpired"
+          @challenge-expired="onCaptchaExpired"
+          @error="onCaptchaError"
         />
         <span
           v-if="!hasAValidCaptcha && didCaptchaReset"

app/javascript/v3/views/auth/signup/components/Signup/PasswordRequirements.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  password: { type: String, default: '' },
+  open: { type: Boolean, default: false },
+  showError: { type: Boolean, default: false },
+  minLength: { type: Number, default: 6 },
+});
+
+const SPECIAL_CHAR_REGEX = /[!@#$%^&*()_+\-=[\]{}|'"/\\.,`<>:;?~]/;
+
+const { t } = useI18n();
+
+const passwordRequirements = computed(() => {
+  const pwd = props.password || '';
+  return {
+    length: pwd.length >= props.minLength,
+    uppercase: /[A-Z]/.test(pwd),
+    lowercase: /[a-z]/.test(pwd),
+    number: /[0-9]/.test(pwd),
+    special: SPECIAL_CHAR_REGEX.test(pwd),
+  };
+});
+
+const passwordRequirementItems = computed(() => {
+  const reqs = passwordRequirements.value;
+  return [
+    {
+      id: 'length',
+      met: reqs.length,
+      label: t('REGISTER.PASSWORD.REQUIREMENTS_LENGTH', {
+        min: props.minLength,
+      }),
+    },
+    {
+      id: 'uppercase',
+      met: reqs.uppercase,
+      label: t('REGISTER.PASSWORD.REQUIREMENTS_UPPERCASE'),
+    },
+    {
+      id: 'lowercase',
+      met: reqs.lowercase,
+      label: t('REGISTER.PASSWORD.REQUIREMENTS_LOWERCASE'),
+    },
+    {
+      id: 'number',
+      met: reqs.number,
+      label: t('REGISTER.PASSWORD.REQUIREMENTS_NUMBER'),
+    },
+    {
+      id: 'special',
+      met: reqs.special,
+      label: t('REGISTER.PASSWORD.REQUIREMENTS_SPECIAL'),
+    },
+  ];
+});
+</script>
+
+<template>
+  <div
+    class="grid transition-all duration-300 ease-in-out"
+    :class="[open ? 'grid-rows-[1fr] !mt-1' : 'grid-rows-[0fr] !mt-0']"
+  >
+    <div class="overflow-hidden">
+      <Transition
+        enter-active-class="transition-all duration-300 ease-in-out"
+        leave-active-class="transition-all duration-300 ease-in-out"
+        enter-from-class="opacity-0 -translate-y-2"
+        enter-to-class="opacity-100 translate-y-0"
+        leave-from-class="opacity-100 translate-y-0"
+        leave-to-class="opacity-0 -translate-y-2"
+      >
+        <div
+          v-if="open"
+          id="password-requirements"
+          class="text-xs rounded-lg px-3 py-2.5 outline outline-1 -outline-offset-1 outline-n-weak bg-n-alpha-black2"
+        >
+          <ul role="list" class="grid grid-cols-2 gap-1">
+            <li
+              v-for="item in passwordRequirementItems"
+              :key="item.id"
+              class="inline-flex gap-1 items-start"
+            >
+              <Icon
+                class="flex-none flex-shrink-0 w-3 mt-0.5"
+                :icon="
+                  item.met
+                    ? 'i-lucide-circle-check'
+                    : showError
+                      ? 'i-lucide-circle-x'
+                      : 'i-lucide-circle-dot'
+                "
+                :class="
+                  item.met
+                    ? 'text-n-teal-9'
+                    : showError
+                      ? 'text-n-ruby-9'
+                      : 'text-n-slate-10'
+                "
+              />
+
+              <span
+                :class="
+                  item.met
+                    ? 'text-n-teal-11'
+                    : showError
+                      ? 'text-n-ruby-11'
+                      : 'text-n-slate-11'
+                "
+              >
+                {{ item.label }}
+              </span>
+            </li>
+          </ul>
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>

app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue

@@ -1,34 +1,32 @@
-<script>
+<script setup>
+import { ref, onBeforeMount } from 'vue';
 import TestimonialCard from './TestimonialCard.vue';
 import { getTestimonialContent } from '../../../../../api/testimonials';
-export default {
-  components: { TestimonialCard },
-  emits: ['resizeContainers'],
-  data() {
-    return { testimonials: [] };
-  },
-  beforeMount() {
-    this.fetchTestimonials();
-  },
-  methods: {
-    async fetchTestimonials() {
-      try {
-        const { data } = await getTestimonialContent();
-        this.testimonials = data;
-      } catch (error) {
-        // Ignoring the error as the UI wouldn't break
-      } finally {
-        this.$emit('resizeContainers', !!this.testimonials.length);
-      }
-    },
-  },
+
+const emit = defineEmits(['resizeContainers']);
+
+const testimonials = ref([]);
+
+const fetchTestimonials = async () => {
+  try {
+    const { data } = await getTestimonialContent();
+    testimonials.value = data;
+  } catch (error) {
+    // Ignoring the error as the UI wouldn't break
+  } finally {
+    emit('resizeContainers', !!testimonials.value.length);
+  }
 };
+
+onBeforeMount(() => {
+  fetchTestimonials();
+});
 </script>
 
 <template>
   <div
     v-show="testimonials.length"
-    class="relative flex-1 min-h-screen hidden overflow-hidden bg-n-blue-8 dark:bg-n-blue-5 xl:flex"
+    class="relative self-stretch hidden overflow-hidden bg-n-blue-8 dark:bg-n-blue-5 xl:flex"
   >
     <img
       src="assets/images/auth/top-left.svg"
@@ -42,9 +40,7 @@ export default {
       src="assets/images/auth/auth--bg.svg"
       class="h-[96%] left-[6%] top-[8%] w-[96%] absolute"
     />
-    <div
-      class="z-50 flex flex-col items-center justify-center w-full h-full min-h-screen"
-    >
+    <div class="z-50 flex flex-col items-center justify-center w-full h-full">
       <div class="flex items-start justify-center p-6">
         <TestimonialCard
           v-for="(testimonial, index) in testimonials"

app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue

@@ -1,24 +1,22 @@
-<script>
-export default {
-  props: {
-    reviewContent: {
-      type: String,
-      default: '',
-    },
-    authorImage: {
-      type: String,
-      default: '',
-    },
-    authorName: {
-      type: String,
-      default: '',
-    },
-    authorDesignation: {
-      type: String,
-      default: '',
-    },
+<script setup>
+defineProps({
+  reviewContent: {
+    type: String,
+    default: '',
   },
-};
+  authorImage: {
+    type: String,
+    default: '',
+  },
+  authorName: {
+    type: String,
+    default: '',
+  },
+  authorDesignation: {
+    type: String,
+    default: '',
+  },
+});
 </script>
 
 <template>

app/javascript/v3/views/login/Index.vue

@@ -1,24 +1,32 @@
-<script>
-// utils and composables
-import { login } from '../../api/auth';
-import { mapGetters } from 'vuex';
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { required, email as emailValidator } from '@vuelidate/validators';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 import { parseBoolean } from '@chatwoot/utils';
 import { useAlert } from 'dashboard/composables';
-import { required, email } from '@vuelidate/validators';
-import { useVuelidate } from '@vuelidate/core';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useBranding } from 'shared/composables/useBranding';
 import { SESSION_STORAGE_KEYS } from 'dashboard/constants/sessionStorage';
 import SessionStorage from 'shared/helpers/sessionStorage';
-import { useBranding } from 'shared/composables/useBranding';
-
-// components
+import { login } from '../../api/auth';
 import SimpleDivider from '../../components/Divider/SimpleDivider.vue';
-import FormInput from '../../components/Form/Input.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import GoogleOAuthButton from '../../components/GoogleOauth/Button.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import MfaVerification from 'dashboard/components/auth/MfaVerification.vue';
 
+const props = defineProps({
+  ssoAuthToken: { type: String, default: '' },
+  ssoAccountId: { type: String, default: '' },
+  ssoConversationId: { type: String, default: '' },
+  email: { type: String, default: '' },
+  authError: { type: String, default: '' },
+});
+
 const ERROR_MESSAGES = {
   'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
   'business-account-only': 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY',
@@ -28,189 +36,162 @@ const ERROR_MESSAGES = {
 
 const IMPERSONATION_URL_SEARCH_KEY = 'impersonation';
 
-export default {
-  components: {
-    FormInput,
-    GoogleOAuthButton,
-    Spinner,
-    NextButton,
-    SimpleDivider,
-    MfaVerification,
-    Icon,
-  },
-  props: {
-    ssoAuthToken: { type: String, default: '' },
-    ssoAccountId: { type: String, default: '' },
-    ssoConversationId: { type: String, default: '' },
-    email: { type: String, default: '' },
-    authError: { type: String, default: '' },
-  },
-  setup() {
-    const { replaceInstallationName } = useBranding();
-    return {
-      replaceInstallationName,
-      v$: useVuelidate(),
-    };
-  },
-  data() {
-    return {
-      // We need to initialize the component with any
-      // properties that will be used in it
-      credentials: {
-        email: '',
-        password: '',
-      },
-      loginApi: {
-        message: '',
-        showLoading: false,
-        hasErrored: false,
-      },
-      error: '',
-      mfaRequired: false,
-      mfaToken: null,
-    };
-  },
-  validations() {
-    return {
-      credentials: {
-        password: {
-          required,
-        },
-        email: {
-          required,
-          email,
-        },
-      },
-    };
-  },
-  computed: {
-    ...mapGetters({ globalConfig: 'globalConfig/get' }),
-    showGoogleOAuth() {
-      return Boolean(window.chatwootConfig.googleOAuthClientId);
-    },
-    showSignupLink() {
-      return parseBoolean(window.chatwootConfig.signupEnabled);
-    },
-    showSamlLogin() {
-      return this.globalConfig.isEnterprise;
-    },
-  },
-  created() {
-    if (this.ssoAuthToken) {
-      this.submitLogin();
-    }
-    if (this.authError) {
-      const messageKey = ERROR_MESSAGES[this.authError] ?? 'LOGIN.API.UNAUTH';
-      // Use a method to get the translated text to avoid dynamic key warning
-      const translatedMessage = this.getTranslatedMessage(messageKey);
-      useAlert(translatedMessage);
-      // wait for idle state
-      this.requestIdleCallbackPolyfill(() => {
-        // Remove the error query param from the url
-        const { query } = this.$route;
-        this.$router.replace({ query: { ...query, error: undefined } });
-      });
-    }
-  },
-  methods: {
-    getTranslatedMessage(key) {
-      // Avoid dynamic key warning by handling each case explicitly
-      switch (key) {
-        case 'LOGIN.OAUTH.NO_ACCOUNT_FOUND':
-          return this.$t('LOGIN.OAUTH.NO_ACCOUNT_FOUND');
-        case 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY':
-          return this.$t('LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY');
-        case 'LOGIN.API.UNAUTH':
-        default:
-          return this.$t('LOGIN.API.UNAUTH');
-      }
-    },
-    // TODO: Remove this when Safari gets wider support
-    // Ref: https://caniuse.com/requestidlecallback
-    //
-    requestIdleCallbackPolyfill(callback) {
-      if (window.requestIdleCallback) {
-        window.requestIdleCallback(callback);
-      } else {
-        // Fallback for safari
-        // Using a delay of 0 allows the callback to be executed asynchronously
-        // in the next available event loop iteration, similar to requestIdleCallback
-        setTimeout(callback, 0);
-      }
-    },
-    showAlertMessage(message) {
-      // Reset loading, current selected agent
-      this.loginApi.showLoading = false;
-      this.loginApi.message = message;
-      useAlert(this.loginApi.message);
-    },
-    handleImpersonation() {
-      // Detects impersonation mode via URL and sets a session flag to prevent user settings changes during impersonation.
-      const urlParams = new URLSearchParams(window.location.search);
-      const impersonation = urlParams.get(IMPERSONATION_URL_SEARCH_KEY);
-      if (impersonation) {
-        SessionStorage.set(SESSION_STORAGE_KEYS.IMPERSONATION_USER, true);
-      }
-    },
-    submitLogin() {
-      this.loginApi.hasErrored = false;
-      this.loginApi.showLoading = true;
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { replaceInstallationName } = useBranding();
 
-      const credentials = {
-        email: this.email
-          ? decodeURIComponent(this.email)
-          : this.credentials.email,
-        password: this.credentials.password,
-        sso_auth_token: this.ssoAuthToken,
-        ssoAccountId: this.ssoAccountId,
-        ssoConversationId: this.ssoConversationId,
-      };
+const globalConfig = useMapGetter('globalConfig/get');
 
-      login(credentials)
-        .then(result => {
-          // Check if MFA is required
-          if (result?.mfaRequired) {
-            this.loginApi.showLoading = false;
-            this.mfaRequired = true;
-            this.mfaToken = result.mfaToken;
-            return;
-          }
+const credentials = reactive({
+  email: '',
+  password: '',
+});
 
-          this.handleImpersonation();
-          this.showAlertMessage(this.$t('LOGIN.API.SUCCESS_MESSAGE'));
-        })
-        .catch(response => {
-          // Reset URL Params if the authentication is invalid
-          if (this.email) {
-            window.location = '/app/login';
-          }
-          this.loginApi.hasErrored = true;
-          this.showAlertMessage(
-            response?.message || this.$t('LOGIN.API.UNAUTH')
-          );
-        });
-    },
-    submitFormLogin() {
-      if (this.v$.credentials.email.$invalid && !this.email) {
-        this.showAlertMessage(this.$t('LOGIN.EMAIL.ERROR'));
-        return;
-      }
+const showLoading = ref(false);
+const hasErrored = ref(false);
+const mfaRequired = ref(false);
+const mfaToken = ref(null);
 
-      this.submitLogin();
+const rules = computed(() => ({
+  credentials: {
+    password: {
+      required,
     },
-    handleMfaVerified() {
-      // MFA verification successful, continue with login
-      this.handleImpersonation();
-      window.location = '/app';
-    },
-    handleMfaCancel() {
-      // User cancelled MFA, reset state
-      this.mfaRequired = false;
-      this.mfaToken = null;
-      this.credentials.password = '';
+    email: {
+      required,
+      email: emailValidator,
     },
   },
+}));
+
+const v$ = useVuelidate(rules, { credentials });
+
+const showGoogleOAuth = computed(() => {
+  return Boolean(window.chatwootConfig.googleOAuthClientId);
+});
+
+const showSignupLink = computed(() => {
+  return parseBoolean(window.chatwootConfig.signupEnabled);
+});
+
+const showSamlLogin = computed(() => {
+  return Boolean(globalConfig.value.isEnterprise);
+});
+
+const getTranslatedMessage = key => {
+  // Avoid dynamic key warning by handling each case explicitly
+  switch (key) {
+    case 'LOGIN.OAUTH.NO_ACCOUNT_FOUND':
+      return t('LOGIN.OAUTH.NO_ACCOUNT_FOUND');
+    case 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY':
+      return t('LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY');
+    case 'LOGIN.API.UNAUTH':
+    default:
+      return t('LOGIN.API.UNAUTH');
+  }
 };
+
+// TODO: Remove this when Safari gets wider support
+// Ref: https://caniuse.com/requestidlecallback
+const requestIdleCallbackPolyfill = callback => {
+  if (window.requestIdleCallback) {
+    window.requestIdleCallback(callback);
+  } else {
+    // Fallback for safari
+    // Using a delay of 0 allows the callback to be executed asynchronously
+    // in the next available event loop iteration, similar to requestIdleCallback
+    setTimeout(callback, 0);
+  }
+};
+
+const showAlertMessage = message => {
+  showLoading.value = false;
+  useAlert(message);
+};
+
+const handleImpersonation = () => {
+  // Detects impersonation mode via URL and sets a session flag to prevent user settings changes during impersonation.
+  const urlParams = new URLSearchParams(window.location.search);
+  const impersonation = urlParams.get(IMPERSONATION_URL_SEARCH_KEY);
+  if (impersonation) {
+    SessionStorage.set(SESSION_STORAGE_KEYS.IMPERSONATION_USER, true);
+  }
+};
+
+const submitLogin = async () => {
+  hasErrored.value = false;
+  showLoading.value = true;
+
+  const loginCredentials = {
+    email: props.email ? decodeURIComponent(props.email) : credentials.email,
+    password: credentials.password,
+    sso_auth_token: props.ssoAuthToken,
+    ssoAccountId: props.ssoAccountId,
+    ssoConversationId: props.ssoConversationId,
+  };
+
+  try {
+    const result = await login(loginCredentials);
+
+    // Check if MFA is required
+    if (result?.mfaRequired) {
+      showLoading.value = false;
+      mfaRequired.value = true;
+      mfaToken.value = result.mfaToken;
+      return;
+    }
+
+    handleImpersonation();
+    showAlertMessage(t('LOGIN.API.SUCCESS_MESSAGE'));
+  } catch (response) {
+    // Reset URL Params if the authentication is invalid
+    if (props.email) {
+      window.location = '/app/login';
+    }
+    hasErrored.value = true;
+    showAlertMessage(response?.message || t('LOGIN.API.UNAUTH'));
+  }
+};
+
+const submitFormLogin = () => {
+  if (v$.value.credentials.email.$invalid && !props.email) {
+    showAlertMessage(t('LOGIN.EMAIL.ERROR'));
+    return;
+  }
+
+  submitLogin();
+};
+
+const handleMfaVerified = () => {
+  // MFA verification successful, continue with login
+  handleImpersonation();
+  window.location = '/app';
+};
+
+const handleMfaCancel = () => {
+  // User cancelled MFA, reset state
+  mfaRequired.value = false;
+  mfaToken.value = null;
+  credentials.password = '';
+};
+
+onMounted(() => {
+  if (props.ssoAuthToken) {
+    submitLogin();
+  }
+  if (props.authError) {
+    const messageKey = ERROR_MESSAGES[props.authError] ?? 'LOGIN.API.UNAUTH';
+    const translatedMessage = getTranslatedMessage(messageKey);
+    useAlert(translatedMessage);
+    // wait for idle state
+    requestIdleCallbackPolyfill(() => {
+      // Remove the error query param from the url
+      const { query } = route;
+      router.replace({ query: { ...query, error: undefined } });
+    });
+  }
+});
 </script>
 
 <template>
@@ -255,16 +236,16 @@ export default {
       class="bg-white shadow sm:mx-auto mt-11 sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
       :class="{
         'mb-8 mt-15': !showGoogleOAuth,
-        'animate-wiggle': loginApi.hasErrored,
+        'animate-wiggle': hasErrored,
       }"
     >
-      <div v-if="!email">
+      <div v-if="!props.email">
         <div class="flex flex-col gap-4">
           <GoogleOAuthButton v-if="showGoogleOAuth" />
           <div v-if="showSamlLogin" class="text-center">
             <router-link
               to="/app/login/sso"
-              class="inline-flex justify-center w-full px-4 py-3 items-center bg-n-background dark:bg-n-solid-3 rounded-md shadow-sm ring-1 ring-inset ring-n-container dark:ring-n-container focus:outline-offset-0 hover:bg-n-alpha-2 dark:hover:bg-n-alpha-2"
+              class="inline-flex justify-center w-full px-4 py-3 items-center bg-n-background dark:bg-n-solid-3 rounded-lg shadow-sm ring-1 ring-inset ring-n-container dark:ring-n-container focus:outline-offset-0 hover:bg-n-alpha-2 dark:hover:bg-n-alpha-2"
             >
               <Icon
                 icon="i-lucide-lock-keyhole"
@@ -282,40 +263,47 @@ export default {
           />
         </div>
         <form class="space-y-5" @submit.prevent="submitFormLogin">
-          <FormInput
+          <Input
             v-model="credentials.email"
             name="email_address"
             type="text"
             data-testid="email_input"
+            autocomplete="email"
             :tabindex="1"
             required
             :label="$t('LOGIN.EMAIL.LABEL')"
             :placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
-            :has-error="v$.credentials.email.$error"
+            :message-type="v$.credentials.email.$error ? 'error' : ''"
             @input="v$.credentials.email.$touch"
           />
-          <FormInput
+          <Input
             v-model="credentials.password"
             type="password"
             name="password"
             data-testid="password_input"
+            autocomplete="current-password"
             required
             :tabindex="2"
             :label="$t('LOGIN.PASSWORD.LABEL')"
             :placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
-            :has-error="v$.credentials.password.$error"
+            :message-type="v$.credentials.password.$error ? 'error' : ''"
             @input="v$.credentials.password.$touch"
           >
-            <p v-if="!globalConfig.disableUserProfileUpdate">
-              <router-link
-                to="auth/reset/password"
-                class="text-sm text-link"
-                tabindex="4"
+            <template #prefix>
+              <p
+                v-if="!globalConfig.disableUserProfileUpdate"
+                class="absolute ltr:right-0 rtl:left-0"
               >
-                {{ $t('LOGIN.FORGOT_PASSWORD') }}
-              </router-link>
-            </p>
-          </FormInput>
+                <router-link
+                  to="auth/reset/password"
+                  class="text-sm text-link"
+                  tabindex="4"
+                >
+                  {{ $t('LOGIN.FORGOT_PASSWORD') }}
+                </router-link>
+              </p>
+            </template>
+          </Input>
           <NextButton
             lg
             type="submit"
@@ -323,8 +311,8 @@ export default {
             class="w-full"
             :tabindex="3"
             :label="$t('LOGIN.SUBMIT')"
-            :disabled="loginApi.showLoading"
-            :is-loading="loginApi.showLoading"
+            :disabled="showLoading"
+            :is-loading="showLoading"
           />
         </form>
       </div>

app/javascript/v3/views/login/Saml.vue

@@ -7,7 +7,7 @@ import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
 
 // components
-import FormInput from '../../components/Form/Input.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
@@ -94,15 +94,16 @@ onMounted(async () => {
       }"
     >
       <form class="space-y-5" method="POST" action="/api/v1/auth/saml_login">
-        <FormInput
+        <Input
           v-model="credentials.email"
           name="email"
           type="text"
+          autocomplete="email"
           :tabindex="1"
           required
           :label="t('LOGIN.SAML.WORK_EMAIL.LABEL')"
           :placeholder="t('LOGIN.SAML.WORK_EMAIL.PLACEHOLDER')"
-          :has-error="v$.credentials.email.$error"
+          :message-type="v$.credentials.email.$error ? 'error' : ''"
           @input="v$.credentials.email.$touch"
         />
         <input

config/installation_config.yml

@@ -69,9 +69,13 @@
   description: 'Allow users to create new accounts from the dashboard'
   locked: false
 - name: HCAPTCHA_SITE_KEY
+  display_title: 'HCaptcha Site Key'
+  description: 'The HCaptcha public key used in the signup page'
   value:
   locked: false
 - name: HCAPTCHA_SERVER_KEY
+  display_title: 'HCaptcha Server Key'
+  description: 'The HCaptcha server key used to validate the HCaptcha response'
   value:
   locked: false
 - name: INSTALLATION_EVENTS_WEBHOOK_URL

enterprise/app/controllers/enterprise/super_admin/app_configs_controller.rb

@@ -34,7 +34,7 @@ module Enterprise::SuperAdmin::AppConfigsController
   def internal_config_options
     %w[CHATWOOT_INBOX_TOKEN CHATWOOT_INBOX_HMAC_KEY ANALYTICS_TOKEN CLEARBIT_API_KEY DASHBOARD_SCRIPTS INACTIVE_WHATSAPP_NUMBERS BLOCKED_EMAIL_DOMAINS
        SKIP_INCOMING_BCC_PROCESSING CAPTAIN_CLOUD_PLAN_LIMITS ACCOUNT_SECURITY_NOTIFICATION_WEBHOOK_URL CHATWOOT_INSTANCE_ADMIN_EMAIL
-       OG_IMAGE_CDN_URL OG_IMAGE_CLIENT_REF CLOUDFLARE_API_KEY CLOUDFLARE_ZONE_ID]
+       OG_IMAGE_CDN_URL OG_IMAGE_CLIENT_REF CLOUDFLARE_API_KEY CLOUDFLARE_ZONE_ID HCAPTCHA_SITE_KEY HCAPTCHA_SERVER_KEY]
   end
 
   def captain_config_options