v3 : liens d'équipe, publication sur git.open.us.org, huitième relecture

Liens d'équipe (Yvv, 2026-10-21) : un lien réutilisable jusqu'à une date
et pour un nombre de personnes, révocable. Chaque ouverture demande un nom
et crée sa propre identité d'invitation, jamais administratrice ; un nom
déjà pris est refusé ; une personne déjà connectée reçoit les groupes.
trustinWallet montre par quel lien chaque identité est venue, et donne un
nouveau lien de connexion à une personne invitée (autre appareil).
Migration additive 0002 (table team_links, colonne identities.team_link).

Publication : yvv/libredecision-textes sur git.open.us.org, pour
l'instant (un dépôt pour l'ouverture, puis le dépôt officiel, viendront).

Huitième relecture (c3d6bf8 : ok), points corrigés :
- une négation n'est jamais coupée ni formée par collage (« ja mais ») ;
- caractères invisibles : tout l'ensemble Unicode des ignorables et les
  contrôles autres que saut de ligne et tabulation ;
- sauts de ligne et indentation font partie de la forme (listes) ;
- un titre tient sur une ligne.

Boucle : 65 tests Rust, svelte-check, 9 vitest, e2e 13/13 (C12 ajouté).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/lib/components/LinkReveal.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  // A link shown once, right after it was made: the server keeps only its hash.
+  import { t } from '$lib/i18n/index.svelte';
+  import { toasts } from '$lib/toast.svelte';
+
+  let { link, note }: { link: string; note: string } = $props();
+
+  async function copy() {
+    await navigator.clipboard.writeText(link);
+    toasts.show(t('access.invite.copied'));
+  }
+</script>
+
+<div class="link">
+  <p class="small">{note}</p>
+  <code>{link}</code>
+  <button class="btn small" type="button" onclick={copy}>{t('access.invite.copy')}</button>
+</div>
+
+<style>
+  .link {
+    display: grid;
+    gap: 0.5rem;
+    padding: 0.8rem;
+    border-radius: var(--r-input);
+    background: var(--water-wash);
+  }
+  code {
+    word-break: break-all;
+    font-size: 0.85rem;
+  }
+  .btn {
+    justify-self: start;
+  }
+  .small {
+    font-size: 0.84rem;
+  }
+</style>

