个人信息页面测试用的webauthn相关
This commit is contained in:
parent
7dde52ba42
commit
97b69e73e1
GPG Key ID:
D7A9EC07024C3021
@ -14,6 +14,7 @@
|
|||||||
/* @var $is_otp_enabled bool */
|
/* @var $is_otp_enabled bool */
|
||||||
|
|
||||||
use app\assets\FontAwesomeAsset;
|
use app\assets\FontAwesomeAsset;
|
||||||
|
use app\assets\SimpleWebAuthnBrowser;
|
||||||
use app\models\User;
|
use app\models\User;
|
||||||
use app\utils\FileSizeHelper;
|
use app\utils\FileSizeHelper;
|
||||||
use app\utils\IPLocation;
|
use app\utils\IPLocation;
|
||||||
@ -33,6 +34,7 @@ use yii\web\View;
|
|||||||
$this->title = '个人设置';
|
$this->title = '个人设置';
|
||||||
FontAwesomeAsset::register($this);
|
FontAwesomeAsset::register($this);
|
||||||
JqueryAsset::register($this);
|
JqueryAsset::register($this);
|
||||||
|
SimpleWebAuthnBrowser::register($this);
|
||||||
$this->registerCssFile('@web/css/user-info.css');
|
$this->registerCssFile('@web/css/user-info.css');
|
||||||
$details = IPLocation::getDetails($model->last_login_ip); // IP LOCATION
|
$details = IPLocation::getDetails($model->last_login_ip); // IP LOCATION
|
||||||
|
|
||||||
@ -67,63 +69,63 @@ $user = new User();
|
|||||||
$darkMode = Yii::$app->user->identity->dark_mode;
|
$darkMode = Yii::$app->user->identity->dark_mode;
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="user-info">
|
<div class="user-info">
|
||||||
|
|
||||||
<h1><?= Html::encode($this->title) ?></h1>
|
<h1><?= Html::encode($this->title) ?></h1>
|
||||||
|
|
||||||
<div class="user-profile">
|
<div class="user-profile">
|
||||||
<div class="avatar-container">
|
<div class="avatar-container">
|
||||||
<?= $model->getGravatar(email: $model->email, s: 100, img: true, atts: ['alt' => 'User Avatar', 'class' => 'avatar']) ?>
|
<?= $model->getGravatar(email: $model->email, s: 100, img: true, atts: ['alt' => 'User Avatar', 'class' => 'avatar']) ?>
|
||||||
<div class="avatar-overlay">
|
<div class="avatar-overlay">
|
||||||
<i class="fa-solid fa-pen-to-square"></i>
|
<i class="fa-solid fa-pen-to-square"></i>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="user-details">
|
</div>
|
||||||
<div class="user-info">
|
<div class="user-details">
|
||||||
<p id="p-username" class="editable-username" title="用户昵称(用户名)">
|
<div class="user-info">
|
||||||
<?= Html::encode($model->name . '(' . $model->username. ')') ?>
|
<p id="p-username" class="editable-username" title="用户昵称(用户名)">
|
||||||
<i class="fa-solid fa-pen-to-square edit-icon"></i>
|
<?= Html::encode($model->name . '(' . $model->username . ')') ?>
|
||||||
</p>
|
<i class="fa-solid fa-pen-to-square edit-icon"></i>
|
||||||
<p><?= Html::encode($model->email) ?></p>
|
</p>
|
||||||
<p>
|
<p><?= Html::encode($model->email) ?></p>
|
||||||
<?php
|
<p>
|
||||||
if ($model->role == 'user') {
|
<?php
|
||||||
echo '普通用户';
|
if ($model->role == 'user') {
|
||||||
} elseif ($model->role == 'admin') {
|
echo '普通用户';
|
||||||
echo '管理员';
|
} elseif ($model->role == 'admin') {
|
||||||
} else {
|
echo '管理员';
|
||||||
echo Html::encode($model->role);
|
} else {
|
||||||
}
|
echo Html::encode($model->role);
|
||||||
?>
|
}
|
||||||
</p>
|
?>
|
||||||
</div>
|
</p>
|
||||||
<div class="user-login-info">
|
</div>
|
||||||
<div class="user-last-login">
|
<div class="user-login-info">
|
||||||
<i class="fa-solid fa-clipboard-user"></i>
|
<div class="user-last-login">
|
||||||
<div class="login-info-dv">
|
<i class="fa-solid fa-clipboard-user"></i>
|
||||||
<p class="user-login-info-title">上次登录时间</p>
|
<div class="login-info-dv">
|
||||||
<p class="user-login-info-content"><?= Html::encode($model->last_login . ' (CST)') ?></p>
|
<p class="user-login-info-title">上次登录时间</p>
|
||||||
</div>
|
<p class="user-login-info-content"><?= Html::encode($model->last_login . ' (CST)') ?></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="user-last-login-ip">
|
</div>
|
||||||
<i class="fa-solid fa-location-dot"></i>
|
<div class="user-last-login-ip">
|
||||||
<div class="login-info-dv">
|
<i class="fa-solid fa-location-dot"></i>
|
||||||
<p class="user-login-info-title">上次登录IP</p>
|
<div class="login-info-dv">
|
||||||
<p class="user-login-info-content">
|
<p class="user-login-info-title">上次登录IP</p>
|
||||||
<?= Html::encode($model->last_login_ip) ?>
|
<p class="user-login-info-content">
|
||||||
<?= Html::encode(($details === null) ? '' : '(' . ($details->bogon ? ('Bogon IP') : ($details->city . ', ' . $details->country)) . ')') ?>
|
<?= Html::encode($model->last_login_ip) ?>
|
||||||
</p>
|
<?= Html::encode(($details === null) ? '' : '(' . ($details->bogon ? ('Bogon IP') : ($details->city . ', ' . $details->country)) . ')') ?>
|
||||||
</div>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="accordion userAccordion" id="userAccordion">
|
</div>
|
||||||
<div class="accordion-item">
|
<div class="accordion userAccordion" id="userAccordion">
|
||||||
<h2 class="accordion-header" id="headingStorage">
|
<div class="accordion-item">
|
||||||
<button class="accordion-button <?= ($focus === 'storage') ? '' : 'collapsed' ?>"
|
<h2 class="accordion-header" id="headingStorage">
|
||||||
type="button" data-bs-toggle="collapse"
|
<button class="accordion-button <?= ($focus === 'storage') ? '' : 'collapsed' ?>"
|
||||||
data-bs-target="#collapseStorage" <?= ($focus === 'storage') ? 'aria-expanded="true"' : '' ?>>
|
type="button" data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#collapseStorage" <?= ($focus === 'storage') ? 'aria-expanded="true"' : '' ?>>
|
||||||
<span class="accordion-storage-content">
|
<span class="accordion-storage-content">
|
||||||
<span>
|
<span>
|
||||||
<i class="fa-solid fa-hard-drive"></i>
|
<i class="fa-solid fa-hard-drive"></i>
|
||||||
@ -133,47 +135,46 @@ $darkMode = Yii::$app->user->identity->dark_mode;
|
|||||||
<?= $totalUsed_F . ' / ' . $storageLimit_F ?>
|
<?= $totalUsed_F . ' / ' . $storageLimit_F ?>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</h2>
|
</h2>
|
||||||
<div id="collapseStorage"
|
<div id="collapseStorage"
|
||||||
class="accordion-collapse collapse <?= ($focus === 'storage') ? 'show' : '' ?>">
|
class="accordion-collapse collapse <?= ($focus === 'storage') ? 'show' : '' ?>">
|
||||||
<div class="accordion-body">
|
<div class="accordion-body">
|
||||||
<div class="storage-info">
|
<div class="storage-info">
|
||||||
<div class="storage-columns">
|
<div class="storage-columns">
|
||||||
<div class="storage-usage" style="width: 27%">
|
<div class="storage-usage" style="width: 27%">
|
||||||
<p>当前已使用容量</p>
|
<p>当前已使用容量</p>
|
||||||
<span id="current"><?= $totalUsed_F ?>
|
<span id="current"><?= $totalUsed_F ?>
|
||||||
</span>
|
</span>
|
||||||
<span style="font-size: 0.9rem;">/ <?= $storageLimit_F ?></span>
|
<span style="font-size: 0.9rem;">/ <?= $storageLimit_F ?></span>
|
||||||
|
</div>
|
||||||
|
<div style="width: 47%">
|
||||||
|
<p><?= $totalUsedPercent ?>% 已用</p>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-bar" role="progressbar"
|
||||||
|
style="width: <?= $usedPercent ?>%;background-color: rgb(52,131,250)"
|
||||||
|
aria-valuenow="<?= $usedPercent ?>"
|
||||||
|
aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
|
<div class="progress-bar" role="progressbar"
|
||||||
|
style="width: <?= $vaultUsedPercent ?>%;background-color: rgb(196,134,0)"
|
||||||
|
aria-valuenow="<?= $vaultUsedPercent ?>"
|
||||||
|
aria-valuemin="0" aria-valuemax="100"></div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 47%">
|
<div class="storage-legend" style="color: rgb(140,139,139)">
|
||||||
<p><?= $totalUsedPercent ?>% 已用</p>
|
<div class="legend-item">
|
||||||
<div class="progress">
|
|
||||||
<div class="progress-bar" role="progressbar"
|
|
||||||
style="width: <?= $usedPercent ?>%;background-color: rgb(52,131,250)"
|
|
||||||
aria-valuenow="<?= $usedPercent ?>"
|
|
||||||
aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
<div class="progress-bar" role="progressbar"
|
|
||||||
style="width: <?= $vaultUsedPercent ?>%;background-color: rgb(196,134,0)"
|
|
||||||
aria-valuenow="<?= $vaultUsedPercent ?>"
|
|
||||||
aria-valuemin="0" aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
<div class="storage-legend" style="color: rgb(140,139,139)">
|
|
||||||
<div class="legend-item">
|
|
||||||
<span class="legend-color"
|
<span class="legend-color"
|
||||||
style="background-color: rgb(52,131,250);"></span>
|
style="background-color: rgb(52,131,250);"></span>
|
||||||
<span>网盘已用空间</span>
|
<span>网盘已用空间</span>
|
||||||
<span style="margin-left: auto;"><?= $usedSpace_F ?>
|
<span style="margin-left: auto;"><?= $usedSpace_F ?>
|
||||||
<?= Html::a('<i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.75rem;"></i>', ['home/index']) ?>
|
<?= Html::a('<i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.75rem;"></i>', ['home/index']) ?>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="legend-item">
|
<div class="legend-item">
|
||||||
<span class="legend-color" style="background-color: rgb(196,134,0);"></span>
|
<span class="legend-color" style="background-color: rgb(196,134,0);"></span>
|
||||||
<span>保险箱已用空间</span>
|
<span>保险箱已用空间</span>
|
||||||
<span style="margin-left: auto;"><?= $vaultUsedSpace_F ?>
|
<span style="margin-left: auto;"><?= $vaultUsedSpace_F ?>
|
||||||
<?= Html::a('<i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.75rem;"></i>', ['vault/index']) ?>
|
<?= Html::a('<i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.75rem;"></i>', ['vault/index']) ?>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -181,120 +182,138 @@ $darkMode = Yii::$app->user->identity->dark_mode;
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="accordion-item">
|
</div>
|
||||||
<h2 class="accordion-header" id="headingBio">
|
<div class="accordion-item">
|
||||||
<button class="accordion-button <?= ($focus === 'bio') ? '' : 'collapsed' ?>" type="button"
|
<h2 class="accordion-header" id="headingBio">
|
||||||
data-bs-toggle="collapse"
|
<button class="accordion-button <?= ($focus === 'bio') ? '' : 'collapsed' ?>" type="button"
|
||||||
data-bs-target="#collapseBio" <?= ($focus === 'bio') ? 'aria-expanded="true"' : '' ?>>
|
data-bs-toggle="collapse"
|
||||||
<i class="fa-solid fa-address-card"></i>
|
data-bs-target="#collapseBio" <?= ($focus === 'bio') ? 'aria-expanded="true"' : '' ?>>
|
||||||
<span>个人简介</span>
|
<i class="fa-solid fa-address-card"></i>
|
||||||
</button>
|
<span>个人简介</span>
|
||||||
</h2>
|
</button>
|
||||||
<div id="collapseBio" class="accordion-collapse collapse <?= ($focus === 'bio') ? 'show' : '' ?>">
|
</h2>
|
||||||
<div class="accordion-body">
|
<div id="collapseBio" class="accordion-collapse collapse <?= ($focus === 'bio') ? 'show' : '' ?>">
|
||||||
<?php $form = yii\widgets\ActiveForm::begin(); ?>
|
<div class="accordion-body">
|
||||||
<?= $form->field($model, 'bio')->textarea(['rows' => 6])->label('简介') ?>
|
<?php $form = yii\widgets\ActiveForm::begin(); ?>
|
||||||
<div class="form-group">
|
<?= $form->field($model, 'bio')->textarea(['rows' => 6])->label('简介') ?>
|
||||||
<?= yii\helpers\Html::submitButton('保存', ['class' => 'btn btn-success']) ?>
|
<div class="form-group">
|
||||||
</div>
|
<?= yii\helpers\Html::submitButton('保存', ['class' => 'btn btn-success']) ?>
|
||||||
<?php yii\widgets\ActiveForm::end(); ?>
|
|
||||||
</div>
|
</div>
|
||||||
|
<?php yii\widgets\ActiveForm::end(); ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="accordion-item">
|
</div>
|
||||||
<h2 class="accordion-header" id="headingPassword">
|
<div class="accordion-item">
|
||||||
<button class="accordion-button <?= ($focus === 'password') ? '' : 'collapsed' ?>" type="button"
|
<h2 class="accordion-header" id="headingPassword">
|
||||||
data-bs-toggle="collapse"
|
<button class="accordion-button <?= ($focus === 'password') ? '' : 'collapsed' ?>" type="button"
|
||||||
data-bs-target="#collapsePassword" <?= ($focus === 'password') ? 'aria-expanded="true"' : '' ?>>
|
data-bs-toggle="collapse"
|
||||||
<i class="fa-solid fa-key"></i>
|
data-bs-target="#collapsePassword" <?= ($focus === 'password') ? 'aria-expanded="true"' : '' ?>>
|
||||||
<span>修改密码</span>
|
<i class="fa-solid fa-key"></i>
|
||||||
</button>
|
<span>修改密码</span>
|
||||||
</h2>
|
</button>
|
||||||
<div id="collapsePassword"
|
</h2>
|
||||||
class="accordion-collapse collapse <?= ($focus === 'password') ? 'show' : '' ?>">
|
<div id="collapsePassword"
|
||||||
<div class="accordion-body">
|
class="accordion-collapse collapse <?= ($focus === 'password') ? 'show' : '' ?>">
|
||||||
<?php $form = ActiveForm::begin([
|
<div class="accordion-body">
|
||||||
'action' => Url::to(['user/change-password']),
|
<?php $form = ActiveForm::begin([
|
||||||
'method' => 'post'
|
'action' => Url::to(['user/change-password']),
|
||||||
]); ?>
|
'method' => 'post'
|
||||||
<?= $form->field($model, 'oldPassword')->passwordInput()->label('原密码') ?>
|
]); ?>
|
||||||
<?= $form->field($model, 'newPassword')->passwordInput()->label('新密码') ?>
|
<?= $form->field($model, 'oldPassword')->passwordInput()->label('原密码') ?>
|
||||||
<?= $form->field($model, 'newPasswordRepeat')->passwordInput()->label('重复新密码') ?>
|
<?= $form->field($model, 'newPassword')->passwordInput()->label('新密码') ?>
|
||||||
<div class="form-group">
|
<?= $form->field($model, 'newPasswordRepeat')->passwordInput()->label('重复新密码') ?>
|
||||||
<?= Html::submitButton('修改密码', ['class' => 'btn btn-success']) ?>
|
<div class="form-group">
|
||||||
</div>
|
<?= Html::submitButton('修改密码', ['class' => 'btn btn-success']) ?>
|
||||||
<?php ActiveForm::end(); ?>
|
|
||||||
</div>
|
</div>
|
||||||
|
<?php ActiveForm::end(); ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="accordion-item">
|
</div>
|
||||||
<h2 class="accordion-header" id="headingAdvanced">
|
<div class="accordion-item">
|
||||||
<button class="accordion-button <?= ($focus === 'advanced') ? '' : 'collapsed' ?>" type="button"
|
<h2 class="accordion-header" id="headingAdvanced">
|
||||||
data-bs-toggle="collapse"
|
<button class="accordion-button <?= ($focus === 'advanced') ? '' : 'collapsed' ?>" type="button"
|
||||||
data-bs-target="#collapseAdvanced" <?= ($focus === 'advanced') ? 'aria-expanded="true"' : '' ?>>
|
data-bs-toggle="collapse"
|
||||||
<i class="fa-solid fa-flask"></i>
|
data-bs-target="#collapseAdvanced" <?= ($focus === 'advanced') ? 'aria-expanded="true"' : '' ?>>
|
||||||
<span>高级功能</span>
|
<i class="fa-solid fa-flask"></i>
|
||||||
</button>
|
<span>高级功能</span>
|
||||||
</h2>
|
</button>
|
||||||
<div id="collapseAdvanced"
|
</h2>
|
||||||
class="accordion-collapse collapse <?= ($focus === 'advanced') ? 'show' : '' ?>">
|
<div id="collapseAdvanced"
|
||||||
<div class="accordion-body">
|
class="accordion-collapse collapse <?= ($focus === 'advanced') ? 'show' : '' ?>">
|
||||||
<h4>二步验证</h4>
|
<div class="accordion-body">
|
||||||
<hr>
|
<h4>二步验证</h4>
|
||||||
<p>使用除您密码之外的第二种方法来增强您账号的安全性。</p>
|
<hr>
|
||||||
<ul class="list-group list-group-flush">
|
<p>使用除您密码之外的第二种方法来增强您账号的安全性。</p>
|
||||||
<li class="list-group-item">
|
<ul class="list-group list-group-flush">
|
||||||
<h5>
|
<li class="list-group-item">
|
||||||
<i class="fa-solid fa-shield-halved"></i>
|
<h5>
|
||||||
TOTP (Authenticator app)
|
<i class="fa-solid fa-shield-halved"></i>
|
||||||
</h5>
|
TOTP (Authenticator app)
|
||||||
<div>
|
</h5>
|
||||||
<div class="form-check form-switch">
|
<div>
|
||||||
<input class="form-check-input" type="checkbox" role="switch"
|
<div class="form-check form-switch">
|
||||||
id="totp-enabled" <?= $is_otp_enabled ? 'checked' : '' ?>>
|
<input class="form-check-input" type="checkbox" role="switch"
|
||||||
<label class="form-check-label" for="totp-enabled" data-bs-toggle="modal"
|
id="totp-enabled" <?= $is_otp_enabled ? 'checked' : '' ?>>
|
||||||
data-bs-target="#totpSetupModal">启用 TOTP</label>
|
<label class="form-check-label" for="totp-enabled" data-bs-toggle="modal"
|
||||||
</div>
|
data-bs-target="#totpSetupModal">启用 TOTP</label>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<li class="list-group-item">
|
</li>
|
||||||
<h5>
|
<li class="list-group-item">
|
||||||
<i class="fa-solid fa-user-lock"></i>
|
<h5>
|
||||||
备用码
|
<i class="fa-solid fa-user-lock"></i>
|
||||||
</h5>
|
备用码
|
||||||
<div>
|
</h5>
|
||||||
<?= Html::a('获取恢复代码(请妥善保存)', Url::to(['user/download-recovery-codes']), ['class' => 'btn btn-outline-primary btn-sm', 'id' => 'generate-backup-codes']) ?>
|
<div>
|
||||||
</div>
|
<?= Html::a('获取恢复代码(请妥善保存)', Url::to(['user/download-recovery-codes']), ['class' => 'btn btn-outline-primary btn-sm', 'id' => 'generate-backup-codes']) ?>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
</li>
|
||||||
<br>
|
<li class="list-group-item">
|
||||||
|
<h5>
|
||||||
|
<i class="fa-solid fa-key"></i>
|
||||||
|
Passwordless验证 (Webauthn) (BETA)
|
||||||
|
</h5>
|
||||||
|
<div>
|
||||||
|
<?= Html::button('Add', ['id' => "webauthn_add", 'type' => 'button', 'class' => 'btn btn-primary btn-sm']) ?>
|
||||||
|
<?= Html::button('Verify', ['id' => "webauthn_verify", 'type' => 'button', 'class' => 'btn btn-primary btn-sm']) ?>
|
||||||
|
<?= Html::button('Detail', ['id' => "webauthn_detail", 'type' => 'button', 'class' => 'btn btn-primary btn-sm']) ?>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-success" role="alert" hidden>
|
||||||
|
<span id="webauthn_success"></span>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-danger" role="alert" hidden>
|
||||||
|
<span id="webauthn_error"></span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<br>
|
||||||
|
|
||||||
<h4>主题</h4>
|
<h4>主题</h4>
|
||||||
<hr>
|
<hr>
|
||||||
<div class="form-check form-switch">
|
<div class="form-check form-switch">
|
||||||
<input class="form-check-input" type="checkbox" role="switch"
|
<input class="form-check-input" type="checkbox" role="switch"
|
||||||
id="useDarkTheme" <?= $darkMode === 0 ? '' : ($darkMode === 1 ? 'checked' : 'disabled') ?>>
|
id="useDarkTheme" <?= $darkMode === 0 ? '' : ($darkMode === 1 ? 'checked' : 'disabled') ?>>
|
||||||
<label class="form-check-label" for="useDarkTheme">启用夜间模式</label>
|
<label class="form-check-label" for="useDarkTheme">启用夜间模式</label>
|
||||||
</div>
|
|
||||||
<div class="form-check form-switch">
|
|
||||||
<input class="form-check-input" type="checkbox" role="switch"
|
|
||||||
id="followSystemTheme" <?= $darkMode === 2 ? 'checked' : '' ?>>
|
|
||||||
<label class="form-check-label" for="followSystemTheme">跟随设备主题</label>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<h4>删除账户</h4>
|
|
||||||
<hr>
|
|
||||||
<p>这个操作不支持撤回，请谨慎操作。</p>
|
|
||||||
<button type="button" class="btn btn-danger" data-bs-toggle="modal"
|
|
||||||
data-bs-target="#deleteAccountModal">
|
|
||||||
删除账户
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input class="form-check-input" type="checkbox" role="switch"
|
||||||
|
id="followSystemTheme" <?= $darkMode === 2 ? 'checked' : '' ?>>
|
||||||
|
<label class="form-check-label" for="followSystemTheme">跟随设备主题</label>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<h4>删除账户</h4>
|
||||||
|
<hr>
|
||||||
|
<p>这个操作不支持撤回，请谨慎操作。</p>
|
||||||
|
<button type="button" class="btn btn-danger" data-bs-toggle="modal"
|
||||||
|
data-bs-target="#deleteAccountModal">
|
||||||
|
删除账户
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<?php
|
<?php
|
||||||
// 修改用户头像的Modal
|
// 修改用户头像的Modal
|
||||||
Modal::begin([
|
Modal::begin([
|
||||||
@ -355,47 +374,47 @@ Modal::begin([
|
|||||||
'size' => 'model-xl',
|
'size' => 'model-xl',
|
||||||
]);
|
]);
|
||||||
?>
|
?>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6 text-center center">
|
<div class="col-md-6 text-center center">
|
||||||
<img src="<?= is_null($totp_secret) ? '' : $result->getDataUri() ?>" alt="QR Code" class="img-fluid">
|
<img src="<?= is_null($totp_secret) ? '' : $result->getDataUri() ?>" alt="QR Code" class="img-fluid">
|
||||||
</div>
|
|
||||||
<div class="col-md-6">
|
|
||||||
<p>使用兼容TOTP的应用程序扫描左侧二维码以添加二步验证</p>
|
|
||||||
<p>推荐以下二步验证器：:</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en_US">Google
|
|
||||||
Authenticator</a></li>
|
|
||||||
<li><a href="https://play.google.com/store/apps/details?id=com.azure.authenticator&hl=en_US">Microsoft
|
|
||||||
Authenticator</a></li>
|
|
||||||
<li><a href="https://play.google.com/store/apps/details?id=com.authy.authy&hl=en">Authy</a></li>
|
|
||||||
<!--这是广告吗-->
|
|
||||||
<li><a href="https://git.chenx221.cyou/chenx221/OTP/releases">自制TOTP验证器(Windows)</a></li>
|
|
||||||
<!-- Add more applications as needed -->
|
|
||||||
</ul>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<label for="totp_secret">无法扫描?使用下面的密钥来添加</label>
|
|
||||||
<input type="text" class="form-control" value="<?= $totp_secret ?>" id="totp_secret" readonly>
|
|
||||||
<button class="btn btn-outline-secondary" type="button"
|
|
||||||
onclick="navigator.clipboard.writeText('<?= $totp_secret ?>')">Copy
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<?php
|
|
||||||
if (!$is_otp_enabled) {
|
|
||||||
$form = ActiveForm::begin([
|
|
||||||
'action' => ['user/setup-two-factor'],
|
|
||||||
'method' => 'post'
|
|
||||||
]);
|
|
||||||
echo Html::activeHiddenInput($user, 'otp_secret', ['value' => $totp_secret]);
|
|
||||||
echo $form->field($user, 'totp_input')->textInput()->label('最后一步! 输入TOTP应用程序上显示的密码以启用二步验证');
|
|
||||||
echo Html::submitButton('启用二步验证', ['class' => 'btn btn-primary']);
|
|
||||||
ActiveForm::end();
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<p>使用兼容TOTP的应用程序扫描左侧二维码以添加二步验证</p>
|
||||||
|
<p>推荐以下二步验证器：:</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en_US">Google
|
||||||
|
Authenticator</a></li>
|
||||||
|
<li><a href="https://play.google.com/store/apps/details?id=com.azure.authenticator&hl=en_US">Microsoft
|
||||||
|
Authenticator</a></li>
|
||||||
|
<li><a href="https://play.google.com/store/apps/details?id=com.authy.authy&hl=en">Authy</a></li>
|
||||||
|
<!--这是广告吗-->
|
||||||
|
<li><a href="https://git.chenx221.cyou/chenx221/OTP/releases">自制TOTP验证器(Windows)</a></li>
|
||||||
|
<!-- Add more applications as needed -->
|
||||||
|
</ul>
|
||||||
|
<div class="input-group mb-3">
|
||||||
|
<label for="totp_secret">无法扫描?使用下面的密钥来添加</label>
|
||||||
|
<input type="text" class="form-control" value="<?= $totp_secret ?>" id="totp_secret" readonly>
|
||||||
|
<button class="btn btn-outline-secondary" type="button"
|
||||||
|
onclick="navigator.clipboard.writeText('<?= $totp_secret ?>')">Copy
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
if (!$is_otp_enabled) {
|
||||||
|
$form = ActiveForm::begin([
|
||||||
|
'action' => ['user/setup-two-factor'],
|
||||||
|
'method' => 'post'
|
||||||
|
]);
|
||||||
|
echo Html::activeHiddenInput($user, 'otp_secret', ['value' => $totp_secret]);
|
||||||
|
echo $form->field($user, 'totp_input')->textInput()->label('最后一步! 输入TOTP应用程序上显示的密码以启用二步验证');
|
||||||
|
echo Html::submitButton('启用二步验证', ['class' => 'btn btn-primary']);
|
||||||
|
ActiveForm::end();
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<?php
|
<?php
|
||||||
|
|
||||||
Modal::end();
|
Modal::end();
|
||||||
$this->registerJsFile('@web/js/user-info.js', ['depends' => [JqueryAsset::class], 'position' => View::POS_END]);
|
$this->registerJsFile('@web/js/user-info.js', ['depends' => [JqueryAsset::class, SimpleWebAuthnBrowser::class], 'position' => View::POS_END]);
|
||||||
?>
|
?>
|
||||||
|
|||||||
@ -41,4 +41,121 @@ document.querySelector('.avatar-container').addEventListener('click', function (
|
|||||||
document.querySelector('.editable-username').addEventListener('click', function () {
|
document.querySelector('.editable-username').addEventListener('click', function () {
|
||||||
// 在这里添加你的代码来显示一个模态框或其他你想要的东西
|
// 在这里添加你的代码来显示一个模态框或其他你想要的东西
|
||||||
$('#changeAccountName').modal('show');
|
$('#changeAccountName').modal('show');
|
||||||
|
});
|
||||||
|
|
||||||
|
// WebAuthn registration #BEGIN
|
||||||
|
const { startRegistration } = SimpleWebAuthnBrowser;
|
||||||
|
|
||||||
|
// <button>
|
||||||
|
const elemBegin = document.getElementById('webauthn_add');
|
||||||
|
// <span>/<p>/etc...
|
||||||
|
const elemSuccess = document.getElementById('webauthn_success');
|
||||||
|
// <span>/<p>/etc...
|
||||||
|
const elemError = document.getElementById('webauthn_error');
|
||||||
|
|
||||||
|
// Start registration when the user clicks a button
|
||||||
|
elemBegin.addEventListener('click', async () => {
|
||||||
|
// Reset success/error messages
|
||||||
|
elemSuccess.innerHTML = '';
|
||||||
|
elemError.innerHTML = '';
|
||||||
|
elemSuccess.parentElement.hidden = true;
|
||||||
|
elemError.parentElement.hidden = true;
|
||||||
|
|
||||||
|
// GET registration options from the endpoint that calls
|
||||||
|
const resp = await fetch('index.php?r=user%2Fcreate-credential-options');
|
||||||
|
|
||||||
|
let attResp;
|
||||||
|
try {
|
||||||
|
// Pass the options to the authenticator and wait for a response
|
||||||
|
attResp = await startRegistration(await resp.json());
|
||||||
|
} catch (error) {
|
||||||
|
// Some basic error handling
|
||||||
|
if (error.name === 'InvalidStateError') {
|
||||||
|
elemError.innerText = 'Error: Authenticator was probably already registered by user';
|
||||||
|
} else {
|
||||||
|
elemError.innerText = error;
|
||||||
|
}
|
||||||
|
elemError.parentElement.hidden = false;
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
|
||||||
|
|
||||||
|
// POST the response to the endpoint that calls
|
||||||
|
const verificationResp = await fetch('index.php?r=user%2Fcreate-credential', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'X-CSRF-Token': csrfToken
|
||||||
|
},
|
||||||
|
body: JSON.stringify(attResp),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Wait for the results of verification
|
||||||
|
const verificationJSON = await verificationResp.json();
|
||||||
|
|
||||||
|
// Show UI appropriate for the `verified` status
|
||||||
|
if (verificationJSON && verificationJSON.verified) {
|
||||||
|
elemSuccess.innerHTML = 'Success!';
|
||||||
|
elemSuccess.parentElement.hidden = false;
|
||||||
|
} else {
|
||||||
|
elemError.innerHTML = `Oh no, something went wrong! Response: <pre>${JSON.stringify(
|
||||||
|
verificationJSON,
|
||||||
|
)}</pre>`;
|
||||||
|
elemError.parentElement.hidden = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const { startAuthentication } = SimpleWebAuthnBrowser;
|
||||||
|
|
||||||
|
// <button>
|
||||||
|
const elemBegin_v = document.getElementById('webauthn_verify');
|
||||||
|
|
||||||
|
// Start authentication when the user clicks a button
|
||||||
|
elemBegin_v.addEventListener('click', async () => {
|
||||||
|
// Reset success/error messages
|
||||||
|
elemSuccess.innerHTML = '';
|
||||||
|
elemError.innerHTML = '';
|
||||||
|
elemSuccess.parentElement.hidden = true;
|
||||||
|
elemError.parentElement.hidden = true;
|
||||||
|
|
||||||
|
// GET authentication options from the endpoint that calls
|
||||||
|
// @simplewebauthn/server -> generateAuthenticationOptions()
|
||||||
|
const resp = await fetch('index.php?r=user%2Frequest-assertion-options');
|
||||||
|
|
||||||
|
let asseResp;
|
||||||
|
try {
|
||||||
|
// Pass the options to the authenticator and wait for a response
|
||||||
|
asseResp = await startAuthentication(await resp.json());
|
||||||
|
} catch (error) {
|
||||||
|
// Some basic error handling
|
||||||
|
elemError.innerText = error;
|
||||||
|
elemError.parentElement.hidden = false;
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
|
||||||
|
// POST the response to the endpoint that calls
|
||||||
|
// @simplewebauthn/server -> verifyAuthenticationResponse()
|
||||||
|
const verificationResp = await fetch('index.php?r=user%2Fverify-assertion', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'X-CSRF-Token': csrfToken
|
||||||
|
},
|
||||||
|
body: JSON.stringify(asseResp),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Wait for the results of verification
|
||||||
|
const verificationJSON = await verificationResp.json();
|
||||||
|
|
||||||
|
// Show UI appropriate for the `verified` status
|
||||||
|
if (verificationJSON && verificationJSON.verified) {
|
||||||
|
elemSuccess.innerHTML = 'Success!';
|
||||||
|
elemSuccess.parentElement.hidden = false;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
elemError.innerHTML = `Oh no, something went wrong! Response: <pre>${JSON.stringify(
|
||||||
|
verificationJSON,
|
||||||
|
)}</pre>`;
|
||||||
|
elemError.parentElement.hidden = false;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
Loading…
Reference in New Issue
Block a user