scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-02 12:08:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Support dark mode in login pages (#7420)

Browse Source 
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Pranav Raj S
2023-06-30 19:19:52 -07:00
committed by GitHub
parent 022f4f899f
commit b57063a8b8
57 changed files with 1516 additions and 1483 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/controllers/dashboard_controller.rb
View File

@@ -1,6 +1,7 @@
class DashboardController < ActionController::Base
include SwitchLocale
before_action :set_application_pack
before_action :set_global_config
around_action :switch_locale
before_action :ensure_installation_onboarding, only: [:index]
@@ -60,4 +61,12 @@ class DashboardController < ActionController::Base
GIT_SHA: GIT_HASH
}
end
def set_application_pack
@application_pack = if request.path.include?('/auth') || request.path.include?('/login')
'v3app'
else
'application'
end
end
end

75
app/javascript/dashboard/api/auth.js
View File

@@ -3,47 +3,11 @@
import Cookies from 'js-cookie';
import endPoints from './endPoints';
import {
setAuthCredentials,
clearCookiesOnLogout,
deleteIndexedDBOnLogout,
} from '../store/utils/api';
export default {
login(creds) {
return new Promise((resolve, reject) => {
axios
.post('auth/sign_in', creds)
.then(response => {
setAuthCredentials(response);
resolve(response.data);
})
.catch(error => {
reject(error.response);
});
});
},
register(creds) {
const urlData = endPoints('register');
const fetchPromise = new Promise((resolve, reject) => {
axios
.post(urlData.url, {
account_name: creds.accountName.trim(),
user_full_name: creds.fullName.trim(),
email: creds.email,
password: creds.password,
h_captcha_client_response: creds.hCaptchaClientResponse,
})
.then(response => {
setAuthCredentials(response);
resolve(response);
})
.catch(error => {
reject(error);
});
});
return fetchPromise;
},
validityCheck() {
const urlData = endPoints('validityCheck');
return axios.get(urlData.url);
@@ -73,45 +37,6 @@ export default {
}
return false;
},
verifyPasswordToken({ confirmationToken }) {
return new Promise((resolve, reject) => {
axios
.post('auth/confirmation', {
confirmation_token: confirmationToken,
})
.then(response => {
setAuthCredentials(response);
resolve(response);
})
.catch(error => {
reject(error.response);
});
});
},
setNewPassword({ resetPasswordToken, password, confirmPassword }) {
return new Promise((resolve, reject) => {
axios
.put('auth/password', {
reset_password_token: resetPasswordToken,
password_confirmation: confirmPassword,
password,
})
.then(response => {
setAuthCredentials(response);
resolve(response);
})
.catch(error => {
reject(error.response);
});
});
},
resetPassword({ email }) {
const urlData = endPoints('resetPassword');
return axios.post(urlData.url, { email });
},
profileUpdate({
password,
password_confirmation,

96
app/javascript/dashboard/components/ui/Auth/GoogleOAuthButton.vue
View File

@@ -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>

33
app/javascript/dashboard/helper/URLHelper.js
View File

@@ -1,41 +1,8 @@
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
export const frontendURL = (path, params) => {
const stringifiedParams = params ? `?${new URLSearchParams(params)}` : '';
return `/app/${path}${stringifiedParams}`;
};
const getSSOAccountPath = ({ ssoAccountId, user }) => {
const { accounts = [], account_id = null } = user || {};
const ssoAccount = accounts.find(
account => account.id === Number(ssoAccountId)
);
let accountPath = '';
if (ssoAccount) {
accountPath = `accounts/${ssoAccountId}`;
} else if (accounts.length) {
// If the account id is not found, redirect to the first account
const accountId = account_id || accounts[0].id;
accountPath = `accounts/${accountId}`;
}
return accountPath;
};
export const getLoginRedirectURL = ({
ssoAccountId,
ssoConversationId,
user,
}) => {
const accountPath = getSSOAccountPath({ ssoAccountId, user });
if (accountPath) {
if (ssoConversationId) {
return frontendURL(`${accountPath}/conversations/${ssoConversationId}`);
}
return frontendURL(`${accountPath}/dashboard`);
}
return DEFAULT_REDIRECT_URL;
};
export const conversationUrl = ({
accountId,
activeInbox,

41
app/javascript/dashboard/helper/specs/URLHelper.spec.js
View File

@@ -2,7 +2,6 @@ import {
frontendURL,
conversationUrl,
isValidURL,
getLoginRedirectURL,
conversationListPageURL,
} from '../URLHelper';
@@ -76,44 +75,4 @@ describe('#URL Helpers', () => {
expect(isValidURL('alert.window')).toBe(false);
});
});
describe('getLoginRedirectURL', () => {
it('should return correct Account URL if account id is present', () => {
expect(
getLoginRedirectURL({
ssoAccountId: '7500',
user: {
accounts: [{ id: 7500, name: 'Test Account 7500' }],
},
})
).toBe('/app/accounts/7500/dashboard');
});
it('should return correct conversation URL if account id and conversationId is present', () => {
expect(
getLoginRedirectURL({
ssoAccountId: '7500',
ssoConversationId: '752',
user: {
accounts: [{ id: 7500, name: 'Test Account 7500' }],
},
})
).toBe('/app/accounts/7500/conversations/752');
});
it('should return default URL if account id is not present', () => {
expect(getLoginRedirectURL({ ssoAccountId: '7500', user: {} })).toBe(
'/app/'
);
expect(
getLoginRedirectURL({
ssoAccountId: '7500',
user: {
accounts: [{ id: '7501', name: 'Test Account 7501' }],
},
})
).toBe('/app/accounts/7501/dashboard');
expect(getLoginRedirectURL('7500', null)).toBe('/app/');
});
});
});

4
app/javascript/dashboard/i18n/locale/en/generalSettings.json
View File

@@ -151,5 +151,9 @@
},
"DASHBOARD_APPS": {
"LOADING_MESSAGE": "Loading Dashboard App..."
},
"COMMON": {
"OR": "Or",
"CLICK_HERE": "click here"
}
}

2
app/javascript/dashboard/i18n/locale/en/resetPassword.json
View File

@@ -1,6 +1,8 @@
{
"RESET_PASSWORD": {
"TITLE": "Reset password",
"DESCRIPTION": "Enter the email address you use to log in to Chatwoot to get the password reset instructions.",
"GO_BACK_TO_LOGIN": "If you want to go back to the login page,",
"EMAIL": {
"LABEL": "Email",
"PLACEHOLDER": "Please enter your email.",

5
app/javascript/dashboard/routes/auth/Auth.vue
View File

@@ -1,5 +0,0 @@
<template>
<div class="row auth-wrap login align-center">
<router-view />
</div>
</template>

84
app/javascript/dashboard/routes/auth/ResetPassword.vue
View File

@@ -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>

133
app/javascript/dashboard/routes/auth/Signup.vue
View File

@@ -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>

50
app/javascript/dashboard/routes/auth/auth.routes.js
View File

@@ -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,
},
],
},
],
};

93
app/javascript/dashboard/routes/auth/components/AuthInput.vue
View File

@@ -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>

120
app/javascript/dashboard/routes/auth/components/Testimonials/Index.vue
View File

@@ -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>

93
app/javascript/dashboard/routes/auth/components/Testimonials/TestimonialCard.vue
View File

@@ -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>

47
app/javascript/dashboard/routes/auth/components/Testimonials/TestimonialFooter.vue
View File

@@ -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>

105
app/javascript/dashboard/routes/index.js
View File

