kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(profile): align account modal UI

Browse Source
This commit is contained in:
kate522
2026-10-06 01:46:48 +08:00
parent 248912f610
commit ce429e1caf
3 changed files with 57 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/routes/user-center/settings.css
+37 -8
View File
@@ -613,9 +613,23 @@
max-height: calc(100dvh - 20px);
overflow: auto;
border-radius: var(--main-radius, 8px);
box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
.aksrt-modal-runtime.aksrt-user-settings-modal.aksrt-modal-runtime--bottom .aksrt-modal-runtime__dialog {
width: 400px;
max-width: calc(100vw - 20px);
max-height: calc(100dvh - 20px - env(safe-area-inset-bottom));
margin: 0 auto calc(10px + env(safe-area-inset-bottom));
border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0;
box-shadow: 0 -10px 50px rgba(0, 0, 0, .15);
}
.aksrt-user-settings-modal .aksrt-modal-runtime__content { padding: 0; }
.aksrt-modal-runtime--bottom.aksrt-user-settings-modal .aksrt-settings-modal {
padding-bottom: env(safe-area-inset-bottom);
border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0;
}
.aksrt-settings-modal {
position: relative;
@@ -637,11 +651,19 @@
}
.aksrt-settings-modal .modal-colorful-header > .close {
position: absolute;
top: 10px;
right: 10px;
z-index: 9;
width: 30px;
height: 30px;
padding: 0;
border: 0;
background: transparent;
color: var(--this-color);
font-size: 18px;
line-height: 30px;
opacity: .6;
cursor: pointer;
}
@@ -649,14 +671,14 @@
position: relative;
z-index: 0;
margin-top: 120px;
padding: 18px 15px;
padding: 15px;
}
.aksrt-settings-modal__pane {
position: relative;
z-index: 0;
margin-top: 120px;
padding: 18px 15px;
padding: 15px;
}
.aksrt-settings-modal__pane form,
@@ -669,27 +691,34 @@
position: relative;
z-index: 0;
margin-top: 120px;
padding: 18px 15px 0;
padding: 10px;
}
.aksrt-settings-modal .account-step-panels { position: relative; z-index: 0; }
.aksrt-settings-modal .account-step { display: none; padding: 0 15px 18px; }
.aksrt-settings-modal .account-step.is-active { display: block; }
.aksrt-settings-modal .account-step > p { margin: 0 0 12px; }
.aksrt-settings-modal .account-step > p { margin: 0 0 20px; }
.aksrt-settings-modal .account-recovery-toggle { border: 0; background: transparent; cursor: pointer; }
.aksrt-settings-modal__fields { padding: 0 2px; }
.aksrt-settings-modal__fields { padding: 0; }
.aksrt-settings-modal .modal-line-field--code .line-form-input { padding-right: 7em; }
.aksrt-settings-modal .toggle-pwd { position: absolute; right: 7px; bottom: 4px; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--muted-2-color, #999); cursor: pointer; }
.aksrt-settings-modal .toggle-pwd:hover { color: var(--color-ink, #333); }
.aksrt-settings-modal .code-send-btn { min-width: 112px; padding: 6px 10px; white-space: nowrap; }
.aksrt-settings-modal .code-send-btn { white-space: nowrap; }
.aksrt-settings-modal .code-send-btn.is-counting { pointer-events: none; opacity: .6; }
.aksrt-settings-modal .aksrt-captcha-wrap { margin: 12px 0 8px; }
@media (max-width: 768px) {
@media (max-width: 640px) {
.aksrt-modal-runtime.aksrt-user-settings-modal.aksrt-modal-runtime--bottom .aksrt-modal-runtime__dialog {
width: 100%;
max-width: 100%;
max-height: calc(100dvh - env(safe-area-inset-bottom));
margin: 0 0 -1px;
border-radius: 16px 16px 0 0;
}
.aksrt-modal-runtime--bottom.aksrt-user-settings-modal .aksrt-settings-modal {
border-radius: 16px 16px 0 0;
}
.aksrt-settings-modal .code-send-btn { min-width: 104px; }
}
assets/js/routes/user-center.js
+1 -3
View File
@@ -721,7 +721,7 @@
runtime.open({
html: template.innerHTML,
kind: 'account-settings',
className: 'aksrt-user-settings-modal modal-mini',
className: 'aksrt-user-settings-modal modal-mini full-sm',
mobileBottom: true,
onContent: function (_, session) {
var shell = session && session.shell;
@@ -729,8 +729,6 @@
var dialog = shell.querySelector('[data-account-dialog]');
var title = dialog && dialog.querySelector('[data-account-password-title], .modal-colorful-header .text-center > div:last-child');
if (title && title.textContent.trim()) shell.setAttribute('aria-label', title.textContent.trim());
var firstInput = shell.querySelector('input:not([type="hidden"]), textarea, select');
if (firstInput) firstInput.focus();
bindDialog(shell);
},
});
inc/helpers/user-center-renderers/settings-account.php
+16 -11
View File
@@ -24,6 +24,7 @@ $can_recover_password = $sign_in_available && ($reset_channel === 'email_phone'
: ($reset_channel === 'phone' ? $account_phone !== '' : $account_email !== ''));
$recovery_target = $reset_channel === 'phone' ? $account_phone : ($account_email !== '' ? $account_email : $account_phone);
$recovery_channel = $reset_channel === 'email_phone' ? '' : $reset_channel;
$account_close_icon = function_exists('aksrt_icon_markup') ? aksrt_icon_markup('zibsvg-close', 'ic-close') : '<i class="fa fas fa-times" aria-hidden="true"></i>';
$render_row = static function (string $icon, string $title, string $value, string $action, string $modal, string $icon_tone, string $action_tone, bool $interactive = true): void {
?>
@@ -43,9 +44,11 @@ $render_row = static function (string $icon, string $title, string $value, strin
$render_email_form = static function () use ($user_settings, $agreement): void {
?>
<form id="email-new-form">
<div class="mb20">
<div class="relative line-form mb10 modal-line-field"><input type="email" id="email-new" name="new_email" class="line-form-input" required><div class="scale-placeholder"><?php esc_html_e('请输入邮箱', 'aksrt'); ?></div><i class="line-form-line"></i></div>
<?php if (!empty($user_settings['email_set_captch'])) : ?><div class="relative line-form mb10 modal-line-field"><input type="text" id="email-code" name="code" class="line-form-input" maxlength="6" inputmode="numeric" required><div class="scale-placeholder"><?php esc_html_e('验证码', 'aksrt'); ?></div><button type="button" class="but c-blue code-send-btn account-code-send" data-account-code-scene="change_email"><?php esc_html_e('发送验证码', 'aksrt'); ?></button><i class="line-form-line"></i></div><?php endif; ?>
<?php if (function_exists('aksrt_render_captcha')) : ?><?php aksrt_render_captcha('change_email'); ?><?php endif; ?>
<?php if (!empty($user_settings['email_set_captch'])) : ?><div class="relative line-form mb10 modal-line-field modal-line-field--code"><input type="text" id="email-code" name="code" class="line-form-input" maxlength="6" inputmode="numeric" autocomplete="one-time-code" required><div class="scale-placeholder"><?php esc_html_e('验证码', 'aksrt'); ?></div><span class="yztx abs-right"><button type="button" class="but c-blue code-send-btn account-code-send" data-account-code-scene="change_email"><?php esc_html_e('发送验证码', 'aksrt'); ?></button></span><i class="line-form-line"></i></div><?php endif; ?>
</div>
<?php if (!empty($agreement['enabled'])) : ?><label class="form-checkbox muted-color mb20"><input type="checkbox" name="agree_terms" value="1"<?php echo !empty($agreement['required']) ? ' required' : ' checked'; ?>> <?php echo wp_kses_post($agreement['label_html']); ?></label><?php endif; ?>
<button type="submit" class="but jb-blue padding-lg btn-block"><i class="fa fas fa-check" aria-hidden="true"></i> <?php esc_html_e('确认提交', 'aksrt'); ?></button>
</form>
@@ -55,9 +58,11 @@ $render_email_form = static function () use ($user_settings, $agreement): void {
$render_phone_form = static function () use ($agreement): void {
?>
<form id="aksrt-bind-phone-form">
<div class="relative line-form mb10 modal-line-field"><input type="tel" id="bind-phone-input" name="phone" inputmode="tel" autocomplete="tel" required><div class="scale-placeholder"><?php esc_html_e('手机号', 'aksrt'); ?></div><i class="line-form-line"></i></div>
<div class="relative line-form mb10 modal-line-field"><input type="text" id="bind-phone-code" name="code" class="line-form-input" maxlength="6" inputmode="numeric" autocomplete="one-time-code" required><div class="scale-placeholder"><?php esc_html_e('验证码', 'aksrt'); ?></div><button type="button" class="but c-blue code-send-btn" data-aksrt-sms-trigger data-aksrt-sms-scene="bind_new_phone"><?php esc_html_e('发送验证码', 'aksrt'); ?></button><i class="line-form-line"></i></div>
<div class="mb20">
<div class="relative line-form mb10 modal-line-field"><input type="tel" id="bind-phone-input" name="phone" class="line-form-input" inputmode="tel" autocomplete="tel" required><div class="scale-placeholder"><?php esc_html_e('手机号', 'aksrt'); ?></div><i class="line-form-line"></i></div>
<?php if (function_exists('aksrt_render_captcha')) : ?><?php aksrt_render_captcha('bind_phone'); ?><?php endif; ?>
<div class="relative line-form mb10 modal-line-field modal-line-field--code"><input type="text" id="bind-phone-code" name="code" class="line-form-input" maxlength="6" inputmode="numeric" autocomplete="one-time-code" required><div class="scale-placeholder"><?php esc_html_e('验证码', 'aksrt'); ?></div><span class="yztx abs-right"><button type="button" class="but c-blue code-send-btn" data-aksrt-sms-trigger data-aksrt-sms-scene="bind_new_phone"><?php esc_html_e('发送验证码', 'aksrt'); ?></button></span><i class="line-form-line"></i></div>
</div>
<?php if (!empty($agreement['enabled'])) : ?><label class="form-checkbox muted-color mb20"><input type="checkbox" name="agree_terms" value="1"<?php echo !empty($agreement['required']) ? ' required' : ' checked'; ?>> <?php echo wp_kses_post($agreement['label_html']); ?></label><?php endif; ?>
<button type="submit" class="but jb-blue padding-lg btn-block"><i class="fa fas fa-check" aria-hidden="true"></i> <?php esc_html_e('确认提交', 'aksrt'); ?></button>
</form>
@@ -86,10 +91,10 @@ $render_phone_form = static function () use ($agreement): void {
<template data-aksrt-settings-modal-template="password">
<div class="aksrt-settings-modal" data-account-dialog="password" data-recovery-channel="<?php echo esc_attr($recovery_channel); ?>" data-recovery-target="<?php echo esc_attr($recovery_target); ?>">
<div class="modal-colorful-header colorful-bg jb-yellow"><button type="button" class="close" data-aksrt-modal-close aria-label="<?php esc_attr_e('关闭', 'aksrt'); ?>"><i class="fa fas fa-times" aria-hidden="true"></i></button><div class="colorful-make"></div><div class="text-center"><div class="em2x"><i class="fa fas fa-unlock-alt" aria-hidden="true"></i></div><div class="mt10 em12 padding-w10" data-account-password-title data-change-label="<?php echo esc_attr($account_oauth_new ? __('设置密码', 'aksrt') : __('修改密码', 'aksrt')); ?>" data-recovery-label="<?php esc_attr_e('重设密码', 'aksrt'); ?>"><?php echo $account_oauth_new ? esc_html__('设置密码', 'aksrt') : esc_html__('修改密码', 'aksrt'); ?></div></div></div>
<div class="modal-colorful-header colorful-bg jb-yellow"><button type="button" class="close" data-aksrt-modal-close aria-label="<?php esc_attr_e('关闭', 'aksrt'); ?>"><?php echo $account_close_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></button><div class="colorful-make"></div><div class="text-center"><div class="em2x"><i class="fa fas fa-unlock-alt" aria-hidden="true"></i></div><div class="mt10 em12 padding-w10" data-account-password-title data-change-label="<?php echo esc_attr($account_oauth_new ? __('设置密码', 'aksrt') : __('修改密码', 'aksrt')); ?>" data-recovery-label="<?php esc_attr_e('重设密码', 'aksrt'); ?>"><?php echo $account_oauth_new ? esc_html__('设置密码', 'aksrt') : esc_html__('修改密码', 'aksrt'); ?></div></div></div>
<div class="aksrt-settings-modal__pane" data-account-password-pane="change">
<form id="pwd-form" autocomplete="off" novalidate>
<div class="aksrt-settings-modal__fields">
<div class="aksrt-settings-modal__fields mb20">
<?php if (!$account_oauth_new) : ?><div class="relative line-form mb10 modal-line-field"><input type="password" id="pwd-old" name="passwordold" class="line-form-input" tabindex="1" required><div class="scale-placeholder"><?php esc_html_e('请输入原密码', 'aksrt'); ?></div><button type="button" class="toggle-pwd abs-right passw" data-target="pwd-old" aria-label="<?php esc_attr_e('显示或隐藏密码', 'aksrt'); ?>"><i class="fa fas fa-eye" aria-hidden="true"></i></button><i class="line-form-line"></i></div><?php endif; ?>
<div class="relative line-form mb10 modal-line-field"><input type="password" id="pwd-new" name="password" class="line-form-input" tabindex="2" required minlength="6"><div class="scale-placeholder"><?php echo $account_oauth_new ? esc_html__('设置新密码', 'aksrt') : esc_html__('请输入新密码', 'aksrt'); ?></div><button type="button" class="toggle-pwd abs-right passw" data-target="pwd-new" aria-label="<?php esc_attr_e('显示或隐藏密码', 'aksrt'); ?>"><i class="fa fas fa-eye" aria-hidden="true"></i></button><i class="line-form-line"></i></div>
<div class="relative line-form mb10 modal-line-field"><input type="password" id="pwd-confirm" name="password2" class="line-form-input" tabindex="3" required minlength="6"><div class="scale-placeholder"><?php esc_html_e('请再次输入新密码', 'aksrt'); ?></div><button type="button" class="toggle-pwd abs-right passw" data-target="pwd-confirm" aria-label="<?php esc_attr_e('显示或隐藏密码', 'aksrt'); ?>"><i class="fa fas fa-eye" aria-hidden="true"></i></button><i class="line-form-line"></i></div>
@@ -104,10 +109,10 @@ $render_phone_form = static function () use ($agreement): void {
<div class="aksrt-settings-modal__pane" data-account-password-pane="recovery" hidden>
<div class="text-right mb10"><button type="button" class="em09 but p2-10 account-recovery-toggle" data-account-recovery-back><i class="fa fas fa-angle-left em12" aria-hidden="true"></i> <?php esc_html_e('返回使用原密码修改密码', 'aksrt'); ?></button></div>
<form id="pwd-recovery-form" autocomplete="off" novalidate>
<div class="aksrt-settings-modal__fields">
<div class="aksrt-settings-modal__fields mb20">
<div class="relative line-form mb10 modal-line-field"><input type="text" id="pwd-recovery-target" name="target" value="<?php echo esc_attr($recovery_target); ?>" class="line-form-input" autocomplete="username" required><div class="scale-placeholder"><?php esc_html_e('邮箱或手机号', 'aksrt'); ?></div><i class="line-form-line"></i></div>
<div class="relative line-form mb10 modal-line-field"><input type="text" id="pwd-recovery-code" name="code" class="line-form-input" maxlength="6" inputmode="numeric" autocomplete="one-time-code" required><div class="scale-placeholder"><?php esc_html_e('验证码', 'aksrt'); ?></div><button type="button" class="but c-blue code-send-btn" data-account-recovery-send><?php esc_html_e('发送验证码', 'aksrt'); ?></button><i class="line-form-line"></i></div>
<?php if (function_exists('aksrt_render_captcha')) : ?><?php aksrt_render_captcha('lostpassword'); ?><?php endif; ?>
<div class="relative line-form mb10 modal-line-field modal-line-field--code"><input type="text" id="pwd-recovery-code" name="code" class="line-form-input" maxlength="6" inputmode="numeric" autocomplete="one-time-code" required><div class="scale-placeholder"><?php esc_html_e('验证码', 'aksrt'); ?></div><span class="yztx abs-right"><button type="button" class="but c-blue code-send-btn" data-account-recovery-send><?php esc_html_e('发送验证码', 'aksrt'); ?></button></span><i class="line-form-line"></i></div>
<div class="relative line-form mb10 modal-line-field"><input type="password" id="pwd-recovery-new" name="password" class="line-form-input" required minlength="6"><div class="scale-placeholder"><?php esc_html_e('设置新密码', 'aksrt'); ?></div><button type="button" class="toggle-pwd abs-right passw" data-target="pwd-recovery-new" aria-label="<?php esc_attr_e('显示或隐藏密码', 'aksrt'); ?>"><i class="fa fas fa-eye" aria-hidden="true"></i></button><i class="line-form-line"></i></div>
<div class="relative line-form mb10 modal-line-field"><input type="password" id="pwd-recovery-confirm" name="password_confirm" class="line-form-input" required minlength="6"><div class="scale-placeholder"><?php esc_html_e('重复密码', 'aksrt'); ?></div><button type="button" class="toggle-pwd abs-right passw" data-target="pwd-recovery-confirm" aria-label="<?php esc_attr_e('显示或隐藏密码', 'aksrt'); ?>"><i class="fa fas fa-eye" aria-hidden="true"></i></button><i class="line-form-line"></i></div>
</div>
@@ -120,11 +125,11 @@ $render_phone_form = static function () use ($agreement): void {
<template data-aksrt-settings-modal-template="email">
<div class="aksrt-settings-modal" data-account-dialog="email">
<div class="modal-colorful-header colorful-bg jb-blue"><button type="button" class="close" data-aksrt-modal-close aria-label="<?php esc_attr_e('关闭', 'aksrt'); ?>"><i class="fa fas fa-times" aria-hidden="true"></i></button><div class="colorful-make"></div><div class="text-center"><div class="em2x"><i class="fa fas fa-envelope" aria-hidden="true"></i></div><div class="mt10 em12 padding-w10"><?php echo esc_html($account_email !== '' ? __('修改邮箱', 'aksrt') : __('绑定邮箱', 'aksrt')); ?></div></div></div>
<div class="modal-colorful-header colorful-bg jb-blue"><button type="button" class="close" data-aksrt-modal-close aria-label="<?php esc_attr_e('关闭', 'aksrt'); ?>"><?php echo $account_close_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></button><div class="colorful-make"></div><div class="text-center"><div class="em2x"><i class="fa far fa-envelope" aria-hidden="true"></i></div><div class="mt10 em12 padding-w10"><?php echo esc_html($account_email !== '' ? __('修改邮箱', 'aksrt') : __('绑定邮箱', 'aksrt')); ?></div></div></div>
<?php if ($email_verify_required) : ?>
<ul class="mb20 step-simple account-step-list" data-account-step-list="email"><li class="active"><span><?php esc_html_e('验证老邮箱', 'aksrt'); ?></span></li><li><span><?php esc_html_e('验证新邮箱', 'aksrt'); ?></span></li><li><span><?php esc_html_e('修改成功', 'aksrt'); ?></span></li></ul>
<div class="account-step-panels">
<div class="account-step is-active" data-account-step="email-old"><p class="muted-2-color"><?php printf(esc_html__('请在下方获取验证码以验证您的老邮箱 %s', 'aksrt'), '<span class="badg">' . esc_html($account_email) . '</span>'); ?></p><form id="email-old-verify-form"><div class="relative line-form mb10 modal-line-field"><input type="text" name="code" class="line-form-input" maxlength="6" inputmode="numeric" required><div class="scale-placeholder"><?php esc_html_e('验证码', 'aksrt'); ?></div><button type="button" class="but c-blue code-send-btn account-code-send" data-account-code-scene="verify_email"><?php esc_html_e('发送验证码', 'aksrt'); ?></button><i class="line-form-line"></i></div><?php if (function_exists('aksrt_render_captcha')) : ?><?php aksrt_render_captcha('change_email'); ?><?php endif; ?><button type="submit" class="but jb-blue padding-lg btn-block"><i class="fa fas fa-shield-alt" aria-hidden="true"></i> <?php esc_html_e('立即验证', 'aksrt'); ?></button></form></div>
<div class="account-step is-active" data-account-step="email-old"><p class="muted-2-color"><?php printf(esc_html__('请在下方获取验证码以验证您的老邮箱 %s', 'aksrt'), '<span class="badg">' . esc_html($account_email) . '</span>'); ?></p><form id="email-old-verify-form"><div class="mb20"><?php if (function_exists('aksrt_render_captcha')) : ?><?php aksrt_render_captcha('change_email'); ?><?php endif; ?><div class="relative line-form mb10 modal-line-field modal-line-field--code"><input type="text" name="code" class="line-form-input" maxlength="6" inputmode="numeric" autocomplete="one-time-code" required><div class="scale-placeholder"><?php esc_html_e('验证码', 'aksrt'); ?></div><span class="yztx abs-right"><button type="button" class="but c-blue code-send-btn account-code-send" data-account-code-scene="verify_email"><?php esc_html_e('发送验证码', 'aksrt'); ?></button></span><i class="line-form-line"></i></div></div><button type="submit" class="but jb-blue padding-lg btn-block"><i class="fa fas fa-shield-alt" aria-hidden="true"></i> <?php esc_html_e('立即验证', 'aksrt'); ?></button></form></div>
<div class="account-step" data-account-step="email-new"><p class="muted-2-color"><?php esc_html_e('请输入您需要修改的新邮箱账号', 'aksrt'); ?></p><?php $render_email_form(); ?></div>
<div class="account-step" data-account-step="email-success"><div class="text-center padding-h10"><i class="fa fas fa-check-circle c-green em3x mb10" aria-hidden="true"></i><p><?php esc_html_e('邮箱修改成功', 'aksrt'); ?></p></div></div>
</div>
@@ -137,11 +142,11 @@ $render_phone_form = static function () use ($agreement): void {
<?php if ($phone_available) : ?>
<template data-aksrt-settings-modal-template="phone">
<div class="aksrt-settings-modal" data-account-dialog="phone">
<div class="modal-colorful-header colorful-bg jb-blue"><button type="button" class="close" data-aksrt-modal-close aria-label="<?php esc_attr_e('关闭', 'aksrt'); ?>"><i class="fa fas fa-times" aria-hidden="true"></i></button><div class="colorful-make"></div><div class="text-center"><div class="em2x"><i class="fa fas fa-phone" aria-hidden="true"></i></div><div class="mt10 em12 padding-w10"><?php echo esc_html($account_phone !== '' ? __('修改手机', 'aksrt') : __('绑定手机', 'aksrt')); ?></div></div></div>
<div class="modal-colorful-header colorful-bg jb-blue"><button type="button" class="close" data-aksrt-modal-close aria-label="<?php esc_attr_e('关闭', 'aksrt'); ?>"><?php echo $account_close_icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></button><div class="colorful-make"></div><div class="text-center"><div class="em2x"><i class="fa fas fa-phone" aria-hidden="true"></i></div><div class="mt10 em12 padding-w10"><?php echo esc_html($account_phone !== '' ? __('修改手机', 'aksrt') : __('绑定手机', 'aksrt')); ?></div></div></div>
<?php if ($account_phone !== '') : ?>
<ul class="mb20 step-simple account-step-list" data-account-step-list="phone"><li class="active"><span><?php esc_html_e('验证老手机', 'aksrt'); ?></span></li><li><span><?php esc_html_e('验证新手机', 'aksrt'); ?></span></li><li><span><?php esc_html_e('修改成功', 'aksrt'); ?></span></li></ul>
<div class="account-step-panels">
<div class="account-step is-active" data-account-step="phone-old"><p class="muted-2-color"><?php printf(esc_html__('请在下方获取验证码以验证您的老手机号 %s', 'aksrt'), '<br><span class="badg">' . esc_html($account_phone) . '</span>'); ?></p><form id="phone-old-verify-form"><input type="hidden" name="phone" value="<?php echo esc_attr($account_phone); ?>"><div class="relative line-form mb10 modal-line-field"><input type="text" name="code" class="line-form-input" maxlength="6" inputmode="numeric" required><div class="scale-placeholder"><?php esc_html_e('验证码', 'aksrt'); ?></div><button type="button" class="but c-blue code-send-btn account-code-send" data-aksrt-sms-trigger data-aksrt-sms-scene="verify_old_phone"><?php esc_html_e('发送验证码', 'aksrt'); ?></button><i class="line-form-line"></i></div><?php if (function_exists('aksrt_render_captcha')) : ?><?php aksrt_render_captcha('bind_phone'); ?><?php endif; ?><button type="submit" class="but jb-blue padding-lg btn-block"><i class="fa fas fa-shield-alt" aria-hidden="true"></i> <?php esc_html_e('立即验证', 'aksrt'); ?></button></form></div>
<div class="account-step is-active" data-account-step="phone-old"><p class="muted-2-color"><?php printf(esc_html__('请在下方获取验证码以验证您的老手机号 %s', 'aksrt'), '<br><span class="badg">' . esc_html($account_phone) . '</span>'); ?></p><form id="phone-old-verify-form"><input type="hidden" name="phone" value="<?php echo esc_attr($account_phone); ?>"><div class="mb20"><?php if (function_exists('aksrt_render_captcha')) : ?><?php aksrt_render_captcha('bind_phone'); ?><?php endif; ?><div class="relative line-form mb10 modal-line-field modal-line-field--code"><input type="text" name="code" class="line-form-input" maxlength="6" inputmode="numeric" autocomplete="one-time-code" required><div class="scale-placeholder"><?php esc_html_e('验证码', 'aksrt'); ?></div><span class="yztx abs-right"><button type="button" class="but c-blue code-send-btn account-code-send" data-aksrt-sms-trigger data-aksrt-sms-scene="verify_old_phone"><?php esc_html_e('发送验证码', 'aksrt'); ?></button></span><i class="line-form-line"></i></div></div><button type="submit" class="but jb-blue padding-lg btn-block"><i class="fa fas fa-shield-alt" aria-hidden="true"></i> <?php esc_html_e('立即验证', 'aksrt'); ?></button></form></div>
<div class="account-step" data-account-step="phone-new"><p class="muted-2-color"><?php esc_html_e('请输入您需要修改的新手机号码', 'aksrt'); ?></p><?php $render_phone_form(); ?></div>
<div class="account-step" data-account-step="phone-success"><div class="text-center padding-h10"><i class="fa fas fa-check-circle c-green em3x mb10" aria-hidden="true"></i><p><?php esc_html_e('手机号修改成功', 'aksrt'); ?></p></div></div>
</div>