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

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

      <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
            class="form-control elem__placeholder-gray"
            type="text"
            name=""
            id=""
            v-model.trim="$v.username.$model"
            :placeholder="$t('UserName')"
            dir="ltr"
          />
        </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"
          :class="{ 'form-group--error': $v.email.$error }"
        >
          <input
            class="form-control elem__placeholder-gray"
            type="text"
            name=""
            id=""
            v-model.trim="$v.email.$model"
            :placeholder="$t('Email')"
            dir="ltr"
          />
        </div>
        <div v-if="submitStatus === 'ERROR'">
          <div class="error" v-if="!$v.email.required">
            {{ $t("IsRequired") }}
          </div>
        </div>
      </div>
      <div class="m-sign-up__form-row m-sign-up__simple-input">
        <div
          class="form-group position-relative"
          :class="{ 'form-group--error': $v.password.$error }"
        >
          <input
            class="form-control elem__placeholder-gray"
            type="password"
            name=""
            id=""
            v-model.trim="$v.password.$model"
            :placeholder="$t('Password')"
            dir="ltr"
          />
        </div>
        <div v-if="submitStatus === 'ERROR'">
          <div class="error" v-if="!$v.password.required">
            {{ $t("IsRequired") }}
          </div>
          <div class="error" v-if="!$v.password.minLength">
            Password must have at least
            {{ $v.password.$params.minLength.min }} letters.
          </div>
        </div>
      </div>
      <div class="m-sign-up__form-row m-sign-up__simple-input">
        <div
          class="form-group position-relative"
          :class="{ 'form-group--error': $v.repassword.$error }"
        >
          <input
            class="form-control elem__placeholder-gray"
            type="password"
            name=""
            id=""
            v-model.trim="$v.repassword.$model"
            :placeholder="$t('RepeatThePassword')"
            dir="ltr"
          />
        </div>

        <div v-if="submitStatus === 'ERROR'">
          <div class="error" v-if="!$v.repassword.required">
            {{ $t("IsRequired") }}
          </div>
          <div class="error" v-if="!$v.repassword.sameAsPassword">
            {{ $t("PasswordsDoNotMatch") }}
          </div>
        </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 mt-3">
      <a
        v-if="!isMajlesBuild()"
        @click.prevent="$emit('set-component', { name: 'login-phone' })"
        class="m-sign-up__text text__gray"
        href="#loginphone"
        >{{ $t("LoginWithMobile") }}
      </a>
      <button
        class="btn"
        :disabled="loading"
        v-on:click="authBase('doregister', 'modal')"
      >
        <the-button-loading v-if="loading"></the-button-loading>
        {{ $t("Register") }}
      </button>
    </div>
  </div>
</template>

<script>
import authMixin from "~/mixins/authMixin";
import {
  required,
  minLength,
  maxLength,
  between,
  sameAs,
} 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: {
    name: {
      required,
      minLength: minLength(1),
    },
    last_name: {
      required,
      minLength: minLength(1),
    },
    password: {
      required,
      minLength: minLength(6),
    },
    repassword: {
      required,
      sameAsPassword: sameAs("password"),
    },
    username: {
      required,
    },
    email: {
      required,
      email: true,
    },
    captcha: {},
  },
  data() {
    return {
      name: null,
      last_name: null,
      username: null,
      email: null,
      password: null,
      repassword: null,
      captcha: undefined,
      captchaImage:""
    };
  },
};
</script>