Profile and organisation pages, with identicons 101740454617

-- Public profile fields (hub spec §6: owner pages).

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

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

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

//! Identicons (hub spec §6): a five-by-five mirrored pattern and a colour

//! drawn from BLAKE3 of the lower-cased name, so every account and

//! organisation has a stable picture without uploads.

use axum::extract::Path;

use axum::http::header;

use axum::response::{IntoResponse, Response};

/// The SVG for `name`: 15 bits choose the cells of the left three columns

/// (mirrored to five), two bytes choose the hue.

pub fn identicon(name: &str) -> String {

    let h = blake3::hash(name.to_ascii_lowercase().as_bytes());

    let b = h.as_bytes();

    let hue = u16::from_le_bytes([b[0], b[1]]) % 360;

    let bits = u32::from_le_bytes([b[2], b[3], b[4], b[5]]);

    let mut cells = String::new();

    for row in 0..5u32 {

        for col in 0..3u32 {

            if bits >> (row * 3 + col) & 1 == 1 {

                for x in [col, 4 - col] {

                    cells.push_str(&format!(r#"<rect x="{}" y="{}" width="1" height="1"/>"#, x + 1, row + 1));

                    if x == 2 {

                        break;

                    }

                }

            }

        }

    }

    format!(

        r#"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7" shape-rendering="crispEdges"><rect width="7" height="7" fill="hsl({hue},45%,92%)"/><g fill="hsl({hue},65%,45%)">{cells}</g></svg>"#

    )

}

/// `GET /avatar/{name}`: the identicon, cached for a day.

pub async fn avatar(Path(name): Path<String>) -> Response {

    let name = name.trim_end_matches(".svg");

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

}

#[cfg(test)]

mod tests {

    use super::identicon;

    #[test]

    fn identicons_are_stable_symmetric_and_case_blind() {

        let a = identicon("andy");

        assert_eq!(a, identicon("Andy"), "names are case-insensitive");

        assert_ne!(a, identicon("bob"));

        assert!(a.starts_with("<svg") && a.ends_with("</svg>"));

        // Every cell has its mirror image.

        let cells: Vec<(u32, u32)> = a

            .split(r#"<rect x=""#)

            .skip(1)

            .filter_map(|r| {

                let x: u32 = r.split('"').next()?.parse().ok()?;

                let y: u32 = r.split(r#"y=""#).nth(1)?.split('"').next()?.parse().ok()?;

                Some((x, y))

            })

            .filter(|(x, _)| (1..=5).contains(x))

            .collect();

        for (x, y) in &cells {

            assert!(cells.contains(&(6 - x, *y)), "({x},{y}) has no mirror in {a}");

        }

    }

}

{% if feed.is_empty() %}

<p class="empty small">Nothing yet.</p>

{% else %}

<ul class="feed">

{% for a in feed %}

  <li>

    <span class="who">{% if a.actor.is_empty() %}the hub{% else %}<img class="avatar xs" src="/avatar/{{ a.actor }}" alt=""> <a href="/{{ a.actor }}">{{ a.actor }}</a>{% endif %}</span>

    {% if a.kind == "push" %}pushed <span class="lbl lbl-bm">{{ a.event }}</span> to

    {% else if a.kind == "release" %}published <a href="{{ a.url() }}">{{ a.title }}</a> in

    {% else %}{{ a.event }} {{ a.kind }} <a href="{{ a.url() }}">#{{ a.number }} {{ a.title }}</a> in

    {% endif %}

    <a href="/{{ a.owner }}/{{ a.name }}">{{ a.owner }}/{{ a.name }}</a>

    <time class="mute small" title="{{ a.at_ms|when_i }}">{{ a.at_ms|ago_i }}</time>

  </li>

{% endfor %}

</ul>

{% endif %}

{% extends "base.html" %}

{% block title %}{{ org.name }}{% endblock %}

{% block content %}

<div class="side-layout profile">

  <aside class="side who-card">

    <img class="avatar xl" src="/avatar/{{ org.name }}" alt="">

    {% if !org.display_name.is_empty() %}<h1 class="display">{{ org.display_name }}</h1>{% endif %}

    <p class="handle">{{ org.name }} <span class="tag">organisation</span></p>

    {% if !org.description.is_empty() %}<p class="bio">{{ org.description }}</p>{% endif %}

    {% if can_admin %}<a class="go small" href="/orgs/{{ org.name }}/settings">settings</a>{% endif %}

    <h3>Members <small>{{ members.len() }}</small></h3>

    <ul class="plain">{% for (m, role) in members %}<li><img class="avatar xs" src="/avatar/{{ m.username }}" alt=""> <a href="/{{ m.username }}">{{ m.username }}</a>{% if role == "owner" %} <span class="small mute">owner</span>{% endif %}</li>{% endfor %}</ul>

    {% if !teams.is_empty() %}

    <h3>Teams</h3>

    <ul class="plain">{% for (t, n) in teams %}<li>{{ t.name }} <span class="small mute">{{ n|plural("member", "members") }}</span></li>{% endfor %}</ul>

    {% endif %}

  </aside>

  <div>

    <h2>Repositories <small>{{ repos.len() }}</small></h2>

    {% include "repo_list.html" %}

    <h2>Recent activity</h2>

    {% include "feed.html" %}

  </div>

</div>

{% endblock %}

{% extends "base.html" %}

{% block title %}{{ account.username }}{% endblock %}

{% block content %}

<div class="side-layout profile">

  <aside class="side who-card">

    <img class="avatar xl" src="/avatar/{{ account.username }}" alt="">

    {% if !account.display_name.is_empty() %}<h1 class="display">{{ account.display_name }}</h1>{% endif %}

    <p class="handle">{{ account.username }}{% if account.is_admin %} <span class="tag">admin</span>{% endif %}</p>

    {% if !account.bio.is_empty() %}<p class="bio">{{ account.bio }}</p>{% endif %}

    <ul class="plain facts-list small">

      {% if !account.location.is_empty() %}<li><span aria-hidden="true">⌖</span> {{ account.location }}</li>{% endif %}

      {% if let Some(w) = website_href() %}<li><span aria-hidden="true">↗</span> <a href="{{ w }}" rel="nofollow noopener">{{ w }}</a></li>{% endif %}

      <li class="mute">joined <time title="{{ account.created_ms|when_i }}">{{ account.created_ms|ago_i }}</time></li>

    </ul>

    {% if is_me %}<a class="go small" href="/settings">edit profile</a>{% endif %}

    {% if !orgs.is_empty() %}

    <h3>Organisations</h3>

    <ul class="plain">{% for (o, role) in orgs %}<li><img class="avatar xs" src="/avatar/{{ o.name }}" alt=""> <a href="/{{ o.name }}">{{ o.name }}</a>{% if role == "owner" %} <span class="small mute">owner</span>{% endif %}</li>{% endfor %}</ul>

    {% endif %}

    <h3>Signing keys</h3>

    {% if keys.is_empty() %}<p class="small mute">None linked.</p>

    {% else %}<ul class="plain keys small">{% for k in keys %}<li><code title="{{ k.key }}">{{ k.key[..16] }}…</code><br><span class="mute">{{ k.name }}</span></li>{% endfor %}</ul>{% endif %}

  </aside>

  <div>

    <h2>Repositories <small>{{ repos.len() }}</small></h2>

    {% include "repo_list.html" %}

    <h2>Recent activity</h2>

    {% include "feed.html" %}

  </div>

</div>

{% endblock %}

{% if repos.is_empty() %}

<p class="empty small">No repositories you can see.</p>

{% else %}

<ul class="rows repos">

{% for r in repos %}

  <li>

    <div>

      <a class="name" href="/{{ r.owner }}/{{ r.name }}"><strong>{{ r.name }}</strong></a>

      {% if r.visibility != "public" %}<span class="tag">{{ r.visibility }}</span>{% endif %}

      {% if !r.description.is_empty() %}<p class="small">{{ r.description }}</p>{% endif %}

    </div>

    <div class="right small">updated <time title="{{ r.updated_ms|when_i }}">{{ r.updated_ms|ago_i }}</time></div>

  </li>

{% endfor %}

</ul>

{% endif %}

 "rayon",

name = "rayon"

version = "1.12.0"

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

checksum = "fb39b166781f92d482534ef4b4b1b2568f42613b53e5b6c160e24cfbfa30926d"

dependencies = [

 "either",

 "rayon-core",

]

[[package]]

name = "rayon-core"

version = "1.13.0"

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

checksum = "22e18b0f0062d30d4230b2e85ff77fdfe4326feb054b9783a3460d8435c8ab91"

dependencies = [

 "crossbeam-deque",

 "crossbeam-utils",

]

[[package]]

    /// Shown on the profile page (migration 0008).

    #[sqlx(default)]

    pub bio: String,

    #[sqlx(default)]

    pub website: String,

    #[sqlx(default)]

    pub location: String,

/// The public profile fields.

pub async fn set_bio(pool: &Pool, id: i64, bio: &str, website: &str, location: &str) -> sqlx::Result<()> {

    sqlx::query("UPDATE accounts SET bio = ?, website = ?, location = ? WHERE id = ?")

        .bind(bio)

        .bind(website)

        .bind(location)

        .bind(id)

        .execute(pool)

        .await?;

    Ok(())

}

    feed_by(pool, repo_ids, None, limit).await

}

/// Like `feed`, only what `actor` did when one is given (profile pages).

pub async fn feed_by(pool: &Pool, repo_ids: &[i64], actor: Option<&str>, limit: i64) -> sqlx::Result<Vec<Activity>> {

           AND (? IS NULL OR ev.actor = ? COLLATE NOCASE) \

    .bind(actor)

    .bind(actor)

    "avatar",

    "help",

/// A person's page (hub spec §6): avatar, names, bio, linked signing

/// keys, organisations, repositories and what they did lately.

#[derive(Template)]

#[template(path = "profile.html")]

pub struct ProfilePage {

    shell: Shell,

    account: db::accounts::Account,

    keys: Vec<db::accounts::LinkedIdentity>,

    orgs: Vec<(db::accounts::Organisation, String)>,

    repos: Vec<db::repos::RepoRow>,

    feed: Vec<db::activity::Activity>,

    is_me: bool,

}

impl ProfilePage {

    /// The website as a link only when it is http(s).

    fn website_href(&self) -> Option<&str> {

        let w = self.account.website.trim();

        (w.starts_with("https://") || w.starts_with("http://")).then_some(w)

    }

}

/// An organisation's page: description, members with their roles, teams,

/// repositories and recent activity in them.

#[derive(Template)]

#[template(path = "org.html")]

pub struct OrgPage {

    shell: Shell,

    org: db::accounts::Organisation,

    members: Vec<(db::accounts::Account, String)>,

    teams: Vec<(db::accounts::Team, usize)>,

    repos: Vec<db::repos::RepoRow>,

    feed: Vec<db::activity::Activity>,

    can_admin: bool,

}

/// How many activity lines an owner page shows.

const OWNER_FEED: i64 = 20;

/// `/{owner}`: a person's profile, an organisation's page, or (for an

/// owner that is neither, such as repositories an administrator created

/// for a name nobody holds) the list of its repositories.

pub async fn owner(State(app): State<Shared>, viewer: Viewer, Path(owner): Path<String>) -> Result<Response, Error> {

    let db_err = |e| Error::from_db(shell.clone(), e);

    let mut repos = visible(&app, &shell, &viewer, db::repos::list_by_owner(&app.db, &owner).await.map_err(db_err)?).await?;

    repos.sort_by_key(|r| std::cmp::Reverse(r.updated_ms));

    if let Some(account) = db::accounts::account_by_name(&app.db, &owner).await.map_err(db_err)? {

        // What they did anywhere the viewer can see, not only in their own repositories.

        let all = visible(&app, &shell, &viewer, db::repos::list(&app.db).await.map_err(db_err)?).await?;

        let ids: Vec<i64> = all.iter().map(|r| r.id).collect();

        let feed = db::activity::feed_by(&app.db, &ids, Some(&account.username), OWNER_FEED).await.map_err(db_err)?;

        let keys = db::accounts::identities_of(&app.db, account.id).await.map_err(db_err)?;

        let orgs = db::accounts::orgs_of(&app.db, account.id).await.map_err(db_err)?;

        let is_me = viewer.account().is_some_and(|a| a.id == account.id);

        return Ok(Page(ProfilePage { shell, account, keys, orgs, repos, feed, is_me }).into_response());

    }

    if let Some(org) = db::accounts::org_by_name(&app.db, &owner).await.map_err(db_err)? {

        let members = db::accounts::org_members(&app.db, org.id).await.map_err(db_err)?;

        let mut teams = Vec::new();

        for t in db::accounts::teams(&app.db, org.id).await.map_err(db_err)? {

            let n = db::accounts::team_members(&app.db, t.id).await.map_err(db_err)?.len();

            teams.push((t, n));

        }

        let ids: Vec<i64> = repos.iter().map(|r| r.id).collect();

        let feed = db::activity::feed(&app.db, &ids, OWNER_FEED).await.map_err(db_err)?;

        let can_admin =

            viewer.is_admin() || viewer.account().is_some_and(|a| members.iter().any(|(m, role)| m.id == a.id && role == "owner"));

        return Ok(Page(OrgPage { shell, org, members, teams, repos, feed, can_admin }).into_response());

    }

    if repos.is_empty() {

    Ok(Page(HomePage { description: String::new(), shell, repos, owner: Some(owner) }).into_response())

mod avatar;

        .route("/avatar/{name}", get(avatar::avatar))

    #[serde(default)]

    bio: String,

    #[serde(default)]

    website: String,

    #[serde(default)]

    location: String,

    let website = f.website.trim();

    if !(website.is_empty() || website.starts_with("https://") || website.starts_with("http://")) || website.len() > 200 {

        return Ok(Page(SettingsPage::new(shell, me.account, &headers).error("The website must be an http:// or https:// address.")));

    }

    let bio: String = f.bio.trim().chars().take(280).collect();

    let location: String = f.location.trim().chars().take(80).collect();

    accounts::set_bio(&app.db, me.account.id, &bio, website, &location).await.map_err(|e| Error::from_db(shell.clone(), e))?;

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

async fn profile_and_organisation_pages() {

    let h = hub().await;

    let app = &h.app;

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

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

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

    let bob_id = db::accounts::account_by_name(&app.db, "bob").await.unwrap().unwrap().id;

    app.repos.create(&RepoName::parse("andy/demo").unwrap(), None).unwrap();

    db::repos::create(&app.db, "andy", "demo", "A demo", hub_api::Visibility::Public).await.unwrap();

    app.repos.create(&RepoName::parse("andy/hidden").unwrap(), None).unwrap();

    db::repos::create(&app.db, "andy", "hidden", "", hub_api::Visibility::Private).await.unwrap();

    // Andy fills in his profile; a script URL and markup are refused or escaped.

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

    let r = post(app, "/settings", Some(&andy), &format!("_csrf={csrf}&display_name=Andy+McCall&email=a%40example.com&bio=Builds+%3Cb%3Eoxy%3C%2Fb%3E&website=javascript%3Aalert(1)&location=Earth")).await;

    assert!(r.body.contains("must be an http"), "{}", r.body);

    let r = post(app, "/settings", Some(&andy), &format!("_csrf={csrf}&display_name=Andy+McCall&email=a%40example.com&bio=Builds+%3Cb%3Eoxy%3C%2Fb%3E&website=https%3A%2F%2Fexample.org&location=Earth")).await;

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

    let org = db::accounts::create_org(&app.db, "retro", "Retro Club", andy_id).await.unwrap();

    db::accounts::set_org_member(&app.db, org.id, bob_id, "member").await.unwrap();

    let team = db::accounts::create_team(&app.db, org.id, "core").await.unwrap();

    db::accounts::add_team_member(&app.db, team.id, bob_id).await.unwrap();

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

    assert_eq!(page.status, StatusCode::OK);

    for want in ["Andy McCall", "Earth", r#"href="https://example.org""#, "/avatar/andy", "Signing keys", "/retro", "demo"] {

        assert!(page.body.contains(want), "profile lacks {want}: {}", page.body);

    }

    assert!(!page.body.contains("<b>oxy</b>"), "the bio is escaped");

    assert!(!page.body.contains("[email protected]"), "the email stays private");

    assert!(!page.body.contains("/andy/hidden"), "bob cannot see the private repository");

    assert!(!page.body.contains("edit profile"), "only the owner gets the edit link");

    assert!(get(app, "/andy", Some(&andy)).await.body.contains("/andy/hidden"), "andy sees his own private repository");

    let page = get(app, "/retro", Some(&bob)).await;

    assert_eq!(page.status, StatusCode::OK);

    for want in ["Retro Club", "organisation", "Members <small>2</small>", "core", "1 member"] {

        assert!(page.body.contains(want), "org page lacks {want}: {}", page.body);

    }

    assert!(!page.body.contains("/orgs/retro/settings"), "bob is not an owner");

    assert!(get(app, "/retro", Some(&andy)).await.body.contains("/orgs/retro/settings"));

    let svg = get(app, "/avatar/andy", None).await;

    assert_eq!(svg.status, StatusCode::OK);

    assert!(svg.body.starts_with("<svg"));

    assert_eq!(svg.body, get(app, "/avatar/ANDY", None).await.body);

    assert_eq!(get(app, "/nobody-here", None).await.status, StatusCode::NOT_FOUND);

}

| `/{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 identicon (SVG, a mirrored 5×5 pattern and hue from BLAKE3 of the lower-cased name). |

    <a class="me" href="/{{ u }}"><img class="avatar xs" src="/avatar/{{ u }}" alt=""> {{ u }}</a>

        <span class="who">{% if a.actor.is_empty() %}the hub{% else %}<img class="avatar xs" src="/avatar/{{ a.actor }}" alt=""> <a href="/{{ a.actor }}">{{ a.actor }}</a>{% endif %}</span>

  <p class="small mute">Your email is never shown on your profile.</p>

  <label for="bio">Bio</label><textarea id="bio" name="bio" rows="3" maxlength="280">{{ me.bio }}</textarea>

  <label for="website">Website</label><input type="url" id="website" name="website" value="{{ me.website }}" placeholder="https://">

  <label for="location">Location</label><input type="text" id="location" name="location" value="{{ me.location }}" maxlength="80">

  <p class="small mute">Shown on <a href="/{{ me.username }}">your profile</a>, with a picture drawn from your username.</p>

/* avatars and owner pages */

img.avatar { display: inline-block; vertical-align: middle; border: 1px solid var(--line); image-rendering: pixelated; }

img.avatar.xs { width: 18px; height: 18px; }

img.avatar.sm { width: 24px; height: 24px; }

img.avatar.xl { width: 100%; max-width: 240px; height: auto; aspect-ratio: 1; }

.profile .who-card h1.display { font-size: 24px; font-weight: 600; margin: 12px 0 0; }

.profile .who-card .handle { font-size: 18px; color: var(--mute); margin: 2px 0 10px; }

.profile .who-card .bio { margin: 0 0 10px; }

.profile .who-card .facts-list li { padding: 2px 0; }

.profile h2 { font-size: 15px; margin: 0 0 8px; }

.profile h2 ~ h2 { margin-top: 18px; }

.profile .keys li { margin-bottom: 6px; }

.profile .side-layout, .side-layout.profile { grid-template-columns: 260px 1fr; }

@media (max-width: 760px) { .side-layout.profile { grid-template-columns: 1fr; } img.avatar.xl { max-width: 120px; } }