Merge branch 'develop' into feature/cw-2159

2023-07-03 11:45:27 +05:30
parent 0ddf241d7f b57063a8b8
commit e3aef4a778
81 changed files with 1583 additions and 1953 deletions
@@ -222,20 +222,10 @@ STRIPE_WEBHOOK_SECRET=
 # Make sure to follow https://edgeguides.rubyonrails.org/active_storage_overview.html#cross-origin-resource-sharing-cors-configuration on the cloud storage after setting this to true.
 DIRECT_UPLOADS_ENABLED=

-# MS OAUTH creds
+#MS OAUTH creds
 AZURE_APP_ID=
 AZURE_APP_SECRET=

-## MS Azure Tenant ID
-# Set the following id to the id of your Azure 'tenant'.
-# This will enable single tenant applications to work.
-# If the following id is set, Chatwoot will use the Microsoft Graph API
-# to send and receive emails, as that seems to be required for single
-# tenant applications.
-#
-# https://learn.microsoft.com/en-us/azure/active-directory/fundamentals/active-directory-how-to-find-tenant
-AZURE_TENANT_ID=
-
 ## Advanced configurations
 ## Change these values to fine tune performance
 # control the concurrency setting of sidekiq
@@ -4,7 +4,13 @@ class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts

  def create
    email = params[:authorization][:email]
-    redirect_url = microsoft_client.auth_code.authorize_url(auth_params)
+    redirect_url = microsoft_client.auth_code.authorize_url(
+      {
+        redirect_uri: "#{base_url}/microsoft/callback",
+        scope: 'offline_access https://outlook.office.com/IMAP.AccessAsUser.All https://outlook.office.com/SMTP.Send openid profile',
+        prompt: 'consent'
+      }
+    )
    if redirect_url
      email = email.downcase
      ::Redis::Alfred.setex(email, Current.account.id, 5.minutes)
@@ -19,31 +25,4 @@ class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts
  def check_authorization
    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
  end
-
-  # SMTP, Pop and IMAP are being deprecated by Outlook.
-  # https://learn.microsoft.com/en-us/exchange/clients-and-mobile-in-exchange-online/deprecation-of-basic-authentication-exchange-online
-  #
-  # As such, Microsoft has made it a real pain to use them.
-  # If AZURE_TENANT_ID is set, we will use the MS Graph API instead.
-  def auth_params
-    return graph_auth_params if ENV.fetch('AZURE_TENANT_ID', false)
-
-    standard_auth_params
-  end
-
-  def standard_auth_params
-    {
-      redirect_uri: "#{base_url}/microsoft/callback",
-      scope: 'offline_access https://outlook.office.com/IMAP.AccessAsUser.All https://outlook.office.com/SMTP.Send openid profile',
-      prompt: 'consent'
-    }
-  end
-
-  def graph_auth_params
-    {
-      redirect_uri: "#{base_url}/microsoft/callback",
-      scope: 'offline_access https://graph.microsoft.com/Mail.Read https://graph.microsoft.com/Mail.Send openid profile',
-      prompt: 'consent'
-    }
-  end
 end
@@ -5,8 +5,8 @@ module MicrosoftConcern
    ::OAuth2::Client.new(ENV.fetch('AZURE_APP_ID', nil), ENV.fetch('AZURE_APP_SECRET', nil),
                         {
                           site: 'https://login.microsoftonline.com',
-                           authorize_url: "https://login.microsoftonline.com/#{azure_tenant_id}/oauth2/v2.0/authorize",
-                           token_url: "https://login.microsoftonline.com/#{azure_tenant_id}/oauth2/v2.0/token"
+                           authorize_url: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize',
+                           token_url: 'https://login.microsoftonline.com/common/oauth2/v2.0/token'
                         })
  end

@@ -19,8 +19,4 @@ module MicrosoftConcern
  def base_url
    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
  end
-
-  def azure_tenant_id
-    MicrosoftGraphAuth.azure_tenant_id
-  end
 end
@@ -1,6 +1,7 @@
 class DashboardController < ActionController::Base
  include SwitchLocale

+  before_action :set_application_pack
  before_action :set_global_config
  around_action :switch_locale
  before_action :ensure_installation_onboarding, only: [:index]
@@ -60,4 +61,12 @@ class DashboardController < ActionController::Base
      GIT_SHA: GIT_HASH
    }
  end
+
+  def set_application_pack
+    @application_pack = if request.path.include?('/auth') || request.path.include?('/login')
+                          'v3app'
+                        else
+                          'application'
+                        end
+  end
 end
@@ -3,47 +3,11 @@
 import Cookies from 'js-cookie';
 import endPoints from './endPoints';
 import {
-  setAuthCredentials,
  clearCookiesOnLogout,
  deleteIndexedDBOnLogout,
 } from '../store/utils/api';

 export default {
-  login(creds) {
-    return new Promise((resolve, reject) => {
-      axios
-        .post('auth/sign_in', creds)
-        .then(response => {
-          setAuthCredentials(response);
-          resolve(response.data);
-        })
-        .catch(error => {
-          reject(error.response);
-        });
-    });
-  },
-
-  register(creds) {
-    const urlData = endPoints('register');
-    const fetchPromise = new Promise((resolve, reject) => {
-      axios
-        .post(urlData.url, {
-          account_name: creds.accountName.trim(),
-          user_full_name: creds.fullName.trim(),
-          email: creds.email,
-          password: creds.password,
-          h_captcha_client_response: creds.hCaptchaClientResponse,
-        })
-        .then(response => {
-          setAuthCredentials(response);
-          resolve(response);
-        })
-        .catch(error => {
-          reject(error);
-        });
-    });
-    return fetchPromise;
-  },
  validityCheck() {
    const urlData = endPoints('validityCheck');
    return axios.get(urlData.url);
@@ -73,45 +37,6 @@ export default {
    }
    return false;
  },
-  verifyPasswordToken({ confirmationToken }) {
-    return new Promise((resolve, reject) => {
-      axios
-        .post('auth/confirmation', {
-          confirmation_token: confirmationToken,
-        })
-        .then(response => {
-          setAuthCredentials(response);
-          resolve(response);
-        })
-        .catch(error => {
-          reject(error.response);
-        });
-    });
-  },
-
-  setNewPassword({ resetPasswordToken, password, confirmPassword }) {
-    return new Promise((resolve, reject) => {
-      axios
-        .put('auth/password', {
-          reset_password_token: resetPasswordToken,
-          password_confirmation: confirmPassword,
-          password,
-        })
-        .then(response => {
-          setAuthCredentials(response);
-          resolve(response);
-        })
-        .catch(error => {
-          reject(error.response);
-        });
-    });
-  },
-
-  resetPassword({ email }) {
-    const urlData = endPoints('resetPassword');
-    return axios.post(urlData.url, { email });
-  },
-
  profileUpdate({
    password,
    password_confirmation,
@@ -1,96 +0,0 @@
-<template>
-  <div>
-    <div v-if="showSeparator" class="separator">
-      OR
-    </div>
-    <a :href="getGoogleAuthUrl()">
-      <button
-        class="button expanded button__google_login"
-        :class="{
-          // Explicit checking to ensure no other value is used
-          large: buttonSize === 'large',
-          small: buttonSize === 'small',
-          tiny: buttonSize === 'tiny',
-        }"
-      >
-        <img
-          src="/assets/images/auth/google.svg"
-          alt="Google Logo"
-          class="icon"
-        />
-        <slot>{{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}</slot>
-      </button>
-    </a>
-  </div>
-</template>
-
-<script>
-const validButtonSizes = ['small', 'tiny', 'large'];
-
-export default {
-  props: {
-    showSeparator: {
-      type: Boolean,
-      default: true,
-    },
-    buttonSize: {
-      type: String,
-      default: undefined,
-      validator: value =>
-        validButtonSizes.includes(value) || value === undefined,
-    },
-  },
-  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>
-
-<style lang="scss" scoped>
-.separator {
-  display: flex;
-  align-items: center;
-  margin: var(--space-two) var(--space-zero);
-  gap: var(--space-one);
-  color: var(--s-300);
-  font-size: var(--font-size-small);
-  &::before,
-  &::after {
-    content: '';
-    flex: 1;
-    height: 1px;
-    background: var(--s-100);
-  }
-}
-.button__google_login {
-  background: var(--white);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-one);
-  border: 1px solid var(--s-100);
-  color: var(--b-800);
-}
-</style>
@@ -39,5 +39,7 @@ export default {
    UNTIL_NEXT_MONTH: 'until_next_month',
    UNTIL_CUSTOM_TIME: 'until_custom_time',
  },
+  EXAMPLE_URL: 'https://example.com',
+  EXAMPLE_WEBHOOK_URL: 'https://example/api/webhook',
 };
 export const DEFAULT_REDIRECT_URL = '/app/';
@@ -1,41 +1,8 @@
-import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
-
 export const frontendURL = (path, params) => {
  const stringifiedParams = params ? `?${new URLSearchParams(params)}` : '';
  return `/app/${path}${stringifiedParams}`;
 };

-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;
-};
-
 export const conversationUrl = ({
  accountId,
  activeInbox,
@@ -8,6 +8,8 @@ import {
  isMonday,
  isToday,
  setHours,
+  setMinutes,
+  setSeconds,
 } from 'date-fns';
 import wootConstants from 'dashboard/constants/globals';

@@ -36,7 +38,7 @@ export const findNextDay = currentDate => {
 };

 export const setHoursToNine = date => {
-  return setHours(date, 9, 0, 0);
+  return setSeconds(setMinutes(setHours(date, 9), 0), 0);
 };

 export const findSnoozeTime = (snoozeType, currentDate = new Date()) => {
@@ -2,7 +2,6 @@ import {
  frontendURL,
  conversationUrl,
  isValidURL,
-  getLoginRedirectURL,
  conversationListPageURL,
 } from '../URLHelper';

@@ -76,44 +75,4 @@ describe('#URL Helpers', () => {
      expect(isValidURL('alert.window')).toBe(false);
    });
  });
-
-  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/');
-    });
-  });
 });
