commit 426b7dadaee8f192ee93c859d66263e7dcf8ca3b
parent 61813b2487bbc8f7dc3e65c132350dd2934ac6e9
Author: Jacob R. Edwards <jacob@jacobedwards.org>
Date: Sun, 6 Oct 2024 21:00:44 -0700
Update register page
- Use ui.passwordInput and ui.usernameInput for validated credentials
- Use grey background instead of background image (I may like the
image better and bring it back in the future, but it was broken
when the form was bigger than the screen)
- Add terms and privacy policy agreement checkbox (dead links at the moment)
Diffstat:
4 files changed, 17 insertions(+), 38 deletions(-)
diff --git a/files/images/exhibit-a.svg b/files/images/exhibit-a.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-9272.876518380597 -10418.948122693375 64908.309041451845 28327.155040718673"><defs><pattern x="0" y="0" width="96" height="96" patternUnits="userSpaceOnUse" id="grid_inch_pattern"><path d="M 96 0 L 0 0 0 96" fill="none" stroke-width="1.92" stroke="grey"></path></pattern><pattern x="0" y="0" width="1152" height="1152" patternUnits="userSpaceOnUse" id="grid_foot_pattern"><rect width="1152" height="1152" fill="url(#grid_inch_pattern)"></rect><path d="M 1152 0 L 0 0 0 1152" fill="none" stroke-width="23.04" stroke="grey"></path></pattern><pattern x="0" y="0" width="37.79527559055118" height="37.79527559055118" patternUnits="userSpaceOnUse" id="grid_centimeter_pattern"><path d="M 37.79527559055118 0 L 0 0 0 37.79527559055118" fill="none" stroke-width="0.7559055118110236" stroke="grey"></path></pattern><pattern x="0" y="0" width="3779.5275590551178" height="3779.5275590551178" patternUnits="userSpaceOnUse" id="grid_meter_pattern"><rect width="3779.5275590551178" height="3779.5275590551178" fill="url(#grid_centimeter_pattern)"></rect><path d="M 3779.5275590551178 0 L 0 0 0 3779.5275590551178" fill="none" stroke-width="75.59055118110236" stroke="grey"></path></pattern></defs><rect width="64908.309041451845" height="28327.155040718673" id="grid" fill="url(#grid_foot_pattern)" x="-9272.876518380597" y="-10418.948122693375"></rect><g id="bottom"></g><g id="floorplan"><g id="pointmaps"><line x1="23825" y1="15020" x2="23825" y2="-38" stroke-width="400" stroke="black" id="pointmaps_1811" class="wall" data-type="wall"></line><line x1="0" y1="0" x2="12803" y2="0" stroke-width="400" stroke="black" id="pointmaps_1812" class="wall" data-type="wall"></line><line x1="12803" y1="0" x2="12803" y2="-2208" stroke-width="400" stroke="black" id="pointmaps_1813" class="wall" data-type="wall"></line><line x1="0" y1="0" x2="0" y2="-12599" stroke-width="400" stroke="black" id="pointmaps_1814" class="wall" data-type="wall"></line><line x1="0" y1="-12599" x2="12672" y2="-12599" stroke-width="400" stroke="black" id="pointmaps_1815" class="wall" data-type="wall"></line><line x1="12672" y1="-12599" x2="12672" y2="-5788" stroke-width="400" stroke="black" id="pointmaps_1816" class="wall" data-type="wall"></line><line x1="0" y1="15020" x2="23825" y2="15020" stroke-width="400" stroke="black" id="pointmaps_1817" class="wall" data-type="wall"></line><line x1="23825" y1="-38" x2="18624" y2="-38" stroke-width="400" stroke="black" id="pointmaps_1818" class="wall" data-type="wall"></line><line x1="12803" y1="0" x2="14976" y2="0" stroke-width="400" stroke="black" id="pointmaps_1819" class="wall" data-type="wall"></line><line x1="0" y1="0" x2="0" y2="15020" stroke-width="400" stroke="black" id="pointmaps_1820" class="wall" data-type="wall"></line></g><g id="points"><circle r="250" cx="12672" cy="-12599" id="points_1907" class="point"></circle><circle r="250" cx="0" cy="0" id="points_1908" class="point"></circle><circle r="250" cx="14976" cy="0" id="points_1909" class="point"></circle><circle r="250" cx="0" cy="15020" id="points_1910" class="point"></circle><circle r="250" cx="23825" cy="15020" id="points_1911" class="point"></circle><circle r="250" cx="23825" cy="-38" id="points_1912" class="point"></circle><circle r="250" cx="18624" cy="-38" id="points_1913" class="point"></circle><circle r="250" cx="0" cy="-12599" id="points_1914" class="point"></circle><circle r="250" cx="12803" cy="0" id="points_1915" class="point"></circle><circle r="250" cx="12803" cy="-2208" id="points_1916" class="point last_selected"></circle><circle r="250" cx="12672" cy="-5788" id="points_1917" class="point selected"></circle></g></g><g id="top"></g></svg>
diff --git a/files/register/index.html b/files/register/index.html
@@ -4,13 +4,11 @@
<meta name="viewport" content="width=device-width">
<title>Spaceplanner Signup</title>
<link rel="stylesheet" type="text/css" href="/css/main.css">
+ <link rel="stylesheet" type="text/css" href="/css/creds.css">
<link rel="stylesheet" type="text/css" href="./main.css">
<script type="module" src="./main.js"></script>
</head>
<body>
- <div class="background" id="background-image"></div>
- <div class="background" id="background-cover"></div>
-
<form id="register" class="credentials">
<h1>Signup</h1>
@@ -24,7 +22,6 @@
<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
@@ -40,6 +37,13 @@
<label for="password">Password:</label>
<input type="password" id="password" autocomplete="new-password" name="password" title="Password for account" required/>
+ <p><small><input type="checkbox"
+ required></input>By checking this box
+ you agree that you have read and accept the
+ <a href="/legal/terms">terms</a> and <a
+ href="/legal/privacy-policy">privacy
+ policy</a>.</small></p>
+
<input type="submit" value="Signup"/>
</form>
</body>
diff --git a/files/register/main.css b/files/register/main.css
@@ -1,33 +1,3 @@
-.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;
diff --git a/files/register/main.js b/files/register/main.js
@@ -1,5 +1,6 @@
import * as api from "/lib/api.js"
import * as etc from "/lib/etc.js"
+import * as ui from "/lib/ui.js"
function init() {
if (api.authorized()) {
@@ -9,8 +10,13 @@ function init() {
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")
+
+ let username_input = ui.usernameInput()
+ document.getElementById("username").replaceWith(username_input)
+
+ let password_input = ui.passwordInput({ new: true })
+ document.getElementById("password").replaceWith(password_input)
+
if (!email_input || !email_strict_input || !username_input || !password_input) {
throw new Error("Unable to select email, username and password fields")
}
@@ -22,7 +28,7 @@ function init() {
form.addEventListener("submit", function(event) {
event.preventDefault()
api.register(username_input.value, password_input.value, email_input.value,
- { email_policy: email_strict_input.value })
+ { email_policy: email_strict_input.checked })
.then(function() {
api.login(username_input.value, password_input.value)
.then(function() {
