M static/style.css => static/style.css +83 -2
@@ 1,17 1,98 @@
body {
font-family: sans-serif;
margin: 0;
+ color: #444;
}
-main {
+main, #nav-inner {
padding: 0 5px;
max-width: 800px;
margin: 0 auto;
}
+main {
+ padding-bottom: 20px;
+}
+
+nav {
+ border-bottom: 1px solid #eee;
+}
+nav h1 {
+ margin: 0;
+ padding: 10px 0;
+ font-size: 1.2em;
+}
+nav h1 a {
+ color: inherit;
+ text-decoration: none;
+}
+
+h2 {
+ font-size: 1.2em;
+}
table {
border-collapse: collapse;
}
td, th {
- border: 1px solid black;
+ border: 1px solid rgb(208, 210, 215);
padding: 5px;
}
+
+button {
+ border: 1px solid rgb(208, 210, 215);
+ border-radius: 4px;
+ padding: 6px 12px;
+ margin: 4px 0;
+ color: #444;
+ background-color: transparent;
+ cursor: pointer;
+}
+button:hover {
+ background-color: rgba(0, 0, 0, 0.02);
+}
+button[type="submit"]:not(.btn-regular):first-of-type {
+ background-color: rgb(0, 128, 0);
+ border-color: rgb(0, 128, 0);
+ color: white;
+}
+button[type="submit"]::not(.btn-regular):first-of-type:hover {
+ background-color: rgb(0, 150, 0);
+ border-color: rgb(0, 150, 0);
+}
+
+input[type="text"], input[type="password"], input[type="url"], textarea {
+ border: 1px solid rgb(208, 210, 215);
+ border-radius: 4px;
+ padding: 6px;
+ margin: 4px 0;
+ color: #444;
+}
+input[type="text"]:focus, input[type="password"]:focus, input[type="url"]:focus, textarea:focus {
+ outline: none;
+ border-color: rgb(0, 128, 0);
+}
+
+label {
+ display: block;
+ margin: 15px 0;
+}
+label input[type="text"], label input[type="password"], label input[type="url"] {
+ display: block;
+ width: 100%;
+ max-width: 350px;
+ box-sizing: border-box;
+}
+label:has(input[type="radio"]) {
+ margin: 5px 0;
+}
+label textarea {
+ display: block;
+ width: 100%;
+ resize: vertical;
+}
+
+main.narrow {
+ max-width: 400px;
+}
+main.narrow input {
+ max-width: 100%;
+}
M template/authorize.html => template/authorize.html +1 -1
@@ 1,6 1,6 @@
{{ template "head.html" .Base }}
-<main>
+<main class="narrow">
<h1>{{ .ServerName }}</h1>
M template/client-secret.html => template/client-secret.html +3 -2
@@ 1,15 1,16 @@
{{ template "head.html" .Base }}
+{{ template "nav.html" .Base }}
<main>
-<h1>{{ .ServerName }}</h1>
+<h2>Client credentials</h2>
<p>
<strong>Client ID</strong>: <code>{{ .ClientID }}</code><br>
<strong>Client secret</strong>: <code>{{.ClientSecret}}</code>
</p>
-<a href="/">Back</a>
+<a href="/"><button type="button">Back</button></a>
</main>
M template/index.html => template/index.html +6 -7
@@ 1,14 1,13 @@
{{ template "head.html" .Base }}
+{{ template "nav.html" .Base }}
<main>
-<h1>{{ .ServerName }}</h1>
-
<p>Welcome, {{ .Me.Username }}!</p>
<form method="post">
<a href="/user/{{ .Me.ID }}"><button type="button">Settings</button></a>
- <button type="submit" formaction="/logout">Logout</button>
+ <button type="submit" formaction="/logout" class="btn-regular">Logout</button>
</form>
<h2>Authorized clients</h2>
@@ 53,11 52,11 @@
{{ if .Me.Admin }}
<h2>Registered clients</h2>
- {{ with .Clients }}
- <p>
- <a href="/client/new"><button type="button">Register new client</button></a>
- </p>
+ <p>
+ <a href="/client/new"><button type="button">Register new client</button></a>
+ </p>
+ {{ with .Clients }}
<table>
<tr>
<th>Client ID</th>
M template/login.html => template/login.html +9 -3
@@ 1,12 1,18 @@
{{ template "head.html" .Base }}
-<main>
+<main class="narrow">
<h1>{{ .ServerName }}</h1>
<form method="post" action="">
- Username: <input type="text" name="username" autocomplete="username"><br>
- Password: <input type="password" name="password"><br>
+ <label>
+ Username
+ <input type="text" name="username" autocomplete="username" autofocus>
+ </label>
+ <label>
+ Password
+ <input type="password" name="password">
+ </label>
<button type="submit">Login</button>
</form>
M template/manage-client.html => template/manage-client.html +33 -16
@@ 1,41 1,58 @@
{{ template "head.html" .Base }}
+{{ template "nav.html" .Base }}
<main>
-<h1>{{ .ServerName }}</h1>
+<h2>
+ {{ if .Client.ID }}
+ Update client
+ {{ else }}
+ Create client
+ {{ end }}
+</h2>
<form method="post" action="">
{{ if .Client.ClientID }}
Client ID: <code>{{ .Client.ClientID }}</code><br>
{{ end }}
- Name: <input type="text" name="client_name" value="{{ .Client.ClientName }}"><br>
- Website: <input type="url" name="client_uri" value="{{ .Client.ClientURI }}"><br>
+ <label>
+ Name
+ <input type="text" name="client_name" value="{{ .Client.ClientName }}">
+ </label>
+ <label>
+ Website
+ <input type="url" name="client_uri" value="{{ .Client.ClientURI }}">
+ </label>
- Client type:
{{ if .Client.ID }}
- {{ if .Client.IsPublic }}
- public
- {{ else }}
- confidential
- {{ end }}
- <br>
+ <p>
+ Client type
+ <br>
+ <strong>
+ {{ if .Client.IsPublic }}
+ Public
+ {{ else }}
+ Confidential
+ {{ end }}
+ </strong>
+ </p>
{{ else }}
- <br>
+ Client type
<label>
<input type="radio" name="client_type" value="confidential" checked>
Confidential
</label>
- <br>
<label>
<input type="radio" name="client_type" value="public">
Public
</label>
- <br>
{{ end }}
- Redirect URIs:<br>
- <textarea name="redirect_uris">{{ .Client.RedirectURIs }}</textarea><br>
- <small>The special URI <code>http://localhost</code> matches all loopback interfaces.</small><br>
+ <label>
+ Redirect URIs
+ <textarea name="redirect_uris" wrap="off">{{ .Client.RedirectURIs }}</textarea>
+ <small>The special URI <code>http://localhost</code> matches all loopback interfaces.</small><br>
+ </label>
<button type="submit">
{{ if .Client.ID }}
M template/manage-user.html => template/manage-user.html +17 -4
@@ 1,17 1,30 @@
{{ template "head.html" .Base }}
+{{ template "nav.html" .Base }}
<main>
-<h1>{{ .ServerName }}</h1>
+<h2>
+ {{ if .User.ID }}
+ Update user
+ {{ else }}
+ Create user
+ {{ end }}
+</h2>
<form method="post" action="">
- Username: <input type="text" name="username" value="{{ .User.Username }}" required><br>
- Password: <input type="password" name="password"><br>
+ <label>
+ Username
+ <input type="text" name="username" value="{{ .User.Username }}" required>
+ </label>
+ <label>
+ Password
+ <input type="password" name="password">
+ </label>
{{ if not (eq .Me.ID .User.ID) }}
<label>
<input type="checkbox" name="admin" {{ if .User.Admin }}checked{{ end }}>
Administrator
- </label><br>
+ </label>
{{ end }}
<button type="submit">
A template/nav.html => template/nav.html +5 -0
@@ 0,0 1,5 @@
+<nav>
+ <div id="nav-inner">
+ <h1><a href="/">{{ .ServerName }}</a></h1>
+ </div>
+</nav>