diff options
Diffstat (limited to 'templates/garage_website_inspect.html')
| -rw-r--r-- | templates/garage_website_inspect.html | 296 |
1 files changed, 285 insertions, 11 deletions
diff --git a/templates/garage_website_inspect.html b/templates/garage_website_inspect.html index a8f463d..6182f0d 100644 --- a/templates/garage_website_inspect.html +++ b/templates/garage_website_inspect.html @@ -3,8 +3,8 @@ {{define "body"}} <div class="d-flex"> <!--<h4>Inspecter les sites webs</h4>--> - <a class="ml-auto btn btn-link" href="/website/configure">Mes identifiants</a> - <a class="ml-4 btn btn-info" href="/">Menu principal</a> + <a class="ml-auto btn btn-link" href="/website/configure">Mes identifiants</a> + <a class="ml-4 btn btn-info" href="/">Menu principal</a> </div> <div class="row"> @@ -15,9 +15,9 @@ {{ end }} <div class="col-md-3 mt-3"> - <a class="btn btn-primary btn-block" href="/website/new"> + <a class="btn btn-primary btn-block" href="/website/new"> <svg id="i-plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="18" height="18" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="6"> - <path d="M16 2 L16 30 M2 16 L30 16" /> + <path d="M16 2 L16 30 M2 16 L30 16" /> </svg> <span class="ml-1">Nouveau site web</span> </a> @@ -45,11 +45,13 @@ <div class="col-md-9"> <h2>{{ .View.Name.Url }}</h2> + <!-- QUOTAS --> + <h5 class="mt-3">Quotas</h5> <div class="progress mt-3"> <div class="progress-bar" role="progressbar" aria-valuenow="{{ .View.Size.Current }}" aria-valuemin="0" aria-valuemax="{{ .View.Size.Max }}" style="width: {{ .View.Size.Percent }}%; min-width: 2em;"> {{ .View.Size.Percent }}% - </div> + </div> </div> <p class="text-center"> @@ -59,23 +61,295 @@ {{ end }} </p> + <!-- ACTIONS --> <h5 class="mt-3">Actions</h5> <form action="" method="post"> <div class="btn-group" role="group" aria-label="Actions sur le site web"> - <button class="btn btn-secondary" name="action" value="increase_quota">Augmenter le quota</button> + <button class="btn btn-secondary" name="action" value="increase_quota">Augmenter le quota</button> + <button class="btn btn-secondary" name="action" value="rotate_key">Rotation de la clé</button> <a class="btn btn-secondary" href="/website/vhost/{{ .View.Name.Pretty }}">Changer le nom de domaine</a> - <button class="btn btn-danger" name="action" value="delete_bucket">Supprimer</button> + <button class="btn btn-danger" name="action" value="delete_bucket">Supprimer</button> </div> </form> - {{ if .View.Name.Expanded }} - <h5 class="mt-5">Vous ne savez pas comment configurer votre nom de domaine ?</h5> - <p> Le nom de domaine {{ .View.Name.Url }} n'est pas géré par Deuxfleurs, il vous revient donc de configurer la zone DNS. Vous devez ajouter une entrée <code>CNAME garage.deuxfleurs.fr</code> ou <code>ALIAS garage.deuxfleurs.fr</code> auprès de votre hébergeur DNS, qui est souvent aussi le bureau d'enregistrement (eg. Gandi, GoDaddy, BookMyName, etc.).</p> - {{ end }} + <!-- INFO --> + <h5 class="mt-3">Informations de connexion</h5> + <ul class="nav nav-tabs" id="proto" role="tablist"> + <li class="nav-item"> + <a class="nav-link active" id="s3-tab" data-toggle="tab" href="#s3" role="tab" aria-controls="s3" aria-selected="true">S3 (recommandé)</a> + </li> + <li class="nav-item"> + <a class="nav-link" id="sftp-tab" data-toggle="tab" href="#sftp" role="tab" aria-controls="sftp" aria-selected="false">SFTP</a> + </li> + <li class="nav-item"> + <a class="nav-link" id="dav-tab" data-toggle="tab" href="#dav" role="tab" aria-controls="dav" aria-selected="false">WebDAV</a> + </li> + </ul> + <div class="tab-content" id="protocols"> + <div class="tab-pane fade show active" id="s3" role="tabpanel" aria-labelledby="s3-tab"> + <table class="table mt-4"> + <tbody> + <tr> + <th scope="row" class="col-md-2">Identifiant de clé</th> + <td>{{ .View.AccessKeyId }}</td> + </tr> + <tr> + <th scope="row">Clé secrète</th> + <td> + <a href="#" onclick="document.getElementById('secret_key').style.display='inline'; this.style.display='none'">[Afficher la clé secrète]</a> + <span id="secret_key" style="display: none">{{ .View.SecretAccessKey }}</span> + </td> + </tr> + <tr> + <th scope="row">Région</th> + <td>garage</td> + </tr> + <tr> + <th scope="row">Endpoint URL</th> + <td>https://garage.deuxfleurs.fr</td> + </tr> + <tr> + <th scope="row">Type d'URL</th> + <td>DNS et chemin (préférer chemin)</td> + </tr> + <tr> + <th scope="row">Signature</th> + <td>Version 4</td> + </tr> + </tbody> + </table> + + <p>Configurer votre logiciel :</p> + + <div class="accordion" id="softconfig"> + <div class="card"> + <div class="card-header" id="awscli-title"> + <h2 class="mb-0"> + <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#awscli" aria-expanded="false" aria-controls="awscli"> + awscli (tout générateur de site statique) + </button> + </h2> + </div> + <div id="awscli" class="collapse show" aria-labelledby="awscli-title" data-parent="#softconfig"> + <div class="card-body"> + <p>Lancez la commande :</p> + <pre>aws --profile {{ .View.Name.Pretty }} configure</pre> + + <p>Entrez les informations suivantes quand elles vous sont demandées :</p> + <dl> + <dt>AWS Access Key ID [None]:</dt><dd>{{ .View.AccessKeyId }}</dd> + <dt>AWS Secret Access Key [None]:</dt><dd><a href="#" onclick="document.getElementById('aws_secret_key').style.display='inline'; this.style.display='none'">[Afficher la clé secrète]</a><span id="aws_secret_key" style="display: none">{{ .View.SecretAccessKey }}</span></dd> + <dt>Default region name [None]:</dt> <dd>garage</dd> + <dt>Default output format [None]:</dt> <dd>(laissez vide et appuyez sur entrée)</dd> + </dl> + + <p>Finalisez la configuration :</p> + <pre>aws --profile {{ .View.Name.Pretty }} configure set endpoint_url https://garage.deuxfleurs.fr</pre> + + + <p>Pour déployer votre dossier local <code>public</code> lancez :</p> + <pre> +aws --profile {{ .View.Name.Pretty }} s3 sync ./public s3://{{ .View.Name.Pretty }} + </pre> + </div> + </div> + </div> + + <div class="card"> + <div class="card-header" id="minio-title"> + <h2 class="mb-0"> + <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#minio" aria-expanded="true" aria-controls="minio"> + Minio CLI (tout générateur de site statique) + </button> + </h2> + </div> + + <div id="minio" class="collapse" aria-labelledby="minio-title" data-parent="#softconfig"> + <div class="card-body"> + <p>Vous pouvez configurer Minio CLI avec cette commande :</p> + <pre> +mc alias set \ + {{ .View.Name.Pretty }} \ + https://garage.deuxfleurs.fr \ + {{ .View.AccessKeyId }} \ + <a href="#" onclick="document.getElementById('minio_secret_key').style.display='inline'; this.style.display='none'">[Afficher la clé secrète]</a><span id="minio_secret_key" style="display: none">{{ .View.SecretAccessKey }}</span> \ + --api S3v4 + </pre> + <p>Et ensuite copiez votre site web avec la sous-commande mirror de Minio CLI :</p> + <pre> +mc mirror --overwrite ./public/ {{ .View.Name.Pretty }}/ + </pre> + </div> + </div> + </div> + + <div class="card"> + <div class="card-header" id="hugo-title"> + <h2 class="mb-0"> + <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#hugo" aria-expanded="false" aria-controls="hugo"> + Hugo + </button> + </h2> + </div> + <div id="hugo" class="collapse" aria-labelledby="hugo-title" data-parent="#softconfig"> + <div class="card-body"> + <p>Créez un fichier nommé <code>.deployment.secrets</code> (ne commitez pas ce fichier dans votre dépôt !) :</p> + <pre> +export AWS_ACCESS_KEY_ID={{ .View.AccessKeyId }} +export AWS_SECRET_ACCESS_KEY=<a href="#" onclick="document.getElementById('ugo_secret_key').style.display='inline'; this.style.display='none'">[Afficher la clé secrète]</a><span id="hugo_secret_key" style="display: none">{{ .View.SecretAccessKey }}</span> + </pre> + <p>Dans votre fichier de configuration Hugo <code>config.toml</code> (que vous pouvez commiter), rajoutez :</p> + <pre> +[[deployment.targets]] + URL = "s3://bucket?endpoint=garage.deuxfleurs.fr&s3ForcePathStyle=true&region=garage" + </pre> + + <p>Pour déployer, sourcez le fichier de configuration et laissez hugo faire : </p> + <pre> +source .deployment.secrets +hugo deploy + </pre> + </div> + </div> + </div> + </div> + </div> + <div class="tab-pane fade" id="sftp" role="tabpanel" aria-labelledby="sftp-tab"> + <br> + <div class="alert alert-danger" role="alert"> + N'automatisez pas votre déploiement en SFTP car vous risqueriez de faire fuiter votre mot de passe.<br> + Pour toute forme d'automatisation, préférez le protocole S3. + </div> + <div class="alert alert-warning" role="alert"> + L'algorithme de clé utilisé par le serveur est désactivé par défaut sur les clients SSH récents.<br> + Vous devez rajouter l'option -oHostKeyAlgorithms=+ssh-rsa pour vous connecter. + </div> + <table class="table mt-4"> + <tbody> + <tr> + <th scope="row">Nom d'utilisateur-ice</th> + <td>{{ .Describe.Username }}</td> + </tr> + <tr> + <th scope="row">Mot de passe</th> + <td>(votre mot de passe guichet)</td> + </tr> + <tr> + <th scope="row">Hôte</th> + <td>sftp://sftp.deuxfleurs.fr</td> + </tr> + <tr> + <th scope="row">Port</th> + <td>2222</td> + </tr> + </tbody> + </table> + <p>Configurez votre logiciel :</p> + + <div class="accordion" id="softconfig2"> + <div class="card"> + <div class="card-header" id="scp-title"> + <h2 class="mb-0"> + <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#filezilla" aria-expanded="false" aria-controls="filezilla"> + scp + </button> + </h2> + </div> + <div id="filezilla" class="collapse show" aria-labelledby="scp-title" data-parent="#softconfig2"> + <div class="card-body"> + <p>Déployer le dossier local <em>public</em> sur le site web {{ .View.Name.Pretty }} :</p> + <pre> +scp -oHostKeyAlgorithms=+ssh-rsa -P2222 -r ./public {{ .Describe.Username }}@sftp.deuxfleurs.fr:{{ .View.Name.Pretty }}/ + </pre> + </div> + </div> + </div> + <div class="card"> + <div class="card-header" id="filezilla-title"> + <h2 class="mb-0"> + <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#filezilla" aria-expanded="false" aria-controls="filezilla"> + Filezilla + </button> + </h2> + </div> + <div id="filezilla" class="collapse" aria-labelledby="filezilla-title" data-parent="#softconfig2"> + <div class="card-body"> + <p>Dans la barre de connexion rapide du haut, entrez :</p> + <dl> + <dt>Hôte</dt> <dd>sftp://sftp.deuxfleurs.fr</dd> + <dt>Nom d'utilisateur</dt> <dd>{{ .Describe.Username }}</dd> + <dt>Mot de passe</dt> <dd>(votre mot de passe guichet)</dd> + <dt>Port</dt> <dd>2222</dd> + </dl> + <p>Cliquez ensuite sur <strong>Connexion rapide</strong></p> + </div> + </div> + </div> + </div> + </div> + + <div class="tab-pane fade" id="dav" role="tabpanel" aria-labelledby="dav-tab"> + <br> + <div class="alert alert-danger" role="alert"> + N'automatisez pas votre déploiement en WebDAV car vous risqueriez de faire fuiter votre mot de passe.<br> + Pour toute forme d'automatisation, préférez le protocole S3. + </div> + + <table class="table mt-4"> + <tbody> + <tr> + <th scope="row">Nom d'utilisateur-ice</th> + <td>{{ .Describe.Username }}</td> + </tr> + <tr> + <th scope="row">Mot de passe</th> + <td>(votre mot de passe guichet)</td> + </tr> + <tr> + <th scope="row">Hôte</th> + <td>https://bagage.deuxfleurs.fr ou davs://bagage.deuxfleurs.fr</td> + </tr> + <tr> + <th scope="row">Port</th> + <td>443 (par défaut)</td> + </tr> + </tbody> + </table> + <p>Configurez votre logiciel :</p> + + <div class="accordion" id="softconfig3"> + <div class="card"> + <div class="card-header" id="drive-title"> + <h2 class="mb-0"> + <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#drive" aria-expanded="false" aria-controls="filezilla"> + Explorateur web + </button> + </h2> + </div> + <div id="drive" class="collapse show" aria-labelledby="drive-title" data-parent="#softconfig3"> + <div class="card-body"> + <p>Vous pouvez naviguer dans vos fichiers via l'explorateur web. + Utilisez simplement vos identifiants Guichet, l'explorateur est préconfiguré.</p> + + <p><a href="https://drive.deuxfleurs.fr">Accéder à l'explorateur</a></p> + </div> + </div> + </div> + </div> + </div> + + </div> </div> + + {{ if .View.Name.Expanded }} + <h5 class="mt-5">Vous ne savez pas comment configurer votre nom de domaine ?</h5> + <p> Le nom de domaine {{ .View.Name.Url }} n'est pas géré par Deuxfleurs, il vous revient donc de configurer la zone DNS. Vous devez ajouter une entrée <code>CNAME garage.deuxfleurs.fr</code> ou <code>ALIAS garage.deuxfleurs.fr</code> auprès de votre hébergeur DNS, qui est souvent aussi le bureau d'enregistrement (eg. Gandi, GoDaddy, BookMyName, etc.).</p> + {{ end }} + + </div> {{ end }} |