Uploaded profile pictures and organisation logos: PNG, JPEG or WebP checked by content, cropped, scaled and re-encoded before storing, served at /avatar/{name} with the identicon as fallback, removable a160b98fb922

-- Uploaded pictures (hub spec §6.3): `png:<hash>` or `jpeg:<hash>` of the

-- re-encoded file under <data>/avatars/, empty for the identicon.

ALTER TABLE accounts ADD COLUMN avatar TEXT NOT NULL DEFAULT '';

ALTER TABLE organisations ADD COLUMN avatar TEXT NOT NULL DEFAULT '';

name = "bytemuck"

version = "1.25.2"

source = "registry+https://github.com/rust-lang/crates.io-index"

checksum = "95832e849adfb21180ccb6826a99da14e5d266ae5c2e668e1602cf234f153797"

[[package]]

[[package]]

name = "byteorder-lite"

version = "0.1.0"

source = "registry+https://github.com/rust-lang/crates.io-index"

checksum = "8f1fe948ff07f4bd06c30984e69f5b4899c516a3ef74f34df92a2df2ab535495"

[[package]]

name = "fdeflate"

version = "0.3.7"

source = "registry+https://github.com/rust-lang/crates.io-index"

checksum = "1e6853b52649d4ac5c0bd02320cddc5ba956bdb407c4b75a2c6b75bf51500f8c"

dependencies = [

 "simd-adler32",

]

 "miniz_oxide 0.9.1",

name = "image"

version = "0.25.10"

source = "registry+https://github.com/rust-lang/crates.io-index"

checksum = "85ab80394333c02fe689eaf900ab500fbd0c2213da414687ebf995a65d5a6104"

dependencies = [

 "bytemuck",

 "byteorder-lite",

 "image-webp",

 "moxcms",

 "num-traits",

 "png",

 "zune-core",

 "zune-jpeg",

]

[[package]]

name = "image-webp"

version = "0.2.4"

source = "registry+https://github.com/rust-lang/crates.io-index"

checksum = "525e9ff3e1a4be2fbea1fdf0e98686a6d98b4d8f937e1bf7402245af1909e8c3"

dependencies = [

 "byteorder-lite",

 "quick-error",

]

[[package]]

[[package]]

name = "miniz_oxide"

version = "0.8.9"

source = "registry+https://github.com/rust-lang/crates.io-index"

checksum = "1fa76a2c86f704bdb222d66965fb3d63269ce38518b83cb0575fca855ebb6316"

dependencies = [

 "adler2",

 "simd-adler32",

]

 "num-traits",

]

[[package]]

name = "moxcms"

version = "0.8.1"

source = "registry+https://github.com/rust-lang/crates.io-index"

checksum = "bb85c154ba489f01b25c0d36ae69a87e4a1c73a72631fc6c0eb6dde34a73e44b"

dependencies = [

 "pxfm",

 "image",

]

[[package]]

name = "png"

version = "0.18.1"

source = "registry+https://github.com/rust-lang/crates.io-index"

checksum = "60769b8b31b2a9f263dae2776c37b1b28ae246943cf719eb6946a1db05128a61"

dependencies = [

 "bitflags",

 "crc32fast",

 "fdeflate",

 "flate2",

 "miniz_oxide 0.8.9",

name = "pxfm"

version = "0.1.30"

source = "registry+https://github.com/rust-lang/crates.io-index"

checksum = "d55d956fa96f5ec02be2e13af0e20391a5aa83d6a074e3ad368959d0fab299ea"

[[package]]

[[package]]

name = "quick-error"

version = "2.0.1"

source = "registry+https://github.com/rust-lang/crates.io-index"

checksum = "a993555f31e5a609f617c12db6250dedcac1b0a85076912c436e6fc9b2c8e6a3"

]

[[package]]

name = "zune-core"

version = "0.5.3"

source = "registry+https://github.com/rust-lang/crates.io-index"

