chore: Improve signup flow, reduce the number of inputs (#13350)

- Improved design for the Chatwoot sign up page
2026-01-22 18:47:42 -08:00
parent 8eb6fd1bff
commit 747d451387
13 changed files with 398 additions and 448 deletions
--- a/app/javascript/dashboard/assets/images/auth/signup-bg.jpg
+++ b/app/javascript/dashboard/assets/images/auth/signup-bg.jpg
--- a/app/javascript/dashboard/constants/globals.js
+++ b/app/javascript/dashboard/constants/globals.js
@@ -34,7 +34,8 @@ export default {
  DOCS_URL: 'https://www.chatwoot.com/docs/product/',
  HELP_CENTER_DOCS_URL:
    'https://www.chatwoot.com/docs/product/others/help-center',
-  TESTIMONIAL_URL: 'https://testimonials.cdn.chatwoot.com/content.json',
+  TESTIMONIAL_URL:
+    'https://testimonials.cdn.chatwoot.com/testimonial-content.json',
  WHATSAPP_EMBEDDED_SIGNUP_DOCS_URL:
    'https://developers.facebook.com/docs/whatsapp/embedded-signup/custom-flows/onboarding-business-app-users#limitations',
  SMALL_SCREEN_BREAKPOINT: 768,
--- a/app/javascript/dashboard/i18n/locale/en/signup.json
+++ b/app/javascript/dashboard/i18n/locale/en/signup.json
@@ -1,6 +1,7 @@
 {
  "REGISTER": {
    "TRY_WOOT": "Create an account",
+    "GET_STARTED": "Get started with Chatwoot",
    "TITLE": "Register",
    "TESTIMONIAL_HEADER": "All it takes is one step to move forward",
    "TESTIMONIAL_CONTENT": "You're one step away from engaging your customers, retaining them and finding new ones.",
--- a/app/javascript/v3/api/auth.js
+++ b/app/javascript/v3/api/auth.js
@@ -4,7 +4,10 @@ import {
  clearLocalStorageOnLogout,
 } from 'dashboard/store/utils/api';
 import wootAPI from './apiClient';
-import { getLoginRedirectURL } from '../helpers/AuthHelper';
+import {
+  getLoginRedirectURL,
+  getCredentialsFromEmail,
+} from '../helpers/AuthHelper';

 export const login = async ({
  ssoAccountId,
@@ -46,9 +49,10 @@ export const login = async ({

 export const register = async creds => {
  try {
+    const { fullName, accountName } = getCredentialsFromEmail(creds.email);
    const response = await wootAPI.post('api/v1/accounts.json', {
-      account_name: creds.accountName.trim(),
-      user_full_name: creds.fullName.trim(),
+      account_name: accountName,
+      user_full_name: fullName,
      email: creds.email,
      password: creds.password,
      h_captcha_client_response: creds.hCaptchaClientResponse,
--- a/app/javascript/v3/helpers/AuthHelper.js
+++ b/app/javascript/v3/helpers/AuthHelper.js
@@ -22,6 +22,21 @@ const getSSOAccountPath = ({ ssoAccountId, user }) => {
  return accountPath;
 };

+const capitalize = str =>
+  str
+    .split(/[._-]+/)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+
+export const getCredentialsFromEmail = email => {
+  const [localPart, domain] = email.split('@');
+  const namePart = localPart.split('+')[0];
+  return {
+    fullName: capitalize(namePart),
+    accountName: capitalize(domain.split('.')[0]),
+  };
+};
+
 export const getLoginRedirectURL = ({
  ssoAccountId,
  ssoConversationId,
--- a/app/javascript/v3/helpers/specs/AuthHelper.spec.js
+++ b/app/javascript/v3/helpers/specs/AuthHelper.spec.js
@@ -1,4 +1,4 @@
-import { getLoginRedirectURL } from '../AuthHelper';
+import { getLoginRedirectURL, getCredentialsFromEmail } from '../AuthHelper';

 describe('#URL Helpers', () => {
  describe('getLoginRedirectURL', () => {
@@ -40,4 +40,41 @@ describe('#URL Helpers', () => {
      expect(getLoginRedirectURL('7500', null)).toBe('/app/');
    });
  });
+
+  describe('getCredentialsFromEmail', () => {
+    it('should capitalize fullName and accountName from a standard email', () => {
+      expect(getCredentialsFromEmail('john@company.com')).toEqual({
+        fullName: 'John',
+        accountName: 'Company',
+      });
+    });
+
+    it('should handle subdomains by using the first part of the domain', () => {
+      expect(getCredentialsFromEmail('jane@mail.example.org')).toEqual({
+        fullName: 'Jane',
+        accountName: 'Mail',
+      });
+    });
+
+    it('should split by dots and capitalize each word', () => {
+      expect(getCredentialsFromEmail('john.doe@acme.co')).toEqual({
+        fullName: 'John Doe',
+        accountName: 'Acme',
+      });
+    });
+
+    it('should omit everything after + in the local part', () => {
+      expect(getCredentialsFromEmail('user+tag@startup.io')).toEqual({
+        fullName: 'User',
+        accountName: 'Startup',
+      });
+    });
+
+    it('should split by underscores and hyphens', () => {
+      expect(getCredentialsFromEmail('first_last@my-company.com')).toEqual({
+        fullName: 'First Last',
+        accountName: 'My Company',
+      });
+    });
+  });
 });
--- a/app/javascript/v3/views/auth/signup/Index.vue
+++ b/app/javascript/v3/views/auth/signup/Index.vue
@@ -1,83 +1,84 @@
-<script>
-import { mapGetters } from 'vuex';
-import { useBranding } from 'shared/composables/useBranding';
+<script setup>
+import { ref, computed, onBeforeMount } from 'vue';
+import { useStore } from 'vuex';
 import SignupForm from './components/Signup/Form.vue';
 import Testimonials from './components/Testimonials/Index.vue';
 import Spinner from 'shared/components/Spinner.vue';
+import signupBg from 'assets/images/auth/signup-bg.jpg';

-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 store = useStore();
+
+const isLoading = ref(false);
+const globalConfig = computed(() => store.getters['globalConfig/get']);
+const isAChatwootInstance = computed(
+  () => globalConfig.value.installationName === 'Chatwoot'
+);
+
+onBeforeMount(() => {
+  isLoading.value = isAChatwootInstance.value;
+});
+
+const resizeContainers = () => {
+  isLoading.value = false;
 };
 </script>

 <template>
-  <div class="w-full h-full bg-n-background">
-    <div v-show="!isLoading" class="flex h-full min-h-screen items-center">
-      <div
-        class="flex-1 min-h-[640px] inline-flex items-center h-full justify-center overflow-auto py-6"
-      >
-        <div class="px-8 max-w-[560px] w-full overflow-auto">
-          <div class="mb-4">
+  <div
+    class="relative w-full h-full min-h-screen flex items-center justify-center bg-cover bg-center bg-no-repeat p-4"
+    :style="{ backgroundImage: `url(${signupBg})` }"
+  >
+    <div
+      class="absolute inset-0 bg-n-gray-12/60 dark:bg-n-gray-1/80 backdrop-blur-sm"
+    />
+    <div
+      v-show="!isLoading"
+      class="relative flex max-w-[960px] bg-white dark:bg-n-solid-2 rounded-lg outline outline-1 outline-n-container shadow-sm"
+      :class="{ 'w-auto xl:w-full': isAChatwootInstance }"
+    >
+      <div class="flex-1 flex items-center justify-center py-10 px-10">
+        <div class="max-w-[420px] w-full">
+          <div class="mb-6">
            <img
              :src="globalConfig.logo"
              :alt="globalConfig.installationName"
-              class="block w-auto h-8 dark:hidden"
+              class="block w-auto h-7 dark:hidden"
            />
            <img
              v-if="globalConfig.logoDark"
              :src="globalConfig.logoDark"
              :alt="globalConfig.installationName"
-              class="hidden w-auto h-8 dark:block"
+              class="hidden w-auto h-7 dark:block"
            />
-            <h2
-              class="mt-6 text-3xl font-medium text-left mb-7 text-n-slate-12"
-            >
-              {{ $t('REGISTER.TRY_WOOT') }}
+            <h2 class="mt-6 text-2xl font-semibold text-n-slate-12">
+              {{
+                isAChatwootInstance
+                  ? $t('REGISTER.GET_STARTED')
+                  : $t('REGISTER.TRY_WOOT')
+              }}
            </h2>
+            <p class="mt-2 text-sm text-n-slate-11">
+              {{ $t('REGISTER.HAVE_AN_ACCOUNT') }}{{ ' '
+              }}<router-link
+                class="text-n-blue-10 font-medium hover:text-n-blue-11"
+                to="/app/login"
+              >
+                {{ $t('LOGIN.SUBMIT') }}
+              </router-link>
+            </p>
          </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">
-              {{ replaceInstallationName($t('LOGIN.TITLE')) }}
-            </router-link>
-          </div>
        </div>
      </div>
      <Testimonials
        v-if="isAChatwootInstance"
-        class="flex-1"
+        class="flex-1 hidden xl:flex"
        @resize-containers="resizeContainers"
      />
    </div>
    <div
      v-show="isLoading"
-      class="flex items-center min-h-screen justify-center w-full h-full"
+      class="relative flex items-center justify-center w-full h-full"
    >
      <Spinner color-scheme="primary" size="" />
    </div>
--- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
@@ -1,224 +1,121 @@
-<script>
+<script setup>
+import { ref, computed, reactive } 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 NextButton from 'dashboard/components-next/button/Button.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
+import PasswordRequirements from './PasswordRequirements.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';

 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 isPasswordFocused = ref(false);
+const isSignupInProgress = ref(false);
+
+const credentials = reactive({
+  email: '',
+  password: '',
+  hCaptchaClientResponse: '',
+});
+
+const rules = {
+  credentials: {
+    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 '';
-    },
-    allowedLoginMethods() {
-      return window.chatwootConfig.allowedLoginMethods || ['email'];
-    },
-    showGoogleOAuth() {
-      return (
-        this.allowedLoginMethods.includes('google_oauth') &&
-        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 globalConfig = computed(() => store.getters['globalConfig/get']);
+
+const termsLink = computed(() =>
+  t('REGISTER.TERMS_ACCEPT')
+    .replace('https://www.chatwoot.com/terms', globalConfig.value.termsURL)
+    .replace(
+      'https://www.chatwoot.com/privacy-policy',
+      globalConfig.value.privacyURL
+    )
+);
+
+const allowedLoginMethods = computed(
+  () => window.chatwootConfig.allowedLoginMethods || ['email']
+);
+
+const showGoogleOAuth = computed(
+  () =>
+    allowedLoginMethods.value.includes('google_oauth') &&
+    Boolean(window.chatwootConfig.googleOAuthClientId)
+);
+
+const isFormValid = computed(() => !v$.value.$invalid);
+
+const performRegistration = async () => {
+  isSignupInProgress.value = true;
+  try {
+    await register(credentials);
+    window.location = DEFAULT_REDIRECT_URL;
+  } catch (error) {
+    const errorMessage = error?.message || t('REGISTER.API.ERROR_MESSAGE');
+    if (globalConfig.value.hCaptchaSiteKey) {
+      hCaptcha.value.reset();
+      credentials.hCaptchaClientResponse = '';
+    }
+    useAlert(errorMessage);
+  } finally {
+    isSignupInProgress.value = false;
+  }
+};
+
+const submit = () => {
+  if (isSignupInProgress.value) return;
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+  isSignupInProgress.value = true;
+  if (globalConfig.value.hCaptchaSiteKey) {
+    hCaptcha.value.execute();
+  } else {
+    performRegistration();
+  }
+};
+
+const onRecaptchaVerified = token => {
+  credentials.hCaptchaClientResponse = token;
+  performRegistration();
+};
+
+const onCaptchaError = () => {
+  isSignupInProgress.value = false;
+  credentials.hCaptchaClientResponse = '';
+  hCaptcha.value.reset();
+};
 </script>

 <template>
-  <div class="flex-1 px-1 overflow-auto">
+  <div class="flex-1">
    <form class="space-y-3" @submit.prevent="submit">
-      <div class="grid grid-cols-2 gap-2">
-        <FormInput
-          v-model="credentials.fullName"
-          name="full_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"
-        />
-        <FormInput
-          v-model="credentials.accountName"
-          name="account_name"
-          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"
-        />
-      </div>
      <FormInput
        v-model="credentials.email"
        type="email"
@@ -230,100 +127,62 @@ export default {
        :error-message="$t('REGISTER.EMAIL.ERROR')"
        @blur="v$.credentials.email.$touch"
      />
-      <FormInput
-        v-model="credentials.password"
-        type="password"
-        name="password"
-        :class="{ error: v$.credentials.password.$error }"
-        :label="$t('LOGIN.PASSWORD.LABEL')"
-        :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
-        :has-error="v$.credentials.password.$error"
-        aria-describedby="password-requirements"
-        @blur="v$.credentials.password.$touch"
-      />
-      <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"
-      />
-      <div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
-        <VueHcaptcha
-          ref="hCaptcha"
-          :class="{ error: !hasAValidCaptcha && didCaptchaReset }"
-          :sitekey="globalConfig.hCaptchaSiteKey"
-          @verify="onRecaptchaVerified"
+      <div class="relative">
+        <FormInput
+          v-model="credentials.password"
+          type="password"
+          name="password"
+          :class="{ error: v$.credentials.password.$error }"
+          :label="$t('LOGIN.PASSWORD.LABEL')"
+          :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
+          :has-error="v$.credentials.password.$error"
+          @focus="isPasswordFocused = true"
+          @blur="
+            isPasswordFocused = false;
+            v$.credentials.password.$touch();
+          "
        />
-        <span
-          v-if="!hasAValidCaptcha && didCaptchaReset"
-          class="text-xs text-n-ruby-9"
+        <Transition
+          enter-active-class="transition duration-200 ease-out origin-left"
+          enter-from-class="opacity-0 scale-90 translate-x-1"
+          enter-to-class="opacity-100 scale-100 translate-x-0"
+          leave-active-class="transition duration-150 ease-in origin-left"
+          leave-from-class="opacity-100 scale-100 translate-x-0"
+          leave-to-class="opacity-0 scale-90 translate-x-1"
        >
-          {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
-        </span>
+          <PasswordRequirements
+            v-if="isPasswordFocused"
+            :password="credentials.password"
+          />
+        </Transition>
      </div>
+      <VueHcaptcha
+        v-if="globalConfig.hCaptchaSiteKey"
+        ref="hCaptcha"
+        size="invisible"
+        :sitekey="globalConfig.hCaptchaSiteKey"
+        @verify="onRecaptchaVerified"
+        @error="onCaptchaError"
+        @expired="onCaptchaError"
+        @challenge-expired="onCaptchaError"
+        @closed="onCaptchaError"
+      />
      <NextButton
        lg
        type="submit"
        data-testid="submit_button"
-        class="w-full"
-        icon="i-lucide-chevron-right"
-        trailing-icon
+        class="w-full font-medium"
        :label="$t('REGISTER.SUBMIT')"
        :disabled="isSignupInProgress || !isFormValid"
        :is-loading="isSignupInProgress"
      />
    </form>
-    <div class="flex flex-col">
-      <SimpleDivider
-        v-if="showGoogleOAuth"
-        :label="$t('COMMON.OR')"
-        bg="bg-n-background"
-        class="uppercase"
-      />
-      <GoogleOAuthButton v-if="showGoogleOAuth">
-        {{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
-      </GoogleOAuthButton>
-    </div>
+    <GoogleOAuthButton v-if="showGoogleOAuth" class="mt-3">
+      {{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
+    </GoogleOAuthButton>
    <p
-      class="text-sm mb-1 mt-5 text-n-slate-12 [&>a]:text-n-brand [&>a]:font-medium [&>a]:hover:brightness-110"
+      class="text-sm mt-5 mb-0 text-n-slate-11 [&>a]:text-n-blue-10 [&>a]:font-medium [&>a]:hover:text-n-blue-11"
      v-html="termsLink"
    />
  </div>
 </template>
-
-<style scoped lang="scss">
-.h-captcha--box {
-  &::v-deep .error {
-    iframe {
-      @apply rounded-md border border-n-ruby-8 dark:border-n-ruby-8;
-    }
-  }
-}
-</style>
--- a/app/javascript/v3/views/auth/signup/components/Signup/PasswordRequirements.vue
+++ b/app/javascript/v3/views/auth/signup/components/Signup/PasswordRequirements.vue
@@ -0,0 +1,69 @@
+<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: '' },
+});
+const MIN_PASSWORD_LENGTH = 6;
+const SPECIAL_CHAR_REGEX = /[!@#$%^&*()_+\-=[\]{}|'"/\\.,`<>:;?~]/;
+
+const { t } = useI18n();
+
+const requirements = computed(() => {
+  const password = props.password || '';
+  return [
+    {
+      id: 'length',
+      met: password.length >= MIN_PASSWORD_LENGTH,
+      label: t('REGISTER.PASSWORD.REQUIREMENTS_LENGTH', {
+        min: MIN_PASSWORD_LENGTH,
+      }),
+    },
+    {
+      id: 'uppercase',
+      met: /[A-Z]/.test(password),
+      label: t('REGISTER.PASSWORD.REQUIREMENTS_UPPERCASE'),
+    },
+    {
+      id: 'lowercase',
+      met: /[a-z]/.test(password),
+      label: t('REGISTER.PASSWORD.REQUIREMENTS_LOWERCASE'),
+    },
+    {
+      id: 'number',
+      met: /[0-9]/.test(password),
+      label: t('REGISTER.PASSWORD.REQUIREMENTS_NUMBER'),
+    },
+    {
+      id: 'special',
+      met: SPECIAL_CHAR_REGEX.test(password),
+      label: t('REGISTER.PASSWORD.REQUIREMENTS_SPECIAL'),
+    },
+  ];
+});
+</script>
+
+<template>
+  <div
+    class="absolute top-0 z-50 w-64 text-xs rounded-lg px-4 py-3 bg-white dark:bg-n-solid-3 shadow-lg outline outline-1 outline-n-weak start-full ms-4"
+  >
+    <ul role="list" class="space-y-1.5">
+      <li
+        v-for="item in requirements"
+        :key="item.id"
+        class="inline-flex gap-1.5 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>
+</template>
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
@@ -1,66 +1,48 @@
-<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 testimonial = ref(null);
+
+const fetchTestimonials = async () => {
+  try {
+    const { data } = await getTestimonialContent();
+    if (data.length) {
+      testimonial.value = data[Math.floor(Math.random() * data.length)];
+    }
+  } catch {
+    // Ignoring the error as the UI wouldn't break
+  } finally {
+    emit('resizeContainers', !!testimonial.value);
+  }
 };
+
+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 flex-1 flex flex-col items-start justify-center bg-n-alpha-black2 dark:bg-n-solid-3 px-12 py-14 rounded-e-lg"
  >
-    <img
-      src="assets/images/auth/top-left.svg"
-      class="absolute top-0 left-0 w-40 h-40"
+    <TestimonialCard
+      v-if="testimonial"
+      :review-content="testimonial.authorReview"
+      :author-image="testimonial.authorImage"
+      :author-name="testimonial.authorName"
+      :author-designation="testimonial.authorCompany"
    />
-    <img
-      src="assets/images/auth/bottom-right.svg"
-      class="absolute bottom-0 right-0 w-40 h-40"
-    />
-    <img
-      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="flex items-start justify-center p-6">
-        <TestimonialCard
-          v-for="(testimonial, index) in testimonials"
-          :key="testimonial.id"
-          :review-content="testimonial.authorReview"
-          :author-image="testimonial.authorImage"
-          :author-name="testimonial.authorName"
-          :author-designation="testimonial.authorCompany"
-          :class="!index ? 'mt-[20%] -mr-4 z-50' : ''"
-        />
-      </div>
+    <div class="absolute bottom-8 right-8 grid grid-cols-3 gap-1.5">
+      <span class="w-2 h-2 rounded-full bg-n-gray-5" />
+      <span class="w-2 h-2 rounded-full bg-n-gray-5" />
+      <span class="w-2 h-2 rounded-full bg-n-gray-5" />
+      <span class="w-2 h-2 rounded-full bg-n-gray-5" />
+      <span class="w-2 h-2 rounded-full bg-n-gray-5" />
+      <span class="w-2 h-2 rounded-full bg-n-gray-5" />
    </div>
  </div>
 </template>
-
-<style lang="scss" scoped>
-.center--img {
-}
-</style>
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue
@@ -1,40 +1,39 @@
-<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>
-  <div
-    class="flex flex-col items-start justify-center p-6 w-80 bg-n-background rounded-lg drop-shadow-md"
-  >
-    <p class="text-sm text-n-slate-12 tracking-normal">
+  <div class="flex flex-col items-start">
+    <svg
+      class="w-10 h-10 text-n-slate-7 mb-6"
+      viewBox="0 0 40 40"
+      fill="currentColor"
+    >
+      <path
+        d="M10.7 28.3c-1.4-1.2-2.1-3-2.1-5.4 0-2.3.8-4.6 2.4-6.8 1.6-2.2 3.8-3.9 6.6-5.1l1.2 2.1c-2.2 1.2-3.7 2.4-4.6 3.6-.9 1.2-1.3 2.5-1.2 3.8.3-.1.7-.2 1.2-.2 1.3 0 2.4.4 3.3 1.3.9.9 1.3 2 1.3 3.3 0 1.4-.5 2.5-1.4 3.4-.9.9-2.1 1.4-3.5 1.4-1.5 0-2.7-.5-3.2-1.4zm15 0c-1.4-1.2-2.1-3-2.1-5.4 0-2.3.8-4.6 2.4-6.8 1.6-2.2 3.8-3.9 6.6-5.1l1.2 2.1c-2.2 1.2-3.7 2.4-4.6 3.6-.9 1.2-1.3 2.5-1.2 3.8.3-.1.7-.2 1.2-.2 1.3 0 2.4.4 3.3 1.3.9.9 1.3 2 1.3 3.3 0 1.4-.5 2.5-1.4 3.4-.9.9-2.1 1.4-3.5 1.4-1.5 0-2.7-.5-3.2-1.4z"
+      />
+    </svg>
+    <p
+      class="text-lg text-n-slate-12 leading-relaxed whitespace-pre-line tracking-tight"
+    >
      {{ reviewContent }}
    </p>
-    <div class="flex items-center mt-4 text-n-slate-12">
-      <div class="bg-white rounded-full p-1">
-        <img :src="authorImage" class="h-8 w-8 rounded-full" />
-      </div>
-      <div class="ml-2">
-        <div class="text-sm font-medium">{{ authorName }}</div>
-        <div class="text-xs">{{ authorDesignation }}</div>
+    <div class="flex items-center mt-8">
+      <img
+        :src="authorImage"
+        :alt="authorName"
+        class="w-11 h-11 rounded-full object-cover"
+      />
+      <div class="ml-3">
+        <div class="text-base font-medium text-n-slate-12">
+          {{ authorName }}
+        </div>
+        <div class="text-sm text-n-slate-10">{{ authorDesignation }}</div>
      </div>
    </div>
  </div>