web/src/lib/components/TeamLinks.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  // trustinWallet — team links: one link shared with a team, one identity per person.
+  import { api } from '$lib/api';
+  import { i18n, t } from '$lib/i18n/index.svelte';
+  import LinkReveal from './LinkReveal.svelte';
+
+  export interface TeamLink {
+    id: string;
+    label: string;
+    groups: string[];
+    expiresAt: string;
+    maxUses: number;
+    uses: number;
+  }
+
+  let {
+    groups,
+    links,
+    act,
+  }: {
+    groups: { slug: string; name: string }[];
+    links: TeamLink[];
+    act: (fn: () => Promise<unknown>) => Promise<void>;
+  } = $props();
+
+  let label = $state('');
+  let chosen = $state<string[]>([]);
+  let days = $state(30);
+  let maxUses = $state(30);
+  let link = $state('');
+
+  const nameOf = (slug: string) => groups.find((g) => g.slug === slug)?.name ?? slug;
+
+  async function create(e: SubmitEvent) {
+    e.preventDefault();
+    await act(async () => {
+      const r = await api.post<{ link: string }>('/access/team-links', { label, groups: chosen, days, maxUses });
+      link = r.link;
+      label = '';
+      chosen = [];
+    });
+  }
+</script>
+
+<section>
+  <h2 class="eyebrow">{t('access.team')}</h2>
+  <p class="muted small">{t('access.team.intro')}</p>
+  <form class="card block" onsubmit={create}>
+    <label class="field"><span>{t('access.team.label')}</span><input class="input" bind:value={label} maxlength="60" required /></label>
+    <fieldset>
+      <legend>{t('access.invite.groups')}</legend>
+      {#each groups as g (g.slug)}
+        <label class="check"><input type="checkbox" value={g.slug} bind:group={chosen} /> {g.name}</label>
+      {/each}
+    </fieldset>
+    <div class="row">
+      <label class="field"><span>{t('access.team.days')}</span><input class="input" type="number" min="1" max="90" bind:value={days} required /></label>
+      <label class="field"><span>{t('access.team.uses')}</span><input class="input" type="number" min="1" max="500" bind:value={maxUses} required /></label>
+    </div>
+    <button class="btn primary small" type="submit">{t('access.team.create')}</button>
+    {#if link}<LinkReveal {link} note={t('access.team.link')} />{/if}
+  </form>
+  {#if links.length}
+    <ul class="list">
+      {#each links as l (l.id)}
+        <li>
+          <span>
+            <b>{l.label}</b> · {l.groups.map(nameOf).join(', ')}<br />
+            <span class="faint small">{t('access.team.state', { uses: l.uses, max: l.maxUses, date: i18n.date(l.expiresAt) })}</span>
+          </span>
+          <button class="btn quiet small" type="button" onclick={() => act(() => api.del(`/access/team-links/${l.id}`))}>{t('access.team.revoke')}</button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</section>
+
+<style>
+  section {
+    display: grid;
+    gap: 0.7rem;
+  }
+  .block {
+    padding: 1.1rem 1.2rem;
+    display: grid;
+    gap: 0.6rem;
+  }
+  .block > .btn {
+    justify-self: start;
+  }
+  fieldset {
+    border: 0;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    gap: 0.35rem;
+  }
+  legend {
+    font-size: 0.82rem;
+    font-weight: 700;
+    color: var(--ink-soft);
+    margin-bottom: 0.3rem;
+  }
+  .check {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+  .row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+    gap: 0.6rem;
+  }
+  .list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 0.5rem;
+  }
+  .list li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.6rem;
+  }
+  .small {
+    font-size: 0.84rem;
+  }
+</style>

web/src/lib/i18n/en.ts

@@ -55,6 +55,17 @@ export const en: Messages = {
   'invite.working': 'Signing in…',
   'invite.invalid': 'This invitation link is no longer valid: it has already been used or it has expired. Ask the person who sent it to you for a new link.',
   'invite.missing': 'This link is incomplete. Open the whole invitation link, exactly as you received it.',
+  'team.title': 'Join a team',
+  'team.working': 'Reading the link…',
+  'team.invalid': 'This team link is no longer valid: it has expired, it has been revoked or all its places are taken. Ask the person who sent it to you for a new link.',
+  'team.missing': 'This link is incomplete. Open the whole team link, exactly as you received it.',
+  'team.opens': '“{label}” opens for you: {groups}.',
+  'team.until': 'Link valid until {date}.',
+  'team.name': 'Your name',
+  'team.name.hint': 'The name the group will see you under. One person, one identity: if you have already joined, come back in the browser where your session is open.',
+  'team.join': 'Join',
+  'team.signed': 'Your session is open under the name {name}: these groups are added to your identity.',
+  'team.add': 'Add these groups',
 
   'groups.title': 'My groups',
   'groups.same.key': 'Groups that use the same key',
@@ -275,10 +286,22 @@ export const en: Messages = {
   'access.invite.copied': 'Link copied.',
   'access.invite.cancel': 'Cancel',
   'access.invite.pending': 'Pending',
+  'access.team': 'Team links',
+  'access.team.intro': 'A link to share with a team, until a date. Each person who opens it gives their name and receives their own identity, never the administrator role.',
+  'access.team.label': 'For which team',
+  'access.team.days': 'Valid for how many days',
+  'access.team.uses': 'How many people at most',
+  'access.team.create': 'Create the team link',
+  'access.team.link': 'Team link, to share: it works until its date or its last place. It will not be shown again: copy it now.',
+  'access.team.state': '{uses} / {max} people · until {date}',
+  'access.team.revoke': 'Revoke',
+  'access.team.via': 'came through “{label}”',
   'access.identities': 'Identities',
   'access.admin': 'administrator',
   'access.admin.give': 'Make administrator',
   'access.admin.take': 'Remove role',
+  'access.relink': 'New sign-in link',
+  'access.relink.link': 'Sign-in link for {name}, single use, valid for 14 days — to open their session on another device. It will not be shown again: copy it now.',
   'access.kind.g1': 'Ğ1',
   'access.kind.invite': 'invitation',
   'access.kind.dev': 'dev',
@@ -314,6 +337,11 @@ export const en: Messages = {
   'error.hidden_characters': 'The text contains invisible characters (writing-direction overrides, zero-width spaces): remove them.',
   'error.changed': 'The text has changed in the meantime: reload it, then try again.',
   'error.wot_members_only': 'Here, only members of the Ğ1 web of trust vote.',
+  'error.label': 'The name is empty or too long (60 characters at most).',
+  'error.name': 'Your name has 2 to 60 characters, with no invisible character.',
+  'error.name_taken': 'This name is already taken. Choose another one, adding an initial for instance.',
+  'error.team_limits': 'A team link lasts 1 to 90 days, for 1 to 500 people.',
+  'error.groups': 'Choose at least one group.',
   'error.retry': 'Try again',
 
   'common.cancel': 'Cancel',

web/src/lib/i18n/es.ts

@@ -55,6 +55,17 @@ export const es: Messages = {
   'invite.working': 'Conectando…',
   'invite.invalid': 'Este enlace de invitación ya no es válido: ya se ha usado o ha caducado. Pide un enlace nuevo a la persona que te lo envió.',
   'invite.missing': 'Este enlace está incompleto. Abre el enlace de invitación completo, tal como lo recibiste.',
+  'team.title': 'Unirte a un equipo',
+  'team.working': 'Leyendo el enlace…',
+  'team.invalid': 'Este enlace de equipo ya no es válido: ha caducado, ha sido revocado o todas sus plazas están ocupadas. Pide un enlace nuevo a la persona que te lo envió.',
+  'team.missing': 'Este enlace está incompleto. Abre el enlace de equipo completo, tal como lo recibiste.',
+  'team.opens': '«{label}» te abre: {groups}.',
+  'team.until': 'Enlace válido hasta el {date}.',
+  'team.name': 'Tu nombre',
+  'team.name.hint': 'El nombre con el que el grupo te verá. Una persona, una identidad: si ya te uniste, vuelve en el navegador donde tienes la sesión abierta.',
+  'team.join': 'Unirme',
+  'team.signed': 'Tu sesión está abierta con el nombre {name}: estos grupos se añaden a tu identidad.',
+  'team.add': 'Añadir estos grupos',
 
   'groups.title': 'Mis grupos',
   'groups.same.key': 'Grupos que usan la misma clave',
@@ -275,10 +286,22 @@ export const es: Messages = {
   'access.invite.copied': 'Enlace copiado.',
   'access.invite.cancel': 'Cancelar',
   'access.invite.pending': 'Pendiente',
+  'access.team': 'Enlaces de equipo',
+  'access.team.intro': 'Un enlace para compartir con un equipo, hasta una fecha. Cada persona que lo abre da su nombre y recibe su propia identidad, nunca el rol de administrador.',
+  'access.team.label': 'Para qué equipo',
+  'access.team.days': 'Válido cuántos días',
+  'access.team.uses': 'Cuántas personas como máximo',
+  'access.team.create': 'Crear el enlace de equipo',
+  'access.team.link': 'Enlace de equipo, para compartir: sirve hasta su fecha o su última plaza. No se volverá a mostrar: cópialo ahora.',
+  'access.team.state': '{uses} / {max} personas · hasta el {date}',
+  'access.team.revoke': 'Revocar',
+  'access.team.via': 'llegó por «{label}»',
   'access.identities': 'Identidades',
   'access.admin': 'administrador',
   'access.admin.give': 'Nombrar administrador',
   'access.admin.take': 'Retirar el rol',
+  'access.relink': 'Nuevo enlace de conexión',
+  'access.relink.link': 'Enlace de conexión para {name}, de un solo uso, válido 14 días — para abrir su sesión en otro dispositivo. No se volverá a mostrar: cópialo ahora.',
   'access.kind.g1': 'Ğ1',
   'access.kind.invite': 'invitación',
   'access.kind.dev': 'dev',
@@ -314,6 +337,11 @@ export const es: Messages = {
   'error.hidden_characters': 'El texto contiene caracteres invisibles (inversión del sentido de escritura, espacios de ancho cero): quítalos.',
   'error.changed': 'El texto ha cambiado mientras tanto: vuelve a cargarlo y empieza de nuevo.',
   'error.wot_members_only': 'Aquí solo votan los miembros de la red de confianza Ğ1.',
+  'error.label': 'El nombre está vacío o es demasiado largo (60 caracteres como máximo).',
+  'error.name': 'Tu nombre tiene de 2 a 60 caracteres, sin caracteres invisibles.',
+  'error.name_taken': 'Este nombre ya está ocupado. Elige otro, añadiendo una inicial por ejemplo.',
+  'error.team_limits': 'Un enlace de equipo vale de 1 a 90 días, para 1 a 500 personas.',
+  'error.groups': 'Elige al menos un grupo.',
   'error.retry': 'Reintentar',
 
   'common.cancel': 'Cancelar',

web/src/lib/i18n/fr.ts

@@ -58,6 +58,17 @@ export const fr = {
   'invite.working': 'Connexion en cours…',
   'invite.invalid': "Ce lien d'invitation n'est plus valable : il a déjà servi ou il a expiré. Demande un nouveau lien à la personne qui te l'a envoyé.",
   'invite.missing': "Ce lien est incomplet. Ouvre le lien d'invitation entier, tel que tu l'as reçu.",
+  'team.title': 'Rejoindre une équipe',
+  'team.working': 'Lecture du lien…',
+  'team.invalid': "Ce lien d'équipe n'est plus valable : il a expiré, il a été révoqué ou toutes ses places sont prises. Demande un nouveau lien à la personne qui te l'a envoyé.",
+  'team.missing': "Ce lien est incomplet. Ouvre le lien d'équipe entier, tel que tu l'as reçu.",
+  'team.opens': '« {label} » t’ouvre : {groups}.',
+  'team.until': "Lien valable jusqu'au {date}.",
+  'team.name': 'Ton nom',
+  'team.name.hint': 'Le nom sous lequel le groupe te verra. Une personne, une identité : si tu as déjà rejoint, reviens dans le navigateur où ta session est ouverte.',
+  'team.join': 'Rejoindre',
+  'team.signed': 'Ta session est ouverte sous le nom {name} : ces groupes s’ajoutent à ton identité.',
+  'team.add': 'Ajouter ces groupes',
 
   'groups.title': 'Mes groupes',
   'groups.same.key': 'Groupes qui utilisent la même clé',
@@ -278,10 +289,22 @@ export const fr = {
   'access.invite.copied': 'Lien copié.',
   'access.invite.cancel': 'Annuler',
   'access.invite.pending': 'En attente',
+  'access.team': "Liens d'équipe",
+  'access.team.intro': "Un lien à partager avec une équipe, jusqu'à une date. Chaque personne qui l'ouvre donne son nom et reçoit sa propre identité, jamais le rôle d'administrateur.",
+  'access.team.label': 'Pour quelle équipe',
+  'access.team.days': 'Valable combien de jours',
+  'access.team.uses': 'Combien de personnes au plus',
+  'access.team.create': "Créer le lien d'équipe",
+  'access.team.link': "Lien d'équipe, à partager : il sert jusqu'à sa date ou à sa dernière place. Il ne s'affichera plus : copie-le maintenant.",
+  'access.team.state': '{uses} / {max} personnes · jusqu’au {date}',
+  'access.team.revoke': 'Révoquer',
+  'access.team.via': 'venue par « {label} »',
   'access.identities': 'Identités',
   'access.admin': 'administrateur',
   'access.admin.give': 'Rendre administrateur',
   'access.admin.take': 'Retirer le rôle',
+  'access.relink': 'Nouveau lien de connexion',
+  'access.relink.link': "Lien de connexion pour {name}, à usage unique, valable 14 jours — pour ouvrir sa session sur un autre appareil. Il ne s'affichera plus : copie-le maintenant.",
   'access.kind.g1': 'Ğ1',
   'access.kind.invite': 'invitation',
   'access.kind.dev': 'dev',
@@ -317,6 +340,11 @@ export const fr = {
   'error.hidden_characters': 'Le texte contient des caractères invisibles (inversion du sens d\'écriture, espaces de largeur nulle) : retire-les.',
   'error.changed': 'Le texte a changé entre-temps : recharge-le, puis recommence.',
   'error.wot_members_only': 'Ici, seuls les membres de la toile de confiance Ğ1 votent.',
+  'error.label': 'Le nom est vide ou trop long (60 signes au plus).',
+  'error.name': 'Ton nom fait de 2 à 60 signes, sans caractère invisible.',
+  'error.name_taken': 'Ce nom est déjà pris. Choisis-en un autre, en ajoutant une initiale par exemple.',
+  'error.team_limits': "Un lien d'équipe vaut de 1 à 90 jours, pour 1 à 500 personnes.",
+  'error.groups': 'Choisis au moins un groupe.',
   'error.retry': 'Réessayer',
 
   'common.cancel': 'Annuler',

web/src/routes/acces/+page.svelte

@@ -2,16 +2,18 @@
   import { onMount } from 'svelte';
   import { api, ApiError } from '$lib/api';
   import Guard from '$lib/components/Guard.svelte';
+  import LinkReveal from '$lib/components/LinkReveal.svelte';
+  import TeamLinks, { type TeamLink } from '$lib/components/TeamLinks.svelte';
   import { i18n, t, type Key } from '$lib/i18n/index.svelte';
   import { Remote } from '$lib/load.svelte';
   import { session } from '$lib/session.svelte';
-  import { toasts } from '$lib/toast.svelte';
 
   interface Overview {
     publication: { remote: string | null; publicKey: string | null };
     groups: { slug: string; name: string; policy: string; hidden: boolean; members: { identityId: string; grantedAt: string }[] }[];
-    identities: { id: string; kind: 'g1' | 'invite' | 'dev'; displayName: string; g1Member: boolean; admin: boolean; lastSeenAt: string | null }[];
+    identities: { id: string; kind: 'g1' | 'invite' | 'dev'; displayName: string; g1Member: boolean; admin: boolean; lastSeenAt: string | null; teamLink: string | null }[];
     invitations: { id: string; label: string; admin: boolean; groups: string[]; expiresAt: string }[];
+    teamLinks: TeamLink[];
   }
   interface Feedback {
     feedback: { id: number; author: string | null; route: string; body: string; createdAt: string; status: 'new' | 'seen' | 'done' }[];
@@ -29,6 +31,7 @@
   let groups = $state<string[]>([]);
   let admin = $state(false);
   let link = $state('');
+  let relinked = $state<{ id: string; name: string; link: string } | null>(null);
   let error = $state('');
 
   const nameOf = (id: string) => data.value?.identities.find((i) => i.id === id)?.displayName ?? id;
@@ -54,9 +57,12 @@
     });
   }
 
-  async function copy() {
-    await navigator.clipboard.writeText(link);
-    toasts.show(t('access.invite.copied'));
+  // A new sign-in link for an invited person (another device, a lost session).
+  async function relink(id: string, name: string) {
+    await act(async () => {
+      const r = await api.post<{ link: string }>('/access/invitations', { label: name, identityId: id });
+      relinked = { id, name, link: r.link };
+    });
   }
 
   async function status(id: number, s: 'seen' | 'done') {
@@ -118,13 +124,7 @@
           <label class="check"><input type="checkbox" bind:checked={admin} /> {t('access.invite.admin')}</label>
         </fieldset>
         <button class="btn primary small" type="submit">{t('access.invite.create')}</button>
-        {#if link}
-          <div class="link">
-            <p class="small">{t('access.invite.link')}</p>
-            <code>{link}</code>
-            <button class="btn small" type="button" onclick={copy}>{t('access.invite.copy')}</button>
-          </div>
-        {/if}
+        {#if link}<LinkReveal {link} note={t('access.invite.link')} />{/if}
       </form>
       {#if data.value.invitations.length}
         <ul class="list">
@@ -138,6 +138,8 @@
       {/if}
     </section>
 
+    <TeamLinks groups={data.value.groups} links={data.value.teamLinks} {act} />
+
     <section>
       <h2 class="eyebrow">{t('access.identities')}</h2>
       <ul class="list">
@@ -147,9 +149,14 @@
               <b>{i.displayName}</b> · {t(`access.kind.${i.kind}`)}
               {#if i.g1Member} · {t('access.member')}{/if}
               {#if i.admin} · <span class="tag water">{t('access.admin')}</span>{/if}
+              {#if i.teamLink} · <span class="faint small">{t('access.team.via', { label: i.teamLink })}</span>{/if}
+            </span>
+            <span class="row">
+              {#if i.kind === 'invite'}<button class="btn quiet small" type="button" onclick={() => relink(i.id, i.displayName)}>{t('access.relink')}</button>{/if}
+              <button class="btn quiet small" type="button" onclick={() => act(() => api.post(`/access/identities/${encodeURIComponent(i.id)}/admin`, { admin: !i.admin }))}>{i.admin ? t('access.admin.take') : t('access.admin.give')}</button>
             </span>
-            <button class="btn quiet small" type="button" onclick={() => act(() => api.post(`/access/identities/${encodeURIComponent(i.id)}/admin`, { admin: !i.admin }))}>{i.admin ? t('access.admin.take') : t('access.admin.give')}</button>
           </li>
+          {#if relinked?.id === i.id}<li class="reveal"><LinkReveal link={relinked.link} note={t('access.relink.link', { name: relinked.name })} /></li>{/if}
         {/each}
       </ul>
     </section>
@@ -253,19 +260,8 @@
   .block > .btn {
     justify-self: start;
   }
-  .link {
-    display: grid;
-    gap: 0.5rem;
-    padding: 0.8rem;
-    border-radius: var(--r-input);
-    background: var(--water-wash);
-  }
-  .link code {
-    word-break: break-all;
-    font-size: 0.85rem;
-  }
-  .link .btn {
-    justify-self: start;
+  .list li.reveal {
+    display: block;
   }
   .small {
     font-size: 0.84rem;

web/src/routes/equipe/+page.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { onMount } from 'svelte';
+  import { api, ApiError } from '$lib/api';
+  import { i18n, t, type Key } from '$lib/i18n/index.svelte';
+  import { session } from '$lib/session.svelte';
+  import type { Me } from '$lib/types';
+
+  interface Peek {
+    label: string;
+    groups: string[];
+    expiresAt: string;
+    signedInAs: string | null;
+  }
+
+  let phase = $state<'working' | 'invalid' | 'missing' | 'ready'>('working');
+  let link = $state<Peek | null>(null);
+  let token = '';
+  let name = $state('');
+  let error = $state('');
+  let busy = $state(false);
+
+  onMount(async () => {
+    // The token travels in the fragment: it never reaches a server log.
+    token = location.hash.slice(1).trim();
+    history.replaceState(null, '', '/equipe');
+    if (!/^[0-9a-f]{64}$/.test(token)) {
+      phase = 'missing';
+      return;
+    }
+    try {
+      link = await api.post<Peek>('/auth/team/peek', { token });
+      phase = 'ready';
+    } catch {
+      phase = 'invalid';
+    }
+  });
+
+  async function join(e: SubmitEvent) {
+    e.preventDefault();
+    error = '';
+    busy = true;
+    try {
+      const r = await api.post<{ me: Me }>('/auth/team', link?.signedInAs ? { token } : { token, name });
+      session.me = r.me;
+      await goto('/groupes', { replaceState: true });
+    } catch (err) {
+      const code = err instanceof ApiError ? err.code : 'internal';
+      if (code === 'invitation_invalid') phase = 'invalid';
+      else error = t(`error.${code}` as Key);
+    } finally {
+      busy = false;
+    }
+  }
+</script>
+
+<div class="page">
+  <h1>{t('team.title')}</h1>
+  {#if phase === 'ready' && link}
+    <p class="lead">{t('team.opens', { label: link.label, groups: link.groups.join(', ') })}</p>
+    <p class="faint small">{t('team.until', { date: i18n.date(link.expiresAt) })}</p>
+    <form class="card block" onsubmit={join}>
+      {#if link.signedInAs}
+        <p>{t('team.signed', { name: link.signedInAs })}</p>
+        <button class="btn primary" type="submit" disabled={busy}>{t('team.add')}</button>
+      {:else}
+        <label class="field">
+          <span>{t('team.name')}</span>
+          <input class="input" bind:value={name} minlength="2" maxlength="60" autocomplete="name" required />
+        </label>
+        <p class="faint small">{t('team.name.hint')}</p>
+        <button class="btn primary" type="submit" disabled={busy}>{t('team.join')}</button>
+      {/if}
+      {#if error}<p class="warn" role="alert">{error}</p>{/if}
+    </form>
+  {:else}
+    <p class="muted" role="status">{t(`team.${phase}` as Key)}</p>
+  {/if}
+</div>
+
+<style>
+  .page {
+    max-width: 34rem;
+    margin: 0 auto;
+    padding: clamp(2.5rem, 9vh, 6rem) 1.4rem;
+    display: grid;
+    gap: 1rem;
+  }
+  h1 {
+    font-family: var(--font-text);
+    font-weight: 500;
+    font-size: 2.2rem;
+  }
+  .lead {
+    font-size: 1.08rem;
+  }
+  .block {
+    padding: 1.1rem 1.2rem;
+    display: grid;
+    gap: 0.7rem;
+  }
+  .block > .btn {
+    justify-self: start;
+  }
+  .small {
+    font-size: 0.84rem;
+  }
+  .warn {
+    color: var(--ochre);
+    font-weight: 700;
+  }
+</style>