Restructure omni services and add Chatwoot research snapshot

research/chatwoot/app/javascript/v3/App.vue

@@ -0,0 +1,85 @@
+<script>
+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)');
+
+      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;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="h-full min-h-screen w-full antialiased" :class="theme">
+    <router-view />
+    <SnackbarContainer />
+  </div>
+</template>
+
+<style lang="scss">
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import '../dashboard/assets/scss/next-colors';
+
+html,
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  @apply h-full w-full;
+
+  input,
+  select {
+    outline: none;
+  }
+}
+
+.text-link {
+  @apply text-n-brand font-medium hover:text-n-blue-10;
+}
+
+.v-popper--theme-tooltip .v-popper__inner {
+  background: black !important;
+  font-size: 0.75rem;
+  padding: 4px 8px !important;
+  border-radius: 6px;
+  font-weight: 400;
+}
+
+.v-popper--theme-tooltip .v-popper__arrow-container {
+  display: none;
+}
+</style>

research/chatwoot/app/javascript/v3/api/apiClient.js

@@ -0,0 +1,6 @@
+import axios from 'axios';
+
+const { apiHost = '' } = window.chatwootConfig || {};
+const wootAPI = axios.create({ baseURL: `${apiHost}/` });
+
+export default wootAPI;

research/chatwoot/app/javascript/v3/api/auth.js

@@ -0,0 +1,97 @@
+import {
+  setAuthCredentials,
+  throwErrorMessage,
+  clearLocalStorageOnLogout,
+} from 'dashboard/store/utils/api';
+import wootAPI from './apiClient';
+import {
+  getLoginRedirectURL,
+  getCredentialsFromEmail,
+} from '../helpers/AuthHelper';
+
+export const login = async ({
+  ssoAccountId,
+  ssoConversationId,
+  ...credentials
+}) => {
+  try {
+    const response = await wootAPI.post('auth/sign_in', credentials);
+
+    // Check if MFA is required
+    if (response.status === 206 && response.data.mfa_required) {
+      // Return MFA data instead of throwing error
+      return {
+        mfaRequired: true,
+        mfaToken: response.data.mfa_token,
+      };
+    }
+
+    setAuthCredentials(response);
+    clearLocalStorageOnLogout();
+    window.location = getLoginRedirectURL({
+      ssoAccountId,
+      ssoConversationId,
+      user: response.data.data,
+    });
+    return null;
+  } catch (error) {
+    // Check if it's an MFA required response
+    if (error.response?.status === 206 && error.response?.data?.mfa_required) {
+      return {
+        mfaRequired: true,
+        mfaToken: error.response.data.mfa_token,
+      };
+    }
+    throwErrorMessage(error);
+    return null;
+  }
+};
+
+export const register = async creds => {
+  try {
+    const { fullName, accountName } = getCredentialsFromEmail(creds.email);
+    const response = await wootAPI.post('api/v1/accounts.json', {
+      account_name: accountName,
+      user_full_name: fullName,
+      email: creds.email,
+      password: creds.password,
+      h_captcha_client_response: creds.hCaptchaClientResponse,
+    });
+    setAuthCredentials(response);
+    return response.data;
+  } catch (error) {
+    throwErrorMessage(error);
+  }
+  return null;
+};
+
+export const verifyPasswordToken = async ({ confirmationToken }) => {
+  try {
+    const response = await wootAPI.post('auth/confirmation', {
+      confirmation_token: confirmationToken,
+    });
+    setAuthCredentials(response);
+  } catch (error) {
+    throwErrorMessage(error);
+  }
+};
+
+export const setNewPassword = async ({
+  resetPasswordToken,
+  password,
+  confirmPassword,
+}) => {
+  try {
+    const response = await wootAPI.put('auth/password', {
+      reset_password_token: resetPasswordToken,
+      password_confirmation: confirmPassword,
+      password,
+    });
+    setAuthCredentials(response);
+  } catch (error) {
+    throwErrorMessage(error);
+  }
+};
+
+export const resetPassword = async ({ email }) =>
+  wootAPI.post('auth/password', { email });

research/chatwoot/app/javascript/v3/api/testimonials.js

@@ -0,0 +1,6 @@
+import wootConstants from 'dashboard/constants/globals';
+import wootAPI from './apiClient';
+
+export const getTestimonialContent = () => {
+  return wootAPI.get(wootConstants.TESTIMONIAL_URL);
+};

research/chatwoot/app/javascript/v3/components/Divider/SimpleDivider.vue

