From f234440d1a3a061247ad35450adc839737efdef3 Mon Sep 17 00:00:00 2001
From: HAM!DREZA <hamidreza.eidy1999@gmail.com>
Date: Mon, 27 May 2024 17:06:12 +0330
Subject: [PATCH] create resend otp route

---
 components/login-page/Check-otp.vue  | 162 +++++++++++++++++++++++----
 components/login-page/Login-form.vue |   8 +-
 layouts/profile.vue                  |   2 -
 pages/login/index.vue                |   4 +-
 server/api/auth/login.post.js        |   1 +
 5 files changed, 148 insertions(+), 29 deletions(-)

diff --git a/components/login-page/Check-otp.vue b/components/login-page/Check-otp.vue
index 5f191d8..5d693b1 100644
--- a/components/login-page/Check-otp.vue
+++ b/components/login-page/Check-otp.vue
@@ -1,6 +1,5 @@
 <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="relative flex flexBox w-full pt-[1vw]">
       <input
@@ -35,46 +34,169 @@
     <button class="greenButton w-full !mt-[1.5vw] relative" @click="checkOtp">
       <span class="loader 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" v-for="(error,index) in errors" :key="index">
-      <span>* {{error}}</span>
+
+    <p v-if="timer > 0" class="text-[0.7vw] px-[1vw] text-primaryGreen">
+      0{{ timer }} : 00
+    </p>
+    <p
+      v-else
+      class="text-[0.7vw] 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]"
+    >
+      <p
+        class="flex items-center gap-[0.3vw] cursor-pointer"
+        @click="resendSMS"
+      >
+        <svg
+          class="h-[1.042vw] w-[1.042vw]"
+          viewBox="0 0 20 21"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14.167 17.5833H5.83366C3.33366 17.5833 1.66699 16.3333 1.66699 13.4167V7.58333C1.66699 4.66667 3.33366 3.41667 5.83366 3.41667H14.167C16.667 3.41667 18.3337 4.66667 18.3337 7.58333V13.4167C18.3337 16.3333 16.667 17.5833 14.167 17.5833Z"
+            stroke="#878787"
+            stroke-width="1.5"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M14.1663 8L11.558 10.0833C10.6997 10.7667 9.29134 10.7667 8.433 10.0833L5.83301 8"
+            stroke="#878787"
+            stroke-width="1.5"
+            stroke-miterlimit="10"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        ارسال از طریق پیامک
+      </p>
+      <p
+        class="flex items-center gap-[0.3vw] cursor-pointer"
+        @click="resendCall"
+      >
+        <svg
+          class="h-[1.042vw] w-[1.042vw]"
+          viewBox="0 0 20 21"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18.3077 15.7745C18.3077 16.0745 18.241 16.3829 18.0994 16.6829C17.9577 16.9829 17.7744 17.2662 17.5327 17.5329C17.1244 17.9829 16.6744 18.3079 16.166 18.5162C15.666 18.7245 15.1244 18.8329 14.541 18.8329C13.691 18.8329 12.7827 18.6329 11.8243 18.2245C10.866 17.8162 9.90768 17.2662 8.95768 16.5745C7.99935 15.8745 7.09102 15.0995 6.22435 14.2412C5.36602 13.3745 4.59102 12.4662 3.89935 11.5162C3.21602 10.5662 2.66602 9.6162 2.26602 8.67453C1.86602 7.72453 1.66602 6.8162 1.66602 5.94953C1.66602 5.38286 1.76602 4.8412 1.96602 4.3412C2.16602 3.83287 2.48268 3.3662 2.92435 2.94953C3.45768 2.42453 4.04102 2.1662 4.65768 2.1662C4.89102 2.1662 5.12435 2.2162 5.33268 2.3162C5.54935 2.4162 5.74102 2.5662 5.89102 2.78287L7.82435 5.50787C7.97435 5.7162 8.08268 5.90786 8.15768 6.0912C8.23268 6.2662 8.27435 6.4412 8.27435 6.59953C8.27435 6.79953 8.21602 6.99953 8.09935 7.1912C7.99102 7.38286 7.83268 7.58286 7.63268 7.78286L6.99935 8.4412C6.90768 8.53286 6.86602 8.6412 6.86602 8.77453C6.86602 8.8412 6.87435 8.89953 6.89102 8.9662C6.91602 9.03286 6.94102 9.08286 6.95768 9.13286C7.10768 9.40786 7.36602 9.7662 7.73268 10.1995C8.10768 10.6329 8.50768 11.0745 8.94102 11.5162C9.39102 11.9579 9.82435 12.3662 10.266 12.7412C10.6993 13.1079 11.0577 13.3579 11.341 13.5079C11.3827 13.5245 11.4327 13.5495 11.491 13.5745C11.5577 13.5995 11.6244 13.6079 11.6994 13.6079C11.841 13.6079 11.9494 13.5579 12.041 13.4662L12.6744 12.8412C12.8827 12.6329 13.0827 12.4745 13.2744 12.3745C13.466 12.2579 13.6577 12.1995 13.866 12.1995C14.0243 12.1995 14.191 12.2329 14.3744 12.3079C14.5577 12.3829 14.7494 12.4912 14.9577 12.6329L17.716 14.5912C17.9327 14.7412 18.0827 14.9162 18.1744 15.1245C18.2577 15.3329 18.3077 15.5412 18.3077 15.7745Z"
+            stroke="#878787"
+            stroke-width="1.5"
+            stroke-miterlimit="10"
+          />
+        </svg>
+        ارسال از طریق تماس تلفنی
+      </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]"
+      v-for="(error, index) in errors"
+      :key="index"
+    >
+      <span>* {{ error }}</span>
+    </div>
+
   </div>
 </template>
 
 <script setup>
