Doroudi/issue126

index.html

@@ -10,6 +10,7 @@
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
   <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#00a300">
   <link rel="shortcut icon" href="/favicon/favicon.ico">
+
   <meta name="msapplication-TileColor" content="#00a300">
   <meta name="msapplication-config" content="/favicon/browserconfig.xml">
   <meta name="theme-color" content="#ffffff">
@@ -125,6 +126,8 @@
       }
     }
   </style>
+
+
   <!-- Google Tag Manager -->
   <script>(function (w, d, s, l, i) {
       w[l] = w[l] || []; w[l].push({
@@ -144,14 +147,15 @@
   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WBTQRDWN" height="0" width="0"
       style="display:none;visibility:hidden"></iframe></noscript>
   <!-- End Google Tag Manager (noscript) -->
-   
+
   <div id="app">
-    <!-- <div class="preloader">
+    <div class="preloader">
       <div class="loader"></div>
       <h1>Yummy Admin</h1>
       <h2>Free Vue 3 Dashboard</h2>
-    </div> -->
+    </div>
   </div>
+
   <script type="module" src="/src/main.ts"></script>
   <noscript>This website requires JavaScript to function properly. Please enable JavaScript to continue.</noscript>
 </body>

locales/ar.yml

@@ -100,6 +100,12 @@ forgot:
   button: استعادة
   haveNotAccount: ليس لديك حساب؟
   register: أنشئ واحداً!
+  email: البريد الإلكتروني
+  resetPassword: إعادة تعيين كلمة المرور
+  login: تسجيل الدخول
+  rememberInfo: هل تذكرت كلمة المرور؟
+  sendEmailSuccess: تم إرسال البريد الإلكتروني بنجاح، يرجى التحقق من بريدك الإلكتروني
+  emailValidation: البريد الإلكتروني غير صالح
 dashboard:
   summary: الملخص
   transactions: المعاملات

locales/ch.yml

@@ -100,6 +100,12 @@ forgot:
   button: 恢复
   haveNotAccount: 没有账户？
   register: 创建一个！
+  email: 电子邮件
+  resetPassword: 重置密码
+  login: 登录
+  rememberInfo: 记住密码？
+  sendEmailSuccess: 电子邮件发送成功，请检查您的电子邮件
+  emailValidation: 电子邮件无效
 dashboard:
   summary: 概要
   transactions: 交易

locales/de.yml

@@ -98,6 +98,13 @@ forgot:
   button: Wiederherstellen
   haveNotAccount: Kein Konto?
   register: Erstellen Sie eins!
+  email: E-Mail
+  resetPassword: Passwort zurücksetzen
+  login: Anmelden
+  rememberInfo: Passwort merken?
+  sendEmailSuccess: E-Mail erfolgreich gesendet, bitte überprüfen Sie Ihre E-Mail
+  emailValidation: Ungültige E-Mail
+
 dashboard:
   summary: Zusammenfassung
   transactions: Transaktionen

locales/en.yml

@@ -102,6 +102,12 @@ forgot:
   button: Recover
   haveNotAccount: Haven't Account?
   register: Create One!
+  email: Email
+  resetPassword: Reset Password
+  login: Login
+  rememberInfo: Remembered Password?
+  sendEmailSuccess: Email Sent Successfully, Please Check Your Email
+  emailValidation: Email is not valid
 dashboard:
   summary: Summary
   transactions: Transactions

locales/fa.yml

@@ -80,6 +80,12 @@ forgot:
   register: یکی بسازید
   title: فراموشی رمز عبور
   username: نام کاربری
+  email: ایمیل
+  resetPassword: بازنشانی رمز عبور
+  login: ورود
+  rememberInfo: رمز عبور را به خاطر دارید؟
+  sendEmailSuccess: ایمیل با موفقیت ارسال شد، لطفا ایمیل خود را بررسی کنید
+  emailValidation: ایمیل معتبر نیست
 login:
   createAccount: یکی بسازید
   failedMessage: خطا در ورود

locales/tr.yml

@@ -81,6 +81,12 @@ forgot:
   register: Hesap Oluştur!
   title: Şifremi Unuttum
   username: Kullanıcı Adı
+  email: Email
+  resetPassword: Şifreyi Sıfırla
+  login: Giriş
+  rememberInfo: Şifreyi Hatırladınız mı?
+  sendEmailSuccess: Email Başarıyla Gönderildi, Lütfen E-postanızı Kontrol Edin
+  emailValidation: Email geçerli değil
 
 login:
   createAccount: Hesap Oluştur!

src/common/validations/index.ts

@@ -0,0 +1,40 @@
+import type { FormItemRule } from 'naive-ui/es/form/src/interface'
+
+const validations = {
+  telephone(rule: FormItemRule, value: string) {
+    if (/\d{11}/g.test(value))
+      return true
+
+    return new Error('phone number is not valid')
+  },
+  captcha(rule: FormItemRule, value: string) {
+    if (/\d{4}\b/.test(value))
+      return true
+
+    return new Error('captcha must be 4 digits')
+  },
+  email(rule: FormItemRule, value: string) {
+    const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/
+    if (emailRegex.test(value))
+      return true
+    return new Error('email is not valid')
+  },
+  verification(rule: FormItemRule, value: string) {
+    const pattern = /\d{5}\b/
+    if (pattern.test(value))
+      return true
+
+    return new Error('verification code must be 5 digits')
+  },
+  password(rule: FormItemRule, value: string) {
+    if (!value)
+      return new Error('password is required')
+
+    if (value.length < 5)
+      return new Error('password must be at least 5 characters')
+
+    return true
+  },
+}
+
+export default validations

src/components/Dahboard/DashboardPage.vue

@@ -15,13 +15,12 @@ function random(min: number, max: number): number {
 }
 
 onMounted(() => {
-  // notify.notify('Hello', 'warning')
-  // if (!layout.isWelcomeShown) {
-  setTimeout(() => {
-    notify.notify({ body: t('notify.welcome'), type: 'success', duration: 10000 })
-    layout.showWelcome()
-  }, 2000)
-  // }
+  if (!layout.isWelcomeShown) {
+    setTimeout(() => {
+      notify.notify({ body: t('notify.welcome'), type: 'success', duration: 10000 })
+      layout.showWelcome()
+    }, 2000)
+  }
 })
 </script>
 
@@ -81,6 +80,4 @@ onMounted(() => {
   </div>
 </template>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

src/components/Navbar/LanguageSelect.vue

@@ -10,7 +10,7 @@ import TurkishIcon from '../CountryIcons/TurkishIcon.vue'
 
 import PersianIcon from '../CountryIcons/PersianIcon.vue'
 
-defineProps<{ showTitle: string }>()
+defineProps<{ showTitle?: boolean }>()
 const { t } = useI18n()
 const layoutStore = useLayoutStore()
 const { activeLanguage } = storeToRefs(layoutStore)

src/components/Sidebar.vue

@@ -98,7 +98,7 @@ const menuOptions: MenuOption[] = [
       },
 
       {
-        label: () => renderMenuLabel(t('menu.forgetPassword'), '/account/forgetPassword'),
+        label: () => renderMenuLabel(t('menu.forgetPassword'), '/account/ForgotPassword'),
         key: 'forget-password',
         icon: renderIcon(ForgetIcon),
       },

src/composables/colors.ts

@@ -1,5 +1,5 @@
 export default function useColors() {
-  const primaryColors = ['#00ad4c', '#cb2025', '#f8b334', '#FF8000', '#00a096']
+  const primaryColors = ['#00ad4c', '#cb2025', '#f8b334', '#FF8000', '#00a096', '#9575cd']
 
   function buildThemeColorSeries(count: number) {
     const color = useLayoutStore().themeColor

src/mocks/handlers/product.handler.ts

@@ -30,7 +30,7 @@ function createFakeProductListItem(): ProductListDto {
 
 function createFakeCategory(): Category {
   return {
-    id: faker.number.int(),
+    id: faker.number.int({ min: 100, max: 20000 }),
     name: faker.commerce.productAdjective(),
     productsCount: 0, // faker.number.int(),
   }

src/pages/Account/ForgotPassword.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type { FormInst, FormRules } from 'naive-ui/es/form/src/interface'
+import { storeToRefs } from 'pinia'
+import validations from '~/common/validations'
+
+const { t } = useI18n()
+const accountStore = useAccountStore()
+const { isLoading } = storeToRefs(accountStore)
+const forgetInfo = ref<{ email: string }>({ email: '' })
+const router = useRouter()
+const formRef = ref<FormInst | null>(null)
+async function resetPassword() {
+  formRef.value?.validate(async (errors: any) => {
+    if (!errors) {
+      const loginSucceed = await accountStore.resetPassword(forgetInfo.value)
+      if (loginSucceed) {
+        useNotifyStore().success(t('forgot.sendEmailSuccess'))
+        setTimeout(() => router.push('/Account/Login'), 500)
+      }
+    }
+  })
+}
+
+const rules: FormRules = {
+  email: [
+    {
+      required: true,
+      validator: validations.email,
+      trigger: ['blur', 'change'],
+      message: t('forgot.emailValidation'),
+    },
+  ],
+}
+</script>
+
+<route lang="yaml">
+meta:
+  title: Forgot Password
+  layout: auth
+  authRequired: false
+</route>
+
+<template>
+  <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">
+        <div class="hidden md:block banner" />
+        <div class="p-5">
+          <div class="text-2xl font-medium mb-8">
+            {{ t('forgot.title') }}
+          </div>
+          <n-form ref="formRef" :model="forgetInfo" :rules="rules" @submit.prevent="resetPassword()">
+            <n-form-item class="mb-1" path="email" :label="t('forgot.email')">
+              <n-input id="name" v-model:value="forgetInfo.email" autofocus :placeholder="t('forgot.email')" />
+            </n-form-item>
+
+            <div class="flex align-items-center my-3">
+              <span class="font-medium">{{ t('forgot.rememberInfo') }}</span>
+              <RouterLink to="/Account/Login" class="font-medium no-underline mx-1 text-blue-500 cursor-pointer">
+                {{ t('forgot.login') }}
+              </RouterLink>
+            </div>
+
+            <n-button attr-type="submit" size="large" :block="true" type="primary" :loading="isLoading">
+              {{ t('forgot.resetPassword') }}
+            </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">
+              {{ t('login.createAccount') }}
+            </RouterLink>
+          </div>
+        </div>
+      </div>
+      <div class="mt-3 flex justify-between items-center">
+        <LanguageSelect />
+        <ThemeSwitch class="mr-2" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='scss'>
+.banner {
+    background-image: url('~/assets/images/login_banner.jpg');
+    background-size: cover;
+    background-position: center center;
+    height: 150px;
+    border-radius: 4px 4px 0 0;
+}
+
+.login-box {
+    max-width: 380px;
+
+    .failed {
+        animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+        transform: translate3d(0, 0, 0);
+        backface-visibility: hidden;
+        perspective: 1000px;
+    }
+}
+</style>

src/pages/Account/login.vue

@@ -73,14 +73,14 @@ meta:
               />
             </n-form-item>
 
-            <!-- <div class="flex align-items-center justify-between mb-2">
+            <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"
               >
                 {{ t('login.forgetPassword') }}
               </RouterLink>
-            </div> -->
+            </div>
             <n-button attr-type="submit" size="large" :block="true" type="primary" :loading="isLoading">
               {{ t('login.loginButton') }}
             </n-button>

src/store/account.store.ts

@@ -33,6 +33,10 @@
     user.value = null
   }
 
+  function resetPassword(forgetInfo: any) {
+    return Promise.resolve(true)
+  }
+
   function isAuthenticated() {
     return (user.value?.token && user.value.token !== null) ?? false
   }
@@ -44,6 +48,7 @@
     login,
     logout,
     isAuthenticated,
+    resetPassword,
   }
 }, { persist: true })
 

src/styles/utils/_override.scss

@@ -62,4 +62,19 @@
     .n-rate {
       direction: ltr;
     }
+}
+
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  -webkit-text-fill-color: #000;
+  -webkit-box-shadow: 0 0 0 1000px #eff0f1 inset;
+  transition: background-color 5000s ease-in-out 0s;
 }