From 1e132b97db4aeb2ff229299765695507bd3c5aee Mon Sep 17 00:00:00 2001
From: HAM!DREZA <hamidreza.eidy1999@gmail.com>
Date: Mon, 27 May 2024 21:38:06 +0330
Subject: [PATCH] add toatification package

---
 assets/css/tailwind.css                  |  6 ++-
 components/Card.vue                      | 10 +++-
 components/courses-page/Courses-list.vue |  3 ++
 components/login-page/Check-otp.vue      | 58 ++++++++++++++----------
 components/login-page/Login-form.vue     | 25 +++++-----
 components/login-page/Login-svg.vue      |  4 +-
 layouts/profile.vue                      |  3 ++
 nuxt.config.ts                           |  2 +-
 package-lock.json                        | 10 ++--
 package.json                             |  2 +-
 pages/account/profile.vue                | 10 +++-
 pages/login/index.vue                    |  4 +-
 plugins/toastification.client.js         | 11 +++++
 13 files changed, 99 insertions(+), 49 deletions(-)
 create mode 100644 plugins/toastification.client.js

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index d70f03b..518b5ff 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -27,7 +27,7 @@ body {
 }
 @layer components {
     .loginInput{
-        @apply bg-white rounded-[1.563vw] text-[0.833vw] w-full h-[2.917vw] ps-[1.2vw]
+        @apply bg-white rounded-[2.564vw] md:rounded-[1.563vw] text-[3.59vw] md:text-[0.833vw] w-full h-[13.59vw] md:h-[2.917vw] ps-[3vw] md:ps-[1.2vw]
     }
     .flexBox{
         @apply flex items-center justify-center
@@ -41,6 +41,10 @@ body {
     .courses{
         @apply w-[87.69%] md:w-[81.04%] flex flex-col justify-center mt-[18vw]  md:mt-[4.688vw] px-[3.846vw] md:px-[1.563vw] bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw]
     }
+    .custom-toast{
+        margin: 0 !important;
+        font-family: 'thinSans';
+    }
 }
 @media (max-width: 768px) { 
     .tabs-component .tabs-component-tab .is-active::before{
diff --git a/components/Card.vue b/components/Card.vue
index 82ad42e..9bbb778 100644
--- a/components/Card.vue
+++ b/components/Card.vue
@@ -92,7 +92,7 @@
                         </svg>
     
                     </button>
-                    <span>
+                    <span @click="change">
                         <svg class="mt-[0.5vw] w-[8.718vw] md:w-[2.24vw] h-[8.718vw] md:h-[2.24vw]" viewBox="0 0 44 46"
                             fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path
@@ -125,7 +125,13 @@
         </div>
     </div>
 </template>
-
+<script setup>
+import { useToast } from 'vue-toastification'
+const toast = useToast()
+const change = () =>{
+    toast.error('متن تست')
+}
+</script>
 <style scoped>
 .post::before {
     content: "";
diff --git a/components/courses-page/Courses-list.vue b/components/courses-page/Courses-list.vue
index f278686..1149810 100644
--- a/components/courses-page/Courses-list.vue
+++ b/components/courses-page/Courses-list.vue
@@ -70,6 +70,7 @@
 <Card />
 <Card />
 <Card />
+<Card />
 <Card />
   </div>
   <div v-else
@@ -93,6 +94,8 @@
 </template>
 
 <script setup>
+// const pages = 17 / 16
+// console.log(Math.ceil(pages));
 const openSortOptions = () => {
   if (process.client) {
     document
diff --git a/components/login-page/Check-otp.vue b/components/login-page/Check-otp.vue
index 5d693b1..59c6532 100644
--- a/components/login-page/Check-otp.vue
+++ b/components/login-page/Check-otp.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="w-[25.573vw] text-secondaryTextColor space-y-6 relative">
-    <p class="text-[1.502vw] border-b px-[0.5vw]">کد ورود</p>
+  <div class="w-[75vw] md:w-[25.573vw] text-secondaryTextColor space-y-6 relative">
+    <p class="text-[6vw] md:text-[1.502vw] border-b px-[0.5vw]">کد ورود</p>
     <div class="relative flex flexBox w-full pt-[1vw]">
       <input
         v-model="code"
@@ -9,7 +9,7 @@
         placeholder="کد ورود را وارد کنید"
       />
       <svg
-        class="h-[1.146vw] w-[1.146vw] absolute left-[1.2vw]"
+      class="h-[5vw] w-[5vw] md:h-[1.146vw] md:w-[1.146vw] absolute left-[1.2vw]"
         viewBox="0 0 22 22"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -31,31 +31,39 @@
       </svg>
     </div>
 
-    <button class="greenButton w-full !mt-[1.5vw] relative" @click="checkOtp">
-      <span class="loader absolute" v-if="loading"></span>
+    <button class="greenButton  h-[13.59vw] md:h-[2.917vw] text-[3.59vw] md:text-[0.833vw] rounded-[2.051vw] md:rounded-auto w-full !mt-[4vw] md:!mt-[1.5vw] relative" @click="checkOtp">
+      <span 
+      class="loader 
+      h-[7vw] w-[7vw] left-[35vw] top-[3vw]
+      md:h-[1.5vw] md:w-[1.5vw] md:left-[12vw] md:top-[0.65vw]
+      absolute"
+      v-if="loading"></span>
       <span v-else>ورود</span>
     </button>
 
-    <p v-if="timer > 0" class="text-[0.7vw] px-[1vw] text-primaryGreen">
+    <p v-if="timer > 0" class="text-[3vw] md:text-[0.7vw] px-[2vw] md:px-[1vw] text-primaryGreen">
       0{{ timer }} : 00
     </p>
     <p
       v-else
-      class="text-[0.7vw] px-[1vw] text-primaryGreen cursor-pointer"
+      class="text-[3vw] md:text-[0.7vw] px-[2vw] md:px-[1vw] text-primaryGreen cursor-pointer"
       @click="options = true"
     >
       ارسال مجدد کد
     </p>
     <div
       v-show="options"
-      class="absolute -bottom-[3.5vw] space-y-[0.5vw] text-[0.7vw] px-[1vw]"
+      class="absolute -bottom-[14vw] md:-bottom-[3.5vw] space-y-[2vw] md:space-y-[0.5vw] text-[3vw] md:text-[0.7vw] px-[2vw] md:px-[1vw]"
     >
       <p
-        class="flex items-center gap-[0.3vw] cursor-pointer"
+        class="flex items-center gap-[2vw] md:gap-[0.3vw] cursor-pointer"
         @click="resendSMS"
       >
         <svg
-          class="h-[1.042vw] w-[1.042vw]"
+          class="
+          md:h-[1.042vw] md:w-[1.042vw]
+          h-[4.5vw] w-[4.5vw]
+          "
           viewBox="0 0 20 21"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -80,11 +88,13 @@
         ارسال از طریق پیامک
       </p>
       <p
-        class="flex items-center gap-[0.3vw] cursor-pointer"
+        class="flex items-center  gap-[2vw] md:gap-[0.3vw] cursor-pointer"
         @click="resendCall"
       >
         <svg
-          class="h-[1.042vw] w-[1.042vw]"
+          class="
+          h-[4.5vw] w-[4.5vw]
+          md:h-[1.042vw] md:w-[1.042vw]"
           viewBox="0 0 20 21"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -100,7 +110,7 @@
       </p>
     </div>
     <div
-      class="z-[100] backdrop-blur-sm bg-white/30 p-[1vw] rounded-[0.5vw] text-red-400 text-[0.7vw] absolute w-full -top-[10vw]"
+      class="backdrop-blur-sm bg-white/30 md:p-[1vw] rounded-[2.051vw]  md:rounded-[0.5vw] text-red-400 text-[3vw] md:text-[0.7vw] absolute w-full p-[3vw] -top-[20vw] md:-top-[10vw]"
       v-for="(error, index) in errors"
       :key="index"
     >
@@ -111,13 +121,15 @@
 </template>
 
 <script setup>
+import { useToast } from 'vue-toastification'
+const toast = useToast()
 const { authUser } = useAuth();
 const options = ref(false);
 const code = ref(null);
 const errors = ref([]);
 const loading = ref(false);
 const phoneNumber = useState("phoneNumber");
-const timer = ref(3);
+const timer = ref(5);
 
   async function checkOtp() {
     console.log(code);
@@ -137,6 +149,7 @@ const timer = ref(3);
         },
       });
       if (data.status === "Active") {
+        toast.success("ورود با موفقیت انجام شد")
         authUser.value = data;
         navigateTo("/");
       }
@@ -158,11 +171,11 @@ async function resendSMS() {
         type: "1",
       },
     });
-
     loading.value = false;
+    toast.success("کد مجدد برای شما ارسال شد")
+    timer.value = 5;
+    options.value = false;
   } catch (error) {
-    //   console.log('errrrr :',error.data.data.message)
-    //  console.log('errrrr :', error.data.data.error)
     loading.value = false;
     return errors.value.push(error.data.data.error);
   }
@@ -179,13 +192,15 @@ async function resendCall() {
         type: "2",
       },
     });
