From 4d149e7091bba0e0c9098123c956f66bb6f829e0 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Thu, 8 Feb 2024 02:09:24 -0800
Subject: [PATCH] feat: Changes page layout for signup page (#8887)

---
 app/javascript/v3/views/auth/signup/Index.vue | 43 ++++++++--
 .../auth/signup/components/Signup/Form.vue    | 86 ++++++-------------
 .../onboarding/signup-card-box-dark.svg       | 27 ++++++
 .../dashboard/onboarding/signup-card-box.svg  | 26 ++++++
 4 files changed, 114 insertions(+), 68 deletions(-)
 create mode 100644 public/assets/images/dashboard/onboarding/signup-card-box-dark.svg
 create mode 100644 public/assets/images/dashboard/onboarding/signup-card-box.svg

diff --git a/app/javascript/v3/views/auth/signup/Index.vue b/app/javascript/v3/views/auth/signup/Index.vue
index e1621db18..0a6f009da 100644
--- a/app/javascript/v3/views/auth/signup/Index.vue
+++ b/app/javascript/v3/views/auth/signup/Index.vue
@@ -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>
diff --git a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
index 898e26ddd..9623b345b 100644
--- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
@@ -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');
diff --git a/public/assets/images/dashboard/onboarding/signup-card-box-dark.svg b/public/assets/images/dashboard/onboarding/signup-card-box-dark.svg
new file mode 100644
index 000000000..9fe1464c3
--- /dev/null
+++ b/public/assets/images/dashboard/onboarding/signup-card-box-dark.svg
@@ -0,0 +1,27 @@
+<svg width="568" height="604" viewBox="0 0 568 604" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#filter0_d_277_89795)">
+    <path
+      d="M284 69.0769C313.049 69.0769 337.642 49.9499 345.93 23.5735C349.22 13.1035 357.795 4 368.745 4H528.173C539.123 4 548 12.8987 548 23.8759V548.124C548 559.101 539.123 568 528.173 568H39.8274C28.877 568 20 559.101 20 548.124V23.8759C20 12.8988 28.877 4 39.8274 4H199.255C210.205 4 218.78 13.1035 222.07 23.5735C230.358 49.9499 254.951 69.0769 284 69.0769Z"
+      fill="#18181A" />
+    <path
+      d="M284 69.5769C313.275 69.5769 338.056 50.3015 346.407 23.7234C349.66 13.3712 358.095 4.5 368.745 4.5H528.173C538.846 4.5 547.5 13.1737 547.5 23.8759V548.124C547.5 558.826 538.846 567.5 528.173 567.5H39.8274C29.1543 567.5 20.5 558.826 20.5 548.124V23.8759C20.5 13.1738 29.1543 4.5 39.8274 4.5H199.255C209.905 4.5 218.34 13.3712 221.593 23.7234C229.944 50.3015 254.725 69.5769 284 69.5769Z"
+      stroke="#35373C" />
+  </g>
+  <defs>
+    <filter id="filter0_d_277_89795" x="0" y="0" width="568" height="604"
+      filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feMorphology radius="12" operator="erode" in="SourceAlpha"
+        result="effect1_dropShadow_277_89795" />
+      <feOffset dy="16" />
+      <feGaussianBlur stdDeviation="16" />
+      <feColorMatrix type="matrix"
+        values="0 0 0 0 0.345098 0 0 0 0 0.360784 0 0 0 0 0.372549 0 0 0 0.1 0" />
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_277_89795" />
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_277_89795" result="shape" />
+    </filter>
+  </defs>
+</svg>
+  
\ No newline at end of file
diff --git a/public/assets/images/dashboard/onboarding/signup-card-box.svg b/public/assets/images/dashboard/onboarding/signup-card-box.svg
new file mode 100644
index 000000000..d7ac62f6c
--- /dev/null
+++ b/public/assets/images/dashboard/onboarding/signup-card-box.svg
@@ -0,0 +1,26 @@
+<svg width="568" height="604" viewBox="0 0 568 604" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g filter="url(#filter0_d_277_81217)">
+    <path
+      d="M284 69.0769C313.049 69.0769 337.642 49.9499 345.93 23.5735C349.22 13.1035 357.795 4 368.745 4H528.173C539.123 4 548 12.8987 548 23.8759V548.124C548 559.101 539.123 568 528.173 568H39.8274C28.877 568 20 559.101 20 548.124V23.8759C20 12.8988 28.877 4 39.8274 4H199.255C210.205 4 218.78 13.1035 222.07 23.5735C230.358 49.9499 254.951 69.0769 284 69.0769Z"
+      fill="#FCFCFD" />
+    <path
+      d="M284 69.5769C313.275 69.5769 338.056 50.3015 346.407 23.7234C349.66 13.3712 358.095 4.5 368.745 4.5H528.173C538.846 4.5 547.5 13.1737 547.5 23.8759V548.124C547.5 558.826 538.846 567.5 528.173 567.5H39.8274C29.1543 567.5 20.5 558.826 20.5 548.124V23.8759C20.5 13.1738 29.1543 4.5 39.8274 4.5H199.255C209.905 4.5 218.34 13.3712 221.593 23.7234C229.944 50.3015 254.725 69.5769 284 69.5769Z"
+      stroke="#E4E4E9" />
+  </g>
+  <defs>
+    <filter id="filter0_d_277_81217" x="0" y="0" width="568" height="604"
+      filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+      <feMorphology radius="12" operator="erode" in="SourceAlpha"
+        result="effect1_dropShadow_277_81217" />
+      <feOffset dy="16" />
+      <feGaussianBlur stdDeviation="16" />
+      <feColorMatrix type="matrix"
+        values="0 0 0 0 0.345098 0 0 0 0 0.360784 0 0 0 0 0.372549 0 0 0 0.1 0" />
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_277_81217" />
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_277_81217" result="shape" />
+    </filter>
+  </defs>
+</svg>
\ No newline at end of file