diff options
Diffstat (limited to 'templates')
-rw-r--r-- | templates/garage_key.html | 234 | ||||
-rw-r--r-- | templates/garage_website_inspect.html | 58 | ||||
-rw-r--r-- | templates/garage_website_list.html | 38 | ||||
-rw-r--r-- | templates/garage_website_new.html | 63 | ||||
-rw-r--r-- | templates/home.html | 33 | ||||
-rw-r--r-- | templates/layout.html | 2 |
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&s3ForcePathStyle=true&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> |