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() {
      if (!this.phone) {
        this.$message({
          type: "warning",
          message: "شماره تماس را وارد کنید !",
        });
        return;
      }

      try {
        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 === 429 || send_request.status === 406) {
          this.$message({
            type: "warning",
            message: "لطفا بعد از ۱۰ دقیقه مجدد تلاش کنید",
          });
          return;
        }

        const resData = await send_request.json();

        if (send_request.status === 200 || send_request.status === 201) {
          this.$message({
            type: "success",
            // message: "کد ورود ارسال شد",
            message: resData.message,
          });
          this.step = 2;
          return;
        } else {
          this.$message({
            type: "warning",
            // message: "مشکل در برقرای ارتباط",
            message: resData.message,
          });
        }
      } catch (error) {
        console.log("err", error);
        this.$message({
          type: "warning",
          message: "خطای ناشناخته",
        });
        return;
      }
    },
    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 {
            this.$message({
              type: "warning",
              message: err?.response?.data?.validation?.code?.msg,
            });
            console.log(err.response.data.validation.code.msg);
          }
        });
    },
  },
  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>