From 94500faf79e1395211fd05b146f16bc116ddc329 Mon Sep 17 00:00:00 2001
From: Hamidreza Eidy <hamidreza.eidy1999@gmail.com>
Date: Mon, 18 Nov 2024 10:48:19 +0000
Subject: [PATCH] add otp form

---
 nuxt.config.js                       |  2 +-
 pages/admin/Login.vue                | 82 +++++++++++++++++++++++++---
 server/controllers/userController.js |  2 +-
 3 files changed, 77 insertions(+), 9 deletions(-)

diff --git a/nuxt.config.js b/nuxt.config.js
index 20842c6..6718075 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -143,7 +143,7 @@ export default {
           autoFetch: true,
         },
         endpoints: {
-          login: { url: "/api/auth/login", method: "post" },
+          login: { url: "/api/otp/verify", method: "post" },
           logout: {
             url: "/api/auth/logout",
             method: "delete",
diff --git a/pages/admin/Login.vue b/pages/admin/Login.vue
index e0b0351..ea20db5 100644
--- a/pages/admin/Login.vue
+++ b/pages/admin/Login.vue
@@ -4,8 +4,24 @@
       <CCardGroup>
         <CCard class="p-4">
           <CCardBody>
-            <CForm @submit.prevent="doLogin">
+            <CForm
+             v-if="step === 1"
+             @submit.prevent="doLogin">
               <h1 class="text-muted text-center mb-5">پنل مدیریت</h1>
+            
+              <CInput
+              :class="validation.username ? 'err' : null"
+              placeholder="شماره موبایل"
+              :description="validation.username ? validation.username.msg : null"
+              autocomplete="username email"
+              v-model="phone"
+          >
+            <template #prepend-content>
+              <CIcon name="cil-user"/>
+            </template>
+          </CInput>
+<!-- 
+
               <CInput
                   :class="validation.username ? 'err' : null"
                   placeholder="نام کاربری"
@@ -35,16 +51,43 @@
                 <i @click="showPass = !showPass" class="far fa-eye"></i>
               </div>
 
-              <CInputCheckbox label="مرا به خاطر بسپار" @update:checked="val => login.remember_me = val"/>
+              <CInputCheckbox label="مرا به خاطر بسپار" @update:checked="val => login.remember_me = val"/> -->
+     <CRow>
+              <CCol col="12" class="text-right mt-2">
+                  <CButton color="primary" @click="send_number" class="px-4">ارسال کد</CButton>
+                </CCol>
+     </CRow>
+              <!-- <p class="text-muted mt-3" style="font-size: 11px;">*درصورتی که گزینه "مرا به خاطر بسپار" را فعال نکنید بعد از 1 ساعت باید دوباره وارد سیستم شوید.</p> -->
+            
+            </CForm>
 
-              <p class="text-muted mt-3" style="font-size: 11px;">*درصورتی که گزینه "مرا به خاطر بسپار" را فعال نکنید بعد از 1 ساعت باید دوباره وارد سیستم شوید.</p>
+
+
+                 <CForm 
+            v-if="step === 2"
+            @submit.prevent="doLogin">
+              <h1 class="text-muted text-center mb-5">پنل مدیریت</h1>
+              <CInput
+              :class="validation.username ? 'err' : null"
+              placeholder="کد ورود را وارد کنید"
+              :description="validation.username ? validation.username.msg : null"
+              autocomplete="username email"
+              v-model="otp"
+          >
+            <template #prepend-content>
+              <CIcon name="cil-user"/>
+            </template>
+          </CInput>
 
               <CRow>
                 <CCol col="12" class="text-right mt-2">
-                  <CButton color="primary" type="submit" class="px-4">ورود</CButton>
+                  <CButton color="primary" type="submit" class="px-4">ارسال کد</CButton>
                 </CCol>
               </CRow>
             </CForm>
+
+
+
           </CCardBody>
         </CCard>
       </CCardGroup>
@@ -53,10 +96,14 @@
 </template>
 
 <script>
+  import { ref } from 'vue';
 export default {
   data() {
     return {
       showPass: false,
+         step: 1,
+      phone: '',
+      otp: '',
       login: {
         username: '',
         password: '',
@@ -71,11 +118,31 @@ export default {
     }
   },
   methods: {
+  async send_number(){
+  console.log(this.phone)
+  const phoneNumber = this.phone
+  const send_request = await fetch('/api/auth/otp', {
+  method: 'POST',
+  headers: {
+  'Accept' : 'application/json',
+   'content-type' : 'application/json'
+  },
+  body: JSON.stringify({phone: phoneNumber})
+
+  })
+//if (send_request.status === 200) {
+  this.step = 2
+//}
+
+  },
     doLogin() {
       this.validation = {}
 
       this.$auth.loginWith('local', {
-        data: this.login
+          data: {
+          phone: this.phone,
+          code: this.otp
+        }
       })
           .then(response => {
             window.location.replace(window.location.origin + "/admin" )
@@ -91,8 +158,9 @@ export default {
           })
     }
   },
-  layout: 'admin-auth'
-}
+  layout: 'admin-auth',
+
+  }
 </script>
 
 <style lang="scss">
diff --git a/server/controllers/userController.js b/server/controllers/userController.js
index cc3f659..72ab2e8 100644
--- a/server/controllers/userController.js
+++ b/server/controllers/userController.js
@@ -165,11 +165,11 @@ module.exports.otp = [
     // .withMessage(_sr["fa"].min_char.min4),
   ],
   async (req, res) => {
+    console.log('body', req.body)
     try {
       const errors = validationResult(req);
       if (!errors.isEmpty())
         return res.status(422).json({ validation: errors.mapped() });
-
       const { phone } = req.body;
       const user = await User.findOne({ mobileNumber: phone });
       if (!user)