feat: Support dark mode in login pages (#7420)
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Pranav Raj S
@@ -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,6 +0,0 @@
|
||||
/* global axios */
|
||||
import wootConstants from 'dashboard/constants/globals';
|
||||
|
||||
export const getTestimonialContent = () => {
|
||||
return axios.get(wootConstants.TESTIMONIAL_URL);
|
||||
};
|
||||
@@ -1,69 +0,0 @@
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import GoogleOAuthButton from './GoogleOAuthButton.vue';
|
||||
|
||||
function getWrapper(showSeparator, buttonSize) {
|
||||
return shallowMount(GoogleOAuthButton, {
|
||||
propsData: { showSeparator: showSeparator, buttonSize: buttonSize },
|
||||
methods: {
|
||||
$t(text) {
|
||||
return text;
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
describe('GoogleOAuthButton.vue', () => {
|
||||
beforeEach(() => {
|
||||
window.chatwootConfig = {
|
||||
googleOAuthClientId: 'clientId',
|
||||
googleOAuthCallbackUrl: 'http://localhost:3000/test-callback',
|
||||
};
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
window.chatwootConfig = {};
|
||||
});
|
||||
|
||||
it('renders the OR separator if showSeparator is true', () => {
|
||||
const wrapper = getWrapper(true);
|
||||
expect(wrapper.find('.separator').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);
|
||||
});
|
||||
|
||||
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');
|
||||
expect(params.get('client_id')).toBe('clientId');
|
||||
expect(params.get('redirect_uri')).toBe(
|
||||
'http://localhost:3000/test-callback'
|
||||
);
|
||||
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);
|
||||
});
|
||||
});
|
||||
@@ -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>
|
||||
@@ -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,
|
||||
|
||||
@@ -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/');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -151,5 +151,9 @@
|
||||
},
|
||||
"DASHBOARD_APPS": {
|
||||
"LOADING_MESSAGE": "Loading Dashboard App..."
|
||||
},
|
||||
"COMMON": {
|
||||
"OR": "Or",
|
||||
"CLICK_HERE": "click here"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,34 +0,0 @@
|
||||
<template>
|
||||
<loading-state :message="$t('CONFIRM_EMAIL')" />
|
||||
</template>
|
||||
<script>
|
||||
import LoadingState from '../../components/widgets/LoadingState';
|
||||
import Auth from '../../api/auth';
|
||||
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
|
||||
export default {
|
||||
components: {
|
||||
LoadingState,
|
||||
},
|
||||
props: {
|
||||
confirmationToken: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.confirmToken();
|
||||
},
|
||||
methods: {
|
||||
async confirmToken() {
|
||||
try {
|
||||
await Auth.verifyPasswordToken({
|
||||
confirmationToken: this.confirmationToken,
|
||||
});
|
||||
window.location = DEFAULT_REDIRECT_URL;
|
||||
} catch (error) {
|
||||
window.location = DEFAULT_REDIRECT_URL;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,132 +0,0 @@
|
||||
<template>
|
||||
<form
|
||||
class="login-box medium-4 column align-self-middle"
|
||||
@submit.prevent="login()"
|
||||
>
|
||||
<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
|
||||
v-model.trim="credentials.password"
|
||||
type="password"
|
||||
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
|
||||
@input="$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
|
||||
v-model.trim="credentials.confirmPassword"
|
||||
type="password"
|
||||
:placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
|
||||
@input="$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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { required, minLength } from 'vuelidate/lib/validators';
|
||||
import Auth from '../../api/auth';
|
||||
|
||||
import WootSubmitButton from '../../components/buttons/FormSubmitButton';
|
||||
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
WootSubmitButton,
|
||||
},
|
||||
props: {
|
||||
resetPasswordToken: { type: String, default: '' },
|
||||
redirectUrl: { type: String, default: '' },
|
||||
config: { type: String, default: '' },
|
||||
},
|
||||
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: {
|
||||
showAlert(message) {
|
||||
// Reset loading, current selected agent
|
||||
this.newPasswordAPI.showLoading = false;
|
||||
bus.$emit('newToastMessage', message);
|
||||
},
|
||||
login() {
|
||||
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;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
let errorMessage = this.$t('SET_NEW_PASSWORD.API.ERROR_MESSAGE');
|
||||
if (error?.data?.message) {
|
||||
errorMessage = error.data.message;
|
||||
}
|
||||
this.showAlert(errorMessage);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -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,55 +0,0 @@
|
||||
<template>
|
||||
<woot-button
|
||||
size="expanded"
|
||||
color-scheme="primary"
|
||||
class-names="submit--button"
|
||||
:is-disabled="isDisabled"
|
||||
:is-loading="isLoading"
|
||||
@click="onClick"
|
||||
>
|
||||
{{ label }}
|
||||
<fluent-icon :icon="icon" size="18" />
|
||||
</woot-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
isDisabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.submit--button {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin: 0 0 var(--space-normal) 0;
|
||||
|
||||
&::v-deep .button__content {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,255 +0,0 @@
|
||||
<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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="globalConfig.hCaptchaSiteKey" class="h-captcha--box">
|
||||
<vue-hcaptcha
|
||||
ref="hCaptcha"
|
||||
:class="{ error: !hasAValidCaptcha && didCaptchaReset }"
|
||||
:sitekey="globalConfig.hCaptchaSiteKey"
|
||||
@verify="onRecaptchaVerified"
|
||||
/>
|
||||
<span v-if="!hasAValidCaptcha && didCaptchaReset" class="captcha-error">
|
||||
{{ $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"
|
||||
/>
|
||||
</form>
|
||||
<GoogleOAuthButton v-if="showGoogleOAuth()">
|
||||
{{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
|
||||
</GoogleOAuthButton>
|
||||
<p v-dompurify-html="termsLink" class="accept--terms" />
|
||||
</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 { isValidPassword } from 'shared/helpers/Validators';
|
||||
import GoogleOAuthButton from 'dashboard/components/ui/Auth/GoogleOAuthButton.vue';
|
||||
var CompanyEmailValidator = require('company-email-validator');
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AuthInput,
|
||||
AuthSubmitButton,
|
||||
VueHcaptcha,
|
||||
GoogleOAuthButton,
|
||||
},
|
||||
mixins: [globalConfigMixin, alertMixin],
|
||||
data() {
|
||||
return {
|
||||
credentials: {
|
||||
accountName: '',
|
||||
fullName: '',
|
||||
email: '',
|
||||
password: '',
|
||||
hCaptchaClientResponse: '',
|
||||
},
|
||||
didCaptchaReset: false,
|
||||
isSignupInProgress: false,
|
||||
error: '',
|
||||
};
|
||||
},
|
||||
validations: {
|
||||
credentials: {
|
||||
accountName: {
|
||||
required,
|
||||
minLength: minLength(2),
|
||||
},
|
||||
fullName: {
|
||||
required,
|
||||
minLength: minLength(2),
|
||||
},
|
||||
email: {
|
||||
required,
|
||||
email,
|
||||
businessEmailValidator(value) {
|
||||
return CompanyEmailValidator.isCompanyEmail(value);
|
||||
},
|
||||
},
|
||||
password: {
|
||||
required,
|
||||
isValidPassword,
|
||||
minLength: minLength(6),
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({ globalConfig: 'globalConfig/get' }),
|
||||
termsLink() {
|
||||
return this.$t('REGISTER.TERMS_ACCEPT')
|
||||
.replace('https://www.chatwoot.com/terms', this.globalConfig.termsURL)
|
||||
.replace(
|
||||
'https://www.chatwoot.com/privacy-policy',
|
||||
this.globalConfig.privacyURL
|
||||
);
|
||||
},
|
||||
hasAValidCaptcha() {
|
||||
if (this.globalConfig.hCaptchaSiteKey) {
|
||||
return !!this.credentials.hCaptchaClientResponse;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
passwordErrorText() {
|
||||
const { password } = this.$v.credentials;
|
||||
if (!password.$error) {
|
||||
return '';
|
||||
}
|
||||
if (!password.minLength) {
|
||||
return this.$t('REGISTER.PASSWORD.ERROR');
|
||||
}
|
||||
if (!password.isValidPassword) {
|
||||
return this.$t('REGISTER.PASSWORD.IS_INVALID_PASSWORD');
|
||||
}
|
||||
return '';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async submit() {
|
||||
this.$v.$touch();
|
||||
if (this.$v.$invalid) {
|
||||
this.resetCaptcha();
|
||||
return;
|
||||
}
|
||||
this.isSignupInProgress = true;
|
||||
try {
|
||||
const response = await Auth.register(this.credentials);
|
||||
if (response.status === 200) {
|
||||
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;
|
||||
}
|
||||
this.showAlert(errorMessage);
|
||||
} finally {
|
||||
this.isSignupInProgress = false;
|
||||
}
|
||||
},
|
||||
onRecaptchaVerified(token) {
|
||||
this.credentials.hCaptchaClientResponse = token;
|
||||
this.didCaptchaReset = false;
|
||||
},
|
||||
showGoogleOAuth() {
|
||||
return Boolean(window.chatwootConfig.googleOAuthClientId);
|
||||
},
|
||||
resetCaptcha() {
|
||||
if (!this.globalConfig.hCaptchaSiteKey) {
|
||||
return;
|
||||
}
|
||||
this.$refs.hCaptcha.reset();
|
||||
this.credentials.hCaptchaClientResponse = '';
|
||||
this.didCaptchaReset = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</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);
|
||||
border-radius: var(--border-radius-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user