akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Changes page layout for signup page (#8887)

Browse Source
This commit is contained in:
Nithin David Thomas
2024-02-08 02:09:24 -08:00
committed by GitHub
parent a649c2733f
commit 4d149e7091
4 changed files with 114 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/v3/views/auth/signup/Index.vue
+34 -9
View File
@@ -1,24 +1,35 @@
<template>
<div class="h-full w-full dark:bg-slate-900">
<div v-show="!isLoading" class="flex h-full">
<div class="h-full w-full dark:bg-slate-900 relative">
<div
class="absolute inset-0 h-full w-full bg-white dark:bg-slate-900 bg-[radial-gradient(var(--w-100)_1px,transparent_1px)] dark:bg-[radial-gradient(var(--w-800)_1px,transparent_1px)] [background-size:16px_16px] z-0"
/>
<div
class="absolute h-full w-full overlay-gradient top-0 left-0 blur-[3px]"
/>
<div v-show="!isLoading" class="flex h-full relative z-50">
<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">
<div
class="relative px-16 py-[104px] max-w-[528px] bg-[url('/assets/images/dashboard/onboarding/signup-card-box.svg')] dark:bg-[url('/assets/images/dashboard/onboarding/signup-card-box-dark.svg')] bg-contain bg-top bg-no-repeat w-full overflow-aut rounded-3xl"
>
<div class="absolute -top-12 right-0 left-0 w-24 h-24 mx-auto">
<img
:src="globalConfig.logo"
:src="globalConfig.logoThumbnail"
:alt="globalConfig.installationName"
class="h-8 w-auto block dark:hidden"
class="h-24 w-24 block"
:class="{ 'dark:hidden': globalConfig.logoDarkThumbnail }"
/>
<img
v-if="globalConfig.logoDark"
:src="globalConfig.logoDark"
v-if="globalConfig.logoDarkThumbnail"
:src="globalConfig.logoDarkThumbnail"
:alt="globalConfig.installationName"
class="h-8 w-auto hidden dark:block"
/>
</div>
<div class="mb-8">
<h2
class="mb-7 mt-6 text-left text-3xl font-medium text-slate-900 dark:text-woot-50"
class="text-center text-3xl tracking-wide font-medium text-slate-900 dark:text-woot-50"
>
{{ $t('REGISTER.TRY_WOOT') }}
</h2>
@@ -85,3 +96,17 @@ export default {
},
};
</script>
<style>
.overlay-gradient {
background: linear-gradient(90deg, rgba(252, 252, 253, 0) 81.8%, #fcfcfd 100%),
linear-gradient(270deg, rgba(252, 252, 253, 0) 76.93%, #fcfcfd 100%),
linear-gradient(0deg, rgba(252, 252, 253, 0) 68.63%, #fcfcfd 100%),
linear-gradient(180deg, rgba(252, 252, 253, 0) 73.2%, #fcfcfd 100%);
}
.dark .overlay-gradient {
background: linear-gradient(270deg, rgba(24, 24, 26, 0) 76.93%, #151718 100%),
linear-gradient(90deg, rgba(24, 24, 26, 0) 81.8%, #151718 100%),
linear-gradient(0deg, rgba(24, 24, 26, 0) 68.63%, #151718 100%),
linear-gradient(180deg, rgba(24, 24, 26, 0) 73.2%, #151718 100%);
}
</style>
app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+27 -59
View File
@@ -1,52 +1,30 @@
<template>
<div class="flex-1 overflow-auto px-1">
<form class="space-y-3" @submit.prevent="submit">
<div class="flex">
<div class="flex-1 px-1 overflow-auto">
<form class="space-y-8" @submit.prevent="submit">
<section class="space-y-3">
<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')"
:placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
:has-error="$v.credentials.fullName.$error"
:error-message="$t('REGISTER.FULL_NAME.ERROR')"
@blur="$v.credentials.fullName.$touch"
v-model.trim="credentials.email"
type="email"
name="email_address"
:class="{ error: $v.credentials.email.$error }"
:label="$t('REGISTER.EMAIL.LABEL')"
:placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
:has-error="$v.credentials.email.$error"
:error-message="$t('REGISTER.EMAIL.ERROR')"
@blur="$v.credentials.email.$touch"
/>
<form-input
v-model.trim="credentials.accountName"
name="account_name"
class="flex-1 ml-2"
:class="{ error: $v.credentials.accountName.$error }"
:label="$t('REGISTER.COMPANY_NAME.LABEL')"
:placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
:has-error="$v.credentials.accountName.$error"
:error-message="$t('REGISTER.COMPANY_NAME.ERROR')"
@blur="$v.credentials.accountName.$touch"
v-model.trim="credentials.password"
type="password"
name="password"
:class="{ error: $v.credentials.password.$error }"
:label="$t('LOGIN.PASSWORD.LABEL')"
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
:has-error="$v.credentials.password.$error"
:error-message="passwordErrorText"
@blur="$v.credentials.password.$touch"
/>
</div>
<form-input
v-model.trim="credentials.email"
type="email"
name="email_address"
:class="{ error: $v.credentials.email.$error }"
:label="$t('REGISTER.EMAIL.LABEL')"
:placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
:has-error="$v.credentials.email.$error"
:error-message="$t('REGISTER.EMAIL.ERROR')"
@blur="$v.credentials.email.$touch"
/>
<form-input
v-model.trim="credentials.password"
type="password"
name="password"
:class="{ error: $v.credentials.password.$error }"
:label="$t('LOGIN.PASSWORD.LABEL')"
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
:has-error="$v.credentials.password.$error"
:error-message="passwordErrorText"
@blur="$v.credentials.password.$touch"
/>
</section>
<div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
<vue-hcaptcha
ref="hCaptcha"
@@ -83,9 +61,9 @@ import { required, minLength, email } from 'vuelidate/lib/validators';
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 { ONBOARDING_START_URL } from 'dashboard/constants/globals';
import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
import FormInput from '../../../../../components/Form/Input.vue';
import FormInput from 'v3/components/Form/Input.vue';
import SubmitButton from '../../../../../components/Button/SubmitButton.vue';
import { isValidPassword } from 'shared/helpers/Validators';
import GoogleOAuthButton from '../../../../../components/GoogleOauth/Button.vue';
@@ -103,10 +81,8 @@ export default {
data() {
return {
credentials: {
accountName: '',
fullName: '',
email: '',
password: '',
email: 'Testing123@shivam.dev',
password: 'Testing123@shivam.dev',
hCaptchaClientResponse: '',
},
didCaptchaReset: false,
@@ -116,14 +92,6 @@ export default {
},
validations: {
credentials: {
accountName: {
required,
minLength: minLength(2),
},
fullName: {
required,
minLength: minLength(2),
},
email: {
required,
email,
@@ -181,7 +149,7 @@ export default {
this.isSignupInProgress = true;
try {
await register(this.credentials);
window.location = DEFAULT_REDIRECT_URL;
window.location = ONBOARDING_START_URL;
} catch (error) {
let errorMessage =
error?.message || this.$t('REGISTER.API.ERROR_MESSAGE');