621 lines
41 KiB
Smarty
Executable File
621 lines
41 KiB
Smarty
Executable File
{include file='user/header.tpl'}
|
||
|
||
<script src="//{$config['jsdelivr_url']}/npm/jquery/dist/jquery.min.js"></script>
|
||
|
||
<div class="page-wrapper">
|
||
<div class="container-xl">
|
||
<div class="page-header d-print-none text-white">
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<h2 class="page-title">
|
||
<span class="home-title">资料修改</span>
|
||
</h2>
|
||
<div class="page-pretitle my-3">
|
||
<span class="home-subtitle">修改账户的部分信息</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="page-body">
|
||
<div class="container-xl">
|
||
<div class="row row-deck row-cards">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<ul class="nav nav-tabs nav-fill" data-bs-toggle="tabs" role="tablist">
|
||
<li class="nav-item" role="presentation">
|
||
<a href="#personal_information" class="nav-link active" data-bs-toggle="tab"
|
||
aria-selected="true" role="tab">
|
||
<i class="ti ti-chart-candle icon"></i>
|
||
资料
|
||
</a>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<a href="#login_security" class="nav-link" data-bs-toggle="tab" aria-selected="true"
|
||
role="tab">
|
||
<i class="ti ti-shield-lock icon"></i>
|
||
登录
|
||
</a>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<a href="#use_safety" class="nav-link" data-bs-toggle="tab" aria-selected="false"
|
||
tabindex="-1" role="tab">
|
||
<i class="ti ti-brand-telegram icon"></i>
|
||
使用
|
||
</a>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<a href="#other_settings" class="nav-link" data-bs-toggle="tab" aria-selected="false"
|
||
tabindex="-1" role="tab">
|
||
<i class="ti ti-settings icon"></i>
|
||
其他
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<div class="card-body">
|
||
<div class="tab-content">
|
||
<div class="tab-pane active show" id="personal_information" role="tabpanel">
|
||
<div class="row row-deck row-cards">
|
||
<div class="col-sm-12 col-md-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">登录邮箱</h3>
|
||
<p>当前邮箱：<code id="email">{$user->email}</code></p>
|
||
<div class="mb-3">
|
||
<input id="new-email" type="email" class="form-control"
|
||
placeholder="新邮箱"
|
||
{if ! $config['enable_change_email']}disabled=""{/if}>
|
||
</div>
|
||
{if $public_setting['reg_email_verify'] && $config['enable_change_email']}
|
||
<div class="mb-3">
|
||
<input id="email-code" type="text" class="form-control"
|
||
placeholder="验证码">
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="d-flex">
|
||
{if $public_setting['reg_email_verify'] && $config['enable_change_email']}
|
||
<button class="btn btn-link"
|
||
hx-post="/user/send" hx-swap="none"
|
||
hx-vals='js:{ email: document.getElementById("newemail").value }'>
|
||
获取验证码
|
||
</button>
|
||
<button class="btn btn-primary ms-auto"
|
||
hx-post="/user/email" hx-swap="none"
|
||
hx-vals='js:{
|
||
newemail: document.getElementById("new-email").value,
|
||
emailcode: document.getElementById("email-code").value
|
||
}'>
|
||
修改
|
||
</button>
|
||
{elseif $config['enable_change_email']}
|
||
<button class="btn btn-primary ms-auto"
|
||
hx-post="/user/email" hx-swap="none"
|
||
hx-vals='js:{ newemail: document.getElementById("new-email").value }'>
|
||
修改
|
||
</button>
|
||
{else}
|
||
<button class="btn btn-primary ms-auto"
|
||
disabled>不允许修改
|
||
</button>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12 col-md-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">用戶名</h3>
|
||
<p>当前用戶名：<code id="username">{$user->user_name}</code></p>
|
||
<div class="mb-3">
|
||
<input id="new-username" type="text" class="form-control"
|
||
placeholder="新用戶名" autocomplete="off">
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="d-flex">
|
||
<button class="btn btn-primary ms-auto"
|
||
hx-post="/user/username" hx-swap="none"
|
||
hx-vals='js:{ newusername: document.getElementById("new-username").value }'>
|
||
修改
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12 col-md-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">IM 账号绑定</h3>
|
||
<div class="mb-3">
|
||
<select id="imtype" class="form-select"
|
||
{if $user->im_type !== 0 && $user->im_value !== ''}disabled=""{/if}>
|
||
<option value="0" {if $user->im_type === 0}selected{/if}>
|
||
未绑定
|
||
</option>
|
||
<option value="1" {if $user->im_type === 1}selected{/if}>
|
||
Slack
|
||
</option>
|
||
<option value="2" {if $user->im_type === 2}selected{/if}>
|
||
Discord
|
||
</option>
|
||
<option value="4" {if $user->im_type === 4}selected{/if}>
|
||
Telegram
|
||
</option>
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<input id="imvalue" type="text" class="form-control"
|
||
disabled="" value="{$user->im_value}">
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="d-flex btn-list justify-content-end"
|
||
id="oauth-provider"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12 col-md-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">解绑 IM 账户</h3>
|
||
{if $user->im_type === 0}
|
||
<p>你的账户当前没有绑定任何 IM 服务</p>
|
||
{else}
|
||
<p>
|
||
当前绑定的 IM 服务：{$user->imType()}
|
||
<br>
|
||
账户 ID：<code>{$user->im_value}</code>
|
||
</p>
|
||
{/if}
|
||
</div>
|
||
{if $user->im_type !== 0}
|
||
<div class="card-footer">
|
||
<div class="d-flex">
|
||
<button class="btn btn-red ms-auto"
|
||
hx-post="/user/unbind_im" hx-swap="none">
|
||
解绑
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane" id="login_security" role="tabpanel">
|
||
<div class="row row-deck row-cards">
|
||
<div class="col-sm-12 col-md-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">多因素认证</h3>
|
||
<div class="col-md-12">
|
||
<div class="col-sm-6 col-md-6">
|
||
<i class="ti ti-brand-apple"></i>
|
||
<a target="view_window"
|
||
href="https://apps.apple.com/us/app/google-authenticator/id388497605">iOS
|
||
客户端
|
||
</a>
|
||
|
||
<i class="ti ti-brand-android"></i>
|
||
<a target="view_window"
|
||
href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">Android
|
||
客户端
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<br>
|
||
<div class="row">
|
||
<div class="col-md-3">
|
||
<p id="qrcode"></p>
|
||
</div>
|
||
<div class="col-md-9">
|
||
<div class="mb-3">
|
||
<select id="ga-enable" class="form-select">
|
||
<option value="0">不使用</option>
|
||
<option value="1"
|
||
{if $user->ga_enable === '1'}selected{/if}>
|
||
使用两步认证登录
|
||
</option>
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<input id="ga-test-code" type="text"
|
||
class="form-control"
|
||
placeholder="测试两步认证验证码">
|
||
</div>
|
||
<div class="col-md-12">
|
||
<p>密钥：
|
||
<code id="ga-token">
|
||
{$user->ga_token}
|
||
</code>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="d-flex">
|
||
<button class="btn btn-link"
|
||
hx-post="/user/ga_reset" hx-swap="none" >
|
||
重置
|
||
</button>
|
||
<button class="btn btn-link"
|
||
hx-post="/user/ga_check" hx-swap="none"
|
||
hx-vals='js:{ code: document.getElementById("ga-test-code").value }'>
|
||
测试
|
||
</button>
|
||
<button class="btn btn-primary ms-auto"
|
||
hx-post="/user/ga_set" hx-swap="none"
|
||
hx-vals='js:{ enable: document.getElementById("ga-enable").value }'>
|
||
设置
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12 col-md-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">修改登录密码</h3>
|
||
<div class="mb-3">
|
||
<form>
|
||
<input id="password" type="password" class="form-control"
|
||
placeholder="当前登录密码" autocomplete="off">
|
||
</form>
|
||
</div>
|
||
<div class="mb-3">
|
||
<form>
|
||
<input id="new_password" type="password"
|
||
class="form-control" placeholder="输入新密码"
|
||
autocomplete="off">
|
||
</form>
|
||
</div>
|
||
<div class="mb-3">
|
||
<form>
|
||
<input id="confirm_new_password" type="password"
|
||
class="form-control" placeholder="再次输入新密码"
|
||
autocomplete="off">
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="d-flex">
|
||
<button class="btn btn-primary ms-auto"
|
||
hx-post="/user/password" hx-swap="none"
|
||
hx-vals='js:{
|
||
new_password: document.getElementById("new_password").value,
|
||
confirm_new_password: document.getElementById("confirm_new_password").value,
|
||
password: document.getElementById("password").value
|
||
}'>
|
||
修改
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane" id="use_safety" role="tabpanel">
|
||
<div class="row row-deck row-cards">
|
||
<div class="col-sm-12 col-md-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">更换加密方式</h3>
|
||
<p>
|
||
不同的客户端支持的加密方式可能会有所不同，请参考客户端支持列表进行设置</p>
|
||
<div class="mb-3">
|
||
<select id="user-method" class="form-select">
|
||
{foreach $methods as $method}
|
||
<option value="{$method}"
|
||
{if $user->method === $method}selected{/if}>
|
||
{$method}
|
||
</option>
|
||
{/foreach}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="d-flex">
|
||
<button class="btn btn-primary ms-auto"
|
||
hx-post="/user/method" hx-swap="none"
|
||
hx-vals='js:{ method: document.getElementById("user-method").value }'>
|
||
修改
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12 col-md-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">重置订阅地址</h3>
|
||
<p>重置订阅地址后，旧的订阅地址将无法获取配置，但节点配置仍能使用。
|
||
如果希望作废旧节点配置请配合重置连接密码操作</p>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="d-flex">
|
||
<button class="btn btn-primary ms-auto bg-red"
|
||
hx-post="/user/url_reset" hx-swap="none">
|
||
重置
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12 col-md-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">重置连接密码</h3>
|
||
<p>重置连接密码与UUID ，重置后需更新订阅，才能继续使用</p>
|
||
<p>当前连接密码：<code id="passwd">{$user->passwd}</code></p>
|
||
<p>当前UUID：<code id="uuid">{$user->uuid}</code></p>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="d-flex">
|
||
<button class="btn btn-primary ms-auto bg-red"
|
||
hx-post="/user/passwd_reset" hx-swap="none">
|
||
重置
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-pane" id="other_settings" role="tabpanel">
|
||
<div class="row row-deck row-cards">
|
||
<div class="col-sm-12 col-md-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">每日流量报告</h3>
|
||
<div class="mb-3">
|
||
<select id="daily-mail" class="form-select">
|
||
<option value="0"
|
||
{if $user->daily_mail_enable === 0}selected{/if}>
|
||
不接收
|
||
</option>
|
||
<option value="1"
|
||
{if $user->daily_mail_enable === 1}selected{/if}>
|
||
邮件接收
|
||
</option>
|
||
<option value="2"
|
||
{if $user->daily_mail_enable === 2}selected{/if}>
|
||
IM 接收
|
||
</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="d-flex">
|
||
<button class="btn btn-primary ms-auto"
|
||
hx-post="/user/daily_mail" hx-swap="none"
|
||
hx-vals='js:{ mail: document.getElementById("daily-mail").value }'>
|
||
修改
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12 col-md-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">偏好的联系方式</h3>
|
||
<p>当 IM 未绑定时站点依然会向账户邮箱发送通知信息</p>
|
||
<div class="mb-3">
|
||
<select id="contact-method" class="form-select">
|
||
<option value="1"
|
||
{if $user->contact_method === 1}selected{/if}>
|
||
邮件
|
||
</option>
|
||
<option value="2"
|
||
{if $user->contact_method === 2}selected{/if}>
|
||
IM
|
||
</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="d-flex">
|
||
<button class="btn btn-primary ms-auto"
|
||
hx-post="/user/contact_method" hx-swap="none"
|
||
hx-vals='js:{ contact: document.getElementById("contact-method").value }'>
|
||
修改
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--
|
||
<div class="col-sm-12 col-md-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">修改主题</h3>
|
||
<div class="mb-3">
|
||
<select id="user-theme" class="form-select">
|
||
{foreach $themes as $theme}
|
||
<option value="{$theme}"
|
||
{if $user->theme === $theme}selected{/if}>{$theme}
|
||
</option>
|
||
{/foreach}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="d-flex">
|
||
<button class="btn btn-primary ms-auto"
|
||
hx-post="/user/theme" hx-swap="none"
|
||
hx-vals='js:{ theme: document.getElementById("user-theme").value }'>
|
||
修改
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
-->
|
||
{if $config['enable_kill']}
|
||
<div class="col-sm-12 col-md-6">
|
||
<div class="card">
|
||
<div class="card-stamp">
|
||
<div class="card-stamp-icon bg-red">
|
||
<i class="ti ti-circle-x"></i>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3 class="card-title">删除账户数据</h3>
|
||
</div>
|
||
<div class="card-footer">
|
||
<button class="btn btn-red" data-bs-toggle="modal"
|
||
data-bs-target="#destroy-account">
|
||
<i class="ti ti-trash icon"></i>
|
||
确认删除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{if $config['enable_kill']}
|
||
<div class="modal modal-blur fade" id="destroy-account" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
<div class="modal-status bg-danger"></div>
|
||
<div class="modal-body text-center py-4">
|
||
<i class="ti ti-alert-circle icon mb-2 text-danger icon-lg" style="font-size:3.5rem;"></i>
|
||
<h3>删除确认</h3>
|
||
<div class="text-secondary">
|
||
请确认是否真的要删除你的账户，此操作无法撤销，你的所有账户数据将会被从服务器上彻底删除
|
||
</div>
|
||
<div class="py-3">
|
||
<form>
|
||
<input id="confirm_kill_password" type="password" class="form-control"
|
||
placeholder="输入登录密码" autocomplete="off">
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<div class="w-100">
|
||
<div class="row">
|
||
<div class="col">
|
||
<button class="btn w-100" data-bs-dismiss="modal">
|
||
取消
|
||
</button>
|
||
</div>
|
||
<div class="col">
|
||
<button href="#" class="btn btn-danger w-100" data-bs-dismiss="modal"
|
||
hx-post="/user/kill" hx-swap="none"
|
||
hx-vals='js:{ password: document.getElementById("confirm_kill_password").value }'>
|
||
确认
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
|
||
<script>
|
||
let qrcode = new QRCode('qrcode', {
|
||
text: "{$ga_url}",
|
||
width: 128,
|
||
height: 128,
|
||
colorDark: '#000000',
|
||
colorLight: '#ffffff',
|
||
correctLevel: QRCode.CorrectLevel.H
|
||
});
|
||
|
||
{if $user->im_type === 0 && $user->im_value === ''}
|
||
let oauthProvider = $('#oauth-provider');
|
||
|
||
$("#imtype").on('change', function () {
|
||
if ($(this).val() === '0') {
|
||
oauthProvider.empty();
|
||
} else if ($(this).val() === '1') {
|
||
oauthProvider.empty();
|
||
oauthProvider.append(
|
||
"<a id='bind-slack' class='btn btn-azure ms-auto'>绑定 Slack</a>"
|
||
);
|
||
} else if ($(this).val() === '2') {
|
||
oauthProvider.empty();
|
||
oauthProvider.append(
|
||
"<a id='bind-discord' class='btn btn-indigo ms-auto'>绑定 Discord</a>"
|
||
);
|
||
} else if ($(this).val() === '4') {
|
||
oauthProvider.empty();
|
||
oauthProvider.append(
|
||
'<script async src=\"https://telegram.org/js/telegram-widget.js?22\"' +
|
||
' data-telegram-login=\"' + "{$public_setting['telegram_bot']}" +
|
||
'\" data-size=\"large" data-onauth=\"onTelegramAuth(user)\"' +
|
||
' data-request-access=\"write\"><\/script>'
|
||
);
|
||
}
|
||
});
|
||
|
||
oauthProvider.on('click', '#bind-slack', function () {
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "/oauth/slack",
|
||
dataType: "json",
|
||
success: function (data) {
|
||
handleOauthResult(data, 'slack')
|
||
}
|
||
})
|
||
});
|
||
|
||
oauthProvider.on('click', '#bind-discord', function () {
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "/oauth/discord",
|
||
dataType: "json",
|
||
success: function (data) {
|
||
handleOauthResult(data, 'discord')
|
||
}
|
||
})
|
||
});
|
||
|
||
function onTelegramAuth(user) {
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "/oauth/telegram",
|
||
dataType: "json",
|
||
data: {
|
||
user: JSON.stringify(user),
|
||
},
|
||
success: function (data) {
|
||
handleOauthResult(data, 'telegram')
|
||
}
|
||
})
|
||
}
|
||
|
||
function handleOauthResult(data, type = 'telegram') {
|
||
if (data.ret === 1) {
|
||
if (type === 'telegram') {
|
||
$('#success-message').text(data.msg);
|
||
$('#success-dialog').modal('show');
|
||
} else {
|
||
window.location.replace(data.redir);
|
||
}
|
||
} else {
|
||
$('#error-message').text(data.msg);
|
||
$('#fail-dialog').modal('show');
|
||
}
|
||
}
|
||
{/if}
|
||
</script>
|
||
|
||
{include file='user/footer.tpl'}
|