From f8cd8685b63276c79e0f644d441a394a5cea6f62 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 18 Aug 2022 22:26:24 +0200
Subject: [PATCH] chore(gui-v2): change signin, signup & forget-password form
 structure

---
 packages/nc-gui-v2/pages/forgot-password.vue  | 65 +++++++++----------
 packages/nc-gui-v2/pages/signin.vue           | 40 +++++-------
 packages/nc-gui-v2/pages/signup/[[token]].vue |  4 +-
 3 files changed, 50 insertions(+), 59 deletions(-)

diff --git a/packages/nc-gui-v2/pages/forgot-password.vue b/packages/nc-gui-v2/pages/forgot-password.vue
index 7f4e124ddc..6c167e006d 100644
--- a/packages/nc-gui-v2/pages/forgot-password.vue
+++ b/packages/nc-gui-v2/pages/forgot-password.vue
@@ -59,39 +59,33 @@ function resetError() {
 
 <template>
   <NuxtLayout>
-    <a-form
-      ref="formValidator"
-      layout="vertical"
-      :model="form"
-      class="bg-primary/5 forgot-password h-full flex justify-center items-center nc-form-signin"
-      @finish="resetPassword"
-    >
-      <div class="h-full w-full flex flex-col items-center justify-center pt-[50px]">
-        <div
-          class="color-transition bg-white dark:(!bg-gray-900 !text-white) relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
-        >
-          <general-noco-icon
-            class="color-transition hover:(ring ring-pink-500)"
-            :class="[isLoading ? 'animated-bg-gradient' : '']"
-          />
-
-          <div class="self-center flex flex-col justify-center items-center text-center gap-2">
-            <h1 class="prose-2xl font-bold my-4 w-full">{{ $t('title.resetPassword') }}</h1>
-
-            <template v-if="!success">
-              <div class="prose-sm">{{ $t('msg.info.passwordRecovery.message_1') }}</div>
-              <div class="prose-sm mb-4">{{ $t('msg.info.passwordRecovery.message_2') }}</div>
-            </template>
-
-            <template v-else>
-              <div class="prose-sm text-success flex items-center leading-8 gap-2">
-                {{ $t('msg.info.passwordRecovery.success') }} <ClaritySuccessLine />
-              </div>
+    <div class="md:bg-primary/5 forgot-password h-full min-h-[600px] flex flex-col justify-center items-center">
+      <div
+        class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+      >
+        <general-noco-icon
+          class="color-transition hover:(ring ring-pink-500)"
+          :class="[isLoading ? 'animated-bg-gradient' : '']"
+        />
+
+        <div class="self-center flex flex-col justify-center items-center text-center gap-2">
+          <h1 class="prose-2xl font-bold my-4 w-full">{{ $t('title.resetPassword') }}</h1>
+
+          <template v-if="!success">
+            <div class="prose-sm">{{ $t('msg.info.passwordRecovery.message_1') }}</div>
+            <div class="prose-sm mb-4">{{ $t('msg.info.passwordRecovery.message_2') }}</div>
+          </template>
+
+          <template v-else>
+            <div class="prose-sm text-success flex items-center leading-8 gap-2">
+              {{ $t('msg.info.passwordRecovery.success') }} <ClaritySuccessLine />
+            </div>
 
-              <nuxt-link to="/signin">{{ $t('general.signIn') }}</nuxt-link>
-            </template>
-          </div>
+            <nuxt-link to="/signin">{{ $t('general.signIn') }}</nuxt-link>
+          </template>
+        </div>
 
+        <a-form ref="formValidator" layout="vertical" :model="form" no-style @finish="resetPassword">
           <Transition name="layout">
             <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
               <div class="flex items-center gap-2 justify-center">
@@ -107,7 +101,10 @@ function resetError() {
 
           <div class="self-center flex flex-col gap-4 items-center justify-center w-full">
             <button class="submit" type="submit">
-              <span class="flex items-center gap-2"><MdiLogin /> {{ $t('activity.sendEmail') }}</span>
+              <span class="flex items-center gap-2">
+                <MdiLogin />
+                {{ $t('activity.sendEmail') }}
+              </span>
             </button>
 
             <div class="text-end prose-sm">
@@ -115,9 +112,9 @@ function resetError() {
               <nuxt-link to="/signin">{{ $t('general.signIn') }}</nuxt-link>
             </div>
           </div>
-        </div>
+        </a-form>
       </div>
-    </a-form>
+    </div>
   </NuxtLayout>
 </template>
 
diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue
index 026b6239bb..d97cd95e70 100644
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/packages/nc-gui-v2/pages/signin.vue
@@ -80,24 +80,18 @@ function resetError() {
 
 <template>
   <NuxtLayout>
-    <a-form
-      ref="formValidator"
-      :model="form"
-      layout="vertical"
-      class="bg-primary/5 signin h-full flex justify-center items-center nc-form-signin"
-      @finish="signIn"
-    >
-      <div class="h-full w-full flex flex-col items-center justify-center pt-[50px]">
-        <div
-          class="bg-white dark:(!bg-gray-900 !text-white) relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
-        >
-          <general-noco-icon
-            class="!rounded-full color-transition hover:(ring ring-pink-500)"
-            :class="[isLoading ? 'animated-bg-gradient' : '']"
-          />
-
-          <h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signIn') }}</h1>
-
+    <div class="md:bg-primary/5 signin h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signup">
+      <div
+        class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+      >
+        <general-noco-icon
+          class="!rounded-full color-transition hover:(ring ring-pink-500)"
+          :class="[isLoading ? 'animated-bg-gradient' : '']"
+        />
+
+        <h1 class="prose-2xl font-bold self-center my-4">{{ $t('general.signIn') }}</h1>
+
+        <a-form ref="formValidator" :model="form" layout="vertical" no-style @finish="signIn">
           <Transition name="layout">
             <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
               <div class="flex items-center gap-2 justify-center">
@@ -108,7 +102,7 @@ function resetError() {
           </Transition>
 
           <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
-            <a-input v-model:value="form.email" size="large" :placeholder="$t('labels.email')" @focus="resetError" />
+            <a-input v-model:value="form.email" size="large" :placeholder="$t('msg.info.signUp.workEmail')" @focus="resetError" />
           </a-form-item>
 
           <a-form-item :label="$t('labels.password')" name="password" :rules="formRules.password">
@@ -116,12 +110,12 @@ function resetError() {
               v-model:value="form.password"
               size="large"
               class="password"
-              :placeholder="$t('labels.password')"
+              :placeholder="$t('msg.info.signUp.enterPassword')"
               @focus="resetError"
             />
           </a-form-item>
 
-          <div class="hidden md:block self-end">
+          <div class="hidden md:block text-right">
             <nuxt-link class="prose-sm" to="/forgot-password">
               {{ $t('msg.info.signUp.forgotPassword') }}
             </nuxt-link>
@@ -146,9 +140,9 @@ function resetError() {
               </nuxt-link>
             </div>
           </div>
-        </div>
+        </a-form>
       </div>
-    </a-form>
+    </div>
   </NuxtLayout>
 </template>
 
diff --git a/packages/nc-gui-v2/pages/signup/[[token]].vue b/packages/nc-gui-v2/pages/signup/[[token]].vue
index 3ab64b8886..e0810bb7dc 100644
--- a/packages/nc-gui-v2/pages/signup/[[token]].vue
+++ b/packages/nc-gui-v2/pages/signup/[[token]].vue
@@ -102,9 +102,9 @@ function resetError() {
 
 <template>
   <NuxtLayout>
-    <div class="bg-primary/5 signup h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signup">
+    <div class="md:bg-primary/5 signup h-full min-h-[600px] flex flex-col justify-center items-center">
       <div
-        class="bg-white dark:(!bg-gray-900 !text-white) mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+        class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
       >
         <general-noco-icon
           class="color-transition hover:(ring ring-pink-500)"