From bdf0f6419f8ed7f17fca72f94f8cbb54b3cfc6f7 Mon Sep 17 00:00:00 2001
From: GUO YANKE <hi@yankeguo.com>
Date: Fri, 2 Feb 2024 16:09:26 +0800
Subject: [PATCH] feat: complete i18n

---
 app.go                                       |  31 ++++++
 ui/components/skeleton/dashboard.vue         |   6 +-
 ui/pages/dashboard/index.vue                 |   2 +-
 ui/pages/dashboard/profile/index.vue         |  92 +++++++++++++++--
 ui/pages/dashboard/profile/keys/index.vue    |  24 +++--
 ui/pages/dashboard/servers/index.vue         |  25 ++---
 ui/pages/dashboard/users/[user_id]/index.vue |  26 +++--
 ui/pages/dashboard/users/index.vue           |  46 +++++----
 ui/plugins/i18n.ts                           | 100 ++++++++++++++++++-
 ui/pnpm-lock.yaml                            |  50 +++++-----
 10 files changed, 312 insertions(+), 90 deletions(-)

diff --git a/app.go b/app.go
index e950681..60c02b3 100644
--- a/app.go
+++ b/app.go
@@ -117,6 +117,12 @@ func (a *App) routeSignIn(c ufx.Context) {
 	}
 	user.PasswordDigest = ""
 
+	// must not blocked
+	if user.IsBlocked {
+		halt.String("blocked", halt.WithBadRequest())
+		return
+	}
+
 	// delete history tokens
 	rg.Must(db.Token.Where(db.Token.UserID.Eq(user.ID), db.Token.CreatedAt.Lte(time.Now().Add(-time.Hour*24*7))).Delete())
 
@@ -451,9 +457,34 @@ func (a *App) routeGrantedItems(c ufx.Context) {
 	c.JSON(map[string]any{"granted_items": grantedItems})
 }
 
