Register
The Register page allows a user to register by information provided by the user. After Registering user has to verify the Mobile and Email ( if Email is required and hard ) OTP sent to provided mobile and Email
The Register page is configured from the platform whether required or not. You can also configure the Email id whether it's required in the Register form. If required you can set it to either Hard or Soft.
- Hard:- If the Email id is set to hard it's compulsory for the user to fill it during registration. The user has to verify the Email id by verifying the OTP sent to the respective Email id.
- Soft:- If the Email id is set to soft it's optional for the user to fill it during registration. The user can either verify the Email id by clicking the link sent to your Email id or cancel it for the next five days.
Example:
The below example will render a Register page.
theme/templates/pages/register.vue
<div v-if="!showVerifyBoth" className="register-form-wrapper">
<div className="register-name-input">
<div
:className="{
'input-group': true,
'error-input': formData.first_name.showError
}"
>
<label className="input-title" for="firstName"
>First Name*</label
><input
type="text"
name="firstName"
required=""
v-model="formData.first_name.value"
@input="validateFname"
/>
</div>
<div
:className="{
'input-group': true,
'error-input': formData.last_name.showError
}"
>
<label className="input-title" for="lastName"
>Last Name*</label
><input
type="text"
name="lastName"
required=""
v-model="formData.last_name.value"
@input="validateLname"
/>
</div>
</div>
<div className="gender-radio-container">
<label className="radio-container"
>Male<input
type="radio"
name="gender"
value="male"
checked
v-model="formData.gender.value"/><span
className="checkmark"
></span
></label>
<label className="radio-container"
>Female<input
type="radio"
name="gender"
value="female"
v-model="formData.gender.value"/><span
className="checkmark"
></span></label
><label className="radio-container"
>Other<input
type="radio"
name="gender"
value="unisex"
v-model="formData.gender.value"/><span
className="checkmark"
></span
></label>
</div>
<div
:className="{
'resgister-email': true,
'error-input': formData.email.showError
}"
v-if="isEmail"
>
<label className="input-title" for="email"
>Email {{ isEmailRequired }}</label
><input
type="text"
name="email"
required=""
v-model="formData.email.value"
@input="validateEmail"
/>
<p className="error-text">
{{ formData.email.errorMessage }}
</p>
</div>
<div className="register-mobile-input">
<mobile-input @change="onChange" ref="mobileInput" />
</div>
<div
:className="{
'resgister-password-input': true,
'error-input': formData.password.showError
}"
>
<label className="input-title" for="password"
>Password*</label
><input
type="password"
name="password"
required=""
v-model="formData.password.value"
@input="validatePassword"
/>
<p className="error-text">
{{ formData.password.errorMessage }}
</p>
</div>
<div
:className="{
'register-confirm-password-input': true,
'error-input': formData.confirmPassword.showError
}"
>
<label className="input-title" for="confirmPassword"
>Confirm Password*</label
><input
type="password"
name="confirmPassword"
required=""
v-model="formData.confirmPassword.value"
@input="validateConfirmPassword"
/>
<p className="error-text">
{{ formData.confirmPassword.errorMessage }}
</p>
</div>
<div className="login-alert alert-error" v-if="isInValidForm">
<span className="alert-message">{{
inValidFormErrorMsg
}}</span>
</div>
<button
className="register-btn secondary-btn"
@click="registerButtonClick(accountData)"
type="submit"
>
Register
</button>
</div>