120 lines
3.3 KiB
Svelte
120 lines
3.3 KiB
Svelte
<script>
|
|
import Header from '$lib/navigation/header.svelte';
|
|
import Nav from '$lib/navigation/nav.svelte';
|
|
import Loading from '$lib/navigation/loading.svelte';
|
|
import { onMount } from 'svelte';
|
|
import { uuid } from '$lib/stores/uuid.js';
|
|
|
|
const title = 'Register';
|
|
|
|
let state = 'unreg';
|
|
let isLoading = false;
|
|
let inputValue = '';
|
|
|
|
function handleInput(event) {
|
|
inputValue = event.target.value;
|
|
}
|
|
|
|
async function request() {
|
|
isLoading = true;
|
|
const url = 'https://owlboard.info/api/v2/user/request';
|
|
const request = {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
email: inputValue
|
|
})
|
|
};
|
|
const res = await fetch(url, request);
|
|
if (res.status == 400 || res.status == 403) {
|
|
state = 'unauth';
|
|
} else if (res.status == 201) {
|
|
state = 'sent';
|
|
} else {
|
|
state = 'error';
|
|
}
|
|
isLoading = false;
|
|
}
|
|
|
|
onMount(async () => {
|
|
if ($uuid != 'null') {
|
|
state = 'reg';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{#if isLoading}
|
|
<Loading />
|
|
{/if}
|
|
|
|
<Header {title} />
|
|
{#if state == 'unreg'}
|
|
<p>The staff version of OwlBoard offers several extra features:</p>
|
|
<ul>
|
|
<li>Access the Train Finder</li>
|
|
<li>Access the PIS Finder</li>
|
|
<li>More detailed departure boards:</li>
|
|
<ul>
|
|
<li>Non-Passenger movements</li>
|
|
<li>Hidden platform numbers</li>
|
|
<li>Display up to 40 services</li>
|
|
</ul>
|
|
</ul>
|
|
<p>To register, you will need to enter a work email address to receive a confirmation email</p>
|
|
<form on:submit={request}>
|
|
<input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput} /><br />
|
|
<label for="checkbox">
|
|
I have read and accept the terms of the <a href="/more/privacy">Privacy Policy</a><br />
|
|
<input id="checkbox" type="checkbox" required />
|
|
</label><br />
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
{:else if state == 'sent'}
|
|
<p>An email has been sent, click the link in the email to activate your profile.</p>
|
|
<p>When you click the link, your authorisation key will be automatically be stored in your browser.</p>
|
|
<p>If you use multiple browsers, you will only be logged in using the browser you open the link with.</p>
|
|
<p>You will be able to register again using the same email address</p>
|
|
{:else if state == 'unauth'}
|
|
<p>The email address you entered does not belong to an authorised business.</p>
|
|
<p>If you think this is an error, you can report an issue in the 'More' menu.</p>
|
|
{:else if state == 'error'}
|
|
<p>There was an error processing your request.</p>
|
|
<p>Check that the email you entered was correct or try again later.</p>
|
|
{:else if state == 'reg'}
|
|
<p>You are already registered for OwlBoard</p>
|
|
{/if}
|
|
<Nav />
|
|
|
|
<style>
|
|
ul {
|
|
text-align: left;
|
|
color: white;
|
|
}
|
|
input {
|
|
height: 40px;
|
|
width: 80%;
|
|
max-width: 375px;
|
|
font-family: urwgothic, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
border-radius: 50px;
|
|
border: none;
|
|
margin-bottom: 20px;
|
|
}
|
|
#checkbox {
|
|
height: 30px;
|
|
width: 30px;
|
|
}
|
|
button {
|
|
border: none;
|
|
background-color: var(--overlay-color);
|
|
color: white;
|
|
width: 35%;
|
|
height: 30px;
|
|
border-radius: 50px;
|
|
font-size: 18px;
|
|
}
|
|
</style>
|