{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} SSH access. All three controls here can lock the operator out of the server,
   so each one sits behind a prominent warning and a typed confirmation phrase
   that the server checks -- see views.py. {% endcomment %}

{% block title %}SSH access{% endblock %}

{% block styles %}
<style>
  .cp-mono      { font-family:var(--cp-font-mono); font-size:.82rem; word-break:break-all; }
  .cp-danger-zone { border:1px solid var(--cp-danger); border-radius:var(--cp-radius-lg);
                    background:var(--cp-bg-subtle); padding:1.1rem 1.25rem; height:100%; }
  .cp-danger-zone h2 { color:var(--cp-danger); }
  .cp-fp        { font-family:var(--cp-font-mono); font-size:.74rem; color:var(--cp-neutral); }
</style>
{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">SSH access</h1>
      <p class="text-muted mb-0 small">
        sshd on port <strong ng-cloak ng-bind="sshPort"></strong> &middot;
        your address is <span class="cp-mono">{{ callerIP }}</span>
      </p>
    </div>
    <button type="button" class="btn btn-outline-secondary btn-sm"
            ng-click="load()" ng-disabled="busy">
      <i class="fas fa-rotate me-1"></i>Refresh
    </button>
  </div>

  <div class="alert alert-warning">
    <i class="fas fa-triangle-exclamation me-1"></i>
    <strong>Everything on this page can lock you out of the server.</strong>
    Keep this session open and test a second SSH connection after any change.
    A change that leaves you locked out can only be undone from the provider's
    console.
  </div>

  {% if socketActivated %}
    <div class="alert alert-info">
      <i class="fas fa-circle-info me-1"></i>
      This server uses socket activation (<span class="cp-mono">ssh.socket</span>).
      The listening port is set there as well as in <span class="cp-mono">sshd_config</span>,
      so a port change needs <span class="cp-mono">systemctl edit ssh.socket</span>
      at the console to take full effect.
    </div>
  {% endif %}

  <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="notices.length" ng-cloak>
    <div ng-repeat="note in notices" ng-bind="note"></div>
  </div>

  <!-- raised when the server reports that a delete would strip the last way in -->
  <div class="cp-danger-zone mb-3" ng-show="pending" ng-cloak>
    <h2 class="h6 mb-2">
      <i class="fas fa-triangle-exclamation me-1"></i>This removes the last way in
    </h2>
    <p class="small mb-2" ng-bind="pending.reason"></p>
    <div class="row g-2 align-items-end">
      <div class="col-12 col-md-6">
        <label class="form-label small mb-1" for="cpKeyOverride">
          Type <strong ng-bind="pending.phrase"></strong> to confirm
        </label>
        <input type="text" class="form-control cp-mono" id="cpKeyOverride"
               ng-model="pending.typed" autocomplete="off" spellcheck="false">
      </div>
      <div class="col-12 col-md-6 d-flex gap-2">
        <button type="button" class="btn btn-danger"
                ng-disabled="busy || pending.typed !== pending.phrase"
                ng-click="confirmRemoveKey()">
          <i class="fas fa-trash-can me-1"></i>Remove it anyway
        </button>
        <button type="button" class="btn btn-outline-secondary" ng-click="pending = null">
          Cancel
        </button>
      </div>
    </div>
  </div>

  <!-- keys -->
  <div class="card mb-3">
    <div class="card-header fw-semibold">Authorised keys</div>
    <div class="card-body">
      <form class="row g-2 align-items-end mb-3" ng-submit="addKey()" novalidate>
        <div class="col-12 col-lg-3">
          <label class="form-label small mb-1" for="cpKeyName">Label</label>
          <input type="text" class="form-control" id="cpKeyName" ng-model="draft.name"
                 placeholder="Alice — work laptop" maxlength="64">
        </div>
        <div class="col-6 col-lg-2">
          <label class="form-label small mb-1" for="cpKeyUser">Account</label>
          <select class="form-select" id="cpKeyUser" ng-model="draft.systemUser">
            {% for account in accounts %}
              <option value="{{ account }}">{{ account }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-12 col-lg-5">
          <label class="form-label small mb-1" for="cpKeyBody">Public key</label>
          <textarea class="form-control cp-mono" id="cpKeyBody" rows="2"
                    ng-model="draft.publicKey"
                    placeholder="ssh-ed25519 AAAAC3Nz… alice@laptop"></textarea>
        </div>
        <div class="col-12 col-lg-2 d-grid">
          <button type="submit" class="btn btn-primary"
                  ng-disabled="busy || !draft.name || !draft.publicKey">
            <i class="fas fa-key me-1"></i>Install key
          </button>
        </div>
        <div class="col-12">
          <div class="form-text">
            Paste the contents of a <span class="cp-mono">.pub</span> file. Never paste a
            private key — the panel refuses it, and a private key that has been pasted
            anywhere should be treated as compromised.
          </div>
          <div class="form-text">
            Only accounts with UID {{ minKeyManagedUID }} or higher are listed. CloudPanel
            never manages a key for <span class="cp-mono">root</span> — add one at the
            server console if that is truly needed.
          </div>
        </div>
      </form>

      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead>
            <tr>
              <th scope="col">Label</th><th scope="col">Account</th><th scope="col">Type</th>
              <th scope="col">Fingerprint</th><th scope="col">Added</th><th scope="col"></th>
            </tr>
          </thead>
          <tbody ng-cloak>
            <tr ng-repeat="key in keys">
              <td>
                <div ng-bind="key.name"></div>
                <div class="small text-muted" ng-show="key.comment" ng-bind="key.comment"></div>
              </td>
              <td class="cp-mono" ng-bind="key.systemUser"></td>
              <td class="cp-mono" ng-bind="key.type"></td>
              <td class="cp-fp" ng-bind="key.fingerprint"></td>
              <td class="small text-muted">
                <div ng-bind="key.dateAdded"></div>
                <div ng-show="key.addedBy">by <span ng-bind="key.addedBy"></span></div>
              </td>
              <td class="text-end">
                <button type="button" class="btn btn-sm btn-outline-danger"
                        ng-click="removeKey(key)" ng-disabled="busy"
                        ng-attr-aria-label="Remove the SSH key {$ key.comment || key.fingerprint $}">
                  <i class="fas fa-trash-can" aria-hidden="true"></i>
                </button>
              </td>
            </tr>
            <tr ng-show="!keys.length">
              <td colspan="6" class="text-center text-muted py-4">
                No keys are installed through the panel.
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="row g-3">
    <!-- root login -->
    <div class="col-12 col-xl-6">
      <div class="cp-danger-zone">
        <h2 class="h6 mb-2"><i class="fas fa-user-shield me-1"></i>Root login</h2>
        <p class="small mb-2">
          <span ng-cloak ng-show="permitRootLogin">
            Root may sign in over SSH with a key. Passwords are refused either way.
          </span>
          <span ng-cloak ng-hide="permitRootLogin">
            Root cannot sign in over SSH. Administrators log in as themselves and
            escalate with sudo, which is what you want on a production host.
          </span>
        </p>
        <p class="small text-muted mb-3">
          Turning this off while no other account has a key, and with password
          authentication disabled, would leave nobody able to log in — the panel
          refuses that combination outright.
          Password authentication is currently
          <strong ng-cloak ng-bind="passwordAuthentication ? 'enabled' : 'disabled'"></strong>.
        </p>

        <label class="form-label small mb-1" for="cpRootPhrase">
          Type <strong ng-bind="rootPhrase()"></strong> to confirm
        </label>
        <div class="input-group">
          <input type="text" class="form-control cp-mono" id="cpRootPhrase"
                 ng-model="rootTyped" autocomplete="off" spellcheck="false">
          <button type="button" class="btn btn-danger"
                  ng-disabled="busy || rootTyped !== rootPhrase()"
                  ng-click="toggleRoot()">
            <span ng-bind="permitRootLogin ? 'Disable root login' : 'Enable root login'"></span>
          </button>
        </div>
      </div>
    </div>

    <!-- password authentication -->
    <div class="col-12 col-xl-6">
      <div class="cp-danger-zone">
        <h2 class="h6 mb-2"><i class="fas fa-key me-1"></i>Password authentication</h2>
        <p class="small mb-2">
          <span ng-cloak ng-show="passwordAuthentication">
            Passwords are accepted for SSH login, alongside keys.
          </span>
          <span ng-cloak ng-hide="passwordAuthentication">
            Passwords are refused for SSH login — keys only.
          </span>
        </p>
        <p class="small text-muted mb-3">
          Turning this off with no key installed for any account would leave nobody
          able to log in — the panel refuses that combination outright.
        </p>

        <div ng-show="passwordAuthentication">
          <label class="form-label small mb-1" for="cpPwAuthPhrase">
            Type <strong ng-bind="passwordAuthOffPhrase"></strong> to confirm
          </label>
          <div class="input-group">
            <input type="text" class="form-control cp-mono" id="cpPwAuthPhrase"
                   ng-model="pwAuthTyped" autocomplete="off" spellcheck="false">
            <button type="button" class="btn btn-danger"
                    ng-disabled="busy || pwAuthTyped !== passwordAuthOffPhrase"
                    ng-click="togglePasswordAuth()">
              Disable password login
            </button>
          </div>
        </div>
        <div ng-hide="passwordAuthentication" class="d-grid">
          <button type="button" class="btn btn-outline-primary"
                  ng-disabled="busy" ng-click="togglePasswordAuth()">
            Enable password login
          </button>
        </div>
      </div>
    </div>

    <!-- port -->
    <div class="col-12 col-xl-6">
      <div class="cp-danger-zone">
        <h2 class="h6 mb-2"><i class="fas fa-plug me-1"></i>Listening port</h2>
        <p class="small mb-2">
          Moving sshd off port 22 cuts most automated password guessing. It does not
          replace keys, and it will lock you out if the new port is unreachable.
        </p>
        <p class="small text-muted mb-3">
          The panel opens the new port in the firewall first, validates the new
          configuration with <span class="cp-mono">sshd -t</span>, and puts the old
          configuration back if sshd refuses it or will not restart. The old port
          stays open until you remove that rule yourself.
        </p>

        <div class="row g-2 align-items-end">
          <div class="col-5">
            <label class="form-label small mb-1" for="cpSSHPort">New port</label>
            <input type="number" min="1" max="65535" class="form-control cp-mono"
                   id="cpSSHPort" ng-model="newPort">
          </div>
          <div class="col-7">
            <label class="form-label small mb-1" for="cpPortPhrase">
              Type <strong>{{ portPhrase }}</strong>
            </label>
            <input type="text" class="form-control cp-mono" id="cpPortPhrase"
                   ng-model="portTyped" autocomplete="off" spellcheck="false">
          </div>
          <div class="col-12 d-grid">
            <button type="button" class="btn btn-danger"
                    ng-disabled="busy || !newPort || portTyped !== '{{ portPhrase }}'"
                    ng-click="changePort()">
              <i class="fas fa-arrow-right-arrow-left me-1"></i>Move sshd to this port
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'firewallManager/firewallManager.js' %}"></script>
{% endblock %}