checksum = "d56377fd46368984a170bc5aac5567e52ca5da874caa60bea39fcbca78fb658b"

[[package]]

name = "zune-jpeg"

version = "0.5.15"

source = "registry+https://github.com/rust-lang/crates.io-index"

checksum = "27bc9d5b815bc103f142aa054f561d9187d191692ec7c2d1e2b4737f8dbd7296"

dependencies = [

 "zune-core",

image = { version = "0.25", default-features = false, features = ["png", "jpeg", "webp"] }

    /// `png:<hash>` or `jpeg:<hash>` when a picture was uploaded.

    pub avatar: String,

    /// `png:<hash>` or `jpeg:<hash>` when a picture was uploaded.

    pub avatar: String,

/// An organisation with the account's role in it.

#[derive(FromRow)]

struct Membership {

    #[sqlx(flatten)]

    org: Organisation,

    role: String,

}

    let rows: Vec<Membership> = sqlx::query_as(

        "SELECT o.*, m.role FROM organisations o JOIN org_members m ON m.org_id = o.id WHERE m.account_id = ? ORDER BY o.name",

    Ok(rows.into_iter().map(|m| (m.org, m.role)).collect())

}

/// Set or clear the picture of an account (`account`) or organisation (`org`).

pub async fn set_avatar(pool: &Pool, kind: &str, id: i64, value: &str) -> sqlx::Result<()> {

    let table = if kind == "org" { "organisations" } else { "accounts" };

    sqlx::query(&format!("UPDATE {table} SET avatar = ? WHERE id = ?")).bind(value).bind(id).execute(pool).await?;

    Ok(())

//! Pictures of accounts and organisations (hub spec §6.3): an uploaded

//! photo or logo, re-encoded so no uploaded bytes are ever served, or an

//! identicon: a five-by-five mirrored pattern and a colour drawn from

//! BLAKE3 of the lower-cased name, so everyone has a stable picture.

use crate::db::accounts;

use crate::Shared;

use axum::extract::{Path, State};

use std::io::Cursor;

/// Largest upload accepted.

pub const MAX_BYTES: usize = 5 << 20;

/// Largest width or height decoded.

const MAX_SIDE: u32 = 8000;

/// The stored picture is this many pixels square.

pub const SIZE: u32 = 400;

/// A re-encoded picture.

pub struct Picture {

    pub bytes: Vec<u8>,

    /// `png` or `jpeg`.

    pub format: &'static str,

}

/// Decode an upload (PNG, JPEG or WebP by content), crop it to the middle

/// square, scale it to `SIZE`, and encode it afresh: PNG when it has

/// transparency, JPEG otherwise.

pub fn process(input: &[u8]) -> Result<Picture, String> {

    if input.len() > MAX_BYTES {

        return Err(format!("A picture can be at most {} MiB.", MAX_BYTES >> 20));

    }

    let format = image::guess_format(input).map_err(|_| "That is not a PNG, JPEG or WebP image.".to_string())?;

    if !matches!(format, image::ImageFormat::Png | image::ImageFormat::Jpeg | image::ImageFormat::WebP) {

        return Err("Pictures must be PNG, JPEG or WebP.".into());

    }

    let mut reader = image::ImageReader::with_format(Cursor::new(input), format);

    let mut limits = image::Limits::default();

    limits.max_image_width = Some(MAX_SIDE);

    limits.max_image_height = Some(MAX_SIDE);

    limits.max_alloc = Some(512 << 20);

    reader.limits(limits);

    let img = reader.decode().map_err(|e| format!("The image could not be read: {e}"))?;

    let side = img.width().min(img.height());

    if side == 0 {

        return Err("The image is empty.".into());

    }

    let square = img.crop_imm((img.width() - side) / 2, (img.height() - side) / 2, side, side);

    let scaled = square.resize_exact(SIZE, SIZE, image::imageops::FilterType::Lanczos3);

    let mut out = Vec::new();

    if scaled.color().has_alpha() {

        scaled.to_rgba8().write_to(&mut Cursor::new(&mut out), image::ImageFormat::Png).map_err(|e| e.to_string())?;

        Ok(Picture { bytes: out, format: "png" })

    } else {

        image::codecs::jpeg::JpegEncoder::new_with_quality(&mut out, 88).encode_image(&scaled.to_rgb8()).map_err(|e| e.to_string())?;

        Ok(Picture { bytes: out, format: "jpeg" })

    }

}

fn file_of(app: &Shared, kind: &str, id: i64) -> std::path::PathBuf {

    app.config.data.join("avatars").join(format!("{kind}-{id}"))

}

/// Process and store an upload as the picture of an account (`account`) or

/// organisation (`org`).

pub async fn store(app: &Shared, kind: &str, id: i64, upload: Vec<u8>) -> Result<(), String> {

    let pic = tokio::task::spawn_blocking(move || process(&upload)).await.map_err(|e| e.to_string())??;

    let path = file_of(app, kind, id);

    let dir = path.parent().unwrap().to_path_buf();

    tokio::fs::create_dir_all(&dir).await.map_err(|e| e.to_string())?;

    let tmp = dir.join(format!(".{kind}-{id}.tmp"));

    tokio::fs::write(&tmp, &pic.bytes).await.map_err(|e| e.to_string())?;

    tokio::fs::rename(&tmp, &path).await.map_err(|e| e.to_string())?;

    let hash = blake3::hash(&pic.bytes).to_hex();

    accounts::set_avatar(&app.db, kind, id, &format!("{}:{}", pic.format, &hash[..16])).await.map_err(|e| e.to_string())

}

/// Go back to the identicon.

pub async fn remove(app: &Shared, kind: &str, id: i64) -> Result<(), String> {

    accounts::set_avatar(&app.db, kind, id, "").await.map_err(|e| e.to_string())?;

    let _ = tokio::fs::remove_file(file_of(app, kind, id)).await;

    Ok(())

}

}

/// A picture form: the CSRF token, the file, and `action=remove` to clear it.

pub struct Upload {

    pub csrf: String,

    pub file: Vec<u8>,

    pub remove: bool,

}

pub async fn read_upload(mut multipart: axum::extract::Multipart) -> Upload {

    let mut u = Upload { csrf: String::new(), file: Vec::new(), remove: false };

    while let Ok(Some(field)) = multipart.next_field().await {

        match field.name() {

            Some("_csrf") => u.csrf = field.text().await.unwrap_or_default(),

            Some("picture") => u.file = field.bytes().await.map(|b| b.to_vec()).unwrap_or_default(),

            Some("action") => u.remove = field.text().await.unwrap_or_default() == "remove",

            _ => {}

        }

    }

    u

}

/// Apply a picture form to an account or organisation; the message to show.

pub async fn apply(app: &Shared, kind: &str, id: i64, u: Upload) -> Result<String, String> {

    if u.remove {

        remove(app, kind, id).await?;

        return Ok("Picture removed; the generated one is back.".into());

    }

    if u.file.is_empty() {

        return Err("Choose a picture to upload.".into());

    }

    store(app, kind, id, u.file).await?;

    Ok("Picture saved.".into())

/// `GET /avatar/{name}`: the uploaded picture, or the identicon.

pub async fn avatar(State(app): State<Shared>, Path(name): Path<String>) -> Response {

    let uploaded = match accounts::account_by_name(&app.db, name).await.ok().flatten() {

        Some(a) => Some(("account", a.id, a.avatar)),

        None => accounts::org_by_name(&app.db, name).await.ok().flatten().map(|o| ("org", o.id, o.avatar)),

    };

    if let Some((kind, id, value)) = uploaded.filter(|(_, _, v)| !v.is_empty()) {

        if let (Some((format, hash)), Ok(bytes)) = (value.split_once(':'), tokio::fs::read(file_of(&app, kind, id)).await) {

            let mime = if format == "png" { "image/png" } else { "image/jpeg" };

            return (

                [

                    (header::CONTENT_TYPE, mime.to_string()),

                    (header::CACHE_CONTROL, "public, max-age=300".to_string()),

                    (header::ETAG, format!("\"{hash}\"")),

                    (header::X_CONTENT_TYPE_OPTIONS, "nosniff".to_string()),

                ],

                bytes,

            )

                .into_response();

        }

    }

    ([(header::CONTENT_TYPE, "image/svg+xml"), (header::CACHE_CONTROL, "public, max-age=300")], identicon(name)).into_response()

    use super::{identicon, process, SIZE};

    fn encoded(img: image::DynamicImage, format: image::ImageFormat) -> Vec<u8> {

        let mut out = Vec::new();

        img.write_to(&mut std::io::Cursor::new(&mut out), format).unwrap();

        out

    }

    #[test]

    fn uploads_are_cropped_scaled_and_reencoded() {

        // A wide photo becomes a square JPEG from its middle.

        let photo = image::DynamicImage::ImageRgb8(image::RgbImage::from_fn(900, 300, |x, _| image::Rgb([(x / 4) as u8, 80, 160])));

        let pic = process(&encoded(photo, image::ImageFormat::Png)).unwrap();

        assert_eq!(pic.format, "jpeg");

        let back = image::load_from_memory(&pic.bytes).unwrap();

        assert_eq!((back.width(), back.height()), (SIZE, SIZE));

        // A logo with transparency stays PNG with its alpha.

        let logo = image::DynamicImage::ImageRgba8(image::RgbaImage::from_fn(64, 64, |x, _| {

            image::Rgba([0, 114, 255, if x < 32 { 0 } else { 255 }])

        }));

        let pic = process(&encoded(logo, image::ImageFormat::Png)).unwrap();

        assert_eq!(pic.format, "png");

        assert!(image::load_from_memory(&pic.bytes).unwrap().color().has_alpha());

        // JPEG in, too.

        let jpeg = encoded(image::DynamicImage::ImageRgb8(image::RgbImage::new(50, 80)), image::ImageFormat::Jpeg);

        assert_eq!(process(&jpeg).unwrap().format, "jpeg");

    }

    #[test]

    fn anything_else_is_refused() {

        assert!(process(b"<svg xmlns='http://www.w3.org/2000/svg'><script>alert(1)</script></svg>").is_err(), "no SVG");

        assert!(process(b"GIF89a\x01\0\x01\0").is_err(), "no GIF");

        assert!(process(b"\x89PNG\r\n\x1a\n broken").is_err(), "a truncated PNG");

        assert!(process(&vec![0u8; super::MAX_BYTES + 1]).err().unwrap().contains("at most 5 MiB"));

        // Larger than the side limit: refused before allocating it.

        let big = encoded(image::DynamicImage::ImageLuma8(image::GrayImage::new(8001, 1)), image::ImageFormat::Png);

        assert!(process(&big).is_err(), "8001 pixels wide");

    }

        .route("/orgs/{name}/settings/avatar", post(orgs::avatar).layer(DefaultBodyLimit::max(avatar::MAX_BYTES + (64 << 10))))

        .route("/settings/avatar", post(settings::avatar).layer(DefaultBodyLimit::max(avatar::MAX_BYTES + (64 << 10))))

/// `POST /orgs/{name}/settings/avatar`: upload or remove the organisation's logo.

pub async fn avatar(

    State(app): State<Shared>,

    viewer: Viewer,

    Path(name): Path<String>,

    multipart: axum::extract::Multipart,

) -> Result<Page<OrgSettingsPage>, Error> {

    let shell = Shell::new(&app, &format!("/orgs/{name}/settings"), &viewer);

    let (me, org) = owned_org(&app, &shell, &viewer, &name).await?;

    let upload = super::avatar::read_upload(multipart).await;

    csrf(&viewer, &upload.csrf, &shell)?;

    let result = super::avatar::apply(&app, "org", org.id, upload).await;

    if result.is_ok() {

        accounts::audit(&app.db, Some(&me), "org.picture", &org.name, "").await.ok();

    }

    let org = accounts::org_by_name(&app.db, &name).await.map_err(|e| Error::from_db(shell.clone(), e))?.unwrap_or(org);

    match result {

        Ok(m) => org_page(&app, shell, org, Some(m), None).await,

        Err(e) => org_page(&app, shell, org, None, Some(e)).await,

    }

}

/// `POST /settings/avatar`: upload or remove the profile picture.

pub async fn avatar(

    State(app): State<Shared>,

    viewer: Viewer,

    headers: HeaderMap,

    multipart: Multipart,

) -> Result<Page<SettingsPage>, Error> {

    let shell = Shell::new(&app, "/settings", &viewer);

    let me = require(&viewer, &shell)?;

    let upload = super::avatar::read_upload(multipart).await;

    csrf(&viewer, &upload.csrf, &shell)?;

    let result = super::avatar::apply(&app, "account", me.account.id, upload).await;

    if result.is_ok() {

        accounts::audit(&app.db, Some(&me.account), "profile.picture", &me.account.username, "").await.ok();

    }

    let fresh = accounts::account_by_id(&app.db, me.account.id).await.map_err(|e| Error::from_db(shell.clone(), e))?.unwrap_or(me.account);

    let page = SettingsPage::new(shell, fresh, &headers).with_mail(&app);

    Ok(Page(match result {

        Ok(m) => page.notice(m),

        Err(e) => page.error(e),

    }))

}

/// A multipart picture form.

fn picture_form(csrf: &str, action: &str, file: &[u8]) -> (String, Vec<u8>) {

    let boundary = "picture-boundary-1234";

    let mut body = Vec::new();

    body.extend_from_slice(format!("--{boundary}\r\nContent-Disposition: form-data; name=\"_csrf\"\r\n\r\n{csrf}\r\n").as_bytes());

    body.extend_from_slice(format!("--{boundary}\r\nContent-Disposition: form-data; name=\"action\"\r\n\r\n{action}\r\n").as_bytes());

    body.extend_from_slice(

        format!("--{boundary}\r\nContent-Disposition: form-data; name=\"picture\"; filename=\"me.png\"\r\nContent-Type: image/png\r\n\r\n")

            .as_bytes(),

    );

    body.extend_from_slice(file);

    body.extend_from_slice(format!("\r\n--{boundary}--\r\n").as_bytes());

    (format!("multipart/form-data; boundary={boundary}"), body)

}

async fn upload(app: &Shared, path: &str, cookie: &str, csrf: &str, action: &str, file: &[u8]) -> Res {

    let (ct, body) = picture_form(csrf, action, file);

    let req = Request::post(path)

        .header(header::COOKIE, format!("oxyhub={cookie}"))

        .header(header::CONTENT_TYPE, ct)

        .body(Body::from(body))

        .unwrap();

    let res = oxygenhub::router(app.clone()).oneshot(req).await.unwrap();

    let status = res.status();

    let bytes = res.into_body().collect().await.unwrap().to_bytes();

    Res { status, body: String::from_utf8_lossy(&bytes).into_owned(), cookie: None, location: None }

}

/// Status, content type and bytes of a picture.

async fn picture(app: &Shared, name: &str) -> (StatusCode, String, Vec<u8>) {

    let res = oxygenhub::router(app.clone()).oneshot(Request::get(format!("/avatar/{name}")).body(Body::empty()).unwrap()).await.unwrap();

    let ct = res.headers().get(header::CONTENT_TYPE).and_then(|v| v.to_str().ok()).unwrap_or("").to_string();

    let status = res.status();

    (status, ct, res.into_body().collect().await.unwrap().to_bytes().to_vec())

}

fn png(w: u32, h: u32, alpha: bool) -> Vec<u8> {

    let img = if alpha {

        image::DynamicImage::ImageRgba8(image::RgbaImage::from_fn(w, h, |x, _| {

            image::Rgba([0, 114, 255, if x % 2 == 0 { 0 } else { 255 }])

        }))

    } else {

        image::DynamicImage::ImageRgb8(image::RgbImage::from_fn(w, h, |x, y| image::Rgb([x as u8, y as u8, 128])))

    };

    let mut out = Vec::new();

    img.write_to(&mut std::io::Cursor::new(&mut out), image::ImageFormat::Png).unwrap();

    out

}

#[tokio::test(flavor = "multi_thread")]

async fn profile_pictures_and_logos() {

    let h = hub().await;

    let app = &h.app;

    let andy = register(app, "andy", "").await;

    assert_eq!(picture(app, "andy").await.1, "image/svg+xml", "the identicon first");

    let csrf = csrf_of(&get(app, "/settings", Some(&andy)).await.body);

    assert!(get(app, "/settings", Some(&andy)).await.body.contains("id=\"picture\""));

    // A photo: cropped, scaled and re-encoded as JPEG.

    let r = upload(app, "/settings/avatar", &andy, &csrf, "upload", &png(640, 480, false)).await;

    assert!(r.body.contains("Picture saved"), "{}", r.body);

    let (st, ct, bytes) = picture(app, "andy").await;

    assert_eq!((st, ct.as_str()), (StatusCode::OK, "image/jpeg"));

    let img = image::load_from_memory(&bytes).unwrap();

    assert_eq!((img.width(), img.height()), (400, 400));

    let stored = db::accounts::account_by_name(&app.db, "andy").await.unwrap().unwrap().avatar;

    assert!(stored.starts_with("jpeg:"), "{stored}");

    // Not an image, or no CSRF: refused, and the picture stays.

    let r = upload(

        app,

        "/settings/avatar",

        &andy,

        &csrf,

        "upload",

        b"<svg xmlns=\"http://www.w3.org/2000/svg\"><script>alert(1)</script></svg>",

    )

    .await;

    assert!(r.body.contains("not a PNG, JPEG or WebP"), "{}", r.body);

    let r = upload(app, "/settings/avatar", &andy, "wrong", "upload", &png(10, 10, false)).await;

    assert_ne!(r.status, StatusCode::OK);

    assert_eq!(picture(app, "andy").await.1, "image/jpeg");

    // Removing brings the identicon back.

    let r = upload(app, "/settings/avatar", &andy, &csrf, "remove", b"").await;

    assert!(r.body.contains("Picture removed"));

    assert_eq!(picture(app, "andy").await.1, "image/svg+xml");

    // An organisation's logo keeps its transparency; only owners may set it.

    let me = db::accounts::account_by_name(&app.db, "andy").await.unwrap().unwrap();

    db::accounts::create_org(&app.db, "acme", "Acme", me.id).await.unwrap();

    let org_csrf = csrf_of(&get(app, "/orgs/acme/settings", Some(&andy)).await.body);

    let r = upload(app, "/orgs/acme/settings/avatar", &andy, &org_csrf, "upload", &png(120, 120, true)).await;

    assert!(r.body.contains("Picture saved"), "{}", r.body);

    let (_, ct, bytes) = picture(app, "acme").await;

    assert_eq!(ct, "image/png");

    assert!(image::load_from_memory(&bytes).unwrap().color().has_alpha());

    let invite = {

        let admin = get(app, "/admin", Some(&andy)).await;

        let r = post(app, "/admin/invite", Some(&andy), &format!("_csrf={}", csrf_of(&admin.body))).await;

        let i = r.body.find("invite=").map(|i| i + 7).expect("an invitation");

        r.body[i..].chars().take_while(|c| c.is_ascii_alphanumeric()).collect::<String>()

    };

    let bob = register(app, "bob", &invite).await;

    let bob_csrf = csrf_of(&get(app, "/settings", Some(&bob)).await.body);

    let r = upload(app, "/orgs/acme/settings/avatar", &bob, &bob_csrf, "remove", b"").await;

    assert_eq!(r.status, StatusCode::NOT_FOUND, "not an owner");

    assert_eq!(picture(app, "acme").await.1, "image/png");

}

| `/{owner}` | A person: identicon, display name, bio, location, website, linked signing keys, organisations, repositories the viewer can see, and their recent activity (never the email). An organisation: identicon, description, members with roles, teams with sizes, repositories, recent activity in them. `/avatar/{name}` serves the account's or organisation's picture: an uploaded photo or logo when there is one, otherwise the identicon (SVG, a mirrored 5×5 pattern and hue from BLAKE3 of the lower-cased name). Pictures are uploaded under Settings › Profile, or an organisation's settings by its owners: PNG, JPEG or WebP recognised by content (not by name), at most 5 MiB and 8 000 pixels a side, decoded, centre-cropped to a square and re-encoded at 400×400 (PNG when it has transparency, JPEG otherwise), so no uploaded bytes are ever served. Removing the picture brings the identicon back. Pictures are cached for five minutes and carry an ETag. |

  <a href="#logo">Logo</a>

</form>

<form class="card picture-card" id="logo" method="post" action="/orgs/{{ org.name }}/settings/avatar" enctype="multipart/form-data">

  <input type="hidden" name="_csrf" value="{{ shell.csrf }}">

  <h2>Logo</h2>

  <div class="picture-row">

    <img class="avatar xl" src="/avatar/{{ org.name }}?v={{ org.avatar }}" alt="{{ org.name }} logo" width="96" height="96">

    <div>

      <label for="logo-file">Upload a logo</label>

      <input type="file" id="logo-file" name="picture" accept="image/png,image/jpeg,image/webp">

      <p class="small mute">PNG (transparency is kept), JPEG or WebP, up to 5 MiB. It is cropped to the middle square and resized to 400×400.</p>

      <button type="submit" name="action" value="upload">UPLOAD</button>

      {% if !org.avatar.is_empty() %}<button type="submit" name="action" value="remove" class="danger-btn">REMOVE</button>{% endif %}

    </div>

  </div>

  <a href="#picture">Picture</a>

</form>

<form class="card picture-card" id="picture" method="post" action="/settings/avatar" enctype="multipart/form-data">

  <input type="hidden" name="_csrf" value="{{ shell.csrf }}">

  <h2>Picture</h2>

  <div class="picture-row">

    <img class="avatar xl" src="/avatar/{{ me.username }}?v={{ me.avatar }}" alt="Your picture" width="96" height="96">

    <div>

      <label for="picture-file">Upload a photo</label>

      <input type="file" id="picture-file" name="picture" accept="image/png,image/jpeg,image/webp">

      <p class="small mute">PNG, JPEG or WebP, up to 5 MiB. It is cropped to the middle square and resized to 400×400.{% if me.avatar.is_empty() %} Until then you have a picture drawn from your username.{% endif %}</p>

      <button type="submit" name="action" value="upload">UPLOAD</button>

      {% if !me.avatar.is_empty() %}<button type="submit" name="action" value="remove" class="danger-btn">REMOVE</button>{% endif %}

    </div>

  </div>

img.avatar { display: inline-block; vertical-align: middle; border: 1px solid var(--line); object-fit: cover; }

/* Picture upload (hub spec §6.3). */

.picture-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }

.picture-row img.avatar.xl { width: 96px; height: 96px; }

.picture-row > div { flex: 1; min-width: 220px; }