@@ -0,0 +1,27 @@
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    bg: {
+      type: String,
+      default: 'bg-white dark:bg-n-solid-2',
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="relative my-4 section-separator">
+    <div class="absolute inset-0 flex items-center" aria-hidden="true">
+      <div class="w-full border-t border-n-strong" />
+    </div>
+    <div v-if="label" class="relative flex justify-center text-sm">
+      <span class="px-2 text-n-slate-10" :class="bg">
+        {{ label }}
+      </span>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/v3/components/Form/CheckBox.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  isChecked: {
+    type: Boolean,
+    default: false,
+  },
+  value: {
+    type: String,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['update']);
+
+const checked = computed({
+  get: () => props.isChecked,
+  set: value => emit('update', props.value, value),
+});
+</script>
+
+<template>
+  <input
+    :id="value"
+    v-model="checked"
+    type="checkbox"
+    :value="value"
+    class="flex-shrink-0 mt-0.5 border-n-strong border bg-n-slate-2 checked:border-none checked:bg-n-brand shadow-sm appearance-none rounded-[4px] w-4 h-4 focus:ring-1 after:content-[''] after:text-white checked:after:content-['✓'] after:flex after:items-center after:justify-center after:text-center after:text-xs after:font-bold after:relative"
+  />
+</template>

research/chatwoot/app/javascript/v3/components/Form/Input.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { defineProps, defineModel, computed } from 'vue';
+import { useToggle } from '@vueuse/core';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import WithLabel from './WithLabel.vue';
+
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  hasError: Boolean,
+  errorMessage: {
+    type: String,
+    default: '',
+  },
+  spacing: {
+    type: String,
+    default: 'base',
+    validator: value => ['base', 'compact'].includes(value),
+  },
+});
+
+const FIELDS = {
+  TEXT: 'text',
+  PASSWORD: 'password',
+};
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const model = defineModel({
+  type: [String, Number],
+  required: true,
+});
+
+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;
+});
+</script>
+
+<template>
+  <WithLabel
+    :label="label"
+    :icon="icon"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <template #rightOfLabel>
+      <slot />
+    </template>
+    <input
+      v-bind="$attrs"
+      v-model="model"
+      :name="name"
+      :type="currentInputType"
+      class="block w-full border-none rounded-md shadow-sm bg-n-alpha-black2 appearance-none outline outline-1 focus:outline focus:outline-1 text-n-slate-12 placeholder:text-n-slate-10 sm:text-sm sm:leading-6 px-3 py-3"
+      :class="{
+        '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':
+          hasError,
+        'outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 focus:outline-n-brand dark:focus:outline-n-brand':
+          !hasError,
+        'px-3 py-3': spacing === 'base',
+        'px-3 py-2 mb-0': spacing === 'compact',
+        'pl-9': icon,
+        'pr-10': isPasswordField,
+      }"
+    />
+    <Button
+      v-if="isPasswordField"
+      type="button"
+      slate
+      sm
+      link
+      :icon="isPasswordVisible ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+      class="absolute inset-y-0 right-0 pr-3"
+      :aria-label="isPasswordVisible ? 'Hide password' : 'Show password'"
+      :aria-pressed="isPasswordVisible"
+      @click="togglePasswordVisibility()"
+    />
+  </WithLabel>
+</template>

research/chatwoot/app/javascript/v3/components/Form/Select.vue

@@ -0,0 +1,94 @@
+<script>
+import WithLabel from './WithLabel.vue';
+export default {
+  components: {
+    WithLabel,
+  },
+  props: {
+    id: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    onInput(e) {
+      this.$emit('update:modelValue', e.target.value);
+    },
+  },
+};
+</script>
+
+<template>
+  <WithLabel
+    :label="label"
+    :icon="icon"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <select
+      :id="id"
+      :selected="modelValue"
+      :name="name"
+      :class="{
+        'text-n-slate-9': !modelValue,
+        'text-n-slate-12': modelValue,
+        'pl-9': icon,
+      }"
+      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm appearance-none rounded-xl select-caret leading-6"
+      @input="onInput"
+    >
+      <option value="" disabled selected class="hidden">
+        {{ placeholder }}
+      </option>
+      <slot>
+        <option v-for="opt in options" :key="opt.value" :value="opt.value">
+          {{ opt.label }}
+        </option>
+      </slot>
+    </select>
+  </WithLabel>
+</template>
+
+<style scoped>
+.select-caret {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
+  background-origin: content-box;
+  background-position: right -1rem center;
+  background-repeat: no-repeat;
+  background-size: 9px 6px;
+}
+</style>

research/chatwoot/app/javascript/v3/components/Form/WithLabel.vue

@@ -0,0 +1,51 @@
+<script setup>
+defineProps({
+  label: { type: String, default: '' },
+  name: { type: String, required: true },
+  icon: { type: String, default: '' },
+  hasError: { type: Boolean, default: false },
+  helpMessage: { type: String, default: '' },
+  errorMessage: { type: String, default: '' },
+});
+</script>
+
+<template>
+  <div class="space-y-1">
+    <label
+      v-if="label"
+      :for="name"
+      class="flex justify-between text-sm font-medium leading-6 text-n-slate-12"
+      :class="{ 'text-n-ruby-12': hasError }"
+    >
+      <slot name="label">
+        {{ label }}
+      </slot>
+      <slot name="rightOfLabel" />
+    </label>
+    <div class="w-full">
+      <div class="flex items-center relative w-full">
+        <fluent-icon
+          v-if="icon"
+          size="16"
+          :icon="icon"
+          class="absolute left-2 transform text-n-slate-9 w-5 h-5"
+        />
+        <slot />
+      </div>
+      <div
+        v-if="errorMessage && hasError"
+        class="text-sm mt-1.5 ml-px text-n-ruby-9 leading-tight"
+      >
+        {{ errorMessage }}
+      </div>
+      <div
+        v-else-if="helpMessage || $slots.help"
+        class="text-sm mt-1.5 ml-px text-n-slate-10 leading-tight"
+      >
+        <slot name="help">
+          {{ helpMessage }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/v3/components/GoogleOauth/Button.spec.js

@@ -0,0 +1,35 @@
+import { shallowMount } from '@vue/test-utils';
+import GoogleOAuthButton from './Button.vue';
+
+function getWrapper() {
+  return shallowMount(GoogleOAuthButton, {
+    mocks: { $t: text => text },
+  });
+}
+
+describe('GoogleOAuthButton.vue', () => {
+  beforeEach(() => {
+    window.chatwootConfig = {
+      googleOAuthClientId: 'clientId',
+      googleOAuthCallbackUrl: 'http://localhost:3000/test-callback',
+    };
+  });
+
+  afterEach(() => {
+    window.chatwootConfig = {};
+  });
+
+  it('generates the correct Google Auth URL', () => {
+    const wrapper = getWrapper();
+    const googleAuthUrl = new URL(wrapper.vm.getGoogleAuthUrl());
+    const params = googleAuthUrl.searchParams;
+    expect(googleAuthUrl.origin).toBe('https://accounts.google.com');
+    expect(googleAuthUrl.pathname).toBe('/o/oauth2/auth');
+    expect(params.get('client_id')).toBe('clientId');
+    expect(params.get('redirect_uri')).toBe(
+      'http://localhost:3000/test-callback'
+    );
+    expect(params.get('response_type')).toBe('code');
+    expect(params.get('scope')).toBe('email profile');
+  });
+});

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

@@ -0,0 +1,44 @@
+<script>
+export default {
+  methods: {
+    getGoogleAuthUrl() {
+      // Ideally a request to /auth/google_oauth2 should be made
+      // Creating the URL manually because the devise-token-auth with
+      // omniauth has a standing issue on redirecting the post request
+      // https://github.com/lynndylanhurley/devise_token_auth/issues/1466
+      const baseUrl = 'https://accounts.google.com/o/oauth2/auth';
+      const clientId = window.chatwootConfig.googleOAuthClientId;
+      const redirectUri = window.chatwootConfig.googleOAuthCallbackUrl;
+      const responseType = 'code';
+      const scope = 'email profile';
+
+      // Build the query string
+      const queryString = new URLSearchParams({
+        client_id: clientId,
+        redirect_uri: redirectUri,
+        response_type: responseType,
+        scope: scope,
+      }).toString();
+
+      // Construct the full URL
+      return `${baseUrl}?${queryString}`;
+    },
+  },
+};
+</script>
+
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
+<template>
+  <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"
+    >
+      <span class="i-logos-google-icon h-6" />
+      <span class="ml-2 text-base font-medium text-n-slate-12">
+        {{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}
+      </span>
+    </a>
+  </div>
+</template>

research/chatwoot/app/javascript/v3/components/SnackBar/Container.vue

@@ -0,0 +1,55 @@
+<script>
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import SnackbarItem from './Item.vue';
+import { emitter } from 'shared/helpers/mitt';
+
+export default {
+  components: { SnackbarItem },
+  props: {
+    duration: {
+      type: Number,
+      default: 2500,
+    },
+  },
+
+  data() {
+    return {
+      snackbarAlertMessages: [],
+    };
+  },
+
+  mounted() {
+    emitter.on(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
+  },
+  unmounted() {
+    emitter.off(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
+  },
+  methods: {
+    onNewToastMessage({ message, action }) {
+      this.snackbarAlertMessages.push({
+        key: new Date().getTime(),
+        message,
+        action,
+      });
+      window.setTimeout(() => {
+        this.snackbarAlertMessages.splice(0, 1);
+      }, this.duration);
+    },
+  },
+};
+</script>
+
+<template>
+  <transition-group
+    name="toast-fade"
+    tag="div"
+    class="fixed left-0 right-0 mx-auto overflow-hidden text-center top-10 z-50 max-w-[40rem]"
+  >
+    <SnackbarItem
+      v-for="snackbarAlertMessage in snackbarAlertMessages"
+      :key="snackbarAlertMessage.key"
+      :message="snackbarAlertMessage.message"
+      :action="snackbarAlertMessage.action"
+    />
+  </transition-group>
+</template>

research/chatwoot/app/javascript/v3/components/SnackBar/Item.vue

@@ -0,0 +1,32 @@
+<script>
+export default {
+  props: {
+    message: { type: String, default: '' },
+    action: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    isActionPresent() {
+      return this.action && this.action.message;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="bg-n-slate-12 dark:bg-n-slate-7 rounded-md drop-shadow-md mb-4 max-w-[40rem] inline-flex items-center min-w-[22rem] py-3 px-4"
+    :class="isActionPresent ? 'justify-between' : 'justify-center'"
+  >
+    <div class="text-sm font-medium text-white">
+      {{ message }}
+    </div>
+    <div v-if="isActionPresent" class="ml-4">
+      <router-link v-if="action.type == 'link'" :to="action.to" class="">
+        {{ action.message }}
+      </router-link>
+    </div>
+  </div>
+</template>

research/chatwoot/app/javascript/v3/helpers/AuthHelper.js

@@ -0,0 +1,53 @@
+import Cookies from 'js-cookie';
+import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+
+export const hasAuthCookie = () => {
+  return !!Cookies.get('cw_d_session_info');
+};
+
+const getSSOAccountPath = ({ ssoAccountId, user }) => {
+  const { accounts = [], account_id = null } = user || {};
+  const ssoAccount = accounts.find(
+    account => account.id === Number(ssoAccountId)
+  );
+  let accountPath = '';
+  if (ssoAccount) {
+    accountPath = `accounts/${ssoAccountId}`;
+  } else if (accounts.length) {
+    // If the account id is not found, redirect to the first account
+    const accountId = account_id || accounts[0].id;
+    accountPath = `accounts/${accountId}`;
+  }
+  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,
+  user,
+}) => {
+  const accountPath = getSSOAccountPath({ ssoAccountId, user });
+  if (accountPath) {
+    if (ssoConversationId) {
+      return frontendURL(`${accountPath}/conversations/${ssoConversationId}`);
+    }
+    return frontendURL(`${accountPath}/dashboard`);
+  }
+  return DEFAULT_REDIRECT_URL;
+};

research/chatwoot/app/javascript/v3/helpers/CommonHelper.js

@@ -0,0 +1,9 @@
+export const replaceRouteWithReload = url => {
+  window.location = url;
+};
+
+export const userInitial = name => {
+  const parts = name.split(/[ -]/).filter(Boolean);
+  let initials = parts.map(part => part[0].toUpperCase()).join('');
+  return initials.slice(0, 2);
+};

research/chatwoot/app/javascript/v3/helpers/RouteHelper.js

@@ -0,0 +1,67 @@
+import { frontendURL } from 'dashboard/helper/URLHelper';
+import { clearBrowserSessionCookies } from 'dashboard/store/utils/api';
+import { hasAuthCookie } from './AuthHelper';
+import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
+import { replaceRouteWithReload } from './CommonHelper';
+
+const validateSSOLoginParams = to => {
+  const isLoginRoute = to.name === 'login';
+  const { email, sso_auth_token: ssoAuthToken } = to.query || {};
+  const hasValidSSOParams = email && ssoAuthToken;
+  return isLoginRoute && hasValidSSOParams;
+};
+
+export const validateRouteAccess = (to, next, chatwootConfig = {}) => {
+  // Pages with ignoreSession:true would be rendered
+  // even if there is an active session
+  // Used for confirmation or password reset pages
+  if (to.meta && to.meta.ignoreSession) {
+    next();
+    return;
+  }
+
+  if (validateSSOLoginParams(to)) {
+    clearBrowserSessionCookies();
+    next();
+    return;
+  }
+
+  // Redirect to dashboard if a cookie is present, the cookie
+  // cleanup and token validation happens in the application pack.
+  if (hasAuthCookie()) {
+    replaceRouteWithReload(DEFAULT_REDIRECT_URL);
+    return;
+  }
+
+  // If the URL is an invalid path, redirect to login page
+  // Disable navigation to signup page if signups are disabled
+  // Signup route has an attribute (requireSignupEnabled) in it's definition
+  const isAnInalidSignupNavigation =
+    chatwootConfig.signupEnabled !== 'true' &&
+    to.meta &&
+    to.meta.requireSignupEnabled;
+
+  // Disable navigation to SAML login if enterprise is not enabled
+  // SAML route has an attribute (requireEnterprise) in it's definition
+  const isEnterpriseOnlyPath =
+    chatwootConfig.isEnterprise !== 'true' &&
+    to.meta &&
+    to.meta.requireEnterprise;
+
+  if (!to.name || isAnInalidSignupNavigation || isEnterpriseOnlyPath) {
+    next(frontendURL('login'));
+    return;
+  }
+
+  next();
+};
+
+export const isOnOnboardingView = route => {
+  const { name = '' } = route || {};
+
+  if (!name) {
+    return false;
+  }
+
+  return name.includes('onboarding_');
+};

research/chatwoot/app/javascript/v3/helpers/specs/AuthHelper.spec.js

@@ -0,0 +1,80 @@
+import { getLoginRedirectURL, getCredentialsFromEmail } from '../AuthHelper';
+
+describe('#URL Helpers', () => {
+  describe('getLoginRedirectURL', () => {
+    it('should return correct Account URL if account id is present', () => {
+      expect(
+        getLoginRedirectURL({
+          ssoAccountId: '7500',
+          user: {
+            accounts: [{ id: 7500, name: 'Test Account 7500' }],
+          },
+        })
+      ).toBe('/app/accounts/7500/dashboard');
+    });
+
+    it('should return correct conversation URL if account id and conversationId is present', () => {
+      expect(
+        getLoginRedirectURL({
+          ssoAccountId: '7500',
+          ssoConversationId: '752',
+          user: {
+            accounts: [{ id: 7500, name: 'Test Account 7500' }],
+          },
+        })
+      ).toBe('/app/accounts/7500/conversations/752');
+    });
+
+    it('should return default URL if account id is not present', () => {
+      expect(getLoginRedirectURL({ ssoAccountId: '7500', user: {} })).toBe(
+        '/app/'
+      );
+      expect(
+        getLoginRedirectURL({
+          ssoAccountId: '7500',
+          user: {
+            accounts: [{ id: '7501', name: 'Test Account 7501' }],
+          },
+        })
+      ).toBe('/app/accounts/7501/dashboard');
+      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',
+      });
+    });
+  });
+});

research/chatwoot/app/javascript/v3/helpers/specs/CommonHelper.spec.js

@@ -0,0 +1,10 @@
+import { userInitial } from '../CommonHelper';
+
+describe('#userInitial', () => {
+  it('returns the initials of the user', () => {
+    expect(userInitial('John Doe')).toEqual('JD');
+    expect(userInitial('John')).toEqual('J');
+    expect(userInitial('John-Doe')).toEqual('JD');
+    expect(userInitial('John Doe Smith')).toEqual('JD');
+  });
+});

research/chatwoot/app/javascript/v3/helpers/specs/RouteHelper.spec.js

@@ -0,0 +1,94 @@
+import { validateRouteAccess, isOnOnboardingView } from '../RouteHelper';
+import { clearBrowserSessionCookies } from 'dashboard/store/utils/api';
+import { replaceRouteWithReload } from '../CommonHelper';
+import Cookies from 'js-cookie';
+
+const next = vi.fn();
+vi.mock('dashboard/store/utils/api', () => ({
+  clearBrowserSessionCookies: vi.fn(),
+}));
+vi.mock('../CommonHelper', () => ({ replaceRouteWithReload: vi.fn() }));
+
+describe('#validateRouteAccess', () => {
+  beforeEach(() => {
+    vi.spyOn(Cookies, 'set');
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('reset cookies and continues to the login page if the SSO parameters are present', () => {
+    validateRouteAccess(
+      {
+        name: 'login',
+        query: { sso_auth_token: 'random_token', email: 'random@email.com' },
+      },
+      next
+    );
+    expect(clearBrowserSessionCookies).toHaveBeenCalledTimes(1);
+    expect(next).toHaveBeenCalledTimes(1);
+  });
+
+  it('ignore session and continue to the page if the ignoreSession is present in route definition', () => {
+    validateRouteAccess(
+      {
+        name: 'login',
+        meta: { ignoreSession: true },
+      },
+      next
+    );
+    expect(clearBrowserSessionCookies).not.toHaveBeenCalled();
+    expect(next).toHaveBeenCalledTimes(1);
+  });
+
+  it('redirects to dashboard if auth cookie is present', () => {
+    vi.spyOn(Cookies, 'get').mockReturnValueOnce(true);
+
+    validateRouteAccess({ name: 'login' }, next);
+    expect(clearBrowserSessionCookies).not.toHaveBeenCalled();
+    expect(replaceRouteWithReload).toHaveBeenCalledWith('/app/');
+    expect(next).not.toHaveBeenCalled();
+  });
+
+  it('redirects to login if route is empty', () => {
+    validateRouteAccess({}, next);
+    expect(clearBrowserSessionCookies).not.toHaveBeenCalled();
+    expect(next).toHaveBeenCalledWith('/app/login');
+  });
+
+  it('redirects to login if signup is disabled', () => {
+    validateRouteAccess({ meta: { requireSignupEnabled: true } }, next, {
+      signupEnabled: 'true',
+    });
+    expect(clearBrowserSessionCookies).not.toHaveBeenCalled();
+    expect(next).toHaveBeenCalledWith('/app/login');
+  });
+
+  it('continues to the route in every other case', () => {
+    validateRouteAccess({ name: 'reset_password' }, next);
+    expect(clearBrowserSessionCookies).not.toHaveBeenCalled();
+    expect(next).toHaveBeenCalledWith();
+  });
+});
+
+describe('isOnOnboardingView', () => {
+  test('returns true for a route with onboarding name', () => {
+    const route = { name: 'onboarding_welcome' };
+    expect(isOnOnboardingView(route)).toBe(true);
+  });
+
+  test('returns false for a route without onboarding name', () => {
+    const route = { name: 'home' };
+    expect(isOnOnboardingView(route)).toBe(false);
+  });
+
+  test('returns false for a route with null name', () => {
+    const route = { name: null };
+    expect(isOnOnboardingView(route)).toBe(false);
+  });
+
+  test('returns false for an  undefined route object', () => {
+    expect(isOnOnboardingView()).toBe(false);
+  });
+});

research/chatwoot/app/javascript/v3/store/index.js

@@ -0,0 +1,8 @@
+import { createStore } from 'vuex';
+import globalConfig from 'shared/store/globalConfig';
+
+export default createStore({
+  modules: {
+    globalConfig,
+  },
+});

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

@@ -0,0 +1,39 @@
+<script>
+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;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-center min-h-screen h-full bg-n-background w-full"
+  >
+    <Spinner color-scheme="primary" size="" />
+    <div class="ml-2 text-n-slate-11">{{ $t('CONFIRM_EMAIL') }}</div>
+  </div>
+</template>

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

@@ -0,0 +1,139 @@
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
+import FormInput from '../../../components/Form/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;
+        },
+      },
+    },
+  },
+  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')
+          );
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col justify-center w-full min-h-screen py-12 bg-n-brand/5 dark:bg-n-background sm:px-6 lg:px-8"
+  >
+    <form
+      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
+      @submit.prevent="submitForm"
+    >
+      <h1
+        class="mb-1 text-2xl font-medium tracking-tight text-left text-n-slate-12"
+      >
+        {{ $t('SET_NEW_PASSWORD.TITLE') }}
+      </h1>
+
+      <div class="space-y-5">
+        <FormInput
+          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')"
+          :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
+          @blur="v$.credentials.password.$touch"
+        />
+        <FormInput
+          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')"
+          :placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
+          @blur="v$.credentials.confirmPassword.$touch"
+        />
+        <NextButton
+          lg
+          type="submit"
+          data-testid="submit_button"
+          class="w-full"
+          :label="$t('SET_NEW_PASSWORD.SUBMIT')"
+          :disabled="
+            v$.credentials.password.$invalid ||
+            v$.credentials.confirmPassword.$invalid ||
+            newPasswordAPI.showLoading
+          "
+          :is-loading="newPasswordAPI.showLoading"
+        />
+      </div>
+    </form>
+  </div>
+</template>

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

@@ -0,0 +1,110 @@
+<script>
+import { useVuelidate } from '@vuelidate/core';
+import { useAlert } from 'dashboard/composables';
+import { required, minLength, email } from '@vuelidate/validators';
+import { useBranding } from 'shared/composables/useBranding';
+import FormInput from '../../../../components/Form/Input.vue';
+import { resetPassword } from '../../../../api/auth';
+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);
+        });
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col justify-center w-full min-h-screen py-12 bg-n-brand/5 dark:bg-n-background sm:px-6 lg:px-8"
+  >
+    <form
+      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
+      @submit.prevent="submit"
+    >
+      <h1
+        class="mb-1 text-2xl font-medium tracking-tight text-left text-n-slate-12"
+      >
+        {{ $t('RESET_PASSWORD.TITLE') }}
+      </h1>
+      <p
+        class="mb-4 text-sm font-normal leading-6 tracking-normal text-n-slate-11"
+      >
+        {{ replaceInstallationName($t('RESET_PASSWORD.DESCRIPTION')) }}
+      </p>
+      <div class="space-y-5">
+        <FormInput
+          v-model="credentials.email"
+          name="email_address"
+          :has-error="v$.credentials.email.$error"
+          :error-message="$t('RESET_PASSWORD.EMAIL.ERROR')"
+          :placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
+          @input="v$.credentials.email.$touch"
+        />
+        <NextButton
+          lg
+          type="submit"
+          data-testid="submit_button"
+          class="w-full"
+          :label="$t('RESET_PASSWORD.SUBMIT')"
+          :disabled="v$.credentials.email.$invalid || resetPassword.showLoading"
+          :is-loading="resetPassword.showLoading"
+        />
+      </div>
+      <p class="mt-4 -mb-1 text-sm text-n-slate-11">
+        {{ $t('RESET_PASSWORD.GO_BACK_TO_LOGIN') }}
+        <router-link to="/auth/login" class="text-link text-n-brand">
+          {{ $t('COMMON.CLICK_HERE') }}.
+        </router-link>
+      </p>
+    </form>
+  </div>
+</template>

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

