{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
  ADMIN web terminal: a shell as an ARBITRARY local account (root included, if
  allowed), never a website's own system user -- see webTerminal/views.py's
  own section comment for how this differs from webTerminal/terminal.html.
  Three regions, all server-rendered from context so a client cannot skip a
  check by editing the DOM:
    1. the settings panel (always shown to an administrator);
    2. a 2FA-freshness prompt (only when the caller has 2FA and it has gone stale);
    3. the account picker + terminal itself (only once the feature is enabled).
{% endcomment %}

{% block title %}Admin Terminal{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{% static 'webTerminal/webTerminal.css' %}">
{% endblock %}

{% block content %}
<div ng-controller="webTerminalAdminController">

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1"><i class="fa-solid fa-user-shield me-2 text-muted"></i>Admin Terminal</h1>
      <p class="text-muted mb-0 small">
        A shell as any local account with a real login shell &mdash; never stored, never a
        website's own system user. sshd's own policy has the final say.
      </p>
    </div>
  </div>

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="errorMessage"></span>
  </div>
  <div class="alert alert-success py-2 px-3" ng-show="successMessage" ng-cloak role="alert">
    <i class="fas fa-check me-1"></i><span ng-bind="successMessage"></span>
  </div>

  {# -------------------------------------------------- (1) settings panel #}
  <div class="card mb-4">
    <div class="card-header">Settings</div>
    <div class="card-body">
      <div class="form-check form-switch mb-2">
        <input class="form-check-input" type="checkbox" id="cpAdminTermEnabled" ng-model="settingsForm.enabled">
        <label class="form-check-label" for="cpAdminTermEnabled">
          Admin terminal enabled
          <span class="text-muted small d-block">Off by default. Turning this on lets administrators open a shell as any local account below.</span>
        </label>
      </div>
      <div class="form-check form-switch mb-3">
        <input class="form-check-input" type="checkbox" id="cpAdminTermAllowRoot" ng-model="settingsForm.allowRoot">
        <label class="form-check-label" for="cpAdminTermAllowRoot">
          Allow logging in as root
          <span class="text-muted small d-block">Off by default. Only matters while the toggle above is also on.</span>
        </label>
      </div>

      <button type="button" class="btn btn-sm btn-outline-primary" ng-click="openSettingsReauth()"
              ng-disabled="!settingsChanged()">
        <i class="fa-solid fa-floppy-disk me-1"></i>Save settings
      </button>

      <div class="border rounded p-3 mt-3" ng-if="settingsReauthOpen" ng-cloak style="max-width: 420px">
        <p class="small text-muted mb-2">Re-enter your panel password to confirm this change.</p>
        <form novalidate ng-submit="saveSettings()">
          <div class="mb-2">
            <input type="password" class="form-control form-control-sm" placeholder="Panel password"
                   ng-model="settingsForm.password" autocomplete="current-password" required>
          </div>
          <div class="mb-2" ng-if="otpEnabled">
            <input type="text" class="form-control form-control-sm" placeholder="2FA code" inputmode="numeric"
                   ng-model="settingsForm.code" autocomplete="one-time-code">
          </div>
          <button type="submit" class="btn btn-sm btn-primary" ng-disabled="savingSettings">
            <i class="fa-solid fa-check me-1"></i>Confirm
          </button>
          <button type="button" class="btn btn-sm btn-outline-secondary" ng-click="closeSettingsReauth()">Cancel</button>
        </form>
      </div>
    </div>
  </div>

  {% if not enabled %}
  <div class="alert alert-warning">
    <i class="fa-solid fa-lock me-1"></i>
    The admin terminal is turned off. Turn it on above to open a session.
  </div>
  {% else %}

  {# -------------------------------------------------- (2) 2FA freshness #}
  <div class="card mb-4" ng-if="needs2FA" ng-cloak>
    <div class="card-header">Verify it's you</div>
    <div class="card-body">
      <p class="small text-muted">
        Your two-factor proof for the admin terminal has expired (or was never given this session).
        Enter a fresh code to continue.
      </p>
      <form novalidate ng-submit="verify2FA()" autocomplete="off" style="max-width: 320px">
        <div class="input-group input-group-sm">
          <input type="text" class="form-control" ng-model="reauth.code" inputmode="numeric"
                 placeholder="6-digit code" autocomplete="one-time-code" required>
          <button type="submit" class="btn btn-primary" ng-disabled="!reauth.code">Verify</button>
        </div>
      </form>
    </div>
  </div>

  {# -------------------------------------------------- (3) terminal #}
  <div class="card" ng-if="!needs2FA" ng-cloak>
    <div class="card-header d-flex align-items-center justify-content-between">
      <span>
        <i class="fa-solid fa-circle me-1" ng-class="connected ? 'text-success' : (connecting ? 'text-warning' : 'text-muted')"></i>
        <span class="small text-muted" ng-bind="statusText"></span>
      </span>
      <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-outline-secondary" ng-click="disconnect()" ng-if="connected">
          <i class="fa-solid fa-plug-circle-xmark me-1"></i>Disconnect
        </button>
      </div>
    </div>

    <div class="card-body" ng-show="!connected && !connecting">
      <form novalidate ng-submit="connect()" autocomplete="off">
        <div class="row gy-2 align-items-end" style="max-width: 640px">
          <div class="col-12 col-md-4">
            <label class="form-label small">Account</label>
            <select class="form-select form-select-sm" ng-model="form.account">
              <option value="">Select an account&hellip;</option>
              <option ng-repeat="a in accounts" ng-value="a.username"
                      ng-bind="a.username + (a.isRoot ? ' (root)' : '')"></option>
            </select>
          </div>
          <div class="col-12 col-md-4">
            <label class="form-label small">Credential</label>
            <select class="form-select form-select-sm" ng-model="form.credentialKind">
              <option value="password">Password</option>
              <option value="key">Private key</option>
            </select>
          </div>
        </div>

        <div class="mt-2" style="max-width: 420px" ng-if="form.credentialKind === 'password'">
          <input type="password" class="form-control form-control-sm" ng-model="form.password"
                 autocomplete="new-password" placeholder="SSH password &mdash; sent once, never stored">
        </div>
        <div class="mt-2" style="max-width: 420px" ng-if="form.credentialKind === 'key'">
          <textarea class="form-control form-control-sm" rows="4" ng-model="form.privateKey"
                    autocomplete="off" spellcheck="false"
                    placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"></textarea>
          <input type="password" class="form-control form-control-sm mt-1" ng-model="form.passphrase"
                 autocomplete="new-password" placeholder="Passphrase (only if the key is encrypted)">
        </div>

        <button type="submit" class="btn btn-primary btn-sm mt-2" ng-disabled="!canConnect()">
          <i class="fa-solid fa-plug me-1"></i>Connect
        </button>
        <p class="form-text small text-muted mb-0">
          Credentials are sent once, over this encrypted connection, straight to sshd on this
          server, and are never written to disk or to a log.
        </p>
      </form>
    </div>

    <div class="card-body" ng-show="connecting && !connected">
      <p class="text-muted mb-0"><i class="fa-solid fa-spinner fa-spin me-1"></i>Connecting&hellip;</p>
    </div>

    <div class="cp-terminal-wrap" ng-show="connected">
      <pre id="cpAdminTerminalGrid" class="cp-terminal-grid" tabindex="0" aria-label="Terminal"></pre>
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}

{% block scripts %}
<script>
  window.CP_ADMIN_TERMINAL_CONFIG = {
    enabled: {{ enabled|yesno:"true,false" }},
    allowRoot: {{ allowRoot|yesno:"true,false" }},
    otpEnabled: {{ otpEnabled|yesno:"true,false" }},
    needs2FA: {{ needs2FA|yesno:"true,false" }},
    accounts: [
      {% for a in accounts %}
      {username: "{{ a.username|escapejs }}", uid: {{ a.uid }}, isRoot: {{ a.isRoot|yesno:"true,false" }}}{% if not forloop.last %},{% endif %}
      {% endfor %}
    ],
    wsPath: "/ws/terminal/"
  };
</script>
<script src="{% static 'webTerminal/adminTerminal.js' %}"></script>
{% endblock %}