New interface

This commit is contained in:
Miraty 2022-06-06 23:14:50 +02:00
parent 3a71e759a4
commit c8ef7409f1
11 changed files with 102 additions and 173 deletions

View file

@ -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',
));
?>
<!DOCTYPE html>
<html lang="fr" <?php if (!empty(SERVICE)) echo 'class="' . SERVICE . '"'; ?>
<html lang="fr"<?php if (!empty(SERVICE)) echo ' class="' . SERVICE . '"'; ?>>
<head>
<meta charset="utf-8">
<title><?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();
}
?>

View file

@ -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(); ?>

View file

@ -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'])) {

View file

@ -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(); ?>

View file

@ -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);
}

View file

@ -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;

View file

@ -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;
}

View file

@ -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>

View file

@ -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(); ?>

View file

@ -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>-->

View file

@ -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>