chore(gui-v2): cleanup imports and styles

packages/nc-gui-v2/assets/style-v2.scss

@@ -108,3 +108,48 @@ html {
 .ant-modal-wrap {
   @apply !scrollbar-thin-dull;
 }
+
+.animated-bg-gradient {
+  background: linear-gradient(122deg, #6f3381, #81c7d4, #fedfe1, #9ee59e);
+  background-size: 800% 800%;
+
+  -webkit-animation: gradient 4s ease infinite;
+  -moz-animation: gradient 4s ease infinite;
+  animation: gradient 4s ease infinite;
+}
+
+@-webkit-keyframes gradient {
+  0% {
+    background-position: 0% 22%
+  }
+  50% {
+    background-position: 100% 79%
+  }
+  100% {
+    background-position: 0% 22%
+  }
+}
+
+@-moz-keyframes gradient {
+  0% {
+    background-position: 0% 22%
+  }
+  50% {
+    background-position: 100% 79%
+  }
+  100% {
+    background-position: 0% 22%
+  }
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 22%
+  }
+  50% {
+    background-position: 100% 79%
+  }
+  100% {
+    background-position: 0% 22%
+  }
+}

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

@@ -1,8 +1,21 @@
 <script setup lang="ts">
 import type { RuleObject } from 'ant-design-vue/es/form'
-import { definePageMeta, extractSdkResponseErrorMsg, isEmail, navigateTo, useI18n, useNuxtApp, useSidebar } from '#imports'
-
-const { $api, $state } = $(useNuxtApp())
+import {
+  definePageMeta,
+  extractSdkResponseErrorMsg,
+  isEmail,
+  navigateTo,
+  reactive,
+  ref,
+  useApi,
+  useGlobal,
+  useI18n,
+  useSidebar,
+} from '#imports'
+
+const { signIn: _signIn } = useGlobal()
+
+const { api, isLoading } = useApi()
 
 const { t } = useI18n()
 
@@ -45,12 +58,16 @@ const formRules: Record<string, RuleObject[]> = {
 
 const signIn = async () => {
   const valid = formValidator.value.validate()
+
   if (!valid) return
 
   error = null
+
   try {
-    const { token } = await $api.auth.signin(form)
-    $state.signIn(token!)
+    const { token } = await api.auth.signin(form)
+
+    _signIn(token!)
+
     await navigateTo('/')
   } catch (e: any) {
     // todo: errors should not expose what was wrong (i.e. do not show "Password is wrong" messages)
@@ -59,9 +76,7 @@ const signIn = async () => {
 }
 
 const resetError = () => {
-  if (error) {
-    error = null
-  }
+  if (error) error = null
 }
 </script>
 
@@ -71,14 +86,17 @@ const resetError = () => {
       ref="formValidator"
       :model="form"
       layout="vertical"
-      class="signin h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center nc-form-signin"
+      class="signin h-full min-h-[600px] flex justify-center items-center nc-form-signin"
       @finish="signIn"
     >
       <div class="h-full w-full flex flex-col flex-wrap items-center pt-[100px]">
         <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 />
+          <general-noco-icon
+            class="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>
 
@@ -159,6 +177,10 @@ const resetError = () => {
     &:hover::after {
       @apply transform scale-110 ring ring-pink-500;
     }
+
+    &:active::after {
+      @apply ring ring-pink-500;
+    }
   }
 }
 </style>

packages/nc-gui-v2/pages/signup/[[token]].vue

@@ -1,20 +1,23 @@
 <script setup lang="ts">
-import { definePageMeta } from '#imports'
+import { definePageMeta, useGlobal } from '#imports'
 
 definePageMeta({
   requiresAuth: false,
 })
 
-const { appInfo } = useGlobal()
+const { appInfo, isLoading } = useGlobal()
 </script>
 
 <template>
   <NuxtLayout>
-    <div class="signup h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center nc-form-signup">
+    <div class="signup h-full min-h-[600px] flex justify-center items-center nc-form-signup">
       <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 />
+        <general-noco-icon
+          class="color-transition hover:(ring ring-pink-500)"
+          :class="[isLoading ? 'animated-bg-gradient' : '']"
+        />
 
         <h1 class="prose-2xl font-bold self-center my-4">
           {{ $t('general.signUp') }}
@@ -61,6 +64,10 @@ const { appInfo } = useGlobal()
     &:hover::after {
       @apply transform scale-110 ring ring-pink-500;
     }
+
+    &:active::after {
+      @apply ring ring-pink-500;
+    }
   }
 }
 </style>