{% extends "baseTemplate/index.html" %}
{% load static %}

{% comment %}
  CloudPanel does not ship phpMyAdmin.

  Bundling it would make the panel's security posture depend on a large PHP
  application with a long CVE history, updated on someone else's schedule. The
  operator opts in; this page either hands off to the instance the installer
  provisioned, or explains exactly how to provision it. What it never does is
  render a button that goes nowhere.
{% endcomment %}

{% block title %}phpMyAdmin{% endblock %}

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title">phpMyAdmin</h1>
      <p class="cp-page-head__sub">
        {% if pma.installed %}
        Signed hand-off to the instance installed on this server.
        {% else %}
        Not installed on this server.
        {% endif %}
      </p>
    </div>
    <div class="cp-page-head__actions">
      <a class="cp-btn cp-btn--ghost" href="/databases/listDBs">
        <i class="fa-solid fa-list" aria-hidden="true"></i> All databases
      </a>
    </div>
  </div>

{% if pma.installed %}

  <div class="cp-card">
    <div class="cp-card__head">
      <div>
        <h2 class="cp-card__title">Open a database</h2>
        <p class="cp-card__sub">
          CloudPanel signs a one-time hand-off token that phpMyAdmin verifies.
          The token is valid for {{ tokenTTL }} seconds.
        </p>
      </div>
    </div>
    <div class="cp-card__body">

      <div class="cp-form-grid">
        <div class="cp-field">
          <label class="cp-label" for="pmaSite">Website</label>
          <select class="cp-select" id="pmaSite" ng-model="selectedSite" ng-change="fetch()">
            {% for site in websites %}
            <option value="{{ site }}">{{ site }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="cp-field">
          <label class="cp-label" for="pmaDatabase">Database</label>
          <select class="cp-select" id="pmaDatabase" ng-model="selectedDb"
                  ng-options="db.dbName as db.dbName + ' (' + db.dbUser + ')' for db in databases">
          </select>
        </div>

        <div class="cp-field">
          <label class="cp-label" for="pmaPassword">Database password</label>
          <input class="cp-input" id="pmaPassword" type="password"
                 ng-model="password" autocomplete="off">
          <p class="cp-help">
            CloudPanel stores no plaintext database passwords, so it cannot fill
            this in for you. The password goes straight from your browser to
            phpMyAdmin; the panel only signs who you are and which database you
            asked for.
          </p>
        </div>
      </div>

      <div class="cp-alert cp-alert--danger" ng-if="error">
        <i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i>
        <p ng-bind="error"></p>
      </div>

      <div class="cp-card__foot">
        <button type="button" class="cp-btn cp-btn--primary"
                ng-click="handOff()" ng-disabled="busy || !selectedDb || !password">
          <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
          <span ng-bind="busy ? 'Signing…' : 'Open in phpMyAdmin'"></span>
        </button>
      </div>

      {# Submitted programmatically to the provisioned signon endpoint. #}
      <form id="pmaSignOnForm" method="post" target="_blank"
            rel="noopener" action="{{ pma.signonUrl }}" class="cp-hidden">
        <input type="hidden" name="token" value="">
        <input type="hidden" name="server" value="1">
        <input type="hidden" name="db" value="">
        <input type="hidden" name="username" value="">
        <input type="hidden" name="password" value="">
      </form>
    </div>
  </div>

{% else %}

  <div class="cp-card">
    <div class="cp-card__head">
      <div>
        <h2 class="cp-card__title">phpMyAdmin is not installed</h2>
        <p class="cp-card__sub">
          CloudPanel does not bundle it, and it will not pretend otherwise.
        </p>
      </div>
    </div>
    <div class="cp-card__body">

      <p>
        phpMyAdmin is a large PHP application with a long history of security
        advisories. Shipping it inside the panel would mean every CloudPanel
        install carries that exposure whether the operator wants it or not, so
        it is an explicit opt-in instead.
      </p>

      <p class="cp-muted">
        Everything the panel itself needs — create, list, resize, delete, change
        a password, open remote access — is already on the
        <a href="/databases/listDBs">database pages</a>. phpMyAdmin is for
        browsing table data.
      </p>

      <h3 class="cp-card__title">Install it</h3>
      <p>Run this as root on the server, then reload this page:</p>
      <pre class="cp-standalone__code"><code>cloudpanel install phpmyadmin</code></pre>

      <p>The installer:</p>
      <ul>
        <li>downloads the current phpMyAdmin release and verifies its signature;</li>
        <li>unpacks it into <span class="cp-mono">{{ pma.defaultPath }}</span>;</li>
        <li>configures <span class="cp-mono">signon</span> authentication so this
            page can hand off a signed token instead of a shared password;</li>
        <li>writes the location and the shared secret into
            <span class="cp-mono">/etc/cloudpanel/cloudpanel.conf</span>.</li>
      </ul>

      <p>If you installed it by hand, point the panel at it:</p>
      <pre class="cp-standalone__code"><code>[phpmyadmin]
url = https://{{ CLOUDPANEL.PANEL_HOSTNAME|default:"cp.a1hosting.net" }}:{{ CLOUDPANEL.PANEL_PORT|default:"8090" }}/phpmyadmin/
signon_url = https://{{ CLOUDPANEL.PANEL_HOSTNAME|default:"cp.a1hosting.net" }}:{{ CLOUDPANEL.PANEL_PORT|default:"8090" }}/phpmyadmin/signon.php
path = {{ pma.defaultPath }}
signon_secret = &lt;a long random string, also set in signon.php&gt;</code></pre>

      <p class="cp-muted">
        Restart the panel after editing the config so the new section is read:
        <span class="cp-mono">systemctl restart cloudpanel</span>.
      </p>
    </div>
  </div>

{% endif %}
</div>
{% endblock %}

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