refactor: focus inputs in modal on load

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/account/ResetPassword.vue

@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-import { message, navigateTo, reactive, ref, useApi, useGlobal, useI18n, useRouter } from '#imports'
+import { message, navigateTo, reactive, ref, useApi, useGlobal, useI18n } from '#imports'
 
-const router = useRouter()
-
-const { api, error, isLoading } = useApi({ useGlobalInstance: true })
+const { api, error } = useApi({ useGlobalInstance: true })
 
 const { t } = useI18n()
 
@@ -68,7 +66,6 @@ const resetError = () => {
 
 <template>
   <div class="relative flex flex-col justify-center gap-2 w-full p-8 md:(bg-white) max-w-[900px]">
-
     <h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.changePwd') }}</h1>
     <a-form
       ref="formValidator"

packages/nc-gui/components/account/Token.vue

@@ -90,6 +90,10 @@ const copyToken = (token: string | undefined) => {
 
   $e('c:api-token:copy')
 }
+
+const descriptionInput = ref((el) => {
+  el?.focus()
+})
 </script>
 
 <template>
@@ -237,7 +241,11 @@ const copyToken = (token: string | undefined) => {
           autocomplete="off"
           @finish="generateToken"
         >
-          <a-input v-model:value="selectedTokenData.description" :placeholder="$t('labels.description')" />
+          <a-input
+            :ref="descriptionInput"
+            v-model:value="selectedTokenData.description"
+            :placeholder="$t('labels.description')"
+          />
 
           <!-- Generate -->
           <div class="flex flex-row justify-center">

packages/nc-gui/components/account/UsersModal.vue

@@ -108,6 +108,9 @@ const clickInviteMore = () => {
   usersData.role = Role.OrgLevelViewer
   usersData.emails = ''
 }
+const emailInput = ref((el) => {
+  el?.focus()
+})
 </script>
 
 <template>
@@ -122,7 +125,7 @@ const clickInviteMore = () => {
   >
     <div class="flex flex-col">
       <div class="flex flex-row justify-between items-center pb-1.5 mb-2 border-b-1 w-full">
-        <a-typography-title class="select-none" :level="4"> {{ $t('activity.inviteUser') }} </a-typography-title>
+        <a-typography-title class="select-none" :level="4"> {{ $t('activity.inviteUser') }}</a-typography-title>
 
         <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="emit('closed')">
           <template #icon>
@@ -196,7 +199,12 @@ const clickInviteMore = () => {
                   >
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('datatype.Email') }}:</div>
 
-                    <a-input v-model:value="usersData.emails" validate-trigger="onBlur" :placeholder="$t('labels.email')" />
+                    <a-input
+                      :ref="emailInput"
+                      v-model:value="usersData.emails"
+                      validate-trigger="onBlur"
+                      :placeholder="$t('labels.email')"
+                    />
                   </a-form-item>
                 </div>
 

packages/nc-gui/pages/index/index.vue

@@ -21,8 +21,10 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
         <NuxtPage />
       </div>
 
-      <div :class="{'flex-1': route.name === 'index-index'}"
-           class=" flex gap-6 flex-col justify-center items-center md:(flex-row justify-between items-start)">
+      <div
+        :class="{ 'flex-1': route.name === 'index-index' }"
+        class="flex gap-6 flex-col justify-center items-center md:(flex-row justify-between items-start)"
+      >
         <template v-if="route.name === 'index-index'">
           <TransitionGroup name="page" mode="out-in">
             <div key="social-card">