Aurora Modules

비밀번호 변경

비밀번호 변경 페이지에서 노출되는 비밀번호 변경 폼 폼 모듈입니다.

URL: /pages/sign-in/change-password.html

모듈명: password-change-form원본소스

비밀번호 변경 폼 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
currentPassword	Password	-	현재 비밀번호 (아래 타입 참조)
newPassword	Password	-	새 비밀번호 (아래 타입 참조)
newPasswordConfirm	Password	-	새 비밀번호 확인 (아래 타입 참조)

Password 타입

속성명	타입	기본값	설명
value	string	-	입력한 비밀번호
message	string	-	에러 메세지

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<div class="l-content expired-password-change-form">
    <password-change-form>
        <div>
            <div class="expired-password-change-form__input-wrapper">
                <div slot="currentPassword" class="expired-password-change-form__input-item">
                    <span class="input-field input-field--md {{#unless currentPassword.isValid}}is-error{{/unless}}">
                        <input
                            placeholder="현재 비밀번호"
                            autocomplete="new-password"
                            type="password"
                            maxlength="20"
                            value="{{currentPassword.value}}"
                            shopby-focus-field="currentPassword"
                            shopby-on:change="CHANGE_CURRENT_PASSWORD"
                            shopby-on:input="CURRENT_PASSWORD_NO_SPACE"
                        />
                    </span>
                    <p class="description invalid-alert">{{currentPassword.message}}</p>
                </div>
                <div slot="newPassword" class="expired-password-change-form__input-item">
                    <span class="input-field input-field--md {{#unless newPassword.isValid}}is-error{{/unless}}">
                        <input
                            placeholder="새 비밀번호"
                            type="password"
                            autocomplete="new-password"
                            maxlength="20"
                            value="{{newPassword.value}}"
                            shopby-focus-field="newPassword"
                            shopby-on:change="CHANGE_NEW_PASSWORD"
                            shopby-on:input="NEW_PASSWORD_NO_SPACE"
                        />
                    </span>
                    <p class="description invalid-alert">{{newPassword.message}}</p>
                </div>
                <div slot="newPasswordConfirm" class="expired-password-change-form__input-item">
                    <span class="input-field input-field--md {{#unless newPasswordConfirm.isValid}}is-error{{/unless}}">
                        <input
                            placeholder="새 비밀번호 확인"
                            maxlength="20"
                            autocomplete="new-password"
                            type="password"
                            shopby-focus-field="newPasswordConfirm"
                            value="{{newPasswordConfirm.value}}"
                            shopby-on:change="CHANGE_NEW_PASSWORD_CONFIRM"
                            shopby-on:input="NEW_PASSWORD_CONFIRM_NO_SPACE"
                        />
                    </span>
                    <p class="description invalid-alert">{{newPasswordConfirm.message}}</p>
                </div>

                <div class="expired-password-change-form__button-wrapper">
                    <button type="button" class="btn btn--line-dark btn--md" shopby-action="CHANGE_NEXT_TIME">다음에 변경</button>
                    <button type="button" class="btn btn--fill-point btn--md" shopby-action="SUBMIT">비밀번호 변경</button>
                </div>
            </div>
        </div>
    </password-change-form>
</div>

<div class="l-content expired-password-change-form">
    <password-change-form>
        <div>
            <div class="expired-password-change-form__input-wrapper">
                <div slot="currentPassword" class="expired-password-change-form__input-item">
                    <span class="input-field input-field--md {{#unless currentPassword.isValid}}is-error{{/unless}}">
                        <input
                            placeholder="현재 비밀번호"
                            type="password"
                            autocomplete="new-password"
                            maxlength="20"
                            value="{{currentPassword.value}}"
                            shopby-focus-field="currentPassword"
                            shopby-on:change="CHANGE_CURRENT_PASSWORD"
                            shopby-on:input="CURRENT_PASSWORD_NO_SPACE"
                        />
                    </span>
                    <p class="description invalid-alert">{{currentPassword.message}}</p>
                </div>
                <div slot="newPassword" class="expired-password-change-form__input-item">
                    <span class="input-field input-field--md {{#unless newPassword.isValid}}is-error{{/unless}}">
                        <input
                            placeholder="새 비밀번호"
                            autocomplete="new-password"
                            type="password"
                            maxlength="20"
                            value="{{newPassword.value}}"
                            shopby-focus-field="newPassword"
                            shopby-on:change="CHANGE_NEW_PASSWORD"
                            shopby-on:input="NEW_PASSWORD_NO_SPACE"
                        />
                    </span>
                    <p class="description invalid-alert">{{newPassword.message}}</p>
                </div>
                <div slot="newPasswordConfirm" class="expired-password-change-form__input-item">
                    <span class="input-field input-field--md {{#unless newPasswordConfirm.isValid}}is-error{{/unless}}">
                        <input
                            placeholder="새 비밀번호 확인"
                            maxlength="20"
                            autocomplete="new-password"
                            type="password"
                            shopby-focus-field="newPasswordConfirm"
                            value="{{newPasswordConfirm.value}}"
                            shopby-on:change="CHANGE_NEW_PASSWORD_CONFIRM"
                            shopby-on:input="NEW_PASSWORD_CONFIRM_NO_SPACE"
                        />
                    </span>
                    <p class="description invalid-alert">{{newPasswordConfirm.message}}</p>
                </div>

                <div class="expired-password-change-form__button-wrapper">
                    <button type="button" class="btn btn--line-dark btn--lg" shopby-action="CHANGE_NEXT_TIME">다음에 변경</button>
                    <button type="button" class="btn btn--fill-point btn--lg" shopby-action="SUBMIT">비밀번호 변경</button>
                </div>
            </div>
        </div>
    </password-change-form>
</div>

/* 여기에 스타일 코드를 작성해주세요. */