build-base
This commit is contained in:
@@ -0,0 +1,85 @@
|
||||
{{define "base"}}<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{template "title" .}} — mailgosend</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>tailwind.config={darkMode:'class'}</script>
|
||||
<style>
|
||||
body{font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px}
|
||||
.sidebar{width:200px;min-width:200px;background:#111827;border-right:1px solid #1f2937;min-height:100vh;display:flex;flex-direction:column;padding:.75rem 0}
|
||||
.sidebar-item{display:flex;align-items:center;justify-content:space-between;padding:.375rem .875rem;border-radius:.25rem;margin:0 .375rem;color:#9ca3af;cursor:pointer;text-decoration:none;font-size:.8125rem}
|
||||
.sidebar-item:hover{background:#1f2937;color:#f9fafb}
|
||||
.sidebar-item.active{background:#1e3a5f;color:#93c5fd}
|
||||
.sidebar-section{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#4b5563;padding:.5rem .875rem .25rem;margin-top:.5rem}
|
||||
.unread-badge{background:#1d4ed8;color:#fff;font-size:.65rem;padding:.1rem .35rem;border-radius:.75rem;font-weight:600;min-width:1.1rem;text-align:center}
|
||||
.btn{display:inline-flex;align-items:center;padding:.375rem .875rem;border-radius:.375rem;font-size:.8125rem;font-weight:500;cursor:pointer;border:none;text-decoration:none;transition:background .15s}
|
||||
.btn-primary{background:#1d4ed8;color:#fff}.btn-primary:hover{background:#1e40af}
|
||||
.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}
|
||||
.btn-ghost{background:transparent;color:#9ca3af;border:1px solid #374151}.btn-ghost:hover{background:#1f2937;color:#f9fafb}
|
||||
.btn-sm{padding:.25rem .625rem;font-size:.75rem}
|
||||
.msg-row{display:grid;align-items:center;padding:.5rem .875rem;border-bottom:1px solid #1f2937;cursor:pointer;gap:.5rem;grid-template-columns:auto 1fr auto auto}
|
||||
.msg-row:hover{background:#111827}
|
||||
.msg-row.unread{background:#0a1628}
|
||||
.msg-row.unread .msg-subject{font-weight:600;color:#f9fafb}
|
||||
.msg-from{font-size:.75rem;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
|
||||
.msg-subject{color:#d1d5db;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||||
.msg-date{font-size:.7rem;color:#4b5563;white-space:nowrap}
|
||||
.flash-ok{background:#064e3b;border:1px solid #065f46;color:#6ee7b7;padding:.625rem .875rem;border-radius:.375rem;margin-bottom:.875rem;font-size:.8125rem}
|
||||
.flash-err{background:#7f1d1d;border:1px solid #991b1b;color:#fca5a5;padding:.625rem .875rem;border-radius:.375rem;margin-bottom:.875rem;font-size:.8125rem}
|
||||
input,select,textarea{background:#1f2937;border:1px solid #374151;border-radius:.375rem;color:#f9fafb;padding:.375rem .625rem;font-size:.875rem;width:100%;box-sizing:border-box}
|
||||
input:focus,select:focus,textarea:focus{outline:none;border-color:#3b82f6}
|
||||
label{display:block;font-size:.75rem;color:#6b7280;margin-bottom:.2rem}
|
||||
.field{margin-bottom:.75rem}
|
||||
.tag{display:inline-block;padding:.1rem .3rem;border-radius:.2rem;font-size:.65rem;font-weight:600}
|
||||
.tag-green{background:#064e3b;color:#6ee7b7}
|
||||
.tag-red{background:#7f1d1d;color:#fca5a5}
|
||||
.tag-blue{background:#1e3a5f;color:#93c5fd}
|
||||
.tag-gray{background:#1f2937;color:#6b7280}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-950 text-gray-300 flex h-screen overflow-hidden" style="background:#0d1117">
|
||||
|
||||
{{if .User}}
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar flex-shrink-0">
|
||||
<div style="padding:.5rem .875rem .75rem;border-bottom:1px solid #1f2937;margin-bottom:.25rem">
|
||||
<div style="font-size:.75rem;font-weight:600;color:#f9fafb">{{.User.DisplayName}}</div>
|
||||
<div style="font-size:.7rem;color:#4b5563">{{.User.Email}}</div>
|
||||
</div>
|
||||
|
||||
<a href="/compose" class="btn btn-primary btn-sm" style="margin:.5rem .625rem .75rem;display:block;text-align:center">Compose</a>
|
||||
|
||||
<div class="sidebar-section">Folders</div>
|
||||
{{range .Mailboxes}}
|
||||
<a href="/mail/{{.ID}}" class="sidebar-item {{if $.CurrentBoxID}}{{if eq $.CurrentBoxID .ID}}active{{end}}{{end}}">
|
||||
<span>{{if mailboxLabel .Type}}{{mailboxLabel .Type}}{{else}}{{.Name}}{{end}}</span>
|
||||
</a>
|
||||
{{end}}
|
||||
|
||||
<div style="margin-top:auto;padding:.75rem .875rem 0;border-top:1px solid #1f2937">
|
||||
<a href="/settings" class="sidebar-item" style="margin:0;padding:.25rem 0;font-size:.75rem">Settings</a>
|
||||
<a href="/logout" class="sidebar-item" style="margin:0;padding:.25rem 0;font-size:.75rem;color:#4b5563">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main -->
|
||||
<div style="flex:1;overflow:hidden;display:flex;flex-direction:column;min-width:0">
|
||||
{{if .Flash}}<div class="flash-ok" style="margin:.625rem .875rem 0;border-radius:.375rem">{{.Flash}}</div>{{end}}
|
||||
{{if .Error}}<div class="flash-err" style="margin:.625rem .875rem 0;border-radius:.375rem">{{.Error}}</div>{{end}}
|
||||
{{template "content" .}}
|
||||
</div>
|
||||
|
||||
{{else}}
|
||||
<!-- Public pages (login) -->
|
||||
<div style="flex:1;display:flex;align-items:center;justify-content:center">
|
||||
{{if .Flash}}<div class="flash-ok" style="position:fixed;top:1rem;left:50%;transform:translateX(-50%)">{{.Flash}}</div>{{end}}
|
||||
{{if .Error}}<div class="flash-err" style="position:fixed;top:1rem;left:50%;transform:translateX(-50%)">{{.Error}}</div>{{end}}
|
||||
{{template "content" .}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
@@ -0,0 +1,47 @@
|
||||
{{define "title"}}Compose{{end}}
|
||||
{{define "content"}}
|
||||
<div style="display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem;border-bottom:1px solid #1f2937;background:#0d1117;flex-shrink:0">
|
||||
<span style="font-weight:600;color:#f9fafb;font-size:.875rem">New Message</span>
|
||||
<div style="flex:1"></div>
|
||||
<a href="javascript:history.back()" class="btn btn-ghost btn-sm">Discard</a>
|
||||
</div>
|
||||
|
||||
<div style="flex:1;overflow-y:auto;padding:1rem 1.25rem">
|
||||
<form method="POST" action="/compose">
|
||||
<input type="hidden" name="_csrf" value="{{.CSRF}}">
|
||||
<input type="hidden" name="in_reply_to" value="{{.InReplyTo}}">
|
||||
<input type="hidden" name="references" value="{{.References}}">
|
||||
|
||||
<div class="field">
|
||||
<label for="to">To</label>
|
||||
<input type="text" id="to" name="to" required value="{{.To}}"
|
||||
placeholder="recipient@example.com, another@example.com"
|
||||
maxlength="2048">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="cc">CC</label>
|
||||
<input type="text" id="cc" name="cc" value="{{.CC}}"
|
||||
placeholder="optional" maxlength="2048">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="bcc">BCC</label>
|
||||
<input type="text" id="bcc" name="bcc" placeholder="optional" maxlength="2048">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="subject">Subject</label>
|
||||
<input type="text" id="subject" name="subject" value="{{.Subject}}"
|
||||
placeholder="Subject" maxlength="998">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="body">Message</label>
|
||||
<textarea id="body" name="body" rows="20"
|
||||
style="font-family:ui-monospace,monospace;font-size:.8125rem;resize:vertical;min-height:320px"
|
||||
placeholder="Write your message here...">{{.BodyText}}</textarea>
|
||||
</div>
|
||||
<div style="display:flex;gap:.5rem">
|
||||
<button type="submit" class="btn btn-primary">Send</button>
|
||||
<a href="javascript:history.back()" class="btn btn-ghost">Discard</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -0,0 +1,25 @@
|
||||
{{define "title"}}Sign in{{end}}
|
||||
{{define "content"}}
|
||||
<div style="width:22rem">
|
||||
<div style="text-align:center;margin-bottom:2rem">
|
||||
<div style="font-size:1.5rem;font-weight:700;color:#f9fafb">mailgosend</div>
|
||||
<div style="font-size:.875rem;color:#4b5563;margin-top:.25rem">Sign in to your account</div>
|
||||
</div>
|
||||
<div style="background:#161b22;border:1px solid #21262d;border-radius:.5rem;padding:1.5rem">
|
||||
{{if .Error}}<div class="flash-err" style="margin-bottom:1rem">{{.Error}}</div>{{end}}
|
||||
<form method="POST" action="/login">
|
||||
<div class="field">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" required maxlength="254"
|
||||
autocomplete="username" autofocus placeholder="you@example.com">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" required maxlength="1024"
|
||||
autocomplete="current-password">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;margin-top:.5rem">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -0,0 +1,67 @@
|
||||
{{define "title"}}{{if .CurrentBox}}{{.CurrentBox.Name}}{{else}}Mail{{end}}{{end}}
|
||||
{{define "content"}}
|
||||
<!-- Toolbar -->
|
||||
<div style="display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem;border-bottom:1px solid #1f2937;background:#0d1117;flex-shrink:0">
|
||||
<span style="font-weight:600;color:#f9fafb;font-size:.875rem">{{if .CurrentBox}}{{.CurrentBox.Name}}{{end}}</span>
|
||||
<span style="color:#4b5563;font-size:.75rem;margin-left:.25rem">{{.TotalCount}} messages</span>
|
||||
<div style="flex:1"></div>
|
||||
<!-- Search -->
|
||||
<form method="GET" style="display:flex;gap:.375rem">
|
||||
<input type="hidden" name="boxid" value="{{if .CurrentBox}}{{.CurrentBox.ID}}{{end}}">
|
||||
<input type="search" name="q" value="{{.Query}}" placeholder="Search..." style="width:200px;font-size:.75rem;padding:.25rem .5rem">
|
||||
<button type="submit" class="btn btn-ghost btn-sm">Search</button>
|
||||
{{if .Query}}<a href="/mail/{{if .CurrentBox}}{{.CurrentBox.ID}}{{end}}" class="btn btn-ghost btn-sm">Clear</a>{{end}}
|
||||
</form>
|
||||
{{if .CurrentBox}}
|
||||
<form method="POST" action="/mail/{{.CurrentBox.ID}}/expunge">
|
||||
<input type="hidden" name="_csrf" value="{{.CSRF}}">
|
||||
<button type="submit" class="btn btn-ghost btn-sm" onclick="return confirm('Permanently delete all messages marked for deletion?')">Expunge</button>
|
||||
</form>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<!-- Message list -->
|
||||
<div style="flex:1;overflow-y:auto">
|
||||
{{if .Messages}}
|
||||
{{range .Messages}}
|
||||
<a href="/mail/{{$.CurrentBox.ID}}/{{.UID}}" style="text-decoration:none;color:inherit;display:block"
|
||||
class="msg-row {{if not .IsRead}}unread{{end}}">
|
||||
<!-- Star -->
|
||||
<form method="POST" action="/mail/{{$.CurrentBox.ID}}/{{.UID}}/flag" style="display:contents">
|
||||
<input type="hidden" name="_csrf" value="{{$.CSRF}}">
|
||||
<input type="hidden" name="flag" value="star">
|
||||
<input type="hidden" name="return" value="/mail/{{$.CurrentBox.ID}}">
|
||||
<button type="submit" style="background:none;border:none;cursor:pointer;padding:0;font-size:.875rem;color:{{if .IsStarred}}#eab308{{else}}#374151{{end}}">
|
||||
{{if .IsStarred}}*{{else}}.{{end}}
|
||||
</button>
|
||||
</form>
|
||||
<!-- From + Subject -->
|
||||
<div style="min-width:0">
|
||||
<div class="msg-from">{{if .FromName}}{{truncate .FromName 30}}{{else}}{{.FromEmail}}{{end}}</div>
|
||||
<div class="msg-subject">{{if .Subject}}{{truncate .Subject 80}}{{else}}(no subject){{end}}</div>
|
||||
</div>
|
||||
<!-- Attachments + Date -->
|
||||
<div style="display:flex;align-items:center;gap:.375rem">
|
||||
{{if .HasAttachment}}<span class="tag tag-gray" style="font-size:.6rem">att</span>{{end}}
|
||||
</div>
|
||||
<div class="msg-date">{{shortDate .Date}}</div>
|
||||
</a>
|
||||
{{end}}
|
||||
|
||||
<!-- Pagination -->
|
||||
<div style="display:flex;justify-content:space-between;padding:.625rem .875rem;border-top:1px solid #1f2937">
|
||||
{{if .PrevPage}}
|
||||
<a href="/mail/{{.CurrentBox.ID}}?before={{.PrevPage}}" class="btn btn-ghost btn-sm">Newer</a>
|
||||
{{else}}<span></span>{{end}}
|
||||
{{if .NextPage}}
|
||||
<a href="/mail/{{.CurrentBox.ID}}?before={{.NextPage}}" class="btn btn-ghost btn-sm">Older</a>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
{{else}}
|
||||
<div style="display:flex;align-items:center;justify-content:center;height:60%;color:#374151;flex-direction:column;gap:.5rem">
|
||||
<div style="font-size:.875rem">{{if .Query}}No messages match your search.{{else}}No messages.{{end}}</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -0,0 +1,86 @@
|
||||
{{define "title"}}{{if .Message}}{{.Message.Subject}}{{else}}Message{{end}}{{end}}
|
||||
{{define "content"}}
|
||||
<!-- Message toolbar -->
|
||||
<div style="display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem;border-bottom:1px solid #1f2937;background:#0d1117;flex-shrink:0">
|
||||
<a href="/mail/{{.CurrentBox.ID}}" class="btn btn-ghost btn-sm">Back</a>
|
||||
<div style="flex:1"></div>
|
||||
|
||||
<!-- Prev / Next -->
|
||||
{{if .NextUID}}<a href="/mail/{{.CurrentBox.ID}}/{{.NextUID}}" class="btn btn-ghost btn-sm">Newer</a>{{end}}
|
||||
{{if .PrevUID}}<a href="/mail/{{.CurrentBox.ID}}/{{.PrevUID}}" class="btn btn-ghost btn-sm">Older</a>{{end}}
|
||||
|
||||
<!-- Actions -->
|
||||
<a href="/compose?action=reply&boxid={{.CurrentBox.ID}}&uid={{.Message.UID}}" class="btn btn-primary btn-sm">Reply</a>
|
||||
<a href="/compose?action=forward&boxid={{.CurrentBox.ID}}&uid={{.Message.UID}}" class="btn btn-ghost btn-sm">Forward</a>
|
||||
|
||||
<form method="POST" action="/mail/{{.CurrentBox.ID}}/{{.Message.UID}}/trash">
|
||||
<input type="hidden" name="_csrf" value="{{.CSRF}}">
|
||||
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
|
||||
</form>
|
||||
|
||||
<!-- Star toggle -->
|
||||
<form method="POST" action="/mail/{{.CurrentBox.ID}}/{{.Message.UID}}/flag">
|
||||
<input type="hidden" name="_csrf" value="{{.CSRF}}">
|
||||
<input type="hidden" name="flag" value="star">
|
||||
<button type="submit" class="btn btn-ghost btn-sm">{{if .Message.IsStarred}}Unstar{{else}}Star{{end}}</button>
|
||||
</form>
|
||||
|
||||
<!-- Move to folder -->
|
||||
{{if $.Mailboxes}}
|
||||
<form method="POST" action="/mail/{{.CurrentBox.ID}}/{{.Message.UID}}/move" style="display:flex;gap:.25rem">
|
||||
<input type="hidden" name="_csrf" value="{{.CSRF}}">
|
||||
<select name="dest_box" style="font-size:.75rem;padding:.2rem .4rem;width:auto">
|
||||
{{range $.Mailboxes}}
|
||||
{{if ne .ID $.CurrentBox.ID}}
|
||||
<option value="{{.ID}}">{{if mailboxLabel .Type}}{{mailboxLabel .Type}}{{else}}{{.Name}}{{end}}</option>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</select>
|
||||
<button type="submit" class="btn btn-ghost btn-sm">Move</button>
|
||||
</form>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<!-- Message header -->
|
||||
<div style="padding:.875rem 1.25rem;border-bottom:1px solid #1f2937;background:#0d1117;flex-shrink:0">
|
||||
<h1 style="font-size:1.0625rem;font-weight:600;color:#f9fafb;margin:0 0 .625rem">
|
||||
{{if .Message.Subject}}{{.Message.Subject}}{{else}}(no subject){{end}}
|
||||
</h1>
|
||||
<div style="display:grid;grid-template-columns:auto 1fr;gap:.2rem .625rem;font-size:.8125rem">
|
||||
<span style="color:#4b5563">From</span>
|
||||
<span style="color:#d1d5db">{{if .Message.FromName}}{{.Message.FromName}} <{{.Message.FromEmail}}>{{else}}{{.Message.FromEmail}}{{end}}</span>
|
||||
<span style="color:#4b5563">To</span>
|
||||
<span style="color:#d1d5db">{{.Message.ToList}}</span>
|
||||
<span style="color:#4b5563">Date</span>
|
||||
<span style="color:#d1d5db">{{shortTime .Message.Date}}</span>
|
||||
{{if .Message.MessageID}}
|
||||
<span style="color:#4b5563">Message-ID</span>
|
||||
<span style="color:#4b5563;font-size:.7rem;font-family:monospace">{{.Message.MessageID}}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
{{if .Body.Attachments}}
|
||||
<div style="margin-top:.625rem;display:flex;gap:.375rem;flex-wrap:wrap">
|
||||
{{range .Body.Attachments}}
|
||||
<span class="tag tag-blue">{{if .Filename}}{{truncate .Filename 40}}{{else}}{{.ContentType}}{{end}}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<!-- Message body -->
|
||||
<div style="flex:1;overflow-y:auto">
|
||||
{{if .Body.HTML}}
|
||||
<iframe sandbox="allow-same-origin"
|
||||
srcdoc="{{.Body.HTML}}"
|
||||
style="width:100%;min-height:480px;border:none;background:#fff"
|
||||
onload="this.style.height=(this.contentDocument.documentElement.scrollHeight+32)+'px'">
|
||||
</iframe>
|
||||
{{else if .Body.Text}}
|
||||
<div style="padding:1.25rem;background:#0d1117">
|
||||
<pre style="font-family:ui-monospace,monospace;font-size:.8125rem;line-height:1.6;color:#d1d5db;white-space:pre-wrap;word-break:break-word;margin:0">{{.Body.Text}}</pre>
|
||||
</div>
|
||||
{{else}}
|
||||
<div style="padding:1.25rem;color:#4b5563;font-size:.875rem">(no content)</div>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -0,0 +1,31 @@
|
||||
{{define "title"}}Two-Factor Authentication{{end}}
|
||||
{{define "content"}}
|
||||
<div style="width:22rem">
|
||||
<div style="text-align:center;margin-bottom:2rem">
|
||||
<div style="font-size:1.5rem;font-weight:700;color:#f9fafb">mailgosend</div>
|
||||
<div style="font-size:.875rem;color:#4b5563;margin-top:.25rem">Two-factor authentication required</div>
|
||||
</div>
|
||||
<div style="background:#161b22;border:1px solid #21262d;border-radius:.5rem;padding:1.5rem">
|
||||
{{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}}
|
||||
<p style="color:#9ca3af;font-size:.8125rem;margin-bottom:1.25rem">
|
||||
Enter the 6-digit code from your authenticator app, or an 8-character backup code.
|
||||
</p>
|
||||
<form method="POST" action="/login/mfa">
|
||||
<input type="hidden" name="csrf" value="{{.CSRF}}">
|
||||
<div class="field">
|
||||
<label for="code">Authentication Code</label>
|
||||
<input type="text" id="code" name="code" required
|
||||
minlength="6" maxlength="64"
|
||||
autocomplete="one-time-code" autofocus
|
||||
inputmode="numeric" placeholder="000000"
|
||||
style="letter-spacing:.15em;text-align:center;font-size:1.25rem">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;margin-top:.5rem">Verify</button>
|
||||
</form>
|
||||
<div style="margin-top:1rem;text-align:center">
|
||||
<a href="/login" style="font-size:.8rem;color:#4b5563">Back to login</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -0,0 +1,50 @@
|
||||
{{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}}
|
||||
@@ -0,0 +1,82 @@
|
||||
{{define "title"}}Settings{{end}}
|
||||
{{define "content"}}
|
||||
<div style="padding:.5rem .875rem;border-bottom:1px solid #1f2937;background:#0d1117;flex-shrink:0">
|
||||
<span style="font-weight:600;color:#f9fafb;font-size:.875rem">Settings</span>
|
||||
</div>
|
||||
|
||||
<div style="flex:1;overflow-y:auto;padding:1.25rem;max-width:40rem">
|
||||
|
||||
<!-- Account info -->
|
||||
<div style="background:#161b22;border:1px solid #21262d;border-radius:.5rem;padding:1rem;margin-bottom:1rem">
|
||||
<div style="font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:.75rem">Account</div>
|
||||
<div style="font-size:.8125rem;color:#9ca3af;display:grid;grid-template-columns:auto 1fr;gap:.3rem .75rem">
|
||||
<span>Email</span><span style="color:#d1d5db">{{.AccountUser.Email}}</span>
|
||||
<span>Storage used</span><span style="color:#d1d5db">{{humanBytes .AccountUser.UsedBytes}} of {{if .AccountUser.QuotaBytes}}{{humanBytes .AccountUser.QuotaBytes}}{{else}}unlimited{{end}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Display name -->
|
||||
<div style="background:#161b22;border:1px solid #21262d;border-radius:.5rem;padding:1rem;margin-bottom:1rem">
|
||||
<div style="font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:.75rem">Display Name</div>
|
||||
<form method="POST" action="/settings/display">
|
||||
<input type="hidden" name="_csrf" value="{{.CSRF}}">
|
||||
<div class="field">
|
||||
<label for="display_name">Display name shown in sent emails</label>
|
||||
<input type="text" id="display_name" name="display_name"
|
||||
value="{{.AccountUser.DisplayName}}" maxlength="255">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Change password -->
|
||||
<div style="background:#161b22;border:1px solid #21262d;border-radius:.5rem;padding:1rem;margin-bottom:1rem">
|
||||
<div style="font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:.75rem">Change Password</div>
|
||||
<form method="POST" action="/settings/password">
|
||||
<input type="hidden" name="_csrf" value="{{.CSRF}}">
|
||||
<div class="field">
|
||||
<label>Current password</label>
|
||||
<input type="password" name="current_password" required maxlength="1024"
|
||||
autocomplete="current-password">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>New password (min 8 characters)</label>
|
||||
<input type="password" name="new_password" required minlength="8" maxlength="1024"
|
||||
autocomplete="new-password">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Confirm new password</label>
|
||||
<input type="password" name="confirm_password" required maxlength="1024"
|
||||
autocomplete="new-password">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-sm"
|
||||
onclick="return confirm('Change your password? All other sessions will be logged out.')">
|
||||
Change password
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Two-factor authentication -->
|
||||
<div style="background:#161b22;border:1px solid #21262d;border-radius:.5rem;padding:1rem">
|
||||
<div style="font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;margin-bottom:.75rem">Two-Factor Authentication</div>
|
||||
{{if .AccountUser.MFAEnabled}}
|
||||
<p style="color:#6ee7b7;font-size:.8125rem;margin-bottom:.875rem">Two-factor authentication is enabled on your account.</p>
|
||||
<form method="POST" action="/settings/mfa/disable"
|
||||
onsubmit="return confirm('Disable two-factor authentication? This reduces your account security.')">
|
||||
<input type="hidden" name="_csrf" value="{{.CSRF}}">
|
||||
<div class="field">
|
||||
<label>Current password (required to disable)</label>
|
||||
<input type="password" name="password" required maxlength="1024" autocomplete="current-password">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-danger btn-sm">Disable Two-Factor Auth</button>
|
||||
</form>
|
||||
{{else}}
|
||||
<p style="color:#9ca3af;font-size:.8125rem;margin-bottom:.875rem">
|
||||
Two-factor authentication is not enabled. Adding it significantly improves your account security.
|
||||
</p>
|
||||
<a href="/settings/mfa/enroll" class="btn btn-primary btn-sm">Set Up Two-Factor Auth</a>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user