Register

Deprecation Notice

Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.

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>