@@ -1,15 +1,12 @@
import VueRouter from 'vue-router';
import { frontendURL } from '../helper/URLHelper';
import { clearBrowserSessionCookies } from '../store/utils/api';
import authRoute from './auth/auth.routes';
import dashboard from './dashboard/dashboard.routes';
import login from './login/login.routes';
import store from '../store';
import { validateLoggedInRoutes } from '../helper/routeHelpers';
import AnalyticsHelper from '../helper/AnalyticsHelper';
const routes = [...login.routes, ...dashboard.routes, ...authRoute.routes];
const routes = [...dashboard.routes];
window.roleWiseRoutes = {
agent: [],
@@ -36,86 +33,26 @@ generateRoleWiseRoute(routes);
export const router = new VueRouter({ mode: 'history', routes });
const unProtectedRoutes = ['login', 'auth_signup', 'auth_reset_password'];
export const validateAuthenticateRoutePermission = (to, next, { getters }) => {
const { isLoggedIn, getCurrentUser: user } = getters;
const authIgnoreRoutes = [
'auth_confirmation',
'pushBack',
'auth_password_edit',
'oauth-callback',
];
if (!isLoggedIn) {
window.location = '/app/login';
return '/app/login';
}
const routeValidators = [
{
protected: false,
loggedIn: true,
handler: (_, getters) => {
const user = getters.getCurrentUser;
return `accounts/${user.account_id}/dashboard`;
},
},
{
protected: true,
loggedIn: false,
handler: () => 'login',
},
{
protected: true,
loggedIn: true,
handler: (to, getters) =>
validateLoggedInRoutes(to, getters.getCurrentUser, window.roleWiseRoutes),
},
{
protected: false,
loggedIn: false,
handler: () => null,
},
];
if (!to.name) {
return next(frontendURL(`accounts/${user.account_id}/dashboard`));
}
export const validateAuthenticateRoutePermission = (
const nextRoute = validateLoggedInRoutes(
to,
from,
next,
{ getters }
) => {
const isLoggedIn = getters.isLoggedIn;
const isProtectedRoute = !unProtectedRoutes.includes(to.name);
const strategy = routeValidators.find(
validator =>
validator.protected === isProtectedRoute &&
validator.loggedIn === isLoggedIn
getters.getCurrentUser,
window.roleWiseRoutes
);
const nextRoute = strategy.handler(to, getters);
return nextRoute ? next(frontendURL(nextRoute)) : next();
};
const validateSSOLoginParams = to => {
const isLoginRoute = to.name === 'login';
const { email, sso_auth_token: ssoAuthToken } = to.query || {};
const hasValidSSOParams = email && ssoAuthToken;
return isLoginRoute && hasValidSSOParams;
};
export const validateRouteAccess = (to, from, next, { getters }) => {
// Disable navigation to signup page if signups are disabled
// Signup route has an attribute (requireSignupEnabled)
// defined in it's route definition
if (
window.chatwootConfig.signupEnabled !== 'true' &&
to.meta &&
to.meta.requireSignupEnabled
) {
return next(frontendURL('login'));
}
// For routes which doesn't care about authentication, skip validation
if (authIgnoreRoutes.includes(to.name)) {
return next();
}
return validateAuthenticateRoutePermission(to, from, next, { getters });
};
export const initalizeRouter = () => {
const userAuthentication = store.dispatch('setUser');
@@ -125,22 +62,8 @@ export const initalizeRouter = () => {
name: to.name,
});
if (validateSSOLoginParams(to)) {
clearBrowserSessionCookies();
next();
return;
}
userAuthentication.then(() => {
if (!to.name) {
const { isLoggedIn, getCurrentUser: user } = store.getters;
if (isLoggedIn) {
return next(frontendURL(`accounts/${user.account_id}/dashboard`));
}
return next('/app/login');
}
return validateRouteAccess(to, from, next, store);
return validateAuthenticateRoutePermission(to, next, store);
});
});
};

78
app/javascript/dashboard/routes/index.spec.js
View File

