From 75043727d25a0e6bdf21fd351b0f6b620a55a299 Mon Sep 17 00:00:00 2001
From: Simon Ser <contact@emersion.fr>
Date: Tue, 20 Feb 2024 15:06:13 +0100
Subject: [PATCH] Add basic stylesheet

---
 static/style.css            | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 template/authorize.html     |  2 +-
 template/client-secret.html |  5 +++--
 template/index.html         | 13 ++++++-------
 template/login.html         | 12 +++++++++---
 template/manage-client.html | 49 +++++++++++++++++++++++++++++++++----------------
 template/manage-user.html   | 21 +++++++++++++++++----
 template/nav.html           |  5 +++++

diff --git a/static/style.css b/static/style.css
index e26eb85883fc8813d01c5e1de60f86c362e0a955..11ee1cd1c404545b588ae3df225819645768a854 100644
--- a/static/style.css
+++ b/static/style.css
@@ -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%;
+}
diff --git a/template/authorize.html b/template/authorize.html
index 7c0f525dacb582e2843d317f2acaba9e5a59fba9..3146dc9877f1e2e44a5b2e59e1fa8458d5cc33f0 100644
--- a/template/authorize.html
+++ b/template/authorize.html
@@ -1,6 +1,6 @@
 {{ template "head.html" .Base }}
 
-<main>
+<main class="narrow">
 
 <h1>{{ .ServerName }}</h1>
 
diff --git a/template/client-secret.html b/template/client-secret.html
index c0f79bbb903b219cdad1f8c0b1bb5cf7334ba536..834be520449dd059a28e4ebbfd6b1b8afb44e8bc 100644
--- a/template/client-secret.html
+++ b/template/client-secret.html
@@ -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>
 
diff --git a/template/index.html b/template/index.html
index 1b27564b32a0df2cff9ecd5d946b75fd44aca382..ddd00bbec5810994b5910c58f2bf17a9e4948d63 100644
--- a/template/index.html
+++ b/template/index.html
@@ -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>
diff --git a/template/login.html b/template/login.html
index ab88c5ca0b9086d49fd8a26519a07e4ca398e7fa..babcf43987c51756d117469441d3b5e712e5e911 100644
--- a/template/login.html
+++ b/template/login.html
@@ -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>
 
diff --git a/template/manage-client.html b/template/manage-client.html
index 0a78e7620775468d6e3c498e49646a41dc2b8ad3..39874e21683daf50b5cb5f033956318db0f08a06 100644
--- a/template/manage-client.html
+++ b/template/manage-client.html
@@ -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 }}
diff --git a/template/manage-user.html b/template/manage-user.html
index 83954eec0efe7d044edce76ec228f60ab8955e59..23d089f16c39542673a3b4d7f96b1cbc4387ed00 100644
--- a/template/manage-user.html
+++ b/template/manage-user.html
@@ -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">
diff --git a/template/nav.html b/template/nav.html
new file mode 100644
index 0000000000000000000000000000000000000000..049865c6be45372d8f328c50e9571b37d7724cc5
--- /dev/null
+++ b/template/nav.html
@@ -0,0 +1,5 @@
+<nav>
+	<div id="nav-inner">
+		<h1><a href="/">{{ .ServerName }}</a></h1>
+	</div>
+</nav>

-- 
2.48.1