@@ -0,0 +1,86 @@
+<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';
+
+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="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-7 dark:hidden"
+            />
+            <img
+              v-if="globalConfig.logoDark"
+              :src="globalConfig.logoDark"
+              :alt="globalConfig.installationName"
+              class="hidden w-auto h-7 dark:block"
+            />
+            <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>
+      </div>
+      <Testimonials
+        v-if="isAChatwootInstance"
+        class="flex-1 hidden xl:flex"
+        @resize-containers="resizeContainers"
+      />
+    </div>
+    <div
+      v-show="isLoading"
+      class="relative flex items-center justify-center w-full h-full"
+    >
+      <Spinner color-scheme="primary" size="" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,188 @@
+<script setup>
+import { ref, computed, reactive } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+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 FormInput from '../../../../../components/Form/Input.vue';
+import NextButton from 'dashboard/components-next/button/Button.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 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);
+      },
+    },
+    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">
+    <form class="space-y-3" @submit.prevent="submit">
+      <FormInput
+        v-model="credentials.email"
+        type="email"
+        name="email_address"
+        :class="{ error: v$.credentials.email.$error }"
+        :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"
+      />
+      <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();
+          "
+        />
+        <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"
+        >
+          <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 font-medium"
+        :label="$t('REGISTER.SUBMIT')"
+        :disabled="isSignupInProgress || !isFormValid"
+        :is-loading="isSignupInProgress"
+      />
+    </form>
+    <GoogleOAuthButton v-if="showGoogleOAuth" class="mt-3">
+      {{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
+    </GoogleOAuthButton>
+    <p
+      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>

research/chatwoot/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>

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

@@ -0,0 +1,48 @@
+<script setup>
+import { ref, onBeforeMount } from 'vue';
+import TestimonialCard from './TestimonialCard.vue';
+import { getTestimonialContent } from '../../../../../api/testimonials';
+
+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
+    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"
+  >
+    <TestimonialCard
+      v-if="testimonial"
+      :review-content="testimonial.authorReview"
+      :author-image="testimonial.authorImage"
+      :author-name="testimonial.authorName"
+      :author-designation="testimonial.authorCompany"
+    />
+    <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>

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

@@ -0,0 +1,40 @@
+<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">
+    <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-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>
+</template>

research/chatwoot/app/javascript/v3/views/index.js

@@ -0,0 +1,24 @@
+import { createRouter, createWebHistory } from 'vue-router';
+
+import routes from './routes';
+import AnalyticsHelper from 'dashboard/helper/AnalyticsHelper';
+import { validateRouteAccess } from '../helpers/RouteHelper';
+
+export const router = createRouter({ history: createWebHistory(), routes });
+
+const sensitiveRouteNames = ['auth_password_edit'];
+
+export const initalizeRouter = () => {
+  router.beforeEach((to, _, next) => {
+    if (!sensitiveRouteNames.includes(to.name)) {
+      AnalyticsHelper.page(to.name || '', {
+        path: to.path,
+        name: to.name,
+      });
+    }
+
+    return validateRouteAccess(to, next, window.chatwootConfig);
+  });
+};
+
+export default router;

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

@@ -0,0 +1,341 @@
+<script>
+// utils and composables
+import { login } from '../../api/auth';
+import { mapGetters } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import { required, email } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { SESSION_STORAGE_KEYS } from 'dashboard/constants/sessionStorage';
+import SessionStorage from 'shared/helpers/sessionStorage';
+import { useBranding } from 'shared/composables/useBranding';
+
+// components
+import SimpleDivider from '../../components/Divider/SimpleDivider.vue';
+import FormInput from '../../components/Form/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 ERROR_MESSAGES = {
+  'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
+  'business-account-only': 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY',
+  'saml-authentication-failed': 'LOGIN.SAML.API.ERROR_MESSAGE',
+  'saml-not-enabled': 'LOGIN.SAML.API.ERROR_MESSAGE',
+};
+
+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' }),
+    allowedLoginMethods() {
+      return window.chatwootConfig.allowedLoginMethods || ['email'];
+    },
+    showGoogleOAuth() {
+      return (
+        this.allowedLoginMethods.includes('google_oauth') &&
+        Boolean(window.chatwootConfig.googleOAuthClientId)
+      );
+    },
+    showSignupLink() {
+      return window.chatwootConfig.signupEnabled === 'true';
+    },
+    showSamlLogin() {
+      return this.allowedLoginMethods.includes('saml');
+    },
+  },
+  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 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,
+      };
+
+      login(credentials)
+        .then(result => {
+          // Check if MFA is required
+          if (result?.mfaRequired) {
+            this.loginApi.showLoading = false;
+            this.mfaRequired = true;
+            this.mfaToken = result.mfaToken;
+            return;
+          }
+
+          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;
+      }
+
+      this.submitLogin();
+    },
+    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 = '';
+    },
+  },
+};
+</script>
+
+<template>
+  <main
+    class="flex flex-col w-full min-h-screen py-20 bg-n-brand/5 dark:bg-n-background sm:px-6 lg:px-8"
+  >
+    <section class="max-w-5xl mx-auto">
+      <img
+        :src="globalConfig.logo"
+        :alt="globalConfig.installationName"
+        class="block w-auto h-8 mx-auto dark:hidden"
+      />
+      <img
+        v-if="globalConfig.logoDark"
+        :src="globalConfig.logoDark"
+        :alt="globalConfig.installationName"
+        class="hidden w-auto h-8 mx-auto dark:block"
+      />
+      <h2 class="mt-6 text-3xl font-medium text-center text-n-slate-12">
+        {{ replaceInstallationName($t('LOGIN.TITLE')) }}
+      </h2>
+      <p v-if="showSignupLink" class="mt-3 text-sm text-center text-n-slate-11">
+        {{ $t('COMMON.OR') }}
+        <router-link to="auth/signup" class="lowercase text-link text-n-brand">
+          {{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
+        </router-link>
+      </p>
+    </section>
+
+    <!-- MFA Verification Section -->
+    <section v-if="mfaRequired" class="mt-11">
+      <MfaVerification
+        :mfa-token="mfaToken"
+        @verified="handleMfaVerified"
+        @cancel="handleMfaCancel"
+      />
+    </section>
+
+    <!-- Regular Login Section -->
+    <section
+      v-else
+      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,
+      }"
+    >
+      <div v-if="!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"
+            >
+              <Icon
+                icon="i-lucide-lock-keyhole"
+                class="size-5 text-n-slate-11"
+              />
+              <span class="ml-2 text-base font-medium text-n-slate-12">
+                {{ $t('LOGIN.SAML.LABEL') }}
+              </span>
+            </router-link>
+          </div>
+          <SimpleDivider
+            v-if="showGoogleOAuth || showSamlLogin"
+            :label="$t('COMMON.OR')"
+            class="uppercase"
+          />
+        </div>
+        <form class="space-y-5" @submit.prevent="submitFormLogin">
+          <FormInput
+            v-model="credentials.email"
+            name="email_address"
+            type="text"
+            data-testid="email_input"
+            :tabindex="1"
+            required
+            :label="$t('LOGIN.EMAIL.LABEL')"
+            :placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
+            :has-error="v$.credentials.email.$error"
+            @input="v$.credentials.email.$touch"
+          />
+          <FormInput
+            v-model="credentials.password"
+            type="password"
+            name="password"
+            data-testid="password_input"
+            required
+            :tabindex="2"
+            :label="$t('LOGIN.PASSWORD.LABEL')"
+            :placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
+            :has-error="v$.credentials.password.$error"
+            @input="v$.credentials.password.$touch"
+          >
+            <p v-if="!globalConfig.disableUserProfileUpdate">
+              <router-link
+                to="auth/reset/password"
+                class="text-sm text-link"
+                tabindex="4"
+              >
+                {{ $t('LOGIN.FORGOT_PASSWORD') }}
+              </router-link>
+            </p>
+          </FormInput>
+          <NextButton
+            lg
+            type="submit"
+            data-testid="submit_button"
+            class="w-full"
+            :tabindex="3"
+            :label="$t('LOGIN.SUBMIT')"
+            :disabled="loginApi.showLoading"
+            :is-loading="loginApi.showLoading"
+          />
+        </form>
+      </div>
+      <div v-else class="flex items-center justify-center">
+        <Spinner color-scheme="primary" size="" />
+      </div>
+    </section>
+  </main>
+</template>

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

@@ -0,0 +1,132 @@
+<script setup>
+import { ref, nextTick, computed, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { required, email } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+
+// components
+import FormInput from '../../components/Form/Input.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  authError: {
+    type: String,
+    default: '',
+  },
+  target: {
+    type: String,
+    default: 'web',
+  },
+});
+
+const store = useStore();
+const { t } = useI18n();
+
+const credentials = ref({
+  email: '',
+});
+
+const loginApi = ref({
+  showLoading: false,
+  hasErrored: false,
+});
+
+const handleAuthError = () => {
+  if (!props.authError) {
+    return;
+  }
+
+  const translatedMessage = t('LOGIN.SAML.API.ERROR_MESSAGE');
+  useAlert(translatedMessage);
+  loginApi.value.hasErrored = true;
+};
+
+const validations = {
+  credentials: {
+    email: {
+      required,
+      email,
+    },
+  },
+};
+
+const v$ = useVuelidate(validations, { credentials });
+
+const globalConfig = computed(() => store.getters['globalConfig/get']);
+const csrfToken = ref('');
+
+onMounted(async () => {
+  csrfToken.value =
+    document
+      .querySelector('meta[name="csrf-token"]')
+      ?.getAttribute('content') || '';
+
+  await nextTick(handleAuthError);
+});
+</script>
+
+<template>
+  <main
+    class="flex flex-col w-full min-h-screen py-20 bg-n-brand/5 dark:bg-n-background sm:px-6 lg:px-8"
+  >
+    <section class="max-w-5xl mx-auto">
+      <img
+        :src="globalConfig.logo"
+        :alt="globalConfig.installationName"
+        class="block w-auto h-8 mx-auto dark:hidden"
+      />
+      <img
+        v-if="globalConfig.logoDark"
+        :src="globalConfig.logoDark"
+        :alt="globalConfig.installationName"
+        class="hidden w-auto h-8 mx-auto dark:block"
+      />
+      <h2 class="mt-6 text-3xl font-medium text-center text-n-slate-12">
+        {{ t('LOGIN.SAML.TITLE') }}
+      </h2>
+    </section>
+    <section
+      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="{
+        'animate-wiggle': loginApi.hasErrored,
+      }"
+    >
+      <form class="space-y-5" method="POST" action="/api/v1/auth/saml_login">
+        <FormInput
+          v-model="credentials.email"
+          name="email"
+          type="text"
+          :tabindex="1"
+          required
+          :label="t('LOGIN.SAML.WORK_EMAIL.LABEL')"
+          :placeholder="t('LOGIN.SAML.WORK_EMAIL.PLACEHOLDER')"
+          :has-error="v$.credentials.email.$error"
+          @input="v$.credentials.email.$touch"
+        />
+        <input
+          type="hidden"
+          class="h-0"
+          name="authenticity_token"
+          :value="csrfToken"
+        />
+        <input type="hidden" class="h-0" name="target" :value="target" />
+        <NextButton
+          lg
+          type="submit"
+          class="w-full"
+          :tabindex="2"
+          :label="t('LOGIN.SAML.SUBMIT')"
+          :disabled="loginApi.showLoading"
+          :is-loading="loginApi.showLoading"
+        />
+      </form>
+    </section>
+    <p class="mt-6 text-sm text-center text-n-slate-11">
+      <router-link to="/app/login" class="text-link text-n-brand">
+        {{ t('LOGIN.SAML.BACK_TO_LOGIN') }}
+      </router-link>
+    </p>
+  </main>
+</template>