@@ -1,52 +1,17 @@
import 'expect-more-jest';
import {
validateAuthenticateRoutePermission,
validateRouteAccess,
} from './index';
import { validateAuthenticateRoutePermission } from './index';
jest.mock('./dashboard/dashboard.routes', () => ({
routes: [],
}));
jest.mock('./auth/auth.routes', () => ({
routes: [],
}));
jest.mock('./login/login.routes', () => ({
routes: [],
}));
window.roleWiseRoutes = {};
describe('#validateAuthenticateRoutePermission', () => {
describe(`when route is not protected`, () => {
it(`should go to the dashboard when user is logged in`, () => {
const to = { name: 'login', params: { accountId: 1 } };
const from = { name: '', params: { accountId: 1 } };
const next = jest.fn();
const getters = {
isLoggedIn: true,
getCurrentUser: {
account_id: 1,
id: 1,
accounts: [{ id: 1, role: 'admin', status: 'active' }],
},
};
validateAuthenticateRoutePermission(to, from, next, { getters });
expect(next).toHaveBeenCalledWith('/app/accounts/1/dashboard');
});
it(`should go there when user is not logged in`, () => {
const to = { name: 'login', params: {} };
const from = { name: '', params: {} };
const next = jest.fn();
const getters = { isLoggedIn: false };
validateAuthenticateRoutePermission(to, from, next, { getters });
expect(next).toHaveBeenCalledWith();
});
});
describe(`when route is protected`, () => {
describe(`when user not logged in`, () => {
it(`should redirect to login`, () => {
// Arrange
const to = { name: 'some-protected-route', params: { accountId: 1 } };
const from = { name: '' };
const next = jest.fn();
const getters = {
isLoggedIn: false,
@@ -56,8 +21,10 @@ describe('#validateAuthenticateRoutePermission', () => {
accounts: [],
},
};
validateAuthenticateRoutePermission(to, from, next, { getters });
expect(next).toHaveBeenCalledWith('/app/login');
expect(validateAuthenticateRoutePermission(to, next, { getters })).toBe(
'/app/login'
);
});
});
describe(`when user is logged in`, () => {
@@ -65,7 +32,6 @@ describe('#validateAuthenticateRoutePermission', () => {
it(`should redirect to dashboard`, () => {
window.roleWiseRoutes.agent = ['dashboard'];
const to = { name: 'admin', params: { accountId: 1 } };
const from = { name: '' };
const next = jest.fn();
const getters = {
isLoggedIn: true,
@@ -75,7 +41,7 @@ describe('#validateAuthenticateRoutePermission', () => {
accounts: [{ id: 1, role: 'agent', status: 'active' }],
},
};
validateAuthenticateRoutePermission(to, from, next, { getters });
validateAuthenticateRoutePermission(to, next, { getters });
expect(next).toHaveBeenCalledWith('/app/accounts/1/dashboard');
});
});
@@ -83,7 +49,6 @@ describe('#validateAuthenticateRoutePermission', () => {
it(`should go there`, () => {
window.roleWiseRoutes.agent = ['dashboard', 'admin'];
const to = { name: 'admin', params: { accountId: 1 } };
const from = { name: '' };
const next = jest.fn();
const getters = {
isLoggedIn: true,
@@ -93,39 +58,10 @@ describe('#validateAuthenticateRoutePermission', () => {
accounts: [{ id: 1, role: 'agent', status: 'active' }],
},
};
validateAuthenticateRoutePermission(to, from, next, { getters });
validateAuthenticateRoutePermission(to, next, { getters });
expect(next).toHaveBeenCalledWith();
});
});
});
});
});
describe('#validateRouteAccess', () => {
it('returns to login if signup is disabled', () => {
window.chatwootConfig = { signupEnabled: 'false' };
const to = { name: 'auth_signup', meta: { requireSignupEnabled: true } };
const from = { name: '' };
const next = jest.fn();
validateRouteAccess(to, from, next, {});
expect(next).toHaveBeenCalledWith('/app/login');
});
it('returns next for an auth ignore route ', () => {
const to = { name: 'auth_confirmation' };
const from = { name: '' };
const next = jest.fn();
validateRouteAccess(to, from, next, {});
expect(next).toHaveBeenCalledWith();
});
it('returns route validation for everything else ', () => {
const to = { name: 'login' };
const from = { name: '' };
const next = jest.fn();
validateRouteAccess(to, from, next, { getters: { isLoggedIn: false } });
expect(next).toHaveBeenCalledWith();
});
});

208
app/javascript/dashboard/routes/login/Login.vue
View File

@@ -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>

20
app/javascript/dashboard/routes/login/login.routes.js
View File

@@ -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,
}),
},
],
};

