From c8ef7409f1ebe3c1d5a518b27f92c4bb8be36102 Mon Sep 17 00:00:00 2001 From: Miraty Date: Mon, 6 Jun 2022 23:14:50 +0200 Subject: [PATCH] New interface --- common/html.php | 55 ++++++++------------------------ public/auth/index.php | 8 ++--- public/auth/login.php | 4 +-- public/auth/register.php | 4 +-- public/css/buttons.css | 62 ------------------------------------ public/css/form.css | 20 +++++------- public/css/main.css | 68 +++++++++++++++++++++++++++------------- public/ht/index.php | 6 ++-- public/index.php | 14 ++++----- public/ns/index.php | 26 +++++++-------- public/reg/index.php | 8 ++--- 11 files changed, 102 insertions(+), 173 deletions(-) delete mode 100644 public/css/buttons.css diff --git a/common/html.php b/common/html.php index e64f570..a53f6a5 100644 --- a/common/html.php +++ b/common/html.php @@ -26,29 +26,9 @@ if ( ]); } -// Less > CSS compilation - -// Color scheme -define("THEME", array( - // Displayed on light theme - 'darkRegColor' => "#D100D1", - 'darkNsColor' => "#006DFF", - 'darkHtColor' => "#008768", - 'darkAuthColor' => "#EE0000", - - // Displayed on dark theme - 'lightRegColor' => "#FF50FF", - 'lightNsColor' => "#00FFFF", - 'lightHtColor' => "#FFFF00", - 'lightAuthColor' => "#00FF00", - - 'lightColor' => '#FFFFFF', - 'darkColor' => '#000000', -)); - ?> - +> <?php @@ -65,23 +45,25 @@ foreach (array_diff(scandir(CONF['common']['root_path'] . "/public/css"), array( </head> <body> <header> + <p> +<?php if (isset($_SESSION['username'])) { ?> + 🆔 <strong><?= $_SESSION['username'] ?></strong> <a class='auth' href='<?= CONF['common']['prefix'] ?>/auth/logout'>Se déconnecter</a> +<?php } else { ?> + 👻 <em>Anonyme</em> <a class="auth" href="<?= CONF['common']['prefix'] ?>/auth/login?redir=<?php if (SERVICE !== "") echo SERVICE . "/"; ?><?= PAGE ?>">Se connecter</a> +<?php } ?> + </p> <nav> - <a href="..">Niver</a><?php -if (isset($page['service'])) - echo ' > <a href=".">' . $page['service'] . '</a>'; -if (PAGE != "index") - echo ' > <a href="' . PAGE . '">' . $page['title'] . "</a>"; -?> + <ul><li><?php +echo (!isset($page['service'])) ? '<h1><a class="niver" href="..">Niver</a></h1>' : ""; +echo (isset($page['service']) AND PAGE == "index") ? '<a class="niver" href="..">Niver</a><ul><li> <a href="."><h1>' . $page['service'] . '</h1></a></li></ul>' : ""; +echo (PAGE != "index") ? '<a class="niver" href="..">Niver</a><ul><li> <a href=".">' . $page['service'] . '</a><ul><li> <a href="' . PAGE . '"><h1>' . $page['title'] . "</h1></a></li></ul></li></ul>" : ""; +?></li></ul> </nav> </header> <main> - <?php -if (isset($page['title'])) - echo "<h1>" . $page['title'] . "</h1>"; - // Protect against cross-site request forgery if a POST request is received if (empty($_POST) === false AND (isset($_SERVER['HTTP_SEC_FETCH_SITE']) !== true OR $_SERVER['HTTP_SEC_FETCH_SITE'] !== "same-origin")) userError("Anti-<abbr title='Cross-Site Request Forgery'>CSRF</abbr> verification failed ! (Wrong or unset <code>Sec-Fetch-Site</code> HTTP header)"); @@ -89,20 +71,9 @@ if (empty($_POST) === false AND (isset($_SERVER['HTTP_SEC_FETCH_SITE']) !== true function closeHTML() { ?> </main> - <footer> - <small> - <?php if (isset($_SESSION['username'])) { - echo "Connecté·e en tant que " . $_SESSION['username'] . ". <a class='auth' href='" . CONF['common']['prefix'] . "/auth/logout'>Se déconnecter</a>"; - } else { ?> - Vous n'êtes pas connecté·e à un compte Niver. <a class="auth" href="<?= CONF['common']['prefix'] ?>/auth/login?redir=<?php if (SERVICE !== "") echo SERVICE . "/"; ?><?= PAGE ?>">Se connecter</a> - <?php } ?> - </small> - </footer> </body> </html> <?php exit(); } - -?> diff --git a/public/auth/index.php b/public/auth/index.php index 5a10f28..8802532 100644 --- a/public/auth/index.php +++ b/public/auth/index.php @@ -2,16 +2,16 @@ <?php if (isset($_SESSION['username'])) { ?> -<a class="auth button" href="logout">Se déconnecter</a> +<a class="auth" href="logout">Se déconnecter</a> <br> -<a class="auth button" href="password">Changer la clé de passe</a> +<a class="auth" href="password">Changer la clé de passe</a> <?php } else { ?> Vous devez être authentifié·e pour utiliser Niver <br> - <a class="auth button" href="register">Créer un compte</a> + <a class="auth" href="register">Créer un compte</a> <br> - <a class="auth button" href="login">Se connecter</a> + <a class="auth" href="login">Se connecter</a> <?php } ?> <?php closeHTML(); ?> diff --git a/public/auth/login.php b/public/auth/login.php index dcdb7af..67bb24c 100644 --- a/public/auth/login.php +++ b/public/auth/login.php @@ -1,5 +1,7 @@ <?php require "../../common/html.php"; ?> +<p>Pas de compte ? <a class="auth" href="register">En créer un</a></p> + <form method="post"> <label for="username">Identifiant</label><br> <input required="" minlength="4" maxlength="32" pattern="<?= USERNAME_REGEX ?>" id="username" name="username" type="text" placeholder="lain"> @@ -12,8 +14,6 @@ <input type="submit"> </form> -Pas de compte ? <a class="auth button" href="register">En créer un</a> - <?php if (isset($_POST['username']) AND isset($_POST['password'])) { diff --git a/public/auth/register.php b/public/auth/register.php index 0089f25..a538590 100644 --- a/public/auth/register.php +++ b/public/auth/register.php @@ -1,5 +1,7 @@ <?php require "../../common/html.php"; ?> +<p>Déjà un compte ? <a class="auth" href="login">Se connecter</a></p> + <?php if (isset($_POST['username']) AND isset($_POST['password'])) { @@ -69,6 +71,4 @@ if (isset($userExist) AND $userExist === true) { <input type="submit"> </form> -Déjà un compte ? <a class="auth button" href="login">Se connecter</a> - <?php closeHTML(); ?> diff --git a/public/css/buttons.css b/public/css/buttons.css deleted file mode 100644 index 95bc492..0000000 --- a/public/css/buttons.css +++ /dev/null @@ -1,62 +0,0 @@ -@media (prefers-color-scheme: dark) { - .auth { - --svc-color: #00FF00; - } - .reg { - --svc-color: #FF50FF; - } - .ns { - --svc-color: #00FFFF; - } - .ht { - --svc-color: #FFFF00; - } -} - -@media (prefers-color-scheme: light) { - .auth { - --svc-color: #EE0000; - } - .reg { - --svc-color: #D100D1; - } - .ns { - --svc-color: #006DFF; - } - .ht { - --svc-color: #008768; - } -} - -a { - text-decoration: underline; - color: var(--svc-color, --foreground-color); -} - -.button { - font-size: 1.1rem; - font-weight: bold; - border-width: 0.15rem; - border-style: solid; - text-decoration: none; - border-radius: 0.8rem; - padding: 0.3rem 0.5rem; - margin: 0.2rem 0; - display: inline-block; - border-color: var(--svc-color); - color: var(--svc-color); -} - -.button::selection { - background-color: var(--svc-color); -} - -.button:hover, .button:focus { - background-color: var(--svc-color); - color: var(--background-color); -} - -.button:hover::selection, .button:focus::selection { - background-color: var(--foreground-color); - color: var(--svc-color); -} diff --git a/public/css/form.css b/public/css/form.css index 10f2c29..40f6837 100644 --- a/public/css/form.css +++ b/public/css/form.css @@ -8,22 +8,12 @@ input, select { margin: 0.3rem; padding: 0.30rem; border-style: solid; - border-width: 0.10rem; + border-width: 0.20rem; background-color: var(--background-color); color: var(--foreground-color); border-color: var(--svc-color, --foreground-color); } -input:hover, select:hover { - border-width: 0.15rem; - padding: 0.25rem; -} - -input:focus, select:focus { - border-width: 0.20rem; - padding: 0.20rem; -} - input[type=text] { font-family: monospace; } @@ -50,7 +40,7 @@ input:invalid+span::after { } input:valid+span::after { - content: ''; // ✓ + content: ''; /* ✓ */ } input+span::after { @@ -61,9 +51,13 @@ input+span::after { font-family: monospace; } +:disabled { + cursor: not-allowed; +} + fieldset { border-radius: 1rem; - border-width: 2px; + border-width: 0.15rem; border-style: solid; display: flex; flex-direction: row; diff --git a/public/css/main.css b/public/css/main.css index f6346cf..8b01fd0 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -1,37 +1,40 @@ -:root { - --font-size: 1rem; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-color: #FFFFFF; - --background-color: #000000; - } -} - -@media (prefers-color-scheme: light) { - :root { - --foreground-color: #000000; - --background-color: #FFFFFF; - } -} - body { margin: 0; padding: 0; background-color: var(--background-color); color: var(--foreground-color); font-family: system-ui, sans-serif; - font-size: var(--font-size); + line-height: 1rem + 6%; + font-size: 1rem; +} + +nav ul { + list-style-type: none; + display: inline; + margin: 0; + padding: 0; +} + +nav li { + display: inline; +} + +nav ul li ul li::before { + content: ' > '; } h1 { text-align: center; - font-size: 2rem; + font-size: 1.5rem; + display: inline; +} + +h2 { + font-size: 1.3rem; } header, main, footer { - max-width: 30rem; + max-width: 40rem; margin-left: auto; margin-right: auto; } @@ -62,3 +65,26 @@ p { background-color: var(--foreground-color); color: var(--background-color); } + +abbr { + text-decoration: underline 0.2em dotted; +} + +a { + text-decoration: underline var(--svc-color) 0.2em; + color: var(--foreground-color); +} + +a:hover { + text-decoration: underline var(--svc-color) 0.25em; + color: var(--foreground-color); +} + +a:active { + text-decoration: underline var(--svc-color) 0.35em; + color: var(--foreground-color); +} + +dt a { + font-size: 1.1rem; +} diff --git a/public/ht/index.php b/public/ht/index.php index bdc8573..869df90 100644 --- a/public/ht/index.php +++ b/public/ht/index.php @@ -53,15 +53,15 @@ </dl> <dl> - <dt><a class="ht button" href="http-onion">Accès HTTP en Onion</a></dt> + <dt><a class="ht" href="http-onion">Accès HTTP en Onion</a></dt> <dd> Un site HTML, accessible par Tor, avec une adresse en .onion </dd> - <dt><a class="ht button" href="https-domain">Accès HTTPS par DNS</a></dt> + <dt><a class="ht" href="https-domain">Accès HTTPS par DNS</a></dt> <dd> Un site HTML, accessible directement, par un nom de domaine </dd> - <dt><a class="ht button" href="le">Let's Encrypt</a></dt> + <dt><a class="ht" href="le">Let's Encrypt</a></dt> <dd> Installer un certificat Let's Encrypt sur un domaine </dd> diff --git a/public/index.php b/public/index.php index 3cc8e2b..14ba1e3 100644 --- a/public/index.php +++ b/public/index.php @@ -1,22 +1,22 @@ <?php require "../common/html.php"; ?> <dl> - <dt><a class="reg button" href="reg/">Registre</code></a></dt> + <dt><a class="auth" href="auth/">Authentification</a></dt> + <dd> + Gérer son compte Niver + </dd> + <dt><a class="reg" href="reg/">Registre</code></a></dt> <dd> Demander l'attribution d'un sous-domaine</code> </dd> - <dt><a class="ns button" href="ns/">Serveurs de noms</a></dt> + <dt><a class="ns" href="ns/">Serveurs de noms</a></dt> <dd> Utiliser le serveur de noms de Niver pour héberger ses zones </dd> - <dt><a class="ht button" href="ht/">Hypertexte</a></dt> + <dt><a class="ht" href="ht/">Hypertexte</a></dt> <dd> Mettre en ligne son site statique sur un espace <abbr title="SSH File Transfert Protocol">SFTP</abbr>, et le faire répondre en <abbr title="HyperText Transfert Protocol">HTTP</abbr> par DNS ou Tor </dd> - <dt><a class="auth button" href="auth/">Authentification</a></dt> - <dd> - Gérer son compte Niver - </dd> </dl> <?php closeHTML(); ?> diff --git a/public/ns/index.php b/public/ns/index.php index 7b04bb4..e0816e7 100644 --- a/public/ns/index.php +++ b/public/ns/index.php @@ -1,58 +1,58 @@ <?php require "../../common/html.php"; ?> <dl> - <dt><a class="ns button" href="zone">Gérer ses zones</a></dt> + <dt><a class="ns" href="zone">Gérer ses zones</a></dt> <dd> Pour qu'elle soit gérée par le serveur de noms de Niver </dd> - <dt><a class="ns button" href="dnssec">Obtenir les enregistrements <abbr title="Delegation Signer">DS</abbr></a></dt> + <dt><a class="ns" href="dnssec">Obtenir les enregistrements <abbr title="Delegation Signer">DS</abbr></a></dt> <dd> À indiquer à la zone parente pour activer <abbr title="Domain Name System Security Extensions">DNSSEC</abbr> </dd> - <dt><a class="ns button" href="ns">Enregistrement <abbr title="Name Server">NS</abbr></a></dt> + <dt><a class="ns" href="ns">Enregistrement <abbr title="Name Server">NS</abbr></a></dt> <dd> Indiquer le serveur de noms d'une zone </dd> - <dt><a class="ns button" href="ip">Enregistrements A et AAAA</a></dt> + <dt><a class="ns" href="ip">Enregistrements A et AAAA</a></dt> <dd> Indiquer l'adresse IP d'un domaine </dd> - <dt><a class="ns button" href="txt">Enregistrement TXT</a></dt> + <dt><a class="ns" href="txt">Enregistrement TXT</a></dt> <dd> Associer du texte à un domaine </dd> - <dt><a class="ns button" href="srv">Enregistrement SRV</a></dt> + <dt><a class="ns" href="srv">Enregistrement SRV</a></dt> <dd> Indiquer un serveur pour un domaine </dd> - <dt><a class="ns button" href="mx">Enregistrement <abbr title="Mail eXchanger">MX</abbr></a></dt> + <dt><a class="ns" href="mx">Enregistrement <abbr title="Mail eXchanger">MX</abbr></a></dt> <dd> Indiquer le serveur mail pour un domaine </dd> - <dt><a class="ns button" href="caa">Enregistrement <abbr title="Certification Authority Authorization">CAA</abbr></a></dt> + <dt><a class="ns" href="caa">Enregistrement <abbr title="Certification Authority Authorization">CAA</abbr></a></dt> <dd> Indiquer les seules autorités de certifications autorisée à signer les domaines </dd> - <dt><a class="ns button" href="tlsa">Enregistrement <abbr title="Transport Layer Security Association">TLSA</abbr></a></dt> + <dt><a class="ns" href="tlsa">Enregistrement <abbr title="Transport Layer Security Association">TLSA</abbr></a></dt> <dd> Mettre en place <abbr title="DNS-based Authentication of Named Entities">DANE</abbr> en indiquant l'empreinte d'un certificat <abbr title="Transport Layer Security">TLS</abbr> </dd> - <dt><a class="ns button" href="sshfp">Enregistrement <abbr title="Secure SHell FingerPrint">SSHFP</abbr></a></dt> + <dt><a class="ns" href="sshfp">Enregistrement <abbr title="Secure SHell FingerPrint">SSHFP</abbr></a></dt> <dd> Indiquer les empreintes de clés <abbr title="Secure SHell">SSH</abbr> d'un domaine </dd> <!-- - <dt><a class="ns button" href="loc">Enregistrement LOC</a></dt> + <dt><a class="ns" href="loc">Enregistrement LOC</a></dt> <dd> Indiquer des coordonnées géographiques </dd> - <dt><a class="ns button" href="cname">Enregistrement <abbr title="Canonical NAME">CNAME</abbr></a></dt> + <dt><a class="ns" href="cname">Enregistrement <abbr title="Canonical NAME">CNAME</abbr></a></dt> <dd> Définir un domaine comme étant l'alias d'un autre </dd> - <dt><a class="ns button" href="dname">Enregistrement <abbr title="Delegation NAME">DNAME</abbr></a></dt> + <dt><a class="ns" href="dname">Enregistrement <abbr title="Delegation NAME">DNAME</abbr></a></dt> <dd> Définir les sous-domaines d'un domaine comme étant les alias des sous-domaines d'un autre domaine </dd>--> diff --git a/public/reg/index.php b/public/reg/index.php index d528a56..44fb617 100644 --- a/public/reg/index.php +++ b/public/reg/index.php @@ -1,19 +1,19 @@ <?php require "../../common/html.php"; ?> <dl> - <dt><a class="reg button" href="register">Enregistrer un nouveau domaine</a></dt> + <dt><a class="reg" href="register">Enregistrer un nouveau domaine</a></dt> <dd> Prendre possession d'un sous-domaine de <code><?= CONF['reg']['registry'] ?></code> </dd> - <dt><a class="reg button" href="ns">Enregistrement <abbr title="Name Server">NS</abbr></a></dt> + <dt><a class="reg" href="ns">Enregistrement <abbr title="Name Server">NS</abbr></a></dt> <dd> Indiquer les serveurs de noms de son sous-domaine de <code><?= CONF['reg']['registry'] ?></code> </dd> - <dt><a class="reg button" href="ds">Enregistrement <abbr title="Delegation Signer">DS</abbr></a></dt> + <dt><a class="reg" href="ds">Enregistrement <abbr title="Delegation Signer">DS</abbr></a></dt> <dd> Déléguer la confiance <abbr title="Domain Name System Security Extensions">DNSSEC</abbr> </dd> - <dt><a class="reg button" href="glue">Glue Record</a></dt> + <dt><a class="reg" href="glue">Glue Record</a></dt> <dd> Indiquer les IP de ses serveurs de noms de son sous-domaine de <code><?= CONF['reg']['registry'] ?></code> dont les adresses se trouvent sur ce même sous-domaine </dd>