feat: replace Bootstrap with custom CSS and add profile page

- Add self-hosted style.css replacing Bootstrap CDN dependency - Add profile.html with tabbed view (account info, emails/aliases, API token) - Refactor login handler to pass structured data to template instead of building HTML strings - Add brand-name and brand-logo flags/env vars for UI customization - Update CSP to allow brand logo domain and remove CDN references - Update all templates to pass template vars to header/footer and use new CSS classes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-08 11:49:51 +07:00 · 2026-03-08 11:49:51 +07:00 · 99def55e80
commit 99def55e80
parent 910dd7b47a
12 changed files with 796 additions and 107 deletions
--- a/login.go
+++ b/login.go
@ -2,8 +2,6 @@ package main

 import (
 	"fmt"
-	"html"
-	"html/template"
 	"log"
 	"net/http"
 	"net/url"
@ -12,6 +10,69 @@ import (
 	"github.com/go-ldap/ldap/v3"
 )

+type profileField struct {
+	Name  string
+	Label string
+	Value string
+}
+
+type profileAlias struct {
+	Value   string
+	URLSafe string
+	ElemID  string
+	Token   string
+}
+
+var ldapLabels = map[string]string{
+	"cn":              "Full name",
+	"uid":             "Username",
+	"givenName":       "First name",
+	"sn":              "Last name",
+	"displayName":     "Display name",
+	"telephoneNumber": "Phone",
+	"mobile":          "Mobile",
+	"employeeNumber":  "Employee ID",
+	"o":               "Organization",
+	"ou":              "Department",
+	"title":           "Title",
+	"description":     "Description",
+	"labeledURI":      "Website",
+}
+
+// ldapSkip lists attributes that should never be shown to the user.
+var ldapSkip = map[string]bool{
+	"userPassword":          true,
+	"krbPrincipalKey":       true,
+	"objectClass":           true,
+	"entryUUID":             true,
+	"entryDN":               true,
+	"structuralObjectClass": true,
+	"hasSubordinates":       true,
+	"krbExtraData":          true,
+}
+
+// isGeneratedAlias returns true for auto-generated alias local parts:
+// exactly 10 characters and containing at least one digit or uppercase letter,
+// which distinguishes them from plain words like "postmaster" or "abonnement".
+func isGeneratedAlias(local string) bool {
+	if len(local) != 10 {
+		return false
+	}
+	for _, c := range local {
+		if c >= '0' && c <= '9' || c >= 'A' && c <= 'Z' {
+			return true
+		}
+	}
+	return false
+}
+
+func ldapLabel(name string) string {
+	if l, ok := ldapLabels[name]; ok {
+		return l
+	}
+	return name
+}
+
 func login(login string, password string) ([]*ldap.EntryAttribute, error) {
 	conn, err := myLDAP.Connect()
 	if err != nil || conn == nil {
@ -58,33 +119,57 @@ func tryLogin(w http.ResponseWriter, r *http.Request) {
 		return
 	}

-	if entries, err := login(r.PostFormValue("login"), r.PostFormValue("password")); err != nil {
+	loginName := r.PostFormValue("login")
+	entries, err := login(loginName, r.PostFormValue("password"))
+	if err != nil {
 		log.Println(err)
 		displayTmplError(w, http.StatusInternalServerError, "login.html", map[string]any{"error": err.Error()})
-	} else {
-		apiToken := AddyAPIToken(r.PostFormValue("login"))
+		return
+	}

-		cnt := "<ul>"
-		for _, e := range entries {
-			for i, v := range e.Values {
-				safeName := html.EscapeString(e.Name)
-				safeVal := html.EscapeString(v)
-				elemID := fmt.Sprintf("mailAlias-%d", i)
-				if e.Name == "userPassword" || e.Name == "krbPrincipalKey" {
-					cnt += "<li><strong>" + safeName + ":</strong> <em>[...]</em></li>"
-				} else if e.Name == "mailAlias" && len(strings.SplitN(v, "@", 2)[0]) == 10 {
-					safeURL := url.PathEscape(v)
-					safeToken := html.EscapeString(apiToken)
-					safeElemID := html.EscapeString(elemID)
-					cnt += `<li id="` + safeElemID + `"><strong>` + safeName + `:</strong> ` + safeVal +
-						`<button type="button" class="mx-1 btn btn-sm btn-danger" data-alias="` + safeURL + `" data-token="` + safeToken + `" data-elem="` + safeElemID + `" onclick="(function(b){fetch('/api/v1/aliases/'+b.dataset.alias,{'method':'delete','headers':{'Authorization':'Bearer '+b.dataset.token}}).then(function(r){if(r.ok)document.getElementById(b.dataset.elem).remove();})})(this)">Supprimer</button></li>`
-				} else {
-					cnt += "<li><strong>" + safeName + ":</strong> " + safeVal + "</li>"
-				}
+	apiToken := AddyAPIToken(loginName)
+	var fields []profileField
+	var emails []string
+	var aliases []profileAlias
+	aliasIdx := 0
+
+	for _, e := range entries {
+		if ldapSkip[e.Name] {
+			continue
+		}
+		for _, v := range e.Values {
+			switch {
+			case e.Name == "mail":
+				emails = append(emails, v)
+			case e.Name == "mailAlias" && isGeneratedAlias(strings.SplitN(v, "@", 2)[0]):
+				elemID := fmt.Sprintf("alias-%d", aliasIdx)
+				aliasIdx++
+				aliases = append(aliases, profileAlias{
+					Value:   v,
+					URLSafe: url.PathEscape(v),
+					ElemID:  elemID,
+					Token:   apiToken,
+				})
+			case e.Name == "mailAlias":
+				emails = append(emails, v)
+			default:
+				fields = append(fields, profileField{
+					Name:  e.Name,
+					Label: ldapLabel(e.Name),
+					Value: v,
+				})
 			}
 		}
-		displayTmpl(w, "message.html", map[string]any{"details": template.HTML(`Login ok<br><br>Here are the information we have about you:` + cnt + "</ul><p>To use our Addy.io compatible API, use the following token: <code>" + html.EscapeString(apiToken) + "</code></p>")})
 	}
+
+	displayTmpl(w, "profile.html", map[string]any{
+		"login":     loginName,
+		"fields":    fields,
+		"emails":    emails,
+		"aliases":   aliases,
+		"api_token": apiToken,
+		"card_wide": true,
+	})
 }

 func httpBasicAuth(w http.ResponseWriter, r *http.Request) {
--- a/main.go
+++ b/main.go
@ -19,6 +19,8 @@ import (

 var myPublicURL = "https://ldap.nemunai.re"
 var devMode bool
+var brandName = "chldapasswd"
+var brandLogo = ""

 // dockerRegistrySecret is required for X-Special-Auth anonymous access.
 // If empty, the feature is disabled.
@ -82,10 +84,20 @@ func main() {
 	var configfile = flag.String("config", "", "path to the configuration file")
 	var publicURL = flag.String("public-url", myPublicURL, "Public base URL used in password reset emails")
 	var dev = flag.Bool("dev", false, "Development mode: disables HSTS and cookie Secure flag for local HTTP testing")
+	var bname = flag.String("brand-name", "chldapasswd", "Brand name displayed in the UI")
+	var blogo = flag.String("brand-logo", "", "URL of brand logo displayed in the UI (added to CSP img-src)")
 	flag.Parse()

 	myPublicURL = *publicURL
 	devMode = *dev
+	brandName = *bname
+	brandLogo = *blogo
+	if val, ok := os.LookupEnv("BRAND_NAME"); ok {
+		brandName = val
+	}
+	if val, ok := os.LookupEnv("BRAND_LOGO"); ok {
+		brandLogo = val
+	}
 	if devMode {
 		log.Println("WARNING: running in development mode — security features relaxed, do not use in production")
 	}
@ -220,6 +232,7 @@ func main() {

 	// Register handlers
 	http.HandleFunc(fmt.Sprintf("GET %s/altcha.min.js", *baseURL), serveAltchaJS)
+	http.HandleFunc(fmt.Sprintf("GET %s/style.css", *baseURL), serveStyleCSS)
 	http.HandleFunc(fmt.Sprintf("GET %s/altcha-challenge", *baseURL), serveAltchaChallenge)
 	http.HandleFunc(fmt.Sprintf("%s/{$}", *baseURL), changePassword)
 	http.HandleFunc(fmt.Sprintf("POST %s/api/v1/aliases", *baseURL), addyAliasAPI)
--- a/static.go
+++ b/static.go
@ -5,6 +5,8 @@ import (
 	"html/template"
 	"log"
 	"net/http"
+	"net/url"
+	"strings"
 )

 func securityHeaders(next http.Handler) http.Handler {
@ -12,7 +14,16 @@ func securityHeaders(next http.Handler) http.Handler {
 		w.Header().Set("X-Frame-Options", "DENY")
 		w.Header().Set("X-Content-Type-Options", "nosniff")
 		w.Header().Set("Referrer-Policy", "strict-origin-when-cross-origin")
-		w.Header().Set("Content-Security-Policy", "default-src 'self'; script-src 'self' 'wasm-unsafe-eval' 'unsafe-inline' https://stackpath.bootstrapcdn.com; style-src 'self' 'sha256-W6z8OR2iqpPyNGe72eRXH58H75H3UVJDuwHoKA6pX98=' https://stackpath.bootstrapcdn.com; img-src 'self'; font-src https://stackpath.bootstrapcdn.com; worker-src blob:")
+
+		imgSrc := "'self' data:"
+		if strings.HasPrefix(brandLogo, "http://") || strings.HasPrefix(brandLogo, "https://") {
+			if u, err := url.Parse(brandLogo); err == nil {
+				imgSrc += " " + u.Scheme + "://" + u.Host
+			}
+		}
+		csp := "default-src 'self'; script-src 'self' 'wasm-unsafe-eval' 'unsafe-inline'; style-src 'self' 'sha256-W6z8OR2iqpPyNGe72eRXH58H75H3UVJDuwHoKA6pX98='; img-src " + imgSrc + "; worker-src blob:"
+		w.Header().Set("Content-Security-Policy", csp)
+
 		if !devMode {
 			w.Header().Set("Strict-Transport-Security", "max-age=63072000; includeSubDomains")
 		}
@ -23,7 +34,26 @@ func securityHeaders(next http.Handler) http.Handler {
 //go:embed all:static
 var assets embed.FS

+func serveStyleCSS(w http.ResponseWriter, r *http.Request) {
+	data, err := assets.ReadFile("static/style.css")
+	if err != nil {
+		http.NotFound(w, r)
+		return
+	}
+	w.Header().Set("Content-Type", "text/css; charset=utf-8")
+	w.Header().Set("Cache-Control", "public, max-age=3600")
+	w.Write(data)
+}
+
 func displayTmpl(w http.ResponseWriter, page string, vars map[string]any) {
+	if vars == nil {
+		vars = map[string]any{}
+	}
+	vars["brand_name"] = brandName
+	if brandLogo != "" {
+		vars["brand_logo"] = brandLogo
+	}
+
 	data, err := assets.ReadFile("static/" + page)
 	if err != nil {
 		log.Fatalf("Unable to find %q: %s", page, err.Error())
--- a/static/change.html
+++ b/static/change.html
@ -1,49 +1,46 @@
-{{template "header"}}
-  <h1 class="display-4">Change your password <small class="text-muted">Fill the following fields!</small></h1>
+{{template "header" .}}
+  <h1 class="page-title">Change your password</h1>
+  <p class="page-subtitle">Fill the following fields!</p>

  <form method="post" action="change">
-    {{if .error}}<div class="alert alert-danger" role="alert">{{.error}}</div>{{end}}
+    {{if .error}}<div class="alert alert-error" role="alert">{{.error}}</div>{{end}}
    <input type="hidden" name="csrf_token" value="{{ .csrf_token }}">
-    <div class="form-group">
+    <div class="form-field">
      <input name="login" required="" class="form-control" id="input_0" type="text" placeholder="Login" autofocus>
    </div>
-    <div class="form-group input-group">
+    <div class="form-field input-group">
      <input name="password" required="" class="form-control" id="input_1" type="password" placeholder="Current password">
-      <div class="input-group-append">
-        <button class="btn btn-outline-secondary" type="button" onclick="document.getElementById('input_1').type = document.getElementById('input_1').type=='password'?'text':'password'">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
-            <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
-            <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
-          </svg>
-        </button>
-      </div>
+      <button class="btn-toggle-password" type="button" onclick="var i=document.getElementById('input_1');i.type=i.type=='password'?'text':'password'">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+          <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
+          <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
+        </svg>
+      </button>
    </div>
-    <div class="form-group input-group">
+    <div class="form-field input-group">
      <input name="newpassword" required="" class="form-control" id="input_2" type="password" placeholder="New password">
-      <div class="input-group-append">
-        <button class="btn btn-outline-secondary" type="button" onclick="document.getElementById('input_2').type = document.getElementById('input_2').type=='password'?'text':'password'">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
-            <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
-            <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
-          </svg>
-        </button>
-      </div>
+      <button class="btn-toggle-password" type="button" onclick="var i=document.getElementById('input_2');i.type=i.type=='password'?'text':'password'">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+          <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
+          <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
+        </svg>
+      </button>
    </div>
-    <div class="form-group input-group">
+    <div class="form-field input-group">
      <input name="new2password" required="" class="form-control" id="input_3" type="password" placeholder="Retype new password">
-      <div class="input-group-append">
-        <button class="btn btn-outline-secondary" type="button" onclick="document.getElementById('input_3').type = document.getElementById('input_3').type=='password'?'text':'password'">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
-            <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
-            <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
-          </svg>
-        </button>
-      </div>
+      <button class="btn-toggle-password" type="button" onclick="var i=document.getElementById('input_3');i.type=i.type=='password'?'text':'password'">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+          <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
+          <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
+        </svg>
+      </button>
    </div>
-    <div class="form-group">
+    <div class="form-field">
      <altcha-widget challengeurl="altcha-challenge"></altcha-widget>
    </div>
-    <button class="btn btn-primary" type="submit">Change my password</button>
-    <a href="/lost" class="btn btn-outline-secondary">Forgot your password?</a>
+    <div class="btn-group">
+      <button class="btn btn-primary" type="submit">Change my password</button>
+      <a href="/lost" class="btn btn-secondary">Forgot your password?</a>
+    </div>
  </form>
-{{template "footer"}}
+{{template "footer" .}}
--- a/static/footer.html
+++ b/static/footer.html
@ -1,5 +1,4 @@
 {{define "footer"}}
-      </div>
    </div>
  </body>
 </html>
--- a/static/header.html
+++ b/static/header.html
@ -1,18 +1,17 @@
 {{define "header"}}
 <!doctype html>
 <html lang="en">
-  <head>
-    <!-- Required meta tags -->
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
-    <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-
-    <title>nemunai.re password change</title>
-    <script src="altcha.min.js" type="module" async defer></script>
-  </head>
-  <body>
-    <div class="container">
-      <div class="jumbotron">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>{{if .brand_name}}{{.brand_name}} - {{end}}Password management</title>
+        <link rel="stylesheet" href="style.css">
+        <script src="altcha.min.js" type="module" async defer></script>
+    </head>
+    <body>
+        <div class="card{{if .card_wide}} card-wide{{end}}">
+            <div class="brand">
+                {{if .brand_logo}}<img src="{{.brand_logo}}" alt="" class="brand-logo">{{end}}
+                <span class="brand-name">{{if .brand_name}}{{.brand_name}}{{else}}Password management{{end}}</span>
+            </div>
 {{end}}
--- a/static/login.html
+++ b/static/login.html
@ -1,18 +1,21 @@
-{{template "header"}}
-  <h1 class="display-4">Sign in <small class="text-muted">Don't have an account? <a href="/register">Create one!</a></small></h1>
+{{template "header" .}}
+  <h1 class="page-title">Sign in</h1>
+  <p class="page-subtitle">Don't have an account? <a href="/register">Create one!</a></p>

  <form method="post" action="login">
-    {{if .error}}<div class="alert alert-danger" role="alert">{{.error}}</div>{{end}}
-    <div class="form-group">
+    {{if .error}}<div class="alert alert-error" role="alert">{{.error}}</div>{{end}}
+    <div class="form-field">
      <input name="login" required="" class="form-control" id="input_0" type="text" placeholder="Login" autofocus>
    </div>
-    <div class="form-group">
+    <div class="form-field">
      <input name="password" required="" class="form-control" id="input_1" type="password" placeholder="Current password">
    </div>
-    <div class="form-group">
+    <div class="form-field">
      <altcha-widget challengeurl="altcha-challenge"></altcha-widget>
    </div>
-    <button class="btn btn-primary" type="submit">Sign in</button>
-    <a href="/lost" class="btn btn-outline-secondary">Forgot your password?</a>
-    </form>
-{{template "footer"}}
+    <div class="btn-group">
+      <button class="btn btn-primary" type="submit">Sign in</button>
+      <a href="/lost" class="btn btn-secondary">Forgot your password?</a>
+    </div>
+  </form>
+{{template "footer" .}}
--- a/static/lost.html
+++ b/static/lost.html
@ -1,16 +1,19 @@
-{{template "header"}}
-  <h1 class="display-4">Forgot your password? <small class="text-muted">We'll send you a link by e-mail to reset it!</small></h1>
+{{template "header" .}}
+  <h1 class="page-title">Forgot your password?</h1>
+  <p class="page-subtitle">We'll send you a link by e-mail to reset it!</p>

  <form method="post" action="lost">
-    {{if .error}}<div class="alert alert-danger" role="alert">{{.error}}</div>{{end}}
+    {{if .error}}<div class="alert alert-error" role="alert">{{.error}}</div>{{end}}
    <input type="hidden" name="csrf_token" value="{{ .csrf_token }}">
-    <div class="form-group">
+    <div class="form-field">
      <input name="login" required="" class="form-control" id="input_0" type="text" placeholder="Login" autofocus>
    </div>
-    <div class="form-group">
+    <div class="form-field">
      <altcha-widget challengeurl="altcha-challenge"></altcha-widget>
    </div>
-    <button class="btn btn-primary" type="submit">Reset my password</button>
-    <a href="/change" class="btn btn-outline-success">Just want to change your password?</a>
+    <div class="btn-group">
+      <button class="btn btn-primary" type="submit">Reset my password</button>
+      <a href="/change" class="btn btn-secondary">Just want to change your password?</a>
+    </div>
  </form>
-{{template "footer"}}
+{{template "footer" .}}
--- a/static/message.html
+++ b/static/message.html
@ -1,5 +1,7 @@
-{{template "header"}}
-  {{if .message}}<div class="alert alert-success">{{.message}}</div>{{end}}
-  {{if .error}}<div class="alert alert-danger">{{.error}}</div>{{end}}
-  {{if .details}}<p>{{.details}}</p>{{end}}
-{{template "footer"}}
+{{template "header" .}}
+  <div class="message-page">
+    {{if .message}}<div class="alert alert-success">{{.message}}</div>{{end}}
+    {{if .error}}<div class="alert alert-error">{{.error}}</div>{{end}}
+    {{if .details}}<p class="details-text">{{.details}}</p>{{end}}
+  </div>
+{{template "footer" .}}
--- a/static/profile.html
+++ b/static/profile.html
@ -0,0 +1,76 @@
+{{template "header" .}}
+  <h1 class="page-title">Welcome, {{.login}}</h1>
+
+  <nav class="tabs">
+    <button class="tab-btn active" onclick="showTab(this,'account')">Account</button>
+    {{if or .emails .aliases}}<button class="tab-btn" onclick="showTab(this,'email')">Email &amp; Aliases</button>{{end}}
+    <button class="tab-btn" onclick="showTab(this,'api')">API</button>
+  </nav>
+
+  <div id="tab-account" class="tab-panel">
+    {{if .fields}}
+    <table class="info-table">
+      {{range .fields}}
+      <tr>
+        <th>{{.Label}}</th>
+        <td>{{.Value}}</td>
+      </tr>
+      {{end}}
+    </table>
+    {{else}}
+    <p class="section-empty">No account information available.</p>
+    {{end}}
+  </div>
+
+  {{if or .emails .aliases}}
+  <div id="tab-email" class="tab-panel hidden">
+    {{if .emails}}
+    <h3 class="section-title">Email addresses</h3>
+    <ul class="email-list">
+      {{range .emails}}
+      <li>{{.}}</li>
+      {{end}}
+    </ul>
+    {{end}}
+    {{if .aliases}}
+    <h3 class="section-title">Disposable aliases</h3>
+    <ul class="alias-list">
+      {{range .aliases}}
+      <li id="{{.ElemID}}" class="alias-item">
+        <span class="alias-value">{{.Value}}</span>
+        <button class="btn btn-danger btn-sm"
+                data-alias="{{.URLSafe}}"
+                data-token="{{.Token}}"
+                data-elem="{{.ElemID}}"
+                onclick="deleteAlias(this)">Delete</button>
+      </li>
+      {{end}}
+    </ul>
+    {{end}}
+  </div>
+  {{end}}
+
+  <div id="tab-api" class="tab-panel hidden">
+    <p class="section-desc">Use this token to authenticate with the Addy.io-compatible alias API:</p>
+    <div class="api-token-box">{{.api_token}}</div>
+    <p class="section-desc">Endpoint: <code>POST /api/v1/aliases</code> — <code>DELETE /api/v1/aliases/{alias}</code></p>
+    <p class="section-desc">Set the <code>Authorization: Bearer &lt;token&gt;</code> header on each request.</p>
+  </div>
+
+  <script>
+  function showTab(btn, name) {
+    document.querySelectorAll('.tab-panel').forEach(function(p) { p.classList.add('hidden'); });
+    document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
+    document.getElementById('tab-' + name).classList.remove('hidden');
+    btn.classList.add('active');
+  }
+  function deleteAlias(btn) {
+    fetch('/api/v1/aliases/' + btn.dataset.alias, {
+      method: 'DELETE',
+      headers: {'Authorization': 'Bearer ' + btn.dataset.token}
+    }).then(function(r) {
+      if (r.ok) document.getElementById(btn.dataset.elem).remove();
+    });
+  }
+  </script>
+{{template "footer" .}}
--- a/static/reset.html
+++ b/static/reset.html
@ -1,23 +1,26 @@
-{{template "header"}}
-  <h1 class="display-4">Forgot your password? <small class="text-muted">Define a new one!</small></h1>
+{{template "header" .}}
+  <h1 class="page-title">Forgot your password?</h1>
+  <p class="page-subtitle">Define a new one!</p>

  <form method="post" action="reset">
-    {{if .error}}<div class="alert alert-danger" role="alert">{{.error}}</div>{{end}}
+    {{if .error}}<div class="alert alert-error" role="alert">{{.error}}</div>{{end}}
    <input type="hidden" name="csrf_token" value="{{ .csrf_token }}">
-    <div class="form-group">
+    <div class="form-field">
      <input required="" class="form-control" id="input_0" type="text" placeholder="Email" value="{{ .login }}" disabled="">
    </div>
    <input type="hidden" name="login" value="{{ .login }}">
    <input type="hidden" name="token" value="{{ .token }}">
-    <div class="form-group">
+    <div class="form-field">
      <input autofocus name="newpassword" required="" class="form-control" id="input_2" type="password" placeholder="New password">
    </div>
-    <div class="form-group">
+    <div class="form-field">
      <input name="new2password" required="" class="form-control" id="input_3" type="password" placeholder="Retype new password">
    </div>
-    <div class="form-group">
+    <div class="form-field">
      <altcha-widget challengeurl="altcha-challenge"></altcha-widget>
    </div>
-    <button class="btn btn-primary" type="submit">Reset my password</button>
+    <div class="btn-group">
+      <button class="btn btn-primary" type="submit">Reset my password</button>
+    </div>
  </form>
-{{template "footer"}}
+{{template "footer" .}}
--- a/static/style.css
+++ b/static/style.css
@ -0,0 +1,479 @@
+/* ============================================================
+   CSS custom properties
+   ============================================================ */
+:root {
+  --bg: #f4f6f9;
+  --card-bg: #ffffff;
+  --card-shadow: 0 4px 24px rgba(0,0,0,.10);
+  --text: #1a1d23;
+  --text-muted: #6b7280;
+  --border: #d1d5db;
+  --input-bg: #ffffff;
+  --input-focus-border: #4f46e5;
+  --input-focus-shadow: 0 0 0 3px rgba(79,70,229,.15);
+  --btn-primary-bg: #4f46e5;
+  --btn-primary-hover: #4338ca;
+  --btn-secondary-bg: #f3f4f6;
+  --btn-secondary-hover: #e5e7eb;
+  --btn-secondary-text: #374151;
+  --alert-error-bg: #fef2f2;
+  --alert-error-border: #fca5a5;
+  --alert-error-text: #991b1b;
+  --alert-success-bg: #f0fdf4;
+  --alert-success-border: #86efac;
+  --alert-success-text: #166534;
+  --brand-border: #e5e7eb;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0f1117;
+    --card-bg: #1e2130;
+    --card-shadow: 0 4px 24px rgba(0,0,0,.40);
+    --text: #e5e7eb;
+    --text-muted: #9ca3af;
+    --border: #374151;
+    --input-bg: #111827;
+    --input-focus-border: #6366f1;
+    --input-focus-shadow: 0 0 0 3px rgba(99,102,241,.20);
+    --btn-primary-bg: #6366f1;
+    --btn-primary-hover: #4f46e5;
+    --btn-secondary-bg: #374151;
+    --btn-secondary-hover: #4b5563;
+    --btn-secondary-text: #d1d5db;
+    --alert-error-bg: #3b1515;
+    --alert-error-border: #7f1d1d;
+    --alert-error-text: #fca5a5;
+    --alert-success-bg: #052e16;
+    --alert-success-border: #14532d;
+    --alert-success-text: #86efac;
+    --brand-border: #374151;
+  }
+}
+
+/* ============================================================
+   Base
+   ============================================================ */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+/* ============================================================
+   Card
+   ============================================================ */
+.card {
+  background: var(--card-bg);
+  border-radius: 12px;
+  box-shadow: var(--card-shadow);
+  padding: 2rem 2.5rem;
+  width: 100%;
+  max-width: 440px;
+}
+
+/* ============================================================
+   Brand
+   ============================================================ */
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding-bottom: 1.25rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--brand-border);
+}
+
+.brand-logo {
+  height: 2rem;
+  width: auto;
+  object-fit: contain;
+}
+
+.brand-name {
+  font-size: 1.125rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--text);
+}
+
+/* ============================================================
+   Page title / subtitle
+   ============================================================ */
+.page-title {
+  font-size: 1.375rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin-bottom: 0.25rem;
+}
+
+.page-subtitle {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  margin-bottom: 1.5rem;
+}
+
+.page-subtitle a {
+  color: var(--btn-primary-bg);
+  text-decoration: none;
+}
+
+.page-subtitle a:hover {
+  text-decoration: underline;
+}
+
+/* ============================================================
+   Alerts
+   ============================================================ */
+.alert {
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+}
+
+.alert-error {
+  background: var(--alert-error-bg);
+  border-color: var(--alert-error-border);
+  color: var(--alert-error-text);
+}
+
+.alert-success {
+  background: var(--alert-success-bg);
+  border-color: var(--alert-success-border);
+  color: var(--alert-success-text);
+}
+
+/* ============================================================
+   Forms
+   ============================================================ */
+.form-field {
+  margin-bottom: 1rem;
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.9375rem;
+  font-family: inherit;
+  background: var(--input-bg);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  transition: border-color .15s, box-shadow .15s;
+  outline: none;
+  -webkit-appearance: none;
+}
+
+.form-control:focus {
+  border-color: var(--input-focus-border);
+  box-shadow: var(--input-focus-shadow);
+}
+
+.form-control::placeholder {
+  color: var(--text-muted);
+}
+
+.form-control:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Input group with toggle button */
+.input-group {
+  position: relative;
+}
+
+.input-group .form-control {
+  padding-right: 3rem;
+}
+
+.btn-toggle-password {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 2.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--text-muted);
+  border-radius: 0 8px 8px 0;
+  transition: color .15s;
+  padding: 0;
+}
+
+.btn-toggle-password:hover {
+  color: var(--text);
+}
+
+/* ============================================================
+   Buttons
+   ============================================================ */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.625rem 1.25rem;
+  font-size: 0.9375rem;
+  font-family: inherit;
+  font-weight: 500;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  text-decoration: none;
+  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
+  white-space: nowrap;
+}
+
+.btn-primary {
+  background: var(--btn-primary-bg);
+  color: #ffffff;
+  border-color: var(--btn-primary-bg);
+}
+
+.btn-primary:hover {
+  background: var(--btn-primary-hover);
+  border-color: var(--btn-primary-hover);
+}
+
+.btn-secondary {
+  background: var(--btn-secondary-bg);
+  color: var(--btn-secondary-text);
+  border-color: var(--border);
+}
+
+.btn-secondary:hover {
+  background: var(--btn-secondary-hover);
+}
+
+.btn-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+/* ============================================================
+   Message page
+   ============================================================ */
+.message-page {
+  padding: 0.5rem 0;
+}
+
+.details-text {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  margin-top: 0.75rem;
+}
+
+/* ============================================================
+   altcha widget
+   ============================================================ */
+.form-field altcha-widget {
+  display: block;
+}
+
+/* ============================================================
+   Card wide (profile page)
+   ============================================================ */
+.card-wide {
+  max-width: 680px;
+}
+
+/* ============================================================
+   Tabs
+   ============================================================ */
+.tabs {
+  display: flex;
+  gap: 0.25rem;
+  border-bottom: 2px solid var(--border);
+  margin-bottom: 1.5rem;
+}
+
+.tab-btn {
+  padding: 0.5rem 1rem;
+  font-size: 0.9rem;
+  font-family: inherit;
+  font-weight: 500;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  cursor: pointer;
+  color: var(--text-muted);
+  border-radius: 4px 4px 0 0;
+  transition: color .15s, border-color .15s;
+}
+
+.tab-btn:hover {
+  color: var(--text);
+}
+
+.tab-btn.active {
+  color: var(--btn-primary-bg);
+  border-bottom-color: var(--btn-primary-bg);
+}
+
+.tab-panel.hidden {
+  display: none;
+}
+
+/* ============================================================
+   Profile: Account tab
+   ============================================================ */
+.info-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+}
+
+.info-table th,
+.info-table td {
+  padding: 0.5rem 0.625rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border);
+  vertical-align: top;
+}
+
+.info-table th {
+  width: 38%;
+  color: var(--text-muted);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.info-table tr:last-child th,
+.info-table tr:last-child td {
+  border-bottom: none;
+}
+
+.section-empty {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+
+/* ============================================================
+   Profile: Email & Aliases tab
+   ============================================================ */
+.section-title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  margin-bottom: 0.625rem;
+}
+
+.section-title + .section-title,
+.email-list + .section-title,
+.alias-list + .section-title {
+  margin-top: 1.25rem;
+}
+
+.email-list {
+  list-style: none;
+  margin-bottom: 0.5rem;
+}
+
+.email-list li {
+  padding: 0.4rem 0;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.9rem;
+}
+
+.email-list li:last-child {
+  border-bottom: none;
+}
+
+.alias-list {
+  list-style: none;
+}
+
+.alias-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.4rem 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.alias-item:last-child {
+  border-bottom: none;
+}
+
+.alias-value {
+  font-size: 0.875rem;
+  word-break: break-all;
+}
+
+/* ============================================================
+   Profile: API tab
+   ============================================================ */
+.api-token-box {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.8125rem;
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  word-break: break-all;
+  margin: 0.75rem 0;
+  user-select: all;
+}
+
+.section-desc {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
+}
+
+.section-desc code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.8125rem;
+  background: var(--btn-secondary-bg);
+  padding: 0.1em 0.35em;
+  border-radius: 4px;
+  color: var(--text);
+}
+
+/* ============================================================
+   Button variants
+   ============================================================ */
+.btn-danger {
+  background: #dc2626;
+  color: #ffffff;
+  border-color: #dc2626;
+}
+
+.btn-danger:hover {
+  background: #b91c1c;
+  border-color: #b91c1c;
+}
+
+.btn-sm {
+  padding: 0.3rem 0.75rem;
+  font-size: 0.8125rem;
+  border-radius: 6px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}