-const {authUser} = useAuth();
+const { authUser } = useAuth();
+const options = ref(false);
 const code = ref(null);
 const errors = ref([]);
 const loading = ref(false);
 const phoneNumber = useState("phoneNumber");
-async function checkOtp() {
-     if (code.value == null) {
-        errors.value = []
-        return errors.value.push("وارد کردن کد ورود الزامی است")
+const timer = ref(3);
+
+  async function checkOtp() {
+    console.log(code);
+    if (code.value == null) {
+      errors.value = [];
+      return errors.value.push("وارد کردن کد ورود الزامی است");
     }
+
+    try {
+      loading.value = true;
+      errors.value = [];
+      const data = await $fetch("/api/auth/login-step-two", {
+        method: "POST",
+        body: {
+          phone: phoneNumber.value,
+          code: code.value,
+        },
+      });
+      if (data.status === "Active") {
+        authUser.value = data;
+        navigateTo("/");
+      }
+      loading.value = false;
+    } catch (error) {
+      console.log("client err :", error);
+      loading.value = false;
+      return errors.value.push(error.data.data.error);
+    }
+  };
+
+async function resendSMS() {
   try {
-    loading.value = true;
     errors.value = [];
-    const data = await $fetch("/api/auth/login-step-two", {
+    const data = await $fetch("/api/auth/login", {
       method: "POST",
       body: {
         phone: phoneNumber.value,
-        code: 1234,
-      }, 
+        type: "1",
+      },
     });
-    if (data.status === 'Active') {
-     authUser.value = data;
-     navigateTo('/')
-   }
+
     loading.value = false;
   } catch (error) {
-    console.log('client err :', error);
-  loading.value = false;
-  return errors.value.push(error.data.data.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);
   }
 }
+
+
+async function resendCall() {
+  try {
+    errors.value = [];
+    const data = await $fetch("/api/auth/login", {
+      method: "POST",
+      body: {
+        phone: phoneNumber.value,
+        type: "2",
+      },
+    });
+
+    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);
+  }
+}
+onMounted(() => {
+  const interval = setInterval(() => {
+    if (timer.value > 0) {
+      timer.value--;
+    }
+  }, 1000);
+
+  return () => clearInterval(interval);
+})
 </script>
 
 
diff --git a/components/login-page/Login-form.vue b/components/login-page/Login-form.vue
index 21067b6..4d7de72 100644
--- a/components/login-page/Login-form.vue
+++ b/components/login-page/Login-form.vue
@@ -7,7 +7,7 @@
         v-model="phone"
         type="text"
         class="loginInput"
-        placeholder="شماره موبایل"
+        placeholder="شماره موبایل خود را وارد کنید"
       />
       <svg
         class="h-[1.146vw] w-[1.146vw] absolute left-[1.2vw]"
@@ -34,10 +34,10 @@
 
     <button class="greenButton w-full !mt-[1.5vw] relative" @click="login">
       <span class="loader absolute" v-if="loading"></span>
-      <span v-else>ورود</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" v-for="(error,index) in errors" :key="index">
+    <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">
       <span>* {{error}}</span>
     </div>
   </div>
@@ -50,7 +50,6 @@ const loading = ref(false);
 const FormStatus = useState("showCheckOtpForm");
 async function login() {
      if (phone.value == null) {
-        console.log("شماره موبایل الزامی است")
         errors.value = []
         return errors.value.push("شماره موبایل الزامی است")
     }
@@ -71,7 +70,6 @@ async function login() {
         phone: phone.value,
         type: "1",
       },
-      
     });
     if (data.message === 'کد با موفقیت ارسال شد') {
       const phoneNumber = useState('phoneNumber', () => phone.value)
diff --git a/layouts/profile.vue b/layouts/profile.vue
index 5277e44..e45b071 100644
--- a/layouts/profile.vue
+++ b/layouts/profile.vue
@@ -299,9 +299,7 @@
 
 
 <script setup>
-
 const {authUser} = useAuth();
-
 async function logout(){
     await useFetch('/api/auth/logout', {
         headers : useRequestHeaders(['cookie']),
diff --git a/pages/login/index.vue b/pages/login/index.vue
index 3264c79..37f2faf 100644
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -2,7 +2,7 @@
     <div class="h-screen flex">
         <div class="basis-1/2 flexBox">
             <div class="w-[43.75vw] text-primaryTextColor space-y-[2vw]">
-              <div class="content mb-[3vw]">
+              <!-- <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]">
                   لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
@@ -13,7 +13,7 @@
                 </p>
               </div>
          
-              <nuxt-link  class="greenButton" to="/signup">ثبت نام</nuxt-link>
+              <nuxt-link  class="greenButton" to="/signup">ثبت نام</nuxt-link> -->
               <login-pageLogin-svg />
             </div>
           </div>
diff --git a/server/api/auth/login.post.js b/server/api/auth/login.post.js
index 5b3bc38..ed09c60 100644
--- a/server/api/auth/login.post.js
+++ b/server/api/auth/login.post.js
@@ -9,6 +9,7 @@ export default defineEventHandler(async (event) => {
                 'Accept': 'application/json',
             }
         });
+        console.log('code sended !!!!');
              return data;
     } catch (err) {
       console.log(err.data);