Improve login page

Fixes #100

src/components.d.ts

@@ -7,14 +7,15 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    ArabicIcon: typeof import('./components/CountryIcons/ArabicIcon.vue')['default']
+    AppleIcon: typeof import('./components/CustomIcons/AppleIcon.vue')['default']
+    ArabicIcon: typeof import('./components/CustomIcons/ArabicIcon.vue')['default']
     BarChart: typeof import('./components/BarChart.vue')['default']
     BrandManagement: typeof import('./components/Brand/BrandManagement.vue')['default']
     BreadCrumb: typeof import('./components/Navbar/BreadCrumb.vue')['default']
     Card: typeof import('./components/Card.vue')['default']
     CategoryManagement: typeof import('./components/Category/CategoryManagement.vue')['default']
     CategoryStatics: typeof import('./components/Category/CategoryStatics.vue')['default']
-    ChineseIcon: typeof import('./components/CountryIcons/ChineseIcon.vue')['default']
+    ChineseIcon: typeof import('./components/CustomIcons/ChineseIcon.vue')['default']
     ColorManagement: typeof import('./components/Color/ColorManagement.vue')['default']
     CreateBrand: typeof import('./components/Brand/CreateBrand.vue')['default']
     CreateCategory: typeof import('./components/Category/CreateCategory.vue')['default']
