add otp form

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",

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> -->
             
-              <p class="text-muted mt-3" style="font-size: 11px;">*درصورتی که گزینه "مرا به خاطر بسپار" را فعال نکنید بعد از 1 ساعت باید دوباره وارد سیستم شوید.</p>
+            </CForm>
+
+
+
+                 <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">

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)