Implement user request/registration

This commit is contained in:
Fred Boniface 2023-06-20 21:39:00 +01:00
parent 628c2fd75d
commit 85a9413979
4 changed files with 185 additions and 1 deletions

View File

@ -9,4 +9,5 @@ COPY . ./
RUN npm run build
FROM nginx:alpine-slim
COPY --from=build /app/build /usr/share/nginx/html
COPY --from=build /app/build /usr/share/nginx/html
RUN chown -R nginx:nginx /usr/share/nginx/html

View File

@ -5,6 +5,7 @@
const links = [
{title: "Your Data", path: "/more/data"},
{title: "Registration", path: "/more/reg"},
{title: "Location Reference Code Lookup", path: "/more/corpus"},
{title: "Reason Code Lookup", path: "/more/reasons"},
{title: "Privacy Policy", path: "/more/privacy"},

View File

@ -0,0 +1,110 @@
<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) {
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>
<input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput}><br>
<button type="submit" on:click={request}>Submit</button>
{: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;
}
button {
border: none;
background-color: var(--overlay-color);
color: white;
width: 35%;
height: 30px;
border-radius: 50px;
font-size: 18px;
}
</style>

View File

@ -0,0 +1,72 @@
<script>
import Header from "$lib/navigation/header.svelte";
import Loading from "$lib/navigation/loading.svelte";
import Nav from "$lib/navigation/nav.svelte";
import { uuid } from "$lib/stores/uuid.js";
import { onMount } from "svelte";
const title = "Registration"
let state = "";
let isLoading = true
async function getUUID() {
return new URLSearchParams(window.location.search).get('key');
}
async function submit(id) {
const url = "https://owlboard.info/api/v2/user/register"
const request = {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
uuid: id
})
}
const res = await fetch(url, request);
const body = await res.json();
if (body.api_key) {
uuid.set(body.api_key);
return 201
}
return res.status;
}
onMount(async () => {
const id = await getUUID() || "";
if (id == "" || !id) {
state = "none"
isLoading = false
return
}
const status = await submit(id)
if (status == 201) {
console.log("Registered Successfully")
state = "done"
} else if (status == 401) {
console.log("Invalid Key")
state = "unauth"
} else {
console.log("Error")
state = "error"
}
isLoading = false
})
</script>
<Header {title} />
{#if isLoading}
<Loading />
{/if}
{#if state == "none"}
<p>Unable to read your access key.</p>
<p>Please click the link in your email again.</p>
{:else if state == "unauth"}
<p>Your link is not valid, links expire after 30 minutes.</p>
<p>You can try to register again.</p>
{:else if state == "error"}
<p>There was an error on our end, please try again later</p>
{:else if state == "done"}
<p>You are now logged in</p>
{/if}
<Nav />