LLeMbas/src/lembas/web/templates/settings.html

{% extends "base.html" %}
{% from "_macros.html" import icon %}

{% block title %}Your settings - LLeMbas{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
<link rel="stylesheet" href="{{ url_for('static', path='css/admin.css') }}">
{% endblock %}

{% block body_attrs %} data-authenticated="true"{% endblock %}

{% block body %}
<div class="shell">
  {% include "partials/sidebar.html" %}

  <main class="main">
    <header class="topbar">
      <h1 class="topbar__title">Your settings</h1>
    </header>

    <div class="admin-scroll">
      <div class="admin-page">
        {% if error %}
        <div class="alert alert--error" role="alert">
          {{ icon("warning", "alert__icon") }} <span>{{ error }}</span>
        </div>
        {% endif %}
        {% if saved %}
        <div class="alert alert--success" role="status">
          {{ icon("check", "icon--sm") }} <span>{{ saved }}</span>
        </div>
        {% endif %}

        <section class="card">
          <h2 class="card__title">Account</h2>
          <div class="field">
            <span class="field__label">Name</span>
            <p>{{ user.name }}</p>
          </div>
          <div class="field">
            <span class="field__label">Email</span>
            <p class="mono text-sm">{{ user.email }}</p>
          </div>
          <div class="field">
            <span class="field__label">Role</span>
            <p>
              <span class="badge {{ 'badge--gold' if user.is_admin }}">{{ user.role }}</span>
            </p>
          </div>
        </section>

        <section class="card">
          <h2 class="card__title">Default model</h2>
          {% if models %}
          <form method="post" action="/api/preferences/default-model">
            <div class="field">
              <select class="select" name="model_id" aria-label="Default model">
                <option value="">Use the instance default</option>
                {% for model in models %}
                <option value="{{ model.model_id }}"
                        {{ 'selected' if model.model_id == user.settings_json.get('default_model') }}>
                  {{ model.label }}{% if model.pinned %} — pinned{% endif %}
                </option>
                {% endfor %}
              </select>
              <p class="field__hint">What a new chat starts with. Existing chats keep their model.</p>
            </div>
            <button class="btn btn--primary" type="submit">Save</button>
          </form>
          {% else %}
          <p class="muted text-sm">No models are available to you yet.</p>
          {% endif %}
        </section>

        <section class="card">
          <h2 class="card__title">Permissions</h2>
          <p class="text-sm muted" style="margin-bottom: var(--sp-3)">
            {% if user.is_admin %}
              You are an administrator, so every permission applies.
            {% else %}
              What this account may do, from the instance baseline plus your groups.
            {% endif %}
          </p>
          <div class="checkbox-row">
            {% for key, granted in can.items() %}
            <span class="badge {{ 'badge--success' if granted }}">
              {{ key }}{{ '' if granted else ' — no' }}
            </span>
            {% endfor %}
          </div>
          {% if user.groups %}
          <p class="field__hint" style="margin-top: var(--sp-3)">
            Groups: {% for group in user.groups %}{{ group.name }}{% if not loop.last %}, {% endif %}{% endfor %}
          </p>
          {% endif %}
        </section>

        <section class="card">
          <h2 class="card__title">Appearance</h2>
          <div class="row" style="gap: var(--sp-3)">
            <button class="btn" type="button" onclick="window.lembas.applyTheme('moria')">
              {{ icon("moon", "icon--sm") }} Moria
            </button>
            <button class="btn" type="button" onclick="window.lembas.applyTheme('shire')">
              {{ icon("sun", "icon--sm") }} Shire
            </button>
          </div>
          <p class="field__hint" style="margin-top: var(--sp-3)">
            Moria is the dark theme, Shire the light one. Your choice is saved
            to this browser and to your account.
          </p>
        </section>

        <section class="card">
          <h2 class="card__title">Change password</h2>
          <form method="post" action="/api/preferences/password">
            <div class="field">
              <label class="field__label" for="current-password">Current password</label>
              <input class="input" type="password" id="current-password"
                     name="current_password" required autocomplete="current-password">
            </div>
            <div class="field">
              <label class="field__label" for="new-password">New password</label>
              <input class="input" type="password" id="new-password" name="new_password"
                     required minlength="8" autocomplete="new-password">
              <p class="field__hint">At least 8 characters.</p>
            </div>
            <div class="field">
              <label class="field__label" for="confirm-password">Confirm new password</label>
              <input class="input" type="password" id="confirm-password"
                     name="confirm_password" required minlength="8"
                     autocomplete="new-password">
            </div>
            <button class="btn btn--primary" type="submit">Change password</button>
            <p class="field__hint" style="margin-top: var(--sp-3)">
              Every other session is signed out when the password changes. You
              stay signed in here.
            </p>
          </form>
        </section>

        <section class="card">
          <h2 class="card__title">Session</h2>
          <form method="post" action="/auth/logout">
            <button class="btn btn--danger" type="submit">
              {{ icon("logout", "icon--sm") }} Sign out
            </button>
          </form>
        </section>
      </div>
    </div>
  </main>
</div>
{% endblock %}