feat: Support dark mode in login pages (#7420)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
2023-06-30 19:19:52 -07:00
parent 022f4f899f
commit b57063a8b8
57 changed files with 1516 additions and 1483 deletions
--- a/app/javascript/v3/App.vue
+++ b/app/javascript/v3/App.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="h-full w-full antialiased" :class="theme">
+    <router-view />
+    <snackbar-container />
+  </div>
+</template>
+<script>
+import SnackbarContainer from './components/SnackBar/Container.vue';
+
+export default {
+  components: { SnackbarContainer },
+  data() {
+    return { theme: 'light' };
+  },
+  mounted() {
+    this.setColorTheme();
+    this.listenToThemeChanges();
+  },
+  methods: {
+    setColorTheme() {
+      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        this.theme = 'dark';
+      } else {
+        this.theme = 'light ';
+      }
+    },
+    listenToThemeChanges() {
+      const mql = window.matchMedia('(prefers-color-scheme: dark)');
+
+      mql.onchange = e => {
+        if (e.matches) {
+          this.theme = 'dark';
+        } else {
+          this.theme = 'light';
+        }
+      };
+    },
+  },
+};
+</script>
+<style lang="scss">
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import 'shared/assets/fonts/plus-jakarta';
+@import 'shared/assets/stylesheets/colors';
+@import 'shared/assets/stylesheets/spacing';
+@import 'shared/assets/stylesheets/font-size';
+@import 'shared/assets/stylesheets/border-radius';
+
+html,
+body {
+  font-family: 'PlusJakarta', -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-woot-500 font-medium hover:text-woot-600;
+}
+
+.tooltip {
+  @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-300 dark:text-slate-900;
+}
+</style>
--- a/app/javascript/v3/api/apiClient.js
+++ b/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;
--- a/app/javascript/v3/api/auth.js
+++ b/app/javascript/v3/api/auth.js
@@ -0,0 +1,74 @@
+import {
+  setAuthCredentials,
+  throwErrorMessage,
+  clearLocalStorageOnLogout,
+} from 'dashboard/store/utils/api';
+import wootAPI from './apiClient';
+import { getLoginRedirectURL } from '../helpers/AuthHelper';
+
+export const login = async ({
+  ssoAccountId,
+  ssoConversationId,
+  ...credentials
+}) => {
+  try {
+    const response = await wootAPI.post('auth/sign_in', credentials);
+    setAuthCredentials(response);
+    clearLocalStorageOnLogout();
+    window.location = getLoginRedirectURL({
+      ssoAccountId,
+      ssoConversationId,
+      user: response.data.data,
+    });
+  } catch (error) {
+    throwErrorMessage(error);
+  }
+};
+
+export const register = async creds => {
+  try {
+    const response = await wootAPI.post('api/v1/accounts.json', {
+      account_name: creds.accountName.trim(),
+      user_full_name: creds.fullName.trim(),
+      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 });
--- a/app/javascript/v3/api/testimonials.js
+++ b/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);
+};
--- a/app/javascript/v3/components/Button/SubmitButton.vue
+++ b/app/javascript/v3/components/Button/SubmitButton.vue
@@ -0,0 +1,63 @@
+<template>
+  <button
+    :type="type"
+    data-testid="submit_button"
+    :disabled="disabled"
+    :class="computedClass"
+    class="flex items-center w-full justify-center rounded-md bg-woot-500 py-3 px-3 text-base font-medium text-white shadow-sm hover:bg-woot-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-woot-500 cursor-pointer"
+    @click="onClick"
+  >
+    <span>{{ buttonText }}</span>
+    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
+    <spinner v-if="loading" />
+  </button>
+</template>
+
+<script>
+import Spinner from 'shared/components/Spinner';
+
+export default {
+  components: {
+    Spinner,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    buttonText: {
+      type: String,
+      default: '',
+    },
+    buttonClass: {
+      type: String,
+      default: '',
+    },
+    iconClass: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'submit',
+    },
+  },
+  computed: {
+    computedClass() {
+      return `
+        ${this.disabled ? 'opacity-40 hover:bg-woot-500' : ''}
+        ${this.buttonClass || ' '}
+      `;
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
--- a/app/javascript/v3/components/Divider/SimpleDivider.vue
+++ b/app/javascript/v3/components/Divider/SimpleDivider.vue
@@ -0,0 +1,24 @@
+<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-slate-200 dark:border-slate-600" />
+    </div>
+    <div v-if="label" class="relative flex justify-center text-sm">
+      <span
+        class="bg-white dark:bg-slate-800 px-2 text-slate-500 dark:text-white"
+      >
+        {{ label }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
--- a/app/javascript/v3/components/Form/Input.vue
+++ b/app/javascript/v3/components/Form/Input.vue
@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <label
+      v-if="label"
+      :for="name"
+      class="flex justify-between text-sm font-medium leading-6 text-slate-900 dark:text-white"
+      :class="{ 'text-red-500': hasError }"
+    >
+      {{ label }}
+      <slot />
+    </label>
+    <div class="mt-1">
+      <input
+        :id="name"
+        :name="name"
+        :type="type"
+        autocomplete="off"
+        :required="required"
+        :placeholder="placeholder"
+        :value="value"
+        :class="{
+          'focus:ring-red-600 ring-red-600': hasError,
+          'dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200': !hasError,
+        }"
+        class="block w-full rounded-md border-0 px-3 py-3 shadow-sm ring-1 ring-inset text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 outline-none dark:bg-slate-700 "
+        @input="onInput"
+        @blur="$emit('blur')"
+      />
+      <span
+        v-if="errorMessage && hasError"
+        class="text-xs leading-2 text-red-400"
+      >
+        {{ errorMessage }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    onInput(e) {
+      this.$emit('input', e.target.value);
+    },
+  },
+};
+</script>
--- a/app/javascript/v3/components/GoogleOauth/Button.spec.js
+++ b/app/javascript/v3/components/GoogleOauth/Button.spec.js
@@ -0,0 +1,52 @@
+import { shallowMount } from '@vue/test-utils';
+import GoogleOAuthButton from './Button.vue';
+
+function getWrapper(showSeparator) {
+  return shallowMount(GoogleOAuthButton, {
+    propsData: { showSeparator: showSeparator },
+    methods: {
+      $t(text) {
+        return text;
+      },
+    },
+  });
+}
+
+describe('GoogleOAuthButton.vue', () => {
+  beforeEach(() => {
+    window.chatwootConfig = {
+      googleOAuthClientId: 'clientId',
+      googleOAuthCallbackUrl: 'http://localhost:3000/test-callback',
+    };
+  });
+
+  afterEach(() => {
+    window.chatwootConfig = {};
+  });
+
+  it('renders the OR separator if showSeparator is true', () => {
+    const wrapper = getWrapper(true);
+    expect(wrapper.findComponent({ ref: 'divider' }).exists()).toBe(true);
+  });
+
+  it('does not render the OR separator if showSeparator is false', () => {
+    const wrapper = getWrapper(false);
+    expect(wrapper.findComponent({ ref: 'divider' }).exists()).toBe(false);
+  });
+
+  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/oauthchooseaccount');
+    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');
+
+    expect(wrapper.findComponent({ ref: 'divider' }).exists()).toBe(true);
+  });
+});
--- a/app/javascript/v3/components/GoogleOauth/Button.vue
+++ b/app/javascript/v3/components/GoogleOauth/Button.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="flex flex-col">
+    <a
+      :href="getGoogleAuthUrl()"
+      class="inline-flex w-full justify-center rounded-md bg-white py-3 px-4 shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
+    >
+      <img src="/assets/images/auth/google.svg" alt="Google Logo" class="h-6" />
+      <span class="text-base font-medium ml-2 text-slate-600 dark:text-white">
+        {{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}
+      </span>
+    </a>
+    <simple-divider
+      v-if="showSeparator"
+      ref="divider"
+      :label="$t('COMMON.OR')"
+      class="uppercase"
+    />
+  </div>
+</template>
+
+<script>
+import SimpleDivider from '../Divider/SimpleDivider.vue';
+
+export default {
+  components: {
+    SimpleDivider,
+  },
+  props: {
+    showSeparator: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  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/oauthchooseaccount';
+      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>
--- a/app/javascript/v3/components/SnackBar/Container.vue
+++ b/app/javascript/v3/components/SnackBar/Container.vue
@@ -0,0 +1,54 @@
+<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]"
+  >
+    <snackbar-item
+      v-for="snackbarAlertMessage in snackbarAlertMessages"
+      :key="snackbarAlertMessage.key"
+      :message="snackbarAlertMessage.message"
+      :action="snackbarAlertMessage.action"
+    />
+  </transition-group>
+</template>
+
+<script>
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import SnackbarItem from './Item';
+
+export default {
+  components: { SnackbarItem },
+  props: {
+    duration: {
+      type: Number,
+      default: 2500,
+    },
+  },
+
+  data() {
+    return {
+      snackbarAlertMessages: [],
+    };
+  },
+
+  mounted() {
+    bus.$on(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
+  },
+  beforeDestroy() {
+    bus.$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>
--- a/app/javascript/v3/components/SnackBar/Item.vue
+++ b/app/javascript/v3/components/SnackBar/Item.vue
@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="bg-slate-900 dark:bg-slate-800 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>
+
+<script>
+export default {
+  props: {
+    message: { type: String, default: '' },
+    action: {
+      type: Object,
+      default: () => ({}),
+    },
+    showButton: Boolean,
+    duration: {
+      type: [String, Number],
+      default: 3000,
+    },
+  },
+  computed: {
+    isActionPresent() {
+      return this.action && this.action.message;
+    },
+  },
+};
+</script>
--- a/app/javascript/v3/helpers/AuthHelper.js
+++ b/app/javascript/v3/helpers/AuthHelper.js
@@ -0,0 +1,38 @@
+import Cookies from 'js-cookie';
+import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+
+export const hasAuthCookie = () => {
+  return !!Cookies.getJSON('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;
+};
+
+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;
+};
--- a/app/javascript/v3/helpers/CommonHelper.js
+++ b/app/javascript/v3/helpers/CommonHelper.js
@@ -0,0 +1,3 @@
+export const replaceRouteWithReload = url => {
+  window.location = url;
+};
--- a/app/javascript/v3/helpers/RouteHelper.js
+++ b/app/javascript/v3/helpers/RouteHelper.js
@@ -0,0 +1,50 @@
+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;
+
+  if (!to.name || isAnInalidSignupNavigation) {
+    next(frontendURL('login'));
+    return;
+  }
+
+  next();
+};
--- a/app/javascript/v3/helpers/specs/AuthHelper.spec.js
+++ b/app/javascript/v3/helpers/specs/AuthHelper.spec.js
@@ -0,0 +1,43 @@
+import { getLoginRedirectURL } 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/');
+    });
+  });
+});
--- a/app/javascript/v3/helpers/specs/RouteHelper.spec.js
+++ b/app/javascript/v3/helpers/specs/RouteHelper.spec.js
@@ -0,0 +1,69 @@
+import { validateRouteAccess } from '../RouteHelper';
+import { clearBrowserSessionCookies } from 'dashboard/store/utils/api';
+import { replaceRouteWithReload } from '../CommonHelper';
+import Cookies from 'js-cookie';
+
+const next = jest.fn();
+jest.mock('dashboard/store/utils/api', () => ({
+  clearBrowserSessionCookies: jest.fn(),
+}));
+jest.mock('../CommonHelper', () => ({ replaceRouteWithReload: jest.fn() }));
+
+jest.mock('js-cookie', () => ({
+  getJSON: jest.fn(),
+}));
+
+Cookies.getJSON.mockReturnValueOnce(true).mockReturnValue(false);
+describe('#validateRouteAccess', () => {
+  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', () => {
+    Cookies.getJSON.mockImplementation(() => 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();
+  });
+});
--- a/app/javascript/v3/store/index.js
+++ b/app/javascript/v3/store/index.js
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import globalConfig from 'shared/store/globalConfig';
+
+Vue.use(Vuex);
+export default new Vuex.Store({
+  modules: {
+    globalConfig,
+  },
+});
--- a/app/javascript/v3/views/auth/confirmation/Index.vue
+++ b/app/javascript/v3/views/auth/confirmation/Index.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="flex items-center justify-center h-full w-full">
+    <spinner color-scheme="primary" size="" />
+    <div class="ml-2">{{ $t('CONFIRM_EMAIL') }}</div>
+  </div>
+</template>
+<script>
+import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
+import { verifyPasswordToken } from '../../../api/auth';
+import Spinner from 'shared/components/Spinner';
+
+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>
--- a/app/javascript/v3/views/auth/password/Edit.vue
+++ b/app/javascript/v3/views/auth/password/Edit.vue
@@ -0,0 +1,132 @@
+<template>
+  <div
+    class="flex flex-col bg-woot-25 min-h-full w-full py-12 sm:px-6 lg:px-8 justify-center dark:bg-slate-900"
+  >
+    <form
+      class="sm:mx-auto sm:w-full sm:max-w-lg bg-white dark:bg-slate-800 p-11 shadow sm:shadow-lg sm:rounded-lg"
+      @submit.prevent="submitForm"
+    >
+      <h1
+        class="mb-1 text-left text-2xl font-medium tracking-tight text-slate-900 dark:text-white"
+      >
+        {{ $t('SET_NEW_PASSWORD.TITLE') }}
+      </h1>
+
+      <div class="column log-in-form space-y-5">
+        <form-input
+          v-model.trim="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"
+        />
+        <form-input
+          v-model.trim="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"
+        />
+        <submit-button
+          :disabled="
+            $v.credentials.password.$invalid ||
+              $v.credentials.confirmPassword.$invalid ||
+              newPasswordAPI.showLoading
+          "
+          :button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
+          :loading="newPasswordAPI.showLoading"
+        />
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import { required, minLength } from 'vuelidate/lib/validators';
+import FormInput from '../../../components/Form/Input.vue';
+import SubmitButton from '../../../components/Button/SubmitButton.vue';
+import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
+import { setNewPassword } from '../../../api/auth';
+
+export default {
+  components: {
+    FormInput,
+    SubmitButton,
+  },
+  props: {
+    resetPasswordToken: { type: String, default: '' },
+    redirectUrl: { type: String, default: '' },
+    config: { type: String, default: '' },
+  },
+  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: {
+    showAlert(message) {
+      // Reset loading, current selected agent
+      this.newPasswordAPI.showLoading = false;
+      bus.$emit('newToastMessage', 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.showAlert(
+            error?.message || this.$t('SET_NEW_PASSWORD.API.ERROR_MESSAGE')
+          );
+        });
+    },
+  },
+};
+</script>
--- a/app/javascript/v3/views/auth/reset/password/Index.vue
+++ b/app/javascript/v3/views/auth/reset/password/Index.vue
@@ -0,0 +1,108 @@
+<template>
+  <div
+    class="flex flex-col bg-woot-25 min-h-full w-full py-12 sm:px-6 lg:px-8 justify-center dark:bg-slate-900"
+  >
+    <form
+      class="sm:mx-auto sm:w-full sm:max-w-lg bg-white dark:bg-slate-800 p-11 shadow sm:shadow-lg sm:rounded-lg"
+      @submit.prevent="submit"
+    >
+      <h1
+        class="mb-1 text-left text-2xl font-medium tracking-tight text-slate-900 dark:text-white"
+      >
+        {{ $t('RESET_PASSWORD.TITLE') }}
+      </h1>
+      <p
+        class="text-sm text-slate-600 dark:text-woot-50 tracking-normal font-normal leading-6 mb-4"
+      >
+        {{
+          useInstallationName(
+            $t('RESET_PASSWORD.DESCRIPTION'),
+            globalConfig.installationName
+          )
+        }}
+      </p>
+      <div class="column log-in-form space-y-5">
+        <form-input
+          v-model.trim="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"
+        />
+        <SubmitButton
+          :disabled="$v.credentials.email.$invalid || resetPassword.showLoading"
+          :button-text="$t('RESET_PASSWORD.SUBMIT')"
+          :loading="resetPassword.showLoading"
+        />
+      </div>
+      <p class="text-sm text-slate-600 dark:text-woot-50 mt-4 -mb-1">
+        {{ $t('RESET_PASSWORD.GO_BACK_TO_LOGIN') }}
+        <router-link to="/auth/login" class="text-link">
+          {{ $t('COMMON.CLICK_HERE') }}.
+        </router-link>
+      </p>
+    </form>
+  </div>
+</template>
+
+<script>
+import { required, minLength, email } from 'vuelidate/lib/validators';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import { mapGetters } from 'vuex';
+import FormInput from '../../../../components/Form/Input.vue';
+import { resetPassword } from '../../../../api/auth';
+import SubmitButton from '../../../../components/Button/SubmitButton.vue';
+
+export default {
+  components: { FormInput, SubmitButton },
+  mixins: [globalConfigMixin],
+  data() {
+    return {
+      credentials: { email: '' },
+      resetPassword: {
+        message: '',
+        showLoading: false,
+      },
+      error: '',
+    };
+  },
+  computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+  },
+  validations: {
+    credentials: {
+      email: {
+        required,
+        email,
+        minLength: minLength(4),
+      },
+    },
+  },
+  methods: {
+    showAlert(message) {
+      // Reset loading, current selected agent
+      this.resetPassword.showLoading = false;
+      bus.$emit('newToastMessage', 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.showAlert(successMessage);
+        })
+        .catch(error => {
+          let errorMessage = this.$t('RESET_PASSWORD.API.ERROR_MESSAGE');
+          if (error?.response?.data?.message) {
+            errorMessage = error.response.data.message;
+          }
+          this.showAlert(errorMessage);
+        });
+    },
+  },
+};
+</script>
--- a/app/javascript/v3/views/auth/signup/Index.vue
+++ b/app/javascript/v3/views/auth/signup/Index.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="h-full w-full dark:bg-slate-900">
+    <div v-show="!isLoading" class="flex h-full">
+      <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">
+            <img
+              :src="globalConfig.logo"
+              :alt="globalConfig.installationName"
+              class="h-8 w-auto block dark:hidden"
+            />
+            <img
+              v-if="globalConfig.logoDark"
+              :src="globalConfig.logoDark"
+              :alt="globalConfig.installationName"
+              class="h-8 w-auto hidden dark:block"
+            />
+            <h2
+              class="mb-7 mt-6 text-left text-3xl font-medium text-slate-900 dark:text-woot-50"
+            >
+              {{ $t('REGISTER.TRY_WOOT') }}
+            </h2>
+          </div>
+          <signup-form />
+          <div class="text-sm text-slate-800 dark:text-woot-50 px-1">
+            <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
+            <router-link class="text-link" to="/app/login">
+              {{
+                useInstallationName(
+                  $t('LOGIN.TITLE'),
+                  globalConfig.installationName
+                )
+              }}
+            </router-link>
+          </div>
+        </div>
+      </div>
+      <testimonials
+        v-if="isAChatwootInstance"
+        class="flex-1"
+        @resize-containers="resizeContainers"
+      />
+    </div>
+    <div
+      v-show="isLoading"
+      class="flex items-center justify-center h-full w-full"
+    >
+      <spinner color-scheme="primary" size="" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import SignupForm from './components/Signup/Form.vue';
+import Testimonials from './components/Testimonials/Index.vue';
+import Spinner from 'shared/components/Spinner.vue';
+
+export default {
+  components: {
+    SignupForm,
+    Spinner,
+    Testimonials,
+  },
+  mixins: [globalConfigMixin],
+  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;
+    },
+  },
+};
+</script>
--- a/app/javascript/v3/views/auth/signup/components/AuthSubmitButton.vue
+++ b/app/javascript/v3/views/auth/signup/components/AuthSubmitButton.vue
@@ -0,0 +1,55 @@
+<template>
+  <woot-button
+    size="expanded"
+    color-scheme="primary"
+    class-names="submit--button"
+    :is-disabled="isDisabled"
+    :is-loading="isLoading"
+    @click="onClick"
+  >
+    {{ label }}
+    <fluent-icon :icon="icon" size="18" />
+  </woot-button>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.submit--button {
+  align-items: center;
+  display: flex;
+  margin: 0 0 var(--space-normal) 0;
+
+  &::v-deep .button__content {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>
--- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
@@ -0,0 +1,218 @@
+<template>
+  <div class="flex-1 overflow-auto px-1">
+    <form class="space-y-3" @submit.prevent="submit">
+      <div class="flex">
+        <form-input
+          v-model.trim="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"
+        />
+        <form-input
+          v-model.trim="credentials.accountName"
+          name="account_name"
+          class="flex-1 ml-2"
+          :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>
+      <form-input
+        v-model.trim="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"
+      />
+      <form-input
+        v-model.trim="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"
+        :error-message="passwordErrorText"
+        @blur="$v.credentials.password.$touch"
+      />
+      <div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
+        <vue-hcaptcha
+          ref="hCaptcha"
+          :class="{ error: !hasAValidCaptcha && didCaptchaReset }"
+          :sitekey="globalConfig.hCaptchaSiteKey"
+          @verify="onRecaptchaVerified"
+        />
+        <span
+          v-if="!hasAValidCaptcha && didCaptchaReset"
+          class="text-xs text-red-400"
+        >
+          {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
+        </span>
+      </div>
+      <submit-button
+        :button-text="$t('REGISTER.SUBMIT')"
+        :disabled="isSignupInProgress || !hasAValidCaptcha"
+        :loading="isSignupInProgress"
+        icon-class="arrow-chevron-right"
+      />
+    </form>
+    <GoogleOAuthButton v-if="showGoogleOAuth" class="flex-col-reverse">
+      {{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
+    </GoogleOAuthButton>
+    <p
+      class="text-sm mb-1 mt-5 text-slate-800 dark:text-woot-50 [&>a]:text-woot-500 [&>a]:font-medium [&>a]:hover:text-woot-600"
+      v-html="termsLink"
+    />
+  </div>
+</template>
+
+<script>
+import { required, minLength, email } from 'vuelidate/lib/validators';
+import { mapGetters } from 'vuex';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import alertMixin from 'shared/mixins/alertMixin';
+import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
+import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
+import FormInput from '../../../../../components/Form/Input.vue';
+import SubmitButton from '../../../../../components/Button/SubmitButton.vue';
+import { isValidPassword } from 'shared/helpers/Validators';
+import GoogleOAuthButton from '../../../../../components/GoogleOauth/Button.vue';
+import { register } from '../../../../../api/auth';
+var CompanyEmailValidator = require('company-email-validator');
+
+export default {
+  components: {
+    FormInput,
+    GoogleOAuthButton,
+    SubmitButton,
+    VueHcaptcha,
+  },
+  mixins: [globalConfigMixin, alertMixin],
+  data() {
+    return {
+      credentials: {
+        accountName: '',
+        fullName: '',
+        email: '',
+        password: '',
+        hCaptchaClientResponse: '',
+      },
+      didCaptchaReset: false,
+      isSignupInProgress: false,
+      error: '',
+    };
+  },
+  validations: {
+    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(6),
+      },
+    },
+  },
+  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;
+    },
+    passwordErrorText() {
+      const { password } = this.$v.credentials;
+      if (!password.$error) {
+        return '';
+      }
+      if (!password.minLength) {
+        return this.$t('REGISTER.PASSWORD.ERROR');
+      }
+      if (!password.isValidPassword) {
+        return this.$t('REGISTER.PASSWORD.IS_INVALID_PASSWORD');
+      }
+      return '';
+    },
+    showGoogleOAuth() {
+      return Boolean(window.chatwootConfig.googleOAuthClientId);
+    },
+  },
+  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();
+        this.showAlert(errorMessage);
+      } finally {
+        this.isSignupInProgress = false;
+      }
+    },
+    onRecaptchaVerified(token) {
+      this.credentials.hCaptchaClientResponse = token;
+      this.didCaptchaReset = false;
+    },
+    resetCaptcha() {
+      if (!this.globalConfig.hCaptchaSiteKey) {
+        return;
+      }
+      this.$refs.hCaptcha.reset();
+      this.credentials.hCaptchaClientResponse = '';
+      this.didCaptchaReset = true;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.h-captcha--box {
+  &::v-deep .error {
+    iframe {
+      border: 1px solid var(--r-500);
+      border-radius: var(--border-radius-normal);
+    }
+  }
+}
+</style>
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
@@ -0,0 +1,63 @@
+<template>
+  <div
+    v-if="testimonials.length"
+    class="hidden bg-woot-400 dark:bg-woot-800 overflow-hidden relative xl:flex flex-1"
+  >
+    <img
+      src="/assets/images/auth/top-left.svg"
+      class="left-0 absolute h-40 w-40 top-0"
+    />
+    <img
+      src="/assets/images/auth/bottom-right.svg"
+      class="right-0 absolute h-40 w-40 bottom-0"
+    />
+    <img
+      src="/assets/images/auth/auth--bg.svg"
+      class="h-[96%] left-[6%] top-[8%] w-[96%] absolute"
+    />
+    <div class="flex items-center justify-center flex-col h-full w-full z-50">
+      <div class="flex items-start justify-center p-6">
+        <testimonial-card
+          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>
+  </div>
+</template>
+
+<script>
+import TestimonialCard from './TestimonialCard.vue';
+import { getTestimonialContent } from '../../../../../api/testimonials';
+export default {
+  components: { TestimonialCard },
+  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('resize-containers', !!this.testimonials.length);
+      }
+    },
+  },
+};
+</script>
+
+<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
@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="flex flex-col items-start justify-center p-6 w-80 bg-white rounded-lg drop-shadow-md dark:bg-slate-800"
+  >
+    <p class="text-sm text-slate-600 dark:text-woot-50 tracking-normal">
+      {{ reviewContent }}
+    </p>
+    <div class="flex items-center mt-4 text-slate-700 dark:text-woot-50">
+      <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>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    reviewContent: {
+      type: String,
+      default: '',
+    },
+    authorImage: {
+      type: String,
+      default: '',
+    },
+    authorName: {
+      type: String,
+      default: '',
+    },
+    authorDesignation: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
--- a/app/javascript/v3/views/index.js
+++ b/app/javascript/v3/views/index.js
@@ -0,0 +1,20 @@
+import VueRouter from 'vue-router';
+
+import routes from './routes';
+import AnalyticsHelper from 'dashboard/helper/AnalyticsHelper';
+import { validateRouteAccess } from '../helpers/RouteHelper';
+
+export const router = new VueRouter({ mode: 'history', routes });
+
+export const initalizeRouter = () => {
+  router.beforeEach((to, _, next) => {
+    AnalyticsHelper.page(to.name || '', {
+      path: to.path,
+      name: to.name,
+    });
+
+    return validateRouteAccess(to, next, window.chatwootConfig);
+  });
+};
+
+export default router;
--- a/app/javascript/v3/views/login/Index.vue
+++ b/app/javascript/v3/views/login/Index.vue
@@ -0,0 +1,201 @@
+<template>
+  <main
+    class="flex flex-col bg-woot-25 min-h-full w-full py-12 sm:px-6 lg:px-8 justify-center dark:bg-slate-900"
+  >
+    <section class="max-w-5xl mx-auto">
+      <img
+        :src="globalConfig.logo"
+        :alt="globalConfig.installationName"
+        class="mx-auto h-8 w-auto block dark:hidden"
+      />
+      <img
+        v-if="globalConfig.logoDark"
+        :src="globalConfig.logoDark"
+        :alt="globalConfig.installationName"
+        class="mx-auto h-8 w-auto hidden dark:block"
+      />
+      <h2
+        class="mt-6 text-center text-3xl font-medium text-slate-900 dark:text-woot-50"
+      >
+        {{
+          useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
+        }}
+      </h2>
+      <p
+        v-if="showSignupLink"
+        class="mt-3 text-center text-sm text-slate-600 dark:text-slate-400"
+      >
+        {{ $t('COMMON.OR') }}
+        <router-link to="auth/signup" class="text-link">
+          {{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
+        </router-link>
+      </p>
+    </section>
+    <section
+      class="sm:mx-auto mt-11 sm:w-full sm:max-w-lg bg-white dark:bg-slate-800 p-11 shadow sm:shadow-lg sm:rounded-lg"
+      :class="{ 'mb-8 mt-15': !showGoogleOAuth }"
+    >
+      <div v-if="!email">
+        <GoogleOAuthButton v-if="showGoogleOAuth" />
+        <form class="space-y-5" @submit.prevent="submitLogin">
+          <form-input
+            v-model.trim="credentials.email"
+            name="email_address"
+            type="text"
+            data-testid="email_input"
+            required
+            :label="$t('LOGIN.EMAIL.LABEL')"
+            :placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
+            :has-error="$v.credentials.email.$error"
+            @input="$v.credentials.email.$touch"
+          />
+          <form-input
+            v-model.trim="credentials.password"
+            type="password"
+            name="password"
+            data-testid="password_input"
+            required
+            :label="$t('LOGIN.PASSWORD.LABEL')"
+            :placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
+            :has-error="$v.credentials.password.$error"
+            @input="$v.credentials.password.$touch"
+          >
+            <p v-if="!globalConfig.disableUserProfileUpdate">
+              <router-link to="auth/reset/password" class="text-link">
+                {{ $t('LOGIN.FORGOT_PASSWORD') }}
+              </router-link>
+            </p>
+          </form-input>
+          <submit-button
+            :disabled="
+              $v.credentials.email.$invalid ||
+                $v.credentials.password.$invalid ||
+                loginApi.showLoading
+            "
+            :button-text="$t('LOGIN.SUBMIT')"
+            :loading="loginApi.showLoading"
+          />
+        </form>
+      </div>
+      <div v-else class="flex items-center justify-center">
+        <spinner color-scheme="primary" size="" />
+      </div>
+    </section>
+  </main>
+</template>
+
+<script>
+import { required, email } from 'vuelidate/lib/validators';
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import SubmitButton from '../../components/Button/SubmitButton';
+import { mapGetters } from 'vuex';
+import { parseBoolean } from '@chatwoot/utils';
+import GoogleOAuthButton from '../../components/GoogleOauth/Button.vue';
+import FormInput from '../../components/Form/Input.vue';
+import { login } from '../../api/auth';
+import Spinner from 'shared/components/Spinner';
+const ERROR_MESSAGES = {
+  'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
+  'business-account-only': 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY',
+};
+
+export default {
+  components: {
+    FormInput,
+    GoogleOAuthButton,
+    Spinner,
+    SubmitButton,
+  },
+  mixins: [globalConfigMixin],
+  props: {
+    ssoAuthToken: { type: String, default: '' },
+    ssoAccountId: { type: String, default: '' },
+    ssoConversationId: { type: String, default: '' },
+    config: { type: String, default: '' },
+    email: { type: String, default: '' },
+    authError: { type: String, default: '' },
+  },
+  data() {
+    return {
+      // We need to initialize the component with any
+      // properties that will be used in it
+      credentials: {
+        email: '',
+        password: '',
+      },
+      loginApi: {
+        message: '',
+        showLoading: false,
+      },
+      error: '',
+    };
+  },
+  validations: {
+    credentials: {
+      password: {
+        required,
+      },
+      email: {
+        required,
+        email,
+      },
+    },
+  },
+  computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+    showGoogleOAuth() {
+      return Boolean(window.chatwootConfig.googleOAuthClientId);
+    },
+    showSignupLink() {
+      return parseBoolean(window.chatwootConfig.signupEnabled);
+    },
+  },
+  created() {
+    if (this.ssoAuthToken) {
+      this.submitLogin();
+    }
+    if (this.authError) {
+      const message = ERROR_MESSAGES[this.authError] ?? 'LOGIN.API.UNAUTH';
+      this.showAlert(this.$t(message));
+      // wait for idle state
+      window.requestIdleCallback(() => {
+        // Remove the error query param from the url
+        const { query } = this.$route;
+        this.$router.replace({ query: { ...query, error: undefined } });
+      });
+    }
+  },
+  methods: {
+    showAlert(message) {
+      // Reset loading, current selected agent
+      this.loginApi.showLoading = false;
+      this.loginApi.message = message;
+      bus.$emit('newToastMessage', this.loginApi.message);
+    },
+    submitLogin() {
+      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(() => {
+          this.showAlert(this.$t('LOGIN.API.SUCCESS_MESSAGE'));
+        })
+        .catch(response => {
+          // Reset URL Params if the authentication is invalid
+          if (this.email) {
+            window.location = '/app/login';
+          }
+          this.showAlert(response?.message || this.$t('LOGIN.API.UNAUTH'));
+        });
+    },
+  },
+};
+</script>
--- a/app/javascript/v3/views/routes.js
+++ b/app/javascript/v3/views/routes.js
@@ -0,0 +1,56 @@
+import { frontendURL } from 'dashboard/helper/URLHelper';
+
+const Login = () => import('./login/Index.vue');
+const Signup = () => import('./auth/signup/Index.vue');
+const ResetPassword = () => import('./auth/reset/password/Index.vue');
+const Confirmation = () => import('./auth/confirmation/Index.vue');
+const PasswordEdit = () => import('./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('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,
+  },
+];