Merge pull request #2757 from nocodb/feat/user-settings

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

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { createVNode } from '@vue/runtime-core'
 import { Modal } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
@@ -10,7 +9,6 @@ import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
 import MdiPlus from '~icons/mdi/plus'
 import MdiDatabaseOutline from '~icons/mdi/database-outline'
 import MdiFolderOutline from '~icons/mdi/folder-outline'
-import ExclamationCircleOutlined from '~icons/mdi/information-outline'
 
 const navDrawerOptions = [
   {
@@ -34,9 +32,11 @@ const navDrawerOptions = [
 
 const route = useRoute()
 
-const { $api } = useNuxtApp()
+const { $api, $state } = useNuxtApp()
 const toast = useToast()
 
+$state.sidebarOpen.value = false
+
 const response = await $api.project.list({})
 const projects = $ref(response.list)
 const activePage = $ref(navDrawerOptions[0].title)
@@ -59,7 +59,6 @@ const deleteProject = (project: ProjectType) => {
   })
 }
 
-console.log(route.name)
 const visible = ref(true)
 </script>
 

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

@@ -9,10 +9,10 @@ import MdiDatabaseOutline from '~icons/mdi/database-outline'
 import MdiEditOutline from '~icons/mdi/edit-outline'
 
 interface Props {
-  projects: ProjectType[]
+  projects?: ProjectType[]
 }
 
-const { projects } = defineProps<Props>()
+const { projects = [] } = defineProps<Props>()
 
 const emit = defineEmits(['delete-project'])
 

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

@@ -6,10 +6,10 @@ import MdiDeleteOutline from '~icons/mdi/delete-outline'
 import MdiEditOutline from '~icons/mdi/edit-outline'
 
 interface Props {
-  projects: ProjectType[]
+  projects?: ProjectType[]
 }
 
-const { projects } = defineProps<Props>()
+const { projects = [] } = defineProps<Props>()
 
 const emit = defineEmits(['delete-project'])
 
@@ -22,28 +22,26 @@ const openProject = async (project: ProjectType) => {
 </script>
 
 <template>
-  <div class="mx-auto max-w-[700px]">
+  <div class="grid grid-cols-4 gap-2 prose-md p-2 font-semibold">
-    <div class="grid grid-cols-4 gap-2 prose-md p-2 font-semibold">
+    <div>{{ $t('general.title') }}</div>
-      <div>{{ $t('general.title') }}</div>
+    <div>Updated At</div>
-      <div>Updated At</div>
+    <div></div>
-      <div></div>
+  </div>
-    </div>
-
-    <v-divider class="col-span-3" />
 
-    <template v-for="project of projects" :key="project.id">
+  <v-divider class="col-span-3" />
-      <div
+
-        class="cursor-pointer grid grid-cols-4 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2 transition-color ease-in duration-100"
+  <template v-for="project of projects" :key="project.id">
-        @click="openProject(project)"
+    <div
-      >
+      class="cursor-pointer grid grid-cols-4 gap-2 prose-md hover:(bg-gray-100 shadow-sm dark:text-black) p-2 transition-color ease-in duration-100"
-        <div class="font-semibold">{{ project.title || 'Untitled' }}</div>
+      @click="openProject(project)"
-        <div>{{ project.updated_at }}</div>
+    >
-        <div>
+      <div class="font-semibold">{{ project.title || 'Untitled' }}</div>
-          <MdiDeleteOutline class="text-gray-500 hover:text-red-500 mr-2" @click.stop @click="emit('delete-project', project)" />
+      <div>{{ project.updated_at }}</div>
-          <MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop />
+      <div>
-        </div>
+        <MdiDeleteOutline class="text-gray-500 hover:text-red-500 mr-2" @click.stop @click="emit('delete-project', project)" />
+        <MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop />
       </div>
-      <v-divider class="col-span-3" />
+    </div>
-    </template>
+    <v-divider class="col-span-3" />
-  </div>
+  </template>
 </template>

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

@@ -1,25 +1,39 @@
 <script setup lang="ts">
-import { useNuxtApp, useRoute } from '#app'
+import { navigateTo, useNuxtApp, useRoute } from '#app'
 import MdiAccountCog from '~icons/mdi/account-cog'
+import MdiFolderOutline from '~icons/mdi/folder-outline'
 
 const { $api } = useNuxtApp()
 
 const route = useRoute()
 
 const navDrawerOptions = [
+  {
+    title: 'My NocoDB',
+    route: '/',
+    icon: MdiFolderOutline,
+  },
   {
     title: 'Settings',
+    route: '/user',
     icon: MdiAccountCog,
   },
 ]
+
+const selectedKey = computed(() => [navDrawerOptions.findIndex((opt) => opt.route === route.path)])
 </script>
 
 <template>
   <NuxtLayout>
     <template #sidebar>
       <div class="flex flex-col h-full">
-        <a-menu :selected-keys="[0]" class="pr-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
+        <a-menu :selected-keys="selectedKey" class="pr-4 dark:bg-gray-800 dark:text-white flex-1 border-0">
-          <a-menu-item v-for="(option, index) in navDrawerOptions" :key="index" class="!rounded-r-lg">
+          <a-menu-item
+            v-for="(option, index) in navDrawerOptions"
+            :key="index"
+            class="!rounded-r-lg"
+            @click="navigateTo(option.route)"
+          >
             <div class="flex items-center gap-4">
               <component :is="option.icon" />
 

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

@@ -1,12 +1,13 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
+import { message } from 'ant-design-vue'
 import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { useNuxtApp } from '#app'
-import MaterialSymbolsWarning from '~icons/material-symbols/warning'
-import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-launch-outline'
 import { reactive, ref } from '#imports'
+import MaterialSymbolsWarning from '~icons/material-symbols/warning'
+import MdiKeyChange from '~icons/mdi/key-change'
 
-const { $api } = useNuxtApp()
+const { $api, $state } = useNuxtApp()
 
 const { t } = useI18n()
 
@@ -51,8 +52,11 @@ const passwordChange = async () => {
 
   error = null
   try {
-    const { msg } = await $api.auth.passwordChange(form)
+    const { msg } = await $api.auth.passwordChange({
-    console.log(msg)
+      currentPassword: form.currentPassword,
+      newPassword: form.password,
+    })
+    message.success(msg)
   } catch (e: any) {
     error = await extractSdkResponseErrorMsg(e)
   }
@@ -67,7 +71,10 @@ const resetError = () => {
 
 <template>
   <a-form ref="formValidator" layout="vertical" :model="form" class="change-password h-full w-full" @finish="passwordChange">
-    <div class="md:relative flex flex-col gap-2 w-full h-full p-8 max-w-1/2">
+    <div
+      class="md:relative flex flex-col gap-2 w-full h-full p-8 lg:(max-w-1/2)"
+      :class="{ 'mx-auto': !$state.sidebarOpen.value }"
+    >
       <h1 class="prose-2xl font-bold mb-4">{{ $t('activity.changePwd') }}</h1>
 
       <Transition name="layout">
@@ -76,9 +83,9 @@ const resetError = () => {
         </div>
       </Transition>
 
-      <a-form-item :label="$t('placeholder.password.current')" name="currentPassword" :rules="formRules.password">
+      <a-form-item :label="$t('placeholder.password.current')" name="currentPassword" :rules="formRules.currentPassword">
         <a-input-password
-          v-model:value="form.password"
+          v-model:value="form.currentPassword"
           size="large"
           class="password"
           :placeholder="$t('placeholder.password.current')"
@@ -86,7 +93,7 @@ const resetError = () => {
         />
       </a-form-item>
 
-      <a-form-item :label="$t('placeholder.password.new')" name="newPassword" :rules="formRules.password">
+      <a-form-item :label="$t('placeholder.password.new')" name="password" :rules="formRules.password">
         <a-input-password
           v-model:value="form.password"
           size="large"
@@ -108,7 +115,7 @@ const resetError = () => {
 
       <div class="flex flex-wrap gap-4 items-center mt-4 md:justify-between w-full">
         <button class="submit" type="submit">
-          <span class="flex items-center gap-2"><MaterialSymbolsRocketLaunchOutline /> {{ $t('activity.changePwd') }}</span>
+          <span class="flex items-center gap-2"><MdiKeyChange /> {{ $t('activity.changePwd') }}</span>
         </button>
       </div>
     </div>
@@ -117,6 +124,21 @@ const resetError = () => {
 
 <style lang="scss">
 .change-password {
+  .ant-input-affix-wrapper,
+  .ant-input {
+    @apply dark:(!bg-gray-700 !text-white) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
+  }
+
+  .password {
+    input {
+      @apply !border-none;
+    }
+
+    .ant-input-password-icon {
+      @apply dark:!text-white;
+    }
+  }
+
   .submit {
     @apply ml-1 bordered border-gray-300 rounded-lg p-4 bg-gray-100/50 text-white bg-primary hover:bg-primary/75 dark:(!bg-secondary/75 hover:!bg-secondary/50);
   }