From 7afd7563424987ee96473c21d546dc768d85866a Mon Sep 17 00:00:00 2001
From: Vyrtsev Mikhail <reeywhaar@gmail.com>
Date: Sat, 29 Dec 2018 16:53:07 +0300
Subject: [PATCH] Dev auth layout

---
 provider/dev_provider.go | 125 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 111 insertions(+), 14 deletions(-)
diff --git a/provider/dev_provider.go b/provider/dev_provider.go
index 514a35e9..cca9549e 100644
--- a/provider/dev_provider.go
+++ b/provider/dev_provider.go
@@ -178,22 +178,119 @@ func (d *DevAuthServer) genAvatar(user string) ([]byte, error) {
 
 var devUserForm = `
 <html>
-    <head>
-	<title>Dev User</title>
-	<style>
-		form {
-			margin: 100 auto;
-			width: 300px;
-			padding: 1em;
-			border: 1px solid #CCC;
-		}
-	</style>
-    </head>
+	<head>
+		<title>Dev OAuth</title>
+		<style>
+			body {
+				text-align: center;
+			}
+
+			a {
+				color: hsl(200, 50%, 50%);
+				text-decoration-color: hsla(200, 50%, 50%, 0.5);
+			}
+
+			a:hover {
+				color: hsl(200, 50%, 70%);
+				text-decoration-color: hsla(200, 50%, 70%, 0.5);
+			}
+
+			form {
+				font-family: Helvetica, Arial, sans-serif;
+				margin: 100px auto;
+				display: inline-block;
+				padding: 1em;
+				box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2), 0 0 0.4rem rgba(0, 0, 0, 0.1);
+			}
+
+			.form-header {
+				text-align: center;
+			}
+
+			.form-header h1 {
+				margin: 0;
+			}
+
+			.form-header h1 a:not(:hover) {
+				text-decoration: none;
+			}
+
+			.form-header p {
+				opacity: 0.6;
+				margin-top: 0;
+				margin-bottom: 2rem;
+			}
+
+			.username-label {
+				opacity: 0.6;
+				font-size: 0.8em;
+			}
+
+			.username-input {
+				font-size: inherit;
+				margin: 0;
+				width: 100%;
+				text-align: inherit;
+			}
+
+			.form-submit {
+				border: none;
+				background: hsl(200, 50%, 50%);
+				color: white;
+				font: inherit;
+				padding: 0.4em 0.8em 0.3em 0.8em;
+				border-radius: 0.2em;
+				width: 100%;
+			}
+
+			.form-submit:hover,
+			.form-submit:focus {
+				background-color: hsl(200, 50%, 70%);
+			}
+
+			.form-submit:active {
+				background-color: hsl(200, 80%, 70%);
+			}
+
+			.username-label,
+			.username-input,
+			.form-submit {
+				display: block;
+				margin-bottom: 0.4rem;
+			}
+
+			.notice {
+				margin: 0;
+				margin-top: 2rem;
+				font-size: 0.8em;
+				opacity: 0.6;
+			}
+		</style>
+	</head>
 	<body>
 		<form action="/login/oauth/authorize?%s" method="post">
-			username: <input type="text" name="username" value="dev_user">
-			<input type="submit" value="Login">
+			<header class="form-header">
+				<h1><a href="https://github.com/go-pkgz/auth">GO-PKGZ/AUTH</a></h1>
+				<p>Dev Provider</p>
+			</header>
+			<label>
+				<span class="username-label">Username</span>
+				<input
+					class="username-input"
+					type="text"
+					name="username"
+					value="dev_user"
+					autofocus
+				/>
+			</label>
+			<input type="submit" class="form-submit" value="Authorize" />
+			<p class="notice">Not for production use</p>
 		</form>
-    </body>
+	</body>
+	<script>
+		var input = document.querySelector(".username-input");
+		input.focus();
+		input.setSelectionRange(0, input.value.length)
+	</script>
 </html>
 `