25
app/javascript/dashboard/store/modules/auth.js
View File

@@ -2,12 +2,7 @@ import Vue from 'vue';
import types from '../mutation-types';
import authAPI from '../../api/auth';
import {
setUser,
clearCookiesOnLogout,
clearLocalStorageOnLogout,
} from '../utils/api';
import { getLoginRedirectURL } from '../../helper/URLHelper';
import { setUser, clearCookiesOnLogout } from '../utils/api';
const initialState = {
currentUser: {
@@ -97,24 +92,6 @@ export const getters = {
// actions
export const actions = {
login(_, { ssoAccountId, ssoConversationId, ...credentials }) {
return new Promise((resolve, reject) => {
authAPI
.login(credentials)
.then(response => {
clearLocalStorageOnLogout();
window.location = getLoginRedirectURL({
ssoAccountId,
ssoConversationId,
user: response.data,
});
resolve();
})
.catch(error => {
reject(error);
});
});
},
async validityCheck(context) {
try {
const response = await authAPI.validityCheck();

3
app/javascript/dashboard/store/utils/api.js
View File

@@ -67,6 +67,9 @@ export const parseAPIErrorResponse = error => {
if (error?.response?.data?.error) {
return error?.response?.data?.error;
}
if (error?.response?.data?.errors) {
return error?.response?.data?.errors[0];
}
return error;
};

61
app/javascript/packs/v3app.js Normal file
View 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');
};

11
app/javascript/shared/components/Spinner.vue
View File

@@ -1,5 +1,5 @@
<template>
<span class="spinner" :class="`${size} ${colorScheme}`" />
<span class="spinner" :class="`${size} ${colorSchemeClasses}`" />
</template>
<script>
export default {
@@ -13,6 +13,15 @@ export default {
default: '',
},
},
computed: {
colorSchemeClasses() {
if (this.colorScheme === 'primary') {
return 'before:!border-t-woot-500';
}
return this.colorScheme;
},
},
};
</script>
<style scoped lang="scss">

1
app/javascript/shared/constants/busEvents.js
View File

@@ -7,4 +7,5 @@ export const BUS_EVENTS = {
TOGGLE_SIDEMENU: 'TOGGLE_SIDEMENU',
ON_MESSAGE_LIST_SCROLL: 'ON_MESSAGE_LIST_SCROLL',
WEBSOCKET_DISCONNECT: 'WEBSOCKET_DISCONNECT',
SHOW_TOAST: 'newToastMessage',
};

71
app/javascript/v3/App.vue Normal file
View 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
View 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
View 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 });

4
app/javascript/dashboard/api/testimonials.js → app/javascript/v3/api/testimonials.js
View File

@@ -1,6 +1,6 @@
/* global axios */
import wootConstants from 'dashboard/constants/globals';
import wootAPI from './apiClient';
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
View 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
View 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
View 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>

29
app/javascript/dashboard/components/ui/Auth/GoogleOAuthButton.spec.js → app/javascript/v3/components/GoogleOauth/Button.spec.js
View File

@@ -1,9 +1,9 @@
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, {
propsData: { showSeparator: showSeparator, buttonSize: buttonSize },
propsData: { showSeparator: showSeparator },
methods: {
$t(text) {
return text;
@@ -26,18 +26,17 @@ describe('GoogleOAuthButton.vue', () => {
it('renders the OR separator if showSeparator is 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', () => {
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', () => {
const wrapper = getWrapper();
const googleAuthUrl = new URL(wrapper.vm.getGoogleAuthUrl());
const params = googleAuthUrl.searchParams;
expect(googleAuthUrl.origin).toBe('https://accounts.google.com');
expect(googleAuthUrl.pathname).toBe('/o/oauth2/auth/oauthchooseaccount');
@@ -47,23 +46,7 @@ describe('GoogleOAuthButton.vue', () => {
);
expect(params.get('response_type')).toBe('code');
expect(params.get('scope')).toBe('email profile');
});
it('responds to buttonSize prop properly', () => {
let wrapper = getWrapper(true, 'tiny');
expect(wrapper.find('.button.tiny').exists()).toBe(true);
wrapper = getWrapper(true, 'small');
expect(wrapper.find('.button.small').exists()).toBe(true);
wrapper = getWrapper(true, 'large');
expect(wrapper.find('.button.large').exists()).toBe(true);
// should not render either
wrapper = getWrapper(true, 'default');
expect(wrapper.find('.button.small').exists()).toBe(false);
expect(wrapper.find('.button.tiny').exists()).toBe(false);
expect(wrapper.find('.button.large').exists()).toBe(false);
expect(wrapper.find('.button').exists()).toBe(true);
expect(wrapper.findComponent({ ref: 'divider' }).exists()).toBe(true);
});
});

60
app/javascript/v3/components/GoogleOauth/Button.vue Normal file
View 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
View 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
View 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
View 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
View File

@@ -0,0 +1,3 @@
export const replaceRouteWithReload = url => {
window.location = url;
};

50
app/javascript/v3/helpers/RouteHelper.js Normal file
View 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
View 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
View 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
View 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,
},
});

16
app/javascript/dashboard/routes/auth/Confirmation.vue → app/javascript/v3/views/auth/confirmation/Index.vue
View File

@@ -1,14 +1,16 @@
<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>
<script>
import LoadingState from '../../components/widgets/LoadingState';
import Auth from '../../api/auth';
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
import { verifyPasswordToken } from '../../../api/auth';
import Spinner from 'shared/components/Spinner';
export default {
components: {
LoadingState,
},
components: { Spinner },
props: {
confirmationToken: {
type: String,
@@ -21,7 +23,7 @@ export default {
methods: {
async confirmToken() {
try {
await Auth.verifyPasswordToken({
await verifyPasswordToken({
confirmationToken: this.confirmationToken,
});
window.location = DEFAULT_REDIRECT_URL;

76
app/javascript/dashboard/routes/auth/PasswordEdit.vue → app/javascript/v3/views/auth/password/Edit.vue
View File

@@ -1,35 +1,39 @@
<template>
<form
class="login-box medium-4 column align-self-middle"
@submit.prevent="login()"
<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"
>
<div class="column log-in-form">
<h4>{{ $t('SET_NEW_PASSWORD.TITLE') }}</h4>
<label :class="{ error: $v.credentials.password.$error }">
{{ $t('LOGIN.PASSWORD.LABEL') }}
<input
<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="submitForm"
>
<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"
class="mt-3"
name="password"
type="password"
:has-error="$v.credentials.password.$error"
:error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
@input="$v.credentials.password.$touch"
@blur="$v.credentials.password.$touch"
/>
<span v-if="$v.credentials.password.$error" class="message">
{{ $t('SET_NEW_PASSWORD.PASSWORD.ERROR') }}
</span>
</label>
<label :class="{ error: $v.credentials.confirmPassword.$error }">
{{ $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.LABEL') }}
<input
<form-input
v-model.trim="credentials.confirmPassword"
class="mt-3"
name="confirm_password"
type="password"
:has-error="$v.credentials.confirmPassword.$error"
:error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
:placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
@input="$v.credentials.confirmPassword.$touch"
@blur="$v.credentials.confirmPassword.$touch"
/>
<span v-if="$v.credentials.confirmPassword.$error" class="message">
{{ $t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR') }}
</span>
</label>
<woot-submit-button
<submit-button
:disabled="
$v.credentials.password.$invalid ||
$v.credentials.confirmPassword.$invalid ||
@@ -37,23 +41,23 @@
"
:button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
:loading="newPasswordAPI.showLoading"
button-class="expanded"
/>
<!-- <input type="submit" class="button " v-on:click.prevent="login()" v-bind:value="" > -->
</div>
</form>
</div>
</template>
<script>
import { required, minLength } from 'vuelidate/lib/validators';
import Auth from '../../api/auth';
import WootSubmitButton from '../../components/buttons/FormSubmitButton';
import FormInput from '../../../components/Form/Input.vue';
import SubmitButton from '../../../components/Button/SubmitButton.vue';
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
import { setNewPassword } from '../../../api/auth';
export default {
components: {
WootSubmitButton,
FormInput,
SubmitButton,
},
props: {
resetPasswordToken: { type: String, default: '' },
@@ -106,25 +110,21 @@ export default {
this.newPasswordAPI.showLoading = false;
bus.$emit('newToastMessage', message);
},
login() {
submitForm() {
this.newPasswordAPI.showLoading = true;
const credentials = {
confirmPassword: this.credentials.confirmPassword,
password: this.credentials.password,
resetPasswordToken: this.resetPasswordToken,
};
Auth.setNewPassword(credentials)
.then(res => {
if (res.status === 200) {
setNewPassword(credentials)
.then(() => {
window.location = DEFAULT_REDIRECT_URL;
}
})
.catch(error => {
let errorMessage = this.$t('SET_NEW_PASSWORD.API.ERROR_MESSAGE');
if (error?.data?.message) {
errorMessage = error.data.message;
}
this.showAlert(errorMessage);
this.showAlert(
error?.message || this.$t('SET_NEW_PASSWORD.API.ERROR_MESSAGE')
);
});
},
},

108
app/javascript/v3/views/auth/reset/password/Index.vue Normal file
View 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
View 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>

0
app/javascript/dashboard/routes/auth/components/AuthSubmitButton.vue → app/javascript/v3/views/auth/signup/components/AuthSubmitButton.vue
View File

135
app/javascript/dashboard/routes/auth/components/Signup/Form.vue → app/javascript/v3/views/auth/signup/components/Signup/Form.vue
View File

@@ -1,101 +1,103 @@
<template>
<div>
<form @submit.prevent="submit">
<div class="input-wrap">
<div class="input-wrap__two-column">
<auth-input
<div class="flex-1 overflow-auto px-1">
<form class="space-y-3" @submit.prevent="submit">
<div class="flex">
<form-input
v-model.trim="credentials.fullName"
name="full_name"
class="flex-1"
:class="{ error: $v.credentials.fullName.$error }"
:label="$t('REGISTER.FULL_NAME.LABEL')"
icon-name="person"
:placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
:error="
$v.credentials.fullName.$error
? $t('REGISTER.FULL_NAME.ERROR')
: ''
"
:has-error="$v.credentials.fullName.$error"
:error-message="$t('REGISTER.FULL_NAME.ERROR')"
@blur="$v.credentials.fullName.$touch"
/>
<auth-input
<form-input
v-model.trim="credentials.accountName"
name="account_name"
class="flex-1 ml-2"
: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')
: ''
"
:has-error="$v.credentials.accountName.$error"
:error-message="$t('REGISTER.COMPANY_NAME.ERROR')"
@blur="$v.credentials.accountName.$touch"
/>
</div>
<auth-input
<form-input
v-model.trim="credentials.email"
type="email"
name="email_address"
: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') : ''"
:has-error="$v.credentials.email.$error"
:error-message="$t('REGISTER.EMAIL.ERROR')"
@blur="$v.credentials.email.$touch"
/>
<auth-input
<form-input
v-model.trim="credentials.password"
type="password"
name="password"
:class="{ error: $v.credentials.password.$error }"
icon-name="lock-closed"
:label="$t('LOGIN.PASSWORD.LABEL')"
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
:error="passwordErrorText"
:has-error="$v.credentials.password.$error"
:error-message="passwordErrorText"
@blur="$v.credentials.password.$touch"
/>
</div>
<div v-if="globalConfig.hCaptchaSiteKey" class="h-captcha--box">
<div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
<vue-hcaptcha
ref="hCaptcha"
:class="{ error: !hasAValidCaptcha && didCaptchaReset }"
:sitekey="globalConfig.hCaptchaSiteKey"
@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') }}
</span>
</div>
<auth-submit-button
:label="$t('REGISTER.SUBMIT')"
:is-disabled="isSignupInProgress || !hasAValidCaptcha"
:is-loading="isSignupInProgress"
icon="arrow-chevron-right"
<submit-button
:button-text="$t('REGISTER.SUBMIT')"
:disabled="isSignupInProgress || !hasAValidCaptcha"
:loading="isSignupInProgress"
icon-class="arrow-chevron-right"
/>
</form>
<GoogleOAuthButton v-if="showGoogleOAuth()">
<GoogleOAuthButton v-if="showGoogleOAuth" class="flex-col-reverse">
{{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
</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>
</template>
<script>
import { required, minLength, email } from 'vuelidate/lib/validators';
import Auth from '../../../../api/auth';
import { mapGetters } from 'vuex';
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
import alertMixin from 'shared/mixins/alertMixin';
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
import AuthInput from '../AuthInput.vue';
import AuthSubmitButton from '../AuthSubmitButton.vue';
import FormInput from '../../../../../components/Form/Input.vue';
import SubmitButton from '../../../../../components/Button/SubmitButton.vue';
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');
export default {
components: {
AuthInput,
AuthSubmitButton,
VueHcaptcha,
FormInput,
GoogleOAuthButton,
SubmitButton,
VueHcaptcha,
},
mixins: [globalConfigMixin, alertMixin],
data() {
@@ -165,6 +167,9 @@ export default {
}
return '';
},
showGoogleOAuth() {
return Boolean(window.chatwootConfig.googleOAuthClientId);
},
},
methods: {
async submit() {
@@ -175,16 +180,12 @@ export default {
}
this.isSignupInProgress = true;
try {
const response = await Auth.register(this.credentials);
if (response.status === 200) {
await register(this.credentials);
window.location = DEFAULT_REDIRECT_URL;
}
} catch (error) {
let errorMessage = this.$t('REGISTER.API.ERROR_MESSAGE');
if (error.response && error.response.data.message) {
let errorMessage =
error?.message || this.$t('REGISTER.API.ERROR_MESSAGE');
this.resetCaptcha();
errorMessage = error.response.data.message;
}
this.showAlert(errorMessage);
} finally {
this.isSignupInProgress = false;
@@ -194,9 +195,6 @@ export default {
this.credentials.hCaptchaClientResponse = token;
this.didCaptchaReset = false;
},
showGoogleOAuth() {
return Boolean(window.chatwootConfig.googleOAuthClientId);
},
resetCaptcha() {
if (!this.globalConfig.hCaptchaSiteKey) {
return;
@@ -210,13 +208,6 @@ export default {
</script>
<style scoped lang="scss">
.h-captcha--box {
margin-bottom: var(--space-small);
.captcha-error {
color: var(--r-400);
font-size: var(--font-size-small);
}
&::v-deep .error {
iframe {
border: 1px solid var(--r-500);
@@ -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>

63
app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue Normal file
View File

@@ -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>

40
app/javascript/v3/views/auth/signup/components/Testimonials/TestimonialCard.vue Normal file
View File

@@ -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
View 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
View 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
View 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,
},
];

4
app/views/layouts/vueapp.html.erb
View File

@@ -60,8 +60,8 @@
}
</script>
<% end %>
<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>
<%= javascript_pack_tag @application_pack %>
<%= stylesheet_pack_tag @application_pack %>
</head>
<body>
<div id="app"></div>

2
config/installation_config.yml
View File

@@ -73,4 +73,4 @@
- name: CSML_EDITOR_HOST
value:
- name: LOGO_DARK
value: '/brand-assets/logo-dark.svg'
value: '/brand-assets/logo_dark.svg'

0
public/brand-assets/logo_dark.svg → public/brand-assets/logo-dark.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

1
tailwind.config.js
View File

@@ -2,6 +2,7 @@ module.exports = {
darkMode: 'class',
content: [
'./app/javascript/widget/**/*.vue',
'./app/javascript/v3/**/*.vue',
'./app/javascript/portal/**/*.vue',
'./app/javascript/shared/**/*.vue',
'./app/javascript/survey/**/*.vue',