Register
You are reading an outdated document
Get the latest developer guides on Fynd Partners Help
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.
<div v-if="!showVerifyBoth" class="register-form-wrapper">
<div class="register-name-input">
<div
:class="{
'input-group': true,
'error-input': formData.first_name.showError
}"
>
<label class="input-title" for="firstName"
>First Name*</label
><input
type="text"
name="firstName"
required=""
v-model="formData.first_name.value"
@input="validateFname"
/>
</div>
<div
:class="{
'input-group': true,
'error-input': formData.last_name.showError
}"
>
<label class="input-title" for="lastName"
>Last Name*</label
><input
type="text"
name="lastName"
required=""
v-model="formData.last_name.value"
@input="validateLname"
/>
</div>
</div>
<div class="gender-radio-container">
<label class="radio-container"
>Male<input
type="radio"
name="gender"
value="male"
checked
v-model="formData.gender.value"/><span
class="checkmark"
></span
></label>
<label class="radio-container"
>Female<input
type="radio"
name="gender"
value="female"
v-model="formData.gender.value"/><span
class="checkmark"
></span></label
><label class="radio-container"
>Other<input
type="radio"
name="gender"
value="unisex"
v-model="formData.gender.value"/><span
class="checkmark"
></span
></label>
</div>
<div
:class="{
'resgister-email': true,
'error-input': formData.email.showError
}"
v-if="isEmail"
>
<label class="input-title" for="email"
>Email {{ isEmailRequired }}</label
><input
type="text"
name="email"
required=""
v-model="formData.email.value"
@input="validateEmail"
/>
<p class="error-text">
{{ formData.email.errorMessage }}
</p>
</div>
<div class="register-mobile-input">
<mobile-input @change="onChange" ref="mobileInput" />
</div>
<div
:class="{
'resgister-password-input': true,
'error-input': formData.password.showError
}"
>
<label class="input-title" for="password"
>Password*</label
><input
type="password"
name="password"
required=""
v-model="formData.password.value"
@input="validatePassword"
/>
<p class="error-text">
{{ formData.password.errorMessage }}
</p>
</div>
<div
:class="{
'register-confirm-password-input': true,
'error-input': formData.confirmPassword.showError
}"
>
<label class="input-title" for="confirmPassword"
>Confirm Password*</label
><input
type="password"
name="confirmPassword"
required=""
v-model="formData.confirmPassword.value"
@input="validateConfirmPassword"
/>
<p class="error-text">
{{ formData.confirmPassword.errorMessage }}
</p>
</div>
<div class="login-alert alert-error" v-if="isInValidForm">
<span class="alert-message">{{
inValidFormErrorMsg
}}</span>
</div>
<button
class="register-btn secondary-btn"
@click="registerButtonClick(accountData)"
type="submit"
>
Register
</button>
</div>