-
+ {
+ // The query string changes so the browser fetches the new
+ // photo instead of the one it already has under this URL.
+ setAvatarVersion((v) => v + 1);
+ }}
+ />
+
+ )}
+
{activeTab === "security" && (
- {initials(selectedRow?.from_display_name ?? "", selected.from)}
-
+
{selected.from}
diff --git a/services/webmail/src/app/(user)/user/settings/page.tsx b/services/webmail/src/app/(user)/user/settings/page.tsx
index 1999441..a7e2085 100644
--- a/services/webmail/src/app/(user)/user/settings/page.tsx
+++ b/services/webmail/src/app/(user)/user/settings/page.tsx
@@ -15,6 +15,7 @@ import {
Plus,
Lock,
Languages,
+ UserRound,
} from "lucide-react";
import { useTranslations } from "../../../../i18n/provider";
import { Badge } from "../../../../components/ui/Badge";
@@ -24,6 +25,8 @@ import { LanguageSwitcher } from "../../../../i18n/LanguageSwitcher";
import { signatureToHtml, sanitizeSignature } from "../../../../lib/signature";
import { buildSieve, parseSieve, type Rule, type RuleField, type RuleCondition, type RuleAction } from "../../../../lib/rules";
import { useFolders } from "../../../../lib/useFolders";
+import { AvatarEditor } from "../../../../components/AvatarEditor";
+import { useAccount } from "../../../../lib/useAccount";
import { moveTargets } from "../../../../lib/mailCounts";
interface SieveRule {
@@ -51,11 +54,20 @@ interface WebSession {
current: boolean;
}
-type SettingsTab = "security" | "filters" | "vacation" | "signature" | "language";
+type SettingsTab = "profile" | "security" | "filters" | "vacation" | "signature" | "language";
export default function UserSettingsPage() {
const t = useTranslations();
- const [activeTab, setActiveTab] = useState("security");
+ const [activeTab, setActiveTab] = useState("profile");
+ // Bumped after a save so the browser refetches instead of showing the photo
+ // it already holds under the same URL.
+ const [avatarVersion, setAvatarVersion] = useState(0);
+ const account = useAccount("user");
+ // Null until the account loads, so the editor is not told "no photo" before
+ // it is known whether there is one.
+ const avatarSrc = account?.email
+ ? `/api/v1/avatar?address=${encodeURIComponent(account.email)}&v=${avatarVersion}`
+ : null;
const [mfaEnabled, setMfaEnabled] = useState(false);
const [qrSecret, setQrSecret] = useState(null);
@@ -285,6 +297,7 @@ export default function UserSettingsPage() {
separated by everything else. The same panels now sit behind a tab strip,
in the order the redesign groups them. */
const tabs = [
+ { id: "profile" as const, label: t("avatar.title"), icon: UserRound },
{ id: "security" as const, label: t("settings.security"), icon: Shield },
{ id: "filters" as const, label: t("settings.sieveTitle"), icon: Filter },
{ id: "vacation" as const, label: t("settings.vacationTitle"), icon: Palmtree },
@@ -336,6 +349,21 @@ export default function UserSettingsPage() {
)}
+ {activeTab === "profile" && (
+ {t("avatar.title")}
+{t("avatar.explainer")}
+
{/* 2FA TOTP SECTION */}
diff --git a/services/webmail/src/components/Avatar.tsx b/services/webmail/src/components/Avatar.tsx
new file mode 100644
index 0000000..f4b4590
--- /dev/null
+++ b/services/webmail/src/components/Avatar.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import React, { useState } from "react";
+import { initialsFor } from "../lib/initials";
+
+interface AvatarProps {
+ address: string | null | undefined;
+ /** Rendered size in pixels; the square the circle is cut from. */
+ size: number;
+ className?: string;
+ /**
+ * What to show while there is no photo. Passed in where the caller already
+ * has a better answer than the address - a display name, usually - so the
+ * fallback does not get worse than what it replaced.
+ */
+ initials?: string;
+}
+
+/**
+ * Someone's photo, falling back to their initials.
+ *
+ * The endpoint answers 404 when there is no photo, which is most people most
+ * of the time, so the initials are what is rendered first and the image only
+ * replaces them once it has actually loaded. Doing it the other way round
+ * shows an empty circle on every row until each request comes back.
+ */
+export function Avatar({ address, size, className = "", initials }: AvatarProps) {
+ const [loaded, setLoaded] = useState(false);
+ const [failed, setFailed] = useState(false);
+
+ const src = address ? `/api/v1/avatar?address=${encodeURIComponent(address)}` : null;
+
+ return (
+
+ );
+}
diff --git a/services/webmail/src/components/AvatarEditor.tsx b/services/webmail/src/components/AvatarEditor.tsx
new file mode 100644
index 0000000..84cb421
--- /dev/null
+++ b/services/webmail/src/components/AvatarEditor.tsx
@@ -0,0 +1,254 @@
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Upload, ZoomIn, ZoomOut, Trash2 } from "lucide-react";
+import { Button } from "./ui/Button";
+import { useTranslations } from "../i18n/provider";
+import {
+ clampTransform,
+ initialTransform,
+ scaleRange,
+ sourceRect,
+ type Size,
+ type Transform,
+} from "../lib/avatarCrop";
+
+/** The frame is square; the mask over it is what makes the photo a circle. */
+const VIEWPORT = 288;
+/** What gets stored. Larger than any place it is shown, so it stays sharp. */
+const EXPORT_SIZE = 512;
+
+interface AvatarEditorProps {
+ /** Current photo, if there is one. */
+ src: string | null;
+ onSaved: () => void;
+}
+
+export function AvatarEditor({ src, onSaved }: AvatarEditorProps) {
+ const t = useTranslations();
+
+ const [image, setImage] = useState(null);
+ const [natural, setNatural] = useState({ width: 0, height: 0 });
+ const [transform, setTransform] = useState({ scale: 1, offsetX: 0, offsetY: 0 });
+ const [busy, setBusy] = useState(false);
+ const [error, setError] = useState(null);
+
+ const canvasRef = useRef(null);
+ const fileRef = useRef(null);
+ const dragRef = useRef<{ x: number; y: number; from: Transform } | null>(null);
+
+ /** Draws the current transform into the preview. */
+ const paint = useCallback(() => {
+ const canvas = canvasRef.current;
+ if (!canvas || !image) return;
+ const ctx = canvas.getContext("2d");
+ if (!ctx) return;
+
+ ctx.clearRect(0, 0, VIEWPORT, VIEWPORT);
+ const r = sourceRect(natural, VIEWPORT, transform);
+ ctx.drawImage(image, r.x, r.y, r.width, r.height, 0, 0, VIEWPORT, VIEWPORT);
+ }, [image, natural, transform]);
+
+ useEffect(() => {
+ paint();
+ }, [paint]);
+
+ const openFile = (file: File) => {
+ setError(null);
+ const url = URL.createObjectURL(file);
+ const img = new Image();
+ img.onload = () => {
+ const size = { width: img.naturalWidth, height: img.naturalHeight };
+ setImage(img);
+ setNatural(size);
+ setTransform(initialTransform(size, VIEWPORT));
+ // The bitmap is decoded and held; the object URL has done its job and
+ // would otherwise keep the file alive for the life of the page.
+ URL.revokeObjectURL(url);
+ };
+ img.onerror = () => {
+ URL.revokeObjectURL(url);
+ setError(t("avatar.notAnImage"));
+ };
+ img.src = url;
+ };
+
+ const onPointerDown = (e: React.PointerEvent) => {
+ if (!image) return;
+ (e.target as HTMLElement).setPointerCapture(e.pointerId);
+ dragRef.current = { x: e.clientX, y: e.clientY, from: transform };
+ };
+
+ const onPointerMove = (e: React.PointerEvent) => {
+ const drag = dragRef.current;
+ if (!drag || !image) return;
+ setTransform(
+ clampTransform(natural, VIEWPORT, {
+ scale: drag.from.scale,
+ offsetX: drag.from.offsetX + (e.clientX - drag.x),
+ offsetY: drag.from.offsetY + (e.clientY - drag.y),
+ }),
+ );
+ };
+
+ const endDrag = () => {
+ dragRef.current = null;
+ };
+
+ const zoomTo = (scale: number) => {
+ if (!image) return;
+ setTransform((prev) => clampTransform(natural, VIEWPORT, { ...prev, scale }));
+ };
+
+ const save = async () => {
+ if (!image) return;
+ setBusy(true);
+ setError(null);
+ try {
+ // Exported from the source pixels rather than from the preview, so the
+ // stored photo is as sharp as the original allows instead of being
+ // limited to the size of the editor on screen.
+ const out = document.createElement("canvas");
+ out.width = EXPORT_SIZE;
+ out.height = EXPORT_SIZE;
+ const ctx = out.getContext("2d");
+ if (!ctx) throw new Error();
+ const r = sourceRect(natural, VIEWPORT, transform);
+ ctx.drawImage(image, r.x, r.y, r.width, r.height, 0, 0, EXPORT_SIZE, EXPORT_SIZE);
+
+ const blob = await new Promise((resolve) =>
+ // The frame is always fully covered, so there is no transparency to
+ // preserve and JPEG is a fraction of the size.
+ out.toBlob((b) => resolve(b), "image/jpeg", 0.9),
+ );
+ if (!blob) throw new Error();
+
+ const res = await fetch("/api/v1/user/avatar", {
+ method: "PUT",
+ headers: { "Content-Type": "image/jpeg" },
+ body: blob,
+ });
+ if (!res.ok) {
+ const data = await res.json().catch(() => ({}));
+ throw new Error(data.message);
+ }
+ setImage(null);
+ onSaved();
+ } catch (err) {
+ setError(err instanceof Error && err.message ? err.message : t("errors.serverError"));
+ } finally {
+ setBusy(false);
+ }
+ };
+
+ const remove = async () => {
+ setBusy(true);
+ setError(null);
+ try {
+ const res = await fetch("/api/v1/user/avatar", { method: "DELETE" });
+ if (!res.ok) throw new Error();
+ onSaved();
+ } catch {
+ setError(t("errors.serverError"));
+ } finally {
+ setBusy(false);
+ }
+ };
+
+ const range = scaleRange(natural, VIEWPORT);
+
+ return (
+
+ {!image ? (
+
+ );
+}
diff --git a/services/webmail/src/lib/avatarCrop.test.ts b/services/webmail/src/lib/avatarCrop.test.ts
new file mode 100644
index 0000000..f4b9edd
--- /dev/null
+++ b/services/webmail/src/lib/avatarCrop.test.ts
@@ -0,0 +1,109 @@
+import { describe, it, expect } from "vitest";
+import {
+ minimumScale,
+ scaleRange,
+ clampTransform,
+ initialTransform,
+ sourceRect,
+} from "./avatarCrop";
+
+const VIEWPORT = 320;
+
+describe("minimumScale", () => {
+ // Cover, not contain. Scaling a wide photo to fit its width leaves the top
+ // and bottom of the circle empty.
+ it("covers the frame on the short side of a wide image", () => {
+ expect(minimumScale({ width: 800, height: 400 }, VIEWPORT)).toBeCloseTo(320 / 400);
+ });
+
+ it("covers the frame on the short side of a tall image", () => {
+ expect(minimumScale({ width: 400, height: 800 }, VIEWPORT)).toBeCloseTo(320 / 400);
+ });
+
+ it("scales a small image up rather than leaving it small", () => {
+ expect(minimumScale({ width: 100, height: 100 }, VIEWPORT)).toBeCloseTo(3.2);
+ });
+
+ it.each([
+ [{ width: 0, height: 100 }],
+ [{ width: 100, height: 0 }],
+ [{ width: Number.NaN, height: 100 }],
+ ])("survives a degenerate image %o", (image) => {
+ expect(Number.isFinite(minimumScale(image, VIEWPORT))).toBe(true);
+ });
+});
+
+describe("clampTransform", () => {
+ const image = { width: 800, height: 600 };
+
+ it("refuses to zoom below covering the frame", () => {
+ const t = clampTransform(image, VIEWPORT, { scale: 0.01, offsetX: 0, offsetY: 0 });
+ expect(t.scale).toBeCloseTo(minimumScale(image, VIEWPORT));
+ });
+
+ // Without this, dragging far enough pulls the edge of the photo into the
+ // circle and the export carries a transparent wedge.
+ it("stops the image at its own edge", () => {
+ const scale = minimumScale(image, VIEWPORT);
+ const t = clampTransform(image, VIEWPORT, { scale, offsetX: 99999, offsetY: 99999 });
+
+ const overhangX = (image.width * scale - VIEWPORT) / 2;
+ expect(t.offsetX).toBeCloseTo(overhangX);
+ // At the covering scale the short side has no slack at all, so it cannot
+ // move: any movement there would expose a gap.
+ expect(t.offsetY).toBeCloseTo(0);
+ });
+
+ it("allows movement on both axes once zoomed in", () => {
+ const scale = minimumScale(image, VIEWPORT) * 2;
+ const t = clampTransform(image, VIEWPORT, { scale, offsetX: 99999, offsetY: 99999 });
+ expect(t.offsetX).toBeGreaterThan(0);
+ expect(t.offsetY).toBeGreaterThan(0);
+ });
+
+ it("caps the zoom so the photo cannot be magnified into mush", () => {
+ const { max } = scaleRange(image, VIEWPORT);
+ expect(clampTransform(image, VIEWPORT, { scale: 9999, offsetX: 0, offsetY: 0 }).scale).toBeCloseTo(max);
+ });
+});
+
+describe("sourceRect", () => {
+ const image = { width: 800, height: 600 };
+
+ it("is always square, because the frame is", () => {
+ const r = sourceRect(image, VIEWPORT, { scale: 1.2, offsetX: 30, offsetY: -20 });
+ expect(r.width).toBeCloseTo(r.height);
+ });
+
+ // At the covering scale the whole short side is used: nothing of the height
+ // is cropped away, and the crop is the full 600px of it.
+ it("takes the whole short side at the covering scale", () => {
+ const r = sourceRect(image, VIEWPORT, initialTransform(image, VIEWPORT));
+ expect(r.height).toBeCloseTo(600);
+ expect(r.y).toBeCloseTo(0);
+ // Centred horizontally: (800 - 600) / 2.
+ expect(r.x).toBeCloseTo(100);
+ });
+
+ it("never reads outside the image", () => {
+ for (const wanted of [
+ { scale: 0.001, offsetX: -9999, offsetY: -9999 },
+ { scale: 9999, offsetX: 9999, offsetY: 9999 },
+ { scale: 1, offsetX: 0, offsetY: 9999 },
+ ]) {
+ const r = sourceRect(image, VIEWPORT, wanted);
+ expect(r.x).toBeGreaterThanOrEqual(-0.001);
+ expect(r.y).toBeGreaterThanOrEqual(-0.001);
+ expect(r.x + r.width).toBeLessThanOrEqual(image.width + 0.001);
+ expect(r.y + r.height).toBeLessThanOrEqual(image.height + 0.001);
+ }
+ });
+
+ // Dragging the image right shows what is further left in the source.
+ it("moves the crop opposite to the drag", () => {
+ const scale = minimumScale(image, VIEWPORT) * 2;
+ const left = sourceRect(image, VIEWPORT, { scale, offsetX: 40, offsetY: 0 });
+ const centre = sourceRect(image, VIEWPORT, { scale, offsetX: 0, offsetY: 0 });
+ expect(left.x).toBeLessThan(centre.x);
+ });
+});
diff --git a/services/webmail/src/lib/avatarCrop.ts b/services/webmail/src/lib/avatarCrop.ts
new file mode 100644
index 0000000..b5268ef
--- /dev/null
+++ b/services/webmail/src/lib/avatarCrop.ts
@@ -0,0 +1,109 @@
+/**
+ * The geometry behind the circular photo editor.
+ *
+ * The editor shows a fixed square viewport with a circular mask; the image sits
+ * behind it, scaled and dragged. Everything here works in viewport pixels and
+ * is deliberately free of DOM and canvas, so the awkward parts - the smallest
+ * scale that still covers the circle, and clamping so no gap can be dragged
+ * into view - are testable on their own.
+ */
+
+export interface Size {
+ width: number;
+ height: number;
+}
+
+/** Where the image sits behind the viewport, and how big it is drawn. */
+export interface Transform {
+ /** Multiplier applied to the image's natural size. */
+ scale: number;
+ /** Image centre, relative to the viewport centre, in viewport pixels. */
+ offsetX: number;
+ offsetY: number;
+}
+
+/**
+ * The smallest scale at which the image still covers the whole viewport.
+ *
+ * Below this a corner of the frame is empty, and the exported photo would carry
+ * a transparent wedge - so this is the floor for the zoom control, not merely a
+ * suggestion.
+ */
+export function minimumScale(image: Size, viewport: number): number {
+ // Finite, not merely positive: NaN fails every comparison, so `<= 0` lets it
+ // through and it then propagates into the transform and blanks the editor.
+ // A NaN dimension is what an image that failed to decode reports.
+ if (
+ !Number.isFinite(image.width) || !Number.isFinite(image.height) || !Number.isFinite(viewport) ||
+ image.width <= 0 || image.height <= 0 || viewport <= 0
+ ) {
+ return 1;
+ }
+ // Cover, not contain: the larger of the two ratios.
+ return Math.max(viewport / image.width, viewport / image.height);
+}
+
+/** The zoom control's range: from covering the frame to four times that. */
+export function scaleRange(image: Size, viewport: number): { min: number; max: number } {
+ const min = minimumScale(image, viewport);
+ return { min, max: min * 4 };
+}
+
+/**
+ * Holds the image over the viewport, whatever was asked for.
+ *
+ * A drag or a zoom out can otherwise pull an edge inside the frame. Clamping
+ * the offset to the overhang keeps the frame covered without fighting the
+ * gesture: the image stops at its edge instead of springing back.
+ */
+export function clampTransform(image: Size, viewport: number, wanted: Transform): Transform {
+ const { min, max } = scaleRange(image, viewport);
+ const scale = Math.min(Math.max(wanted.scale, min), max);
+
+ // Half of what sticks out past the viewport on each axis.
+ const overhangX = Math.max(0, (image.width * scale - viewport) / 2);
+ const overhangY = Math.max(0, (image.height * scale - viewport) / 2);
+
+ return {
+ scale,
+ offsetX: Math.min(Math.max(wanted.offsetX, -overhangX), overhangX),
+ offsetY: Math.min(Math.max(wanted.offsetY, -overhangY), overhangY),
+ };
+}
+
+/** The transform that centres the image at the smallest covering scale. */
+export function initialTransform(image: Size, viewport: number): Transform {
+ return { scale: minimumScale(image, viewport), offsetX: 0, offsetY: 0 };
+}
+
+/**
+ * The rectangle of the *source* image that the viewport is showing.
+ *
+ * This is what the export draws. Working back to source pixels rather than
+ * scaling the preview means the saved photo is as sharp as the original
+ * allows, instead of being limited to the size of the editor on screen.
+ */
+export interface SourceRect {
+ x: number;
+ y: number;
+ width: number;
+ height: number;
+}
+
+export function sourceRect(image: Size, viewport: number, transform: Transform): SourceRect {
+ const t = clampTransform(image, viewport, transform);
+ // One viewport pixel is this many source pixels.
+ const perPixel = 1 / t.scale;
+ const size = viewport * perPixel;
+
+ // The viewport centre, expressed in source coordinates.
+ const centreX = image.width / 2 - t.offsetX * perPixel;
+ const centreY = image.height / 2 - t.offsetY * perPixel;
+
+ return {
+ x: centreX - size / 2,
+ y: centreY - size / 2,
+ width: size,
+ height: size,
+ };
+}
+ {/* What is stored today, shown as it will appear elsewhere. */}
+
+ {src ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ) : (
+ {t("avatar.none")}
+ )}
+
+
+
+ ) : (
+
+
+ {src && (
+
+ )}
+
+
+
+ )}
+
+ {error && (
+
+
+
+
+
+
+
+ {t("avatar.dragToPosition")}
+ +
+
+
+
+
+ {error}
+
+ )}
+
+ {
+ const file = e.target.files?.[0];
+ if (file) openFile(file);
+ // Cleared so choosing the same file twice in a row still fires.
+ e.target.value = "";
+ }}
+ />
+