base_ui/components/auth/auth-modals/LoginFormModal.vue

<template>
  <div class="m-sign-up__form">
    <!--Add  error-input to its class for error-->
    <div class="m-sign-up__form-row m-sign-up__simple-input">
      <div
        class="form-group position-relative"
        :class="{ 'form-group--error': $v.username.$error }"
      >
        <input
          dir="ltr"
          class="form-control elem__placeholder-gray"
          type="text"
          name="username"
          v-model.trim="$v.username.$model"
          :placeholder="$t('UserNameOrEmail')"
        />
      </div>
      <div v-if="submitStatus === 'ERROR'">
        <div class="error" v-if="!$v.username.required">
          {{ $t("IsRequired") }}
        </div>
      </div>
    </div>

    <div class="m-sign-up__form-row m-sign-up__simple-input">
      <div
        class="form-group position-relative mb-4"
        :class="{ 'form-group--error': $v.password.$error }"
      >
        <input
          class="form-control elem__placeholder-gray mb-0"
          type="password"
          name="password"
          v-model.trim="$v.password.$model"
          :placeholder="$t('Password')"
          dir="ltr"
        />

        <div class="m-sign-up__btn-container">
          <a
            href="رمز خود را فراموش کرده اید"
            @click.prevent="goLoginPhonePage(true)"
            class="m-sign-up__text text__gray"
            >{{ $t("ForgotYourPassword") }}
          </a>
          <!-- <RouterLink
        tag="a"
        class="sign-up__text text__gray"
        :to="{ path: '/forget' }"
        >رمز خود را فراموش کرده اید
      </RouterLink> -->
        </div>
      </div>
      <div v-if="submitStatus === 'ERROR'">
        <div class="error" v-if="!$v.password.required">
          {{ $t("IsRequired") }}
        </div>
      </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"
          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="m-sign-up__btn-container">
      <a
        v-if="!isMajlesBuild()"
        href="رمز خود را فراموش کرده اید"
        @click.prevent="goLoginPhonePage(false)"
        class="m-sign-up__text text__gray"
        >{{ $t("LoginWithMobile") }}
      </a>

      <!-- <RouterLink
        tag="a"
        class="sign-up__text text__gray"
        :to="{ path: '/loginphone' }"
        >ورود با شماره تلفن
      </RouterLink> -->

      <button
        class="btn"
        :disabled="loading"
        v-on:click="authBase('dologin', 'modal')"
      >
        <the-button-loading v-if="loading"></the-button-loading>
        ورود
      </button>
    </div>

    <!-- <div class="signup__google elem__google">
      <button-component
        @click="loginGuest"
        classes="btn-block"
        buttonText="ورود به عنوان مهمان"
        :buttonLoading="loading"
      >
        <img src="assets/common/img/user.svg" alt="کاربر مهمان" />
      </button-component> -->

    <!-- <button :disabled="loading" class="w-100" title="ورود به عنوان مهمان" @click.prevent="loginGuest">
                <span class="text__gray">ورود به عنوان مهمان</span>
                <img src="assets/common/img/user.svg" alt="کاربر مهمان" />
              </button> -->
    <!-- </div> -->
    <!-- <div class="signup__google elem__google">
              <button class="w-100" disabled href="#" @click.prevent="loginWithGoogle">
                <span class="text__gray">ورود با گوگل</span>
                <img src="img/google.png" alt=""/>
              </button>
            </div> -->
  </div>
</template>

<script>
import authMixin from "~/mixins/authMixin";
import { mapActions } from "pinia";

import {
  required,
  minLength,
  maxLength,
  between,
} from "vuelidate/lib/validators";

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;
      });
  },
  mixins: [authMixin],
  validations: {
    password: {
      required,
    },
    username: {
      required,
    },
    captcha: {},
  },
  data() {
    return {
      username: null,
      password: null,
      captcha: undefined,
      captchaImage: "",
    };
  },
  methods: {
    ...mapActions(useCommonStore, ["SET_IS_RESET_PASSWORD"]),

    goLoginPhonePage(isResetPassword = true) {
      this.SET_IS_RESET_PASSWORD(isResetPassword);
      this.$emit("set-component", { name: "login-phone" });

      // this.$router.push({
      //   name: "loginphone",
      // });
    },
  },
};
</script>