feat: refine email verification login flow

templates/verification.html

@@ -13,11 +13,11 @@
     <section class="w-full rounded-2xl border border-line bg-white p-5 shadow-panel sm:p-7">
       <span class="material-symbols-outlined text-4xl text-primary">mark_email_read</span>
       <h1 class="mt-3 text-2xl font-extrabold">{{ title }}</h1>
-      <p class="mt-2 text-sm leading-6 text-textSub">验证码已发送至 {{ email }}，10 分钟内有效。</p>
+      <p class="mt-2 text-sm leading-6 text-textSub">邮箱验证码已发送至 {{ email }}，10 分钟内有效。</p>
 
       {% with messages = get_flashed_messages(with_categories=true) %}
         {% for category, message in messages %}
-        <p class="mt-4 rounded-lg bg-dangerSoft p-3 text-sm text-dangerText">{{ message }}</p>
+        <p class="mt-4 rounded-lg p-3 text-sm {{ 'bg-dangerSoft text-dangerText' if category == 'error' else 'bg-blueSoft text-primaryDeep' }}">{{ message }}</p>
         {% endfor %}
       {% endwith %}
 
@@ -25,7 +25,7 @@
         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <input id="verificationCode" type="hidden" name="code" value="">
         <fieldset>
-          <legend class="text-sm font-semibold">请输入 6 位验证码</legend>
+          <legend class="text-sm font-semibold">请输入 6 位邮箱验证码</legend>
           <div class="mt-3 grid grid-cols-6 gap-1.5 sm:gap-2" id="codeInputs">
             {% for index in range(6) %}
             <input
@@ -33,7 +33,7 @@
               inputmode="numeric"
               autocomplete="one-time-code"
               maxlength="1"
-              aria-label="验证码第 {{ index + 1 }} 位"
+              aria-label="邮箱验证码第 {{ index + 1 }} 位"
               class="h-11 min-w-0 rounded-lg border border-line text-center text-lg font-bold tracking-wide focus:border-primary focus:ring-primary sm:h-12 sm:text-xl"
               data-code-digit
               {% if index == 0 %}autofocus{% endif %}
@@ -41,6 +41,18 @@
             {% endfor %}
           </div>
         </fieldset>
+        {% if purpose == 'login' %}
+        <label class="mt-5 flex cursor-pointer items-start gap-3 rounded-xl border border-blue-100 bg-blueSoft px-4 py-3.5 transition hover:border-primary hover:bg-blue-50/50">
+          <input name="trust_device" type="checkbox" class="mt-1 h-4 w-4 shrink-0 rounded border-slate-300 text-primary focus:ring-primary">
+          <span class="min-w-0">
+            <span class="flex items-center gap-2 font-bold text-textMain">
+              <span class="material-symbols-outlined text-lg text-primary" aria-hidden="true">devices</span>
+              信任此设备
+            </span>
+            <span class="mt-1 block text-sm leading-5 text-textSub">30 天内登录无需邮箱二次认证。</span>
+          </span>
+        </label>
+        {% endif %}
         <button id="verifyButton" class="ui-btn ui-btn-primary mt-6 w-full" type="submit">验证并继续</button>
       </form>