Restructure omni services and add Chatwoot research snapshot
This commit is contained in:
Ruslan Bakiev
@@ -0,0 +1,39 @@
|
||||
<script>
|
||||
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
|
||||
import { verifyPasswordToken } from '../../../api/auth';
|
||||
import Spinner from 'shared/components/Spinner.vue';
|
||||
|
||||
export default {
|
||||
components: { Spinner },
|
||||
props: {
|
||||
confirmationToken: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.confirmToken();
|
||||
},
|
||||
methods: {
|
||||
async confirmToken() {
|
||||
try {
|
||||
await verifyPasswordToken({
|
||||
confirmationToken: this.confirmationToken,
|
||||
});
|
||||
window.location = DEFAULT_REDIRECT_URL;
|
||||
} catch (error) {
|
||||
window.location = DEFAULT_REDIRECT_URL;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center justify-center min-h-screen h-full bg-n-background w-full"
|
||||
>
|
||||
<Spinner color-scheme="primary" size="" />
|
||||
<div class="ml-2 text-n-slate-11">{{ $t('CONFIRM_EMAIL') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
139
research/chatwoot/app/javascript/v3/views/auth/password/Edit.vue
Normal file
139
research/chatwoot/app/javascript/v3/views/auth/password/Edit.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<script>
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, minLength } from '@vuelidate/validators';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import FormInput from '../../../components/Form/Input.vue';
|
||||
import NextButton from 'dashboard/components-next/button/Button.vue';
|
||||
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
|
||||
import { setNewPassword } from '../../../api/auth';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormInput,
|
||||
NextButton,
|
||||
},
|
||||
props: {
|
||||
resetPasswordToken: { type: String, default: '' },
|
||||
},
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// We need to initialize the component with any
|
||||
// properties that will be used in it
|
||||
credentials: {
|
||||
confirmPassword: '',
|
||||
password: '',
|
||||
},
|
||||
newPasswordAPI: {
|
||||
message: '',
|
||||
showLoading: false,
|
||||
},
|
||||
error: '',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// If url opened without token
|
||||
// redirect to login
|
||||
if (!this.resetPasswordToken) {
|
||||
window.location = DEFAULT_REDIRECT_URL;
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
credentials: {
|
||||
password: {
|
||||
required,
|
||||
minLength: minLength(6),
|
||||
},
|
||||
confirmPassword: {
|
||||
required,
|
||||
minLength: minLength(6),
|
||||
isEqPassword(value) {
|
||||
if (value !== this.credentials.password) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showAlertMessage(message) {
|
||||
// Reset loading, current selected agent
|
||||
this.newPasswordAPI.showLoading = false;
|
||||
useAlert(message);
|
||||
},
|
||||
submitForm() {
|
||||
this.newPasswordAPI.showLoading = true;
|
||||
const credentials = {
|
||||
confirmPassword: this.credentials.confirmPassword,
|
||||
password: this.credentials.password,
|
||||
resetPasswordToken: this.resetPasswordToken,
|
||||
};
|
||||
setNewPassword(credentials)
|
||||
.then(() => {
|
||||
window.location = DEFAULT_REDIRECT_URL;
|
||||
})
|
||||
.catch(error => {
|
||||
this.showAlertMessage(
|
||||
error?.message || this.$t('SET_NEW_PASSWORD.API.ERROR_MESSAGE')
|
||||
);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col justify-center w-full min-h-screen py-12 bg-n-brand/5 dark:bg-n-background sm:px-6 lg:px-8"
|
||||
>
|
||||
<form
|
||||
class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
|
||||
@submit.prevent="submitForm"
|
||||
>
|
||||
<h1
|
||||
class="mb-1 text-2xl font-medium tracking-tight text-left text-n-slate-12"
|
||||
>
|
||||
{{ $t('SET_NEW_PASSWORD.TITLE') }}
|
||||
</h1>
|
||||
|
||||
<div class="space-y-5">
|
||||
<FormInput
|
||||
v-model="credentials.password"
|
||||
class="mt-3"
|
||||
name="password"
|
||||
type="password"
|
||||
:has-error="v$.credentials.password.$error"
|
||||
:error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
|
||||
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
|
||||
@blur="v$.credentials.password.$touch"
|
||||
/>
|
||||
<FormInput
|
||||
v-model="credentials.confirmPassword"
|
||||
class="mt-3"
|
||||
name="confirm_password"
|
||||
type="password"
|
||||
:has-error="v$.credentials.confirmPassword.$error"
|
||||
:error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
|
||||
:placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
|
||||
@blur="v$.credentials.confirmPassword.$touch"
|
||||
/>
|
||||
<NextButton
|
||||
lg
|
||||
type="submit"
|
||||
data-testid="submit_button"
|
||||
class="w-full"
|
||||
:label="$t('SET_NEW_PASSWORD.SUBMIT')"
|
||||
:disabled="
|
||||
v$.credentials.password.$invalid ||
|
||||
v$.credentials.confirmPassword.$invalid ||
|
||||
newPasswordAPI.showLoading
|
||||
"
|
||||
:is-loading="newPasswordAPI.showLoading"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,110 @@
|
||||
<script>
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { required, minLength, email } from '@vuelidate/validators';
|
||||
import { useBranding } from 'shared/composables/useBranding';
|
||||
import FormInput from '../../../../components/Form/Input.vue';
|
||||
import { resetPassword } from '../../../../api/auth';
|
||||
import NextButton from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
export default {
|
||||
components: { FormInput, NextButton },
|
||||
setup() {
|
||||
const { replaceInstallationName } = useBranding();
|
||||
return { v$: useVuelidate(), replaceInstallationName };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
credentials: { email: '' },
|
||||
resetPassword: {
|
||||
message: '',
|
||||
showLoading: false,
|
||||
},
|
||||
error: '',
|
||||
};
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
credentials: {
|
||||
email: {
|
||||
required,
|
||||
email,
|
||||
minLength: minLength(4),
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showAlertMessage(message) {
|
||||
// Reset loading, current selected agent
|
||||
this.resetPassword.showLoading = false;
|
||||
useAlert(message);
|
||||
},
|
||||
submit() {
|
||||
this.resetPassword.showLoading = true;
|
||||
resetPassword(this.credentials)
|
||||
.then(res => {
|
||||
let successMessage = this.$t('RESET_PASSWORD.API.SUCCESS_MESSAGE');
|
||||
if (res.data && res.data.message) {
|
||||
successMessage = res.data.message;
|
||||
}
|
||||
this.showAlertMessage(successMessage);
|
||||
})
|
||||
.catch(error => {
|
||||
let errorMessage = this.$t('RESET_PASSWORD.API.ERROR_MESSAGE');
|
||||
if (error?.response?.data?.message) {
|
||||
errorMessage = error.response.data.message;
|
||||
}
|
||||
this.showAlertMessage(errorMessage);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col justify-center w-full min-h-screen py-12 bg-n-brand/5 dark:bg-n-background sm:px-6 lg:px-8"
|
||||
>
|
||||
<form
|
||||
class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
|
||||
@submit.prevent="submit"
|
||||
>
|
||||
<h1
|
||||
class="mb-1 text-2xl font-medium tracking-tight text-left text-n-slate-12"
|
||||
>
|
||||
{{ $t('RESET_PASSWORD.TITLE') }}
|
||||
</h1>
|
||||
<p
|
||||
class="mb-4 text-sm font-normal leading-6 tracking-normal text-n-slate-11"
|
||||
>
|
||||
{{ replaceInstallationName($t('RESET_PASSWORD.DESCRIPTION')) }}
|
||||
</p>
|
||||
<div class="space-y-5">
|
||||
<FormInput
|
||||
v-model="credentials.email"
|
||||
name="email_address"
|
||||
:has-error="v$.credentials.email.$error"
|
||||
:error-message="$t('RESET_PASSWORD.EMAIL.ERROR')"
|
||||
:placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
|
||||
@input="v$.credentials.email.$touch"
|
||||
/>
|
||||
<NextButton
|
||||
lg
|
||||
type="submit"
|
||||
data-testid="submit_button"
|
||||
class="w-full"
|
||||
:label="$t('RESET_PASSWORD.SUBMIT')"
|
||||
:disabled="v$.credentials.email.$invalid || resetPassword.showLoading"
|
||||
:is-loading="resetPassword.showLoading"
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-4 -mb-1 text-sm text-n-slate-11">
|
||||
{{ $t('RESET_PASSWORD.GO_BACK_TO_LOGIN') }}
|
||||
<router-link to="/auth/login" class="text-link text-n-brand">
|
||||
{{ $t('COMMON.CLICK_HERE') }}.
|
||||
</router-link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup>
|
||||
import { ref, computed, onBeforeMount } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import SignupForm from './components/Signup/Form.vue';
|
||||
import Testimonials from './components/Testimonials/Index.vue';
|
||||
import Spinner from 'shared/components/Spinner.vue';
|
||||
import signupBg from 'assets/images/auth/signup-bg.jpg';
|
||||
|
||||
const store = useStore();
|
||||
|
||||
const isLoading = ref(false);
|
||||
const globalConfig = computed(() => store.getters['globalConfig/get']);
|
||||
const isAChatwootInstance = computed(
|
||||
() => globalConfig.value.installationName === 'Chatwoot'
|
||||
);
|
||||
|
||||
onBeforeMount(() => {
|
||||
isLoading.value = isAChatwootInstance.value;
|
||||
});
|
||||
|
||||
const resizeContainers = () => {
|
||||
isLoading.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="relative w-full h-full min-h-screen flex items-center justify-center bg-cover bg-center bg-no-repeat p-4"
|
||||
:style="{ backgroundImage: `url(${signupBg})` }"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-n-gray-12/60 dark:bg-n-gray-1/80 backdrop-blur-sm"
|
||||
/>
|
||||
<div
|
||||
v-show="!isLoading"
|
||||
class="relative flex max-w-[960px] bg-white dark:bg-n-solid-2 rounded-lg outline outline-1 outline-n-container shadow-sm"
|
||||
:class="{ 'w-auto xl:w-full': isAChatwootInstance }"
|
||||
>
|
||||
<div class="flex-1 flex items-center justify-center py-10 px-10">
|
||||
<div class="max-w-[420px] w-full">
|
||||
<div class="mb-6">
|
||||
<img
|
||||
:src="globalConfig.logo"
|
||||
:alt="globalConfig.installationName"
|
||||
class="block w-auto h-7 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
v-if="globalConfig.logoDark"
|
||||
:src="globalConfig.logoDark"
|
||||
:alt="globalConfig.installationName"
|
||||
class="hidden w-auto h-7 dark:block"
|
||||
/>
|
||||
<h2 class="mt-6 text-2xl font-semibold text-n-slate-12">
|
||||
{{
|
||||
isAChatwootInstance
|
||||
? $t('REGISTER.GET_STARTED')
|
||||
: $t('REGISTER.TRY_WOOT')
|
||||
}}
|
||||
</h2>
|
||||
<p class="mt-2 text-sm text-n-slate-11">
|
||||
{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}{{ ' '
|
||||
}}<router-link
|
||||
class="text-n-blue-10 font-medium hover:text-n-blue-11"
|
||||
to="/app/login"
|
||||
>
|
||||
{{ $t('LOGIN.SUBMIT') }}
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
<SignupForm />
|
||||
</div>
|
||||
</div>
|
||||
<Testimonials
|
||||
v-if="isAChatwootInstance"
|
||||
class="flex-1 hidden xl:flex"
|
||||
@resize-containers="resizeContainers"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-show="isLoading"
|
||||
class="relative flex items-center justify-center w-full h-full"
|
||||
>
|
||||
<Spinner color-scheme="primary" size="" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,188 @@
|
||||
<script setup>
|
||||
import { ref, computed, reactive } from 'vue';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, minLength, email } from '@vuelidate/validators';
|
||||
import { useStore } from 'vuex';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
|
||||
import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
|
||||
import FormInput from '../../../../../components/Form/Input.vue';
|
||||
import NextButton from 'dashboard/components-next/button/Button.vue';
|
||||
import PasswordRequirements from './PasswordRequirements.vue';
|
||||
import { isValidPassword } from 'shared/helpers/Validators';
|
||||
import GoogleOAuthButton from '../../../../../components/GoogleOauth/Button.vue';
|
||||
import { register } from '../../../../../api/auth';
|
||||
import * as CompanyEmailValidator from 'company-email-validator';
|
||||
|
||||
const MIN_PASSWORD_LENGTH = 6;
|
||||
|
||||
const store = useStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const hCaptcha = ref(null);
|
||||
const isPasswordFocused = ref(false);
|
||||
const isSignupInProgress = ref(false);
|
||||
|
||||
const credentials = reactive({
|
||||
email: '',
|
||||
password: '',
|
||||
hCaptchaClientResponse: '',
|
||||
});
|
||||
|
||||
const rules = {
|
||||
credentials: {
|
||||
email: {
|
||||
required,
|
||||
email,
|
||||
businessEmailValidator(value) {
|
||||
return CompanyEmailValidator.isCompanyEmail(value);
|
||||
},
|
||||
},
|
||||
password: {
|
||||
required,
|
||||
isValidPassword,
|
||||
minLength: minLength(MIN_PASSWORD_LENGTH),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const v$ = useVuelidate(rules, { credentials });
|
||||
|
||||
const globalConfig = computed(() => store.getters['globalConfig/get']);
|
||||
|
||||
const termsLink = computed(() =>
|
||||
t('REGISTER.TERMS_ACCEPT')
|
||||
.replace('https://www.chatwoot.com/terms', globalConfig.value.termsURL)
|
||||
.replace(
|
||||
'https://www.chatwoot.com/privacy-policy',
|
||||
globalConfig.value.privacyURL
|
||||
)
|
||||
);
|
||||
|
||||
const allowedLoginMethods = computed(
|
||||
() => window.chatwootConfig.allowedLoginMethods || ['email']
|
||||
);
|
||||
|
||||
const showGoogleOAuth = computed(
|
||||
() =>
|
||||
allowedLoginMethods.value.includes('google_oauth') &&
|
||||
Boolean(window.chatwootConfig.googleOAuthClientId)
|
||||
);
|
||||
|
||||
const isFormValid = computed(() => !v$.value.$invalid);
|
||||
|
||||
const performRegistration = async () => {
|
||||
isSignupInProgress.value = true;
|
||||
try {
|
||||
await register(credentials);
|
||||
window.location = DEFAULT_REDIRECT_URL;
|
||||
} catch (error) {
|
||||
const errorMessage = error?.message || t('REGISTER.API.ERROR_MESSAGE');
|
||||
if (globalConfig.value.hCaptchaSiteKey) {
|
||||
hCaptcha.value.reset();
|
||||
credentials.hCaptchaClientResponse = '';
|
||||
}
|
||||
useAlert(errorMessage);
|
||||
} finally {
|
||||
isSignupInProgress.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
if (isSignupInProgress.value) return;
|
||||
v$.value.$touch();
|
||||
if (v$.value.$invalid) return;
|
||||
isSignupInProgress.value = true;
|
||||
if (globalConfig.value.hCaptchaSiteKey) {
|
||||
hCaptcha.value.execute();
|
||||
} else {
|
||||
performRegistration();
|
||||
}
|
||||
};
|
||||
|
||||
const onRecaptchaVerified = token => {
|
||||
credentials.hCaptchaClientResponse = token;
|
||||
performRegistration();
|
||||
};
|
||||
|
||||
const onCaptchaError = () => {
|
||||
isSignupInProgress.value = false;
|
||||
credentials.hCaptchaClientResponse = '';
|
||||
hCaptcha.value.reset();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-1">
|
||||
<form class="space-y-3" @submit.prevent="submit">
|
||||
<FormInput
|
||||
v-model="credentials.email"
|
||||
type="email"
|
||||
name="email_address"
|
||||
:class="{ error: v$.credentials.email.$error }"
|
||||
:label="$t('REGISTER.EMAIL.LABEL')"
|
||||
:placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.email.$error"
|
||||
:error-message="$t('REGISTER.EMAIL.ERROR')"
|
||||
@blur="v$.credentials.email.$touch"
|
||||
/>
|
||||
<div class="relative">
|
||||
<FormInput
|
||||
v-model="credentials.password"
|
||||
type="password"
|
||||
name="password"
|
||||
:class="{ error: v$.credentials.password.$error }"
|
||||
:label="$t('LOGIN.PASSWORD.LABEL')"
|
||||
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.password.$error"
|
||||
@focus="isPasswordFocused = true"
|
||||
@blur="
|
||||
isPasswordFocused = false;
|
||||
v$.credentials.password.$touch();
|
||||
"
|
||||
/>
|
||||
<Transition
|
||||
enter-active-class="transition duration-200 ease-out origin-left"
|
||||
enter-from-class="opacity-0 scale-90 translate-x-1"
|
||||
enter-to-class="opacity-100 scale-100 translate-x-0"
|
||||
leave-active-class="transition duration-150 ease-in origin-left"
|
||||
leave-from-class="opacity-100 scale-100 translate-x-0"
|
||||
leave-to-class="opacity-0 scale-90 translate-x-1"
|
||||
>
|
||||
<PasswordRequirements
|
||||
v-if="isPasswordFocused"
|
||||
:password="credentials.password"
|
||||
/>
|
||||
</Transition>
|
||||
</div>
|
||||
<VueHcaptcha
|
||||
v-if="globalConfig.hCaptchaSiteKey"
|
||||
ref="hCaptcha"
|
||||
size="invisible"
|
||||
:sitekey="globalConfig.hCaptchaSiteKey"
|
||||
@verify="onRecaptchaVerified"
|
||||
@error="onCaptchaError"
|
||||
@expired="onCaptchaError"
|
||||
@challenge-expired="onCaptchaError"
|
||||
@closed="onCaptchaError"
|
||||
/>
|
||||
<NextButton
|
||||
lg
|
||||
type="submit"
|
||||
data-testid="submit_button"
|
||||
class="w-full font-medium"
|
||||
:label="$t('REGISTER.SUBMIT')"
|
||||
:disabled="isSignupInProgress || !isFormValid"
|
||||
:is-loading="isSignupInProgress"
|
||||
/>
|
||||
</form>
|
||||
<GoogleOAuthButton v-if="showGoogleOAuth" class="mt-3">
|
||||
{{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
|
||||
</GoogleOAuthButton>
|
||||
<p
|
||||
class="text-sm mt-5 mb-0 text-n-slate-11 [&>a]:text-n-blue-10 [&>a]:font-medium [&>a]:hover:text-n-blue-11"
|
||||
v-html="termsLink"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,69 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
password: { type: String, default: '' },
|
||||
});
|
||||
const MIN_PASSWORD_LENGTH = 6;
|
||||
const SPECIAL_CHAR_REGEX = /[!@#$%^&*()_+\-=[\]{}|'"/\\.,`<>:;?~]/;
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const requirements = computed(() => {
|
||||
const password = props.password || '';
|
||||
return [
|
||||
{
|
||||
id: 'length',
|
||||
met: password.length >= MIN_PASSWORD_LENGTH,
|
||||
label: t('REGISTER.PASSWORD.REQUIREMENTS_LENGTH', {
|
||||
min: MIN_PASSWORD_LENGTH,
|
||||
}),
|
||||
},
|
||||
{
|
||||
id: 'uppercase',
|
||||
met: /[A-Z]/.test(password),
|
||||
label: t('REGISTER.PASSWORD.REQUIREMENTS_UPPERCASE'),
|
||||
},
|
||||
{
|
||||
id: 'lowercase',
|
||||
met: /[a-z]/.test(password),
|
||||
label: t('REGISTER.PASSWORD.REQUIREMENTS_LOWERCASE'),
|
||||
},
|
||||
{
|
||||
id: 'number',
|
||||
met: /[0-9]/.test(password),
|
||||
label: t('REGISTER.PASSWORD.REQUIREMENTS_NUMBER'),
|
||||
},
|
||||
{
|
||||
id: 'special',
|
||||
met: SPECIAL_CHAR_REGEX.test(password),
|
||||
label: t('REGISTER.PASSWORD.REQUIREMENTS_SPECIAL'),
|
||||
},
|
||||
];
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="absolute top-0 z-50 w-64 text-xs rounded-lg px-4 py-3 bg-white dark:bg-n-solid-3 shadow-lg outline outline-1 outline-n-weak start-full ms-4"
|
||||
>
|
||||
<ul role="list" class="space-y-1.5">
|
||||
<li
|
||||
v-for="item in requirements"
|
||||
:key="item.id"
|
||||
class="inline-flex gap-1.5 items-start"
|
||||
>
|
||||
<Icon
|
||||
class="flex-none flex-shrink-0 w-3 mt-0.5"
|
||||
:icon="item.met ? 'i-lucide-circle-check-big' : 'i-lucide-circle'"
|
||||
:class="item.met ? 'text-n-teal-10' : 'text-n-slate-10'"
|
||||
/>
|
||||
<span :class="item.met ? 'text-n-slate-11' : 'text-n-slate-10'">
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,48 @@
|
||||
<script setup>
|
||||
import { ref, onBeforeMount } from 'vue';
|
||||
import TestimonialCard from './TestimonialCard.vue';
|
||||
import { getTestimonialContent } from '../../../../../api/testimonials';
|
||||
|
||||
const emit = defineEmits(['resizeContainers']);
|
||||
|
||||
const testimonial = ref(null);
|
||||
|
||||
const fetchTestimonials = async () => {
|
||||
try {
|
||||
const { data } = await getTestimonialContent();
|
||||
if (data.length) {
|
||||
testimonial.value = data[Math.floor(Math.random() * data.length)];
|
||||
}
|
||||
} catch {
|
||||
// Ignoring the error as the UI wouldn't break
|
||||
} finally {
|
||||
emit('resizeContainers', !!testimonial.value);
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
fetchTestimonials();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="relative flex-1 flex flex-col items-start justify-center bg-n-alpha-black2 dark:bg-n-solid-3 px-12 py-14 rounded-e-lg"
|
||||
>
|
||||
<TestimonialCard
|
||||
v-if="testimonial"
|
||||
:review-content="testimonial.authorReview"
|
||||
:author-image="testimonial.authorImage"
|
||||
:author-name="testimonial.authorName"
|
||||
:author-designation="testimonial.authorCompany"
|
||||
/>
|
||||
<div class="absolute bottom-8 right-8 grid grid-cols-3 gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-n-gray-5" />
|
||||
<span class="w-2 h-2 rounded-full bg-n-gray-5" />
|
||||
<span class="w-2 h-2 rounded-full bg-n-gray-5" />
|
||||
<span class="w-2 h-2 rounded-full bg-n-gray-5" />
|
||||
<span class="w-2 h-2 rounded-full bg-n-gray-5" />
|
||||
<span class="w-2 h-2 rounded-full bg-n-gray-5" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
reviewContent: { type: String, default: '' },
|
||||
authorImage: { type: String, default: '' },
|
||||
authorName: { type: String, default: '' },
|
||||
authorDesignation: { type: String, default: '' },
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col items-start">
|
||||
<svg
|
||||
class="w-10 h-10 text-n-slate-7 mb-6"
|
||||
viewBox="0 0 40 40"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M10.7 28.3c-1.4-1.2-2.1-3-2.1-5.4 0-2.3.8-4.6 2.4-6.8 1.6-2.2 3.8-3.9 6.6-5.1l1.2 2.1c-2.2 1.2-3.7 2.4-4.6 3.6-.9 1.2-1.3 2.5-1.2 3.8.3-.1.7-.2 1.2-.2 1.3 0 2.4.4 3.3 1.3.9.9 1.3 2 1.3 3.3 0 1.4-.5 2.5-1.4 3.4-.9.9-2.1 1.4-3.5 1.4-1.5 0-2.7-.5-3.2-1.4zm15 0c-1.4-1.2-2.1-3-2.1-5.4 0-2.3.8-4.6 2.4-6.8 1.6-2.2 3.8-3.9 6.6-5.1l1.2 2.1c-2.2 1.2-3.7 2.4-4.6 3.6-.9 1.2-1.3 2.5-1.2 3.8.3-.1.7-.2 1.2-.2 1.3 0 2.4.4 3.3 1.3.9.9 1.3 2 1.3 3.3 0 1.4-.5 2.5-1.4 3.4-.9.9-2.1 1.4-3.5 1.4-1.5 0-2.7-.5-3.2-1.4z"
|
||||
/>
|
||||
</svg>
|
||||
<p
|
||||
class="text-lg text-n-slate-12 leading-relaxed whitespace-pre-line tracking-tight"
|
||||
>
|
||||
{{ reviewContent }}
|
||||
</p>
|
||||
<div class="flex items-center mt-8">
|
||||
<img
|
||||
:src="authorImage"
|
||||
:alt="authorName"
|
||||
class="w-11 h-11 rounded-full object-cover"
|
||||
/>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-n-slate-12">
|
||||
{{ authorName }}
|
||||
</div>
|
||||
<div class="text-sm text-n-slate-10">{{ authorDesignation }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
24
research/chatwoot/app/javascript/v3/views/index.js
Normal file
24
research/chatwoot/app/javascript/v3/views/index.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
|
||||
import routes from './routes';
|
||||
import AnalyticsHelper from 'dashboard/helper/AnalyticsHelper';
|
||||
import { validateRouteAccess } from '../helpers/RouteHelper';
|
||||
|
||||
export const router = createRouter({ history: createWebHistory(), routes });
|
||||
|
||||
const sensitiveRouteNames = ['auth_password_edit'];
|
||||
|
||||
export const initalizeRouter = () => {
|
||||
router.beforeEach((to, _, next) => {
|
||||
if (!sensitiveRouteNames.includes(to.name)) {
|
||||
AnalyticsHelper.page(to.name || '', {
|
||||
path: to.path,
|
||||
name: to.name,
|
||||
});
|
||||
}
|
||||
|
||||
return validateRouteAccess(to, next, window.chatwootConfig);
|
||||
});
|
||||
};
|
||||
|
||||
export default router;
|
||||
341
research/chatwoot/app/javascript/v3/views/login/Index.vue
Normal file
341
research/chatwoot/app/javascript/v3/views/login/Index.vue
Normal file
@@ -0,0 +1,341 @@
|
||||
<script>
|
||||
// utils and composables
|
||||
import { login } from '../../api/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { required, email } from '@vuelidate/validators';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { SESSION_STORAGE_KEYS } from 'dashboard/constants/sessionStorage';
|
||||
import SessionStorage from 'shared/helpers/sessionStorage';
|
||||
import { useBranding } from 'shared/composables/useBranding';
|
||||
|
||||
// components
|
||||
import SimpleDivider from '../../components/Divider/SimpleDivider.vue';
|
||||
import FormInput from '../../components/Form/Input.vue';
|
||||
import GoogleOAuthButton from '../../components/GoogleOauth/Button.vue';
|
||||
import Spinner from 'shared/components/Spinner.vue';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import NextButton from 'dashboard/components-next/button/Button.vue';
|
||||
import MfaVerification from 'dashboard/components/auth/MfaVerification.vue';
|
||||
|
||||
const ERROR_MESSAGES = {
|
||||
'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
|
||||
'business-account-only': 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY',
|
||||
'saml-authentication-failed': 'LOGIN.SAML.API.ERROR_MESSAGE',
|
||||
'saml-not-enabled': 'LOGIN.SAML.API.ERROR_MESSAGE',
|
||||
};
|
||||
|
||||
const IMPERSONATION_URL_SEARCH_KEY = 'impersonation';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormInput,
|
||||
GoogleOAuthButton,
|
||||
Spinner,
|
||||
NextButton,
|
||||
SimpleDivider,
|
||||
MfaVerification,
|
||||
Icon,
|
||||
},
|
||||
props: {
|
||||
ssoAuthToken: { type: String, default: '' },
|
||||
ssoAccountId: { type: String, default: '' },
|
||||
ssoConversationId: { type: String, default: '' },
|
||||
email: { type: String, default: '' },
|
||||
authError: { type: String, default: '' },
|
||||
},
|
||||
setup() {
|
||||
const { replaceInstallationName } = useBranding();
|
||||
return {
|
||||
replaceInstallationName,
|
||||
v$: useVuelidate(),
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// We need to initialize the component with any
|
||||
// properties that will be used in it
|
||||
credentials: {
|
||||
email: '',
|
||||
password: '',
|
||||
},
|
||||
loginApi: {
|
||||
message: '',
|
||||
showLoading: false,
|
||||
hasErrored: false,
|
||||
},
|
||||
error: '',
|
||||
mfaRequired: false,
|
||||
mfaToken: null,
|
||||
};
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
credentials: {
|
||||
password: {
|
||||
required,
|
||||
},
|
||||
email: {
|
||||
required,
|
||||
email,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({ globalConfig: 'globalConfig/get' }),
|
||||
allowedLoginMethods() {
|
||||
return window.chatwootConfig.allowedLoginMethods || ['email'];
|
||||
},
|
||||
showGoogleOAuth() {
|
||||
return (
|
||||
this.allowedLoginMethods.includes('google_oauth') &&
|
||||
Boolean(window.chatwootConfig.googleOAuthClientId)
|
||||
);
|
||||
},
|
||||
showSignupLink() {
|
||||
return window.chatwootConfig.signupEnabled === 'true';
|
||||
},
|
||||
showSamlLogin() {
|
||||
return this.allowedLoginMethods.includes('saml');
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.ssoAuthToken) {
|
||||
this.submitLogin();
|
||||
}
|
||||
if (this.authError) {
|
||||
const messageKey = ERROR_MESSAGES[this.authError] ?? 'LOGIN.API.UNAUTH';
|
||||
// Use a method to get the translated text to avoid dynamic key warning
|
||||
const translatedMessage = this.getTranslatedMessage(messageKey);
|
||||
useAlert(translatedMessage);
|
||||
// wait for idle state
|
||||
this.requestIdleCallbackPolyfill(() => {
|
||||
// Remove the error query param from the url
|
||||
const { query } = this.$route;
|
||||
this.$router.replace({ query: { ...query, error: undefined } });
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTranslatedMessage(key) {
|
||||
// Avoid dynamic key warning by handling each case explicitly
|
||||
switch (key) {
|
||||
case 'LOGIN.OAUTH.NO_ACCOUNT_FOUND':
|
||||
return this.$t('LOGIN.OAUTH.NO_ACCOUNT_FOUND');
|
||||
case 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY':
|
||||
return this.$t('LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY');
|
||||
case 'LOGIN.API.UNAUTH':
|
||||
default:
|
||||
return this.$t('LOGIN.API.UNAUTH');
|
||||
}
|
||||
},
|
||||
// TODO: Remove this when Safari gets wider support
|
||||
// Ref: https://caniuse.com/requestidlecallback
|
||||
//
|
||||
requestIdleCallbackPolyfill(callback) {
|
||||
if (window.requestIdleCallback) {
|
||||
window.requestIdleCallback(callback);
|
||||
} else {
|
||||
// Fallback for safari
|
||||
// Using a delay of 0 allows the callback to be executed asynchronously
|
||||
// in the next available event loop iteration, similar to requestIdleCallback
|
||||
setTimeout(callback, 0);
|
||||
}
|
||||
},
|
||||
showAlertMessage(message) {
|
||||
// Reset loading, current selected agent
|
||||
this.loginApi.showLoading = false;
|
||||
this.loginApi.message = message;
|
||||
useAlert(this.loginApi.message);
|
||||
},
|
||||
handleImpersonation() {
|
||||
// Detects impersonation mode via URL and sets a session flag to prevent user settings changes during impersonation.
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const impersonation = urlParams.get(IMPERSONATION_URL_SEARCH_KEY);
|
||||
if (impersonation) {
|
||||
SessionStorage.set(SESSION_STORAGE_KEYS.IMPERSONATION_USER, true);
|
||||
}
|
||||
},
|
||||
submitLogin() {
|
||||
this.loginApi.hasErrored = false;
|
||||
this.loginApi.showLoading = true;
|
||||
|
||||
const credentials = {
|
||||
email: this.email
|
||||
? decodeURIComponent(this.email)
|
||||
: this.credentials.email,
|
||||
password: this.credentials.password,
|
||||
sso_auth_token: this.ssoAuthToken,
|
||||
ssoAccountId: this.ssoAccountId,
|
||||
ssoConversationId: this.ssoConversationId,
|
||||
};
|
||||
|
||||
login(credentials)
|
||||
.then(result => {
|
||||
// Check if MFA is required
|
||||
if (result?.mfaRequired) {
|
||||
this.loginApi.showLoading = false;
|
||||
this.mfaRequired = true;
|
||||
this.mfaToken = result.mfaToken;
|
||||
return;
|
||||
}
|
||||
|
||||
this.handleImpersonation();
|
||||
this.showAlertMessage(this.$t('LOGIN.API.SUCCESS_MESSAGE'));
|
||||
})
|
||||
.catch(response => {
|
||||
// Reset URL Params if the authentication is invalid
|
||||
if (this.email) {
|
||||
window.location = '/app/login';
|
||||
}
|
||||
this.loginApi.hasErrored = true;
|
||||
this.showAlertMessage(
|
||||
response?.message || this.$t('LOGIN.API.UNAUTH')
|
||||
);
|
||||
});
|
||||
},
|
||||
submitFormLogin() {
|
||||
if (this.v$.credentials.email.$invalid && !this.email) {
|
||||
this.showAlertMessage(this.$t('LOGIN.EMAIL.ERROR'));
|
||||
return;
|
||||
}
|
||||
|
||||
this.submitLogin();
|
||||
},
|
||||
handleMfaVerified() {
|
||||
// MFA verification successful, continue with login
|
||||
this.handleImpersonation();
|
||||
window.location = '/app';
|
||||
},
|
||||
handleMfaCancel() {
|
||||
// User cancelled MFA, reset state
|
||||
this.mfaRequired = false;
|
||||
this.mfaToken = null;
|
||||
this.credentials.password = '';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main
|
||||
class="flex flex-col w-full min-h-screen py-20 bg-n-brand/5 dark:bg-n-background sm:px-6 lg:px-8"
|
||||
>
|
||||
<section class="max-w-5xl mx-auto">
|
||||
<img
|
||||
:src="globalConfig.logo"
|
||||
:alt="globalConfig.installationName"
|
||||
class="block w-auto h-8 mx-auto dark:hidden"
|
||||
/>
|
||||
<img
|
||||
v-if="globalConfig.logoDark"
|
||||
:src="globalConfig.logoDark"
|
||||
:alt="globalConfig.installationName"
|
||||
class="hidden w-auto h-8 mx-auto dark:block"
|
||||
/>
|
||||
<h2 class="mt-6 text-3xl font-medium text-center text-n-slate-12">
|
||||
{{ replaceInstallationName($t('LOGIN.TITLE')) }}
|
||||
</h2>
|
||||
<p v-if="showSignupLink" class="mt-3 text-sm text-center text-n-slate-11">
|
||||
{{ $t('COMMON.OR') }}
|
||||
<router-link to="auth/signup" class="lowercase text-link text-n-brand">
|
||||
{{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
|
||||
</router-link>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- MFA Verification Section -->
|
||||
<section v-if="mfaRequired" class="mt-11">
|
||||
<MfaVerification
|
||||
:mfa-token="mfaToken"
|
||||
@verified="handleMfaVerified"
|
||||
@cancel="handleMfaCancel"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<!-- Regular Login Section -->
|
||||
<section
|
||||
v-else
|
||||
class="bg-white shadow sm:mx-auto mt-11 sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
|
||||
:class="{
|
||||
'mb-8 mt-15': !showGoogleOAuth,
|
||||
'animate-wiggle': loginApi.hasErrored,
|
||||
}"
|
||||
>
|
||||
<div v-if="!email">
|
||||
<div class="flex flex-col gap-4">
|
||||
<GoogleOAuthButton v-if="showGoogleOAuth" />
|
||||
<div v-if="showSamlLogin" class="text-center">
|
||||
<router-link
|
||||
to="/app/login/sso"
|
||||
class="inline-flex justify-center w-full px-4 py-3 items-center bg-n-background dark:bg-n-solid-3 rounded-md shadow-sm ring-1 ring-inset ring-n-container dark:ring-n-container focus:outline-offset-0 hover:bg-n-alpha-2 dark:hover:bg-n-alpha-2"
|
||||
>
|
||||
<Icon
|
||||
icon="i-lucide-lock-keyhole"
|
||||
class="size-5 text-n-slate-11"
|
||||
/>
|
||||
<span class="ml-2 text-base font-medium text-n-slate-12">
|
||||
{{ $t('LOGIN.SAML.LABEL') }}
|
||||
</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<SimpleDivider
|
||||
v-if="showGoogleOAuth || showSamlLogin"
|
||||
:label="$t('COMMON.OR')"
|
||||
class="uppercase"
|
||||
/>
|
||||
</div>
|
||||
<form class="space-y-5" @submit.prevent="submitFormLogin">
|
||||
<FormInput
|
||||
v-model="credentials.email"
|
||||
name="email_address"
|
||||
type="text"
|
||||
data-testid="email_input"
|
||||
:tabindex="1"
|
||||
required
|
||||
:label="$t('LOGIN.EMAIL.LABEL')"
|
||||
:placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.email.$error"
|
||||
@input="v$.credentials.email.$touch"
|
||||
/>
|
||||
<FormInput
|
||||
v-model="credentials.password"
|
||||
type="password"
|
||||
name="password"
|
||||
data-testid="password_input"
|
||||
required
|
||||
:tabindex="2"
|
||||
:label="$t('LOGIN.PASSWORD.LABEL')"
|
||||
:placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.password.$error"
|
||||
@input="v$.credentials.password.$touch"
|
||||
>
|
||||
<p v-if="!globalConfig.disableUserProfileUpdate">
|
||||
<router-link
|
||||
to="auth/reset/password"
|
||||
class="text-sm text-link"
|
||||
tabindex="4"
|
||||
>
|
||||
{{ $t('LOGIN.FORGOT_PASSWORD') }}
|
||||
</router-link>
|
||||
</p>
|
||||
</FormInput>
|
||||
<NextButton
|
||||
lg
|
||||
type="submit"
|
||||
data-testid="submit_button"
|
||||
class="w-full"
|
||||
:tabindex="3"
|
||||
:label="$t('LOGIN.SUBMIT')"
|
||||
:disabled="loginApi.showLoading"
|
||||
:is-loading="loginApi.showLoading"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div v-else class="flex items-center justify-center">
|
||||
<Spinner color-scheme="primary" size="" />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
132
research/chatwoot/app/javascript/v3/views/login/Saml.vue
Normal file
132
research/chatwoot/app/javascript/v3/views/login/Saml.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<script setup>
|
||||
import { ref, nextTick, computed, onMounted } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { required, email } from '@vuelidate/validators';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
|
||||
// components
|
||||
import FormInput from '../../components/Form/Input.vue';
|
||||
import NextButton from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const props = defineProps({
|
||||
authError: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
target: {
|
||||
type: String,
|
||||
default: 'web',
|
||||
},
|
||||
});
|
||||
|
||||
const store = useStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const credentials = ref({
|
||||
email: '',
|
||||
});
|
||||
|
||||
const loginApi = ref({
|
||||
showLoading: false,
|
||||
hasErrored: false,
|
||||
});
|
||||
|
||||
const handleAuthError = () => {
|
||||
if (!props.authError) {
|
||||
return;
|
||||
}
|
||||
|
||||
const translatedMessage = t('LOGIN.SAML.API.ERROR_MESSAGE');
|
||||
useAlert(translatedMessage);
|
||||
loginApi.value.hasErrored = true;
|
||||
};
|
||||
|
||||
const validations = {
|
||||
credentials: {
|
||||
email: {
|
||||
required,
|
||||
email,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const v$ = useVuelidate(validations, { credentials });
|
||||
|
||||
const globalConfig = computed(() => store.getters['globalConfig/get']);
|
||||
const csrfToken = ref('');
|
||||
|
||||
onMounted(async () => {
|
||||
csrfToken.value =
|
||||
document
|
||||
.querySelector('meta[name="csrf-token"]')
|
||||
?.getAttribute('content') || '';
|
||||
|
||||
await nextTick(handleAuthError);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main
|
||||
class="flex flex-col w-full min-h-screen py-20 bg-n-brand/5 dark:bg-n-background sm:px-6 lg:px-8"
|
||||
>
|
||||
<section class="max-w-5xl mx-auto">
|
||||
<img
|
||||
:src="globalConfig.logo"
|
||||
:alt="globalConfig.installationName"
|
||||
class="block w-auto h-8 mx-auto dark:hidden"
|
||||
/>
|
||||
<img
|
||||
v-if="globalConfig.logoDark"
|
||||
:src="globalConfig.logoDark"
|
||||
:alt="globalConfig.installationName"
|
||||
class="hidden w-auto h-8 mx-auto dark:block"
|
||||
/>
|
||||
<h2 class="mt-6 text-3xl font-medium text-center text-n-slate-12">
|
||||
{{ t('LOGIN.SAML.TITLE') }}
|
||||
</h2>
|
||||
</section>
|
||||
<section
|
||||
class="bg-white shadow sm:mx-auto mt-11 sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
|
||||
:class="{
|
||||
'animate-wiggle': loginApi.hasErrored,
|
||||
}"
|
||||
>
|
||||
<form class="space-y-5" method="POST" action="/api/v1/auth/saml_login">
|
||||
<FormInput
|
||||
v-model="credentials.email"
|
||||
name="email"
|
||||
type="text"
|
||||
:tabindex="1"
|
||||
required
|
||||
:label="t('LOGIN.SAML.WORK_EMAIL.LABEL')"
|
||||
:placeholder="t('LOGIN.SAML.WORK_EMAIL.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.email.$error"
|
||||
@input="v$.credentials.email.$touch"
|
||||
/>
|
||||
<input
|
||||
type="hidden"
|
||||
class="h-0"
|
||||
name="authenticity_token"
|
||||
:value="csrfToken"
|
||||
/>
|
||||
<input type="hidden" class="h-0" name="target" :value="target" />
|
||||
<NextButton
|
||||
lg
|
||||
type="submit"
|
||||
class="w-full"
|
||||
:tabindex="2"
|
||||
:label="t('LOGIN.SAML.SUBMIT')"
|
||||
:disabled="loginApi.showLoading"
|
||||
:is-loading="loginApi.showLoading"
|
||||
/>
|
||||
</form>
|
||||
</section>
|
||||
<p class="mt-6 text-sm text-center text-n-slate-11">
|
||||
<router-link to="/app/login" class="text-link text-n-brand">
|
||||
{{ t('LOGIN.SAML.BACK_TO_LOGIN') }}
|
||||
</router-link>
|
||||
</p>
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,55 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'OnboardingStep',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
isActive: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isComplete: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center gap-2 p-2 text-lg font-bold mb-6 relative before:absolute before:h-10 before:w-[1px] before:bg-n-slate-3 before:-bottom-8 before:left-[24px] hide-before-of-last"
|
||||
:class="{
|
||||
'text-n-brand ': isActive,
|
||||
'text-n-slate-6': !isActive || isComplete,
|
||||
'before:bg-n-brand': !isActive && isComplete,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="grid w-8 h-8 border border-solid rounded-full place-content-center"
|
||||
:class="{
|
||||
'border-n-brand': !isActive || isComplete,
|
||||
'border-n-weak': !isActive && !isComplete,
|
||||
'text-n-brand': isComplete,
|
||||
}"
|
||||
>
|
||||
<fluent-icon v-if="isComplete" size="20" icon="checkmark" />
|
||||
<fluent-icon v-else size="20" :icon="icon" />
|
||||
</div>
|
||||
<span>
|
||||
{{ title }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hide-before-of-last:last-child::before {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
67
research/chatwoot/app/javascript/v3/views/routes.js
Normal file
67
research/chatwoot/app/javascript/v3/views/routes.js
Normal file
@@ -0,0 +1,67 @@
|
||||
import { frontendURL } from 'dashboard/helper/URLHelper';
|
||||
|
||||
import Login from './login/Index.vue';
|
||||
import SamlLogin from './login/Saml.vue';
|
||||
import Signup from './auth/signup/Index.vue';
|
||||
import ResetPassword from './auth/reset/password/Index.vue';
|
||||
import Confirmation from './auth/confirmation/Index.vue';
|
||||
import PasswordEdit from './auth/password/Edit.vue';
|
||||
|
||||
export default [
|
||||
{
|
||||
path: frontendURL('login'),
|
||||
name: 'login',
|
||||
component: Login,
|
||||
props: route => ({
|
||||
config: route.query.config,
|
||||
email: route.query.email,
|
||||
ssoAuthToken: route.query.sso_auth_token,
|
||||
ssoAccountId: route.query.sso_account_id,
|
||||
ssoConversationId: route.query.sso_conversation_id,
|
||||
authError: route.query.error,
|
||||
}),
|
||||
},
|
||||
{
|
||||
path: frontendURL('login/sso'),
|
||||
name: 'sso_login',
|
||||
component: SamlLogin,
|
||||
meta: { requireEnterprise: true },
|
||||
props: route => ({
|
||||
authError: route.query.error,
|
||||
target: route.query.target,
|
||||
}),
|
||||
},
|
||||
{
|
||||
path: frontendURL('auth/signup'),
|
||||
name: 'auth_signup',
|
||||
component: Signup,
|
||||
meta: { requireSignupEnabled: true },
|
||||
},
|
||||
{
|
||||
path: frontendURL('auth/confirmation'),
|
||||
name: 'auth_confirmation',
|
||||
component: Confirmation,
|
||||
meta: { ignoreSession: true },
|
||||
props: route => ({
|
||||
config: route.query.config,
|
||||
confirmationToken: route.query.confirmation_token,
|
||||
redirectUrl: route.query.route_url,
|
||||
}),
|
||||
},
|
||||
{
|
||||
path: frontendURL('auth/password/edit'),
|
||||
name: 'auth_password_edit',
|
||||
component: PasswordEdit,
|
||||
meta: { ignoreSession: true },
|
||||
props: route => ({
|
||||
config: route.query.config,
|
||||
resetPasswordToken: route.query.reset_password_token,
|
||||
redirectUrl: route.query.route_url,
|
||||
}),
|
||||
},
|
||||
{
|
||||
path: frontendURL('auth/reset/password'),
|
||||
name: 'auth_reset_password',
|
||||
component: ResetPassword,
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user