完成重设密码界面
parent
9b38d27da4
commit
886b5d3d1a
@ -0,0 +1,39 @@
|
||||
<#import "template.ftl" as layout>
|
||||
<@layout.registrationLayout displayInfo=true displayMessage=!messagesPerField.existsError('username'); section>
|
||||
<#if section = "header">
|
||||
${msg("emailForgotTitle")}
|
||||
<#elseif section = "form">
|
||||
<form id="kc-reset-password-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
|
||||
<div class="${properties.kcFormGroupClass!}">
|
||||
<div class="${properties.kcLabelWrapperClass!}">
|
||||
<label for="username" class="${properties.kcLabelClass!}"><#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>
|
||||
</div>
|
||||
<div class="${properties.kcInputWrapperClass!}">
|
||||
<input type="text" id="username" name="username" class="${properties.kcInputClass!}" autofocus value="${(auth.attemptedUsername!'')}" aria-invalid="<#if messagesPerField.existsError('username')>true</#if>" dir="ltr"/>
|
||||
<#if messagesPerField.existsError('username')>
|
||||
<span id="input-error-username" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
|
||||
${kcSanitize(messagesPerField.get('username'))?no_esc}
|
||||
</span>
|
||||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
<div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
|
||||
<div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
|
||||
<div class="${properties.kcFormOptionsWrapperClass!}">
|
||||
<span><a href="${url.loginUrl}">${kcSanitize(msg("backToLogin"))?no_esc}</a></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
|
||||
<input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<#elseif section = "info" >
|
||||
<#if realm.duplicateEmailsAllowed>
|
||||
${msg("emailInstructionUsername")}
|
||||
<#else>
|
||||
${msg("emailInstruction")}
|
||||
</#if>
|
||||
</#if>
|
||||
</@layout.registrationLayout>
|
||||
@ -0,0 +1,107 @@
|
||||
<#import "template.ftl" as layout>
|
||||
<#import "field.ftl" as field>
|
||||
<#import "tabs.ftl" as tabs>
|
||||
<#import "buttons.ftl" as buttons>
|
||||
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('username'); section>
|
||||
<#if section = "header">
|
||||
${msg("emailForgotTitle")}
|
||||
<#elseif section = "form">
|
||||
<script type="text/javascript">
|
||||
// Add styles
|
||||
loadCSS('${url.resourcesPath}/css/lib/choices.css');
|
||||
loadCSS('${url.resourcesPath}/css/component/smsSenderForm.css');
|
||||
</script>
|
||||
<form id="kc-reset-password-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
|
||||
<input type="hidden" id="validation-type" name="validationType" value="${form.validationType!'email'}"/>
|
||||
|
||||
<@tabs.tabsBar panelId="reset-password-panel" filled=true pill=true activedId=form.validationType!'email'>
|
||||
<@tabs.tabButton tabId="email" panelId="reset-password-panel" label="resetPasswordByEmail" />
|
||||
<@tabs.tabButton tabId="phone" panelId="reset-password-panel" label="resetPasswordByPhone" />
|
||||
</@tabs.tabsBar>
|
||||
|
||||
<@tabs.tabPanel panelId="reset-password-panel">
|
||||
<@tabs.tabContent tabId="email" active=true>
|
||||
<#assign label>
|
||||
<#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if>
|
||||
</#assign>
|
||||
<@field.input name="username" label=label value=auth.attemptedUsername!form.username!'' autofocus=true />
|
||||
|
||||
<span class="${properties.kcLoginMainFooterHelperText!}">
|
||||
<#if realm.duplicateEmailsAllowed>
|
||||
${msg("emailInstructionUsername")}
|
||||
<#else>
|
||||
${msg("emailInstruction")}
|
||||
</#if>
|
||||
</span>
|
||||
</@tabs.tabContent>
|
||||
<@tabs.tabContent tabId="phone">
|
||||
<@field.group name="phoneNumber" label=msg("phoneNumber") error=kcSanitize(messagesPerField.get('phoneNumber'))?no_esc required=false>
|
||||
<div class="${properties.kcInputGroup!}">
|
||||
<div class="${properties.kcInputGroupItemClass!}">
|
||||
<div class="${properties.kcInputClass!} areaCodeInputContainer">
|
||||
<select tabindex="1" class="areaCodeInput" name="areaCode" data-value="${(form.areaCode!'')}">
|
||||
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="${properties.kcInputGroupItemClass!} ${properties.kcFill}">
|
||||
<div class="${properties.kcInputClass!} <#if messagesPerField.get('phoneNumber')?has_content>${properties.kcError}</#if>">
|
||||
<input tabindex="2" class="phoneNumberInput" name="phoneNumber" value="${(form.phoneNumber!'')}" type="tel" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</@field.group>
|
||||
|
||||
<@field.group name="smsCode" label=msg("smsVerificationCode") error=kcSanitize(messagesPerField.get('smsCode'))?no_esc required=false>
|
||||
<div class="${properties.kcInputGroup!}">
|
||||
<span class="${properties.kcInputGroupItemClass!} ${properties.kcFill}">
|
||||
<div class="${properties.kcInputClass!}">
|
||||
<input tabindex="2" type="text" maxlength="6" class="smsCodeInput" name="smsCode" value="${(form.smsCode!'')}" nospin"/>
|
||||
</div>
|
||||
</span>
|
||||
<span class="${properties.kcInputGroupItemClass!}">
|
||||
<button class="${properties.kcButtonPrimaryClass!} btnSendSmsCode" type="button">
|
||||
${msg("sendSmsBtn")}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</@field.group>
|
||||
</@tabs.tabContent>
|
||||
</@tabs.tabPanel>
|
||||
|
||||
<@buttons.actionGroup>
|
||||
<@buttons.button id="kc-form-buttons" label="doSubmit" class=["kcButtonPrimaryClass", "kcButtonBlockClass"]/>
|
||||
<@buttons.buttonLink href=url.loginUrl label="backToLogin" class=["kcButtonSecondaryClass", "kcButtonBlockClass"]/>
|
||||
</@buttons.actionGroup>
|
||||
|
||||
</form>
|
||||
|
||||
<script type="application/json" data-configs>
|
||||
{
|
||||
"realm": "${realm.name!''}",
|
||||
"realmUrl": "/realms/${realm.name!''}"
|
||||
}
|
||||
</script>
|
||||
<script type="application/json" data-messages>
|
||||
{
|
||||
"geetestCaptchaLangCode": "${msg("geetestCaptchaLangCode")}",
|
||||
"error": "${msg("sendSmsError")}",
|
||||
"captchaLoadError": "${msg("captchaLoadError")}",
|
||||
"captchaCodeApiError": "${msg("captchaCodeApiError")}",
|
||||
"countryNameLangCode": "${msg("phoneAreaCountryNameLangCode")}",
|
||||
"sending": "${msg("smsSending")}",
|
||||
"sendVerificationCode": "${msg("sendSmsBtn")}",
|
||||
"resendVerificationCode": "${msg("resendSmsBtn")}",
|
||||
"second": "${msg("second")}",
|
||||
"phoneNumberIsEmpty": "${msg("errorPhoneNumberIsEmpty")}",
|
||||
"sendSmsCodeError": "${msg("errorSendSmsCodeInternalError")}",
|
||||
"areaNotSupported": "${msg("errorPhoneAreaNotSupported")}",
|
||||
"captchaNotCompleted": "${msg("errorCaptchaRequired")}",
|
||||
"cannotGetConfig": "${msg("errorCannotGetConfig")}",
|
||||
"userNotExists": "${msg("errorPhoneUserNotFound")}",
|
||||
"sendVerificationError": "${msg("errorSendVerificationError")}"
|
||||
}
|
||||
</script>
|
||||
<script type="module" src="${url.resourcesPath}/js/resetPasswordPhoneOrEmail.js"></script>
|
||||
</#if>
|
||||
</@layout.registrationLayout>
|
||||
@ -0,0 +1,20 @@
|
||||
import { SmsSenderForm } from './component/smsSenderForm.js';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Initialize SMS sender form for password reset
|
||||
let $form = document.querySelector('#kc-reset-password-form');
|
||||
window._smsSenderForm = new SmsSenderForm("reset-credential", $form);
|
||||
|
||||
// Handle tab switching to set the validation type
|
||||
let tabsBar = document.querySelector('.pf-c-tabsbar');
|
||||
if (tabsBar) {
|
||||
tabsBar.addEventListener('pf.tab.activate', function(event) {
|
||||
console.log(event);
|
||||
const tabId = event.detail.tabId;
|
||||
let validationTypeInput = document.querySelector('#validation-type');
|
||||
validationTypeInput.value = tabId; // 'email' or 'phone'
|
||||
});
|
||||
} else {
|
||||
console.warn("Tabs bar not found for reset password form.");
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue