Forgot Password

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 Forgot Password allows a user to send a set password link to a registered email.

The Forgot password is configured from the platform according to the need.

Example:

theme/templates/pages/forgot-password.vue

The below example will render a Forgot password.

               <div>
                    <div
                        className="forgot-password-wrapper"
                        v-if="!isSendResetPasswordSuccess"
                    >
                        <div className="forgot-password-content-title">
                            Forgot Password?
                        </div>
                        <div className="forgot-password-alert alert-success">
                            <span className="alert-message"
                                >Enter your registered email address</span
                            >
                            <div
                                @click="
                                    accountData.openLogin({ redirect: false })
                                "
                                className="alert-link"
                            >
                                Cancel Reset
                            </div>
                        </div>
                        <div
                            :className="{
                                'forgot-password-input-group': true,
                                'error-input': isInValidEmail
                            }"
                        >
                            <label
                                className="forgot-password-input-title"
                                for="email"
                                >Email Address</label
                            ><input
                                type="text"
                                name="email"
                                required=""
                                v-model="resetEmail"
                                @input="validateEmail"
                            />
                            <span className="error-text" v-if="isInValidEmail"
                                >Please enter valid email address</span
                            >
                        </div>
                        <div
                            className="forgot-password-alert alert-error"
                            v-if="isEmailNotExist"
                        >
                            <span className="alert-message">{{
                                emailErrorMsg
                            }}</span>
                        </div>
                        <button
                            className="forgot-password-submit-btn secondary-btn"
                            :disabled="!isShowResetButton"
                            @click="forgotPasswordSubmitBtnClick(accountData)"
                            type="submit"
                        >
                            Send Password Reset Link
                        </button>
                    </div>
                    <div className="reset-success-msg" v-else>
                        <p>
                            Reset Link has been sent to your primary email
                            address.
                        </p>
                    </div>
                </div>