51 lines
2.9 KiB
HTML
51 lines
2.9 KiB
HTML
{{define "title"}}Set Up Two-Factor Authentication{{end}}
|
|
{{define "content"}}
|
|
<div style="max-width:32rem;width:100%">
|
|
<div style="margin-bottom:1.25rem">
|
|
<h1 style="font-size:1.125rem;font-weight:600;color:#f9fafb">Set Up Two-Factor Authentication</h1>
|
|
<p style="color:#6b7280;font-size:.8125rem;margin-top:.25rem">Scan the QR code with your authenticator app, or enter the secret manually.</p>
|
|
</div>
|
|
|
|
{{if .Error}}<div class="flash-err" style="margin-bottom:1rem">{{.Error}}</div>{{end}}
|
|
{{if .Flash}}<div class="flash-ok" style="margin-bottom:1rem">{{.Flash}}</div>{{end}}
|
|
|
|
<div style="background:#161b22;border:1px solid #21262d;border-radius:.5rem;padding:1.5rem;margin-bottom:1.25rem">
|
|
<h2 style="font-size:.875rem;font-weight:600;color:#d1d5db;margin-bottom:.875rem">Step 1 — Add to authenticator app</h2>
|
|
|
|
<!-- QR code via Google Charts API (no JS required) -->
|
|
<div style="text-align:center;margin-bottom:1rem">
|
|
<img src="https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl={{urlquery .OTPAuthURI}}&choe=UTF-8"
|
|
alt="QR code for TOTP enrollment"
|
|
style="border:6px solid #fff;border-radius:.25rem;display:inline-block"
|
|
width="200" height="200">
|
|
</div>
|
|
|
|
<p style="color:#6b7280;font-size:.75rem;margin-bottom:.5rem">Can't scan? Enter this secret manually in your app:</p>
|
|
<div style="background:#0d1117;border:1px solid #30363d;border-radius:.25rem;padding:.625rem .875rem;font-family:monospace;font-size:.875rem;color:#58a6ff;word-break:break-all;letter-spacing:.1em">
|
|
{{.Secret}}
|
|
</div>
|
|
<p style="color:#4b5563;font-size:.7rem;margin-top:.5rem">Algorithm: SHA-1 | Digits: 6 | Period: 30 seconds</p>
|
|
</div>
|
|
|
|
<div style="background:#161b22;border:1px solid #21262d;border-radius:.5rem;padding:1.5rem">
|
|
<h2 style="font-size:.875rem;font-weight:600;color:#d1d5db;margin-bottom:.875rem">Step 2 — Verify and enable</h2>
|
|
<p style="color:#6b7280;font-size:.8125rem;margin-bottom:1rem">Enter the 6-digit code shown in your authenticator app to confirm setup.</p>
|
|
<form method="POST" action="/settings/mfa/enroll">
|
|
<input type="hidden" name="csrf" value="{{.CSRF}}">
|
|
<div class="field">
|
|
<label for="code">Verification Code</label>
|
|
<input type="text" id="code" name="code" required
|
|
minlength="6" maxlength="6" inputmode="numeric"
|
|
autocomplete="one-time-code" autofocus
|
|
placeholder="000000"
|
|
style="letter-spacing:.2em;text-align:center;font-size:1.25rem">
|
|
</div>
|
|
<div style="display:flex;gap:.75rem;margin-top:.875rem">
|
|
<button type="submit" class="btn btn-primary" style="flex:1;justify-content:center">Enable Two-Factor Auth</button>
|
|
<a href="/settings" class="btn btn-ghost" style="flex:0 0 auto">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{{end}}
|