rework inspect page

1 files changed, 234 insertions, 45 deletions

diff --git a/templates/garage_website_inspect.html b/templates/garage_website_inspect.html
index af87955..56979ed 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,57 +61,244 @@
 		{{ end }}
 		</p>
 
-		<h5 class="mt-3">Informations de connexion</h5>
-		<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'">Cliquer pour 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>
-
+		<!-- 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="rotate_key">Rotation de la clé</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" 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&amp;s3ForcePathStyle=true&amp;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>
 	</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 }}