Restructure omni services and add Chatwoot research snapshot
This commit is contained in:
Ruslan Bakiev
@@ -0,0 +1,188 @@
|
||||
<script setup>
|
||||
import { ref, computed, reactive } from 'vue';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, minLength, email } from '@vuelidate/validators';
|
||||
import { useStore } from 'vuex';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
|
||||
import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
|
||||
import FormInput from '../../../../../components/Form/Input.vue';
|
||||
import NextButton from 'dashboard/components-next/button/Button.vue';
|
||||
import PasswordRequirements from './PasswordRequirements.vue';
|
||||
import { isValidPassword } from 'shared/helpers/Validators';
|
||||
import GoogleOAuthButton from '../../../../../components/GoogleOauth/Button.vue';
|
||||
import { register } from '../../../../../api/auth';
|
||||
import * as CompanyEmailValidator from 'company-email-validator';
|
||||
|
||||
const MIN_PASSWORD_LENGTH = 6;
|
||||
|
||||
const store = useStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const hCaptcha = ref(null);
|
||||
const isPasswordFocused = ref(false);
|
||||
const isSignupInProgress = ref(false);
|
||||
|
||||
const credentials = reactive({
|
||||
email: '',
|
||||
password: '',
|
||||
hCaptchaClientResponse: '',
|
||||
});
|
||||
|
||||
const rules = {
|
||||
credentials: {
|
||||
email: {
|
||||
required,
|
||||
email,
|
||||
businessEmailValidator(value) {
|
||||
return CompanyEmailValidator.isCompanyEmail(value);
|
||||
},
|
||||
},
|
||||
password: {
|
||||
required,
|
||||
isValidPassword,
|
||||
minLength: minLength(MIN_PASSWORD_LENGTH),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const v$ = useVuelidate(rules, { credentials });
|
||||
|
||||
const globalConfig = computed(() => store.getters['globalConfig/get']);
|
||||
|
||||
const termsLink = computed(() =>
|
||||
t('REGISTER.TERMS_ACCEPT')
|
||||
.replace('https://www.chatwoot.com/terms', globalConfig.value.termsURL)
|
||||
.replace(
|
||||
'https://www.chatwoot.com/privacy-policy',
|
||||
globalConfig.value.privacyURL
|
||||
)
|
||||
);
|
||||
|
||||
const allowedLoginMethods = computed(
|
||||
() => window.chatwootConfig.allowedLoginMethods || ['email']
|
||||
);
|
||||
|
||||
const showGoogleOAuth = computed(
|
||||
() =>
|
||||
allowedLoginMethods.value.includes('google_oauth') &&
|
||||
Boolean(window.chatwootConfig.googleOAuthClientId)
|
||||
);
|
||||
|
||||
const isFormValid = computed(() => !v$.value.$invalid);
|
||||
|
||||
const performRegistration = async () => {
|
||||
isSignupInProgress.value = true;
|
||||
try {
|
||||
await register(credentials);
|
||||
window.location = DEFAULT_REDIRECT_URL;
|
||||
} catch (error) {
|
||||
const errorMessage = error?.message || t('REGISTER.API.ERROR_MESSAGE');
|
||||
if (globalConfig.value.hCaptchaSiteKey) {
|
||||
hCaptcha.value.reset();
|
||||
credentials.hCaptchaClientResponse = '';
|
||||
}
|
||||
useAlert(errorMessage);
|
||||
} finally {
|
||||
isSignupInProgress.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
if (isSignupInProgress.value) return;
|
||||
v$.value.$touch();
|
||||
if (v$.value.$invalid) return;
|
||||
isSignupInProgress.value = true;
|
||||
if (globalConfig.value.hCaptchaSiteKey) {
|
||||
hCaptcha.value.execute();
|
||||
} else {
|
||||
performRegistration();
|
||||
}
|
||||
};
|
||||
|
||||
const onRecaptchaVerified = token => {
|
||||
credentials.hCaptchaClientResponse = token;
|
||||
performRegistration();
|
||||
};
|
||||
|
||||
const onCaptchaError = () => {
|
||||
isSignupInProgress.value = false;
|
||||
credentials.hCaptchaClientResponse = '';
|
||||
hCaptcha.value.reset();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex-1">
|
||||
<form class="space-y-3" @submit.prevent="submit">
|
||||
<FormInput
|
||||
v-model="credentials.email"
|
||||
type="email"
|
||||
name="email_address"
|
||||
:class="{ error: v$.credentials.email.$error }"
|
||||
:label="$t('REGISTER.EMAIL.LABEL')"
|
||||
:placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.email.$error"
|
||||
:error-message="$t('REGISTER.EMAIL.ERROR')"
|
||||
@blur="v$.credentials.email.$touch"
|
||||
/>
|
||||
<div class="relative">
|
||||
<FormInput
|
||||
v-model="credentials.password"
|
||||
type="password"
|
||||
name="password"
|
||||
:class="{ error: v$.credentials.password.$error }"
|
||||
:label="$t('LOGIN.PASSWORD.LABEL')"
|
||||
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
|
||||
:has-error="v$.credentials.password.$error"
|
||||
@focus="isPasswordFocused = true"
|
||||
@blur="
|
||||
isPasswordFocused = false;
|
||||
v$.credentials.password.$touch();
|
||||
"
|
||||
/>
|
||||
<Transition
|
||||
enter-active-class="transition duration-200 ease-out origin-left"
|
||||
enter-from-class="opacity-0 scale-90 translate-x-1"
|
||||
enter-to-class="opacity-100 scale-100 translate-x-0"
|
||||
leave-active-class="transition duration-150 ease-in origin-left"
|
||||
leave-from-class="opacity-100 scale-100 translate-x-0"
|
||||
leave-to-class="opacity-0 scale-90 translate-x-1"
|
||||
>
|
||||
<PasswordRequirements
|
||||
v-if="isPasswordFocused"
|
||||
:password="credentials.password"
|
||||
/>
|
||||
</Transition>
|
||||
</div>
|
||||
<VueHcaptcha
|
||||
v-if="globalConfig.hCaptchaSiteKey"
|
||||
ref="hCaptcha"
|
||||
size="invisible"
|
||||
:sitekey="globalConfig.hCaptchaSiteKey"
|
||||
@verify="onRecaptchaVerified"
|
||||
@error="onCaptchaError"
|
||||
@expired="onCaptchaError"
|
||||
@challenge-expired="onCaptchaError"
|
||||
@closed="onCaptchaError"
|
||||
/>
|
||||
<NextButton
|
||||
lg
|
||||
type="submit"
|
||||
data-testid="submit_button"
|
||||
class="w-full font-medium"
|
||||
:label="$t('REGISTER.SUBMIT')"
|
||||
:disabled="isSignupInProgress || !isFormValid"
|
||||
:is-loading="isSignupInProgress"
|
||||
/>
|
||||
</form>
|
||||
<GoogleOAuthButton v-if="showGoogleOAuth" class="mt-3">
|
||||
{{ $t('REGISTER.OAUTH.GOOGLE_SIGNUP') }}
|
||||
</GoogleOAuthButton>
|
||||
<p
|
||||
class="text-sm mt-5 mb-0 text-n-slate-11 [&>a]:text-n-blue-10 [&>a]:font-medium [&>a]:hover:text-n-blue-11"
|
||||
v-html="termsLink"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,69 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
password: { type: String, default: '' },
|
||||
});
|
||||
const MIN_PASSWORD_LENGTH = 6;
|
||||
const SPECIAL_CHAR_REGEX = /[!@#$%^&*()_+\-=[\]{}|'"/\\.,`<>:;?~]/;
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const requirements = computed(() => {
|
||||
const password = props.password || '';
|
||||
return [
|
||||
{
|
||||
id: 'length',
|
||||
met: password.length >= MIN_PASSWORD_LENGTH,
|
||||
label: t('REGISTER.PASSWORD.REQUIREMENTS_LENGTH', {
|
||||
min: MIN_PASSWORD_LENGTH,
|
||||
}),
|
||||
},
|
||||
{
|
||||
id: 'uppercase',
|
||||
met: /[A-Z]/.test(password),
|
||||
label: t('REGISTER.PASSWORD.REQUIREMENTS_UPPERCASE'),
|
||||
},
|
||||
{
|
||||
id: 'lowercase',
|
||||
met: /[a-z]/.test(password),
|
||||
label: t('REGISTER.PASSWORD.REQUIREMENTS_LOWERCASE'),
|
||||
},
|
||||
{
|
||||
id: 'number',
|
||||
met: /[0-9]/.test(password),
|
||||
label: t('REGISTER.PASSWORD.REQUIREMENTS_NUMBER'),
|
||||
},
|
||||
{
|
||||
id: 'special',
|
||||
met: SPECIAL_CHAR_REGEX.test(password),
|
||||
label: t('REGISTER.PASSWORD.REQUIREMENTS_SPECIAL'),
|
||||
},
|
||||
];
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="absolute top-0 z-50 w-64 text-xs rounded-lg px-4 py-3 bg-white dark:bg-n-solid-3 shadow-lg outline outline-1 outline-n-weak start-full ms-4"
|
||||
>
|
||||
<ul role="list" class="space-y-1.5">
|
||||
<li
|
||||
v-for="item in requirements"
|
||||
:key="item.id"
|
||||
class="inline-flex gap-1.5 items-start"
|
||||
>
|
||||
<Icon
|
||||
class="flex-none flex-shrink-0 w-3 mt-0.5"
|
||||
:icon="item.met ? 'i-lucide-circle-check-big' : 'i-lucide-circle'"
|
||||
:class="item.met ? 'text-n-teal-10' : 'text-n-slate-10'"
|
||||
/>
|
||||
<span :class="item.met ? 'text-n-slate-11' : 'text-n-slate-10'">
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,48 @@
|
||||
<script setup>
|
||||
import { ref, onBeforeMount } from 'vue';
|
||||
import TestimonialCard from './TestimonialCard.vue';
|
||||
import { getTestimonialContent } from '../../../../../api/testimonials';
|
||||
|
||||
const emit = defineEmits(['resizeContainers']);
|
||||
|
||||
const testimonial = ref(null);
|
||||
|
||||
const fetchTestimonials = async () => {
|
||||
try {
|
||||
const { data } = await getTestimonialContent();
|
||||
if (data.length) {
|
||||
testimonial.value = data[Math.floor(Math.random() * data.length)];
|
||||
}
|
||||
} catch {
|
||||
// Ignoring the error as the UI wouldn't break
|
||||
} finally {
|
||||
emit('resizeContainers', !!testimonial.value);
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
fetchTestimonials();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="relative flex-1 flex flex-col items-start justify-center bg-n-alpha-black2 dark:bg-n-solid-3 px-12 py-14 rounded-e-lg"
|
||||
>
|
||||
<TestimonialCard
|
||||
v-if="testimonial"
|
||||
:review-content="testimonial.authorReview"
|
||||
:author-image="testimonial.authorImage"
|
||||
:author-name="testimonial.authorName"
|
||||
:author-designation="testimonial.authorCompany"
|
||||
/>
|
||||
<div class="absolute bottom-8 right-8 grid grid-cols-3 gap-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-n-gray-5" />
|
||||
<span class="w-2 h-2 rounded-full bg-n-gray-5" />
|
||||
<span class="w-2 h-2 rounded-full bg-n-gray-5" />
|
||||
<span class="w-2 h-2 rounded-full bg-n-gray-5" />
|
||||
<span class="w-2 h-2 rounded-full bg-n-gray-5" />
|
||||
<span class="w-2 h-2 rounded-full bg-n-gray-5" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
reviewContent: { type: String, default: '' },
|
||||
authorImage: { type: String, default: '' },
|
||||
authorName: { type: String, default: '' },
|
||||
authorDesignation: { type: String, default: '' },
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col items-start">
|
||||
<svg
|
||||
class="w-10 h-10 text-n-slate-7 mb-6"
|
||||
viewBox="0 0 40 40"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M10.7 28.3c-1.4-1.2-2.1-3-2.1-5.4 0-2.3.8-4.6 2.4-6.8 1.6-2.2 3.8-3.9 6.6-5.1l1.2 2.1c-2.2 1.2-3.7 2.4-4.6 3.6-.9 1.2-1.3 2.5-1.2 3.8.3-.1.7-.2 1.2-.2 1.3 0 2.4.4 3.3 1.3.9.9 1.3 2 1.3 3.3 0 1.4-.5 2.5-1.4 3.4-.9.9-2.1 1.4-3.5 1.4-1.5 0-2.7-.5-3.2-1.4zm15 0c-1.4-1.2-2.1-3-2.1-5.4 0-2.3.8-4.6 2.4-6.8 1.6-2.2 3.8-3.9 6.6-5.1l1.2 2.1c-2.2 1.2-3.7 2.4-4.6 3.6-.9 1.2-1.3 2.5-1.2 3.8.3-.1.7-.2 1.2-.2 1.3 0 2.4.4 3.3 1.3.9.9 1.3 2 1.3 3.3 0 1.4-.5 2.5-1.4 3.4-.9.9-2.1 1.4-3.5 1.4-1.5 0-2.7-.5-3.2-1.4z"
|
||||
/>
|
||||
</svg>
|
||||
<p
|
||||
class="text-lg text-n-slate-12 leading-relaxed whitespace-pre-line tracking-tight"
|
||||
>
|
||||
{{ reviewContent }}
|
||||
</p>
|
||||
<div class="flex items-center mt-8">
|
||||
<img
|
||||
:src="authorImage"
|
||||
:alt="authorName"
|
||||
class="w-11 h-11 rounded-full object-cover"
|
||||
/>
|
||||
<div class="ml-3">
|
||||
<div class="text-base font-medium text-n-slate-12">
|
||||
{{ authorName }}
|
||||
</div>
|
||||
<div class="text-sm text-n-slate-10">{{ authorDesignation }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user