env-manager: ui polish (#127)
* env-manager: migrate to pico 2.0.6
* env: option to hide children from ui
* introduce template hierarchy
* style: improve menu styling
* env: reorganize tasks, pull before install
---------
Co-authored-by: Giorgi Lekveishvili <lekva@gl-mbp-m1-max.local>
diff --git a/core/installer/welcome/env-manager-tmpl/base.html b/core/installer/welcome/env-manager-tmpl/base.html
new file mode 100644
index 0000000..a9ca048
--- /dev/null
+++ b/core/installer/welcome/env-manager-tmpl/base.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+ <head>
+ <link rel="stylesheet" href="/static/pico.2.0.6.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hack-font@3/build/web/hack.css">
+ <link rel="stylesheet" href="/static/main.css">
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <title>dodo:</title>
+ </head>
+ <body>
+ <nav id="menu" class="container-fluid">
+ <ul>
+ <li class="dodo"><span style="color: #ffffff;">do</span><span class="highlight">do:</span></li>
+ </ul>
+ <ul id="links">
+ <li><a href="#">register</a></li>
+ <li><a href="#">apps</a></li>
+ <li><a href="#" style="border-right: none;">about</a></li>
+ </ul>
+ </nav>
+ <main class="container">
+ {{ block "main" . }}{{ end }}
+ </main>
+ </body>
+</html>
diff --git a/core/installer/welcome/env-manager-tmpl/form.html b/core/installer/welcome/env-manager-tmpl/form.html
new file mode 100644
index 0000000..c0f0d4a
--- /dev/null
+++ b/core/installer/welcome/env-manager-tmpl/form.html
@@ -0,0 +1,64 @@
+{{ define "main" }}
+<div class="grid contents-header">
+ <div style="border-width: 1px; border-right-style: solid;">
+ attention
+ </div>
+ <div>
+ take <span class="highlight">control</span>
+ </div>
+</div>
+<div id="contents" class="grid">
+ <div style="border-width: 1px; border-right-style: solid;">
+ As part of provisioning new dodo instance you will have to update DNS records at your domain registrar, so that it points to the nameservers running on your newly created dodo. Please first get familiar with your domain registrar documentation, and only then proceed with provisioning.
+ <label for="accept" style="padding-top: 1rem;">
+ <input type="checkbox" name="accept" id="accept" form="create-form" required tabindex="5">
+ <strong>I understand</strong>
+ </label>
+ </div>
+ <div id="create-instance-form">
+ <form action="" method="POST" id="create-form">
+ <label for="domain">
+ domain
+ <input
+ type="text"
+ id="domain"
+ name="domain"
+ required
+ autofocus
+ tabindex="1"
+ />
+ </label>
+ <label for="contact-email">
+ contact email
+ <input
+ type="email"
+ id="contact-email"
+ name="contact-email"
+ required
+ tabindex="2"
+ />
+ </label>
+ <label for="admin-public-key">
+ admin ssh public key
+ <input
+ type="string"
+ id="admin-public-key"
+ name="admin-public-key"
+ required
+ tabindex="3"
+ /> <!-- TODO(gio): remove-->
+ </label>
+ <label for="secret-token">
+ invitation code
+ <textarea
+ id="secret-token"
+ name="secret-token"
+ required
+ tabindex="4"
+ ></textarea>
+ </label>
+ <button type="submit" tabindex="6">provision</button>
+ </form>
+ </div>
+</div>
+{{ end }}
diff --git a/core/installer/welcome/env-manager-tmpl/status.html b/core/installer/welcome/env-manager-tmpl/status.html
new file mode 100644
index 0000000..3a54edf
--- /dev/null
+++ b/core/installer/welcome/env-manager-tmpl/status.html
@@ -0,0 +1,44 @@
+{{ define "task" }}
+{{ range . }}
+<li aria-busy="{{ eq .Status 0 }}">
+ {{ .Title }}{{ if .Err }} - {{ .Err.Error }} {{ end }}
+ {{ if .Subtasks }}
+ <ul>
+ {{ template "task" .Subtasks }}
+ </ul>
+ {{ end }}
+</li>
+{{ end }}
+{{ end }}
+
+{{ define "main" }}
+<article>
+ <ul>
+ {{ template "task" .Root.Subtasks }}
+ </ul>
+</article>
+{{ if .DNSRecords }}
+<div>
+ <form action="" method="POST">
+ You will have to publish following DNS records via your domain registrar.
+ <textarea rows="7">{{ .DNSRecords }}</textarea>
+ <label for="domain-registrar">Domain Registrar</label>
+ <select id="domain-registrar" required tabindex="1">
+ <option value="" selected>Select registrar</option>
+ <option value="gandi">Gandi</option>
+ <option value="namecheap">Namecheap</option>
+ </select>
+ <label for="api-token">API Token</label>
+ <input
+ type="text"
+ id="api-token"
+ name="api-token"
+ required
+ autofocus
+ tabindex="2"
+ />
+ <button type="submit" tabindex="3">Update</button>
+ </form>
+</div>
+{{ end }}
+{{ end }}