-
+    toast.success("درحال تماس با شما هستیم...")
+    timer.value = 5;
+    options.value = false;
     loading.value = false;
   } catch (error) {
        console.log('errrrr :',error.data.data.message)
       console.log('errrrr :', error.data.data.error)
     loading.value = false;
-   // return errors.value.push(error.data.data.error);
+    return errors.value.push(error.data.data.error);
   }
 }
 onMounted(() => {
@@ -202,10 +217,7 @@ onMounted(() => {
 
 <style scoped>
 .loader {
-  top: 0.65vw;
-  left: 12vw;
-  width: 1.5vw;
-  height: 1.5vw;
+ 
   border: 0.2vw solid #fff;
   border-bottom-color: transparent;
   border-radius: 50%;
diff --git a/components/login-page/Login-form.vue b/components/login-page/Login-form.vue
index 4d7de72..f53e8b7 100644
--- a/components/login-page/Login-form.vue
+++ b/components/login-page/Login-form.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="w-[25.573vw] text-secondaryTextColor space-y-6 relative">
+  <div class="w-[75vw] md:w-[25.573vw] text-secondaryTextColor space-y-6 relative">
   
-    <p class="text-[1.502vw] border-b px-[0.5vw]">ورود</p>
+    <p class="text-[6vw] md:text-[1.502vw] border-b px-[0.5vw]">ورود</p>
     <div class="relative flex flexBox w-full pt-[1vw]">
       <input
         v-model="phone"
@@ -10,7 +10,7 @@
         placeholder="شماره موبایل خود را وارد کنید"
       />
       <svg
-        class="h-[1.146vw] w-[1.146vw] absolute left-[1.2vw]"
+        class="h-[5vw] w-[5vw] md:h-[1.146vw] md:w-[1.146vw] absolute left-[1.2vw]"
         viewBox="0 0 22 22"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -32,18 +32,23 @@
       </svg>
     </div>
 
-    <button class="greenButton w-full !mt-[1.5vw] relative" @click="login">
-      <span class="loader absolute" v-if="loading"></span>
+    <button class="greenButton  h-[13.59vw] md:h-[2.917vw] text-[3.59vw] md:text-[0.833vw] rounded-[2.051vw] md:rounded-auto w-full !mt-[8vw] md:!mt-[1.5vw] relative" @click="login">
+      <span class="loader 
+      h-[7vw] w-[7vw] left-[35vw] top-[3vw]
+      md:h-[1.5vw] md:w-[1.5vw] md:left-[12vw] md:top-[0.65vw]
+      absolute" v-if="loading"></span>
       <span v-else>دریافت کد ورود</span>
       
     </button>
-    <div class="backdrop-blur-sm bg-white/30 p-[1vw] rounded-[0.5vw] text-red-400 text-[0.7vw] absolute w-full -top-[10vw]" v-for="(error,index) in errors" :key="index">
+    <div class="backdrop-blur-sm bg-white/30 md:p-[1vw] rounded-[2.051vw]  md:rounded-[0.5vw] text-red-400 text-[3vw] md:text-[0.7vw] absolute w-full p-[3vw] md:-top-[10vw]" v-for="(error,index) in errors" :key="index">
       <span>* {{error}}</span>
     </div>
   </div>
 </template>
 
 <script setup>
+import { useToast } from 'vue-toastification'
+const toast = useToast()
 const phone = ref(null);
 const errors = ref([]);
 const loading = ref(false);
@@ -72,13 +77,12 @@ async function login() {
       },
     });
     if (data.message === 'کد با موفقیت ارسال شد') {
+      toast.success('کد ورود برای شما ارسال شد')
       const phoneNumber = useState('phoneNumber', () => phone.value)
       FormStatus.value = true;
     }
     loading.value = false;
   } catch (error) {
-  //   console.log('errrrr :',error.data.data.message)
-  //  console.log('errrrr :', error.data.data.error)
   loading.value = false;
   return errors.value.push(error.data.data.error)
   }
@@ -87,11 +91,8 @@ async function login() {
 
 
 <style scoped>
+
 .loader {
-  top: 0.65vw;
-  left: 12vw;
-  width: 1.5vw;
-  height: 1.5vw;
   border: 0.2vw solid #fff;
   border-bottom-color: transparent;
   border-radius: 50%;
diff --git a/components/login-page/Login-svg.vue b/components/login-page/Login-svg.vue
index f90f80f..2fc3ae9 100644
--- a/components/login-page/Login-svg.vue
+++ b/components/login-page/Login-svg.vue
@@ -1,7 +1,9 @@
 <template>
     <div class="flexBox">
         <svg
-        class="h-[32.604vw] w-[32.604vw]"
+        class="
+        h-[80vw] w-[80vw]
+        md:h-[32.604vw] md:w-[32.604vw]"
          viewBox="0 0 626 626" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M312.999 618.325C481.495 618.325 618.087 539.463 618.087 442.181C618.087 344.9 481.495 266.037 312.999 266.037C144.504 266.037 7.91211 344.9 7.91211 442.181C7.91211 539.463 144.504 618.325 312.999 618.325Z" fill="#FAFAFA"/>
             <path d="M97.3048 557.753L127.14 574.981C128.82 575.833 130.677 576.278 132.561 576.278C134.445 576.278 136.302 575.833 137.982 574.981L325.519 466.721C328.512 464.993 328.512 462.188 325.519 460.461L295.634 443.208C293.954 442.356 292.097 441.911 290.213 441.911C288.329 441.911 286.472 442.356 284.792 443.208L97.3048 551.493C94.3125 553.221 94.3125 556.026 97.3048 557.753Z" fill="#EBEBEB"/>
diff --git a/layouts/profile.vue b/layouts/profile.vue
index e45b071..d6e35ad 100644
--- a/layouts/profile.vue
+++ b/layouts/profile.vue
@@ -299,6 +299,8 @@
 
 
 <script setup>
+import { useToast } from 'vue-toastification'
+const toast = useToast()
 const {authUser} = useAuth();
 async function logout(){
     await useFetch('/api/auth/logout', {
@@ -306,6 +308,7 @@ async function logout(){
         method : 'POST'
     })
     authUser.value = null;
+    toast.warning("از حساب کاربری خود خارج شدید")
     return navigateTo('/')
 }
 </script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 6a7575f..816c0af 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,7 +9,7 @@ export default defineNuxtConfig({
   modules: [
     '@nuxtjs/tailwindcss',
     '@nuxt/image',
-    'vue3-carousel-nuxt'
+    'vue3-carousel-nuxt',
   ],
   tailwindcss: {
     cssPath: '~/assets/css/tailwind.css',
diff --git a/package-lock.json b/package-lock.json
index 92a840d..a10996b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "nuxt": "^3.11.2",
         "vue": "^3.4.27",
         "vue-router": "^4.3.2",
-        "vue-toastification": "^1.7.14",
+        "vue-toastification": "^2.0.0-rc.5",
         "vue3-carousel-nuxt": "^1.1.1",
         "vue3-tabs-component": "^1.3.7"
       },
@@ -12265,11 +12265,11 @@
       }
     },
     "node_modules/vue-toastification": {
-      "version": "1.7.14",
-      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-1.7.14.tgz",
-      "integrity": "sha512-khZR8t3NWZ/JJ2MZxXLbesHrRJ8AKa75PY5Zq8yMifF9x8lHq8ljYkC0d2PD9yahooygQB5tcFyRDkbbIPx8hw==",
+      "version": "2.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz",
+      "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
       "peerDependencies": {
-        "vue": "^2.0.0"
+        "vue": "^3.0.2"
       }
     },
     "node_modules/vue-virtual-scroller": {
diff --git a/package.json b/package.json
index bb78b3c..d1a0d08 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "nuxt": "^3.11.2",
     "vue": "^3.4.27",
     "vue-router": "^4.3.2",
-    "vue-toastification": "^1.7.14",
+    "vue-toastification": "^2.0.0-rc.5",
     "vue3-carousel-nuxt": "^1.1.1",
     "vue3-tabs-component": "^1.3.7"
   },
diff --git a/pages/account/profile.vue b/pages/account/profile.vue
index f8cd7a7..3881187 100644
--- a/pages/account/profile.vue
+++ b/pages/account/profile.vue
@@ -76,8 +76,9 @@
       <div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
         <label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]">شماره موبایل</label>
         <input
+        :value="authUser?.phone"
           type="text"
-          class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw]"
+          class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
         />
       </div>
       <div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
@@ -85,6 +86,7 @@
           >نام و نام خانوادگی</label
         >
         <input
+        :value="authUser?.name"
           type="text"
           class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw]"
         />
@@ -104,3 +106,9 @@
     </div>
   </div>
 </template>
+
+
+<script setup>
+const { authUser } = useAuth();
+console.log('user :', authUser.value);
+</script>
\ No newline at end of file
diff --git a/pages/login/index.vue b/pages/login/index.vue
index 37f2faf..d03fe04 100644
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="h-screen flex">
+    <div class="h-screen flex flex-col flex-col-reverse md:flex-row">
         <div class="basis-1/2 flexBox">
-            <div class="w-[43.75vw] text-primaryTextColor space-y-[2vw]">
+            <div class="w-full md:w-[43.75vw] text-primaryTextColor space-y-[2vw]">
               <!-- <div class="content mb-[3vw]">
                 <p class="font-bold text-[1.901vw]">ورود به Shinan Learning</p>
                 <p class="text-[0.938vw] leading-[1.406vw] mt-[0.5vw]">
diff --git a/plugins/toastification.client.js b/plugins/toastification.client.js
new file mode 100644
index 0000000..4bfbfa5
--- /dev/null
+++ b/plugins/toastification.client.js
@@ -0,0 +1,11 @@
+import Toast from "vue-toastification";
+import "vue-toastification/dist/index.css";
+export default defineNuxtPlugin((NuxtApp)=>{
+    NuxtApp.vueApp.use(Toast,  {
+        rtl: true,
+        position: "top-center",
+        timeout: 2000,
+     bodyClassName: ["custom-toast"]
+    })
+
+})
\ No newline at end of file