اضافه شدن ورود با رمز یکبار مصرف

src/api/models/Auth.js

@@ -8,6 +8,7 @@ export default class AuthAPI extends APIRepository {
     this.APIAdresses = {
       login: '/uma/users/login',
       sendOtp: '/uma/users/send_otp',
+      loginOtp: '/uma/users/login_otp',
       signUp: '/uma/users/sign_up',
       verify: '/uma/users/verify_input',
       setPass: '/uma/users/set_password',
@@ -15,7 +16,7 @@ export default class AuthAPI extends APIRepository {
       loginAdmin: '/auth/login',
       refreshToken: '/auth/refresh-token',
       changePass: '/auth/change-pass',
-      loginOtp: '/auth/login-otp'
+      loginOtp2: '/auth/login-otp'
     }
     this.CacheList = {}
   }
@@ -44,6 +45,24 @@ export default class AuthAPI extends APIRepository {
     })
   }
 
+  sendOtpByAction (data) {
+    return this.sendRequest({
+      apiMethod: 'post',
+      api: this.api,
+      request: this.APIAdresses.sendOtp,
+      data: this.getNormalizedSendData({
+        input: '', // String
+        action: 'SIGN_UP' // String
+      }, data),
+      resolveCallback: (response) => {
+        return response.data.message // String (ok)
+      },
+      rejectCallback: (error) => {
+        return error
+      }
+    })
+  }
+
   sendOtpSignUp (data) {
     return this.sendRequest({
       apiMethod: 'post',
@@ -80,6 +99,24 @@ export default class AuthAPI extends APIRepository {
     })
   }
 
+  loginOtp (data) {
+    return this.sendRequest({
+      apiMethod: 'post',
+      api: this.api,
+      request: this.APIAdresses.loginOtp,
+      data: this.getNormalizedSendData({
+        input: '', // String
+        otp: '' // String
+      }, data),
+      resolveCallback: (response) => {
+        return response.data
+      },
+      rejectCallback: (error) => {
+        return error
+      }
+    })
+  }
+
   verify (data) {
     return this.sendRequest({
       apiMethod: 'put',

src/components/Auth/LoginComponent.vue

@@ -3,8 +3,10 @@
     <template #body>
       <login-step v-if="step === 'login'"
                   @goToRegisterStep="goToRegisterStep"
+                  @goToSendOtpStep="goToSendOtpStep"
                   @goToForgetStep="goToForgetStep" />
-      <register-step v-if="step === 'register'"
+      <register-step v-if="showRegisterComponent"
+                     :register-step-prop="this.step"
                      @goToLoginStep="goToLoginStep"
                      @register="onRegister" />
       <forget-step v-if="step === 'forget'"
@@ -37,10 +39,18 @@ export default {
       step: 'login'
     }
   },
+  computed: {
+    showRegisterComponent() {
+      return this.step === 'register' || this.step === 'sendOtp'
+    }
+  },
   methods: {
     goToRegisterStep () {
       this.step = 'register'
     },
+    goToSendOtpStep () {
+      this.step = 'sendOtp'
+    },
     goToForgetStep () {
       this.step = 'forget'
     },

src/components/Auth/LoginStep.vue

@@ -55,7 +55,7 @@
              :loading="loadingList"
              @click="goToRegisterStep" />
       <div class="btn-otp-div"
-           @click="goToRegisterStep">
+           @click="goToSendOtpStep">
         ورود با رمز یکبار مصرف
       </div>
     </div>
@@ -139,6 +139,9 @@ export default {
           this.loadingList = false
         })
     },
+    goToSendOtpStep () {
+      this.$emit('goToSendOtpStep')
+    },
     goToRegisterStep () {
       this.$emit('goToRegisterStep')
     },

src/components/Auth/RegisterStep.vue

@@ -3,7 +3,7 @@
     <q-banner class="banner">
       {{ bannerMessage }}
     </q-banner>
-    <template v-if="registerStep === 'getUsername'">
+    <template v-if="showUsernameInput">
       <div class="hello">
         سلام
       </div>
@@ -23,7 +23,7 @@
         </template>
       </q-input>
       <div class="accept-rules-and-conditions-message">
-        با ثبت نام در سامانه
+        با ورود در سامانه
         <span class="accept-rules-and-conditions-message-btn"
               @click="showRulesAndConditions">
           قوانین و شرایط استفاده
@@ -44,7 +44,7 @@
         </span>
       </div>
     </template>
-    <template v-else-if="registerStep === 'verify'">
+    <template v-else-if="showVerifyForm">
       <label for="verifyNumber">
         .لطفا کد تایید ارسال شده به شماره
         {{ username }}
@@ -77,82 +77,93 @@
         </template>
       </div>
 
-      <div class="information-top-message">
-        لطفا اطلاعات کاربری خود را وارد کنید.
+      <div v-if="registerStep === 'verify'"
+           id="information-form">
+        <div class="information-top-message">
+          لطفا اطلاعات کاربری خود را وارد کنید.
+        </div>
+        <label for="name">
+          نام
+        </label>
+        <q-input id="name"
+                 v-model="firstname"
+                 outlined
+                 class="name-input"
+                 placeholder="نام خود را وارد کنید"
+                 @keydown.enter="verify">
+          <template v-slot:prepend>
+            <q-icon name="person" />
+          </template>
+        </q-input>
+        <label for="lastname">
+          نام خانوادگی
+        </label>
+        <q-input id="lastname"
+                 v-model="lastname"
+                 outlined
+                 class="lastname-input"
+                 placeholder="نام خانوادگی خود را وارد کنید"
+                 @keydown.enter="verify">
+          <template v-slot:prepend>
+            <q-icon name="person" />
+          </template>
+        </q-input>
+        <label class="password-label"
+               for="password">
+          گذرواژه
+        </label>
+        <q-input id="password"
+                 v-model="password"
+                 outlined
+                 class="password-input"
+                 placeholder="گذرواژه خود را وارد کنید"
+                 :type="visibilityIcon === 'visibility' ? 'password' : 'text'"
+                 @keydown.enter="verify">
+          <template v-slot:prepend>
+            <q-icon name="lock_open" />
+          </template>
+          <template v-slot:append>
+            <q-icon :name="visibilityIcon"
+                    class="cursor-pointer"
+                    @click="toggleVisibilityIcon" />
+          </template>
+        </q-input>
+        <label class="password-label"
+               for="password">
+          تکرار گذرواژه
+        </label>
+        <q-input id="rePassword"
+                 v-model="rePassword"
+                 outlined
+                 class="password-input"
+                 placeholder="مجدد گذرواژه خود را وارد کنید"
+                 :type="visibilityIcon === 'visibility' ? 'password' : 'text'"
+                 @keydown.enter="verify">
+          <template v-slot:prepend>
+            <q-icon name="lock_open" />
+          </template>
+          <template v-slot:append>
+            <q-icon :name="visibilityIcon"
+                    class="cursor-pointer"
+                    @click="toggleVisibilityIcon" />
+          </template>
+        </q-input>
       </div>
-      <label for="name">
-        نام
-      </label>
-      <q-input id="name"
-               v-model="firstname"
-               outlined
-               class="name-input"
-               placeholder="نام خود را وارد کنید"
-               @keydown.enter="verify">
-        <template v-slot:prepend>
-          <q-icon name="person" />
-        </template>
-      </q-input>
-      <label for="lastname">
-        نام خانوادگی
-      </label>
-      <q-input id="lastname"
-               v-model="lastname"
-               outlined
-               class="lastname-input"
-               placeholder="نام خانوادگی خود را وارد کنید"
-               @keydown.enter="verify">
-        <template v-slot:prepend>
-          <q-icon name="person" />
-        </template>
-      </q-input>
-      <label class="password-label"
-             for="password">
-        گذرواژه
-      </label>
-      <q-input id="password"
-               v-model="password"
-               outlined
-               class="password-input"
-               placeholder="گذرواژه خود را وارد کنید"
-               :type="visibilityIcon === 'visibility' ? 'password' : 'text'"
-               @keydown.enter="verify">
-        <template v-slot:prepend>
-          <q-icon name="lock_open" />
-        </template>
-        <template v-slot:append>
-          <q-icon :name="visibilityIcon"
-                  class="cursor-pointer"
-                  @click="toggleVisibilityIcon" />
-        </template>
-      </q-input>
-      <label class="password-label"
-             for="password">
-        تکرار گذرواژه
-      </label>
-      <q-input id="rePassword"
-               v-model="rePassword"
-               outlined
-               class="password-input"
-               placeholder="مجدد گذرواژه خود را وارد کنید"
-               :type="visibilityIcon === 'visibility' ? 'password' : 'text'"
-               @keydown.enter="verify">
-        <template v-slot:prepend>
-          <q-icon name="lock_open" />
-        </template>
-        <template v-slot:append>
-          <q-icon :name="visibilityIcon"
-                  class="cursor-pointer"
-                  @click="toggleVisibilityIcon" />
-        </template>
-      </q-input>
 
-      <q-btn class="full-width btn-verifyUsername"
+      <q-btn v-if="registerStep==='verify'"
+             class="full-width btn-verifyUsername"
              color="primary"
              label="ثبت نام"
              :disable="loading"
              :loading="loading"
              @click="verify" />
+      <q-btn v-if="registerStep==='loginOtp'"
+             class="full-width btn-verifyUsername"
+             color="primary"
+             label=" ورود"
+             :disable="loading"
+             :loading="loading"
+             @click="loginOtp" />
       <div class="go-to-set-username-message"
            @click="goToGetUsernameStep">
         تغییر شماره تلفن همراه یا استفاده از آدرس ایمیل
@@ -177,6 +188,10 @@ export default {
   components: { Timer },
   mixins: [mixinAuth],
   props: {
+    registerStepProp: {
+      type: String,
+      default: 'getUsername'
+    },
     redirect: {
       type: Boolean,
       default: false
@@ -210,6 +225,12 @@ export default {
     user () {
       return this.$store.getters['Auth/user']
     },
+    showUsernameInput () {
+      return this.registerStep === 'getUsername' || this.registerStep === 'sendOtp'
+    },
+    showVerifyForm () {
+      return this.registerStep === 'verify' || this.registerStep === 'loginOtp'
+    },
     formatedTimer () {
       const second = this.otpTimer % 60
       const minute = Math.floor(this.otpTimer / 60)
@@ -221,7 +242,7 @@ export default {
     // if (this.getToken()) {
     //   this.getUserData(() => { this.redirectTo() })
     // }
-    this.setRegisterStep('getUsername')
+    this.setRegisterStep(this.registerStepProp)
   },
   methods: {
     toggleVisibilityIcon () {
@@ -275,7 +296,11 @@ export default {
       this.setBannerMessageFromStep(step)
     },
     setBannerMessageFromStep (step) {
-      if (step === 'getUsername') {
+      if (step === 'loginOtp') {
+        this.bannerMessage = 'ورود با رمز یکبار مصرف به سامانه'
+      } else if (step === 'sendOtp') {
+        this.bannerMessage = 'ارسال رمز یکبار مصرف'
+      } else if (step === 'getUsername') {
         this.bannerMessage = 'ثبت نام در سامانه'
       } else if (step === 'verify') {
         this.bannerMessage = 'کد تایید'
@@ -344,13 +369,15 @@ export default {
         return
       }
       this.loading = true
-      APIGateway.auth.sendOtpSignUp({ input: this.username })
+      const action = this.registerStep === 'sendOtp' ? 'LOGIN_OTP' : 'SIGN_UP'
+      const nextStep = this.registerStep === 'sendOtp' ? 'loginOtp' : 'verify'
+      APIGateway.auth.sendOtpByAction({ input: this.username, action: action })
         .then(() => {
           this.loading = false
           this.restartOtpInterval()
           // this.$axios.defaults.headers.common.Authorization = 'Bearer ' + this.$store.getters['Auth/accessToken']
           // this.redirectTo()
-          this.setRegisterStep('verify')
+          this.setRegisterStep(nextStep)
         })
         .catch(() => {
           this.loading = false
@@ -402,6 +429,28 @@ export default {
           this.loading = false
         })
     },
+    loginOtp () {
+      if (!this.verifyNumber) {
+        this.$q.notify({
+          type: 'negative',
+          message: 'کد تایید شماره همراه را وارد نکرده اید'
+        })
+        return
+      }
+      this.loading = true
+      this.$store.dispatch('Auth/loginOtp', {
+        input: this.username,
+        otp: this.verifyNumber
+      })
+        .then(() => {
+          this.loading = false
+          this.$router.push({ name: 'Public.Home' })
+          // this.setRegisterStep('information')
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
     goToGetUsernameStep () {
       this.setRegisterStep('getUsername')
     }

src/store/Auth/actions.js

@@ -60,6 +60,32 @@ export function signUp (context, data) {
   })
 }
 
+export function loginOtp (context, data) {
+  const setVars = (user, accessToken) => {
+    context.commit('updateUser', user)
+    context.commit('updateAccessToken', accessToken)
+    if (typeof window !== 'undefined') {
+      Cookies.set('BearerAccessToken', accessToken, {
+        // domain: '.' + window.location.host,
+        path: '/',
+        expires: '365d'
+      })
+    }
+    context.commit('updateAxiosAuthorization', accessToken)
+  }
+  return new Promise((resolve, reject) => {
+    APIGateway.auth.loginOtp(data)
+      .then(({ user, accessToken }) => {
+        setVars(user, accessToken)
+        context.commit('updateUser', user)
+        resolve({ accessToken, user })
+      })
+      .catch(() => {
+        reject()
+      })
+  })
+}
+
 export function setPassword (context, data) {
   const setVars = (user, accessToken) => {
     context.commit('updateUser', user)

src/store/Auth/mutations.js

@@ -4,7 +4,7 @@ export function updateUser(state, newInfo) {
 export function updateAxiosAuthorization (state, accessToken) {
   const tokenType = 'Bearer'
   const token = accessToken ? (tokenType + ' ' + accessToken) : null
-
+  debugger
   this.$accessToken = accessToken
   if (this.$axios) {
     this.$axios.defaults.headers.common.Authorization = token