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.

Set Password

The Set Password allows a user to set a new password for an already registered user. After verifying the Forgot password link sent to the user email with the code user can set a new password.

Example:

The below example will render a Set password.

theme/templates/pages/set-password.vue

                <div className="set-wrapper">
                    <div className="set-content-title">set Password?</div>
                    <div
                        :className="{
                            'set-input-group': true,
                            'error-input': formData.password.showError,
                        }"
                    >
                        <label className="set-input-title" for="newPassword"
                            >New Password</label
                        ><input
                            type="password"
                            name="newPassword"
                            required=""
                            v-model="formData.password.value"
                            @input="validatePassword(), isShowSetButtonCheck()"
                        />
                        <p className="error-text">
                            {{ formData.password.errMessage }}
                        </p>
                    </div>

                    <div
                        :className="{
                            'set-input-group': true,
                            'error-input': formData.confirmPassword.showError,
                        }"
                    >
                        <label className="set-input-title" for="confirmNewPassword"
                            >Confirm New Password</label
                        ><input
                            type="password"
                            name="confirmNewPassword"
                            required=""
                            @input="
                                validateConfirmPassword(),
                                    isShowSetButtonCheck()
                            "
                            v-model="formData.confirmPassword.value"
                        />
                        <p className="error-text">
                            {{ formData.confirmPassword.errMessage }}
                        </p>
                    </div>
                    <div className="login-alert alert-error" v-if="isInValidForm">
                        <span className="alert-message">{{
                            inValidFormErrorMsg
                        }}</span>
                    </div>

                    <button
                        className="set-submit-btn secondary-btn"
                        type="submit"
                        :disabled="!isShowSetButton"
                        @click="setPasswordBtnClick(accountData)"
                    >
                        set Password
                    </button>
                </div>