mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-01 03:27:52 +00:00
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
@@ -1,6 +1,7 @@
|
|||||||
class DashboardController < ActionController::Base
|
class DashboardController < ActionController::Base
|
||||||
include SwitchLocale
|
include SwitchLocale
|
||||||
|
|
||||||
|
before_action :set_application_pack
|
||||||
before_action :set_global_config
|
before_action :set_global_config
|
||||||
around_action :switch_locale
|
around_action :switch_locale
|
||||||
before_action :ensure_installation_onboarding, only: [:index]
|
before_action :ensure_installation_onboarding, only: [:index]
|
||||||
@@ -60,4 +61,12 @@ class DashboardController < ActionController::Base
|
|||||||
GIT_SHA: GIT_HASH
|
GIT_SHA: GIT_HASH
|
||||||
}
|
}
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def set_application_pack
|
||||||
|
@application_pack = if request.path.include?('/auth') || request.path.include?('/login')
|
||||||
|
'v3app'
|
||||||
|
else
|
||||||
|
'application'
|
||||||
|
end
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|||||||
@@ -3,47 +3,11 @@
|
|||||||
import Cookies from 'js-cookie';
|
import Cookies from 'js-cookie';
|
||||||
import endPoints from './endPoints';
|
import endPoints from './endPoints';
|
||||||
import {
|
import {
|
||||||
setAuthCredentials,
|
|
||||||
clearCookiesOnLogout,
|
clearCookiesOnLogout,
|
||||||
deleteIndexedDBOnLogout,
|
deleteIndexedDBOnLogout,
|
||||||
} from '../store/utils/api';
|
} from '../store/utils/api';
|
||||||
|
|
||||||
export default {
|
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() {
|
validityCheck() {
|
||||||
const urlData = endPoints('validityCheck');
|
const urlData = endPoints('validityCheck');
|
||||||
return axios.get(urlData.url);
|
return axios.get(urlData.url);
|
||||||
@@ -73,45 +37,6 @@ export default {
|
|||||||
}
|
}
|
||||||
return false;
|
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({
|
profileUpdate({
|
||||||
password,
|
password,
|
||||||
password_confirmation,
|
password_confirmation,
|
||||||
|
|||||||
@@ -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) => {
|
export const frontendURL = (path, params) => {
|
||||||
const stringifiedParams = params ? `?${new URLSearchParams(params)}` : '';
|
const stringifiedParams = params ? `?${new URLSearchParams(params)}` : '';
|
||||||
return `/app/${path}${stringifiedParams}`;
|
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 = ({
|
export const conversationUrl = ({
|
||||||
accountId,
|
accountId,
|
||||||
activeInbox,
|
activeInbox,
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ import {
|
|||||||
frontendURL,
|
frontendURL,
|
||||||
conversationUrl,
|
conversationUrl,
|
||||||
isValidURL,
|
isValidURL,
|
||||||
getLoginRedirectURL,
|
|
||||||
conversationListPageURL,
|
conversationListPageURL,
|
||||||
} from '../URLHelper';
|
} from '../URLHelper';
|
||||||
|
|
||||||
@@ -76,44 +75,4 @@ describe('#URL Helpers', () => {
|
|||||||
expect(isValidURL('alert.window')).toBe(false);
|
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": {
|
"DASHBOARD_APPS": {
|
||||||
"LOADING_MESSAGE": "Loading Dashboard App..."
|
"LOADING_MESSAGE": "Loading Dashboard App..."
|
||||||
|
},
|
||||||
|
"COMMON": {
|
||||||
|
"OR": "Or",
|
||||||
|
"CLICK_HERE": "click here"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
{
|
{
|
||||||
"RESET_PASSWORD": {
|
"RESET_PASSWORD": {
|
||||||
"TITLE": "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": {
|
"EMAIL": {
|
||||||
"LABEL": "Email",
|
"LABEL": "Email",
|
||||||
"PLACEHOLDER": "Please enter your email.",
|
"PLACEHOLDER": "Please enter your email.",
|
||||||
|
|||||||
@@ -1,5 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="row auth-wrap login align-center">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -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,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 VueRouter from 'vue-router';
|
||||||
|
|
||||||
import { frontendURL } from '../helper/URLHelper';
|
import { frontendURL } from '../helper/URLHelper';
|
||||||
import { clearBrowserSessionCookies } from '../store/utils/api';
|
|
||||||
import authRoute from './auth/auth.routes';
|
|
||||||
import dashboard from './dashboard/dashboard.routes';
|
import dashboard from './dashboard/dashboard.routes';
|
||||||
import login from './login/login.routes';
|
|
||||||
import store from '../store';
|
import store from '../store';
|
||||||
import { validateLoggedInRoutes } from '../helper/routeHelpers';
|
import { validateLoggedInRoutes } from '../helper/routeHelpers';
|
||||||
import AnalyticsHelper from '../helper/AnalyticsHelper';
|
import AnalyticsHelper from '../helper/AnalyticsHelper';
|
||||||
|
|
||||||
const routes = [...login.routes, ...dashboard.routes, ...authRoute.routes];
|
const routes = [...dashboard.routes];
|
||||||
|
|
||||||
window.roleWiseRoutes = {
|
window.roleWiseRoutes = {
|
||||||
agent: [],
|
agent: [],
|
||||||
@@ -36,86 +33,26 @@ generateRoleWiseRoute(routes);
|
|||||||
|
|
||||||
export const router = new VueRouter({ mode: 'history', 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 = [
|
if (!isLoggedIn) {
|
||||||
'auth_confirmation',
|
window.location = '/app/login';
|
||||||
'pushBack',
|
return '/app/login';
|
||||||
'auth_password_edit',
|
}
|
||||||
'oauth-callback',
|
|
||||||
];
|
|
||||||
|
|
||||||
const routeValidators = [
|
if (!to.name) {
|
||||||
{
|
return next(frontendURL(`accounts/${user.account_id}/dashboard`));
|
||||||
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,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export const validateAuthenticateRoutePermission = (
|
const nextRoute = validateLoggedInRoutes(
|
||||||
to,
|
to,
|
||||||
from,
|
getters.getCurrentUser,
|
||||||
next,
|
window.roleWiseRoutes
|
||||||
{ getters }
|
|
||||||
) => {
|
|
||||||
const isLoggedIn = getters.isLoggedIn;
|
|
||||||
const isProtectedRoute = !unProtectedRoutes.includes(to.name);
|
|
||||||
const strategy = routeValidators.find(
|
|
||||||
validator =>
|
|
||||||
validator.protected === isProtectedRoute &&
|
|
||||||
validator.loggedIn === isLoggedIn
|
|
||||||
);
|
);
|
||||||
const nextRoute = strategy.handler(to, getters);
|
|
||||||
return nextRoute ? next(frontendURL(nextRoute)) : next();
|
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 = () => {
|
export const initalizeRouter = () => {
|
||||||
const userAuthentication = store.dispatch('setUser');
|
const userAuthentication = store.dispatch('setUser');
|
||||||
|
|
||||||
@@ -125,22 +62,8 @@ export const initalizeRouter = () => {
|
|||||||
name: to.name,
|
name: to.name,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (validateSSOLoginParams(to)) {
|
|
||||||
clearBrowserSessionCookies();
|
|
||||||
next();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
userAuthentication.then(() => {
|
userAuthentication.then(() => {
|
||||||
if (!to.name) {
|
return validateAuthenticateRoutePermission(to, next, store);
|
||||||
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);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,52 +1,17 @@
|
|||||||
import 'expect-more-jest';
|
import 'expect-more-jest';
|
||||||
import {
|
import { validateAuthenticateRoutePermission } from './index';
|
||||||
validateAuthenticateRoutePermission,
|
|
||||||
validateRouteAccess,
|
|
||||||
} from './index';
|
|
||||||
|
|
||||||
jest.mock('./dashboard/dashboard.routes', () => ({
|
jest.mock('./dashboard/dashboard.routes', () => ({
|
||||||
routes: [],
|
routes: [],
|
||||||
}));
|
}));
|
||||||
jest.mock('./auth/auth.routes', () => ({
|
|
||||||
routes: [],
|
|
||||||
}));
|
|
||||||
jest.mock('./login/login.routes', () => ({
|
|
||||||
routes: [],
|
|
||||||
}));
|
|
||||||
window.roleWiseRoutes = {};
|
window.roleWiseRoutes = {};
|
||||||
|
|
||||||
describe('#validateAuthenticateRoutePermission', () => {
|
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 route is protected`, () => {
|
||||||
describe(`when user not logged in`, () => {
|
describe(`when user not logged in`, () => {
|
||||||
it(`should redirect to login`, () => {
|
it(`should redirect to login`, () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
const to = { name: 'some-protected-route', params: { accountId: 1 } };
|
const to = { name: 'some-protected-route', params: { accountId: 1 } };
|
||||||
const from = { name: '' };
|
|
||||||
const next = jest.fn();
|
const next = jest.fn();
|
||||||
const getters = {
|
const getters = {
|
||||||
isLoggedIn: false,
|
isLoggedIn: false,
|
||||||
@@ -56,8 +21,10 @@ describe('#validateAuthenticateRoutePermission', () => {
|
|||||||
accounts: [],
|
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`, () => {
|
describe(`when user is logged in`, () => {
|
||||||
@@ -65,7 +32,6 @@ describe('#validateAuthenticateRoutePermission', () => {
|
|||||||
it(`should redirect to dashboard`, () => {
|
it(`should redirect to dashboard`, () => {
|
||||||
window.roleWiseRoutes.agent = ['dashboard'];
|
window.roleWiseRoutes.agent = ['dashboard'];
|
||||||
const to = { name: 'admin', params: { accountId: 1 } };
|
const to = { name: 'admin', params: { accountId: 1 } };
|
||||||
const from = { name: '' };
|
|
||||||
const next = jest.fn();
|
const next = jest.fn();
|
||||||
const getters = {
|
const getters = {
|
||||||
isLoggedIn: true,
|
isLoggedIn: true,
|
||||||
@@ -75,7 +41,7 @@ describe('#validateAuthenticateRoutePermission', () => {
|
|||||||
accounts: [{ id: 1, role: 'agent', status: 'active' }],
|
accounts: [{ id: 1, role: 'agent', status: 'active' }],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
validateAuthenticateRoutePermission(to, from, next, { getters });
|
validateAuthenticateRoutePermission(to, next, { getters });
|
||||||
expect(next).toHaveBeenCalledWith('/app/accounts/1/dashboard');
|
expect(next).toHaveBeenCalledWith('/app/accounts/1/dashboard');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -83,7 +49,6 @@ describe('#validateAuthenticateRoutePermission', () => {
|
|||||||
it(`should go there`, () => {
|
it(`should go there`, () => {
|
||||||
window.roleWiseRoutes.agent = ['dashboard', 'admin'];
|
window.roleWiseRoutes.agent = ['dashboard', 'admin'];
|
||||||
const to = { name: 'admin', params: { accountId: 1 } };
|
const to = { name: 'admin', params: { accountId: 1 } };
|
||||||
const from = { name: '' };
|
|
||||||
const next = jest.fn();
|
const next = jest.fn();
|
||||||
const getters = {
|
const getters = {
|
||||||
isLoggedIn: true,
|
isLoggedIn: true,
|
||||||
@@ -93,39 +58,10 @@ describe('#validateAuthenticateRoutePermission', () => {
|
|||||||
accounts: [{ id: 1, role: 'agent', status: 'active' }],
|
accounts: [{ id: 1, role: 'agent', status: 'active' }],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
validateAuthenticateRoutePermission(to, from, next, { getters });
|
validateAuthenticateRoutePermission(to, next, { getters });
|
||||||
expect(next).toHaveBeenCalledWith();
|
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 types from '../mutation-types';
|
||||||
import authAPI from '../../api/auth';
|
import authAPI from '../../api/auth';
|
||||||
|
|
||||||
import {
|
import { setUser, clearCookiesOnLogout } from '../utils/api';
|
||||||
setUser,
|
|
||||||
clearCookiesOnLogout,
|
|
||||||
clearLocalStorageOnLogout,
|
|
||||||
} from '../utils/api';
|
|
||||||
import { getLoginRedirectURL } from '../../helper/URLHelper';
|
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
currentUser: {
|
currentUser: {
|
||||||
@@ -97,24 +92,6 @@ export const getters = {
|
|||||||
|
|
||||||
// actions
|
// actions
|
||||||
export const 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) {
|
async validityCheck(context) {
|
||||||
try {
|
try {
|
||||||
const response = await authAPI.validityCheck();
|
const response = await authAPI.validityCheck();
|
||||||
|
|||||||
@@ -67,6 +67,9 @@ export const parseAPIErrorResponse = error => {
|
|||||||
if (error?.response?.data?.error) {
|
if (error?.response?.data?.error) {
|
||||||
return error?.response?.data?.error;
|
return error?.response?.data?.error;
|
||||||
}
|
}
|
||||||
|
if (error?.response?.data?.errors) {
|
||||||
|
return error?.response?.data?.errors[0];
|
||||||
|
}
|
||||||
return error;
|
return error;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
61
app/javascript/packs/v3app.js
Normal file
61
app/javascript/packs/v3app.js
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
|
import VueI18n from 'vue-i18n';
|
||||||
|
import VueRouter from 'vue-router';
|
||||||
|
import Vuelidate from 'vuelidate';
|
||||||
|
import i18n from 'dashboard/i18n';
|
||||||
|
import * as Sentry from '@sentry/vue';
|
||||||
|
import { Integrations } from '@sentry/tracing';
|
||||||
|
import {
|
||||||
|
initializeAnalyticsEvents,
|
||||||
|
initializeChatwootEvents,
|
||||||
|
} from 'dashboard/helper/scriptHelpers';
|
||||||
|
import AnalyticsPlugin from 'dashboard/helper/AnalyticsHelper/plugin';
|
||||||
|
import App from '../v3/App.vue';
|
||||||
|
import router, { initalizeRouter } from '../v3/views/index';
|
||||||
|
import store from '../v3/store';
|
||||||
|
import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
|
||||||
|
|
||||||
|
Vue.config.env = process.env;
|
||||||
|
|
||||||
|
if (window.errorLoggingConfig) {
|
||||||
|
Sentry.init({
|
||||||
|
Vue,
|
||||||
|
dsn: window.errorLoggingConfig,
|
||||||
|
denyUrls: [
|
||||||
|
// Chrome extensions
|
||||||
|
/^chrome:\/\//i,
|
||||||
|
/chrome-extension:/i,
|
||||||
|
/extensions\//i,
|
||||||
|
|
||||||
|
// Locally saved copies
|
||||||
|
/file:\/\//i,
|
||||||
|
|
||||||
|
// Safari extensions.
|
||||||
|
/safari-web-extension:/i,
|
||||||
|
/safari-extension:/i,
|
||||||
|
],
|
||||||
|
integrations: [new Integrations.BrowserTracing()],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
Vue.use(VueRouter);
|
||||||
|
Vue.use(VueI18n);
|
||||||
|
Vue.use(Vuelidate);
|
||||||
|
Vue.use(AnalyticsPlugin);
|
||||||
|
Vue.component('fluent-icon', FluentIcon);
|
||||||
|
|
||||||
|
const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
|
||||||
|
|
||||||
|
window.bus = new Vue();
|
||||||
|
initializeChatwootEvents();
|
||||||
|
initializeAnalyticsEvents();
|
||||||
|
initalizeRouter();
|
||||||
|
window.onload = () => {
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
i18n: i18nConfig,
|
||||||
|
components: { App },
|
||||||
|
template: '<App/>',
|
||||||
|
}).$mount('#app');
|
||||||
|
};
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<span class="spinner" :class="`${size} ${colorScheme}`" />
|
<span class="spinner" :class="`${size} ${colorSchemeClasses}`" />
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
@@ -13,6 +13,15 @@ export default {
|
|||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
colorSchemeClasses() {
|
||||||
|
if (this.colorScheme === 'primary') {
|
||||||
|
return 'before:!border-t-woot-500';
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.colorScheme;
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@@ -7,4 +7,5 @@ export const BUS_EVENTS = {
|
|||||||
TOGGLE_SIDEMENU: 'TOGGLE_SIDEMENU',
|
TOGGLE_SIDEMENU: 'TOGGLE_SIDEMENU',
|
||||||
ON_MESSAGE_LIST_SCROLL: 'ON_MESSAGE_LIST_SCROLL',
|
ON_MESSAGE_LIST_SCROLL: 'ON_MESSAGE_LIST_SCROLL',
|
||||||
WEBSOCKET_DISCONNECT: 'WEBSOCKET_DISCONNECT',
|
WEBSOCKET_DISCONNECT: 'WEBSOCKET_DISCONNECT',
|
||||||
|
SHOW_TOAST: 'newToastMessage',
|
||||||
};
|
};
|
||||||
|
|||||||
71
app/javascript/v3/App.vue
Normal file
71
app/javascript/v3/App.vue
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
<template>
|
||||||
|
<div class="h-full w-full antialiased" :class="theme">
|
||||||
|
<router-view />
|
||||||
|
<snackbar-container />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import SnackbarContainer from './components/SnackBar/Container.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { SnackbarContainer },
|
||||||
|
data() {
|
||||||
|
return { theme: 'light' };
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.setColorTheme();
|
||||||
|
this.listenToThemeChanges();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setColorTheme() {
|
||||||
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||||
|
this.theme = 'dark';
|
||||||
|
} else {
|
||||||
|
this.theme = 'light ';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
listenToThemeChanges() {
|
||||||
|
const mql = window.matchMedia('(prefers-color-scheme: dark)');
|
||||||
|
|
||||||
|
mql.onchange = e => {
|
||||||
|
if (e.matches) {
|
||||||
|
this.theme = 'dark';
|
||||||
|
} else {
|
||||||
|
this.theme = 'light';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@import 'shared/assets/fonts/plus-jakarta';
|
||||||
|
@import 'shared/assets/stylesheets/colors';
|
||||||
|
@import 'shared/assets/stylesheets/spacing';
|
||||||
|
@import 'shared/assets/stylesheets/font-size';
|
||||||
|
@import 'shared/assets/stylesheets/border-radius';
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
font-family: 'PlusJakarta', -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||||
|
Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
|
||||||
|
@apply h-full w-full;
|
||||||
|
|
||||||
|
input,
|
||||||
|
select {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-link {
|
||||||
|
@apply text-woot-500 font-medium hover:text-woot-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
@apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-300 dark:text-slate-900;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
6
app/javascript/v3/api/apiClient.js
Normal file
6
app/javascript/v3/api/apiClient.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
const { apiHost = '' } = window.chatwootConfig || {};
|
||||||
|
const wootAPI = axios.create({ baseURL: `${apiHost}/` });
|
||||||
|
|
||||||
|
export default wootAPI;
|
||||||
74
app/javascript/v3/api/auth.js
Normal file
74
app/javascript/v3/api/auth.js
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
import {
|
||||||
|
setAuthCredentials,
|
||||||
|
throwErrorMessage,
|
||||||
|
clearLocalStorageOnLogout,
|
||||||
|
} from 'dashboard/store/utils/api';
|
||||||
|
import wootAPI from './apiClient';
|
||||||
|
import { getLoginRedirectURL } from '../helpers/AuthHelper';
|
||||||
|
|
||||||
|
export const login = async ({
|
||||||
|
ssoAccountId,
|
||||||
|
ssoConversationId,
|
||||||
|
...credentials
|
||||||
|
}) => {
|
||||||
|
try {
|
||||||
|
const response = await wootAPI.post('auth/sign_in', credentials);
|
||||||
|
setAuthCredentials(response);
|
||||||
|
clearLocalStorageOnLogout();
|
||||||
|
window.location = getLoginRedirectURL({
|
||||||
|
ssoAccountId,
|
||||||
|
ssoConversationId,
|
||||||
|
user: response.data.data,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
throwErrorMessage(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const register = async creds => {
|
||||||
|
try {
|
||||||
|
const response = await wootAPI.post('api/v1/accounts.json', {
|
||||||
|
account_name: creds.accountName.trim(),
|
||||||
|
user_full_name: creds.fullName.trim(),
|
||||||
|
email: creds.email,
|
||||||
|
password: creds.password,
|
||||||
|
h_captcha_client_response: creds.hCaptchaClientResponse,
|
||||||
|
});
|
||||||
|
setAuthCredentials(response);
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
throwErrorMessage(error);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const verifyPasswordToken = async ({ confirmationToken }) => {
|
||||||
|
try {
|
||||||
|
const response = await wootAPI.post('auth/confirmation', {
|
||||||
|
confirmation_token: confirmationToken,
|
||||||
|
});
|
||||||
|
setAuthCredentials(response);
|
||||||
|
} catch (error) {
|
||||||
|
throwErrorMessage(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const setNewPassword = async ({
|
||||||
|
resetPasswordToken,
|
||||||
|
password,
|
||||||
|
confirmPassword,
|
||||||
|
}) => {
|
||||||
|
try {
|
||||||
|
const response = await wootAPI.put('auth/password', {
|
||||||
|
reset_password_token: resetPasswordToken,
|
||||||
|
password_confirmation: confirmPassword,
|
||||||
|
password,
|
||||||
|
});
|
||||||
|
setAuthCredentials(response);
|
||||||
|
} catch (error) {
|
||||||
|
throwErrorMessage(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const resetPassword = async ({ email }) =>
|
||||||
|
wootAPI.post('auth/password', { email });
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
/* global axios */
|
|
||||||
import wootConstants from 'dashboard/constants/globals';
|
import wootConstants from 'dashboard/constants/globals';
|
||||||
|
import wootAPI from './apiClient';
|
||||||
|
|
||||||
export const getTestimonialContent = () => {
|
export const getTestimonialContent = () => {
|
||||||
return axios.get(wootConstants.TESTIMONIAL_URL);
|
return wootAPI.get(wootConstants.TESTIMONIAL_URL);
|
||||||
};
|
};
|
||||||
63
app/javascript/v3/components/Button/SubmitButton.vue
Normal file
63
app/javascript/v3/components/Button/SubmitButton.vue
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<button
|
||||||
|
:type="type"
|
||||||
|
data-testid="submit_button"
|
||||||
|
:disabled="disabled"
|
||||||
|
:class="computedClass"
|
||||||
|
class="flex items-center w-full justify-center rounded-md bg-woot-500 py-3 px-3 text-base font-medium text-white shadow-sm hover:bg-woot-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-woot-500 cursor-pointer"
|
||||||
|
@click="onClick"
|
||||||
|
>
|
||||||
|
<span>{{ buttonText }}</span>
|
||||||
|
<fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
|
||||||
|
<spinner v-if="loading" />
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Spinner from 'shared/components/Spinner';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Spinner,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
buttonText: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
buttonClass: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
iconClass: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'submit',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
computedClass() {
|
||||||
|
return `
|
||||||
|
${this.disabled ? 'opacity-40 hover:bg-woot-500' : ''}
|
||||||
|
${this.buttonClass || ' '}
|
||||||
|
`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onClick() {
|
||||||
|
this.$emit('click');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
24
app/javascript/v3/components/Divider/SimpleDivider.vue
Normal file
24
app/javascript/v3/components/Divider/SimpleDivider.vue
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<div class="relative my-4 section-separator">
|
||||||
|
<div class="absolute inset-0 flex items-center" aria-hidden="true">
|
||||||
|
<div class="w-full border-t border-slate-200 dark:border-slate-600" />
|
||||||
|
</div>
|
||||||
|
<div v-if="label" class="relative flex justify-center text-sm">
|
||||||
|
<span
|
||||||
|
class="bg-white dark:bg-slate-800 px-2 text-slate-500 dark:text-white"
|
||||||
|
>
|
||||||
|
{{ label }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
80
app/javascript/v3/components/Form/Input.vue
Normal file
80
app/javascript/v3/components/Form/Input.vue
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
v-if="label"
|
||||||
|
:for="name"
|
||||||
|
class="flex justify-between text-sm font-medium leading-6 text-slate-900 dark:text-white"
|
||||||
|
:class="{ 'text-red-500': hasError }"
|
||||||
|
>
|
||||||
|
{{ label }}
|
||||||
|
<slot />
|
||||||
|
</label>
|
||||||
|
<div class="mt-1">
|
||||||
|
<input
|
||||||
|
:id="name"
|
||||||
|
:name="name"
|
||||||
|
:type="type"
|
||||||
|
autocomplete="off"
|
||||||
|
:required="required"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
:value="value"
|
||||||
|
:class="{
|
||||||
|
'focus:ring-red-600 ring-red-600': hasError,
|
||||||
|
'dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200': !hasError,
|
||||||
|
}"
|
||||||
|
class="block w-full rounded-md border-0 px-3 py-3 shadow-sm ring-1 ring-inset text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 outline-none dark:bg-slate-700 "
|
||||||
|
@input="onInput"
|
||||||
|
@blur="$emit('blur')"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
v-if="errorMessage && hasError"
|
||||||
|
class="text-xs leading-2 text-red-400"
|
||||||
|
>
|
||||||
|
{{ errorMessage }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'text',
|
||||||
|
},
|
||||||
|
required: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
hasError: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
errorMessage: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onInput(e) {
|
||||||
|
this.$emit('input', e.target.value);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -1,9 +1,9 @@
|
|||||||
import { shallowMount } from '@vue/test-utils';
|
import { shallowMount } from '@vue/test-utils';
|
||||||
import GoogleOAuthButton from './GoogleOAuthButton.vue';
|
import GoogleOAuthButton from './Button.vue';
|
||||||
|
|
||||||
function getWrapper(showSeparator, buttonSize) {
|
function getWrapper(showSeparator) {
|
||||||
return shallowMount(GoogleOAuthButton, {
|
return shallowMount(GoogleOAuthButton, {
|
||||||
propsData: { showSeparator: showSeparator, buttonSize: buttonSize },
|
propsData: { showSeparator: showSeparator },
|
||||||
methods: {
|
methods: {
|
||||||
$t(text) {
|
$t(text) {
|
||||||
return text;
|
return text;
|
||||||
@@ -26,18 +26,17 @@ describe('GoogleOAuthButton.vue', () => {
|
|||||||
|
|
||||||
it('renders the OR separator if showSeparator is true', () => {
|
it('renders the OR separator if showSeparator is true', () => {
|
||||||
const wrapper = getWrapper(true);
|
const wrapper = getWrapper(true);
|
||||||
expect(wrapper.find('.separator').exists()).toBe(true);
|
expect(wrapper.findComponent({ ref: 'divider' }).exists()).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('does not render the OR separator if showSeparator is false', () => {
|
it('does not render the OR separator if showSeparator is false', () => {
|
||||||
const wrapper = getWrapper(false);
|
const wrapper = getWrapper(false);
|
||||||
expect(wrapper.find('.separator').exists()).toBe(false);
|
expect(wrapper.findComponent({ ref: 'divider' }).exists()).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('generates the correct Google Auth URL', () => {
|
it('generates the correct Google Auth URL', () => {
|
||||||
const wrapper = getWrapper();
|
const wrapper = getWrapper();
|
||||||
const googleAuthUrl = new URL(wrapper.vm.getGoogleAuthUrl());
|
const googleAuthUrl = new URL(wrapper.vm.getGoogleAuthUrl());
|
||||||
|
|
||||||
const params = googleAuthUrl.searchParams;
|
const params = googleAuthUrl.searchParams;
|
||||||
expect(googleAuthUrl.origin).toBe('https://accounts.google.com');
|
expect(googleAuthUrl.origin).toBe('https://accounts.google.com');
|
||||||
expect(googleAuthUrl.pathname).toBe('/o/oauth2/auth/oauthchooseaccount');
|
expect(googleAuthUrl.pathname).toBe('/o/oauth2/auth/oauthchooseaccount');
|
||||||
@@ -47,23 +46,7 @@ describe('GoogleOAuthButton.vue', () => {
|
|||||||
);
|
);
|
||||||
expect(params.get('response_type')).toBe('code');
|
expect(params.get('response_type')).toBe('code');
|
||||||
expect(params.get('scope')).toBe('email profile');
|
expect(params.get('scope')).toBe('email profile');
|
||||||
});
|
|
||||||
|
|
||||||
it('responds to buttonSize prop properly', () => {
|
expect(wrapper.findComponent({ ref: 'divider' }).exists()).toBe(true);
|
||||||
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);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
60
app/javascript/v3/components/GoogleOauth/Button.vue
Normal file
60
app/javascript/v3/components/GoogleOauth/Button.vue
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<a
|
||||||
|
:href="getGoogleAuthUrl()"
|
||||||
|
class="inline-flex w-full justify-center rounded-md bg-white py-3 px-4 shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
|
||||||
|
>
|
||||||
|
<img src="/assets/images/auth/google.svg" alt="Google Logo" class="h-6" />
|
||||||
|
<span class="text-base font-medium ml-2 text-slate-600 dark:text-white">
|
||||||
|
{{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<simple-divider
|
||||||
|
v-if="showSeparator"
|
||||||
|
ref="divider"
|
||||||
|
:label="$t('COMMON.OR')"
|
||||||
|
class="uppercase"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SimpleDivider from '../Divider/SimpleDivider.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
SimpleDivider,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
showSeparator: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
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>
|
||||||
54
app/javascript/v3/components/SnackBar/Container.vue
Normal file
54
app/javascript/v3/components/SnackBar/Container.vue
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
<template>
|
||||||
|
<transition-group
|
||||||
|
name="toast-fade"
|
||||||
|
tag="div"
|
||||||
|
class="fixed left-0 right-0 mx-auto overflow-hidden text-center top-10 z-50 max-w-[40rem]"
|
||||||
|
>
|
||||||
|
<snackbar-item
|
||||||
|
v-for="snackbarAlertMessage in snackbarAlertMessages"
|
||||||
|
:key="snackbarAlertMessage.key"
|
||||||
|
:message="snackbarAlertMessage.message"
|
||||||
|
:action="snackbarAlertMessage.action"
|
||||||
|
/>
|
||||||
|
</transition-group>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { BUS_EVENTS } from 'shared/constants/busEvents';
|
||||||
|
import SnackbarItem from './Item';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { SnackbarItem },
|
||||||
|
props: {
|
||||||
|
duration: {
|
||||||
|
type: Number,
|
||||||
|
default: 2500,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
snackbarAlertMessages: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
bus.$on(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
bus.$off(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onNewToastMessage(message, action) {
|
||||||
|
this.snackbarAlertMessages.push({
|
||||||
|
key: new Date().getTime(),
|
||||||
|
message,
|
||||||
|
action,
|
||||||
|
});
|
||||||
|
window.setTimeout(() => {
|
||||||
|
this.snackbarAlertMessages.splice(0, 1);
|
||||||
|
}, this.duration);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
37
app/javascript/v3/components/SnackBar/Item.vue
Normal file
37
app/javascript/v3/components/SnackBar/Item.vue
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="bg-slate-900 dark:bg-slate-800 rounded-md drop-shadow-md mb-4 max-w-[40rem] inline-flex items-center min-w-[22rem] py-3 px-4"
|
||||||
|
:class="isActionPresent ? 'justify-between' : 'justify-center'"
|
||||||
|
>
|
||||||
|
<div class="text-sm font-medium text-white">
|
||||||
|
{{ message }}
|
||||||
|
</div>
|
||||||
|
<div v-if="isActionPresent" class="ml-4">
|
||||||
|
<router-link v-if="action.type == 'link'" :to="action.to" class="">
|
||||||
|
{{ action.message }}
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
message: { type: String, default: '' },
|
||||||
|
action: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
showButton: Boolean,
|
||||||
|
duration: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 3000,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isActionPresent() {
|
||||||
|
return this.action && this.action.message;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
38
app/javascript/v3/helpers/AuthHelper.js
Normal file
38
app/javascript/v3/helpers/AuthHelper.js
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import Cookies from 'js-cookie';
|
||||||
|
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
|
||||||
|
import { frontendURL } from 'dashboard/helper/URLHelper';
|
||||||
|
|
||||||
|
export const hasAuthCookie = () => {
|
||||||
|
return !!Cookies.getJSON('cw_d_session_info');
|
||||||
|
};
|
||||||
|
|
||||||
|
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;
|
||||||
|
};
|
||||||
3
app/javascript/v3/helpers/CommonHelper.js
Normal file
3
app/javascript/v3/helpers/CommonHelper.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export const replaceRouteWithReload = url => {
|
||||||
|
window.location = url;
|
||||||
|
};
|
||||||
50
app/javascript/v3/helpers/RouteHelper.js
Normal file
50
app/javascript/v3/helpers/RouteHelper.js
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
import { frontendURL } from 'dashboard/helper/URLHelper';
|
||||||
|
import { clearBrowserSessionCookies } from 'dashboard/store/utils/api';
|
||||||
|
import { hasAuthCookie } from './AuthHelper';
|
||||||
|
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
|
||||||
|
import { replaceRouteWithReload } from './CommonHelper';
|
||||||
|
|
||||||
|
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, next, chatwootConfig = {}) => {
|
||||||
|
// Pages with ignoreSession:true would be rendered
|
||||||
|
// even if there is an active session
|
||||||
|
// Used for confirmation or password reset pages
|
||||||
|
if (to.meta && to.meta.ignoreSession) {
|
||||||
|
next();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (validateSSOLoginParams(to)) {
|
||||||
|
clearBrowserSessionCookies();
|
||||||
|
next();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Redirect to dashboard if a cookie is present, the cookie
|
||||||
|
// cleanup and token validation happens in the application pack.
|
||||||
|
if (hasAuthCookie()) {
|
||||||
|
replaceRouteWithReload(DEFAULT_REDIRECT_URL);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If the URL is an invalid path, redirect to login page
|
||||||
|
// Disable navigation to signup page if signups are disabled
|
||||||
|
// Signup route has an attribute (requireSignupEnabled) in it's definition
|
||||||
|
const isAnInalidSignupNavigation =
|
||||||
|
chatwootConfig.signupEnabled !== 'true' &&
|
||||||
|
to.meta &&
|
||||||
|
to.meta.requireSignupEnabled;
|
||||||
|
|
||||||
|
if (!to.name || isAnInalidSignupNavigation) {
|
||||||
|
next(frontendURL('login'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
next();
|
||||||
|
};
|
||||||
43
app/javascript/v3/helpers/specs/AuthHelper.spec.js
Normal file
43
app/javascript/v3/helpers/specs/AuthHelper.spec.js
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import { getLoginRedirectURL } from '../AuthHelper';
|
||||||
|
|
||||||
|
describe('#URL Helpers', () => {
|
||||||
|
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/');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
69
app/javascript/v3/helpers/specs/RouteHelper.spec.js
Normal file
69
app/javascript/v3/helpers/specs/RouteHelper.spec.js
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
import { validateRouteAccess } from '../RouteHelper';
|
||||||
|
import { clearBrowserSessionCookies } from 'dashboard/store/utils/api';
|
||||||
|
import { replaceRouteWithReload } from '../CommonHelper';
|
||||||
|
import Cookies from 'js-cookie';
|
||||||
|
|
||||||
|
const next = jest.fn();
|
||||||
|
jest.mock('dashboard/store/utils/api', () => ({
|
||||||
|
clearBrowserSessionCookies: jest.fn(),
|
||||||
|
}));
|
||||||
|
jest.mock('../CommonHelper', () => ({ replaceRouteWithReload: jest.fn() }));
|
||||||
|
|
||||||
|
jest.mock('js-cookie', () => ({
|
||||||
|
getJSON: jest.fn(),
|
||||||
|
}));
|
||||||
|
|
||||||
|
Cookies.getJSON.mockReturnValueOnce(true).mockReturnValue(false);
|
||||||
|
describe('#validateRouteAccess', () => {
|
||||||
|
it('reset cookies and continues to the login page if the SSO parameters are present', () => {
|
||||||
|
validateRouteAccess(
|
||||||
|
{
|
||||||
|
name: 'login',
|
||||||
|
query: { sso_auth_token: 'random_token', email: 'random@email.com' },
|
||||||
|
},
|
||||||
|
next
|
||||||
|
);
|
||||||
|
expect(clearBrowserSessionCookies).toHaveBeenCalledTimes(1);
|
||||||
|
expect(next).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('ignore session and continue to the page if the ignoreSession is present in route definition', () => {
|
||||||
|
validateRouteAccess(
|
||||||
|
{
|
||||||
|
name: 'login',
|
||||||
|
meta: { ignoreSession: true },
|
||||||
|
},
|
||||||
|
next
|
||||||
|
);
|
||||||
|
expect(clearBrowserSessionCookies).not.toHaveBeenCalled();
|
||||||
|
expect(next).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('redirects to dashboard if auth cookie is present', () => {
|
||||||
|
Cookies.getJSON.mockImplementation(() => true);
|
||||||
|
validateRouteAccess({ name: 'login' }, next);
|
||||||
|
expect(clearBrowserSessionCookies).not.toHaveBeenCalled();
|
||||||
|
expect(replaceRouteWithReload).toHaveBeenCalledWith('/app/');
|
||||||
|
expect(next).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('redirects to login if route is empty', () => {
|
||||||
|
validateRouteAccess({}, next);
|
||||||
|
expect(clearBrowserSessionCookies).not.toHaveBeenCalled();
|
||||||
|
expect(next).toHaveBeenCalledWith('/app/login');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('redirects to login if signup is disabled', () => {
|
||||||
|
validateRouteAccess({ meta: { requireSignupEnabled: true } }, next, {
|
||||||
|
signupEnabled: 'true',
|
||||||
|
});
|
||||||
|
expect(clearBrowserSessionCookies).not.toHaveBeenCalled();
|
||||||
|
expect(next).toHaveBeenCalledWith('/app/login');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('continues to the route in every other case', () => {
|
||||||
|
validateRouteAccess({ name: 'reset_password' }, next);
|
||||||
|
expect(clearBrowserSessionCookies).not.toHaveBeenCalled();
|
||||||
|
expect(next).toHaveBeenCalledWith();
|
||||||
|
});
|
||||||
|
});
|
||||||
10
app/javascript/v3/store/index.js
Normal file
10
app/javascript/v3/store/index.js
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
|
import Vuex from 'vuex';
|
||||||
|
import globalConfig from 'shared/store/globalConfig';
|
||||||
|
|
||||||
|
Vue.use(Vuex);
|
||||||
|
export default new Vuex.Store({
|
||||||
|
modules: {
|
||||||
|
globalConfig,
|
||||||
|
},
|
||||||
|
});
|
||||||
@@ -1,14 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<loading-state :message="$t('CONFIRM_EMAIL')" />
|
<div class="flex items-center justify-center h-full w-full">
|
||||||
|
<spinner color-scheme="primary" size="" />
|
||||||
|
<div class="ml-2">{{ $t('CONFIRM_EMAIL') }}</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import LoadingState from '../../components/widgets/LoadingState';
|
|
||||||
import Auth from '../../api/auth';
|
|
||||||
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
|
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
|
||||||
|
import { verifyPasswordToken } from '../../../api/auth';
|
||||||
|
import Spinner from 'shared/components/Spinner';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: { Spinner },
|
||||||
LoadingState,
|
|
||||||
},
|
|
||||||
props: {
|
props: {
|
||||||
confirmationToken: {
|
confirmationToken: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -21,7 +23,7 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
async confirmToken() {
|
async confirmToken() {
|
||||||
try {
|
try {
|
||||||
await Auth.verifyPasswordToken({
|
await verifyPasswordToken({
|
||||||
confirmationToken: this.confirmationToken,
|
confirmationToken: this.confirmationToken,
|
||||||
});
|
});
|
||||||
window.location = DEFAULT_REDIRECT_URL;
|
window.location = DEFAULT_REDIRECT_URL;
|
||||||
@@ -1,59 +1,63 @@
|
|||||||
<template>
|
<template>
|
||||||
<form
|
<div
|
||||||
class="login-box medium-4 column align-self-middle"
|
class="flex flex-col bg-woot-25 min-h-full w-full py-12 sm:px-6 lg:px-8 justify-center dark:bg-slate-900"
|
||||||
@submit.prevent="login()"
|
|
||||||
>
|
>
|
||||||
<div class="column log-in-form">
|
<form
|
||||||
<h4>{{ $t('SET_NEW_PASSWORD.TITLE') }}</h4>
|
class="sm:mx-auto sm:w-full sm:max-w-lg bg-white dark:bg-slate-800 p-11 shadow sm:shadow-lg sm:rounded-lg"
|
||||||
<label :class="{ error: $v.credentials.password.$error }">
|
@submit.prevent="submitForm"
|
||||||
{{ $t('LOGIN.PASSWORD.LABEL') }}
|
>
|
||||||
<input
|
<h1
|
||||||
|
class="mb-1 text-left text-2xl font-medium tracking-tight text-slate-900 dark:text-white"
|
||||||
|
>
|
||||||
|
{{ $t('SET_NEW_PASSWORD.TITLE') }}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="column log-in-form space-y-5">
|
||||||
|
<form-input
|
||||||
v-model.trim="credentials.password"
|
v-model.trim="credentials.password"
|
||||||
|
class="mt-3"
|
||||||
|
name="password"
|
||||||
type="password"
|
type="password"
|
||||||
|
:has-error="$v.credentials.password.$error"
|
||||||
|
:error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
|
||||||
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
|
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
|
||||||
@input="$v.credentials.password.$touch"
|
@blur="$v.credentials.password.$touch"
|
||||||
/>
|
/>
|
||||||
<span v-if="$v.credentials.password.$error" class="message">
|
<form-input
|
||||||
{{ $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"
|
v-model.trim="credentials.confirmPassword"
|
||||||
|
class="mt-3"
|
||||||
|
name="confirm_password"
|
||||||
type="password"
|
type="password"
|
||||||
|
:has-error="$v.credentials.confirmPassword.$error"
|
||||||
|
:error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
|
||||||
:placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
|
:placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
|
||||||
@input="$v.credentials.confirmPassword.$touch"
|
@blur="$v.credentials.confirmPassword.$touch"
|
||||||
/>
|
/>
|
||||||
<span v-if="$v.credentials.confirmPassword.$error" class="message">
|
<submit-button
|
||||||
{{ $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR') }}
|
:disabled="
|
||||||
</span>
|
$v.credentials.password.$invalid ||
|
||||||
</label>
|
$v.credentials.confirmPassword.$invalid ||
|
||||||
<woot-submit-button
|
newPasswordAPI.showLoading
|
||||||
:disabled="
|
"
|
||||||
$v.credentials.password.$invalid ||
|
:button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
|
||||||
$v.credentials.confirmPassword.$invalid ||
|
:loading="newPasswordAPI.showLoading"
|
||||||
newPasswordAPI.showLoading
|
/>
|
||||||
"
|
</div>
|
||||||
:button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
|
</form>
|
||||||
:loading="newPasswordAPI.showLoading"
|
</div>
|
||||||
button-class="expanded"
|
|
||||||
/>
|
|
||||||
<!-- <input type="submit" class="button " v-on:click.prevent="login()" v-bind:value="" > -->
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { required, minLength } from 'vuelidate/lib/validators';
|
import { required, minLength } from 'vuelidate/lib/validators';
|
||||||
import Auth from '../../api/auth';
|
import FormInput from '../../../components/Form/Input.vue';
|
||||||
|
import SubmitButton from '../../../components/Button/SubmitButton.vue';
|
||||||
import WootSubmitButton from '../../components/buttons/FormSubmitButton';
|
|
||||||
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
|
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
|
||||||
|
import { setNewPassword } from '../../../api/auth';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
WootSubmitButton,
|
FormInput,
|
||||||
|
SubmitButton,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
resetPasswordToken: { type: String, default: '' },
|
resetPasswordToken: { type: String, default: '' },
|
||||||
@@ -106,25 +110,21 @@ export default {
|
|||||||
this.newPasswordAPI.showLoading = false;
|
this.newPasswordAPI.showLoading = false;
|
||||||
bus.$emit('newToastMessage', message);
|
bus.$emit('newToastMessage', message);
|
||||||
},
|
},
|
||||||
login() {
|
submitForm() {
|
||||||
this.newPasswordAPI.showLoading = true;
|
this.newPasswordAPI.showLoading = true;
|
||||||
const credentials = {
|
const credentials = {
|
||||||
confirmPassword: this.credentials.confirmPassword,
|
confirmPassword: this.credentials.confirmPassword,
|
||||||
password: this.credentials.password,
|
password: this.credentials.password,
|
||||||
resetPasswordToken: this.resetPasswordToken,
|
resetPasswordToken: this.resetPasswordToken,
|
||||||
};
|
};
|
||||||
Auth.setNewPassword(credentials)
|
setNewPassword(credentials)
|
||||||
.then(res => {
|
.then(() => {
|
||||||
if (res.status === 200) {
|
window.location = DEFAULT_REDIRECT_URL;
|
||||||
window.location = DEFAULT_REDIRECT_URL;
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
let errorMessage = this.$t('SET_NEW_PASSWORD.API.ERROR_MESSAGE');
|
this.showAlert(
|
||||||
if (error?.data?.message) {
|
error?.message || this.$t('SET_NEW_PASSWORD.API.ERROR_MESSAGE')
|
||||||
errorMessage = error.data.message;
|
);
|
||||||
}
|
|
||||||
this.showAlert(errorMessage);
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
108
app/javascript/v3/views/auth/reset/password/Index.vue
Normal file
108
app/javascript/v3/views/auth/reset/password/Index.vue
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="flex flex-col bg-woot-25 min-h-full w-full py-12 sm:px-6 lg:px-8 justify-center dark:bg-slate-900"
|
||||||
|
>
|
||||||
|
<form
|
||||||
|
class="sm:mx-auto sm:w-full sm:max-w-lg bg-white dark:bg-slate-800 p-11 shadow sm:shadow-lg sm:rounded-lg"
|
||||||
|
@submit.prevent="submit"
|
||||||
|
>
|
||||||
|
<h1
|
||||||
|
class="mb-1 text-left text-2xl font-medium tracking-tight text-slate-900 dark:text-white"
|
||||||
|
>
|
||||||
|
{{ $t('RESET_PASSWORD.TITLE') }}
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
class="text-sm text-slate-600 dark:text-woot-50 tracking-normal font-normal leading-6 mb-4"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
useInstallationName(
|
||||||
|
$t('RESET_PASSWORD.DESCRIPTION'),
|
||||||
|
globalConfig.installationName
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
</p>
|
||||||
|
<div class="column log-in-form space-y-5">
|
||||||
|
<form-input
|
||||||
|
v-model.trim="credentials.email"
|
||||||
|
name="email_address"
|
||||||
|
:has-error="$v.credentials.email.$error"
|
||||||
|
:error-message="$t('RESET_PASSWORD.EMAIL.ERROR')"
|
||||||
|
:placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
|
||||||
|
@input="$v.credentials.email.$touch"
|
||||||
|
/>
|
||||||
|
<SubmitButton
|
||||||
|
:disabled="$v.credentials.email.$invalid || resetPassword.showLoading"
|
||||||
|
:button-text="$t('RESET_PASSWORD.SUBMIT')"
|
||||||
|
:loading="resetPassword.showLoading"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-slate-600 dark:text-woot-50 mt-4 -mb-1">
|
||||||
|
{{ $t('RESET_PASSWORD.GO_BACK_TO_LOGIN') }}
|
||||||
|
<router-link to="/auth/login" class="text-link">
|
||||||
|
{{ $t('COMMON.CLICK_HERE') }}.
|
||||||
|
</router-link>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { required, minLength, email } from 'vuelidate/lib/validators';
|
||||||
|
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
||||||
|
import { mapGetters } from 'vuex';
|
||||||
|
import FormInput from '../../../../components/Form/Input.vue';
|
||||||
|
import { resetPassword } from '../../../../api/auth';
|
||||||
|
import SubmitButton from '../../../../components/Button/SubmitButton.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { FormInput, SubmitButton },
|
||||||
|
mixins: [globalConfigMixin],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
credentials: { email: '' },
|
||||||
|
resetPassword: {
|
||||||
|
message: '',
|
||||||
|
showLoading: false,
|
||||||
|
},
|
||||||
|
error: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters({ globalConfig: 'globalConfig/get' }),
|
||||||
|
},
|
||||||
|
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;
|
||||||
|
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>
|
||||||
87
app/javascript/v3/views/auth/signup/Index.vue
Normal file
87
app/javascript/v3/views/auth/signup/Index.vue
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<div class="h-full w-full dark:bg-slate-900">
|
||||||
|
<div v-show="!isLoading" class="flex h-full">
|
||||||
|
<div
|
||||||
|
class="flex-1 min-h-[640px] inline-flex items-center h-full justify-center overflow-auto py-6"
|
||||||
|
>
|
||||||
|
<div class="px-8 max-w-[560px] w-full overflow-auto">
|
||||||
|
<div class="mb-4">
|
||||||
|
<img
|
||||||
|
:src="globalConfig.logo"
|
||||||
|
:alt="globalConfig.installationName"
|
||||||
|
class="h-8 w-auto block dark:hidden"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
v-if="globalConfig.logoDark"
|
||||||
|
:src="globalConfig.logoDark"
|
||||||
|
:alt="globalConfig.installationName"
|
||||||
|
class="h-8 w-auto hidden dark:block"
|
||||||
|
/>
|
||||||
|
<h2
|
||||||
|
class="mb-7 mt-6 text-left text-3xl font-medium text-slate-900 dark:text-woot-50"
|
||||||
|
>
|
||||||
|
{{ $t('REGISTER.TRY_WOOT') }}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<signup-form />
|
||||||
|
<div class="text-sm text-slate-800 dark:text-woot-50 px-1">
|
||||||
|
<span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
|
||||||
|
<router-link class="text-link" to="/app/login">
|
||||||
|
{{
|
||||||
|
useInstallationName(
|
||||||
|
$t('LOGIN.TITLE'),
|
||||||
|
globalConfig.installationName
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<testimonials
|
||||||
|
v-if="isAChatwootInstance"
|
||||||
|
class="flex-1"
|
||||||
|
@resize-containers="resizeContainers"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-show="isLoading"
|
||||||
|
class="flex items-center justify-center h-full w-full"
|
||||||
|
>
|
||||||
|
<spinner color-scheme="primary" 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 { isLoading: false };
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters({ globalConfig: 'globalConfig/get' }),
|
||||||
|
isAChatwootInstance() {
|
||||||
|
return this.globalConfig.installationName === 'Chatwoot';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
beforeMount() {
|
||||||
|
this.isLoading = this.isAChatwootInstance;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
resizeContainers() {
|
||||||
|
this.isLoading = false;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -1,101 +1,103 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="flex-1 overflow-auto px-1">
|
||||||
<form @submit.prevent="submit">
|
<form class="space-y-3" @submit.prevent="submit">
|
||||||
<div class="input-wrap">
|
<div class="flex">
|
||||||
<div class="input-wrap__two-column">
|
<form-input
|
||||||
<auth-input
|
v-model.trim="credentials.fullName"
|
||||||
v-model.trim="credentials.fullName"
|
name="full_name"
|
||||||
:class="{ error: $v.credentials.fullName.$error }"
|
class="flex-1"
|
||||||
:label="$t('REGISTER.FULL_NAME.LABEL')"
|
:class="{ error: $v.credentials.fullName.$error }"
|
||||||
icon-name="person"
|
:label="$t('REGISTER.FULL_NAME.LABEL')"
|
||||||
:placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
|
:placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
|
||||||
:error="
|
:has-error="$v.credentials.fullName.$error"
|
||||||
$v.credentials.fullName.$error
|
:error-message="$t('REGISTER.FULL_NAME.ERROR')"
|
||||||
? $t('REGISTER.FULL_NAME.ERROR')
|
@blur="$v.credentials.fullName.$touch"
|
||||||
: ''
|
|
||||||
"
|
|
||||||
@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
|
<form-input
|
||||||
v-model.trim="credentials.password"
|
v-model.trim="credentials.accountName"
|
||||||
type="password"
|
name="account_name"
|
||||||
:class="{ error: $v.credentials.password.$error }"
|
class="flex-1 ml-2"
|
||||||
icon-name="lock-closed"
|
:class="{ error: $v.credentials.accountName.$error }"
|
||||||
:label="$t('LOGIN.PASSWORD.LABEL')"
|
:label="$t('REGISTER.COMPANY_NAME.LABEL')"
|
||||||
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
|
:placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
|
||||||
:error="passwordErrorText"
|
:has-error="$v.credentials.accountName.$error"
|
||||||
@blur="$v.credentials.password.$touch"
|
:error-message="$t('REGISTER.COMPANY_NAME.ERROR')"
|
||||||
|
@blur="$v.credentials.accountName.$touch"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="globalConfig.hCaptchaSiteKey" class="h-captcha--box">
|
<form-input
|
||||||
|
v-model.trim="credentials.email"
|
||||||
|
type="email"
|
||||||
|
name="email_address"
|
||||||
|
:class="{ error: $v.credentials.email.$error }"
|
||||||
|
:label="$t('REGISTER.EMAIL.LABEL')"
|
||||||
|
:placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
|
||||||
|
:has-error="$v.credentials.email.$error"
|
||||||
|
:error-message="$t('REGISTER.EMAIL.ERROR')"
|
||||||
|
@blur="$v.credentials.email.$touch"
|
||||||
|
/>
|
||||||
|
<form-input
|
||||||
|
v-model.trim="credentials.password"
|
||||||
|
type="password"
|
||||||
|
name="password"
|
||||||
|
:class="{ error: $v.credentials.password.$error }"
|
||||||
|
:label="$t('LOGIN.PASSWORD.LABEL')"
|
||||||
|
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
|
||||||
|
:has-error="$v.credentials.password.$error"
|
||||||
|
:error-message="passwordErrorText"
|
||||||
|
@blur="$v.credentials.password.$touch"
|
||||||
|
/>
|
||||||
|
<div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
|
||||||
<vue-hcaptcha
|
<vue-hcaptcha
|
||||||
ref="hCaptcha"
|
ref="hCaptcha"
|
||||||
:class="{ error: !hasAValidCaptcha && didCaptchaReset }"
|
:class="{ error: !hasAValidCaptcha && didCaptchaReset }"
|
||||||
:sitekey="globalConfig.hCaptchaSiteKey"
|
:sitekey="globalConfig.hCaptchaSiteKey"
|
||||||
@verify="onRecaptchaVerified"
|
@verify="onRecaptchaVerified"
|
||||||
/>
|
/>
|
||||||
<span v-if="!hasAValidCaptcha && didCaptchaReset" class="captcha-error">
|
<span
|
||||||
|
v-if="!hasAValidCaptcha && didCaptchaReset"
|
||||||
|
class="text-xs text-red-400"
|
||||||
|
>
|
||||||
{{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
|
{{ $t('SET_NEW_PASSWORD.CAPTCHA.ERROR') }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<auth-submit-button
|
<submit-button
|
||||||
:label="$t('REGISTER.SUBMIT')"
|
:button-text="$t('REGISTER.SUBMIT')"
|
||||||
:is-disabled="isSignupInProgress || !hasAValidCaptcha"
|
:disabled="isSignupInProgress || !hasAValidCaptcha"
|
||||||
:is-loading="isSignupInProgress"
|
:loading="isSignupInProgress"
|
||||||
icon="arrow-chevron-right"
|
icon-class="arrow-chevron-right"
|
||||||
/>
|
/>
|
||||||
</form>
|
</form>
|
||||||
<GoogleOAuthButton v-if="showGoogleOAuth()">
|
<GoogleOAuthButton v-if="showGoogleOAuth" class="flex-col-reverse">
|
||||||
{{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
|
{{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
|
||||||
</GoogleOAuthButton>
|
</GoogleOAuthButton>
|
||||||
<p v-dompurify-html="termsLink" class="accept--terms" />
|
<p
|
||||||
|
class="text-sm mb-1 mt-5 text-slate-800 dark:text-woot-50 [&>a]:text-woot-500 [&>a]:font-medium [&>a]:hover:text-woot-600"
|
||||||
|
v-html="termsLink"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { required, minLength, email } from 'vuelidate/lib/validators';
|
import { required, minLength, email } from 'vuelidate/lib/validators';
|
||||||
import Auth from '../../../../api/auth';
|
|
||||||
import { mapGetters } from 'vuex';
|
import { mapGetters } from 'vuex';
|
||||||
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
||||||
import alertMixin from 'shared/mixins/alertMixin';
|
import alertMixin from 'shared/mixins/alertMixin';
|
||||||
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
|
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
|
||||||
import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
|
import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
|
||||||
import AuthInput from '../AuthInput.vue';
|
import FormInput from '../../../../../components/Form/Input.vue';
|
||||||
import AuthSubmitButton from '../AuthSubmitButton.vue';
|
import SubmitButton from '../../../../../components/Button/SubmitButton.vue';
|
||||||
import { isValidPassword } from 'shared/helpers/Validators';
|
import { isValidPassword } from 'shared/helpers/Validators';
|
||||||
import GoogleOAuthButton from 'dashboard/components/ui/Auth/GoogleOAuthButton.vue';
|
import GoogleOAuthButton from '../../../../../components/GoogleOauth/Button.vue';
|
||||||
|
import { register } from '../../../../../api/auth';
|
||||||
var CompanyEmailValidator = require('company-email-validator');
|
var CompanyEmailValidator = require('company-email-validator');
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
AuthInput,
|
FormInput,
|
||||||
AuthSubmitButton,
|
|
||||||
VueHcaptcha,
|
|
||||||
GoogleOAuthButton,
|
GoogleOAuthButton,
|
||||||
|
SubmitButton,
|
||||||
|
VueHcaptcha,
|
||||||
},
|
},
|
||||||
mixins: [globalConfigMixin, alertMixin],
|
mixins: [globalConfigMixin, alertMixin],
|
||||||
data() {
|
data() {
|
||||||
@@ -165,6 +167,9 @@ export default {
|
|||||||
}
|
}
|
||||||
return '';
|
return '';
|
||||||
},
|
},
|
||||||
|
showGoogleOAuth() {
|
||||||
|
return Boolean(window.chatwootConfig.googleOAuthClientId);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async submit() {
|
async submit() {
|
||||||
@@ -175,16 +180,12 @@ export default {
|
|||||||
}
|
}
|
||||||
this.isSignupInProgress = true;
|
this.isSignupInProgress = true;
|
||||||
try {
|
try {
|
||||||
const response = await Auth.register(this.credentials);
|
await register(this.credentials);
|
||||||
if (response.status === 200) {
|
window.location = DEFAULT_REDIRECT_URL;
|
||||||
window.location = DEFAULT_REDIRECT_URL;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
let errorMessage = this.$t('REGISTER.API.ERROR_MESSAGE');
|
let errorMessage =
|
||||||
if (error.response && error.response.data.message) {
|
error?.message || this.$t('REGISTER.API.ERROR_MESSAGE');
|
||||||
this.resetCaptcha();
|
this.resetCaptcha();
|
||||||
errorMessage = error.response.data.message;
|
|
||||||
}
|
|
||||||
this.showAlert(errorMessage);
|
this.showAlert(errorMessage);
|
||||||
} finally {
|
} finally {
|
||||||
this.isSignupInProgress = false;
|
this.isSignupInProgress = false;
|
||||||
@@ -194,9 +195,6 @@ export default {
|
|||||||
this.credentials.hCaptchaClientResponse = token;
|
this.credentials.hCaptchaClientResponse = token;
|
||||||
this.didCaptchaReset = false;
|
this.didCaptchaReset = false;
|
||||||
},
|
},
|
||||||
showGoogleOAuth() {
|
|
||||||
return Boolean(window.chatwootConfig.googleOAuthClientId);
|
|
||||||
},
|
|
||||||
resetCaptcha() {
|
resetCaptcha() {
|
||||||
if (!this.globalConfig.hCaptchaSiteKey) {
|
if (!this.globalConfig.hCaptchaSiteKey) {
|
||||||
return;
|
return;
|
||||||
@@ -210,13 +208,6 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.h-captcha--box {
|
.h-captcha--box {
|
||||||
margin-bottom: var(--space-small);
|
|
||||||
|
|
||||||
.captcha-error {
|
|
||||||
color: var(--r-400);
|
|
||||||
font-size: var(--font-size-small);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::v-deep .error {
|
&::v-deep .error {
|
||||||
iframe {
|
iframe {
|
||||||
border: 1px solid var(--r-500);
|
border: 1px solid var(--r-500);
|
||||||
@@ -224,32 +215,4 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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>
|
</style>
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
v-if="testimonials.length"
|
||||||
|
class="hidden bg-woot-400 dark:bg-woot-800 overflow-hidden relative xl:flex flex-1"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/assets/images/auth/top-left.svg"
|
||||||
|
class="left-0 absolute h-40 w-40 top-0"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src="/assets/images/auth/bottom-right.svg"
|
||||||
|
class="right-0 absolute h-40 w-40 bottom-0"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src="/assets/images/auth/auth--bg.svg"
|
||||||
|
class="h-[96%] left-[6%] top-[8%] w-[96%] absolute"
|
||||||
|
/>
|
||||||
|
<div class="flex items-center justify-center flex-col h-full w-full z-50">
|
||||||
|
<div class="flex items-start justify-center p-6">
|
||||||
|
<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="!index ? 'mt-[20%] -mr-4 z-50' : ''"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TestimonialCard from './TestimonialCard.vue';
|
||||||
|
import { getTestimonialContent } from '../../../../../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>
|
||||||
|
.center--img {
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="flex flex-col items-start justify-center p-6 w-80 bg-white rounded-lg drop-shadow-md dark:bg-slate-800"
|
||||||
|
>
|
||||||
|
<p class="text-sm text-slate-600 dark:text-woot-50 tracking-normal">
|
||||||
|
{{ reviewContent }}
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center mt-4 text-slate-700 dark:text-woot-50">
|
||||||
|
<div class="bg-white rounded-full p-1">
|
||||||
|
<img :src="authorImage" class="h-8 w-8 rounded-full" />
|
||||||
|
</div>
|
||||||
|
<div class="ml-2">
|
||||||
|
<div class="text-sm font-medium">{{ authorName }}</div>
|
||||||
|
<div class="text-xs">{{ authorDesignation }}</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: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
20
app/javascript/v3/views/index.js
Normal file
20
app/javascript/v3/views/index.js
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import VueRouter from 'vue-router';
|
||||||
|
|
||||||
|
import routes from './routes';
|
||||||
|
import AnalyticsHelper from 'dashboard/helper/AnalyticsHelper';
|
||||||
|
import { validateRouteAccess } from '../helpers/RouteHelper';
|
||||||
|
|
||||||
|
export const router = new VueRouter({ mode: 'history', routes });
|
||||||
|
|
||||||
|
export const initalizeRouter = () => {
|
||||||
|
router.beforeEach((to, _, next) => {
|
||||||
|
AnalyticsHelper.page(to.name || '', {
|
||||||
|
path: to.path,
|
||||||
|
name: to.name,
|
||||||
|
});
|
||||||
|
|
||||||
|
return validateRouteAccess(to, next, window.chatwootConfig);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export default router;
|
||||||
201
app/javascript/v3/views/login/Index.vue
Normal file
201
app/javascript/v3/views/login/Index.vue
Normal file
@@ -0,0 +1,201 @@
|
|||||||
|
<template>
|
||||||
|
<main
|
||||||
|
class="flex flex-col bg-woot-25 min-h-full w-full py-12 sm:px-6 lg:px-8 justify-center dark:bg-slate-900"
|
||||||
|
>
|
||||||
|
<section class="max-w-5xl mx-auto">
|
||||||
|
<img
|
||||||
|
:src="globalConfig.logo"
|
||||||
|
:alt="globalConfig.installationName"
|
||||||
|
class="mx-auto h-8 w-auto block dark:hidden"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
v-if="globalConfig.logoDark"
|
||||||
|
:src="globalConfig.logoDark"
|
||||||
|
:alt="globalConfig.installationName"
|
||||||
|
class="mx-auto h-8 w-auto hidden dark:block"
|
||||||
|
/>
|
||||||
|
<h2
|
||||||
|
class="mt-6 text-center text-3xl font-medium text-slate-900 dark:text-woot-50"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
useInstallationName($t('LOGIN.TITLE'), globalConfig.installationName)
|
||||||
|
}}
|
||||||
|
</h2>
|
||||||
|
<p
|
||||||
|
v-if="showSignupLink"
|
||||||
|
class="mt-3 text-center text-sm text-slate-600 dark:text-slate-400"
|
||||||
|
>
|
||||||
|
{{ $t('COMMON.OR') }}
|
||||||
|
<router-link to="auth/signup" class="text-link">
|
||||||
|
{{ $t('LOGIN.CREATE_NEW_ACCOUNT') }}
|
||||||
|
</router-link>
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<section
|
||||||
|
class="sm:mx-auto mt-11 sm:w-full sm:max-w-lg bg-white dark:bg-slate-800 p-11 shadow sm:shadow-lg sm:rounded-lg"
|
||||||
|
:class="{ 'mb-8 mt-15': !showGoogleOAuth }"
|
||||||
|
>
|
||||||
|
<div v-if="!email">
|
||||||
|
<GoogleOAuthButton v-if="showGoogleOAuth" />
|
||||||
|
<form class="space-y-5" @submit.prevent="submitLogin">
|
||||||
|
<form-input
|
||||||
|
v-model.trim="credentials.email"
|
||||||
|
name="email_address"
|
||||||
|
type="text"
|
||||||
|
data-testid="email_input"
|
||||||
|
required
|
||||||
|
:label="$t('LOGIN.EMAIL.LABEL')"
|
||||||
|
:placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
|
||||||
|
:has-error="$v.credentials.email.$error"
|
||||||
|
@input="$v.credentials.email.$touch"
|
||||||
|
/>
|
||||||
|
<form-input
|
||||||
|
v-model.trim="credentials.password"
|
||||||
|
type="password"
|
||||||
|
name="password"
|
||||||
|
data-testid="password_input"
|
||||||
|
required
|
||||||
|
:label="$t('LOGIN.PASSWORD.LABEL')"
|
||||||
|
:placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
|
||||||
|
:has-error="$v.credentials.password.$error"
|
||||||
|
@input="$v.credentials.password.$touch"
|
||||||
|
>
|
||||||
|
<p v-if="!globalConfig.disableUserProfileUpdate">
|
||||||
|
<router-link to="auth/reset/password" class="text-link">
|
||||||
|
{{ $t('LOGIN.FORGOT_PASSWORD') }}
|
||||||
|
</router-link>
|
||||||
|
</p>
|
||||||
|
</form-input>
|
||||||
|
<submit-button
|
||||||
|
:disabled="
|
||||||
|
$v.credentials.email.$invalid ||
|
||||||
|
$v.credentials.password.$invalid ||
|
||||||
|
loginApi.showLoading
|
||||||
|
"
|
||||||
|
:button-text="$t('LOGIN.SUBMIT')"
|
||||||
|
:loading="loginApi.showLoading"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div v-else class="flex items-center justify-center">
|
||||||
|
<spinner color-scheme="primary" size="" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { required, email } from 'vuelidate/lib/validators';
|
||||||
|
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
||||||
|
import SubmitButton from '../../components/Button/SubmitButton';
|
||||||
|
import { mapGetters } from 'vuex';
|
||||||
|
import { parseBoolean } from '@chatwoot/utils';
|
||||||
|
import GoogleOAuthButton from '../../components/GoogleOauth/Button.vue';
|
||||||
|
import FormInput from '../../components/Form/Input.vue';
|
||||||
|
import { login } from '../../api/auth';
|
||||||
|
import Spinner from 'shared/components/Spinner';
|
||||||
|
const ERROR_MESSAGES = {
|
||||||
|
'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
|
||||||
|
'business-account-only': 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
FormInput,
|
||||||
|
GoogleOAuthButton,
|
||||||
|
Spinner,
|
||||||
|
SubmitButton,
|
||||||
|
},
|
||||||
|
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' }),
|
||||||
|
showGoogleOAuth() {
|
||||||
|
return Boolean(window.chatwootConfig.googleOAuthClientId);
|
||||||
|
},
|
||||||
|
showSignupLink() {
|
||||||
|
return parseBoolean(window.chatwootConfig.signupEnabled);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (this.ssoAuthToken) {
|
||||||
|
this.submitLogin();
|
||||||
|
}
|
||||||
|
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);
|
||||||
|
},
|
||||||
|
submitLogin() {
|
||||||
|
this.loginApi.showLoading = true;
|
||||||
|
const credentials = {
|
||||||
|
email: this.email
|
||||||
|
? decodeURIComponent(this.email)
|
||||||
|
: this.credentials.email,
|
||||||
|
password: this.credentials.password,
|
||||||
|
sso_auth_token: this.ssoAuthToken,
|
||||||
|
ssoAccountId: this.ssoAccountId,
|
||||||
|
ssoConversationId: this.ssoConversationId,
|
||||||
|
};
|
||||||
|
|
||||||
|
login(credentials)
|
||||||
|
.then(() => {
|
||||||
|
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';
|
||||||
|
}
|
||||||
|
this.showAlert(response?.message || this.$t('LOGIN.API.UNAUTH'));
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
56
app/javascript/v3/views/routes.js
Normal file
56
app/javascript/v3/views/routes.js
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
import { frontendURL } from 'dashboard/helper/URLHelper';
|
||||||
|
|
||||||
|
const Login = () => import('./login/Index.vue');
|
||||||
|
const Signup = () => import('./auth/signup/Index.vue');
|
||||||
|
const ResetPassword = () => import('./auth/reset/password/Index.vue');
|
||||||
|
const Confirmation = () => import('./auth/confirmation/Index.vue');
|
||||||
|
const PasswordEdit = () => import('./auth/password/Edit.vue');
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{
|
||||||
|
path: frontendURL('login'),
|
||||||
|
name: 'login',
|
||||||
|
component: Login,
|
||||||
|
props: route => ({
|
||||||
|
config: route.query.config,
|
||||||
|
email: route.query.email,
|
||||||
|
ssoAuthToken: route.query.sso_auth_token,
|
||||||
|
ssoAccountId: route.query.sso_account_id,
|
||||||
|
ssoConversationId: route.query.sso_conversation_id,
|
||||||
|
authError: route.query.error,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: frontendURL('auth/signup'),
|
||||||
|
name: 'auth_signup',
|
||||||
|
component: Signup,
|
||||||
|
meta: { requireSignupEnabled: true },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: frontendURL('auth/confirmation'),
|
||||||
|
name: 'auth_confirmation',
|
||||||
|
component: Confirmation,
|
||||||
|
meta: { ignoreSession: true },
|
||||||
|
props: route => ({
|
||||||
|
config: route.query.config,
|
||||||
|
confirmationToken: route.query.confirmation_token,
|
||||||
|
redirectUrl: route.query.route_url,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: frontendURL('auth/password/edit'),
|
||||||
|
name: 'auth_password_edit',
|
||||||
|
component: PasswordEdit,
|
||||||
|
meta: { ignoreSession: true },
|
||||||
|
props: route => ({
|
||||||
|
config: route.query.config,
|
||||||
|
resetPasswordToken: route.query.reset_password_token,
|
||||||
|
redirectUrl: route.query.route_url,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: frontendURL('auth/reset/password'),
|
||||||
|
name: 'auth_reset_password',
|
||||||
|
component: ResetPassword,
|
||||||
|
},
|
||||||
|
];
|
||||||
@@ -60,8 +60,8 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<% end %>
|
<% end %>
|
||||||
<%= javascript_pack_tag 'application' %>
|
<%= javascript_pack_tag @application_pack %>
|
||||||
<%= stylesheet_pack_tag 'application' %>
|
<%= stylesheet_pack_tag @application_pack %>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
@@ -73,4 +73,4 @@
|
|||||||
- name: CSML_EDITOR_HOST
|
- name: CSML_EDITOR_HOST
|
||||||
value:
|
value:
|
||||||
- name: LOGO_DARK
|
- name: LOGO_DARK
|
||||||
value: '/brand-assets/logo-dark.svg'
|
value: '/brand-assets/logo_dark.svg'
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
"eslint": "eslint app/**/*.{js,vue}",
|
"eslint": "eslint app/**/*.{js,vue}",
|
||||||
"eslint:fix": "eslint app/**/*.{js,vue} --fix",
|
"eslint:fix": "eslint app/**/*.{js,vue} --fix",
|
||||||
"pretest": "rimraf .jest-cache",
|
"pretest": "rimraf .jest-cache",
|
||||||
"test": "jest -w 1 --no-cache",
|
"test": "jest -w 1 --no-cache",
|
||||||
"test:watch": "jest -w 1 --watch --no-cache",
|
"test:watch": "jest -w 1 --watch --no-cache",
|
||||||
"test:coverage": "jest -w 1 --no-cache --collectCoverage",
|
"test:coverage": "jest -w 1 --no-cache --collectCoverage",
|
||||||
"webpacker-start": "webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors",
|
"webpacker-start": "webpack-dev-server -d --config webpack.dev.config.js --content-base public/ --progress --colors",
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
@@ -2,6 +2,7 @@ module.exports = {
|
|||||||
darkMode: 'class',
|
darkMode: 'class',
|
||||||
content: [
|
content: [
|
||||||
'./app/javascript/widget/**/*.vue',
|
'./app/javascript/widget/**/*.vue',
|
||||||
|
'./app/javascript/v3/**/*.vue',
|
||||||
'./app/javascript/portal/**/*.vue',
|
'./app/javascript/portal/**/*.vue',
|
||||||
'./app/javascript/shared/**/*.vue',
|
'./app/javascript/shared/**/*.vue',
|
||||||
'./app/javascript/survey/**/*.vue',
|
'./app/javascript/survey/**/*.vue',
|
||||||
|
|||||||
Reference in New Issue
Block a user