feat: improve responsive admin experience
This commit is contained in:
@@ -5,19 +5,19 @@
|
||||
|
||||
{% block content %}
|
||||
<section class="mx-auto max-w-3xl rounded-xl border border-line bg-white shadow-panel">
|
||||
<header class="border-b border-line px-6 py-6 sm:px-8">
|
||||
<header class="border-b border-line px-5 py-6 sm:px-8">
|
||||
<h1 class="text-2xl font-extrabold">账户安全</h1>
|
||||
<p class="mt-2 text-sm text-textSub">登录邮箱:{{ current_user.email }}</p>
|
||||
</header>
|
||||
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% for category, message in messages %}
|
||||
<p class="mx-6 mt-5 rounded-lg p-3 text-sm {{ 'bg-dangerSoft text-dangerText' if category == 'error' else 'bg-blueSoft text-primary' }} sm:mx-8">{{ message }}</p>
|
||||
<p class="mx-5 mt-5 rounded-lg p-3 text-sm {{ 'bg-dangerSoft text-dangerText' if category == 'error' else 'bg-blueSoft text-primary' }} sm:mx-8">{{ message }}</p>
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
|
||||
<div class="divide-y divide-line">
|
||||
<section class="px-6 py-7 sm:px-8">
|
||||
<section class="px-5 py-7 sm:px-8">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="material-symbols-outlined mt-0.5 text-primary">password</span>
|
||||
<div>
|
||||
@@ -30,18 +30,18 @@
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<input name="password" type="password" minlength="12" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="新密码">
|
||||
<input name="password_confirm" type="password" minlength="12" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="再次输入新密码">
|
||||
<button class="ui-btn ui-btn-primary sm:col-span-2 sm:w-fit">确认更新密码</button>
|
||||
<button class="ui-btn ui-btn-primary w-full sm:col-span-2 sm:w-fit">确认更新密码</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<form method="post" class="mt-5 flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<input name="current_password" type="password" required class="w-full rounded-lg border border-line px-3 py-2 sm:max-w-sm" placeholder="输入当前密码">
|
||||
<button class="ui-btn ui-btn-primary">发送密码验证码</button>
|
||||
<button class="ui-btn ui-btn-primary w-full sm:w-fit">发送密码验证码</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
<section class="px-6 py-7 sm:px-8">
|
||||
<section class="px-5 py-7 sm:px-8">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="material-symbols-outlined mt-0.5 text-primary">alternate_email</span>
|
||||
<div>
|
||||
@@ -54,11 +54,11 @@
|
||||
<input type="hidden" name="action" value="change_email">
|
||||
<input name="current_password" type="password" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="输入当前密码">
|
||||
<input name="new_email" type="email" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="新登录邮箱">
|
||||
<button class="ui-btn ui-btn-secondary sm:col-span-2 sm:w-fit">验证并更换邮箱</button>
|
||||
<button class="ui-btn ui-btn-secondary w-full sm:col-span-2 sm:w-fit">验证并更换邮箱</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="px-6 py-7 sm:px-8">
|
||||
<section class="px-5 py-7 sm:px-8">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="material-symbols-outlined mt-0.5 text-primary">devices</span>
|
||||
<div>
|
||||
@@ -70,7 +70,7 @@
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<input type="hidden" name="action" value="revoke_devices">
|
||||
<input name="current_password" type="password" required class="mb-3 w-full rounded-lg border border-line px-3 py-2 sm:max-w-sm" placeholder="输入当前密码以确认">
|
||||
<button class="ui-btn ui-btn-secondary">撤销所有受信设备</button>
|
||||
<button class="ui-btn ui-btn-secondary w-full sm:w-fit">撤销所有受信设备</button>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user