Improve signup process

This commit is contained in:
Fred Boniface 2023-05-24 00:40:46 +01:00
parent f0081aa301
commit 08a72d8c0c
5 changed files with 104 additions and 5 deletions

19
js/registered.js Normal file
View File

@ -0,0 +1,19 @@
versionDisplay()
init()
async function init(){
let result = await getQuery('res')
if (result == 'success') {
document.getElementById('reg_success').style = 'display:block'
} else if (result =='fail') {
let reason = await getQuery('rsn')
document.getElementById('reg_fail').style = 'display:block'
if (reason != 'false') {
document.getElementById('fail_msg').style = 'display:block'
document.getElementById('fail_reason').textContent = reason
}
} else {
document.getElementById('other').style = 'display:block'
}
hideLoading()
}

View File

@ -88,20 +88,25 @@ async function register() { // Registers a device by sending POST request to API
redirect: 'follow', redirect: 'follow',
body: JSON.stringify({email: email}) body: JSON.stringify({email: email})
}) })
let regState, regMsg
if (res.status == 201) { if (res.status == 201) {
showDone() regState = 'success'
hideLoading() regMsg = 'ok'
return return
} else if (res.status == 403) { } else if (res.status == 403) {
log(`settings.register: Error: Fetch returned: ${res.body['errorCode']}`, 'err') log(`settings.register: Error: Fetch returned: ${res.body['errorCode']}`, 'err')
document.getElementsByName('eml')[0].placeholder = 'Not Authorised' document.getElementsByName('eml')[0].placeholder = 'Not Authorised'
regState = 'fail'
regMsg = 'Unauthorised email domain'
} }
window.location.assign(`./registered?res=${regState}&msg=${regMsg}`)
} else { } else {
logout() logout()
} }
} }
async function logout() { // Simply removed the UUID from localstorage async function logout() { // Simply removed the UUID from localstorage
// A request to delete the UUID should be sent to the server.
localStorage.removeItem('uuid') localStorage.removeItem('uuid')
location.reload() location.reload()
return return

73
registered.html Normal file
View File

@ -0,0 +1,73 @@
<!-- CONTAINS A STYLE BLOCK IN HEAD -->
<!-- CONTAINS A SCRIPT BLOCK IN HEAD -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="OwlBoard - Live train departures, PIS codes & reference data for traincrew.">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="OwlBoard">
<meta name="author" content="Frederick Boniface">
<meta name="theme-color" content="#00b7b7">
<link rel="apple-touch-icon" href="./images/app-icons/any/apple-192.png">
<link rel="stylesheet" href="./styles/main.css">
<link rel="icon" type="image/svg+xml" href="./images/icon.svg">
<link rel="manifest" type="application/json" href="./manifest.json">
<script src="./js/lib.main.js" defer></script>
<script src="./js/registered.js" defer></script>
<title>OwlBoard</title>
<style>
#reg_success{display:none}
#reg_fail{display:none}
#fail_msg{display:none}
#other{display:none}
</style>
</head>
<body>
<!-- Loading Box -->
<div id="loading">
<div class="spinner">
</div>
<p id="loading_desc">Loading</p>
</div>
<!-- Main Content Begins -->
<picture>
<source srcset="./images/logo/wide_logo.svg" type="image/svg+xml">
<source media="(max-height: 739px)" srcset="./images/logo/logo-full-200.png" type="image/png">
<source srcset="./images/logo/logo-full-250.png" type="image/png">
<img class="titleimg" src="./images/logo/logo-full-250.png" alt="OwlBoard Logo">
</picture>
<br>
<div id="reg_success">
<h2>Check your emails</h2>
<p>An email containing a magic link has been sent</p>
<p>Click the link on the device that you want to use OwlBoard on - don't
worry, you can use the same address to sign up on another device</p>
<p>Do note that you will only be signed in in the browser you open the link with
and can only be used once</p>
<p>Do check your spam or junk folder if you don't see the email in the
next ten minutes.</p>
<p>For your privacy, only the 'host' part of your email address has been stored for example "@owlboard.info"</p>
</div>
<div id="reg_fail">
<h2>We couldn't sign you up</h2>
<p>Sorry, we couldn't sign you up at the moment.</p>
<p id="fail_msg">The error message is: <span id="fail_reason"></span></p>
<p>Please try again later, if you still can't sign up then check that
you are using a valid railway email address. You can <a href="./issue.html">
submit an issue</a> if you think there is something wrong on our end.</p>
</div>
<div id="other">
<h2>We're not sure if that worked</h2>
<p>Sorry, we don't know if the signup worked, do check your emails and
try again if you don't receive one from us.</p>
</div>
<a class="actionbutton" href="./">Go Home</a>
<!-- Footer -->
<footer>
<p>&copy; Fred Boniface 2023 - <a href="./stats.html"><span id="ver_str">???</span></a></p>
</footer>
</body>
</html>

View File

@ -72,8 +72,8 @@
<label id="railstaff">Register for Rail Staff Version:</label> <label id="railstaff">Register for Rail Staff Version:</label>
<p id="reg_text">Enter your work email address:</p> <p id="reg_text">Enter your work email address:</p>
<input type="text" maxlength="128" id="eml" name="eml" autocomplete="email" class="lookup-box" placeholder="email"><br> <input type="text" maxlength="128" id="eml" name="eml" autocomplete="email" class="lookup-box" placeholder="email"><br>
<p>One registration confirmation email will be sent which will include more details about your account</p> <p>One registration confirmation email will be sent, your email address will not be stored after sending</p>
<p>Your address will not be stored</p> <p>Do check your spam/junk folder.</p>
<p>If your domain is not authorised and you are a using a railway company email address, <p>If your domain is not authorised and you are a using a railway company email address,
<a href="./issue.html">submit an issue</a> and it can be added.</p> <a href="./issue.html">submit an issue</a> and it can be added.</p>
<button type="submit" onclick="register()" class="lookup-button" id="reg_button">Register</button> <button type="submit" onclick="register()" class="lookup-button" id="reg_button">Register</button>

4
sw.js
View File

@ -35,6 +35,7 @@ const dynamicCache = [
'/settings.html', '/settings.html',
'/pis.html', '/pis.html',
'stats.html', 'stats.html',
'registered.html',
'/manifest.json', '/manifest.json',
'/styles/board.css', '/styles/board.css',
'/styles/find-code.css', '/styles/find-code.css',
@ -53,7 +54,8 @@ const dynamicCache = [
'/js/settings.js', '/js/settings.js',
'/js/simple-board.js', '/js/simple-board.js',
'/js/pis.js', '/js/pis.js',
'/js/stats.js' '/js/stats.js',
'/js/registered.js'
] ]
for(let i = 0; i < dynamicCache.length; i++) { for(let i = 0; i < dynamicCache.length; i++) {