Merge pull request 'Manage Garage Websites from Guichet' (#19) from website into main

Reviewed-on: https://git.deuxfleurs.fr/Deuxfleurs/guichet/pulls/19

6 files changed, 418 insertions, 10 deletions

diff --git a/templates/garage_key.html b/templates/garage_key.html
new file mode 100644
index 0000000..b839fcb
--- /dev/null
+++ b/templates/garage_key.html
@@ -0,0 +1,234 @@
+{{define "title"}}Profile |{{end}}
+
+{{define "body"}}
+<div class="d-flex">
+    <h4>Mes identifiants</h4>
+    <a class="ml-auto btn btn-link" href="/garage/website">Mes sites webs</a>
+    <a class="ml-4 btn btn-info" href="/">Menu principal</a>
+</div>
+
+<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</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>
+</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">Identifiant de clé</th>
+                    <td>{{ .Key.AccessKeyId }}</td>
+                </tr>
+                <tr>
+                    <th scope="row">Clé secrète</th>
+                    <td>{{ .Key.SecretAccessKey }}</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
+                        </button>
+                    </h2>
+                </div>
+                <div id="awscli" class="collapse show" aria-labelledby="awscli-title" data-parent="#softconfig">
+                    <div class="card-body">
+                        <p>Créez un fichier nommé <code>~/.awsrc</code> :</p>
+                        <pre>
+export AWS_ACCESS_KEY_ID={{ .Key.AccessKeyId }}
+export AWS_SECRET_ACCESS_KEY={{ .Key.SecretAccessKey }}
+export AWS_DEFAULT_REGION='garage'
+
+function aws { command aws --endpoint-url https://garage.deuxfleurs.fr $@ ; }
+aws --version
+                        </pre>
+                        <p>Ensuite vous pouvez utiliser awscli :</p>
+                        <pre>
+source ~/.awsrc
+aws s3 ls
+aws s3 ls s3://my-bucket
+aws s3 cp /tmp/a.txt s3://my-bucket
+...
+                        </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
+                        </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 \
+  garage \
+  https://garage.deuxfleurs.fr \
+  {{ .Key.AccessKeyId }} \
+  {{ .Key.SecretAccessKey }} \
+  --api S3v4
+                        </pre>
+                        <p>Et ensuite pour utiliser Minio CLI avec :</p>
+                        <pre>
+mc ls garage/
+mc cp /tmp/a.txt garage/my-bucket/a.txt
+...
+                        </pre>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-header" id="winscp-title">
+                    <h2 class="mb-0">
+                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#winscp" aria-expanded="true" aria-controls="winscp">
+                            WinSCP
+                        </button>
+                    </h2>
+                </div>
+
+                <div id="winscp" class="collapse" aria-labelledby="winscp-title" data-parent="#softconfig">
+                    <div class="card-body">
+                        Reportez vous <a href="">au guide</a>
+                    </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>Dans votre fichier <code>config.toml</code>, rajoutez :</p>
+                        <pre>
+[[deployment.targets]]
+ URL = "s3://bucket?endpoint=garage.deuxfleurs.fr&amp;s3ForcePathStyle=true&amp;region=garage"
+                        </pre>
+                        <p>Assurez-vous d'avoir un fichier dans lequel les variables <code>AWS_ACCESS_KEY_ID</code> et <code>AWS_SECRET_ACCESS_KEY</code> sont définies,
+                        ici on suppose que vous avez suivi les instructions de l'outil awscli (ci-dessus) et que vous avez un fichier <code>~/.awsrc</code> qui défini ces variables.
+                        Ensuite : </p>
+                        <pre>
+source ~/.awsrc
+hugo deploy
+                        </pre>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-header" id="publii-title">
+                    <h2 class="mb-0">
+                        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#publii" aria-expanded="false" aria-controls="publii">
+                            Publii
+                        </button>
+                    </h2>
+                </div>
+                <div id="publii" class="collapse" aria-labelledby="publii-title" data-parent="#softconfig">
+                    <div class="card-body">
+                        <em>Bientôt...</em>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- sftp -->
+    <div class="tab-pane fade" id="sftp" role="tabpanel" aria-labelledby="sftp-tab">
+        <table class="table mt-4">
+            <tbody>
+                <tr>
+                    <th scope="row">Nom d'utilisateur-ice</th>
+                    <td>{{ .Status.Info.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://bagage.deuxfleurs.fr</td>
+                </tr>
+                <tr>
+                    <th scope="row">Port</th>
+                    <td>2222</td>
+                </tr>
+            </tbody>
+        </table>
+        <p>Configurer votre logiciel :</p>
+
+        <div class="accordion" id="softconfig2">
+            <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">
+                            scp
+                        </button>
+                    </h2>
+                </div>
+                <div id="filezilla" class="collapse show" aria-labelledby="filezilla-title" data-parent="#softconfig">
+                    <div class="card-body">
+                        <p>Un exemple avec SCP :</p>
+                        <pre>
+scp -oHostKeyAlgorithms=+ssh-rsa -P2222 -r ./public {{ .Status.Info.Username }}@bagage.deuxfleurs.fr:mon_bucket/
+                        </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="#softconfig">
+                    <div class="card-body">
+                        <em>Bientôt</em>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+{{end}}
diff --git a/templates/garage_website_inspect.html b/templates/garage_website_inspect.html
new file mode 100644
index 0000000..bc60711
--- /dev/null
+++ b/templates/garage_website_inspect.html
@@ -0,0 +1,58 @@
+{{define "title"}}Inspecter le site web |{{end}}
+
+{{define "body"}}
+<div class="d-flex">
+  <h4>Inspecter le site web</h4>
+  <a class="ml-auto btn btn-link" href="/garage/key">Mes identifiants</a>
+  <a class="ml-4 btn btn-success" href="/garage/website/new">Nouveau site web</a>
+  <a class="ml-4 btn btn-info" href="/garage/website">Mes sites webs</a>
+</div>
+
+<table class="table mt-4">
+  <tbody>
+      <tr>
+          <th scope="row">ID</th>
+          <td>{{ .Bucket.Id }}</td>
+      </tr>
+      <tr>
+          <th scope="row">URLs</th>
+          <td>
+              {{ range $alias := .Bucket.GlobalAliases }}
+              {{ if contains $alias "." }}
+              https://{{ $alias }}
+              {{ else }}
+              https://{{ $alias }}.web.deuxfleurs.fr
+              {{ end }}
+              {{ end }}
+          </td>
+      </tr>
+      <tr>
+          <th scope="row">Document d'index</th>
+          <td> {{ .IndexDoc }}</td>
+      </tr>
+      <tr>
+          <th scope="row">Document d'erreur</th>
+          <td>{{ .ErrorDoc }}</td>
+      </tr>
+      <tr>
+          <th scope="row">Nombre de fichiers</th>
+          <td>{{ .Bucket.Objects }} / {{ .MaxObjects }}</td>
+      </tr>
+      <tr>
+          <th scope="row">Espace utilisé</th>
+          <td>{{ .Bucket.Bytes }} / {{ .MaxSize }} octets</td>
+      </tr>
+  </tbody>
+</table>
+
+<h4>Configurer le nom de domaine</h4>
+
+{{ range $alias := .Bucket.GlobalAliases }}
+{{ if contains $alias "." }}
+<p> Le nom de domaine {{ $alias }} 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>
+{{ else }}
+<p> Le nom de domaine https://{{ $alias }}.web.deuxfleurs.fr est fourni par Deuxfleurs, il n'y a pas de configuration à faire.</p>
+{{ end }}
+{{ end }}
+
+{{end}}
diff --git a/templates/garage_website_list.html b/templates/garage_website_list.html
new file mode 100644
index 0000000..ded8096
--- /dev/null
+++ b/templates/garage_website_list.html
@@ -0,0 +1,38 @@
+{{define "title"}}Sites webs |{{end}}
+
+{{define "body"}}
+
+<div class="d-flex">
+  <h4>Sites webs</h4>
+  <a class="ml-auto btn btn-link" href="/garage/key">Mes identifiants</a>
+  <a class="ml-4 btn btn-success" href="/garage/website/new">Nouveau site web</a>
+  <a class="ml-4 btn btn-info" href="/">Menu principal</a>
+</div>
+
+<table class="table mt-4">
+  <thead>
+    <th scope="col">ID</th>
+    <th scope="col">URLs</th>
+  </thead>
+  <tbody>
+      {{ range $buck := .Key.Buckets }}
+      {{ if $buck.GlobalAliases }}
+      <tr>
+          <td>
+              <a href="/garage/website/b/{{$buck.Id}}">{{$buck.Id}}</a>
+          </td>
+          <td>
+              {{ range $alias := $buck.GlobalAliases }}
+              {{ if contains $alias "." }}
+              https://{{ $alias }}
+              {{ else }}
+              https://{{ $alias }}.web.deuxfleurs.fr
+              {{ end }}
+              {{ end }}
+          </td>
+      </tr>
+      {{ end }}
+      {{ end }}
+  </tbody>
+</table>
+{{end}}
diff --git a/templates/garage_website_new.html b/templates/garage_website_new.html
new file mode 100644
index 0000000..f1cd847
--- /dev/null
+++ b/templates/garage_website_new.html
@@ -0,0 +1,63 @@
+{{define "title"}}Créer un site web |{{end}}
+
+{{define "body"}}
+<div class="d-flex">
+    <h4>Créer un site web</h4>
+    <a class="ml-auto btn btn-link" href="/garage/key">Mes identifiants</a>
+    <a class="ml-4 btn btn-info" href="/garage/website">Mes sites webs</a>
+</div>
+
+<ul class="nav nav-tabs" id="proto" role="tablist">
+    <li class="nav-item">
+        <a class="nav-link active" id="dnsint-tab" data-toggle="tab" href="#dnsint" role="tab" aria-controls="dnsint" aria-selected="true">Je n'ai pas de nom de domaine</a>
+    </li>
+    <li class="nav-item">
+        <a class="nav-link" id="dnsext-tab" data-toggle="tab" href="#dnsext" role="tab" aria-controls="dnsext" aria-selected="false">Utiliser mon propre nom de domaine</a>
+    </li>
+</ul>
+
+<div class="tab-content" id="protocols">
+    <div class="tab-pane fade show active" id="dnsint" role="tabpanel" aria-labelledby="dnsint-tab">
+        <form method="POST" class="mt-4">
+            <div class="form-row">
+                <div class="form-group col-md-6">
+                    <label for="bucket">Sous-domaine désiré :</label>
+                    <input type="text" id="bucket" name="bucket" placeholder="mon-site" class="form-control" value="" onkeyup="document.getElementById('url').value = `https://${document.getElementById('bucket').value}.web.deuxfleurs.fr`" />
+                </div>
+                <div class="form-group col-md-6">
+                    <label for="url">Votre site sera accessible à l'URL suivante :</label>
+                    <input type="text" id="url" disabled="true" name="url" class="form-control" value="https://mon-site.web.deuxfleurs.fr" />
+                </div>
+            </div>
+            <div class="mt-4">
+                <p>La première fois que vous chargerez votre site web, une erreur de certificat sera renvoyée. C'est normal, il faudra patienter quelques minutes le temps que le certificat se génère.</p>
+            </div>
+            <button type="submit" class="btn btn-primary">Créer un nouveau site web</button>
+        </form>
+    </div>
+    <div class="tab-pane fade show" id="dnsext" role="tabpanel" aria-labelledby="dnsext-tab">
+        <form method="POST" class="mt-4">
+            <div class="form-row">
+                <div class="form-group col-md-6">
+                    <label for="bucket2">Votre nom de domaine :</label>
+                    <input type="text" id="bucket2" name="bucket2" placeholder="example.com" class="form-control" value="" onkeyup="document.getElementById('url2').value = `https://${document.getElementById('bucket2').value}`" />
+                </div>
+                <div class="form-group col-md-6">
+                    <label for="url2">Votre site sera accessible à l'URL suivante :</label>
+                    <input type="text" id="url2" disabled="true" name="url2" class="form-control" value="https://example.com" />
+                </div>
+            </div>
+            <div>
+                <p>Vous devez éditer votre zone DNS, souvent gérée par votre bureau d'enregistrement, comme Gandi, pour la faire pointer vers Deuxfleurs. Si vous utilisez un sous domaine (eg. <code>site.example.com</code>), une entrée <code>CNAME</code> est appropriée :</p>
+                <pre>site   CNAME    3600    garage.deuxfleurs.fr.</pre>
+                <p>Si vous utilisez la racine de votre nom de domaine (eg. <code>example.com</code>, aussi appelée APEX), la solution dépend de votre fournisseur DNS, il vous faudra au choix une entrée <code>ALIAS</code> ou <code>CNAME</code> en fonction de ce que votre fournisseur supporte :</p>
+                <pre>@      ALIAS    3600    garage.deuxfleurs.fr.</pre>
+                <p>La première fois que vous chargerez votre site web, une erreur de certificat sera renvoyée. C'est normal, il faudra patienter quelques minutes le temps que le certificat se génère.</p>
+            </div>
+            <div class="mt-4">
+            <button type="submit" class="btn btn-primary">Créer un nouveau site web</button>
+        </form>
+
+    </div>
+</div>
+{{end}}
diff --git a/templates/home.html b/templates/home.html
index afa282f..241a59d 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -7,17 +7,30 @@
 <div class="d-flex">
   <a class="ml-auto btn btn-sm btn-dark" href="/logout">Se déconnecter</a>
 </div>
-<div class="mt-3"></div>
 
-<div class="card">
-  <div class="card-header">
-    Mon compte
-  </div>
-  <div class="list-group list-group-flush">
-    <a class="list-group-item list-group-item-action" href="/profile">Modifier mon profil</a>
-    <a class="list-group-item list-group-item-action" href="/passwd">Modifier mon mot de passe</a>
-    <a class="list-group-item list-group-item-action" href="/directory">Annuaire</a>
-  </div>
+<div class="mt-3">
+    <div class="card">
+        <div class="card-header">
+            Mon compte
+        </div>
+        <div class="list-group list-group-flush">
+            <a class="list-group-item list-group-item-action" href="/profile">Modifier mon profil</a>
+            <a class="list-group-item list-group-item-action" href="/passwd">Modifier mon mot de passe</a>
+            <a class="list-group-item list-group-item-action" href="/directory">Annuaire</a>
+        </div>
+    </div>
+</div>
+
+<div class="mt-3">
+    <div class="card">
+        <div class="card-header">
+            Garage
+        </div>
+        <div class="list-group list-group-flush">
+            <a class="list-group-item list-group-item-action" href="/garage/key">Mes identifiants</a>
+            <a class="list-group-item list-group-item-action" href="/garage/website">Mes sites webs</a>
+        </div>
+    </div>
 </div>
 
 {{if .Login.CanInvite}}
diff --git a/templates/layout.html b/templates/layout.html
index 0a887ce..3f9851d 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -14,5 +14,7 @@
     <hr />
     {{template "body" .}}
   </div>
+  <script src="/static/javascript/jquery.slim.min.js"></script>
+  <script src="/static/javascript/bootstrap.bundle.min.js"></script>
 </body>
 </html>