auth-ui: rewrite ui
Change-Id: I6f00867015ec77aa7e336e89da4dc1b081e330c6
diff --git a/core/auth/ui/templates/register.html b/core/auth/ui/templates/register.html
index 626dc52..54657e7 100644
--- a/core/auth/ui/templates/register.html
+++ b/core/auth/ui/templates/register.html
@@ -1,16 +1,43 @@
{{ define "title" }}dodo: create account{{ end }}
{{ define "main" }}
-<form action="" method="POST">
- <input type="text" name="username" placeholder="Username" autofocus required />
- <input type="password" name="password" placeholder="Password" required />
- <input type="hidden" name="csrf_token" value="{{ . }}" />
- <button type="submit">Create Account</button>
-</form>
-<nav>
- <ul>
- <li>
- <a href="/login">Sign In</a>
- </li>
- </ul>
-</nav>
+<div class="terminal">
+ <div class="logo" aria-hidden="true">
+ <span>do</span><span>do:</span>
+ </div>
+ <h1>Create account</h1>
+ <form id="register-form" action="{{ .FormAction }}" method="POST">
+ {{ if or .GeneralError .UsernameErrors .PasswordErrors }}
+ <div role="alert">
+ {{ if .GeneralError }}<p>{{ .GeneralError }}</p>{{ end }}
+ {{ if or .UsernameErrors .PasswordErrors }}
+ <p>Please correct the following errors:</p>
+ <ul>
+ {{ range .UsernameErrors }}<li>{{ .Message }}</li>{{ end }}
+ {{ range .PasswordErrors }}<li>{{ .Message }}</li>{{ end }}
+ </ul>
+ {{ end }}
+ </div>
+ {{ end }}
+
+ <label for="register-username">Username</label>
+ <input id="register-username" type="text" name="username" value="{{ .Username }}" autocomplete="username" autocapitalize="none" spellcheck="false" required{{ if .UsernameErrors }} aria-invalid="true" aria-describedby="{{ range $index, $_ := .UsernameErrors }}{{ if $index }} {{ end }}register-username-error-{{ $index }}{{ end }}"{{ end }} />
+ {{ range $index, $error := .UsernameErrors }}
+ <p id="register-username-error-{{ $index }}" class="error-message">{{ $error.Message }}</p>
+ {{ end }}
+
+ <label for="register-password">Password</label>
+ <input id="register-password" type="password" name="password" autocomplete="new-password" required aria-describedby="register-password-policy register-password-symbols{{ range $index, $_ := .PasswordErrors }} register-password-error-{{ $index }}{{ end }}"{{ if .PasswordErrors }} aria-invalid="true"{{ end }} />
+ <p id="register-password-policy">Use at least 20 bytes, including an uppercase letter, lowercase letter, number, and an ASCII symbol or space.</p>
+ <p id="register-password-symbols">Accepted ASCII symbols: <code>!"#$%&'()*+,-./:;<=>?@[\]^_{|}~</code>. ASCII space is also accepted.</p>
+ {{ range $index, $error := .PasswordErrors }}
+ <p id="register-password-error-{{ $index }}" class="error-message">{{ $error.Message }}</p>
+ {{ end }}
+
+ <input id="register-csrf-token" type="hidden" name="csrf_token" value="{{ .CSRFToken }}" />
+ <button id="register-submit" type="submit">Create account</button>
+ </form>
+ <nav aria-label="Sign in">
+ <a href="/login">Sign in</a>
+ </nav>
+</div>
{{ end }}