+func (a *App) routeUpdatePassword(c ufx.Context) {
+	_, u := a.requireUser(c)
+
+	var data struct {
+		OldPassword string `json:"old_password" validate:"required"`
+		NewPassword string `json:"new_password" validate:"required,min=6"`
+	}
+
+	c.Bind(&data)
+
+	if !u.CheckPassword(data.OldPassword) {
+		halt.String("invalid old password", halt.WithBadRequest())
+		return
+	}
+
+	u.SetPassword(data.NewPassword)
+
+	db := dao.Use(a.db)
+
+	rg.Must(db.User.Where(db.User.ID.Eq(u.ID)).UpdateColumnSimple(db.User.PasswordDigest.Value(u.PasswordDigest)))
+
+	c.JSON(map[string]any{})
+}
+
 func InstallAppToRouter(a *App, ur ufx.Router) {
 	ur.HandleFunc("/backend/sign_in", a.routeSignIn)
 	ur.HandleFunc("/backend/sign_out", a.routeSignOut)
+	ur.HandleFunc("/backend/update_password", a.routeUpdatePassword)
 	ur.HandleFunc("/backend/current_user", a.routeCurrentUser)
 	ur.HandleFunc("/backend/granted_items", a.routeGrantedItems)
 	ur.HandleFunc("/backend/keys", a.routeListKeys)
diff --git a/ui/components/skeleton/dashboard.vue b/ui/components/skeleton/dashboard.vue
index 8c2d723..ea53533 100644
--- a/ui/components/skeleton/dashboard.vue
+++ b/ui/components/skeleton/dashboard.vue
@@ -24,7 +24,7 @@ const links = [
           to: { name: "dashboard-servers" },
         },
         {
-          label: "Users",
+          label: $t('users.title'),
           icon: "i-mdi-account-multiple",
           to: { name: "dashboard-users" },
         },
@@ -33,12 +33,12 @@ const links = [
   ],
   [
     {
-      label: "SSH Keys",
+      label: $t('ssh_keys.title'),
       icon: "i-mdi-key-chain",
       to: { name: "dashboard-profile-keys" },
     },
     {
-      label: "Profile",
+      label: $t('profile.title'),
       icon: "i-mdi-account-circle",
       to: { name: "dashboard-profile" },
     },
diff --git a/ui/pages/dashboard/index.vue b/ui/pages/dashboard/index.vue
index 4b8eaf2..86f9b8e 100644
--- a/ui/pages/dashboard/index.vue
+++ b/ui/pages/dashboard/index.vue
@@ -37,7 +37,7 @@ function expandServerUser(s: string): string {
   <SkeletonDashboard :title-name="$t('dashboard.title')" title-icon="i-mdi-view-dashboard">
     <template #left>
       <UCard :ui="uiCard">
-        <p></p>
+        <article class="prose dark:prose-invert" v-html="$t('dashboard.intro')"></article>
       </UCard>
     </template>
     <UTable :rows="items.granted_items" :columns="columns">
diff --git a/ui/pages/dashboard/profile/index.vue b/ui/pages/dashboard/profile/index.vue
index aa88c7f..bd61f8e 100644
--- a/ui/pages/dashboard/profile/index.vue
+++ b/ui/pages/dashboard/profile/index.vue
@@ -1,23 +1,27 @@
 <script setup lang="ts">
-import { formatTimeAgo } from "@vueuse/core";
+import type { FormError, FormSubmitEvent } from "#ui/types";
+import { guardWorking } from "~/composables/error";
+
 definePageMeta({
   middleware: ["auth"],
 });
 
+const { $t } = useNuxtApp()
+
 const { data: currentUser } = await useCurrentUser();
 
 const fields = computed(() => [
   {
-    name: "Username",
+    name: $t('common.user_id'),
     content: currentUser.value.user?.id || "",
   },
   {
-    name: "Is Admin",
-    content: currentUser.value.user?.is_admin ? "Yes" : "No",
+    name: $t('common.user_role'),
+    content: currentUser.value.user?.is_admin ? $t('common.user_role_admin') : $t('common.user_role_standard'),
   },
   {
-    name: "Created At",
-    content: formatTimeAgo(new Date(currentUser.value.user?.created_at || "")),
+    name: $t('common.created_at'),
+    content: currentUser.value.user?.created_at || "",
   },
 ]);
 
@@ -28,17 +32,89 @@ async function doSignOut() {
   await $fetch("/backend/sign_out");
   navigateTo({ name: "index" });
 }
+
+const state = reactive<{
+  old_password?: string;
+  new_password?: string;
+  repeat_password?: string;
+}>({
+  old_password: undefined,
+  new_password: undefined,
+  repeat_password: undefined,
+});
+
+const validate = (state: any): FormError[] => {
+  const errors = [];
+  if (!state.old_password) errors.push({ path: "old_password", message: "Required" });
+  if (!state.new_password) errors.push({ path: "new_password", message: "Required" });
+  if (!state.repeat_password) errors.push({ path: "repeat_password", message: "Required" });
+  if (state.new_password && state.new_password.length < 6) errors.push({ path: "new_password", message: "Too short, must >= 6" });
+  if (state.new_password !== state.repeat_password) errors.push({ path: "repeat_password", message: "Not match" });
+  return errors;
+};
+
+const working = ref(0);
+
+async function onSubmit(event: FormSubmitEvent<any>) {
+  await guardWorking(working, async () => {
+    await $fetch("/backend/update_password", {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(event.data)
+    })
+    state.old_password = ''
+    state.new_password = ''
+    state.repeat_password = ''
+    const toast = useToast()
+    toast.add({ title: $t('profile.password_updated'), color: 'green' })
+  })
+}
 </script>
 
 <template>
-  <SkeletonDashboard title-name="Profile" title-icon="i-mdi-account-circle">
+  <SkeletonDashboard :title-name="$t('profile.title')" title-icon="i-mdi-account-circle">
     <template #left>
       <UCard :ui="uiCard">
+        <template #header>
+          <div class="flex flex-row items-center">
+            <UIcon name="i-mdi-account-circle" class="me-1"></UIcon>
+            <span>{{ $t('profile.title') }}</span>
+          </div>
+        </template>
         <SimpleFields :fields="fields"></SimpleFields>
         <div class="mt-6">
-          <UButton icon="i-mdi-logout" label="Sign out" color="red" @click="doSignOut"></UButton>
+          <UButton icon="i-mdi-logout" :label="$t('common.sign_out')" color="red" @click="doSignOut"></UButton>
         </div>
       </UCard>
     </template>
+    <UCard :ui="uiCard" class="w-80">
+      <template #header>
+        <div class="flex flex-row items-center">
+          <UIcon name="i-mdi-form-textbox-password" class="me-1"></UIcon>
+          <span>{{ $t('profile.update_password') }}</span>
+        </div>
+      </template>
+      <UForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit">
+        <UFormGroup :label="$t('profile.old_password')" name="old_password">
+          <UInput v-model="state.old_password" :placeholder="$t('profile.input_old_password')" type="password" />
+        </UFormGroup>
+
+        <UFormGroup :label="$t('profile.new_password')" name="new_password">
+          <UInput v-model="state.new_password" type="password" :placeholder="$t('profile.input_new_password')" />
+        </UFormGroup>
+
+
+        <UFormGroup :label="$t('profile.repeat_password')" name="repeat_password">
+          <UInput v-model="state.repeat_password" type="password" :placeholder="$t('profile.input_repeat_password')" />
+        </UFormGroup>
+
+        <UButton type="submit" icon="i-mdi-check-circle" :label="$t('common.submit')" :loading="!!working"
+          :disabled="!!working">
+        </UButton>
+      </UForm>
+
+    </UCard>
   </SkeletonDashboard>
 </template>
diff --git a/ui/pages/dashboard/profile/keys/index.vue b/ui/pages/dashboard/profile/keys/index.vue
index d15ac90..f7b1cca 100644
--- a/ui/pages/dashboard/profile/keys/index.vue
+++ b/ui/pages/dashboard/profile/keys/index.vue
@@ -2,6 +2,8 @@
 import type { FormError, FormSubmitEvent } from "#ui/types";
 import { guardWorking } from "~/composables/error";
 
+const { $t } = useNuxtApp();
+
 definePageMeta({
   middleware: ["auth"],
 });
@@ -9,11 +11,11 @@ definePageMeta({
 const columns = [
   {
     key: "display_name",
-    label: "Name",
+    label: $t('common.ssh_key_display_name'),
   },
   {
     key: "id",
-    label: "Fingerprint",
+    label: $t('common.ssh_key_id'),
   },
   {
     key: "actions",
@@ -73,23 +75,24 @@ async function onSubmit(event: FormSubmitEvent<any>) {
 </script>
 
 <template>
-  <SkeletonDashboard title-name="SSH Keys" title-icon="i-mdi-key-chain">
+  <SkeletonDashboard :title-name="$t('ssh_keys.title')" title-icon="i-mdi-key-chain">
     <template #left>
       <UCard :ui="uiCard">
         <template #header>
           <UIcon name="i-mdi-key-plus" class="me-1"></UIcon>
-          <span>Add Key</span>
+          <span>{{ $t('ssh_keys.add_ssh_key') }}</span>
         </template>
         <UForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit">
-          <UFormGroup label="Name" name="display_name">
-            <UInput v-model="state.display_name" placeholder="Input name" />
+          <UFormGroup :label="$t('common.ssh_key_display_name')" name="display_name">
+            <UInput v-model="state.display_name" :placeholder="$t('ssh_keys.input_display_name')" />
           </UFormGroup>
 
-          <UFormGroup label="Public Key" name="public_key">
-            <UTextarea v-model="state.public_key" :rows="12" placeholder="Input ssh public key" />
+          <UFormGroup :label="$t('ssh_keys.public_key')" name="public_key">
+            <UTextarea v-model="state.public_key" :rows="12" :placeholder="$t('ssh_keys.input_public_key')" />
           </UFormGroup>
 
-          <UButton type="submit" :disabled="!!working" :loading="!!working" icon="i-mdi-check" label="Submit">
+          <UButton type="submit" :disabled="!!working" :loading="!!working" icon="i-mdi-check"
+            :label="$t('common.submit')">
           </UButton>
         </UForm>
       </UCard>
@@ -97,7 +100,8 @@ async function onSubmit(event: FormSubmitEvent<any>) {
 
     <UTable :rows="keys.keys" :columns="columns">
       <template #actions-data="{ row }">
-        <UButton variant="link" color="red" icon="i-mdi-trash" label="Delete" @click="deleteKey(row.id)"></UButton>
+        <UButton variant="link" color="red" icon="i-mdi-trash" :label="$t('common.delete')" @click="deleteKey(row.id)">
+        </UButton>
       </template>
     </UTable>
 
diff --git a/ui/pages/dashboard/servers/index.vue b/ui/pages/dashboard/servers/index.vue
index affe5b6..8e0acbe 100644
--- a/ui/pages/dashboard/servers/index.vue
+++ b/ui/pages/dashboard/servers/index.vue
@@ -2,6 +2,8 @@
 import type { FormError, FormSubmitEvent } from "#ui/types";
 import { guardWorking } from "~/composables/error";
 
+const { $t } = useNuxtApp();
+
 definePageMeta({
   middleware: ["auth"],
 });
@@ -11,11 +13,11 @@ const { data: servers, refresh: refreshServers } = await useServers();
 const columns = [
   {
     key: "id",
-    label: "Name",
+    label: $t('common.server_id'),
   },
   {
     key: "address",
-    label: "Address",
+    label: $t('common.server_address'),
   },
   {
     key: 'actions'
@@ -93,11 +95,11 @@ async function deleteServer(id: string) {
         </template>
         <UForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit">
           <UFormGroup :label="$t('common.server_id')" name="id">
-            <UInput v-model="state.id" placeholder="Input server name" />
+            <UInput v-model="state.id" :placeholder="$t('servers.input_server_id')" />
           </UFormGroup>
 
           <UFormGroup :label="$t('common.server_address')" name="address">
-            <UInput v-model="state.address" placeholder="Input server address" />
+            <UInput v-model="state.address" :placeholder="$t('servers.input_server_address')" />
           </UFormGroup>
 
           <UButton type="submit" icon="i-mdi-check-circle" :label="$t('common.submit')" :loading="!!working"
@@ -108,11 +110,10 @@ async function deleteServer(id: string) {
 
       <div class="pt-8">
         <UCard :ui="uiCard">
-          <p>
-            Add the following public key to the server's authorized_keys file.
-          </p>
+          <article class="prose dark:prose-invert" v-html="$t('servers.intro_authorized_keys')"></article>
           <template #footer>
-            <UButton variant="link" to="/backend/authorized_keys" target="_blank" label="Server Authorized Keys">
+            <UButton variant="link" to="/backend/authorized_keys" target="_blank"
+              :label="$t('servers.view_authorized_keys')">
               <template #trailing>
                 <UIcon name="i-heroicons-arrow-right-20-solid" />
               </template>
@@ -122,12 +123,12 @@ async function deleteServer(id: string) {
       </div>
     </template>
 
-    <UTable class="mt-4" :rows="servers.servers" :columns="columns">
+    <UTable :rows="servers.servers" :columns="columns">
       <template #actions-data="{ row }">
-        <UButton variant="link" color="blue" icon="i-mdi-edit" label="Edit" @click="editServer(row)" :disabled="!!working"
-          :loading="!!working"></UButton>
+        <UButton variant="link" color="blue" icon="i-mdi-edit" :label="$t('common.edit')" @click="editServer(row)"
+          :disabled="!!working" :loading="!!working"></UButton>
 
-        <UButton variant="link" color="red" icon="i-mdi-trash" label="Delete" @click="deleteServer(row.id)"
+        <UButton variant="link" color="red" icon="i-mdi-trash" :label="$t('common.delete')" @click="deleteServer(row.id)"
           :disabled="!!working" :loading="!!working"></UButton>
       </template>
 
diff --git a/ui/pages/dashboard/users/[user_id]/index.vue b/ui/pages/dashboard/users/[user_id]/index.vue
index 01948f2..fb89652 100644
--- a/ui/pages/dashboard/users/[user_id]/index.vue
+++ b/ui/pages/dashboard/users/[user_id]/index.vue
@@ -2,6 +2,8 @@
 import type { FormError, FormSubmitEvent } from "#ui/types";
 import { guardWorking } from "~/composables/error";
 
+const { $t } = useNuxtApp()
+
 definePageMeta({
     middleware: ["auth"],
 })
@@ -11,15 +13,15 @@ const { data: grants, refresh: refreshGrants } = await useGrants(useRoute().para
 const columns = [
     {
         key: "server_user",
-        label: 'Server User'
+        label: $t('common.server_user')
     },
     {
         key: 'server_id',
-        label: 'Server ID'
+        label: $t('common.server_id')
     },
     {
         key: 'created_at',
-        label: 'Created At'
+        label: $t('common.created_at')
     },
     {
         key: 'actions'
@@ -82,27 +84,31 @@ async function deleteGrant({ id, server_user, server_id }: { id: string; server_
 </script>
 
 <template>
-    <SkeletonDashboard :title-name="'Grants: ' + $route.params.user_id" title-icon="i-mdi-server-shield">
+    <SkeletonDashboard :title-name="$t('grants.title') + ' - ' + $route.params.user_id" title-icon="i-mdi-server-shield">
         <template #left>
             <UCard :ui="uiCard">
                 <template #header>
                     <div class="flex flex-row items-center">
                         <UIcon name="i-mdi-server-plus" class="me-1"></UIcon>
-                        <span>Add Grant</span>
+                        <span>{{ $t('grants.add_grant') }}</span>
                     </div>
                 </template>
                 <UForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit">
-                    <UFormGroup label="Server User" name="server_user">
+                    <UFormGroup :label="$t('common.server_user')" name="server_user">
                         <UInput v-model="state.server_user" />
                     </UFormGroup>
 
-                    <UFormGroup label="Server ID" name="server_id">
+                    <UFormGroup :label="$t('common.server_id')" name="server_id">
                         <UInput v-model="state.server_id" type="password" />
                     </UFormGroup>
 
-                    <UButton type="submit" icon="i-mdi-check-circle" label="Submit" :loading="!!working"
+                    <UButton type="submit" icon="i-mdi-check-circle" :label="$t('common.submit')" :loading="!!working"
                         :disabled="!!working">
                     </UButton>
+
+                    <UFormGroup>
+                        <p class="text-sm text-slate-600 dark:text-slate-400">{{ $t('grants.intro_asterisk') }}</p>
+                    </UFormGroup>
                 </UForm>
             </UCard>
         </template>
@@ -110,8 +116,8 @@ async function deleteGrant({ id, server_user, server_id }: { id: string; server_
 
         <UTable :rows="grants.grants" :columns="columns">
             <template #actions-data="{ row }">
-                <UButton variant="link" color="red" icon="i-mdi-trash" label="Delete" @click="deleteGrant(row)"
-                    :disabled="!!working" :loading="!!working"></UButton>
+                <UButton variant="link" color="red" icon="i-mdi-trash" :label="$t('common.delete')"
+                    @click="deleteGrant(row)" :disabled="!!working" :loading="!!working"></UButton>
             </template>
         </UTable>
 
diff --git a/ui/pages/dashboard/users/index.vue b/ui/pages/dashboard/users/index.vue
index db4e0ae..4ca91b8 100644
--- a/ui/pages/dashboard/users/index.vue
+++ b/ui/pages/dashboard/users/index.vue
@@ -2,6 +2,8 @@
 import type { FormError, FormSubmitEvent } from "#ui/types";
 import { guardWorking } from "~/composables/error";
 
+const { $t } = useNuxtApp()
+
 definePageMeta({
   middleware: ["auth"],
 });
@@ -11,11 +13,11 @@ const { data: users, refresh: refreshUsers } = await useUsers();
 const columns = [
   {
     key: "id",
-    label: "Username",
+    label: $t('common.user_id'),
   },
   {
     key: "role",
-    label: 'Role'
+    label: $t('common.user_role'),
   },
   {
     key: 'actions'
@@ -89,25 +91,26 @@ async function updateUser(id: string, { is_admin, is_blocked }: { is_admin?: boo
 </script>
 
 <template>
-  <SkeletonDashboard title-name="Users" title-icon="i-mdi-account-multiple">
+  <SkeletonDashboard :title-name="$t('users.title')" title-icon="i-mdi-account-multiple">
     <template #left>
       <UCard :ui="uiCard">
         <template #header>
           <div class="flex flex-row items-center">
             <UIcon name="i-mdi-user-plus" class="me-1"></UIcon>
-            <span>Add / Update User</span>
+            <span>{{ $t('users.add_update_user') }}</span>
           </div>
         </template>
         <UForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit">
-          <UFormGroup label="Name" name="id">
-            <UInput v-model="state.id" placeholder="Input username" />
+          <UFormGroup :label="$t('common.user_id')" name="id">
+            <UInput v-model="state.id" :placeholder="$t('users.input_user_id')" />
           </UFormGroup>
 
-          <UFormGroup label="Password" name="password">
-            <UInput v-model="state.password" type="password" placeholder="Input password" />
+          <UFormGroup :label="$t('common.password')" name="password">
+            <UInput v-model="state.password" type="password" :placeholder="$t('users.input_password')" />
           </UFormGroup>
 
-          <UButton type="submit" icon="i-mdi-check-circle" label="Submit" :loading="!!working" :disabled="!!working">
+          <UButton type="submit" icon="i-mdi-check-circle" :label="$t('common.submit')" :loading="!!working"
+            :disabled="!!working">
           </UButton>
         </UForm>
       </UCard>
@@ -120,24 +123,27 @@ async function updateUser(id: string, { is_admin, is_blocked }: { is_admin?: boo
         </UButton>
       </template>
       <template #role-data="{ row }">
-        <UBadge color="red" class="me-2" v-if="row.is_blocked">Disabled</UBadge>
-        <UBadge variant="outline" color="lime" v-else-if="row.is_admin">Admin</UBadge>
-        <UBadge variant="outline" v-else>Normal</UBadge>
+        <UBadge color="red" class="me-2" v-if="row.is_blocked">{{ $t('common.user_role_disabled') }}</UBadge>
+        <UBadge variant="outline" color="lime" v-else-if="row.is_admin">{{ $t('common.user_role_admin') }}</UBadge>
+        <UBadge variant="outline" v-else>{{ $t('common.user_role_standard') }}</UBadge>
       </template>
       <template #actions-data="{ row }">
         <template v-if="!row.is_blocked">
-          <UButton class="w-40" v-if="row.is_admin" variant="ghost" color="red" icon="i-mdi-account-tie-voice-off"
-            label="Revoke Admin" @click="updateUser(row.id, { is_admin: false })" :disabled="!!working"
+          <UButton class="w-30" v-if="row.is_admin" variant="ghost" color="red" icon="i-mdi-account-tie-voice-off"
+            :label="$t('users.revoke_admin')" @click="updateUser(row.id, { is_admin: false })" :disabled="!!working"
+            :loading="!!working"></UButton>
+          <UButton class="w-30" v-else variant="ghost" color="lime" icon="i-mdi-account-tie-voice"
+            :label="$t('users.assign_admin')" @click="updateUser(row.id, { is_admin: true })" :disabled="!!working"
             :loading="!!working"></UButton>
-          <UButton class="w-40" v-else variant="ghost" color="lime" icon="i-mdi-account-tie-voice" label="Assign Admin"
-            @click="updateUser(row.id, { is_admin: true })" :disabled="!!working" :loading="!!working"></UButton>
         </template>
 
-        <UButton class="ms-2 w-32" v-if="row.is_blocked" variant="ghost" color="lime" icon="i-mdi-account-check"
-          label="Enable" @click="updateUser(row.id, { is_blocked: false })" :disabled="!!working" :loading="!!working">
+        <UButton class="ms-2 w-20" v-if="row.is_blocked" variant="ghost" color="lime" icon="i-mdi-account-check"
+          :label="$t('users.enable')" @click="updateUser(row.id, { is_blocked: false })" :disabled="!!working"
+          :loading="!!working">
         </UButton>
-        <UButton class="ms-2 w-32" v-else variant="ghost" color="red" icon="i-mdi-account-cancel" label="Disable"
-          @click="updateUser(row.id, { is_blocked: true })" :disabled="!!working" :loading="!!working"></UButton>
+        <UButton class="ms-2 w-20" v-else variant="ghost" color="red" icon="i-mdi-account-cancel"
+          :label="$t('users.disable')" @click="updateUser(row.id, { is_blocked: true })" :disabled="!!working"
+          :loading="!!working"></UButton>
       </template>
     </UTable>
   </SkeletonDashboard>
diff --git a/ui/plugins/i18n.ts b/ui/plugins/i18n.ts
index 39c991f..a6410c4 100644
--- a/ui/plugins/i18n.ts
+++ b/ui/plugins/i18n.ts
@@ -4,21 +4,70 @@ import { resolveAcceptLanguage } from "~/utils/resolve-accept-language/resolve-a
 
 const en = {
   common: {
+    user_id: 'Username',
+    user_role: 'Role',
+    user_role_admin: 'Admin',
+    user_role_standard: 'Standard',
+    user_role_disabled: 'Disabled',
     server_user: 'Server User',
     server_id: 'Server Name',
     server_address: 'Server Address',
+    created_at: 'Created At',
+    ssh_key_id: 'Fingerprint',
+    ssh_key_display_name: 'Display Name',
+    edit: 'Edit',
+    delete: 'Delete',
     username: 'Username',
     password: 'Password',
     submit: 'Submit',
+    sign_out: 'Sign Out',
     sign_in: 'Sign In'
   },
   dashboard: {
     command_example: 'Command Example',
+    intro: 'Execute ssh command with format <code>ssh SERVER_USER@SERVER_NAME@BUNKER_ADDRESS</code>, the <code>SERVER_USER@SERVER_NAME</code> part will be sent to Bunker server as user field to determine the target server',
     title: 'Dashboard'
   },
   servers: {
     add_update_server: 'Add / Update Server',
-    title: 'Servers'
+    title: 'Servers',
+    input_server_id: 'Input server name here',
+    input_server_address: 'Input server address here',
+    view_authorized_keys: 'View Authorized Keys',
+    intro_authorized_keys: 'To allow Bunker to relay SSH connections to this server, please add the following public key to the server user\'s <code>$HOME/.ssh/authorized_keys</code> file'
+  },
+  users: {
+    title: 'Users',
+    add_update_user: 'Add / Update User',
+    input_user_id: 'Input user name here',
+    input_password: 'Input password here',
+    revoke_admin: 'Revoke Admin',
+    assign_admin: 'Assign Admin',
+    disable: 'Disable',
+    enable: 'Enable',
+  },
+  grants: {
+    title: 'Grants',
+    add_grant: 'Add Grant',
+    intro_asterisk: 'The asterisk (*) is a wildcard that matches any server user or server name',
+  },
+  ssh_keys: {
+    title: 'SSH Keys',
+    add_ssh_key: 'Add SSH Key',
+    public_key: 'Public Key',
+    input_display_name: 'Input display name here',
+    input_public_key: 'Input public key here',
+  },
+  profile: {
+    title: 'Profile',
+    update_password: 'Update Password',
+    password_updated: 'Password updated successfully',
+    old_password: 'Old Password',
+    input_old_password: 'Input old password here',
+    new_password: 'New Password',
+    input_new_password: 'Input new password here',
+    repeat_password: 'Repeat Password',
+    input_repeat_password: 'Input repeat password here',
   },
   lastwill: "Alive?",
   pronouns: "him",
@@ -29,21 +78,70 @@ const en = {
 
 const zh: typeof en = {
   common: {
+    user_id: '用户名',
+    user_role: '角色',
+    user_role_admin: '管理员',
+    user_role_standard: '普通用户',
+    user_role_disabled: '已禁用',
     server_user: '服务器用户',
     server_id: '服务器名称',
+    created_at: '创建时间',
     server_address: '服务器地址',
+    ssh_key_display_name: '显示名称',
+    ssh_key_id: '指纹',
+    edit: '编辑',
+    delete: '删除',
     submit: '提交',
     username: '用户名',
     password: '密码',
+    sign_out: '登出',
     sign_in: '登录'
   },
   dashboard: {
     command_example: '命令示例',
+    intro: '使用格式 <code>ssh 用户@服务器@BUNKER地址</code> 执行 ssh 命令<br/><br/>其中 <code>服务器用户@服务器名称</code> 部分会以用户字段发送到 Bunker 服务器，用来判断要连接的目标服务器',
     title: '工作台'
   },
   servers: {
     add_update_server: '添加 / 更新服务器',
     title: '服务器管理',
+    input_server_id: '在此输入服务器名称',
+    input_server_address: '在此输入服务器地址',
+    view_authorized_keys: '查看公钥',
+    intro_authorized_keys: '为了让服务器的 SSH 连接可以被 Bunker 中继，请将以下公钥添加到目标服务器用户的 <code>$HOME/.ssh/authorized_keys</code> 文件中',
+  },
+  users: {
+    title: '用户管理',
+    add_update_user: '添加 / 更新用户',
+    input_user_id: '在此输入用户名',
+    input_password: '在此输入密码',
+    assign_admin: '授予管理员',
+    revoke_admin: '撤销管理员',
+    enable: '启用',
+    disable: '禁用',
+  },
+  grants: {
+    title: '授权管理',
+    add_grant: '添加授权',
+    intro_asterisk: '星号 (*) 是通配符，匹配任意服务器用户或服务器名称',
+  },
+  ssh_keys: {
+    title: 'SSH 公钥',
+    add_ssh_key: '添加 SSH 公钥',
+    public_key: '公钥',
+    input_display_name: '在此输入显示名称',
+    input_public_key: '在此输入公钥',
+  },
+  profile: {
+    title: '个人资料',
+    update_password: '更新密码',
+    password_updated: '密码更新成功',
+    old_password: '旧密码',
+    input_old_password: '在此输入旧密码',
+    new_password: '新密码',
+    input_new_password: '在此输入新密码',
+    repeat_password: '重复密码',
+    input_repeat_password: '在此输入重复密码',
   },
   lastwill: "存活?",
   pronouns: "他",
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index a5276a4..d0ba3fb 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -833,8 +833,8 @@ packages:
       '@iconify/types': 2.0.0
     dev: false
 
-  /@iconify/collections@1.0.389:
-    resolution: {integrity: sha512-QNSdXeXLQp9rwzu769Js6piqfsreBKIPyu0E9+LEUvbV++HgIAE7+vNL1cNE9FWbVMFsgNj5vqtomJNq4OHY2g==}
+  /@iconify/collections@1.0.390:
+    resolution: {integrity: sha512-z7yxHERHyQJ0OqgvS8OxYgYrAYwBbcrVBu4VSYxoZjMUojEAtioyhakVSFCnlKJh32SHzUyYvmbp/RSYSsL73Q==}
     dependencies:
       '@iconify/types': 2.0.0
     dev: false
@@ -1831,10 +1831,10 @@ packages:
   /@types/http-proxy@1.17.14:
     resolution: {integrity: sha512-SSrD0c1OQzlFX7pGu1eXxSEjemej64aaNPRhhVYUGqXh0BtldAAx37MG8btcumvpgKyZp1F5Gn3JkktdxiFv6w==}
     dependencies:
-      '@types/node': 20.11.14
+      '@types/node': 20.11.16
 
-  /@types/node@20.11.14:
-    resolution: {integrity: sha512-w3yWCcwULefjP9DmDDsgUskrMoOy5Z8MiwKHr1FvqGPtx7CvJzQvxD7eKpxNtklQxLruxSXWddyeRtyud0RcXQ==}
+  /@types/node@20.11.16:
+    resolution: {integrity: sha512-gKb0enTmRCzXSSUJDq6/sPcqrfCv2mkkG6Jt/clpn5eiCbKTY+SgZUxo+p8ZKMof5dCp9vHQUAB7wOUTod22wQ==}
     dependencies:
       undici-types: 5.26.5
 
@@ -2052,7 +2052,7 @@ packages:
     dependencies:
       '@vueuse/core': 10.7.2(vue@3.4.15)
       '@vueuse/shared': 10.7.2(vue@3.4.15)
-      vue-demi: 0.14.6(vue@3.4.15)
+      vue-demi: 0.14.7(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -2064,7 +2064,7 @@ packages:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.7.2
       '@vueuse/shared': 10.7.2(vue@3.4.15)
-      vue-demi: 0.14.6(vue@3.4.15)
+      vue-demi: 0.14.7(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -2113,7 +2113,7 @@ packages:
       '@vueuse/core': 10.7.2(vue@3.4.15)
       '@vueuse/shared': 10.7.2(vue@3.4.15)
       fuse.js: 6.6.2
-      vue-demi: 0.14.6(vue@3.4.15)
+      vue-demi: 0.14.7(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -2123,7 +2123,7 @@ packages:
     resolution: {integrity: sha512-Z1h/kdW5f4c/v/QOpWFFaEx4UaIt7xQTxoDnxQAx1gHGHpGYTtBlQHm80zrRodCz0auyBZMkALkCgKinzGggXw==}
     dependencies:
       '@vueuse/shared': 10.7.2(vue@3.4.15)
-      vue-demi: 0.14.6(vue@3.4.15)
+      vue-demi: 0.14.7(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -2142,7 +2142,7 @@ packages:
       '@vueuse/metadata': 10.7.2
       local-pkg: 0.5.0
       nuxt: 3.10.0(vite@5.0.12)
-      vue-demi: 0.14.6(vue@3.4.15)
+      vue-demi: 0.14.7(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - rollup
@@ -2153,7 +2153,7 @@ packages:
   /@vueuse/shared@10.7.2(vue@3.4.15):
     resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.4.15)
+      vue-demi: 0.14.7(vue@3.4.15)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -2340,7 +2340,7 @@ packages:
       postcss: ^8.1.0
     dependencies:
       browserslist: 4.22.3
-      caniuse-lite: 1.0.30001581
+      caniuse-lite: 1.0.30001583
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.0.0
@@ -2390,8 +2390,8 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001581
-      electron-to-chromium: 1.4.653
+      caniuse-lite: 1.0.30001583
+      electron-to-chromium: 1.4.655
       node-releases: 2.0.14
       update-browserslist-db: 1.0.13(browserslist@4.22.3)
 
@@ -2478,12 +2478,12 @@ packages:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
     dependencies:
       browserslist: 4.22.3
-      caniuse-lite: 1.0.30001581
+      caniuse-lite: 1.0.30001583
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
-  /caniuse-lite@1.0.30001581:
-    resolution: {integrity: sha512-whlTkwhqV2tUmP3oYhtNfaWGYHDdS3JYFQBKXxcUR9qqPWsRhFHhoISO2Xnl/g0xyKzht9mI1LZpiNWfMzHixQ==}
+  /caniuse-lite@1.0.30001583:
+    resolution: {integrity: sha512-acWTYaha8xfhA/Du/z4sNZjHUWjkiuoAi2LM+T/aL+kemKQgPT1xBb/YKjlQ0Qo8gvbHsGNplrEJ+9G3gL7i4Q==}
 
   /chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
@@ -2952,8 +2952,8 @@ packages:
   /ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
-  /electron-to-chromium@1.4.653:
-    resolution: {integrity: sha512-wA2A2LQCqnEwQAvwADQq3KpMpNwgAUBnRmrFgRzHnPhbQUFArTR32Ab46f4p0MovDLcg4uqd4nCsN2hTltslpA==}
+  /electron-to-chromium@1.4.655:
+    resolution: {integrity: sha512-2yszojF7vIZ68adIOvzV4bku8OZad9w5H9xF3ZAMZjPuOjBarlflUkjN6DggdV+L71WZuKUfKUhov/34+G5QHg==}
 
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -3399,8 +3399,8 @@ packages:
     engines: {node: '>= 0.4'}
     dev: false
 
-  /has-tostringtag@1.0.0:
-    resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==}
+  /has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-symbols: 1.0.3
@@ -3630,7 +3630,7 @@ packages:
     resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
     engines: {node: '>= 0.4'}
     dependencies:
-      has-tostringtag: 1.0.0
+      has-tostringtag: 1.0.2
     dev: false
 
   /is-glob@4.0.3:
@@ -4490,7 +4490,7 @@ packages:
   /nuxt-icon@0.6.8(nuxt@3.10.0)(vite@5.0.12)(vue@3.4.15):
     resolution: {integrity: sha512-6eWlNOb6Uvp63uXFdhcmsB1JlubDv76Pot/VwmIu0yJxDYhwytbnv3WAjw2khl2l7W/65V4eMGIEeX9C5Ahxng==}
     dependencies:
-      '@iconify/collections': 1.0.389
+      '@iconify/collections': 1.0.390
       '@iconify/vue': 4.1.1(vue@3.4.15)
       '@nuxt/devtools-kit': 1.0.8(nuxt@3.10.0)(vite@5.0.12)
       '@nuxt/kit': 3.10.0
@@ -6344,8 +6344,8 @@ packages:
     dependencies:
       ufo: 1.3.2
 
-  /vue-demi@0.14.6(vue@3.4.15):
-    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+  /vue-demi@0.14.7(vue@3.4.15):
+    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true