@@ -40,6 +40,11 @@ describe('#Snooze Helpers', () => {
      nextDay.setHours(9, 0, 0, 0);
      expect(setHoursToNine(nextDay)).toEqual(nextDay);
    });
+    it('should return date with 9.00AM time if date with 10am is passes', () => {
+      const nextDay = new Date('06/17/2023 10:00:00');
+      nextDay.setHours(9, 0, 0, 0);
+      expect(setHoursToNine(nextDay)).toEqual(nextDay);
+    });
  });

  describe('findSnoozeTime', () => {
@@ -9,11 +9,7 @@
      "404": "There are no canned responses available in this account.",
      "TITLE": "Manage canned responses",
      "DESC": "Canned Responses are predefined reply templates which can be used to quickly send out replies to tickets.",
-      "TABLE_HEADER": [
-        "Short Code",
-        "Content",
-        "Actions"
-      ]
+      "TABLE_HEADER": ["Short Code", "Content", "Actions"]
    },
    "ADD": {
      "TITLE": "Add Canned Response",
@@ -34,7 +30,7 @@
      },
      "API": {
        "SUCCESS_MESSAGE": "Canned Response added successfully",
-        "ERROR_MESSAGE": "Could not create canned response, Please try again later"
+        "ERROR_MESSAGE": "Could not create canned response. Please try again later."
      }
    },
    "EDIT": {
@@ -56,14 +52,14 @@
      "BUTTON_TEXT": "Edit",
      "API": {
        "SUCCESS_MESSAGE": "Canned Response updated successfully",
-        "ERROR_MESSAGE": "Could not update canned response, Please try again later"
+        "ERROR_MESSAGE": "Could not update canned response. Please try again later."
      }
    },
    "DELETE": {
      "BUTTON_TEXT": "Delete",
      "API": {
        "SUCCESS_MESSAGE": "Canned response deleted successfully",
-        "ERROR_MESSAGE": "Could not delete canned response, Please try again later"
+        "ERROR_MESSAGE": "Could not delete canned response. Please try again later."
      },
      "CONFIRM": {
        "TITLE": "Confirm Deletion",
@@ -78,7 +78,7 @@
    "BUTTON_LABEL": "Export",
    "TITLE": "Export Contacts",
    "DESC": "Export contacts to a CSV file.",
-    "SUCCESS_MESSAGE": "Export is in progress, You will be notified via email when export file is ready to dowanlod.",
+    "SUCCESS_MESSAGE": "Export is in progress. You will be notified on email when the export file is ready to download.",
    "ERROR_MESSAGE": "There was an error, please try again"
  },
  "DELETE_NOTE": {
@@ -151,5 +151,9 @@
  },
  "DASHBOARD_APPS": {
    "LOADING_MESSAGE": "Loading Dashboard App..."
+  },
+  "COMMON": {
+    "OR": "Or",
+    "CLICK_HERE": "click here"
  }
 }
