auth-ui: rewrite ui
Change-Id: I6f00867015ec77aa7e336e89da4dc1b081e330c6
diff --git a/core/auth/ui/templates/base.html b/core/auth/ui/templates/base.html
index 624f908..37326ec 100644
--- a/core/auth/ui/templates/base.html
+++ b/core/auth/ui/templates/base.html
@@ -1,16 +1,15 @@
<!DOCTYPE html>
-<html lang="en" data-theme="light">
+<html lang="en">
<head>
- <link rel="stylesheet" href="/static/pico.2.0.6.min.css">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css">
- <link rel="stylesheet" href="/static/main.css?v=0.0.2">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{ block "title" . }}Title{{ end }}</title>
+ <link rel="stylesheet" href="/static/base.css?v=0.0.1" />
+ <link rel="stylesheet" href="/static/main.css?v=0.0.3" />
</head>
-<body>
- <main class="container">
- {{ block "main" . }}{{ end }}
- </main>
-</body>
+ <body>
+ <main class="container">
+ {{ block "main" . }}{{ end }}
+ </main>
+ </body>
</html>
diff --git a/core/auth/ui/templates/change-password-success.html b/core/auth/ui/templates/change-password-success.html
index 61c8e74..eb784ef 100644
--- a/core/auth/ui/templates/change-password-success.html
+++ b/core/auth/ui/templates/change-password-success.html
@@ -1,6 +1,8 @@
{{ define "title" }}dodo: password changed{{ end }}
{{ define "main" }}
-<div>
- <p>Password changed successfully.</p>
+<div class="terminal">
+ <h1>Password changed</h1>
+ <p role="status">Password changed successfully.</p>
+ <a href="/">Back to account</a>
</div>
{{ end }}
diff --git a/core/auth/ui/templates/change-password.html b/core/auth/ui/templates/change-password.html
index ca5ea0b..ff9b7a5 100644
--- a/core/auth/ui/templates/change-password.html
+++ b/core/auth/ui/templates/change-password.html
@@ -1,25 +1,37 @@
{{ define "title" }}dodo: change password{{ end }}
{{ define "main" }}
-<div class="form-container">
- <div class="logo">
+<div class="terminal">
+ <div class="logo" aria-hidden="true">
<span>do</span><span>do:</span>
</div>
- <form action="{{ .FormAction }}" method="POST">
- <label>
- new password
- <input type="password" name="password" aria-label="Password" value="{{ .Password }}" aria-invalid="{{ if .PasswordErrors }}true{{ else }}undefined{{ end }}" required/>
- </label>
- {{ if .PasswordErrors }}
- {{ range .PasswordErrors }}
- <small class="error-message" aria-live="assertive">
- {{ .Message }}
- </small>
+ <h1>Change password</h1>
+ <p>Signed in as <strong>{{ .Username }}</strong>.</p>
+ <form id="change-password-form" action="{{ .FormAction }}" method="POST">
+ {{ if or .GeneralError .PasswordErrors }}
+ <div role="alert">
+ {{ if .GeneralError }}<p>{{ .GeneralError }}</p>{{ end }}
+ {{ if .PasswordErrors }}
+ <p>Please correct the following errors:</p>
+ <ul>
+ {{ range .PasswordErrors }}<li>{{ .Message }}</li>{{ end }}
+ </ul>
+ {{ end }}
+ </div>
{{ end }}
+
+ <label for="change-password">New password</label>
+ <input id="change-password" type="password" name="password" autocomplete="new-password" required aria-describedby="change-password-policy change-password-symbols{{ range $index, $_ := .PasswordErrors }} change-password-error-{{ $index }}{{ end }}"{{ if .PasswordErrors }} aria-invalid="true"{{ end }} />
+ <p id="change-password-policy">Use at least 20 bytes, including an uppercase letter, lowercase letter, number, and an ASCII symbol or space.</p>
+ <p id="change-password-symbols">Accepted ASCII symbols: <code>!"#$%&'()*+,-./:;<=>?@[\]^_{|}~</code>. ASCII space is also accepted.</p>
+ {{ range $index, $error := .PasswordErrors }}
+ <p id="change-password-error-{{ $index }}" class="error-message">{{ $error.Message }}</p>
{{ end }}
- <button type="submit">change password</button>
- <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}" />
- <input type="hidden" name="method" value="password" />
- <input type="hidden" name="username" value="{{ .Username }}" />
+
+ <input id="change-password-csrf-token" type="hidden" name="csrf_token" value="{{ .CSRFToken }}" />
+ <button id="change-password-submit" type="submit">Change password</button>
</form>
+ <nav aria-label="Account">
+ <a href="/">Back to account</a>
+ </nav>
</div>
{{ end }}
diff --git a/core/auth/ui/templates/consent.html b/core/auth/ui/templates/consent.html
deleted file mode 100644
index 703434b..0000000
--- a/core/auth/ui/templates/consent.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{{ define "title" }}dodo: consent{{ end }}
-{{ define "main" }}
-<form action="" method="POST">
- {{ range . }}
- <label for="{{ . }}">
- <input type="checkbox" role="switch" id="{{ . }}" name="scope" value="{{ . }}" checked />{{ . }}
- </label>
- {{ end }}
- <button type="submit" name="allow">Allow</button>
- <button type="submit" name="reject" class="secondary outline">Reject</button>
-</form>
-<nav>
- <ul>
- <li>
- <a href="/logout">Log Out</a>
- </li>
- </ul>
-</nav>
-{{ end }}
diff --git a/core/auth/ui/templates/error.html b/core/auth/ui/templates/error.html
new file mode 100644
index 0000000..0975bda
--- /dev/null
+++ b/core/auth/ui/templates/error.html
@@ -0,0 +1,8 @@
+{{ define "title" }}dodo: {{ .Title }}{{ end }}
+{{ define "main" }}
+<div class="terminal">
+ <h1>{{ .Title }}</h1>
+ <p>{{ .Message }}</p>
+ <a href="{{ .RecoveryHref }}">{{ .RecoveryText }}</a>
+</div>
+{{ end }}
diff --git a/core/auth/ui/templates/login.html b/core/auth/ui/templates/login.html
index 0d961b5..a79b400 100644
--- a/core/auth/ui/templates/login.html
+++ b/core/auth/ui/templates/login.html
@@ -1,29 +1,27 @@
{{ define "title" }}dodo: sign in{{ end }}
{{ define "main" }}
-<div>
- <div class="logo">
+<div class="terminal">
+ <div class="logo" aria-hidden="true">
<span>do</span><span>do:</span>
</div>
- <form action="" method="POST">
- <label>
- username
- <input type="text" name="username" autofocus required />
- </label>
- <label>
- password
- <input type="password" name="password" required />
- </label>
- <input type="hidden" name="csrf_token" value="{{ .csrfToken }}" />
- <button class="subbmit-button" type="submit">login</button>
+ <h1>Sign in</h1>
+ <form id="login-form" action="{{ .FormAction }}" method="POST">
+ {{ if .GeneralNotice }}
+ <div role="alert">
+ <p>{{ .GeneralNotice }}</p>
+ </div>
+ {{ end }}
+ <label for="login-username">Username</label>
+ <input id="login-username" type="text" name="username" autocomplete="username" autocapitalize="none" spellcheck="false" required />
+ <label for="login-password">Password</label>
+ <input id="login-password" type="password" name="password" autocomplete="current-password" required />
+ <input id="login-csrf-token" type="hidden" name="csrf_token" value="{{ .CSRFToken }}" />
+ <button id="login-submit" class="subbmit-button" type="submit">Sign in</button>
</form>
- {{- if .enableRegistration -}}
- <nav>
- <ul>
- <li>
- <a href="/register">Create Account</a>
- </li>
- </ul>
+ {{- if .EnableRegistration }}
+ <nav aria-label="Registration">
+ <a href="/register">Create account</a>
</nav>
+ {{- end }}
</div>
-{{- end -}}
{{ end }}
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 }}
diff --git a/core/auth/ui/templates/whoami.html b/core/auth/ui/templates/whoami.html
index 01be060..d67d715 100644
--- a/core/auth/ui/templates/whoami.html
+++ b/core/auth/ui/templates/whoami.html
@@ -1,6 +1,13 @@
-{{ define "title" }}dodo: who am i{{ end }}
+{{ define "title" }}dodo: account{{ end }}
{{ define "main" }}
-Hello {{.}}!
-<a href="/settings" role="button">change password</a>
-<a href="/logout" role="button">logout</a>
+<div class="terminal">
+ <h1>Account</h1>
+ <p>Hello <strong>{{ .Username }}</strong>!</p>
+ <nav aria-label="Account actions">
+ <ul>
+ <li><a href="/settings">Change password</a></li>
+ <li><a href="/logout">Log out</a></li>
+ </ul>
+ </nav>
+</div>
{{ end }}