chore: Move auth components to Composition API
This commit is contained in:
iamsivin
+40
-39
@@ -1,46 +1,47 @@
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, onMounted, getCurrentInstance } from 'vue';
|
||||
import SnackbarContainer from './components/SnackBar/Container.vue';
|
||||
|
||||
export default {
|
||||
components: { SnackbarContainer },
|
||||
data() {
|
||||
return { theme: 'light' };
|
||||
},
|
||||
mounted() {
|
||||
// Add background color class once - it automatically handles light/dark modes
|
||||
document.documentElement.classList.add('bg-n-background');
|
||||
this.setColorTheme();
|
||||
this.listenToThemeChanges();
|
||||
this.setLocale(window.chatwootConfig.selectedLocale);
|
||||
},
|
||||
methods: {
|
||||
setColorTheme() {
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
this.theme = 'dark';
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
this.theme = 'light';
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
},
|
||||
listenToThemeChanges() {
|
||||
const mql = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const theme = ref('light');
|
||||
|
||||
mql.onchange = e => {
|
||||
if (e.matches) {
|
||||
this.theme = 'dark';
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
this.theme = 'light';
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
};
|
||||
},
|
||||
setLocale(locale) {
|
||||
this.$root.$i18n.locale = locale;
|
||||
},
|
||||
},
|
||||
const setColorTheme = () => {
|
||||
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
theme.value = 'dark';
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
theme.value = 'light';
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
};
|
||||
|
||||
const listenToThemeChanges = () => {
|
||||
const mql = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
mql.onchange = e => {
|
||||
if (e.matches) {
|
||||
theme.value = 'dark';
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
theme.value = 'light';
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const setLocale = locale => {
|
||||
const instance = getCurrentInstance();
|
||||
if (instance) {
|
||||
instance.appContext.config.globalProperties.$i18n.locale = locale;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// Add background color class once - it automatically handles light/dark modes
|
||||
document.documentElement.classList.add('bg-n-background');
|
||||
setColorTheme();
|
||||
listenToThemeChanges();
|
||||
setLocale(window.chatwootConfig.selectedLocale);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,32 +1,30 @@
|
||||
<script>
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
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;
|
||||
}
|
||||
},
|
||||
const props = defineProps({
|
||||
confirmationToken: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const confirmToken = async () => {
|
||||
try {
|
||||
await verifyPasswordToken({
|
||||
confirmationToken: props.confirmationToken,
|
||||
});
|
||||
window.location = DEFAULT_REDIRECT_URL;
|
||||
} catch (error) {
|
||||
window.location = DEFAULT_REDIRECT_URL;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
confirmToken();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,88 +1,72 @@
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, minLength } from '@vuelidate/validators';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import FormInput from 'dashboard/components-next/input/Input.vue';
|
||||
import Input from 'dashboard/components-next/input/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;
|
||||
},
|
||||
const props = defineProps({
|
||||
resetPasswordToken: { type: String, default: '' },
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const credentials = reactive({
|
||||
confirmPassword: '',
|
||||
password: '',
|
||||
});
|
||||
|
||||
const showLoading = ref(false);
|
||||
|
||||
const rules = computed(() => ({
|
||||
credentials: {
|
||||
password: {
|
||||
required,
|
||||
minLength: minLength(6),
|
||||
},
|
||||
confirmPassword: {
|
||||
required,
|
||||
minLength: minLength(6),
|
||||
isEqPassword(value) {
|
||||
return value === credentials.password;
|
||||
},
|
||||
},
|
||||
},
|
||||
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')
|
||||
);
|
||||
});
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const v$ = useVuelidate(rules, { credentials });
|
||||
|
||||
const showAlertMessage = message => {
|
||||
showLoading.value = false;
|
||||
useAlert(message);
|
||||
};
|
||||
|
||||
const submitForm = async () => {
|
||||
showLoading.value = true;
|
||||
const credentialsData = {
|
||||
confirmPassword: credentials.confirmPassword,
|
||||
password: credentials.password,
|
||||
resetPasswordToken: props.resetPasswordToken,
|
||||
};
|
||||
|
||||
try {
|
||||
await setNewPassword(credentialsData);
|
||||
window.location = DEFAULT_REDIRECT_URL;
|
||||
} catch (error) {
|
||||
showAlertMessage(error?.message || t('SET_NEW_PASSWORD.API.ERROR_MESSAGE'));
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// If url opened without token, redirect to login
|
||||
if (!props.resetPasswordToken) {
|
||||
window.location = DEFAULT_REDIRECT_URL;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -100,7 +84,7 @@ export default {
|
||||
</h1>
|
||||
|
||||
<div class="space-y-6 mt-5">
|
||||
<FormInput
|
||||
<Input
|
||||
v-model="credentials.password"
|
||||
name="password"
|
||||
type="password"
|
||||
@@ -114,7 +98,7 @@ export default {
|
||||
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
|
||||
@blur="v$.credentials.password.$touch"
|
||||
/>
|
||||
<FormInput
|
||||
<Input
|
||||
v-model="credentials.confirmPassword"
|
||||
name="confirm_password"
|
||||
type="password"
|
||||
@@ -137,9 +121,9 @@ export default {
|
||||
:disabled="
|
||||
v$.credentials.password.$invalid ||
|
||||
v$.credentials.confirmPassword.$invalid ||
|
||||
newPasswordAPI.showLoading
|
||||
showLoading
|
||||
"
|
||||
:is-loading="newPasswordAPI.showLoading"
|
||||
:is-loading="showLoading"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,64 +1,54 @@
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { required, minLength, email } from '@vuelidate/validators';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { useBranding } from 'shared/composables/useBranding';
|
||||
import { resetPassword } from '../../../../api/auth';
|
||||
import FormInput from 'dashboard/components-next/input/Input.vue';
|
||||
import Input from 'dashboard/components-next/input/Input.vue';
|
||||
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);
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const { replaceInstallationName } = useBranding();
|
||||
|
||||
const credentials = reactive({ email: '' });
|
||||
const showLoading = ref(false);
|
||||
|
||||
const rules = computed(() => ({
|
||||
credentials: {
|
||||
email: {
|
||||
required,
|
||||
email,
|
||||
minLength: minLength(4),
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const v$ = useVuelidate(rules, { credentials });
|
||||
|
||||
const showAlertMessage = message => {
|
||||
showLoading.value = false;
|
||||
useAlert(message);
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
showLoading.value = true;
|
||||
|
||||
try {
|
||||
const res = await resetPassword(credentials);
|
||||
let successMessage = t('RESET_PASSWORD.API.SUCCESS_MESSAGE');
|
||||
if (res.data && res.data.message) {
|
||||
successMessage = res.data.message;
|
||||
}
|
||||
showAlertMessage(successMessage);
|
||||
} catch (error) {
|
||||
let errorMessage = t('RESET_PASSWORD.API.ERROR_MESSAGE');
|
||||
if (error?.response?.data?.message) {
|
||||
errorMessage = error.response.data.message;
|
||||
}
|
||||
showAlertMessage(errorMessage);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -81,7 +71,7 @@ export default {
|
||||
{{ replaceInstallationName($t('RESET_PASSWORD.DESCRIPTION')) }}
|
||||
</p>
|
||||
<div class="space-y-5">
|
||||
<FormInput
|
||||
<Input
|
||||
v-model="credentials.email"
|
||||
name="email_address"
|
||||
autocomplete="email"
|
||||
@@ -99,8 +89,8 @@ export default {
|
||||
data-testid="submit_button"
|
||||
class="w-full"
|
||||
:label="$t('RESET_PASSWORD.SUBMIT')"
|
||||
:disabled="v$.credentials.email.$invalid || resetPassword.showLoading"
|
||||
:is-loading="resetPassword.showLoading"
|
||||
:disabled="v$.credentials.email.$invalid || showLoading"
|
||||
:is-loading="showLoading"
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-4 -mb-1 text-sm text-n-slate-11">
|
||||
|
||||
@@ -1,38 +1,28 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
<script setup>
|
||||
import { ref, computed, onBeforeMount } from 'vue';
|
||||
import { useMapGetter } from 'dashboard/composables/store';
|
||||
import { useBranding } from 'shared/composables/useBranding';
|
||||
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,
|
||||
},
|
||||
setup() {
|
||||
const { replaceInstallationName } = useBranding();
|
||||
return { replaceInstallationName };
|
||||
},
|
||||
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;
|
||||
},
|
||||
},
|
||||
const { replaceInstallationName } = useBranding();
|
||||
|
||||
const globalConfig = useMapGetter('globalConfig/get');
|
||||
|
||||
const isLoading = ref(false);
|
||||
|
||||
const isAChatwootInstance = computed(() => {
|
||||
return globalConfig.value.installationName === 'Chatwoot';
|
||||
});
|
||||
|
||||
const resizeContainers = () => {
|
||||
isLoading.value = false;
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
isLoading.value = isAChatwootInstance.value;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -62,7 +52,7 @@ export default {
|
||||
</div>
|
||||
<SignupForm />
|
||||
<div class="px-1 text-sm text-n-slate-12">
|
||||
<span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }} </span>
|
||||
<span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
|
||||
<router-link class="text-link text-n-brand mx-1" to="/app/login">
|
||||
{{ replaceInstallationName($t('LOGIN.TITLE')) }}
|
||||
</router-link>
|
||||
|
||||
@@ -197,7 +197,7 @@ const handlePasswordBlur = () => {
|
||||
<template>
|
||||
<div class="flex-1 px-1 overflow-auto">
|
||||
<form class="space-y-3" @submit.prevent="submit">
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<Input
|
||||
v-model="credentials.fullName"
|
||||
name="full_name"
|
||||
|
||||
@@ -1,28 +1,26 @@
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, onBeforeMount } from 'vue';
|
||||
import TestimonialCard from './TestimonialCard.vue';
|
||||
import { getTestimonialContent } from '../../../../../api/testimonials';
|
||||
export default {
|
||||
components: { TestimonialCard },
|
||||
emits: ['resizeContainers'],
|
||||
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('resizeContainers', !!this.testimonials.length);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
const emit = defineEmits(['resizeContainers']);
|
||||
|
||||
const testimonials = ref([]);
|
||||
|
||||
const fetchTestimonials = async () => {
|
||||
try {
|
||||
const { data } = await getTestimonialContent();
|
||||
testimonials.value = data;
|
||||
} catch (error) {
|
||||
// Ignoring the error as the UI wouldn't break
|
||||
} finally {
|
||||
emit('resizeContainers', !!testimonials.value.length);
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
fetchTestimonials();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,24 +1,22 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
reviewContent: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
authorImage: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
authorName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
authorDesignation: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
<script setup>
|
||||
defineProps({
|
||||
reviewContent: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
};
|
||||
authorImage: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
authorName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
authorDesignation: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,24 +1,32 @@
|
||||
<script>
|
||||
// utils and composables
|
||||
import { login } from '../../api/auth';
|
||||
import { mapGetters } from 'vuex';
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, email as emailValidator } from '@vuelidate/validators';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { parseBoolean } from '@chatwoot/utils';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { required, email } from '@vuelidate/validators';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { useMapGetter } from 'dashboard/composables/store';
|
||||
import { useBranding } from 'shared/composables/useBranding';
|
||||
import { SESSION_STORAGE_KEYS } from 'dashboard/constants/sessionStorage';
|
||||
import SessionStorage from 'shared/helpers/sessionStorage';
|
||||
import { useBranding } from 'shared/composables/useBranding';
|
||||
|
||||
// components
|
||||
import { login } from '../../api/auth';
|
||||
import SimpleDivider from '../../components/Divider/SimpleDivider.vue';
|
||||
import FormInput from 'dashboard/components-next/input/Input.vue';
|
||||
import Input from 'dashboard/components-next/input/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 props = defineProps({
|
||||
ssoAuthToken: { type: String, default: '' },
|
||||
ssoAccountId: { type: String, default: '' },
|
||||
ssoConversationId: { type: String, default: '' },
|
||||
email: { type: String, default: '' },
|
||||
authError: { type: String, default: '' },
|
||||
});
|
||||
|
||||
const ERROR_MESSAGES = {
|
||||
'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
|
||||
'business-account-only': 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY',
|
||||
@@ -28,189 +36,162 @@ const ERROR_MESSAGES = {
|
||||
|
||||
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' }),
|
||||
showGoogleOAuth() {
|
||||
return Boolean(window.chatwootConfig.googleOAuthClientId);
|
||||
},
|
||||
showSignupLink() {
|
||||
return parseBoolean(window.chatwootConfig.signupEnabled);
|
||||
},
|
||||
showSamlLogin() {
|
||||
return this.globalConfig.isEnterprise;
|
||||
},
|
||||
},
|
||||
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 route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const { replaceInstallationName } = useBranding();
|
||||
|
||||
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,
|
||||
};
|
||||
const globalConfig = useMapGetter('globalConfig/get');
|
||||
|
||||
login(credentials)
|
||||
.then(result => {
|
||||
// Check if MFA is required
|
||||
if (result?.mfaRequired) {
|
||||
this.loginApi.showLoading = false;
|
||||
this.mfaRequired = true;
|
||||
this.mfaToken = result.mfaToken;
|
||||
return;
|
||||
}
|
||||
const credentials = reactive({
|
||||
email: '',
|
||||
password: '',
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
const showLoading = ref(false);
|
||||
const hasErrored = ref(false);
|
||||
const mfaRequired = ref(false);
|
||||
const mfaToken = ref(null);
|
||||
|
||||
this.submitLogin();
|
||||
const rules = computed(() => ({
|
||||
credentials: {
|
||||
password: {
|
||||
required,
|
||||
},
|
||||
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 = '';
|
||||
email: {
|
||||
required,
|
||||
email: emailValidator,
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
const v$ = useVuelidate(rules, { credentials });
|
||||
|
||||
const showGoogleOAuth = computed(() => {
|
||||
return Boolean(window.chatwootConfig.googleOAuthClientId);
|
||||
});
|
||||
|
||||
const showSignupLink = computed(() => {
|
||||
return parseBoolean(window.chatwootConfig.signupEnabled);
|
||||
});
|
||||
|
||||
const showSamlLogin = computed(() => {
|
||||
return Boolean(globalConfig.value.isEnterprise);
|
||||
});
|
||||
|
||||
const getTranslatedMessage = key => {
|
||||
// Avoid dynamic key warning by handling each case explicitly
|
||||
switch (key) {
|
||||
case 'LOGIN.OAUTH.NO_ACCOUNT_FOUND':
|
||||
return t('LOGIN.OAUTH.NO_ACCOUNT_FOUND');
|
||||
case 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY':
|
||||
return t('LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY');
|
||||
case 'LOGIN.API.UNAUTH':
|
||||
default:
|
||||
return t('LOGIN.API.UNAUTH');
|
||||
}
|
||||
};
|
||||
|
||||
// TODO: Remove this when Safari gets wider support
|
||||
// Ref: https://caniuse.com/requestidlecallback
|
||||
const 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);
|
||||
}
|
||||
};
|
||||
|
||||
const showAlertMessage = message => {
|
||||
showLoading.value = false;
|
||||
useAlert(message);
|
||||
};
|
||||
|
||||
const 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);
|
||||
}
|
||||
};
|
||||
|
||||
const submitLogin = async () => {
|
||||
hasErrored.value = false;
|
||||
showLoading.value = true;
|
||||
|
||||
const loginCredentials = {
|
||||
email: props.email ? decodeURIComponent(props.email) : credentials.email,
|
||||
password: credentials.password,
|
||||
sso_auth_token: props.ssoAuthToken,
|
||||
ssoAccountId: props.ssoAccountId,
|
||||
ssoConversationId: props.ssoConversationId,
|
||||
};
|
||||
|
||||
try {
|
||||
const result = await login(loginCredentials);
|
||||
|
||||
// Check if MFA is required
|
||||
if (result?.mfaRequired) {
|
||||
showLoading.value = false;
|
||||
mfaRequired.value = true;
|
||||
mfaToken.value = result.mfaToken;
|
||||
return;
|
||||
}
|
||||
|
||||
handleImpersonation();
|
||||
showAlertMessage(t('LOGIN.API.SUCCESS_MESSAGE'));
|
||||
} catch (response) {
|
||||
// Reset URL Params if the authentication is invalid
|
||||
if (props.email) {
|
||||
window.location = '/app/login';
|
||||
}
|
||||
hasErrored.value = true;
|
||||
showAlertMessage(response?.message || t('LOGIN.API.UNAUTH'));
|
||||
}
|
||||
};
|
||||
|
||||
const submitFormLogin = () => {
|
||||
if (v$.value.credentials.email.$invalid && !props.email) {
|
||||
showAlertMessage(t('LOGIN.EMAIL.ERROR'));
|
||||
return;
|
||||
}
|
||||
|
||||
submitLogin();
|
||||
};
|
||||
|
||||
const handleMfaVerified = () => {
|
||||
// MFA verification successful, continue with login
|
||||
handleImpersonation();
|
||||
window.location = '/app';
|
||||
};
|
||||
|
||||
const handleMfaCancel = () => {
|
||||
// User cancelled MFA, reset state
|
||||
mfaRequired.value = false;
|
||||
mfaToken.value = null;
|
||||
credentials.password = '';
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (props.ssoAuthToken) {
|
||||
submitLogin();
|
||||
}
|
||||
if (props.authError) {
|
||||
const messageKey = ERROR_MESSAGES[props.authError] ?? 'LOGIN.API.UNAUTH';
|
||||
const translatedMessage = getTranslatedMessage(messageKey);
|
||||
useAlert(translatedMessage);
|
||||
// wait for idle state
|
||||
requestIdleCallbackPolyfill(() => {
|
||||
// Remove the error query param from the url
|
||||
const { query } = route;
|
||||
router.replace({ query: { ...query, error: undefined } });
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -255,10 +236,10 @@ export default {
|
||||
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,
|
||||
'animate-wiggle': hasErrored,
|
||||
}"
|
||||
>
|
||||
<div v-if="!email">
|
||||
<div v-if="!props.email">
|
||||
<div class="flex flex-col gap-4">
|
||||
<GoogleOAuthButton v-if="showGoogleOAuth" />
|
||||
<div v-if="showSamlLogin" class="text-center">
|
||||
@@ -282,7 +263,7 @@ export default {
|
||||
/>
|
||||
</div>
|
||||
<form class="space-y-5" @submit.prevent="submitFormLogin">
|
||||
<FormInput
|
||||
<Input
|
||||
v-model="credentials.email"
|
||||
name="email_address"
|
||||
type="text"
|
||||
@@ -295,7 +276,7 @@ export default {
|
||||
:message-type="v$.credentials.email.$error ? 'error' : ''"
|
||||
@input="v$.credentials.email.$touch"
|
||||
/>
|
||||
<FormInput
|
||||
<Input
|
||||
v-model="credentials.password"
|
||||
type="password"
|
||||
name="password"
|
||||
@@ -322,7 +303,7 @@ export default {
|
||||
</router-link>
|
||||
</p>
|
||||
</template>
|
||||
</FormInput>
|
||||
</Input>
|
||||
<NextButton
|
||||
lg
|
||||
type="submit"
|
||||
@@ -330,8 +311,8 @@ export default {
|
||||
class="w-full"
|
||||
:tabindex="3"
|
||||
:label="$t('LOGIN.SUBMIT')"
|
||||
:disabled="loginApi.showLoading"
|
||||
:is-loading="loginApi.showLoading"
|
||||
:disabled="showLoading"
|
||||
:is-loading="showLoading"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@ import { useI18n } from 'vue-i18n';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
|
||||
// components
|
||||
import FormInput from 'dashboard/components-next/input/Input.vue';
|
||||
import Input from 'dashboard/components-next/input/Input.vue';
|
||||
import NextButton from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const props = defineProps({
|
||||
@@ -94,7 +94,7 @@ onMounted(async () => {
|
||||
}"
|
||||
>
|
||||
<form class="space-y-5" method="POST" action="/api/v1/auth/saml_login">
|
||||
<FormInput
|
||||
<Input
|
||||
v-model="credentials.email"
|
||||
name="email"
|
||||
type="text"
|
||||
|
||||
Reference in New Issue
Block a user