261 lines
7.2 KiB
Vue
261 lines
7.2 KiB
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/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>
|