ostandari/pages/admin/Login.vue

<template>
  <CRow class="justify-content-center">
    <CCol lg="5">
      <CCardGroup>
        <CCard class="p-4">
          <CCardBody>
            <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="نام کاربری"
                  :description="validation.username ? validation.username.msg : null"
                  autocomplete="username email"
                  v-model="login.username"
              >
                <template #prepend-content>
                  <CIcon name="cil-user"/>
                </template>
              </CInput>

              <div class="butt">
                <CInput
                    :class="validation.password ? 'err' : null"
                    placeholder="کلمه عبور"
                    :type="passwordState"
                    :description="validation.password ? validation.password.msg : null"
                    autocomplete="curent-password"
                    v-model="login.password"
                >

                  <template #prepend-content>
                    <CIcon name="cil-lock-locked"/>
                  </template>
                </CInput>
                <i @click="showPass = !showPass" class="far fa-eye"></i>
              </div>

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



                 <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>
                </CCol>
              </CRow>
            </CForm>



          </CCardBody>
        </CCard>
      </CCardGroup>
    </CCol>
  </CRow>
</template>

<script>
  import { ref } from 'vue';
export default {
  data() {
    return {
      showPass: false,
         step: 1,
      phone: '',
      otp: '',
      login: {
        username: '',
        password: '',
        remember_me: false
      },
      validation: {}
    }
  },
  computed: {
    passwordState() {
      return this.showPass ? "text" : "password"
    }
  },
  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: {
          phone: this.phone,
          code: this.otp
        }
      })
          .then(response => {
            window.location.replace(window.location.origin + "/admin" )
          })
          .catch(err => {
            if (err.response.status === 422) this.validation = err.response.data.validation
            if (err.response.status === 403) {
              this.$message({
                type: 'warning',
                message: err.response.data.message
              })
            } else console.log(err.response.data)
          })
    }
  },
  layout: 'admin-auth',

  }
</script>

<style lang="scss">
.butt {
  position: relative;

  i {
    position: absolute;
    left: 7px;
    top: 11px;
    z-index: 3;
    cursor: pointer;
    color: rgba(#000, 0.5);
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;

    &:hover {
      color: #000;
    }
  }
}
</style>