feat(web/pwcrypt): little web application for creating LDAP accounts r/6310

This generates the format expected in `//ops/users`.

Note that as of this commit I have not actually tested whether the
generated hashes work, as OpenLDAP doesn't ship with a tool to do that
and I have to actually use it, spin up an LDAP server and bind to it.

The plan is to host this at something like `tvl.fyi/signup`. There is
no plan to automatically submit the generated stuff to the repo,
people still have to email us (and display their street cred).

Note that currently the generated hashes have slightly different
parameters than what //tools/hash-password creates. This might not
matter, but it's probably still a good idea to try and explicitly set
Argon2 parameters.

Change-Id: Ic162afbf7fb0e05ca6efc131b3bb0a4187e28029
Reviewed-on: https://cl.tvl.fyi/c/depot/+/8776
Reviewed-by: sterni <sternenseemann@systemli.org>
Tested-by: BuildkiteCI
Reviewed-by: flokli <flokli@flokli.de>

1 files changed, 48 insertions, 0 deletions

diff --git a/web/pwcrypt/src/main.html b/web/pwcrypt/src/main.html
new file mode 100644
index 000000000000..b19cbd379b70
--- /dev/null
+++ b/web/pwcrypt/src/main.html
@@ -0,0 +1,48 @@
+html!{
+<div class="container">
+  <h1>{"//web/pwcrypt"}</h1>
+  <p>{"You can use this page to create your hashed credentials for a TVL account. Enter your desired username and password below, and send us the output you receive in order for us to create your account."}</p>
+  <p>
+    {"Detailed documentation about the registration process is "}
+    <a href="https://code.tvl.fyi/about/docs/REVIEWS.md#registration">
+      {"available here"}
+    </a>
+    {"."}
+  </p>
+  <p>{"All of this happens in your browser: Your password does not leave this site!"}</p>
+
+  <form>
+    <fieldset>
+      <legend>{"Credentials:"}</legend>
+
+      <div class="form-group">
+        <label for="username">{"Username:"}</label>
+        <input id="username" name="username" type="text"
+               oninput={link.callback(|event| input_to_message(event, Msg::SetUsername))} />
+      </div>
+
+      <div class="form-group">
+        <label for="email">{"Email:"}</label>
+        <input id="email" name="email" type="email"
+               oninput={link.callback(|event| input_to_message(event, Msg::SetEmail))} />
+      </div>
+
+      <div class="form-group">
+        <label for="password">{"Password:"}</label>
+        <input id="password" name="password" type="password"
+               oninput={link.callback(|event| input_to_message(event, Msg::SetPassword))} />
+      </div>
+
+      if let Some(missing) = self.whats_missing() {
+        <p>{"Please fill in "}{missing}{"."}</p>
+      } else {
+        <div class="form-group">
+          <button class="btn btn-default" type="button"
+                  onclick={link.callback(|_| Msg::UpdateCredentials)}>{"Prepare credentials"}</button>
+        </div>
+      }
+    </fieldset>
+  </form>
+  {self.display_credentials()}
+</div>
+}