improve: router + admin layout (not yet protected)

Author: nguyenvanhoangnhan

public/images/admin-avatar-example.jpg

@@ -6,13 +6,15 @@ import { theme } from '@/theme'
 import AuthLayout from '@/layouts/auth/index.vue'
 import DefaultLayout from '@/layouts/empty/index.vue'
 import LandingLayout from '@/layouts/landing-page/index.vue'
+import AdminLayout from '@/layouts/admin/index.vue'
 import { markRaw, ref, watch } from 'vue'
 import Curtain from '@/components/Curtain.vue'
 import AsyncErrorBoundary from '@/components/AsyncErrorBoundary.vue'
 
 const layouts: Record<string, typeof DefaultLayout> = {
     default: DefaultLayout,
     auth: AuthLayout,
+    admin: AdminLayout,
     'landing-page': LandingLayout
 }
 

src/App.vue

@@ -23,11 +23,7 @@ export type RefreshTokenResponse = {
 
 export type RegisterRequest = {
     email: string
-    firstName: string
-    lastName: string
-    address: string
-    phone?: string
-    country?: string
+    name: string
     password: string
 }
 

src/api/auth/index.ts renamed to src/api/auth/auth.api.ts

@@ -2,20 +2,44 @@ const localesEN = {
     common: {
         example: `When I find myself in times of trouble, Mother Mary comes to me. Speaking words of wisdom, "Let It Be". And in my hour of darkness she is standing right in front of me, speaking words of wisdom, "Let It Be".`,
         feature_coming_soon: 'This feature is in development',
-        oops: 'Oops!!!'
+        oops: 'Oops!!!',
+        this_field_is_required: 'Please fill out this field!'
     },
     login: {
         big_title: 'Login',
         form: {
             email: 'Email',
             password: 'Password',
-            submit_btn: 'Login'
+            submit_btn: 'Login',
+            validation: {
+                email: {
+                    required: 'Please enter your email'
+                },
+                password: {
+                    required: 'Please enter your password'
+                }
+            }
         },
         forgot_password: 'Forgot password?',
         register_reminder: "Don't have an account?",
         to_register: 'Register now'
     },
-    register: {}
+    register: {
+        big_title: 'Register',
+        form: {
+            name: 'Full Name',
+            email: 'Email',
+            password: 'Password',
+            confirm_password: 'Confirm Password',
+            submit_btn: 'Register'
+        },
+        alert: {
+            register_success: 'Registration successful',
+            click_ok_to_direct_to_login_page: 'Click OK to go to the login page'
+        },
+        login_reminder: 'Already have an account?',
+        to_login_page: 'Go to login page'
+    }
 }
 
 export default localesEN

src/api/auth/auth.dto.ts

@@ -3,20 +3,44 @@ const localesJA = {
         '自分は首を前へ出して冷たい露の滴る、白い花弁に接吻した。自分が百合から顔を離す拍子に思わず、遠い空を見たら、暁の星がたった一つ瞬いていた。「百年はもう来ていたんだな」とこの時始めて気がついた。',
     feature_coming_soon: 'この機能は開発中です',
     oops: 'おっと！！！',
+    this_field_is_required: 'このフィールドを入力してください！',
 
     common: {},
     login: {
         big_title: 'ログイン',
         form: {
             email: 'メールアドレス',
             password: 'パスワード',
-            submit_btn: 'ログイン'
+            submit_btn: 'ログイン',
+            validation: {
+                email: {
+                    required: 'メールアドレスを入力してください'
+                },
+                password: {
+                    required: 'パスワードを入力してください'
+                }
+            }
         },
         forgot_password: 'パスワードを忘れた場合',
         register_reminder: 'アカウントを持っていない場合',
         to_register: '今すぐ登録'
     },
-    register: {}
+    register: {
+        big_title: '登録',
+        form: {
+            name: 'フルネーム',
+            email: 'メールアドレス',
+            password: 'パスワード',
+            confirm_password: 'パスワードの確認',
+            submit_btn: '登録する'
+        },
+        alert: {
+            register_success: '登録成功',
+            click_ok_to_direct_to_login_page: 'OKをクリックしてログインページに移動します'
+        },
+        login_reminder: 'すでにアカウントをお持ちですか？',
+        to_login_page: 'ログインページへ'
+    }
 }
 
 export default localesJA

src/i18n/locales/en.ts

@@ -28,8 +28,7 @@ const localesVI = {
     register: {
         big_title: 'Đăng ký',
         form: {
-            firstName: 'Họ',
-            lastName: 'Tên',
+            name: 'Tên đầy đủ',
             email: 'Địa chỉ email',
             password: 'Mật khẩu',
             confirm_password: 'Xác nhận mật khẩu',

src/i18n/locales/ja.ts

@@ -1,23 +1,27 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
-import { Modal } from 'ant-design-vue'
+import { Button, Menu, MenuItem, Modal, SubMenu } from 'ant-design-vue'
 import { useAuthStore } from '@/stores/auth'
 import { Icon } from '@iconify/vue'
-import router from '@/router'
+import router, { RoutePath } from '@/router'
+import type { SelectInfo } from 'ant-design-vue/es/menu/src/interface'
 const auth = useAuthStore()
-// selected if current route name is equal to key or parent route name is equal to key
+
+// selected if current route name is equal to key or parent route path is equal to key
 const selectedKeys = ref<string[]>([
     router.currentRoute.value.name as string,
-    ...router.currentRoute.value.matched.map((route) => route.name as string)
+    ...router.currentRoute.value.matched.map((route) => route.path as string)
 ])
 const collapsed = ref<boolean>(false)
 const handleCollapse = () => {
     collapsed.value = !collapsed.value
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const handleSelect = (event: any) => {
-    router.push({ name: event?.key })
+
+const handleSelect = (event: SelectInfo) => {
+    if (!event.key) return
+
+    router.push(String(event.key))
 }
 
 const handleLogout = () => {
@@ -34,13 +38,14 @@ const handleLogout = () => {
 }
 </script>
 <template>
-    <div class="gap-4 bg-[#001529] flex flex-col text-white z-[666]">
-        <a-button type="primary" block class="mb-8" @click="handleCollapse">
+    <!-- ! MENU ITEM KEY MUST BE PATH -->
+    <div class="gap-4 flex flex-col bg-white z-[666] border-r border-gray-400">
+        <Button type="primary" block class="mb-8 rounded-none" @click="handleCollapse">
             <template #icon>
                 <MenuUnfoldOutlined v-if="collapsed" />
                 <MenuFoldOutlined v-else />
             </template>
-        </a-button>
+        </Button>
         <div
             class="flex flex-col gap-3 mb-12"
             :class="{ 'pl-6': !collapsed, 'items-center': collapsed }"
@@ -50,63 +55,62 @@ const handleLogout = () => {
                 :class="{ 'w-24': !collapsed, 'w-12': collapsed }"
             >
                 <img
-                    src="https://res.cloudinary.com/cyantiz/image/upload/v1670993022/YagamiLightRingo_moramg.png"
+                    src="/images/admin-avatar-example.jpg"
                     class="w-full h-full object-cover"
                     alt="#"
                 />
             </div>
             <div v-if="!collapsed">
                 <div class="font-bold text-lg">Admin</div>
-                <div class="text-gray-300">admin@pomme.tech</div>
+                <div class="text-gray-500">admin@example.tech</div>
             </div>
         </div>
-        <a-menu
+        <Menu
             :style="{ width: collapsed ? '64px' : '256px' }"
             id="admin-side-menu"
             @select="handleSelect"
             v-model:selectedKeys="selectedKeys"
+            theme="light"
             mode="inline"
-            theme="dark"
             :inline-collapsed="collapsed"
-            :open-keys="!collapsed ? ['Product Management'] : []"
         >
-            <a-sub-menu key="Product Management">
+            <SubMenu key="tab1">
                 <template #icon><Icon icon="ph:tag-duotone" /></template>
-                <template #title>Quản lý sản phẩm</template>
-                <a-menu-item key="Product Management - List"> Danh sách sản phẩm </a-menu-item>
-                <a-menu-item key="Product Management - Create"> Thêm sản phẩm </a-menu-item>
-            </a-sub-menu>
-            <a-menu-item key="Order Management">
+                <template #title>Tab 1</template>
+                <MenuItem :key="RoutePath.AdminTab1Sub1"> Tab1.1 </MenuItem>
+                <MenuItem :key="RoutePath.AdminTab1Sub2"> Tab1.2 </MenuItem>
+            </SubMenu>
+            <MenuItem :key="RoutePath.AdminTab2">
                 <template #icon>
                     <Icon icon="ph:package-bold" />
                 </template>
-                Quản lý đơn hàng
-            </a-menu-item>
-            <a-menu-item key="User Management">
+                Tab 2
+            </MenuItem>
+            <MenuItem :key="RoutePath.AdminTab3">
                 <template #icon>
                     <Icon icon="ph:user-bold" />
                 </template>
-                Quản lý người dùng
-            </a-menu-item>
-        </a-menu>
+                Tab 3
+            </MenuItem>
+        </Menu>
 
-        <a-menu
+        <Menu
             :style="{
                 width: collapsed ? '64px' : '256px',
                 marginTop: 'auto',
                 marginBottom: '2rem'
             }"
             id="admin-side-logout"
             mode="inline"
-            theme="dark"
+            theme="light"
             :inline-collapsed="collapsed"
             :selected-keys="[]"
         >
-            <a-menu-item key="Logout" @click="handleLogout">
+            <MenuItem key="Logout" @click="handleLogout">
                 <template #icon> <Icon icon="ph:sign-out" /> </template>
                 Đăng xuất
-            </a-menu-item>
-        </a-menu>
+            </MenuItem>
+        </Menu>
     </div>
 </template>
 

src/i18n/locales/vi.ts

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import AdminSidebar from './AdminSidebar.vue'
-defineProps<{}>()
 </script>
 
 <template>

src/layouts/admin/AdminSidebar.vue

@@ -2,6 +2,7 @@
 import { Icon } from '@iconify/vue'
 import { useAuthStore } from '@/stores/auth'
 import { RouterLink } from 'vue-router'
+import { RoutePath } from '@/router'
 
 const auth = useAuthStore()
 </script>
@@ -80,9 +81,9 @@ const auth = useAuthStore()
             </nav>
             <div>
                 <div v-if="!auth.isLoggedIn" class="hidden lg:flex items-center gap-4">
-                    <RouterLink to="/login">Log in</RouterLink>
+                    <RouterLink :to="RoutePath.Login">Log in</RouterLink>
                     <RouterLink
-                        to="/register"
+                        :to="RoutePath.Register"
                         class="rounded text-center transition focus-visible:ring-2 ring-offset-2 ring-gray-200 px-4 py-2 bg-vue text-white hover:bg-vue-shade border-2 border-transparent"
                         >Sign up
                     </RouterLink>