research/chatwoot/app/javascript/v3/views/onboarding/OnboardingStep.vue

@@ -0,0 +1,55 @@
+<script>
+export default {
+  name: 'OnboardingStep',
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+    isComplete: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="flex items-center gap-2 p-2 text-lg font-bold mb-6 relative before:absolute before:h-10 before:w-[1px] before:bg-n-slate-3 before:-bottom-8 before:left-[24px] hide-before-of-last"
+    :class="{
+      'text-n-brand ': isActive,
+      'text-n-slate-6': !isActive || isComplete,
+      'before:bg-n-brand': !isActive && isComplete,
+    }"
+  >
+    <div
+      class="grid w-8 h-8 border border-solid rounded-full place-content-center"
+      :class="{
+        'border-n-brand': !isActive || isComplete,
+        'border-n-weak': !isActive && !isComplete,
+        'text-n-brand': isComplete,
+      }"
+    >
+      <fluent-icon v-if="isComplete" size="20" icon="checkmark" />
+      <fluent-icon v-else size="20" :icon="icon" />
+    </div>
+    <span>
+      {{ title }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.hide-before-of-last:last-child::before {
+  display: none;
+}
+</style>

research/chatwoot/app/javascript/v3/views/routes.js

@@ -0,0 +1,67 @@
+import { frontendURL } from 'dashboard/helper/URLHelper';
+
+import Login from './login/Index.vue';
+import SamlLogin from './login/Saml.vue';
+import Signup from './auth/signup/Index.vue';
+import ResetPassword from './auth/reset/password/Index.vue';
+import Confirmation from './auth/confirmation/Index.vue';
+import PasswordEdit from './auth/password/Edit.vue';
+
+export default [
+  {
+    path: frontendURL('login'),
+    name: 'login',
+    component: Login,
+    props: route => ({
+      config: route.query.config,
+      email: route.query.email,
+      ssoAuthToken: route.query.sso_auth_token,
+      ssoAccountId: route.query.sso_account_id,
+      ssoConversationId: route.query.sso_conversation_id,
+      authError: route.query.error,
+    }),
+  },
+  {
+    path: frontendURL('login/sso'),
+    name: 'sso_login',
+    component: SamlLogin,
+    meta: { requireEnterprise: true },
+    props: route => ({
+      authError: route.query.error,
+      target: route.query.target,
+    }),
+  },
+  {
+    path: frontendURL('auth/signup'),
+    name: 'auth_signup',
+    component: Signup,
+    meta: { requireSignupEnabled: true },
+  },
+  {
+    path: frontendURL('auth/confirmation'),
+    name: 'auth_confirmation',
+    component: Confirmation,
+    meta: { ignoreSession: true },
+    props: route => ({
+      config: route.query.config,
+      confirmationToken: route.query.confirmation_token,
+      redirectUrl: route.query.route_url,
+    }),
+  },
+  {
+    path: frontendURL('auth/password/edit'),
+    name: 'auth_password_edit',
+    component: PasswordEdit,
+    meta: { ignoreSession: true },
+    props: route => ({
+      config: route.query.config,
+      resetPasswordToken: route.query.reset_password_token,
+      redirectUrl: route.query.route_url,
+    }),
+  },
+  {
+    path: frontendURL('auth/reset/password'),
+    name: 'auth_reset_password',
+    component: ResetPassword,
+  },
+];