<template>
  <div class="sign-up">
    <div class="sign-up__text text__center o-signupp-differ-mb2 text__blue">
      لینک احراز هویت به پست الکترونیک شما ارسال شد لینک را کلیک کنید تا هویت
      شما تأیید شود
    </div>
    <div class="sign-up__text text__center">
      یک نام نمایشی برای خود انتخاب کنید و وارد شوید
    </div>
    <div class="sign-up__form">
      <form action="">
        <!--Add  error-input to its class for error-->
        <div class="sign-up__form-row sign-up__simple-input ">
          <div
            class="form-group "
            :class="{ 'form-group--error': $v.code.$error }"
          >
            <input
              class="form-control elem__placeholder-gray "
              type="text"
              name=""
              id=""
              v-model.trim="$v.code.$model"
              placeholder="نام و نام خانوادگی"
            />
          </div>
          <div v-if="submitStatus === 'ERROR'">
            <div class="error" v-if="!$v.code.required">
              {{ $t("IsRequired") }}
            </div>
          </div>
        </div>
        <div class="sign-up__btn-container flex__center">
          <button class="mr-0 ml-0">ورود</button>
        </div>
      </form>
    </div>
  </div>
</template>

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

export default {
  validations: {
    code: {
      required,
      minLength: minLength(5),
    },
  },
  data() {
    return {
      code: "",
    };
  },
};
</script>