@@ -179,7 +179,8 @@
        }
      },
      "ADD": {
-        "CREATE_FLOW": [{
+        "CREATE_FLOW": [
+          {
            "title": "Help center information",
            "route": "new_portal_information",
            "body": "Basic information about portal",
@@ -235,13 +236,13 @@
        "DOMAIN": {
          "LABEL": "Custom Domain",
          "PLACEHOLDER": "Portal custom domain",
-          "HELP_TEXT": "Add only If you want to use a custom domain for your portals. Eg: https://example.com",
+          "HELP_TEXT": "Add only If you want to use a custom domain for your portals. Eg: %{exampleURL}",
          "ERROR": "Enter a valid domain URL"
        },
        "HOME_PAGE_LINK": {
          "LABEL": "Home Page Link",
          "PLACEHOLDER": "Portal home page link",
-          "HELP_TEXT": "The link used to return from the portal to the home page. Eg: https://example.com",
+          "HELP_TEXT": "The link used to return from the portal to the home page. Eg: %{exampleURL}",
          "ERROR": "Enter a valid home page URL"
        },
        "THEME_COLOR": {
@@ -21,7 +21,7 @@
        },
        "END_POINT": {
          "LABEL": "Webhook URL",
-          "PLACEHOLDER": "Example: https://example/api/webhook",
+          "PLACEHOLDER": "Example: %{webhookExampleURL}",
          "ERROR": "Please enter a valid URL"
        },
        "EDIT_SUBMIT": "Update webhook",
@@ -1,6 +1,8 @@
 {
  "RESET_PASSWORD": {
    "TITLE": "Reset password",
+    "DESCRIPTION": "Enter the email address you use to log in to Chatwoot to get the password reset instructions.",
+    "GO_BACK_TO_LOGIN": "If you want to go back to the login page,",
    "EMAIL": {
      "LABEL": "Email",
      "PLACEHOLDER": "Please enter your email.",
@@ -1,5 +0,0 @@
-<template>
-  <div class="row auth-wrap login align-center">
-    <router-view />
-  </div>
-</template>
@@ -1,84 +0,0 @@
-<template>
-  <form
-    class="login-box medium-4 column align-self-middle"
-    @submit.prevent="submit()"
-  >
-    <h4>{{ $t('RESET_PASSWORD.TITLE') }}</h4>
-    <div class="column log-in-form">
-      <label :class="{ error: $v.credentials.email.$error }">
-        {{ $t('RESET_PASSWORD.EMAIL.LABEL') }}
-        <input
-          v-model.trim="credentials.email"
-          type="text"
-          :placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
-          @input="$v.credentials.email.$touch"
-        />
-        <span v-if="$v.credentials.email.$error" class="message">
-          {{ $t('RESET_PASSWORD.EMAIL.ERROR') }}
-        </span>
-      </label>
-      <woot-submit-button
-        :disabled="$v.credentials.email.$invalid || resetPassword.showLoading"
-        :button-text="$t('RESET_PASSWORD.SUBMIT')"
-        :loading="resetPassword.showLoading"
-        button-class="expanded"
-      />
-    </div>
-  </form>
-</template>
-
-<script>
-import { required, minLength, email } from 'vuelidate/lib/validators';
-import Auth from '../../api/auth';
-
-export default {
-  data() {
-    return {
-      // We need to initialize the component with any
-      // properties that will be used in it
-      credentials: {
-        email: '',
-      },
-      resetPassword: {
-        message: '',
-        showLoading: false,
-      },
-      error: '',
-    };
-  },
-  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;
-      Auth.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>
@@ -1,133 +0,0 @@
-<template>
-  <div class="h-full w-full">
-    <div v-show="!isLoading" class="row h-full">
-      <div
-        :class="
-          `${showTestimonials ? 'large-6' : 'large-12'} signup-form--container`
-        "
-      >
-        <div class="signup-form--content">
-          <div class="signup--hero">
-            <img
-              :src="globalConfig.logo"
-              :alt="globalConfig.installationName"
-              class="hero--logo"
-            />
-            <h2 class="hero--title">
-              {{ $t('REGISTER.TRY_WOOT') }}
-            </h2>
-          </div>
-          <signup-form />
-          <div class="auth-screen--footer">
-            <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
-            <router-link to="/app/login">
-              {{
-                useInstallationName(
-                  $t('LOGIN.TITLE'),
-                  globalConfig.installationName
-                )
-              }}
-            </router-link>
-          </div>
-        </div>
-      </div>
-      <testimonials
-        v-if="isAChatwootInstance"
-        class="medium-6 testimonial--container"
-        @resize-containers="resizeContainers"
-      />
-    </div>
-    <div v-show="isLoading" class="spinner--container">
-      <spinner 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 { showTestimonials: false, isLoading: false };
-  },
-  computed: {
-    ...mapGetters({ globalConfig: 'globalConfig/get' }),
-    isAChatwootInstance() {
-      return this.globalConfig.installationName === 'Chatwoot';
-    },
-  },
-  beforeMount() {
-    this.isLoading = this.isAChatwootInstance;
-  },
-  methods: {
-    resizeContainers(hasTestimonials) {
-      this.showTestimonials = hasTestimonials;
-      this.isLoading = false;
-    },
-  },
-};
-</script>
-<style scoped lang="scss">
-.signup-form--container {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  min-height: 640px;
-  overflow: auto;
-  justify-content: center;
-}
-
-.signup-form--content {
-  padding: var(--space-larger);
-  max-width: 600px;
-  width: 100%;
-}
-
-.signup--hero {
-  margin-bottom: var(--space-normal);
-
-  .hero--logo {
-    width: 160px;
-  }
-
-  .hero--title {
-    margin-top: var(--space-medium);
-    font-weight: var(--font-weight-light);
-  }
-}
-
-.auth-screen--footer {
-  font-size: var(--font-size-small);
-}
-
-@media screen and (max-width: 1200px) {
-  .testimonial--container {
-    display: none;
-  }
-  .signup-form--container {
-    width: 100%;
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-  .signup-form--content {
-    margin: 0 auto;
-  }
-}
-
-.spinner--container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-</style>
@@ -1,50 +0,0 @@
-import Auth from './Auth';
-import Confirmation from './Confirmation';
-import PasswordEdit from './PasswordEdit';
-import ResetPassword from './ResetPassword';
-import { frontendURL } from '../../helper/URLHelper';
-
-const Signup = () => import('./Signup');
-
-export default {
-  routes: [
-    {
-      path: frontendURL('auth/signup'),
-      name: 'auth_signup',
-      component: Signup,
-      meta: { requireSignupEnabled: true },
-    },
-    {
-      path: frontendURL('auth'),
-      name: 'auth',
-      component: Auth,
-      children: [
-        {
-          path: 'confirmation',
-          name: 'auth_confirmation',
-          component: Confirmation,
-          props: route => ({
-            config: route.query.config,
-            confirmationToken: route.query.confirmation_token,
-            redirectUrl: route.query.route_url,
-          }),
-        },
-        {
-          path: 'password/edit',
-          name: 'auth_password_edit',
-          component: PasswordEdit,
-          props: route => ({
-            config: route.query.config,
-            resetPasswordToken: route.query.reset_password_token,
-            redirectUrl: route.query.route_url,
-          }),
-        },
-        {
-          path: 'reset/password',
-          name: 'auth_reset_password',
-          component: ResetPassword,
-        },
-      ],
-    },
-  ],
-};
@@ -1,93 +0,0 @@
-<template>
-  <label class="auth-input--wrap">
-    <div class="label-wrap">
-      <fluent-icon v-if="iconName" :icon="iconName" size="16" />
-      <span v-if="label">{{ label }}</span>
-    </div>
-    <div class="input--wrap">
-      <input
-        class="auth-input"
-        :value="value"
-        :type="type"
-        :placeholder="placeholder"
-        :readonly="readonly"
-        @input="onChange"
-        @blur="onBlur"
-      />
-      <p v-if="helpText" class="help-text" />
-      <span v-if="error" class="message">
-        {{ error }}
-      </span>
-    </div>
-  </label>
-</template>
-
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-    value: {
-      type: [String, Number],
-      default: '',
-    },
-    type: {
-      type: String,
-      default: 'text',
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    iconName: {
-      type: String,
-      default: '',
-    },
-    helpText: {
-      type: String,
-      default: '',
-    },
-    error: {
-      type: String,
-      default: '',
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    onChange(e) {
-      this.$emit('input', e.target.value);
-    },
-    onBlur(e) {
-      this.$emit('blur', e.target.value);
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.auth-input--wrap {
-  .label-wrap {
-    display: flex;
-    align-items: center;
-    color: var(--s-900);
-    margin-bottom: var(--space-smaller);
-
-    span {
-      margin-left: var(--space-smaller);
-      font-size: var(--font-size-small);
-    }
-  }
-
-  .auth-input {
-    font-size: var(--font-size-small) !important;
-    height: 4rem !important;
-    padding: var(--space-small) !important;
-    width: 100% !important;
-    background: var(--s-50) !important;
-  }
-}
-</style>
@@ -1,120 +0,0 @@
-<template>
-  <div v-if="testimonials.length" class="testimonial--section">
-    <img src="/assets/images/auth/top-left.svg" class="top-left--img" />
-    <img src="/assets/images/auth/bottom-right.svg" class="bottom-right--img" />
-    <img src="/assets/images/auth/auth--bg.svg" class="center--img" />
-    <div class="testimonial--content">
-      <div class="testimonial--content-card">
-        <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="`testimonial-${index ? 'right' : 'left'}--card`"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import TestimonialCard from './TestimonialCard.vue';
-import { getTestimonialContent } from 'dashboard/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>
-@import '~dashboard/assets/scss/woot';
-
-.top-left--img {
-  left: 0;
-  height: 16rem;
-  position: absolute;
-  top: 0;
-  width: 16rem;
-}
-
-.bottom-right--img {
-  bottom: 0;
-  height: 16rem;
-  position: absolute;
-  right: 0;
-  width: 16rem;
-}
-
-.center--img {
-  height: 96%;
-  left: 8%;
-  position: absolute;
-  top: 8%;
-  width: 86%;
-}
-
-.center-container {
-  padding: var(--space-medium) 0;
-}
-
-.testimonial--section {
-  background: var(--w-400);
-  display: flex;
-  flex: 1 1;
-  overflow: hidden;
-  position: relative;
-}
-
-.testimonial--content {
-  align-content: center;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: center;
-  width: 100%;
-  z-index: 1000;
-}
-
-.testimonial--content-card {
-  align-items: flex-start;
-  display: flex;
-  justify-content: center;
-  padding: var(--space-large);
-}
-
-.testimonial-left--card {
-  --signup-testimonial-top: 20%;
-  margin-top: var(--signup-testimonial-top);
-  margin-right: var(--space-minus-normal);
-  z-index: 10000;
-}
-
-@media screen and (max-width: 1200px) {
-  .testimonial--section {
-    display: none;
-  }
-}
-</style>
@@ -1,93 +0,0 @@
-<template>
-  <div class="testimonial-card">
-    <div class="left-card--wrap absolute">
-      <div class="left-card--content">
-        <p class="card-content">
-          {{ reviewContent }}
-        </p>
-        <div class="content-author--details row">
-          <div class="author-image--wrap">
-            <img :src="authorImage" class="author-image" />
-          </div>
-          <div class="author-name-company--details">
-            <div class="author-name">{{ authorName }}</div>
-            <div class="author-company">{{ authorDesignation }}</div>
-          </div>
-        </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: '',
-    },
-  },
-  setup() {},
-};
-</script>
-
-<style scoped lang="scss">
-.testimonial-card {
-  align-items: center;
-  background: var(--white);
-  border-radius: var(--border-radius-normal);
-  box-shadow: var(--shadow-large);
-  display: flex;
-  justify-content: center;
-  padding: var(--space-medium) var(--space-large);
-  width: 32rem;
-}
-
-.content-author--details {
-  align-items: center;
-  display: flex;
-  margin-top: var(--space-small);
-
-  .author-image--wrap {
-    background: white;
-    border-radius: var(--border-radius-rounded);
-    padding: var(--space-smaller);
-
-    .author-image {
-      border-radius: var(--border-radius-rounded);
-      height: calc(var(--space-two) + var(--space-two));
-      width: calc(var(--space-two) + var(--space-two));
-    }
-  }
-
-  .author-name-company--details {
-    margin-left: var(--space-small);
-
-    .author-name {
-      font-size: var(--font-size-small);
-      font-weight: var(--font-weight-bold);
-    }
-
-    .author-company {
-      font-size: var(--font-size-mini);
-    }
-  }
-}
-
-.card-content {
-  color: var(--s-600);
-  // font-size: var(--font-size-default);
-  line-height: 1.7;
-}
-</style>
@@ -1,47 +0,0 @@
-<template>
-  <div class="testimonial--footer">
-    <h2 class="heading">
-      {{ title }}
-    </h2>
-    <span class="sub-block-title sub-heading">
-      {{ subTitle }}
-    </span>
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    subTitle: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
-<style scoped lang="scss">
-.testimonial--footer {
-  align-items: center;
-  bottom: var(--space-jumbo);
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  margin: 0 auto;
-  padding: 0 var(--space-jumbo);
-  position: absolute;
-  width: 100%;
-
-  .heading {
-    color: var(--white);
-    font-size: var(--font-size-bigger);
-  }
-
-  .sub-heading {
-    color: var(--white);
-    font-weight: var(--font-weight-medium);
-  }
-}
-</style>
@@ -61,7 +61,7 @@
            :class="{ error: $v.domain.$error }"
            :label="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.LABEL')"
            :placeholder="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.PLACEHOLDER')"
-            :help-text="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.HELP_TEXT')"
+            :help-text="domainExampleHelpText"
            :error="domainError"
            @blur="$v.domain.$touch"
          />
@@ -86,6 +86,9 @@ import { isDomain } from 'shared/helpers/Validators';
 import thumbnail from 'dashboard/components/widgets/Thumbnail';
 import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import { buildPortalURL } from 'dashboard/helper/portalHelper';
+import wootConstants from 'dashboard/constants/globals';
+
+const { EXAMPLE_URL } = wootConstants;

 export default {
  components: {
@@ -147,6 +150,11 @@ export default {
    domainHelpText() {
      return buildPortalURL(this.slug);
    },
+    domainExampleHelpText() {
+      return this.$t('HELP_CENTER.PORTAL.ADD.DOMAIN.HELP_TEXT', {
+        exampleURL: EXAMPLE_URL,
+      });
+    },
  },
  mounted() {
    const portal = this.portal || {};
@@ -41,7 +41,7 @@
            :placeholder="
              $t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.PLACEHOLDER')
            "
-            :help-text="$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.HELP_TEXT')"
+            :help-text="homepageExampleHelpText"
            :error="
              $v.homePageLink.$error
                ? $t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.ERROR')
@@ -74,6 +74,9 @@ import { url } from 'vuelidate/lib/validators';
 import { getRandomColor } from 'dashboard/helper/labelColor';

 import alertMixin from 'shared/mixins/alertMixin';
+import wootConstants from 'dashboard/constants/globals';
+
+const { EXAMPLE_URL } = wootConstants;

 export default {
  components: {},
@@ -102,6 +105,13 @@ export default {
      url,
    },
  },
+  computed: {
+    homepageExampleHelpText() {
+      return this.$t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.HELP_TEXT', {
+        exampleURL: EXAMPLE_URL,
+      });
+    },
+  },
  mounted() {
    this.color = getRandomColor();
    this.updateDataFromStore();
@@ -7,9 +7,7 @@
          v-model.trim="url"
          type="text"
          name="url"
-          :placeholder="
-            $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.PLACEHOLDER')
-          "
+          :placeholder="webhookURLInputPlaceholder"
          @input="$v.url.$touch"
        />
        <span v-if="$v.url.$error" class="message">
@@ -53,6 +51,9 @@
 <script>
 import { required, url, minLength } from 'vuelidate/lib/validators';
 import webhookMixin from './webhookMixin';
+import wootConstants from 'dashboard/constants/globals';
+
+const { EXAMPLE_WEBHOOK_URL } = wootConstants;

 const SUPPORTED_WEBHOOK_EVENTS = [
  'conversation_created',
@@ -98,6 +99,16 @@ export default {
      supportedWebhookEvents: SUPPORTED_WEBHOOK_EVENTS,
    };
  },
+  computed: {
+    webhookURLInputPlaceholder() {
+      return this.$t(
+        'INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.PLACEHOLDER',
+        {
+          webhookExampleURL: EXAMPLE_WEBHOOK_URL,
+        }
+      );
+    },
+  },
  methods: {
    onSubmit() {
      this.$emit('submit', {
@@ -1,15 +1,12 @@
 import VueRouter from 'vue-router';

 import { frontendURL } from '../helper/URLHelper';
-import { clearBrowserSessionCookies } from '../store/utils/api';
-import authRoute from './auth/auth.routes';
 import dashboard from './dashboard/dashboard.routes';
-import login from './login/login.routes';
 import store from '../store';
 import { validateLoggedInRoutes } from '../helper/routeHelpers';
 import AnalyticsHelper from '../helper/AnalyticsHelper';

-const routes = [...login.routes, ...dashboard.routes, ...authRoute.routes];
+const routes = [...dashboard.routes];

 window.roleWiseRoutes = {
  agent: [],
@@ -36,86 +33,26 @@ generateRoleWiseRoute(routes);

 export const router = new VueRouter({ mode: 'history', routes });

-const unProtectedRoutes = ['login', 'auth_signup', 'auth_reset_password'];
+export const validateAuthenticateRoutePermission = (to, next, { getters }) => {
+  const { isLoggedIn, getCurrentUser: user } = getters;

-const authIgnoreRoutes = [
-  'auth_confirmation',
-  'pushBack',
-  'auth_password_edit',
-  'oauth-callback',
-];
+  if (!isLoggedIn) {
+    window.location = '/app/login';
+    return '/app/login';
+  }

-const routeValidators = [
-  {
-    protected: false,
-    loggedIn: true,
-    handler: (_, getters) => {
-      const user = getters.getCurrentUser;
-      return `accounts/${user.account_id}/dashboard`;
-    },
-  },
-  {
-    protected: true,
-    loggedIn: false,
-    handler: () => 'login',
-  },
-  {
-    protected: true,
-    loggedIn: true,
-    handler: (to, getters) =>
-      validateLoggedInRoutes(to, getters.getCurrentUser, window.roleWiseRoutes),
-  },
-  {
-    protected: false,
-    loggedIn: false,
-    handler: () => null,
-  },
-];
+  if (!to.name) {
+    return next(frontendURL(`accounts/${user.account_id}/dashboard`));
+  }

-export const validateAuthenticateRoutePermission = (
-  to,
-  from,
-  next,
-  { getters }
-) => {
-  const isLoggedIn = getters.isLoggedIn;
-  const isProtectedRoute = !unProtectedRoutes.includes(to.name);
-  const strategy = routeValidators.find(
-    validator =>
-      validator.protected === isProtectedRoute &&
-      validator.loggedIn === isLoggedIn
+  const nextRoute = validateLoggedInRoutes(
+    to,
+    getters.getCurrentUser,
+    window.roleWiseRoutes
  );
-  const nextRoute = strategy.handler(to, getters);
  return nextRoute ? next(frontendURL(nextRoute)) : next();
 };

-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, from, next, { getters }) => {
-  // Disable navigation to signup page if signups are disabled
-  // Signup route has an attribute (requireSignupEnabled)
-  // defined in it's route definition
-  if (
-    window.chatwootConfig.signupEnabled !== 'true' &&
-    to.meta &&
-    to.meta.requireSignupEnabled
-  ) {
-    return next(frontendURL('login'));
-  }
-
-  // For routes which doesn't care about authentication, skip validation
-  if (authIgnoreRoutes.includes(to.name)) {
-    return next();
-  }
-
-  return validateAuthenticateRoutePermission(to, from, next, { getters });
-};
-
 export const initalizeRouter = () => {
  const userAuthentication = store.dispatch('setUser');

@@ -125,22 +62,8 @@ export const initalizeRouter = () => {
      name: to.name,
    });

-    if (validateSSOLoginParams(to)) {
-      clearBrowserSessionCookies();
-      next();
-      return;
-    }
-
    userAuthentication.then(() => {
-      if (!to.name) {
-        const { isLoggedIn, getCurrentUser: user } = store.getters;
-        if (isLoggedIn) {
-          return next(frontendURL(`accounts/${user.account_id}/dashboard`));
-        }
-        return next('/app/login');
-      }
-
-      return validateRouteAccess(to, from, next, store);
+      return validateAuthenticateRoutePermission(to, next, store);
    });
  });
 };
@@ -1,52 +1,17 @@
 import 'expect-more-jest';
-import {
-  validateAuthenticateRoutePermission,
-  validateRouteAccess,
-} from './index';
+import { validateAuthenticateRoutePermission } from './index';

 jest.mock('./dashboard/dashboard.routes', () => ({
  routes: [],
 }));
-jest.mock('./auth/auth.routes', () => ({
-  routes: [],
-}));
-jest.mock('./login/login.routes', () => ({
-  routes: [],
-}));
 window.roleWiseRoutes = {};

 describe('#validateAuthenticateRoutePermission', () => {
-  describe(`when route is not protected`, () => {
-    it(`should go to the dashboard when user is logged in`, () => {
-      const to = { name: 'login', params: { accountId: 1 } };
-      const from = { name: '', params: { accountId: 1 } };
-      const next = jest.fn();
-      const getters = {
-        isLoggedIn: true,
-        getCurrentUser: {
-          account_id: 1,
-          id: 1,
-          accounts: [{ id: 1, role: 'admin', status: 'active' }],
-        },
-      };
-      validateAuthenticateRoutePermission(to, from, next, { getters });
-      expect(next).toHaveBeenCalledWith('/app/accounts/1/dashboard');
-    });
-    it(`should go there when user is not logged in`, () => {
-      const to = { name: 'login', params: {} };
-      const from = { name: '', params: {} };
-      const next = jest.fn();
-      const getters = { isLoggedIn: false };
-      validateAuthenticateRoutePermission(to, from, next, { getters });
-      expect(next).toHaveBeenCalledWith();
-    });
-  });
  describe(`when route is protected`, () => {
    describe(`when user not logged in`, () => {
      it(`should redirect to login`, () => {
        // Arrange
        const to = { name: 'some-protected-route', params: { accountId: 1 } };
-        const from = { name: '' };
        const next = jest.fn();
        const getters = {
          isLoggedIn: false,
@@ -56,8 +21,10 @@ describe('#validateAuthenticateRoutePermission', () => {
            accounts: [],
          },
        };
-        validateAuthenticateRoutePermission(to, from, next, { getters });
-        expect(next).toHaveBeenCalledWith('/app/login');
+
+        expect(validateAuthenticateRoutePermission(to, next, { getters })).toBe(
+          '/app/login'
+        );
      });
    });
    describe(`when user is logged in`, () => {
@@ -65,7 +32,6 @@ describe('#validateAuthenticateRoutePermission', () => {
        it(`should redirect to dashboard`, () => {
          window.roleWiseRoutes.agent = ['dashboard'];
          const to = { name: 'admin', params: { accountId: 1 } };
-          const from = { name: '' };
          const next = jest.fn();
          const getters = {
            isLoggedIn: true,
@@ -75,7 +41,7 @@ describe('#validateAuthenticateRoutePermission', () => {
              accounts: [{ id: 1, role: 'agent', status: 'active' }],
            },
          };
-          validateAuthenticateRoutePermission(to, from, next, { getters });
+          validateAuthenticateRoutePermission(to, next, { getters });
          expect(next).toHaveBeenCalledWith('/app/accounts/1/dashboard');
        });
      });
@@ -83,7 +49,6 @@ describe('#validateAuthenticateRoutePermission', () => {
        it(`should go there`, () => {
          window.roleWiseRoutes.agent = ['dashboard', 'admin'];
          const to = { name: 'admin', params: { accountId: 1 } };
-          const from = { name: '' };
          const next = jest.fn();
          const getters = {
            isLoggedIn: true,
@@ -93,39 +58,10 @@ describe('#validateAuthenticateRoutePermission', () => {
              accounts: [{ id: 1, role: 'agent', status: 'active' }],
            },
          };
-          validateAuthenticateRoutePermission(to, from, next, { getters });
+          validateAuthenticateRoutePermission(to, next, { getters });
          expect(next).toHaveBeenCalledWith();
        });
      });
    });
  });
 });
-
-describe('#validateRouteAccess', () => {
-  it('returns to login if signup is disabled', () => {
-    window.chatwootConfig = { signupEnabled: 'false' };
-    const to = { name: 'auth_signup', meta: { requireSignupEnabled: true } };
-    const from = { name: '' };
-    const next = jest.fn();
-    validateRouteAccess(to, from, next, {});
-    expect(next).toHaveBeenCalledWith('/app/login');
-  });
-
-  it('returns next for an auth ignore route ', () => {
-    const to = { name: 'auth_confirmation' };
-    const from = { name: '' };
-    const next = jest.fn();
-
-    validateRouteAccess(to, from, next, {});
-    expect(next).toHaveBeenCalledWith();
-  });
-
-  it('returns route validation for everything else ', () => {
-    const to = { name: 'login' };
-    const from = { name: '' };
-    const next = jest.fn();
-
-    validateRouteAccess(to, from, next, { getters: { isLoggedIn: false } });
-    expect(next).toHaveBeenCalledWith();
-  });
-});
@@ -1,208 +0,0 @@
-<template>
-  <main class="medium-12 column login">
-    <section class="text-center medium-12 login__hero align-self-top">
-      <img
-        :src="globalConfig.logo"
-        :alt="globalConfig.installationName"
-        class="hero__logo"
-      />
-      <h2 class="hero__title">
-        {{
-          useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
-        }}
-      </h2>
-    </section>
-    <section class="row align-center">
-      <div v-if="!email" class="small-12 medium-4 column">
-        <div class="login-box column align-self-top">
-          <GoogleOAuthButton
-            v-if="showGoogleOAuth()"
-            button-size="large"
-            class="oauth-reverse"
-          />
-          <form class="column log-in-form" @submit.prevent="login()">
-            <label :class="{ error: $v.credentials.email.$error }">
-              {{ $t('LOGIN.EMAIL.LABEL') }}
-              <input
-                v-model.trim="credentials.email"
-                type="text"
-                data-testid="email_input"
-                :placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
-                @input="$v.credentials.email.$touch"
-              />
-            </label>
-            <label :class="{ error: $v.credentials.password.$error }">
-              {{ $t('LOGIN.PASSWORD.LABEL') }}
-              <input
-                v-model.trim="credentials.password"
-                type="password"
-                data-testid="password_input"
-                :placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
-                @input="$v.credentials.password.$touch"
-              />
-            </label>
-            <woot-submit-button
-              :disabled="
-                $v.credentials.email.$invalid ||
-                  $v.credentials.password.$invalid ||
-                  loginApi.showLoading
-              "
-              :button-text="$t('LOGIN.SUBMIT')"
-              :loading="loginApi.showLoading"
-              button-class="large expanded"
-            />
-          </form>
-        </div>
-        <div class="text-center column sigin__footer">
-          <p v-if="!globalConfig.disableUserProfileUpdate">
-            <router-link to="auth/reset/password">
-              {{ $t('LOGIN.FORGOT_PASSWORD') }}
-            </router-link>
-          </p>
-          <p v-if="showSignupLink()">
-            <router-link to="auth/signup">
-              {{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
-            </router-link>
-          </p>
-        </div>
-      </div>
-      <woot-spinner v-else size="" />
-    </section>
-  </main>
-</template>
-
-<script>
-import { required, email } from 'vuelidate/lib/validators';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import WootSubmitButton from 'components/buttons/FormSubmitButton';
-import { mapGetters } from 'vuex';
-import { parseBoolean } from '@chatwoot/utils';
-import GoogleOAuthButton from '../../components/ui/Auth/GoogleOAuthButton.vue';
-
-const ERROR_MESSAGES = {
-  'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
-  'business-account-only': 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY',
-};
-
-export default {
-  components: {
-    WootSubmitButton,
-    GoogleOAuthButton,
-  },
-  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',
-    }),
-  },
-  created() {
-    if (this.ssoAuthToken) {
-      this.login();
-    }
-    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);
-    },
-    showSignupLink() {
-      return parseBoolean(window.chatwootConfig.signupEnabled);
-    },
-    showGoogleOAuth() {
-      return Boolean(window.chatwootConfig.googleOAuthClientId);
-    },
-    login() {
-      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,
-      };
-      this.$store
-        .dispatch('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';
-          }
-
-          if (response && response.status === 401) {
-            const { errors } = response.data;
-            const hasAuthErrorMsg =
-              errors &&
-              errors.length &&
-              errors[0] &&
-              typeof errors[0] === 'string';
-            if (hasAuthErrorMsg) {
-              this.showAlert(errors[0]);
-            } else {
-              this.showAlert(this.$t('LOGIN.API.UNAUTH'));
-            }
-            return;
-          }
-          this.showAlert(this.$t('LOGIN.API.ERROR_MESSAGE'));
-        });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.oauth-reverse {
-  display: flex;
-  flex-direction: column-reverse;
-}
-</style>
@@ -1,20 +0,0 @@
-import Login from './Login';
-import { frontendURL } from '../../helper/URLHelper';
-
-export default {
-  routes: [
-    {
-      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,
-      }),
-    },
-  ],
-};
@@ -2,12 +2,7 @@ import Vue from 'vue';
 import types from '../mutation-types';
 import authAPI from '../../api/auth';

-import {
-  setUser,
-  clearCookiesOnLogout,
-  clearLocalStorageOnLogout,
-} from '../utils/api';
-import { getLoginRedirectURL } from '../../helper/URLHelper';
+import { setUser, clearCookiesOnLogout } from '../utils/api';

 const initialState = {
  currentUser: {
@@ -97,24 +92,6 @@ export const getters = {

 // actions
 export const actions = {
-  login(_, { ssoAccountId, ssoConversationId, ...credentials }) {
-    return new Promise((resolve, reject) => {
-      authAPI
-        .login(credentials)
-        .then(response => {
-          clearLocalStorageOnLogout();
-          window.location = getLoginRedirectURL({
-            ssoAccountId,
-            ssoConversationId,
-            user: response.data,
-          });
-          resolve();
-        })
-        .catch(error => {
-          reject(error);
-        });
-    });
-  },
  async validityCheck(context) {
    try {
      const response = await authAPI.validityCheck();
@@ -67,6 +67,9 @@ export const parseAPIErrorResponse = error => {
  if (error?.response?.data?.error) {
    return error?.response?.data?.error;
  }
+  if (error?.response?.data?.errors) {
+    return error?.response?.data?.errors[0];
+  }
  return error;
 };

@@ -0,0 +1,61 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+import VueRouter from 'vue-router';
+import Vuelidate from 'vuelidate';
+import i18n from 'dashboard/i18n';
+import * as Sentry from '@sentry/vue';
+import { Integrations } from '@sentry/tracing';
+import {
+  initializeAnalyticsEvents,
+  initializeChatwootEvents,
+} from 'dashboard/helper/scriptHelpers';
+import AnalyticsPlugin from 'dashboard/helper/AnalyticsHelper/plugin';
+import App from '../v3/App.vue';
+import router, { initalizeRouter } from '../v3/views/index';
+import store from '../v3/store';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
+
+Vue.config.env = process.env;
+
+if (window.errorLoggingConfig) {
+  Sentry.init({
+    Vue,
+    dsn: window.errorLoggingConfig,
+    denyUrls: [
+      // Chrome extensions
+      /^chrome:\/\//i,
+      /chrome-extension:/i,
+      /extensions\//i,
+
+      // Locally saved copies
+      /file:\/\//i,
+
+      // Safari extensions.
+      /safari-web-extension:/i,
+      /safari-extension:/i,
+    ],
+    integrations: [new Integrations.BrowserTracing()],
+  });
+}
+
+Vue.use(VueRouter);
+Vue.use(VueI18n);
+Vue.use(Vuelidate);
+Vue.use(AnalyticsPlugin);
+Vue.component('fluent-icon', FluentIcon);
+
+const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
+
+window.bus = new Vue();
+initializeChatwootEvents();
+initializeAnalyticsEvents();
+initalizeRouter();
+window.onload = () => {
+  new Vue({
+    router,
+    store,
+    i18n: i18nConfig,
+    components: { App },
+    template: '<App/>',
+  }).$mount('#app');
+};
@@ -1,5 +1,5 @@
 <template>
-  <span class="spinner" :class="`${size} ${colorScheme}`" />
+  <span class="spinner" :class="`${size} ${colorSchemeClasses}`" />
 </template>
 <script>
 export default {
@@ -13,6 +13,15 @@ export default {
      default: '',
    },
  },
+  computed: {
+    colorSchemeClasses() {
+      if (this.colorScheme === 'primary') {
+        return 'before:!border-t-woot-500';
+      }
+
+      return this.colorScheme;
+    },
+  },
 };
 </script>
 <style scoped lang="scss">
@@ -7,4 +7,5 @@ export const BUS_EVENTS = {
  TOGGLE_SIDEMENU: 'TOGGLE_SIDEMENU',
  ON_MESSAGE_LIST_SCROLL: 'ON_MESSAGE_LIST_SCROLL',
  WEBSOCKET_DISCONNECT: 'WEBSOCKET_DISCONNECT',
+  SHOW_TOAST: 'newToastMessage',
 };
@@ -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>
@@ -0,0 +1,6 @@
+import axios from 'axios';
+
+const { apiHost = '' } = window.chatwootConfig || {};
+const wootAPI = axios.create({ baseURL: `${apiHost}/` });
+
+export default wootAPI;
@@ -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 });
@@ -1,6 +1,6 @@
-/* global axios */
 import wootConstants from 'dashboard/constants/globals';
+import wootAPI from './apiClient';

 export const getTestimonialContent = () => {
-  return axios.get(wootConstants.TESTIMONIAL_URL);
+  return wootAPI.get(wootConstants.TESTIMONIAL_URL);
 };
@@ -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>
@@ -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>
@@ -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>
@@ -1,9 +1,9 @@
 import { shallowMount } from '@vue/test-utils';
-import GoogleOAuthButton from './GoogleOAuthButton.vue';
+import GoogleOAuthButton from './Button.vue';

-function getWrapper(showSeparator, buttonSize) {
+function getWrapper(showSeparator) {
  return shallowMount(GoogleOAuthButton, {
-    propsData: { showSeparator: showSeparator, buttonSize: buttonSize },
+    propsData: { showSeparator: showSeparator },
    methods: {
      $t(text) {
        return text;
@@ -26,18 +26,17 @@ describe('GoogleOAuthButton.vue', () => {

  it('renders the OR separator if showSeparator is true', () => {
    const wrapper = getWrapper(true);
-    expect(wrapper.find('.separator').exists()).toBe(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.find('.separator').exists()).toBe(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');
@@ -47,23 +46,7 @@ describe('GoogleOAuthButton.vue', () => {
    );
    expect(params.get('response_type')).toBe('code');
    expect(params.get('scope')).toBe('email profile');
-  });

-  it('responds to buttonSize prop properly', () => {
-    let wrapper = getWrapper(true, 'tiny');
-    expect(wrapper.find('.button.tiny').exists()).toBe(true);
-
-    wrapper = getWrapper(true, 'small');
-    expect(wrapper.find('.button.small').exists()).toBe(true);
-
-    wrapper = getWrapper(true, 'large');
-    expect(wrapper.find('.button.large').exists()).toBe(true);
-
-    // should not render either
-    wrapper = getWrapper(true, 'default');
-    expect(wrapper.find('.button.small').exists()).toBe(false);
-    expect(wrapper.find('.button.tiny').exists()).toBe(false);
-    expect(wrapper.find('.button.large').exists()).toBe(false);
-    expect(wrapper.find('.button').exists()).toBe(true);
+    expect(wrapper.findComponent({ ref: 'divider' }).exists()).toBe(true);
  });
 });
@@ -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>
@@ -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>
@@ -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>
@@ -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;
+};
@@ -0,0 +1,3 @@
+export const replaceRouteWithReload = url => {
+  window.location = url;
+};
@@ -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();
+};
@@ -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/');
+    });
+  });
+});
@@ -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();
+  });
+});
@@ -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,
+  },
+});
@@ -1,14 +1,16 @@
 <template>
-  <loading-state :message="$t('CONFIRM_EMAIL')" />
+  <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 LoadingState from '../../components/widgets/LoadingState';
-import Auth from '../../api/auth';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
+import { verifyPasswordToken } from '../../../api/auth';
+import Spinner from 'shared/components/Spinner';
+
 export default {
-  components: {
-    LoadingState,
-  },
+  components: { Spinner },
  props: {
    confirmationToken: {
      type: String,
@@ -21,7 +23,7 @@ export default {
  methods: {
    async confirmToken() {
      try {
-        await Auth.verifyPasswordToken({
+        await verifyPasswordToken({
          confirmationToken: this.confirmationToken,
        });
        window.location = DEFAULT_REDIRECT_URL;
@@ -1,59 +1,63 @@
 <template>
-  <form
-    class="login-box medium-4 column align-self-middle"
-    @submit.prevent="login()"
+  <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"
  >
-    <div class="column log-in-form">
-      <h4>{{ $t('SET_NEW_PASSWORD.TITLE') }}</h4>
-      <label :class="{ error: $v.credentials.password.$error }">
-        {{ $t('LOGIN.PASSWORD.LABEL') }}
-        <input
+    <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')"
-          @input="$v.credentials.password.$touch"
+          @blur="$v.credentials.password.$touch"
        />
-        <span v-if="$v.credentials.password.$error" class="message">
-          {{ $t('SET_NEW_PASSWORD.PASSWORD.ERROR') }}
-        </span>
-      </label>
-      <label :class="{ error: $v.credentials.confirmPassword.$error }">
-        {{ $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.LABEL') }}
-        <input
+        <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')"
-          @input="$v.credentials.confirmPassword.$touch"
+          @blur="$v.credentials.confirmPassword.$touch"
        />
-        <span v-if="$v.credentials.confirmPassword.$error" class="message">
-          {{ $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR') }}
-        </span>
-      </label>
-      <woot-submit-button
-        :disabled="
-          $v.credentials.password.$invalid ||
-            $v.credentials.confirmPassword.$invalid ||
-            newPasswordAPI.showLoading
-        "
-        :button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
-        :loading="newPasswordAPI.showLoading"
-        button-class="expanded"
-      />
-      <!-- <input type="submit" class="button " v-on:click.prevent="login()" v-bind:value="" > -->
-    </div>
-  </form>
+        <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 Auth from '../../api/auth';
-
-import WootSubmitButton from '../../components/buttons/FormSubmitButton';
+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: {
-    WootSubmitButton,
+    FormInput,
+    SubmitButton,
  },
  props: {
    resetPasswordToken: { type: String, default: '' },
@@ -106,25 +110,21 @@ export default {
      this.newPasswordAPI.showLoading = false;
      bus.$emit('newToastMessage', message);
    },
-    login() {
+    submitForm() {
      this.newPasswordAPI.showLoading = true;
      const credentials = {
        confirmPassword: this.credentials.confirmPassword,
        password: this.credentials.password,
        resetPasswordToken: this.resetPasswordToken,
      };
-      Auth.setNewPassword(credentials)
-        .then(res => {
-          if (res.status === 200) {
-            window.location = DEFAULT_REDIRECT_URL;
-          }
+      setNewPassword(credentials)
+        .then(() => {
+          window.location = DEFAULT_REDIRECT_URL;
        })
        .catch(error => {
-          let errorMessage = this.$t('SET_NEW_PASSWORD.API.ERROR_MESSAGE');
-          if (error?.data?.message) {
-            errorMessage = error.data.message;
-          }
-          this.showAlert(errorMessage);
+          this.showAlert(
+            error?.message || this.$t('SET_NEW_PASSWORD.API.ERROR_MESSAGE')
+          );
        });
    },
  },
@@ -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>
@@ -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>
@@ -1,101 +1,103 @@
 <template>
-  <div>
-    <form @submit.prevent="submit">
-      <div class="input-wrap">
-        <div class="input-wrap__two-column">
-          <auth-input
-            v-model.trim="credentials.fullName"
-            :class="{ error: $v.credentials.fullName.$error }"
-            :label="$t('REGISTER.FULL_NAME.LABEL')"
-            icon-name="person"
-            :placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
-            :error="
-              $v.credentials.fullName.$error
-                ? $t('REGISTER.FULL_NAME.ERROR')
-                : ''
-            "
-            @blur="$v.credentials.fullName.$touch"
-          />
-          <auth-input
-            v-model.trim="credentials.accountName"
-            :class="{ error: $v.credentials.accountName.$error }"
-            icon-name="building-bank"
-            :label="$t('REGISTER.COMPANY_NAME.LABEL')"
-            :placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
-            :error="
-              $v.credentials.accountName.$error
-                ? $t('REGISTER.COMPANY_NAME.ERROR')
-                : ''
-            "
-            @blur="$v.credentials.accountName.$touch"
-          />
-        </div>
-        <auth-input
-          v-model.trim="credentials.email"
-          type="email"
-          :class="{ error: $v.credentials.email.$error }"
-          icon-name="mail"
-          :label="$t('REGISTER.EMAIL.LABEL')"
-          :placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
-          :error="$v.credentials.email.$error ? $t('REGISTER.EMAIL.ERROR') : ''"
-          @blur="$v.credentials.email.$touch"
+  <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"
        />
-        <auth-input
-          v-model.trim="credentials.password"
-          type="password"
-          :class="{ error: $v.credentials.password.$error }"
-          icon-name="lock-closed"
-          :label="$t('LOGIN.PASSWORD.LABEL')"
-          :placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
-          :error="passwordErrorText"
-          @blur="$v.credentials.password.$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>
-      <div v-if="globalConfig.hCaptchaSiteKey" class="h-captcha--box">
+      <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="captcha-error">
+        <span
+          v-if="!hasAValidCaptcha && didCaptchaReset"
+          class="text-xs text-red-400"
+        >
          {{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
        </span>
      </div>
-      <auth-submit-button
-        :label="$t('REGISTER.SUBMIT')"
-        :is-disabled="isSignupInProgress || !hasAValidCaptcha"
-        :is-loading="isSignupInProgress"
-        icon="arrow-chevron-right"
+      <submit-button
+        :button-text="$t('REGISTER.SUBMIT')"
+        :disabled="isSignupInProgress || !hasAValidCaptcha"
+        :loading="isSignupInProgress"
+        icon-class="arrow-chevron-right"
      />
    </form>
-    <GoogleOAuthButton v-if="showGoogleOAuth()">
+    <GoogleOAuthButton v-if="showGoogleOAuth" class="flex-col-reverse">
      {{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
    </GoogleOAuthButton>
-    <p v-dompurify-html="termsLink" class="accept--terms" />
+    <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 Auth from '../../../../api/auth';
 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 AuthInput from '../AuthInput.vue';
-import AuthSubmitButton from '../AuthSubmitButton.vue';
+import FormInput from '../../../../../components/Form/Input.vue';
+import SubmitButton from '../../../../../components/Button/SubmitButton.vue';
 import { isValidPassword } from 'shared/helpers/Validators';
-import GoogleOAuthButton from 'dashboard/components/ui/Auth/GoogleOAuthButton.vue';
+import GoogleOAuthButton from '../../../../../components/GoogleOauth/Button.vue';
+import { register } from '../../../../../api/auth';
 var CompanyEmailValidator = require('company-email-validator');

 export default {
  components: {
-    AuthInput,
-    AuthSubmitButton,
-    VueHcaptcha,
+    FormInput,
    GoogleOAuthButton,
+    SubmitButton,
+    VueHcaptcha,
  },
  mixins: [globalConfigMixin, alertMixin],
  data() {
@@ -165,6 +167,9 @@ export default {
      }
      return '';
    },
+    showGoogleOAuth() {
+      return Boolean(window.chatwootConfig.googleOAuthClientId);
+    },
  },
  methods: {
    async submit() {
@@ -175,16 +180,12 @@ export default {
      }
      this.isSignupInProgress = true;
      try {
-        const response = await Auth.register(this.credentials);
-        if (response.status === 200) {
-          window.location = DEFAULT_REDIRECT_URL;
-        }
+        await register(this.credentials);
+        window.location = DEFAULT_REDIRECT_URL;
      } catch (error) {
-        let errorMessage = this.$t('REGISTER.API.ERROR_MESSAGE');
-        if (error.response && error.response.data.message) {
-          this.resetCaptcha();
-          errorMessage = error.response.data.message;
-        }
+        let errorMessage =
+          error?.message || this.$t('REGISTER.API.ERROR_MESSAGE');
+        this.resetCaptcha();
        this.showAlert(errorMessage);
      } finally {
        this.isSignupInProgress = false;
@@ -194,9 +195,6 @@ export default {
      this.credentials.hCaptchaClientResponse = token;
      this.didCaptchaReset = false;
    },
-    showGoogleOAuth() {
-      return Boolean(window.chatwootConfig.googleOAuthClientId);
-    },
    resetCaptcha() {
      if (!this.globalConfig.hCaptchaSiteKey) {
        return;
@@ -210,13 +208,6 @@ export default {
 </script>
 <style scoped lang="scss">
 .h-captcha--box {
-  margin-bottom: var(--space-small);
-
-  .captcha-error {
-    color: var(--r-400);
-    font-size: var(--font-size-small);
-  }
-
  &::v-deep .error {
    iframe {
      border: 1px solid var(--r-500);
@@ -224,32 +215,4 @@ export default {
    }
  }
 }
-
-.accept--terms {
-  margin: var(--space-normal) 0 var(--space-smaller) 0;
-}
-
-.input-wrap {
-  .input-wrap__two-column {
-    display: grid;
-    gap: 1.6rem;
-    grid-template-columns: repeat(2, minmax(100px, 1fr));
-  }
-}
-
-.separator {
-  display: flex;
-  align-items: center;
-  margin: 2rem 0rem;
-  gap: var(--space-normal);
-  color: var(--s-300);
-  font-size: var(--font-size-small);
-  &::before,
-  &::after {
-    content: '';
-    flex: 1;
-    height: 1px;
-    background: var(--s-100);
-  }
-}
 </style>
@@ -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>
@@ -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>
@@ -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;
@@ -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>
@@ -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,
+  },
+];
@@ -2,19 +2,8 @@ class Inboxes::FetchImapEmailInboxesJob < ApplicationJob
  queue_as :scheduled_jobs

  def perform
-    # check imap_enabled for channel
    Inbox.where(channel_type: 'Channel::Email').all.find_each(batch_size: 100) do |inbox|
-      next unless inbox.channel.imap_enabled?
-
-      fetch_emails(inbox)
-    end
-  end
-
-  def fetch_emails(inbox)
-    if inbox.channel.microsoft? && ENV.fetch('AZURE_TENANT_ID', false)
-      ::Inboxes::FetchMsGraphEmailForTenantJob.perform_later(inbox.channel)
-    else
-      ::Inboxes::FetchImapEmailsJob.perform_later(inbox.channel)
+      ::Inboxes::FetchImapEmailsJob.perform_later(inbox.channel) if inbox.channel.imap_enabled
    end
  end
 end
@@ -1,101 +0,0 @@
-require 'net/http'
-
-class Inboxes::FetchMsGraphEmailForTenantJob < ApplicationJob
-  queue_as :scheduled_jobs
-
-  def perform(channel)
-    process_email_for_channel(channel)
-  rescue EOFError => e
-    Rails.logger.error e
-  rescue StandardError => e
-    ChatwootExceptionTracker.new(e, account: channel.account).capture_exception
-  end
-
-  private
-
-  def should_fetch_email?(channel)
-    channel.imap_enabled? && channel.microsoft? && !channel.reauthorization_required?
-  end
-
-  def process_email_for_channel(channel)
-    # fetching email for microsoft provider
-    fetch_mail_for_channel(channel)
-
-    # clearing old failures like timeouts since the mail is now successfully processed
-    channel.reauthorized!
-  end
-
-  def fetch_mail_for_channel(channel)
-    return if channel.provider_config['access_token'].blank?
-
-    access_token = valid_access_token channel
-
-    return unless access_token
-
-    graph = graph_authenticate(access_token)
-
-    process_mails(graph, channel)
-  end
-
-  def process_mails(graph, channel)
-    response = graph.get_from_api('me/messages', {}, graph_query)
-
-    unless response.is_a?(Net::HTTPSuccess)
-      channel.authorization_error!
-      return false
-    end
-
-    json_response = JSON.parse(response.body)
-    json_response['value'].each do |message|
-      inbound_mail = Mail.read_from_string retrieve_mail_mime(graph, message['id'])
-
-      next if channel.inbox.messages.find_by(source_id: inbound_mail.message_id).present?
-
-      process_mail(inbound_mail, channel)
-    end
-  end
-
-  def retrieve_mail_mime(graph, id)
-    response = graph.get_from_api("me/messages/#{id}/$value")
-    return unless response.is_a?(Net::HTTPSuccess)
-
-    response.body
-  end
-
-  def graph_authenticate(access_token)
-    MicrosoftGraphApi.new(access_token)
-  end
-
-  def yesterday
-    (Time.zone.today - 1).strftime('%FT%TZ')
-  end
-
-  def tomorrow
-    (Time.zone.today + 1).strftime('%FT%TZ')
-  end
-
-  # Query to replicate the IMAP search used in Inboxes::FetchImapEmailsJob
-  # Selects the top 1000 records within the given filter, as that is the maximum
-  # page size for the API. Might need to look into paginating the requests later,
-  # for inboxes that receive more than 1000 emails a day?
-  #
-  # 1. https://learn.microsoft.com/en-us/graph/api/user-list-messages
-  # 2. https://learn.microsoft.com/en-us/graph/query-parameters
-  def graph_query
-    {
-      '$filter': "receivedDateTime ge #{yesterday} and receivedDateTime le #{tomorrow}",
-      '$top': '1000', '$select': 'id'
-    }
-  end
-
-  def process_mail(inbound_mail, channel)
-    Imap::ImapMailbox.new.process(inbound_mail, channel)
-  rescue StandardError => e
-    ChatwootExceptionTracker.new(e, account: channel.account).capture_exception
-  end
-
-  # Making sure the access token is valid for microsoft provider
-  def valid_access_token(channel)
-    Microsoft::RefreshOauthTokenService.new(channel: channel).access_token
-  end
-end
@@ -23,7 +23,6 @@ module ConversationReplyMailerHelper

  def ms_smtp_settings
    return unless @inbox.email? && @channel.imap_enabled && @inbox.channel.provider == 'microsoft'
-    return ms_graph_settings if ENV.fetch('AZURE_TENANT_ID', false)

    smtp_settings = {
      address: 'smtp.office365.com',
@@ -41,15 +40,6 @@ module ConversationReplyMailerHelper
    @options[:delivery_method_options] = smtp_settings
  end

-  def ms_graph_settings
-    graph_settings = {
-      token: @channel.provider_config['access_token']
-    }
-
-    @options[:delivery_method] = :microsoft_graph
-    @options[:delivery_method_options] = graph_settings
-  end
-
  def set_delivery_method
    return unless @inbox.inbox_type == 'Email' && @channel.smtp_enabled

@@ -60,8 +60,8 @@
      }
    </script>
    <% end %>
-    <%= javascript_pack_tag 'application' %>
-    <%= stylesheet_pack_tag 'application' %>
+    <%= javascript_pack_tag @application_pack %>
+    <%= stylesheet_pack_tag @application_pack %>
  </head>
  <body>
    <div id="app"></div>
@@ -1,3 +0,0 @@
-require 'microsoft_graph_delivery_method'
-
-ActionMailer::Base.add_delivery_method :microsoft_graph, MicrosoftGraphDeliveryMethod
@@ -73,4 +73,4 @@
 - name: CSML_EDITOR_HOST
  value:
 - name: LOGO_DARK
-  value: '/brand-assets/logo-dark.svg'
+  value: '/brand-assets/logo_dark.svg'
@@ -1,62 +0,0 @@
-# Simple HTTPS API helper class for interacting with MS Graph.
-# Uses the standard ruby HTTP library for interacting with the API.
-
-require 'uri'
-require 'net/http'
-
-class MicrosoftGraphApi
-  API_VERSION = 'v1.0'.freeze
-  API_PORT = 443
-  API_URL = "https://graph.microsoft.com/#{API_VERSION}".freeze
-
-  def initialize(token)
-    @token = token
-  end
-
-  # Simple get request to the endpoint
-  #
-  # 'queries' are the get variables after the main url
-  # eg. foo/bar?query=myquery
-  def get_from_api(endpoint, headers = {}, query = {})
-    uri = endpoint_to_uri(endpoint, query)
-    https = setup_https(uri.host)
-    request = Net::HTTP::Get.new(uri.request_uri)
-
-    # Assign each header to the request
-    headers.each { |key, value| request[key.to_s] = value.to_s }
-    request['Authorization'] = "Bearer #{@token}"
-
-    https.request(request)
-  end
-
-  # Simple post request to the endpoint
-  def post_to_api(endpoint, headers = {}, body = '')
-    uri = endpoint_to_uri(endpoint)
-    https = setup_https(uri.host)
-    request = Net::HTTP::Post.new(uri.path)
-
-    # Assign each header to the request
-    headers.each { |key, value| request[key.to_s] = value.to_s }
-    request['Authorization'] = "Bearer #{@token}"
-
-    request.body = body
-    https.request(request)
-  end
-
-  private
-
-  def setup_https(host)
-    https = Net::HTTP.new(host, API_PORT)
-    https.use_ssl = true
-    https
-  end
-
-  def endpoint_to_uri(endpoint, query = {})
-    endpoint.delete_prefix('/')
-    uri = URI("#{API_URL}/#{endpoint}")
-    return uri if query.empty?
-
-    uri.query = URI.encode_www_form(query)
-    uri
-  end
-end
@@ -9,18 +9,6 @@ require 'omniauth-oauth2'
 # Implements an OmniAuth strategy to get a Microsoft Graph
 # compatible token from Azure AD
 class MicrosoftGraphAuth < OmniAuth::Strategies::OAuth2
-  # Microsoft Azure Tenant
-  # For single tenant applications, meant to be used by
-  # organisations for their own apps, the 'common' endpoint is not allowed.
-  # If the environment variable 'AZURE_TENANT_ID' is set,
-  # this will return it's value, otherwise, it will default to 'common'.
-  #
-  # The tenant id for your Azure organization can be obtained by
-  # by accessing 'Tenant properties' from the Azure portal.
-  def self.azure_tenant_id
-    ENV.fetch('AZURE_TENANT_ID', 'common')
-  end
-
  option :name, :microsoft_graph_auth

  DEFAULT_SCOPE = 'offline_access https://outlook.office.com/IMAP.AccessAsUser.All https://outlook.office.com/SMTP.Send'
@@ -28,8 +16,8 @@ class MicrosoftGraphAuth < OmniAuth::Strategies::OAuth2
  # Configure the Microsoft identity platform endpoints
  option :client_options,
         site: 'https://login.microsoftonline.com',
-         authorize_url: "/#{azure_tenant_id}/oauth2/v2.0/authorize",
-         token_url: "/#{azure_tenant_id}/oauth2/v2.0/token"
+         authorize_url: '/common/oauth2/v2.0/authorize',
+         token_url: '/common/oauth2/v2.0/token'

  option :pcke, true
  # Send the scope parameter during authorize
@@ -1,26 +0,0 @@
-# Recently (around Feb/Mar 2023), Microsoft has made sending
-# email through SMTP with Outlook near impossible, at least
-# for single tenant applications.
-#
-# As such, adding a delivery method to use the Microsoft Graph
-# API allows for emails to be sent again.
-require 'base64'
-
-class MicrosoftGraphDeliveryMethod
-  def initialize(config)
-    @config = config
-  end
-
-  def deliver!(mail)
-    # Create a new API connection, and post the mail to the `me/sendMail` endpoint.
-    # https://learn.microsoft.com/en-us/graph/api/user-sendmail#example-4-send-a-new-message-using-mime-format
-
-    headers = {
-      'Content-Type' => 'text/plain'
-    }
-    body = Base64.encode64(mail.to_s)
-
-    graph = MicrosoftGraphApi.new(@config[:token])
-    graph.post_to_api('me/sendMail', headers, body)
-  end
-end
@@ -6,7 +6,7 @@
    "eslint": "eslint app/**/*.{js,vue}",
    "eslint:fix": "eslint app/**/*.{js,vue} --fix",
    "pretest": "rimraf .jest-cache",
-    "test": "jest  -w 1 --no-cache",
+    "test": "jest -w 1 --no-cache",
    "test:watch": "jest -w 1 --watch --no-cache",
    "test:coverage": "jest -w 1 --no-cache --collectCoverage",
    "webpacker-start": "webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors",
@@ -43,29 +43,6 @@ RSpec.describe 'Microsoft Authorization API', type: :request do
        expect(response.parsed_body['url']).to eq response_url
        expect(Redis::Alfred.get(administrator.email)).to eq(account.id.to_s)
      end
-
-      it 'creates a new authorization and returns the redirect url for single tenant' do
-        with_modified_env AZURE_TENANT_ID: 'azure_tenant_id' do
-          post "/api/v1/accounts/#{account.id}/microsoft/authorization",
-               headers: administrator.create_new_auth_token,
-               params: { email: administrator.email },
-               as: :json
-
-          microsoft_service = Class.new { extend MicrosoftConcern }
-
-          response_url = microsoft_service.microsoft_client.auth_code.authorize_url(
-            {
-              redirect_uri: "#{ENV.fetch('FRONTEND_URL', 'http://localhost:3000')}/microsoft/callback",
-              scope: 'offline_access https://graph.microsoft.com/Mail.Read https://graph.microsoft.com/Mail.Send openid profile',
-              prompt: 'consent'
-            }
-          )
-          expect(response.parsed_body['url']).to eq response_url
-        end
-
-        expect(response).to have_http_status(:success)
-        expect(Redis::Alfred.get(administrator.email)).to eq(account.id.to_s)
-      end
    end
  end
 end
@@ -7,12 +7,6 @@ RSpec.describe Inboxes::FetchImapEmailInboxesJob do
                           imap_password: 'password', account: account)
  end
  let(:email_inbox) { create(:inbox, channel: imap_email_channel, account: account) }
-  let(:microsoft_imap_email_channel) do
-    create(:channel_email, provider: 'microsoft', imap_enabled: true, imap_address: 'outlook.office365.com',
-                           imap_port: 993, imap_login: 'imap@outlook.com', imap_password: 'password', account: account,
-                           provider_config: { access_token: 'access_token' })
-  end
-  let(:ms_email_inbox) { create(:inbox, channel: microsoft_imap_email_channel, account: account) }

  it 'enqueues the job' do
    expect { described_class.perform_later }.to have_enqueued_job(described_class)
@@ -26,24 +20,4 @@ RSpec.describe Inboxes::FetchImapEmailInboxesJob do
      described_class.perform_now
    end
  end
-
-  context 'when microsoft inbox' do
-    it 'calls fetch ms graph email job for single tenant app' do
-      stub_request(:get, 'https://graph.microsoft.com/v1.0/me/messages?$filter=receivedDateTime%20ge%202023-05-23T00:00:00Z%20and%20receivedDateTime%20le%202023-05-25T00:00:00Z&$select=id&$top=1000')
-
-      with_modified_env AZURE_TENANT_ID: 'azure_tenant_id' do
-        expect(Inboxes::FetchMsGraphEmailForTenantJob).to receive(:perform_later).with(microsoft_imap_email_channel).once
-
-        described_class.perform_now
-      end
-    end
-
-    it 'calls fetch imap email job for multi tenant app' do
-      with_modified_env AZURE_TENANT_ID: nil do
-        expect(Inboxes::FetchImapEmailsJob).to receive(:perform_later).with(microsoft_imap_email_channel).once
-
-        described_class.perform_now
-      end
-    end
-  end
 end
@@ -1,68 +0,0 @@
-require 'rails_helper'
-
-RSpec.describe Inboxes::FetchMsGraphEmailForTenantJob do
-  include ActionMailbox::TestHelper
-
-  let(:account) { create(:account) }
-  let(:microsoft_imap_email_channel) do
-    create(:channel_email, provider: 'microsoft', imap_enabled: true, imap_address: 'outlook.office365.com',
-                           imap_port: 993, imap_login: 'imap@outlook.com', imap_password: 'password', account: account,
-                           provider_config: { access_token: 'access_token' })
-  end
-  let(:ms_email_inbox) { create(:inbox, channel: microsoft_imap_email_channel, account: account) }
-  let(:inbound_mail) { create_inbound_email_from_mail(from: 'testemail@gmail.com', to: 'imap@outlook.com', subject: 'Hello!') }
-  let(:yesterday) { (Time.zone.today - 1).strftime('%FT%TZ') }
-  let(:tomorrow) { (Time.zone.today + 1).strftime('%FT%TZ') }
-
-  it 'enqueues the job' do
-    expect { described_class.perform_later }.to have_enqueued_job(described_class)
-      .on_queue('scheduled_jobs')
-  end
-
-  context 'when imap fetch new emails for microsoft mailer' do
-    before do
-      stub_request(:get, "https://graph.microsoft.com/v1.0/me/messages?$filter=receivedDateTime%20ge%20#{yesterday}%20and%20receivedDateTime%20le%20#{tomorrow}&$select=id&$top=1000")
-        .with(
-          headers: {
-            'Accept' => '*/*',
-            'Accept-Encoding' => 'gzip;q=1.0,deflate;q=0.6,identity;q=0.3',
-            'Authorization' => 'Bearer access_token',
-            'User-Agent' => 'Ruby'
-          }
-        )
-        .to_return(status: 200, body: '{"value":[{"id":"1"}]}', headers: {})
-
-      stub_request(:get, 'https://graph.microsoft.com/v1.0/me/messages/1/$value')
-        .with(
-          headers: {
-            'Accept' => '*/*',
-            'Accept-Encoding' => 'gzip;q=1.0,deflate;q=0.6,identity;q=0.3',
-            'Authorization' => 'Bearer access_token',
-            'User-Agent' => 'Ruby'
-          }
-        )
-        .to_return(status: 200, body: '', headers: {})
-    end
-
-    it 'fetch and process all emails' do
-      ms_imap_email_inbox = double
-
-      with_modified_env AZURE_TENANT_ID: 'azure_tenant_id' do
-        email = Mail.new do
-          to 'test@outlook.com'
-          from 'test@gmail.com'
-          subject :test.to_s
-          body 'hello'
-        end
-        imap_fetch_mail = Net::IMAP::FetchData.new
-        imap_fetch_mail.attr = { RFC822: email }.with_indifferent_access
-
-        allow(Mail).to receive(:read_from_string).and_return(inbound_mail)
-        allow(Imap::ImapMailbox).to receive(:new).and_return(ms_imap_email_inbox)
-        expect(ms_imap_email_inbox).to receive(:process).with(inbound_mail, microsoft_imap_email_channel).once
-
-        described_class.perform_now(microsoft_imap_email_channel)
-      end
-    end
-  end
-end
@@ -1,61 +0,0 @@
-require 'rails_helper'
-# explicitly requiring since we are loading apms conditionally in application.rb
-require 'sentry-ruby'
-
-describe MicrosoftGraphApi do
-  let(:yesterday) { (Time.zone.today - 1).strftime('%FT%TZ') }
-  let(:tomorrow) { (Time.zone.today + 1).strftime('%FT%TZ') }
-
-  describe '#get_from_api' do
-    before do
-      stub_request(:get, "https://graph.microsoft.com/v1.0/me/messages?$filter=receivedDateTime%20ge%20#{yesterday}%20and%20receivedDateTime%20le%20#{tomorrow}&$select=id&$top=1000")
-        .with(
-          headers: {
-            'Accept' => '*/*',
-            'Accept-Encoding' => 'gzip;q=1.0,deflate;q=0.6,identity;q=0.3',
-            'Authorization' => 'Bearer access_token',
-            'User-Agent' => 'Ruby'
-          }
-        )
-        .to_return(status: 200, body: '{"value":[{"id":"1"}]}', headers: {})
-
-      stub_request(:get, 'https://graph.microsoft.com/v1.0/me/messages/1/$value')
-        .with(
-          headers: {
-            'Accept' => '*/*',
-            'Accept-Encoding' => 'gzip;q=1.0,deflate;q=0.6,identity;q=0.3',
-            'Authorization' => 'Bearer access_token',
-            'User-Agent' => 'Ruby'
-          }
-        )
-        .to_return(status: 200, body: '', headers: {})
-
-      stub_request(:post, 'https://graph.microsoft.com/v1.0/me/sendMail')
-        .with(
-          body: 'email body',
-          headers: {
-            'Accept' => '*/*',
-            'Accept-Encoding' => 'gzip;q=1.0,deflate;q=0.6,identity;q=0.3',
-            'Authorization' => 'Bearer access_token',
-            'User-Agent' => 'Ruby'
-          }
-        )
-        .to_return(status: 200, body: 'email body', headers: { 'Content-Type' => 'text/plain' })
-    end
-
-    it 'fetch emails' do
-      graph_query = { :$filter => "receivedDateTime ge #{yesterday} and receivedDateTime le #{tomorrow}", :$top => '1000', :$select => 'id' }
-      response = described_class.new('access_token').get_from_api('me/messages', {}, graph_query)
-
-      json_response = JSON.parse(response.body)
-      expect(json_response['value'][0]['id']).to eq '1'
-    end
-
-    it 'post emails' do
-      response = described_class.new('access_token').post_to_api('me/sendMail', {}, 'email body')
-
-      expect(response.is_a?(Net::HTTPSuccess)).to be true
-      expect(response.body).to eq('email body')
-    end
-  end
-end
@@ -2,6 +2,7 @@ module.exports = {
  darkMode: 'class',
  content: [
    './app/javascript/widget/**/*.vue',
+    './app/javascript/v3/**/*.vue',
    './app/javascript/portal/**/*.vue',
    './app/javascript/shared/**/*.vue',
    './app/javascript/survey/**/*.vue',