commit 9b9921fd11d264285c3bfebeb621e4a084d5181f
parent 8d8326c6e27722ac9a623a0c58b0d7b0fbc33ea4
Author: Jacob R. Edwards <jacob@jacobedwards.org>
Date: Fri, 30 Aug 2024 18:17:15 -0700
Update the registration page
Made it a bit prettier adding a background image for some contrast
and styling the form a bit differently. Also added email input
field.
Diffstat:
4 files changed, 153 insertions(+), 36 deletions(-)
diff --git a/files/css/main.css b/files/css/main.css
@@ -1,9 +1,15 @@
:root {
--main-color: #8ACFFF;
+ --reverse-color: white;
+ --off-white-color: #EFEFEF;
+ --off-white-border-color: #CCC;
+ --border-color: var(--off-white-border-color);
}
body {
margin-top: 2.5em !important;
+ margin: 2em;
+ font-size: large;
}
#bar {
@@ -48,15 +54,21 @@ body {
aside {
float: right;
+ margin: .2em;
+}
+
+.credentials > aside {
+ float: none;
+ font-size: smaller;
+ margin-bottom: 2em;
}
.icon {
- image-rendering: crisp-edges;
border: thin solid rgba(0, 0, 0, .2);
+ width: 1.5em;
}
input[type="image"].icon {
- width: 2em;
margin: .15rem;
padding: .15rem;
border-radius: .4em;
@@ -100,3 +112,48 @@ span.warning > p {
width: 1rem;
vertical-align: middle;
}
+
+input:not([type]), input[type="password"], input[type="email"] {
+ background-color: #F9F9F9;
+ border: thin solid #CCC;
+ border-radius: .2em;
+ padding: .2em;
+}
+
+button, input[type="submit"] {
+ font-size: large;
+ background-color: #DDD;
+ border: .15em outset var(--off-white-border-color);
+ border-radius: .2em;
+}
+
+button.big, input[type="submit"].big {
+ padding: .25em;
+}
+
+button:active, input[type="submit"]:active {
+ border-style: inset;
+}
+
+form.credentials {
+ width: fit-content;
+ max-width: 60ch;
+ padding: 4em;
+ border-radius: .2em;
+}
+
+form.credentials > label, form.credentials > input {
+ display: block;
+}
+
+form.credentials > input {
+ margin-bottom: 2em;
+}
+
+label.break {
+ display: block;
+}
+
+.small {
+ font-size: smaller;
+}
diff --git a/files/register/index.html b/files/register/index.html
@@ -1,21 +1,45 @@
<!DOCTYPE HTML>
<head>
- <title>Spaceplanner - Register</title>
+ <title>Spaceplanner Signup</title>
<link rel="stylesheet" type="text/css" href="/css/main.css">
- <script src="./main.js"></script>
+ <link rel="stylesheet" type="text/css" href="./main.css">
+ <script type="module" src="./main.js"></script>
</head>
<html>
- <h1>Create New Account</h1>
+ <body>
+ <div class="background" id="background-image"></div>
+ <div class="background" id="background-cover"></div>
- <aside>Already have an account? <a href="/login">login</a> instead.</aside>
+ <form id="register" class="credentials">
+ <noscript>
+ <p class="error">Unfortunately this application requires JavaScript, you'll need to enable it to continue.</p>
+ </noscript>
- <form id="register">
- <label for="username">Username:</label>
- <input id="username" autocomplete="username" name="username"/>
+ <h1>Signup</h1>
- <label for="password">Password:</label>
- <input id="password" autocomplete="new-password" type="password" name="password"/>
+ <aside>Already have an account? <a href="/login">Login</a> instead.</aside>
- <input type="submit" value="Create User"/>
- </form>
+ <label for="email">Email:</label>
+ <input type="email" id="email" autocomplete="email" name="email" title="Email address for account communications" required/>
+
+ <aside id="opt_out">
+
+ <p>An email is required to alert you to
+ certain conditions about your account. If
+ you don't want to receive emails about new
+ features or products you may opt-out
+ below:</p>
+ <label for="email-strict">Opt-out:</label>
+ <input id="email-strict" type="checkbox" name="email-required-only" value="strict" title="Check to opt-out of unnecessary communications">
+ </aside>
+
+ <label for="username">Username:</label>
+ <input id="username" autocomplete="username" name="username" title="Username for account" required/>
+
+ <label for="password">Password:</label>
+ <input type="password" id="password" autocomplete="new-password" name="password" title="Password for account" required/>
+
+ <input type="submit" value="Signup"/>
+ </form>
+ </body>
</html>
diff --git a/files/register/main.css b/files/register/main.css
@@ -0,0 +1,35 @@
+.background {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+}
+
+#background-image {
+ background: url("/images/exhibit-a.svg");
+ background-size: cover;
+ filter: blur(1px);
+ z-index: 1;
+}
+
+#background-cover {
+ background-color: rgba(0,0,0,.2);
+ z-index: 2;
+}
+
+#register {
+ position: relative;
+ margin: 2em;
+ z-index: 100;
+}
+
+.credentials {
+ background-color: white;
+}
+
+#opt-out {
+ margin-bottom: 2em;
+ margin-left: 1em;
+ font-size: smaller;
+}
diff --git a/files/register/main.js b/files/register/main.js
@@ -1,41 +1,42 @@
import * as api from "/lib/api.js"
import * as etc from "/lib/etc.js"
-let default_page = "/floorplans"
-
-function handle_creation(resp) {
- window.location.href = "/login"
-}
-
-function register(username, password, err_callback) {
- api.fetch("POST", "users", { "username": username, "password": password })
- .then(handle_creation)
- .catch(err_callback)
- return false;
-}
-
function init() {
if (api.authorized_duration() > 0) {
// Maybe don't do this?
- window.location.href = default_page
+ window.location.href = "/floorplans"
}
+ let email_input = document.getElementById("email")
+ let email_strict_input = document.getElementById("email-strict")
let username_input = document.getElementById("username")
let password_input = document.getElementById("password")
- if (!username_input || !password_input) {
- throw new Error("unable to select username or password")
+ if (!email_input || !email_strict_input || !username_input || !password_input) {
+ throw new Error("Unable to select email, username and password fields")
}
let form = document.getElementById("register")
if (!form) {
- throw new Error("unable to get register form")
+ throw new Error("Unable to select registration form")
}
- form.onsubmit = function () {
- return register(
- username_input.value, password_input.value,
- function (error) { return etc.error(error, form) }
- );
- };
+ form.addEventListener("submit", function(event) {
+ event.preventDefault()
+ api.register(username_input.value, password_input.value, email_input.value,
+ { email_policy: email_strict_input.value })
+ .then(function() {
+ api.login(username_input.value, password_input.value)
+ .then(function() {
+ window.location.href = "/floorplans"
+ })
+ .catch(function(err) {
+ console.error("Created user but was unable to login")
+ window.location.href = "/login"
+ })
+ })
+ .catch(function (error) {
+ return etc.error(error, form)
+ })
+ })
}
window.onload = etc.handle_wrap(init)
