Change Password

Explains how to implement a change-password page.

Data Identifier

{
  "dataID": "CHANGE_PASSWORD"
}
KeyDescription
dataIDMember authentication identifier

HTML

<form id="frm_password">
    <input type="hidden" name="return_url" id="return_url" value="/member/mypage">
    <label for="password">Current password</label>
    <input type="password" data-validation="password-8-32" id="password" name="password">
    <label for="password">New password</label>
    <input type="password" data-validation="password-8-32" id="new_password" name="new_password">
    <label for="password_re">Confirm new password</label>
    <input type="password" data-validation="password-8-32" id="new_password_re" name="new_password_re">
    <button type="submit" class="mx-1 btn border-hbnc-primary bg-hanbnc-primary-3 border border-3 px-4">Save</button>
</form>
  • return_url
    <input type="hidden" name="return_url" id="return_url" value="/member/mypage">

    Page to move to after the password change is completed

  • password
    <input type="password" data-validation="password-8-32" id="password" name="password">

    Current password

  • new_password
    <input type="password" data-validation="password-8-32" id="new_password" name="new_password">

    New password

  • new_password_re
    <input type="password" data-validation="password-8-32" id="new_password_re" name="new_password_re">

    Confirm new password

Response Result

  • On successful authentication, the password is changed and the user is redirected to return_url.

Example

Please check your password.
Please check your password.
8 to 32 characters combining letters, numbers, and special characters
Please check your password.
Cancel 
<form id="frm_password" class="col-12 px-5 mt-3">
    <input type="hidden" name="return_url" id="return_url" value="/member/mypage"/>
    <div class="row g-3">
        <div class="col-12 col-lg-6 offset-lg-3">
            <div class="form-group has-validation">
                <label for="password" class="form-label">Current password</label>
                <input type="password" class="form-control" data-validation="password-8-32" id="password" name="password" placeholder="Enter your password">
                <div class="invalid-feedback">
                    Please check your password.
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-6 offset-lg-3">
            <div class="form-group has-validation">
                <label for="password" class="form-label">New password</label>
                <input type="password" class="form-control" data-validation="password-8-32" id="new_password" name="new_password" placeholder="Enter your password">
                <div class="invalid-feedback">
                    Please check your password.
                </div>
                <small class="form-text">8 to 32 characters combining letters, numbers, and special characters</small>
            </div>
        </div>
        <div class="col-12 col-lg-6 offset-lg-3">
            <div class="form-group has-validation">
                <label for="password_re" class="form-label">Confirm new password</label>
                <input type="password" class="form-control" data-validation="password-8-32" id="new_password_re" name="new_password_re" placeholder="Enter your password again">
                <div class="invalid-feedback">
                    Please check your password.
                </div>
            </div>
        </div>
        <div class="my-3 text-center">
            <button type="submit" class="mx-1 btn border-hbnc-primary bg-hanbnc-primary-3 border border-3 px-4">Save</button>
            <a href="/" class="mx-1 btn border-gray-default-op-50 bg-gray-light border border-3 px-4">Cancel</a>
        </div>
    </div>
</form>

Related Links