feat: allow SP initiated SAML (#12447)

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

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',