Browse Source

chore(gui-v2): cleanup user settings page

pull/2757/head
braks 2 years ago
parent
commit
dbb6acfea1
  1. 7
      packages/nc-gui-v2/pages/index/index.vue
  2. 4
      packages/nc-gui-v2/pages/index/index/index.vue
  3. 4
      packages/nc-gui-v2/pages/index/index/list.vue
  4. 20
      packages/nc-gui-v2/pages/index/user/index.vue
  5. 42
      packages/nc-gui-v2/pages/index/user/index/index.vue

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

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

4
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' import MdiEditOutline from '~icons/mdi/edit-outline'
interface Props { interface Props {
projects: ProjectType[] projects?: ProjectType[]
} }
const { projects } = defineProps<Props>() const { projects = [] } = defineProps<Props>()
const emit = defineEmits(['delete-project']) const emit = defineEmits(['delete-project'])

4
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' import MdiEditOutline from '~icons/mdi/edit-outline'
interface Props { interface Props {
projects: ProjectType[] projects?: ProjectType[]
} }
const { projects } = defineProps<Props>() const { projects = [] } = defineProps<Props>()
const emit = defineEmits(['delete-project']) const emit = defineEmits(['delete-project'])

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

@ -1,25 +1,39 @@
<script setup lang="ts"> <script setup lang="ts">
import { useNuxtApp, useRoute } from '#app' import { navigateTo, useNuxtApp, useRoute } from '#app'
import MdiAccountCog from '~icons/mdi/account-cog' import MdiAccountCog from '~icons/mdi/account-cog'
import MdiFolderOutline from '~icons/mdi/folder-outline'
const { $api } = useNuxtApp() const { $api } = useNuxtApp()
const route = useRoute() const route = useRoute()
const navDrawerOptions = [ const navDrawerOptions = [
{
title: 'My NocoDB',
route: '/',
icon: MdiFolderOutline,
},
{ {
title: 'Settings', title: 'Settings',
route: '/user',
icon: MdiAccountCog, icon: MdiAccountCog,
}, },
] ]
const selectedKey = computed(() => [navDrawerOptions.findIndex((opt) => opt.route === route.path)])
</script> </script>
<template> <template>
<NuxtLayout> <NuxtLayout>
<template #sidebar> <template #sidebar>
<div class="flex flex-col h-full"> <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"> <div class="flex items-center gap-4">
<component :is="option.icon" /> <component :is="option.icon" />

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

@ -1,12 +1,13 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { message } from 'ant-design-vue'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils' import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
import { useNuxtApp } from '#app' 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 { 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() const { t } = useI18n()
@ -51,8 +52,11 @@ const passwordChange = async () => {
error = null error = null
try { 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) { } catch (e: any) {
error = await extractSdkResponseErrorMsg(e) error = await extractSdkResponseErrorMsg(e)
} }
@ -67,7 +71,10 @@ const resetError = () => {
<template> <template>
<a-form ref="formValidator" layout="vertical" :model="form" class="change-password h-full w-full" @finish="passwordChange"> <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> <h1 class="prose-2xl font-bold mb-4">{{ $t('activity.changePwd') }}</h1>
<Transition name="layout"> <Transition name="layout">
@ -76,9 +83,9 @@ const resetError = () => {
</div> </div>
</Transition> </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 <a-input-password
v-model:value="form.password" v-model:value="form.currentPassword"
size="large" size="large"
class="password" class="password"
:placeholder="$t('placeholder.password.current')" :placeholder="$t('placeholder.password.current')"
@ -86,7 +93,7 @@ const resetError = () => {
/> />
</a-form-item> </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 <a-input-password
v-model:value="form.password" v-model:value="form.password"
size="large" size="large"
@ -108,7 +115,7 @@ const resetError = () => {
<div class="flex flex-wrap gap-4 items-center mt-4 md:justify-between w-full"> <div class="flex flex-wrap gap-4 items-center mt-4 md:justify-between w-full">
<button class="submit" type="submit"> <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> </button>
</div> </div>
</div> </div>
@ -117,6 +124,21 @@ const resetError = () => {
<style lang="scss"> <style lang="scss">
.change-password { .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 { .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); @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);
} }

Loading…
Cancel
Save