feat: allow SP initiated SAML (#12447)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/i18n/locale/en/login.json

@@ -22,6 +22,20 @@
     },
     "FORGOT_PASSWORD": "Forgot your password?",
     "CREATE_NEW_ACCOUNT": "Create a new account",
-    "SUBMIT": "Login"
+    "SUBMIT": "Login",
+    "SAML": {
+      "LABEL": "Log in via SSO",
+      "TITLE": "Initiate Single Sign-on (SSO)",
+      "SUBTITLE": "Enter your work email to access your organization",
+      "BACK_TO_LOGIN": "Login via Password",
+      "WORK_EMAIL": {
+        "LABEL": "Work Email",
+        "PLACEHOLDER": "Enter your work email"
+      },
+      "SUBMIT": "Continue with SSO",
+      "API": {
+        "ERROR_MESSAGE": "SSO authentication failed"
+      }
+    }
   }
 }

app/javascript/shared/store/globalConfig.js

@@ -1,3 +1,5 @@
+import { parseBoolean } from '@chatwoot/utils';
+
 const {
   API_CHANNEL_NAME: apiChannelName,
   API_CHANNEL_THUMBNAIL: apiChannelThumbnail,
@@ -15,6 +17,7 @@ const {
   LOGO: logo,
   LOGO_DARK: logoDark,
   PRIVACY_URL: privacyURL,
+  IS_ENTERPRISE: isEnterprise,
   TERMS_URL: termsURL,
   WIDGET_BRAND_URL: widgetBrandURL,
   DISABLE_USER_PROFILE_UPDATE: disableUserProfileUpdate,
@@ -30,8 +33,8 @@ const state = {
   chatwootInboxToken,
   deploymentEnv,
   createNewAccountFromDashboard,
-  directUploadsEnabled: directUploadsEnabled === 'true',
-  disableUserProfileUpdate: disableUserProfileUpdate === 'true',
+  directUploadsEnabled: parseBoolean(directUploadsEnabled),
+  disableUserProfileUpdate: parseBoolean(disableUserProfileUpdate),
   displayManifest,
   gitSha,
   hCaptchaSiteKey,
@@ -42,6 +45,7 @@ const state = {
   privacyURL,
   termsURL,
   widgetBrandURL,
+  isEnterprise: parseBoolean(isEnterprise),
 };
 
 export const getters = {

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

@@ -55,6 +55,7 @@ const model = defineModel({
     <input
       v-bind="$attrs"
       v-model="model"
+      :name="name"
       :type="type"
       class="block w-full border-none rounded-md shadow-sm bg-n-alpha-black2 appearance-none outline outline-1 focus:outline focus:outline-1 text-n-slate-12 placeholder:text-n-slate-10 sm:text-sm sm:leading-6 px-3 py-3"
       :class="{

app/javascript/v3/helpers/RouteHelper.js

@@ -41,7 +41,14 @@ export const validateRouteAccess = (to, next, chatwootConfig = {}) => {
     to.meta &&
     to.meta.requireSignupEnabled;
 
-  if (!to.name || isAnInalidSignupNavigation) {
+  // Disable navigation to SAML login if enterprise is not enabled
+  // SAML route has an attribute (requireEnterprise) in it's definition
+  const isEnterpriseOnlyPath =
+    chatwootConfig.isEnterprise !== 'true' &&
+    to.meta &&
+    to.meta.requireEnterprise;
+
+  if (!to.name || isAnInalidSignupNavigation || isEnterpriseOnlyPath) {
     next(frontendURL('login'));
     return;
   }

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

@@ -85,6 +85,9 @@ export default {
     showSignupLink() {
       return parseBoolean(window.chatwootConfig.signupEnabled);
     },
+    showSamlLogin() {
+      return this.globalConfig.isEnterprise;
+    },
   },
   created() {
     if (this.ssoAuthToken) {
@@ -302,5 +305,13 @@ export default {
         <Spinner color-scheme="primary" size="" />
       </div>
     </section>
+    <div v-if="showSamlLogin" class="mt-6 text-center">
+      <router-link
+        to="/app/login/sso"
+        class="inline-flex items-center text-sm font-medium text-n-brand hover:text-n-brand-dark"
+      >
+        {{ $t('LOGIN.SAML.LABEL') }}
+      </router-link>
+    </div>
   </main>
 </template>

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

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

app/javascript/v3/views/routes.js

@@ -1,6 +1,7 @@
 import { frontendURL } from 'dashboard/helper/URLHelper';
 
 import Login from './login/Index.vue';
+import SamlLogin from './login/Saml.vue';
 import Signup from './auth/signup/Index.vue';
 import ResetPassword from './auth/reset/password/Index.vue';
 import Confirmation from './auth/confirmation/Index.vue';
@@ -20,6 +21,12 @@ export default [
       authError: route.query.error,
     }),
   },
+  {
+    path: frontendURL('login/sso'),
+    name: 'sso_login',
+    component: SamlLogin,
+    meta: { requireEnterprise: true },
+  },
   {
     path: frontendURL('auth/signup'),
     name: 'auth_signup',