@@ -26,11 +27,15 @@ declare module 'vue' {
     DashboardPage: typeof import('./components/Dahboard/DashboardPage.vue')['default']
     DonutChart: typeof import('./components/DonutChart.vue')['default']
     Editor: typeof import('./components/Editor.vue')['default']
-    EnglandIcon: typeof import('./components/CountryIcons/EnglandIcon.vue')['default']
-    GermanyIcon: typeof import('./components/CountryIcons/GermanyIcon.vue')['default']
+    EnglandIcon: typeof import('./components/CustomIcons/EnglandIcon.vue')['default']
+    GermanyIcon: typeof import('./components/CustomIcons/GermanyIcon.vue')['default']
     GithubButton: typeof import('./components/GithubButton.vue')['default']
+    GithubIcon: typeof import('./components/CustomIcons/GithubIcon.vue')['default']
+    GoogleIcon: typeof import('./components/CustomIcons/GoogleIcon.vue')['default']
     LanguageSelect: typeof import('./components/Navbar/LanguageSelect.vue')['default']
     LineChart: typeof import('./components/LineChart.vue')['default']
+    MicrosoftIcon: typeof import('./components/CustomIcons/MicrosoftIcon.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
     Navbar: typeof import('./components/Navbar/Navbar.vue')['default']
     NBadge: typeof import('naive-ui')['NBadge']
     NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
@@ -68,7 +73,7 @@ declare module 'vue' {
     NTreeSelect: typeof import('naive-ui')['NTreeSelect']
     NUpload: typeof import('naive-ui')['NUpload']
     OrderManagement: typeof import('./components/Orders/OrderManagement.vue')['default']
-    PersianIcon: typeof import('./components/CountryIcons/PersianIcon.vue')['default']
+    PersianIcon: typeof import('./components/CustomIcons/PersianIcon.vue')['default']
     ProductsManagement: typeof import('./components/Products/ProductsManagement.vue')['default']
     RecentOrders: typeof import('./components/Dahboard/RecentOrders.vue')['default']
     RecentReviews: typeof import('./components/Dahboard/RecentReviews.vue')['default']
@@ -79,7 +84,7 @@ declare module 'vue' {
     ThemeCustomize: typeof import('./components/Navbar/ThemeCustomize.vue')['default']
     ThemeSwitch: typeof import('./components/Navbar/ThemeSwitch.vue')['default']
     TrendingProducts: typeof import('./components/Dahboard/TrendingProducts.vue')['default']
-    TurkishIcon: typeof import('./components/CountryIcons/TurkishIcon.vue')['default']
+    TurkishIcon: typeof import('./components/CustomIcons/TurkishIcon.vue')['default']
     UserProfile: typeof import('./components/Navbar/UserProfile.vue')['default']
   }
 }

src/components/CustomIcons/AppleIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <NIcon>
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
+      <path
+        d="M349.13 136.86c-40.32 0-57.36 19.24-85.44 19.24c-28.79 0-50.75-19.1-85.69-19.1c-34.2 0-70.67 20.88-93.83 56.45c-32.52 50.16-27 144.63 25.67 225.11c18.84 28.81 44 61.12 77 61.47h.6c28.68 0 37.2-18.78 76.67-19h.6c38.88 0 46.68 18.89 75.24 18.89h.6c33-.35 59.51-36.15 78.35-64.85c13.56-20.64 18.6-31 29-54.35c-76.19-28.92-88.43-136.93-13.08-178.34c-23-28.8-55.32-45.48-85.79-45.48z"
+        fill="currentColor"
+      />
+      <path
+        d="M340.25 32c-24 1.63-52 16.91-68.4 36.86c-14.88 18.08-27.12 44.9-22.32 70.91h1.92c25.56 0 51.72-15.39 67-35.11c14.72-18.77 25.88-45.37 21.8-72.66z"
+        fill="currentColor"
+      />
+    </svg>
+  </NIcon>
+</template>

src/components/CustomIcons/GithubIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <NIcon>
+    <svg
+      version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+      viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"
+    >
+      <path
+        d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9c1.4,0.3,2.6,0.4,3.8,0.4c8.3,0,11.5-6.1,11.5-11.4
+c0-5.5-0.2-19.9-0.3-39.1c-8.4,1.9-15.9,2.7-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5c-10.2-26.5-24.9-33.6-24.9-33.6
+c-19.5-13.7-0.1-14.1,1.4-14.1c0.1,0,0.1,0,0.1,0c22.5,2,34.3,23.8,34.3,23.8c11.2,19.6,26.2,25.1,39.6,25.1c10.5,0,20-3.4,25.6-6
+c2-14.8,7.8-24.9,14.2-30.7c-49.7-5.8-102-25.5-102-113.5c0-25.1,8.7-45.6,23-61.6c-2.3-5.8-10-29.2,2.2-60.8c0,0,1.6-0.5,5-0.5
+c8.1,0,26.4,3.1,56.6,24.1c17.9-5.1,37-7.6,56.1-7.7c19,0.1,38.2,2.6,56.1,7.7c30.2-21,48.5-24.1,56.6-24.1c3.4,0,5,0.5,5,0.5
+c12.2,31.6,4.5,55,2.2,60.8c14.3,16.1,23,36.6,23,61.6c0,88.2-52.4,107.6-102.3,113.3c8,7.1,15.2,21.1,15.2,42.5
+c0,30.7-0.3,55.5-0.3,63c0,5.4,3.1,11.5,11.4,11.5c1.2,0,2.6-0.1,4-0.4C415.9,449.2,480,363.1,480,261.7C480,134.9,379.7,32,256,32z
+	"
+      />
+    </svg>
+  </NIcon>
+</template>

src/components/CustomIcons/GoogleIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <NIcon>
+    <svg
+      version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+      viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"
+    >
+      <g>
+        <path
+          d="M457.6,224l-2.1-8.9l-193.5,0V297h115.6c-12,57-67.7,87-113.2,87c-33.1,0-68-13.9-91.1-36.3c-23.7-23-38.8-56.9-38.8-91.8
+		c0-34.5,15.5-69,38.1-91.7c22.5-22.6,56.6-35.4,90.5-35.4c38.8,0,66.6,20.6,77,30l58.2-57.9c-17.1-15-64-52.8-137.1-52.8
+		c0,0,0,0,0,0c-56.4,0-110.5,21.6-150,61C72.2,147.9,52,204,52,256s19.1,105.4,56.9,144.5c40.4,41.7,97.6,63.5,156.5,63.5
+		c53.6,0,104.4-21,140.6-59.1c35.6-37.5,54-89.4,54-143.8C460,238.2,457.7,224.6,457.6,224z"
+        />
+      </g>
+    </svg>
+  </NIcon>
+</template>

src/components/CustomIcons/MicrosoftIcon.vue

@@ -0,0 +1,10 @@
+<template>
+  <NIcon>
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
+      <path d="M31.87 30.58H244.7v212.81H31.87z" fill="currentColor" />
+      <path d="M266.89 30.58H479.7v212.81H266.89z" fill="currentColor" />
+      <path d="M31.87 265.61H244.7v212.8H31.87z" fill="currentColor" />
+      <path d="M266.89 265.61H479.7v212.8H266.89z" fill="currentColor" />
+    </svg>
+  </NIcon>
+</template>

src/components/Navbar/LanguageSelect.vue

@@ -2,13 +2,13 @@
 import { storeToRefs } from 'pinia'
 import { Translate16Regular as TranslateIcon } from '@vicons/fluent'
 import { NIcon } from 'naive-ui/es/icon'
-import EnglandIcon from '../CountryIcons/EnglandIcon.vue'
-import GermanyIcon from '../CountryIcons/GermanyIcon.vue'
-import ChineseIcon from '../CountryIcons/ChineseIcon.vue'
-import ArabicIcon from '../CountryIcons/ArabicIcon.vue'
-import TurkishIcon from '../CountryIcons/TurkishIcon.vue'
+import EnglandIcon from '../CustomIcons/EnglandIcon.vue'
+import GermanyIcon from '../CustomIcons/GermanyIcon.vue'
+import ChineseIcon from '../CustomIcons/ChineseIcon.vue'
+import ArabicIcon from '../CustomIcons/ArabicIcon.vue'
+import TurkishIcon from '../CustomIcons/TurkishIcon.vue'
 
-import PersianIcon from '../CountryIcons/PersianIcon.vue'
+import PersianIcon from '../CustomIcons/PersianIcon.vue'
 
 defineProps<{ showTitle?: boolean }>()
 const { t } = useI18n()

src/mocks/handlers/account.handler.ts

@@ -4,7 +4,7 @@ import type { LoginResponse, LoginViewModel } from '~/models/Login'
 const handlers = [
   http.post('*/api/account/login', async ({ request }) => {
     const user = (await request.json()) as LoginViewModel
-    if (user.username === 'admin' && user.password === 'admin') {
+    if (user.username === 'Yummy' && user.password === 'Admin!') {
       const response: LoginResponse = { token: 'JWT_Fake_Token', isSucceed: true }
       await delay(1000)
       return HttpResponse.json(response, { status: 200 })

src/pages/Account/login.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import type { FormInst, FormRules } from 'naive-ui/es/form/src/interface'
 import { storeToRefs } from 'pinia'
+import GoogleIcon from '~/components/CustomIcons/GoogleIcon.vue'
+import MicrosoftIcon from '~/components/CustomIcons/MicrosoftIcon.vue'
+import AppleIcon from '~/components/CustomIcons/AppleIcon.vue'
+
 import type { LoginViewModel } from '~/models/Login'
 
 const { t } = useI18n()
 const accountStore = useAccountStore()
 const { isLoading } = storeToRefs(accountStore)
-const loginInfo = ref<LoginViewModel>({ username: 'admin', password: 'admin' })
+const loginInfo = ref<LoginViewModel>({ username: 'Yummy', password: 'Admin!' })
 const loginFailed = ref(false)
 const router = useRouter()
 const formRef = ref<FormInst | null>(null)
@@ -57,11 +61,11 @@ meta:
   <div class="bg flex justify-center items-center h-screen">
     <div class="login-box w-full px-3 md:px-0">
       <div class="md:shadow-lg bg-white dark:bg-slate-800 rounded-md w-full" :class="{ failed: loginFailed }">
-        <div class="hidden md:block banner" />
         <div class="p-5">
           <div class="text-2xl font-medium mb-8">
             {{ t('login.title') }}
           </div>
+
           <n-form ref="formRef" :model="loginInfo" :rules="rules" @submit.prevent="login()">
             <n-form-item class="mb-1" path="username" :label="t('login.username')">
               <n-input id="name" v-model:value="loginInfo.username" autofocus :placeholder="t('login.username')" />
@@ -76,7 +80,7 @@ meta:
             <div class="flex align-items-center justify-between mb-2">
               <RouterLink
                 to="/Account/ForgotPassword"
-                class="font-medium no-underline ml-2 text-blue-500 text-right cursor-pointer"
+                class="no-underline ml-2 text-blue-500 text-right cursor-pointer"
               >
                 {{ t('login.forgetPassword') }}
               </RouterLink>
@@ -86,11 +90,42 @@ meta:
             </n-button>
           </n-form>
           <div class="text-center pt-4 text-sm">
-            <span class="font-medium line-height-3">{{ t('login.haveNotAccount') }}</span>
-            <RouterLink to="/Account/Register" class="font-medium no-underline mx-1 text-blue-500 cursor-pointer">
+            <span class="line-height-3">{{ t('login.haveNotAccount') }}</span>
+            <RouterLink to="/Account/Register" class="no-underline mx-1 text-blue-500 cursor-pointer">
               {{ t('login.createAccount') }}
             </RouterLink>
           </div>
+
+          <div class="social-login pt-3">
+            <div class="separator">
+              <span class="title bg-white dark:bg-slate-800">Or</span>
+            </div>
+            <div class="flex items-center justify-center">
+              <n-button quaternary circle mx-2>
+                <template #icon>
+                  <NIcon size="1.4rem">
+                    <GoogleIcon />
+                  </NIcon>
+                </template>
+              </n-button>
+
+              <n-button quaternary circle mx-2>
+                <template #icon>
+                  <NIcon size="1.4rem">
+                    <MicrosoftIcon />
+                  </NIcon>
+                </template>
+              </n-button>
+
+              <n-button quaternary circle mx-2>
+                <template #icon>
+                  <NIcon size="1.4rem">
+                    <AppleIcon />
+                  </NIcon>
+                </template>
+              </n-button>
+            </div>
+          </div>
         </div>
       </div>
       <div class="mt-3 flex justify-between items-center">
@@ -158,4 +193,17 @@ select:-webkit-autofill:focus {
     transform: translate3d(4px, 0, 0);
   }
 }
+
+.separator {
+  border-bottom: solid 1px #ececec;
+  margin: 1rem 0;
+  .title {
+    margin-top: -10px;
+    color: var(--border);
+    font-size: 0.8rem;
+    position: absolute;
+    left: calc(50% - 10px);
+    padding: 0 0.3rem;
+  }
+}
 </style>