base_ui/components/auth/loginphone.vue

<template>
  <div class="sign-up">
    <div class="sign-up__title">{{ $t("Wellcome") }}</div>
    <div class="sign-up__text">
      {{ $t("CountryCodeAndMobileNumber") }}
    </div>
    <div class="sign-up__form">
      <div class="sign-up__form-row">
        <select id="single" class="select2-container--default form-control">
          <option>ایران</option>
        </select>
      </div>

      <div class="sign-up__form-row sign-up__number">
        <div
          class="form-group position-relative"
          :class="{ 'form-group--error': $v.mobile.$error }"
        >
          <input
            class="form-control"
            type="tel"
            name="mobile"
            id="mobile"
            v-model.trim="$v.mobile.$model"
            placeholder="۹۱۰۰۰۰۰۰۰۰"
            @input="resetErrors"
            dir="ltr"
          />
          <span>+98</span>
        </div>
        <div v-if="submitStatus === 'ERROR'">
          <div class="error" v-if="!$v.mobile.required">
            {{ $t("IsRequired") }}
          </div>
          <div class="error" v-if="!$v.mobile.minLength">
            {{ $t("MinLength", { n: 10 }) }}
          </div>
          <div class="error" v-if="!$v.mobile.maxLength">
            {{ $t("MaxLength", { n: 11 }) }}
          </div>
          <!-- <div class="error" v-if="!$v.mobile.between">
            Must be between {{ $v.mobile.$params.between.min }} and
            {{ $v.mobile.$params.between.max }}
          </div> -->
        </div>

        <div class="sign-up__form-row sign-up__simple-input">
          <div
            class="form-group position-relative d-flex align-items-center"
            :class="{ 'form-group--error': $v.captcha.$error }"
          >
            <input
              class="form-control elem__placeholder-gray mb-0 flex-grow-1 p-3"
              type="text"
              name="captcha"
              v-model.trim="$v.captcha.$model"
              :placeholder="$t('SecurityCode')"
              dir="ltr"
            />
            <div class="d-flex border-1 p-2">
              <div class="captcha-container" style="width: 7em">
                <img
                  style="width: 100%; height: 100%; object-fit: contain"
                  :src="captchaImage"
                  alt=""
                />
              </div>
              <button-component
                style="min-width: auto"
                @click="resetCaptcha"
                classes="border-0"
                buttonText=""
                :buttonLoading="loading"
              >
                <svg style="width: 1.3em" class="icon icon-reset-form">
                  <use xlink:href="#icon-reset-form"></use>
                </svg>
              </button-component>
            </div>
          </div>
          <div v-if="submitStatus === 'ERROR'">
            <div class="error" v-if="!$v.captcha.required">
              {{ $t("IsRequired") }}
            </div>
          </div>
        </div>

        <div class="sign-up__btn-container">
          <RouterLink
            class="sign-up__text text__gray"
            :to="{ path: '/login' }"
          >
            {{ $t("LoginEmail") }}
          </RouterLink>
          <button :disabled="loading" v-on:click="getCode()">
            {{ $t("ConfirmationNumber") }}
          </button>
        </div>
      </div>

      <!-- <p class="typo__p" v-if="submitStatus === 'OK'">
        Thanks for your submission!
      </p>
      <p class="typo__p" v-if="submitStatus === 'ERROR'">
        Please fill the form correctly.
      </p>
      <p class="typo__p" v-if="submitStatus === 'PENDING'">Sending...</p> -->
    </div>
  </div>
</template>

<script>
import authMixin from "~/mixins/authMixin";
import {
  required,
  minLength,
  maxLength,
  between,
} from "@vuelidate/validators";

import { mapState, mapActions } from "pinia";
import { useCommonStore } from "~/stores/commonStore";
import { useAuthStore } from "~/stores/authStore";
export default {
  mounted(){
    this.getCaptcha().then((res)=>{
      this.captchaImage = `data:image/jpeg; charset=utf-8; base64, ${res}`;
    }).catch(err=>{
      this.captchaImage =  (import(`assets/common/img/captcha.png`)).default;
    })
  },
  validations: {
    mobile: {
      required,
      minLength: minLength(10),
      maxLength: maxLength(10),
    },
    captcha: {},
  },
  mixins: [authMixin],

  data() {
    return {
      mobile: "",
      enableResetPassword: false,
      captcha: undefined,
      captchaImage:""
    };
  },
  computed: {
    ...mapState(useAuthStore,["getResetPasswordState"]),
  },
  methods: {
    ...mapActions(useCommonStore, ["SET_USER_FULL_NAME", "SET_USER_PHONE_NUMBER"]),
    resetErrors() {
      if (this.$v.$invalid) this.$v.$reset();
    },
    getCode() {
      var vm = this;
      this.$v.$touch();

      if (this.$v.$invalid) {
        this.submitStatus = "ERROR";
      } else {
        if (this.loading) return;
        this.loading = true;

        this.submitStatus = "PENDING";

        this.phoneLogin({
          mobile: parseInt(vm.mobile, 10),
          captcha: vm.captcha,
        })
          .then((res) => {
            this.submitStatus = "OK";

            mySwalToast({
              title: res.message,
            });

            this.SET_USER_FULL_NAME(res.data);
            this.SET_USER_PHONE_NUMBER(this.mobile);

            if (this.getResetPasswordState) this.redirectToResetPage(res.data);
            else this.redirectToActivePage();
          })
          
          .finally(() => {
            this.loading = false;
          });
      }
    },
    redirectToResetPage(data) {
      var vm = this;

      try {
        this.$router.push({
          name: "resetpassphone",
          params: {
            usernameemail: this.usernameemail,
            mobile: parseInt(vm.mobile, 10),
            userData: data,
          },
        });
      } catch (err) {
      }
    },
    redirectToActivePage() {
      var vm = this;

      try {
        this.$router.push({
          name: "activate",
          params: { 
            mobile: parseInt(vm.mobile, 10),
          },
        });
      } catch (err) {
      }
    },
  },
};
</script>
<style scoped>
.blink_me {
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
</style>