2026-08-12 21:14:19 +01:00
{{define "webmail_account.html"}}
<!DOCTYPE html>
< html lang = "en" data-bs-theme = "dark" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2026-08-15 21:49:25 +01:00
< title > Settings - Webmail</ title >
2026-08-14 13:04:55 +01:00
< link href = "/webmail/static/vendor/bootstrap/css/bootstrap.min.css" rel = "stylesheet" >
< link href = "/webmail/static/vendor/bootstrap-icons/font/bootstrap-icons.css" rel = "stylesheet" >
2026-08-15 21:49:25 +01:00
< link href = "/webmail/static/vendor/quill/quill.snow.css" rel = "stylesheet" >
2026-08-12 21:14:19 +01:00
< style >
body { background-color : #1a1a1a ; color : #e0e0e0 ; }
. table-dark { --bs-table-bg : #2d2d2d ; --bs-table-border-color : #404040 ; }
</ style >
2026-08-15 21:49:25 +01:00
{{template "webmail_settings_style" .}}
2026-08-12 21:14:19 +01:00
</ head >
< body >
2026-08-14 13:04:55 +01:00
{{template "csrf_script" .}}
2026-08-15 21:49:25 +01:00
< nav class = "navbar navbar-expand-lg navbar-dark bg-dark" >
2026-08-12 21:14:19 +01:00
< div class = "container-fluid" >
< span class = "navbar-brand mb-0 h1" >< i class = "bi bi-inbox-fill me-2" ></ i > Webmail < small class = "text-muted" > {{.mailbox.Email}}</ small ></ span >
2026-08-14 13:04:55 +01:00
< div class = "navbar-nav flex-row gap-2 ms-auto" >
< a href = "/webmail/mail/INBOX" class = "btn btn-outline-light btn-sm" >< i class = "bi bi-envelope me-1" ></ i > Mail</ a >
< button type = "button" onclick = "openCompose('/webmail/mail/compose')" class = "btn btn-outline-light btn-sm" >< i class = "bi bi-pencil-square me-1" ></ i > Compose</ button >
< form method = "post" action = "/webmail/logout" class = "d-inline" >
< button type = "submit" class = "btn btn-outline-light btn-sm" >< i class = "bi bi-box-arrow-right me-1" ></ i > Sign out</ button >
</ form >
</ div >
2026-08-12 21:14:19 +01:00
</ div >
</ nav >
< div class = "toast-container position-fixed top-0 end-0 p-3" style = "z-index: 1090;" >
{{range .flashes}}
2026-08-15 16:31:27 +01:00
< div class = "toast align-items-center text-bg-{{if eq .Category " error "}} danger {{ else }}{{. Category }}{{ end }} border-0 " role = "alert" aria-live = "assertive" aria-atomic = "true" >
2026-08-12 21:14:19 +01:00
< div class = "d-flex" >
< div class = "toast-body" >
< i class = "bi bi-{{if eq .Category " error "}} exclamation-triangle {{ else if eq . Category " success "}} check-circle {{ else }} info-circle {{ end }} me-2 " ></ i >
{{.Message}}
</ div >
< button type = "button" class = "btn-close btn-close-white me-2 m-auto" data-bs-dismiss = "toast" aria-label = "Close" ></ button >
</ div >
</ div >
{{end}}
</ div >
2026-08-15 21:49:25 +01:00
< div id = "settingsPanelRoot" >
< div class = "settings-card" id = "settingsPanel" >
< div class = "settings-card-header" >
< h5 class = "mb-0" >< i class = "bi bi-sliders me-2" ></ i > Settings</ h5 >
< button type = "button" class = "btn-close btn-close-white" onclick = "closeSettings()" aria-label = "Close" ></ button >
</ div >
< div class = "settings-card-body" >
{{template "webmail_settings_nav" .}}
< div class = "settings-body" >
< div class = "card mb-4" >
< div class = "card-header" >< h6 class = "mb-0" >< i class = "bi bi-hdd me-2" ></ i > Storage</ h6 ></ div >
2026-08-12 21:14:19 +01:00
< div class = "card-body" >
< div class = "progress mb-2" style = "height: 1.25rem;" >
< div class = "progress-bar {{if ge .pct_full 90.0}}bg-danger{{else if ge .pct_full 75.0}}bg-warning{{else}}bg-success{{end}}" style = "width: {{printf " %. 0f " . pct_full }}%" > {{printf "%.0f" .pct_full}}%</ div >
</ div >
< small class = "text-muted" > {{filesize .mailbox.UsedBytes}} of {{filesize .mailbox.QuotaBytes}} used</ small >
</ div >
</ div >
2026-08-15 21:49:25 +01:00
< div class = "card mb-4" >
< div class = "card-header" >< h6 class = "mb-0" >< i class = "bi bi-sliders me-2" ></ i > Preferences</ h6 ></ div >
2026-08-15 12:35:44 +01:00
< div class = "card-body" >
< form method = "POST" action = "/webmail/account/preferences" >
< label class = "form-label" > Group similar subjects in the message list</ label >
< select class = "form-select" name = "group_messages" >
< option value = "false" {{ if not . mailbox . GroupMessages }} selected {{ end }} > No — show every message separately</ option >
< option value = "true" {{ if . mailbox . GroupMessages }} selected {{ end }} > Yes — collapse a run of same-subject messages into one expandable row</ option >
</ select >
< button type = "submit" class = "btn btn-primary btn-sm mt-2" >< i class = "bi bi-check-lg me-1" ></ i > Save</ button >
</ form >
< hr >
< form method = "POST" action = "/webmail/account/rebuild-cache" >
< label class = "form-label" > Refresh sender names & previews for existing mail</ label >
< div class = "form-text mb-2" > Mail already in your folders keeps whatever sender name/preview it was stored with — this only changes going forward automatically. Use this once to bring older messages up to date.</ div >
< button type = "submit" class = "btn btn-outline-secondary btn-sm" >< i class = "bi bi-arrow-repeat me-1" ></ i > Refresh now</ button >
</ form >
</ div >
</ div >
2026-08-15 21:49:25 +01:00
< div class = "card mb-4" >
< div class = "card-header" >< h6 class = "mb-0" >< i class = "bi bi-image me-2" ></ i > Remote Images</ h6 ></ div >
2026-08-15 18:38:11 +01:00
< div class = "card-body" >
< div class = "form-text mb-2" > HTML emails can embed images loaded from the sender's own server — a classic tracking pixel. Choose how those are handled.</ div >
< form method = "POST" action = "/webmail/account/remote-images-mode" >
< div class = "form-check" >
< input class = "form-check-input" type = "radio" name = "remote_images_mode" value = "ask" id = "rim-ask" {{ if eq . mailbox . RemoteImagesMode " ask "}} checked {{ end }} >
< label class = "form-check-label" for = "rim-ask" > Ask to show remote images < span class = "text-muted" > (default)</ span ></ label >
</ div >
< div class = "form-check" >
< input class = "form-check-input" type = "radio" name = "remote_images_mode" value = "trusted" id = "rim-trusted" {{ if eq . mailbox . RemoteImagesMode " trusted "}} checked {{ end }} >
< label class = "form-check-label" for = "rim-trusted" > Show automatically for senders on my trusted list below</ label >
</ div >
< div class = "form-check mb-2" >
< input class = "form-check-input" type = "radio" name = "remote_images_mode" value = "always" id = "rim-always" {{ if eq . mailbox . RemoteImagesMode " always "}} checked {{ end }} >
< label class = "form-check-label" for = "rim-always" > Always show remote images < span class = "text-danger" > (not recommended)</ span ></ label >
</ div >
< button type = "submit" class = "btn btn-primary btn-sm" >< i class = "bi bi-check-lg me-1" ></ i > Save</ button >
</ form >
< hr >
< h6 > Trusted senders</ h6 >
< form method = "POST" action = "/webmail/account/trusted-senders/add" class = "row g-2 align-items-end mb-3" >
< div class = "col-auto" >
< input type = "email" class = "form-control form-control-sm" name = "email" placeholder = "sender@example.com" required >
</ div >
< div class = "col-auto" >
< button type = "submit" class = "btn btn-outline-primary btn-sm" >< i class = "bi bi-plus-lg me-1" ></ i > Add</ button >
</ div >
</ form >
{{if .trusted_senders}}
< ul class = "list-group list-group-flush" >
{{range .trusted_senders}}
< li class = "list-group-item list-group-item-dark d-flex justify-content-between align-items-center" >
{{.Email}}
< form method = "post" action = "/webmail/account/trusted-senders/{{.ID}}/remove" class = "d-inline" >
< button type = "submit" class = "btn btn-outline-danger btn-sm" >< i class = "bi bi-trash" ></ i ></ button >
</ form >
</ li >
{{end}}
</ ul >
{{else}}
< p class = "text-muted mb-0" > No trusted senders yet.</ p >
{{end}}
</ div >
</ div >
2026-08-15 21:49:25 +01:00
< div class = "card mb-4" >
< div class = "card-header" >< h6 class = "mb-0" >< i class = "bi bi-key-fill me-2" ></ i > Change Password</ h6 ></ div >
2026-08-12 21:14:19 +01:00
< div class = "card-body" >
< form method = "POST" action = "/webmail/account/password" >
< div class = "mb-3" >
< label class = "form-label" > Current Password</ label >
< input type = "password" class = "form-control" name = "current_password" required >
</ div >
< div class = "mb-3" >
< label class = "form-label" > New Password</ label >
< input type = "password" class = "form-control" name = "new_password" required minlength = "10" >
< div class = "form-text" > At least 10 characters, with a letter, a number, and a symbol.</ div >
</ div >
< div class = "mb-3" >
< label class = "form-label" > Confirm New Password</ label >
< input type = "password" class = "form-control" name = "new_password_confirm" required >
</ div >
< button type = "submit" class = "btn btn-primary" >< i class = "bi bi-check-lg me-1" ></ i > Update Password</ button >
</ form >
</ div >
</ div >
2026-08-15 21:49:25 +01:00
< div class = "card mb-4" >
< div class = "card-header" >< h6 class = "mb-0" >< i class = "bi bi-shield-lock me-2" ></ i > Two-Factor Authentication</ h6 ></ div >
2026-08-12 21:14:19 +01:00
< div class = "card-body" >
< h6 > Authenticator App</ h6 >
{{if .mailbox.TOTPEnabled}}
< p class = "text-success" >< i class = "bi bi-check-circle me-1" ></ i > Enabled</ p >
< form method = "post" action = "/webmail/account/totp/disable" >
< button type = "submit" class = "btn btn-outline-danger btn-sm" data-confirm = "Disable authenticator app MFA?" > Disable</ button >
</ form >
{{else}}
< p class = "text-muted" > Not enabled.</ p >
< form method = "post" action = "/webmail/account/totp/setup" >
< button type = "submit" class = "btn btn-outline-primary btn-sm" >< i class = "bi bi-qr-code me-1" ></ i > Set Up</ button >
</ form >
{{end}}
< hr >
< h6 > Passkeys</ h6 >
{{if .passkeys}}
< ul class = "list-group list-group-flush mb-3" >
{{range .passkeys}}
< li class = "list-group-item list-group-item-dark d-flex justify-content-between align-items-center" >
{{.Name}}
< form method = "post" action = "/webmail/account/passkey/{{.ID}}/remove" class = "d-inline" >
< button type = "submit" class = "btn btn-outline-danger btn-sm" data-confirm = "Remove passkey "{{.Name}}"?" >< i class = "bi bi-trash" ></ i ></ button >
</ form >
</ li >
{{end}}
</ ul >
{{else}}
< p class = "text-muted" > No passkeys registered.</ p >
{{end}}
< button type = "button" class = "btn btn-outline-primary btn-sm" id = "passkey-add-btn" >< i class = "bi bi-fingerprint me-1" ></ i > Add a Passkey</ button >
< div id = "passkey-error" class = "alert alert-danger d-none mt-2" ></ div >
</ div >
</ div >
< div class = "card" >
2026-08-15 21:49:25 +01:00
< div class = "card-header" >< h6 class = "mb-0" >< i class = "bi bi-key me-2" ></ i > App Passwords</ h6 ></ div >
2026-08-12 21:14:19 +01:00
< div class = "card-body" >
< div class = "alert alert-info" >
< i class = "bi bi-info-circle me-2" ></ i > Use an app password (never your account password) to set up this mailbox in Thunderbird or any other mail client.
</ div >
< form method = "POST" action = "/webmail/account/apppasswords/add" class = "row g-2 align-items-end mb-3" >
< div class = "col-auto" >
< label class = "form-label" > Label</ label >
< input type = "text" class = "form-control" name = "label" placeholder = "e.g. Thunderbird laptop" >
</ div >
< div class = "col-auto" >
< button type = "submit" class = "btn btn-success" >< i class = "bi bi-key me-2" ></ i > Generate</ button >
</ div >
</ form >
{{if .passwords}}
< div class = "table-responsive" >
< table class = "table table-dark table-hover mb-0" >
< thead >< tr >< th > Label</ th >< th > Last Used</ th >< th ></ th ></ tr ></ thead >
< tbody >
{{range .passwords}}
< tr >
< td > {{.Label}}</ td >
< td >< small class = "text-muted" > {{if .LastUsedAt}}{{strftime "%Y-%m-%d %H:%M" .LastUsedAt}}{{else}}Never{{end}}</ small ></ td >
< td >
< form method = "post" action = "/webmail/account/apppasswords/{{.ID}}/revoke" class = "d-inline" >
< button type = "submit" class = "btn btn-outline-danger btn-sm" data-confirm = "Revoke app password "{{.Label}}"?" >< i class = "bi bi-trash" ></ i ></ button >
</ form >
</ td >
</ tr >
{{end}}
</ tbody >
</ table >
</ div >
{{else}}
< p class = "text-muted mb-0" > No app passwords yet.</ p >
{{end}}
</ div >
</ div >
</ div >
</ div >
</ div >
2026-08-15 21:49:25 +01:00
</ div >
2026-08-12 21:14:19 +01:00
< div class = "modal fade" id = "confirmationModal" tabindex = "-1" aria-hidden = "true" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" >< i class = "bi bi-question-circle me-2" ></ i > Confirm Action</ h5 >
< button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close" ></ button >
</ div >
< div class = "modal-body" id = "confirmationModalBody" > Are you sure you want to proceed?</ div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-bs-dismiss = "modal" > Cancel</ button >
< button type = "button" class = "btn btn-danger" id = "confirmationModalConfirm" > Confirm</ button >
</ div >
</ div >
</ div >
</ div >
2026-08-14 13:04:55 +01:00
{{template "compose_widget" .}}
< script src = "/webmail/static/vendor/bootstrap/js/bootstrap.bundle.min.js" ></ script >
2026-08-15 21:49:25 +01:00
< script src = "/webmail/static/vendor/quill/quill.js" ></ script >
{{template "webmail_settings_script" .}}
2026-08-12 21:14:19 +01:00
</ body >
</ html >
{{end}}
