The account page: who you are, what you hold, and the two things only you can change (your secrets, your password), and the icon you go by.

72 lines of HTML Raw file Open on GitHub

{% extends "base.html" %}
{% block title %}euler — account{% endblock %}
{% block content %}
{# The account page: who you are, what you hold, and the two things only you can
   change (your secrets, your password), and the icon you go by. Five panels, in the order the questions
   get asked. #}
<section class="panel">
  <div class="acct-head">
    <span class="acct-glyph" id="acct-glyph">{% include "_icon.html" %}</span>
    <div class="acct-id">
      <h1>{{ subject.user or 'anon' }}</h1>
      {# The slug is not trivia: it names the system user, home and clone that are
         yours alone — the thing that makes your keys yours. #}
      <p class="acct-sub muted">
        <code>{{ subject.slug }}</code>
        <span>— your system user, home, and clone</span>
      </p>
    </div>
  </div>
  {# The ladder as a ladder: it is ordered, cumulative, and you are at a point on
     it — none of which a lone pill says. Rungs at or below yours are lit because
     you hold them all; the rungs above are what you do not. LADDER is the kernel's
     own tuple (packages/solver/solver/auth/subject.py), so this cannot drift from the real model. #}
  <div class="ladder" role="img"
       aria-label="profile: {{ subject.profile }} — rung {{ ladder.index(subject.profile) + 1 }} of {{ ladder | length }}">
    {% for rung in ladder %}
    {% if rung == subject.profile %}
    <span class="rung here">{{ rung }}</span>
    {% elif loop.index0 < ladder.index(subject.profile) %}
    <span class="rung below">{{ rung }}</span>
    {% else %}
    <span class="rung">{{ rung }}</span>
    {% endif %}
    {% endfor %}
  </div>
  <p class="ladder-note">Commands and pages are gated by this rung. Sweet-talking the
     shell has been tried; the shell remains unmoved.</p>
</section>

<section class="panel" id="icon-panel">{% include "_icon_panel.html" %}</section>

{# The per-user credential panel: filled by the per-user service's /account/vault
   fragment. On a service without that route the placeholder simply stays.
   Refreshed on load, and again whenever a terminal command reports it changed
   account state (`user`, `git-identity` → account-changed; `git-sync`, `git-filter`
   → git-changed, which also moves decrypt access here). This element exists only
   while /account is the visible pane, so the events reach it only then — the refresh
   costs nothing when the page is not shown (web-server-guide § The site). #}
<section class="panel" id="vault-panel" hx-get="/account/vault"
         hx-trigger="load, euler:account-changed from:body, euler:git-changed from:body">
  <h2>Credentials</h2>
  <p class="muted">Loading your vault…</p>
</section>

<section class="panel">
  {# Folded here, and only here: /password's own page and the shell fragment want the
     form open, but on the account page a password change is a rare, deliberate act, so
     it sits closed behind a summary and expands in place. The shared partial's own
     <h2> is suppressed (password_heading=false) so the summary is the one heading. #}
  {% set password_heading = false %}
  <details class="fold" id="password-fold">
    <summary class="fold-summary">
      <span class="fold-title">Password</span>
      <span class="muted">change your password</span>
    </summary>
    {# The same form as /password and its fragment — one partial, three renderings. #}
    {% include "_password_form.html" %}
  </details>
</section>
<script src="{{ asset('/assets/srp.js') }}" defer></script>
<script src="{{ asset('/assets/password.js') }}" defer></script>
{% endblock %}