Skip to main content

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.

QG21


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>

Was this section helpful?