Settings › Security balanced: every box the page's width (closes #285) 8597fb5ca16c

- **Settings › Security is balanced (#285):** every box runs the page's width: two-factor shows whether it is on in its head, with its field and button on one row; connected accounts are rows with Connect or Disconnect; signed-in browsers are rows with Sign out, and Sign out everywhere else sits in that box's head with the session limits under it.

            && sec.contains("<strong>Google</strong> <span class=\"mute\">andy</span>")

            && sec.contains("<strong>GitHub</strong> <span class=\"small mute\">not connected</span>")

            && sec.contains("href=\"/settings/security/connect/github\">Connect</a>"),

    assert!(!get(app, "/settings/security", Some(&as_andy))

        .await

        .body

        .contains("<strong>Google</strong> <span class=\"mute\">andy</span>"));

    let entries: Vec<&str> = page.split("<div class=\"token-name\"><strong>").skip(1).filter(|e| e.contains("/end\"")).collect();

    let signed_in = |c: String| async move { get(app, "/settings/security", Some(&c)).await.body.contains("Sign out everywhere else") };

<section class="card-box" id="two-factor">

  <div class="card-head"><h2>Two-factor authentication</h2>{% if enrol.is_some() %}<span class="small mute more">setting up</span>{% else if me.totp_enabled() %}<span class="tag ok more"><span class="sig sig-valid">✔</span> on</span>{% else %}<span class="tag more"><span class="sig sig-unsigned">○</span> off</span>{% endif %}</div>

  {% if let Some((secret, uri, qr)) = enrol %}

  <form class="pad sec-form" method="post" action="/settings/security/totp/enable">

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

    <input type="hidden" name="secret" value="{{ secret }}">

    <p>Scan this with your authenticator app, then enter the code it shows.</p>

    <div class="qr">{{ qr|safe }}</div>

    <p class="small mute">Or enter the secret by hand: <code>{{ secret }}</code></p>

    <div class="sec-row"><label for="code">Code from the app</label><input type="text" id="code" name="code" inputmode="numeric" autocomplete="one-time-code" autofocus required><button type="submit">TURN ON</button></div>

  </form>

  {% else if me.totp_enabled() %}

  <form class="pad sec-form" method="post" action="/settings/security/totp/disable">

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

    <p class="small mute">A code from your authenticator app is asked for at every sign in.</p>

    <div class="sec-row"><label for="password">Your password, to turn it off</label><input type="password" id="password" name="password" autocomplete="current-password" required><button type="submit" class="danger">TURN OFF</button></div>

  <form class="pad sec-form sec-split" method="post" action="/settings/security/totp/begin">

    <p class="small mute">With it on, a time-based code from an authenticator app is asked for at every sign in.</p>

    <button type="submit">SET UP</button>

  </form>

  {% endif %}

</section>

{% if !connected.is_empty() %}<section class="card-box" id="connected">

  <div class="card-head"><h2>Connected accounts</h2><span class="small mute more">sign in with these instead of a password</span></div>

  <ul class="rows token-rows">{% for (id, name, login) in connected %}

    <li>

      <div class="token-main"><div class="token-name"><strong>{{ name }}</strong>{% if let Some(l) = login %} <span class="mute">{{ l }}</span>{% else %} <span class="small mute">not connected</span>{% endif %}</div></div>

      <div class="token-actions">{% if login.is_some() %}<form class="inline" method="post" action="/settings/security/disconnect/{{ id }}"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><button class="small">Disconnect</button></form>{% else %}<a class="go small" href="/settings/security/connect/{{ id }}">Connect</a>{% endif %}</div>

    </li>{% endfor %}

  </ul>

<section class="card-box" id="sessions">

  <div class="card-head"><h2>Signed in</h2><span class="count-chip">{{ sessions.len() }}</span>

    <form class="inline more" method="post" action="/settings/security/sessions"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><button class="small" title="Sign out every browser except this one">Sign out everywhere else</button></form></div>

  {% if sessions.is_empty() %}<p class="empty small">No sessions.</p>{% else %}

  <ul class="rows token-rows">{% for x in sessions %}

    <li>

      <div class="token-main">

        <div class="token-name"><strong>{{ x.browser }}</strong>{% if x.current %} <span class="tag">this browser</span>{% endif %}</div>

        <div class="small mute">{% if !x.address.is_empty() %}{{ x.address }} · {% endif %}used <time title="{{ x.seen_ms|when_i }}">{{ x.seen_ms|ago_i }}</time> · signed in <time title="{{ x.created_ms|when_i }}">{{ x.created_ms|ago_i }}</time></div>

      </div>

      <div class="token-actions"><form class="inline" method="post" action="/settings/security/sessions/{{ x.id }}/end"><input type="hidden" name="_csrf" value="{{ shell.csrf }}"><button class="small">Sign out</button></form></div>

    </li>{% endfor %}

  </ul>{% endif %}

  <p class="small mute pad sec-foot">A session ends by itself after 14 days unused, or 30 days after signing in.</p>

</section>

.tag.ok { color: var(--ok); }

/* Settings › Security (#285): every box the page's width, a form's

   field and button on one row. */

.sec-form p { margin: 0 0 10px; }

.sec-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.sec-row label { margin: 0; font-weight: 600; }

.sec-row input { flex: 0 1 320px; min-width: 0; }

.sec-split { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.sec-split p { margin: 0; }

.card-box > .card-head form.more { margin-left: auto; }

.card-box > .sec-foot { margin: 0; border-top: 1px solid var(--line); }