Skip to main content

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.

QG21


  • 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.

QG21


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>