refactor(gui-v2): update signin form

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/nc-gui-v2/lib/types.ts

@@ -1,6 +1,8 @@
 export interface GlobalState {
   token?: string
-  user?: Record<string, any>
+  user?: {
+    email?: string
+  }
   lang: string
   darkMode: boolean
 }

packages/nc-gui-v2/pages/projects/create.vue

@@ -10,7 +10,7 @@ const valid = ref(false)
 
 const { $api, $toast } = useNuxtApp()
 
-const titleValidationRule = [
+const nameValidationRules = [
   (v: string) => !!v || 'Title is required',
   (v: string) => v.length <= 50 || 'Project name exceeds 50 characters',
 ]
@@ -32,15 +32,20 @@ const createProject = async () => {
 
 <template>
   <NuxtLayout>
-    <v-container fluid class="d-flex justify-center align-center h-75">
-      <v-form ref="form" v-model="valid" @submit.prevent="createProject">
+    <v-form ref="form" v-model="valid" @submit.prevent="createProject">
+      <v-container fluid class="d-flex justify-center align-center h-75">
         <v-card max-width="500">
           <v-container class="pb-10 px-12">
             <h1 class="mt-4 mb-4 text-center">
               {{ $t('activity.createProject') }}
             </h1>
             <div class="mx-auto" style="width: 350px">
-              <v-text-field v-model="name" class="nc-metadb-project-name" :label="$t('labels.projName')" />
+              <v-text-field
+                v-model="name"
+                class="nc-metadb-project-name"
+                :rules="nameValidationRules"
+                :label="$t('labels.projName')"
+              />
             </div>
             <v-btn class="mx-auto" large :loading="loading" color="primary" @click="createProject">
               <MaterialSymbolsRocketLaunchOutline class="mr-1" />
@@ -48,8 +53,8 @@ const createProject = async () => {
             </v-btn>
           </v-container>
         </v-card>
-      </v-form>
-    </v-container>
+      </v-container>
+    </v-form>
   </NuxtLayout>
 </template>
 

packages/nc-gui-v2/pages/signin.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { navigateTo, useNuxtApp } from '#app'
+import MdiLogin from '~icons/mdi/login'
+import MaterialSymbolsWarning from '~icons/material-symbols/warning'
 
 const { $api, $state } = useNuxtApp()
 
 const error = ref()
+const valid = ref()
 const form = reactive({
   email: '',
   password: '',
@@ -15,43 +18,49 @@ const signIn = async () => {
   try {
     const { token } = await $api.auth.signin(form)
     $state.value.token = token
+    $state.value.user = { email: form.email }
     await navigateTo('/projects')
   } catch (e: any) {
+    // todo: errors should not expose what was wrong (i.e. do not show "Password is wrong" messages)
     error.value = await extractSdkResponseErrorMsg(e)
   }
 }
 </script>
 
 <template>
-  <div>
-    <!-- Enter your work email -->
-    <v-card class="pa-10 mx-auto mt-10" style="max-width: 500px">
-      <v-card-text>
-        <v-alert v-if="error" class="mb-10" type="error">
-          {{ error }}
-        </v-alert>
-
-        <div class="p-float-label">
-          <v-text-field id="email" v-model="form.email" :label="$t('labels.email')" type="text" style="width: 100%" />
-        </div>
+  <NuxtLayout>
+    <v-form
+      ref="formValidator"
+      v-model="valid"
+      class="h-full md:h-3/4 min-h-[600px] flex justify-center items-center"
+      @submit.prevent="signIn"
+    >
+      <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
+        <div
+          class="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-lg)"
+        >
+          <h1 class="prose-xl self-center">Sign-in to your account</h1>
 
-        <!-- Enter your password -->
-        <div class="p-float-label">
-          <v-text-field
-            id="password"
-            v-model="form.password"
-            :label="$t('labels.password')"
-            type="password"
-            style="width: 100%"
-          />
-        </div>
+          <v-divider class="mb-4" />
+
+          <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 p-1">
+            <div class="flex items-center gap-2 justify-center"><MaterialSymbolsWarning /> {{ error }}</div>
+          </div>
+
+          <v-text-field id="email" v-model="form.email" :label="$t('labels.email')" type="text" />
+
+          <v-text-field id="password" v-model="form.password" :label="$t('labels.password')" type="password" />
 
-        <div class="text-center">
-          <v-btn class="" @click="signIn">
-            <b>{{ $t('general.signIn') }}</b>
-          </v-btn>
+          <div class="self-center">
+            <button
+              class="border-1 border-solid border-gray-300 transition-color duration-100 ease-in rounded-lg shadow-md p-4 bg-gray-100/50 hover:(text-primary bg-primary/25)"
+              type="submit"
+            >
+              <span class="flex items-center gap-2"><MdiLogin /> {{ $t('general.signIn') }}</span>
+            </button>
+          </div>
         </div>
-      </v-card-text>
-    </v-card>
-  </div>
+      </div>
+    </v-form>
+  </NuxtLayout>
 </template>