287 lines
9.0 KiB
Svelte
287 lines
9.0 KiB
Svelte
<script lang="ts">
|
|
import { Button } from "$lib/components/ui/button/index.js";
|
|
import * as Card from "$lib/components/ui/card/index.js";
|
|
import Checkbox from "$lib/components/ui/checkbox/checkbox.svelte";
|
|
import { Input } from "$lib/components/ui/input";
|
|
import { Label } from "$lib/components/ui/label";
|
|
import { Progress } from "$lib/components/ui/progress";
|
|
import sampleQR from "./sampleqrlfkselfservice.png";
|
|
|
|
const Steps = {
|
|
WELCOME: {
|
|
name: "Welcome",
|
|
progress: 0,
|
|
showback: false,
|
|
},
|
|
SIGNUP: {
|
|
name: "Signup",
|
|
progress: 25,
|
|
showback: true,
|
|
},
|
|
SIGNUP_MAIL: {
|
|
name: "Signup with Mail",
|
|
progress: 50,
|
|
showback: true,
|
|
},
|
|
SIGNUP_AGB_ACCEPT: {
|
|
name: "Accept terms",
|
|
progress: 75,
|
|
showback: true,
|
|
},
|
|
SIGNUP_SUCCESS: {
|
|
name: "Done",
|
|
progress: 100,
|
|
showback: false,
|
|
},
|
|
SIGNIN: {
|
|
name: "Signin",
|
|
progress: 50,
|
|
showback: true,
|
|
},
|
|
SIGNIN_BARCODE: {
|
|
name: "Signin with Barcode",
|
|
progress: 100,
|
|
showback: false,
|
|
},
|
|
SIGNIN_MAIL: {
|
|
name: "Signin by Mail",
|
|
progress: 75,
|
|
showback: true,
|
|
},
|
|
SIGNIN_MAIL_SUCCESS: {
|
|
name: "Signin by Mail Success",
|
|
progress: 100,
|
|
showback: false,
|
|
},
|
|
} as const;
|
|
|
|
type StepType = (typeof Steps)[keyof typeof Steps];
|
|
let currentStep = $state<StepType>(Steps.WELCOME);
|
|
let agbAgreed = $state<boolean>(false);
|
|
let email = $state<string>("");
|
|
let firstname = $state<string>("");
|
|
let lastname = $state<string>("");
|
|
let remainingseconds = $state<number>(5);
|
|
</script>
|
|
|
|
<div class="pt-48">
|
|
<div class="flex justify-center items-center overflow-hidden">
|
|
<Card.Root class="w-full max-w-xl">
|
|
<Card.Header>
|
|
<Card.Title class="text-2xl">Welcome</Card.Title>
|
|
<Card.Description
|
|
>Let me guide you through the signup process.</Card.Description
|
|
>
|
|
{#if currentStep.name !== Steps.WELCOME.name}
|
|
<Progress value={currentStep.progress} />
|
|
{/if}
|
|
</Card.Header>
|
|
<Card.Content class="grid gap-4">
|
|
{#if currentStep.name == Steps.WELCOME.name}
|
|
<div class="grid gap-2">
|
|
<Button
|
|
autofocus
|
|
class="w-full"
|
|
on:click={() => {
|
|
currentStep = Steps.SIGNUP;
|
|
}}>I want to sign up now</Button
|
|
>
|
|
</div>
|
|
<div class="grid gap-2">
|
|
<Button
|
|
variant="secondary"
|
|
class="w-full"
|
|
on:click={() => {
|
|
currentStep = Steps.SIGNIN;
|
|
}}>I already signed up online</Button
|
|
>
|
|
</div>
|
|
{:else if currentStep.name == Steps.SIGNUP.name}
|
|
<form
|
|
class="grid gap-2"
|
|
onsubmit={() => {
|
|
currentStep = Steps.SIGNUP_MAIL;
|
|
}}
|
|
>
|
|
<div class="grid gap-2">
|
|
<Label for="firstname">Please enter your first name</Label>
|
|
<Input
|
|
on:keypress={(event) => {
|
|
console.log(event.key);
|
|
if (event.key === "Enter") {
|
|
document.getElementById("lastname")?.focus();
|
|
}
|
|
}}
|
|
bind:value={firstname}
|
|
id="firstname"
|
|
type="text"
|
|
placeholder="Max"
|
|
required
|
|
autofocus
|
|
/>
|
|
</div>
|
|
<div class="grid gap-2">
|
|
<Label for="lastname">Please enter your last name</Label>
|
|
<Input
|
|
bind:value={lastname}
|
|
id="lastname"
|
|
type="text"
|
|
placeholder="Mustermann"
|
|
required
|
|
/>
|
|
</div>
|
|
<Button type="submit" variant="default" class="w-full"
|
|
>Continue</Button
|
|
>
|
|
</form>
|
|
{:else if currentStep.name == Steps.SIGNUP_MAIL.name}
|
|
<form
|
|
class="grid gap-2"
|
|
onsubmit={() => {
|
|
currentStep = Steps.SIGNUP_AGB_ACCEPT;
|
|
}}
|
|
>
|
|
<div class="grid gap-2">
|
|
<Label for="email"
|
|
>Enter your email to get an invitation to our selfservice
|
|
(optional)</Label
|
|
>
|
|
<Input
|
|
autofocus
|
|
id="email"
|
|
type="email"
|
|
placeholder="m@example.com"
|
|
bind:value={email}
|
|
/>
|
|
</div>
|
|
<Button type="submit" variant="default" class="w-full"
|
|
>Continue</Button
|
|
>
|
|
</form>
|
|
{:else if currentStep.name == Steps.SIGNUP_AGB_ACCEPT.name}
|
|
{#if email !== ""}
|
|
By registering, you confirm that {email} is your email
|
|
{/if}
|
|
<div class="items-top flex space-x-2">
|
|
<Checkbox bind:checked={agbAgreed} autofocus id="terms1" />
|
|
<div class="grid gap-1.5 leading-none">
|
|
<Label
|
|
for="terms1"
|
|
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
>
|
|
Accept terms and conditions
|
|
</Label>
|
|
<p class="text-muted-foreground text-sm">
|
|
You agree to our Terms of Service and Privacy Policy.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
disabled={!agbAgreed}
|
|
variant="default"
|
|
class="w-full"
|
|
on:click={() => {
|
|
currentStep = Steps.SIGNUP_SUCCESS;
|
|
}}>Continue</Button
|
|
>
|
|
{:else if currentStep.name == Steps.SIGNUP_SUCCESS.name}
|
|
<p class="text-center">
|
|
Alright that's it, just walk up to the next available person and
|
|
tell them your name.<br />
|
|
You can scan this qr code to login to our selfservice.
|
|
<!-- TODO: generate actual qr code -->
|
|
<img src={sampleQR} alt="" />
|
|
</p>
|
|
{:else if currentStep.name == Steps.SIGNIN.name}
|
|
<div class="grid gap-2">
|
|
<Button
|
|
autofocus
|
|
class="w-full"
|
|
on:click={() => {
|
|
currentStep = Steps.SIGNIN_BARCODE;
|
|
}}>I brought my Barcode</Button
|
|
>
|
|
</div>
|
|
<div class="grid gap-2">
|
|
<Button
|
|
variant="secondary"
|
|
class="w-full"
|
|
on:click={() => {
|
|
currentStep = Steps.SIGNIN_MAIL;
|
|
}}>I don't have my barcode with me</Button
|
|
>
|
|
</div>
|
|
{:else if currentStep.name == Steps.SIGNIN_BARCODE.name}
|
|
Just walk up to the next available person and show them your barcode.
|
|
{:else if currentStep.name == Steps.SIGNIN_MAIL.name}
|
|
<div class="grid gap-2">
|
|
<Label for="email"
|
|
>No problem, just enter the email address you used to sign up</Label
|
|
>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="m@example.com"
|
|
bind:value={email}
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="grid gap-2">
|
|
<Button
|
|
class="w-full"
|
|
on:click={() => {
|
|
console.log("Email: ", email);
|
|
currentStep = Steps.SIGNIN_MAIL_SUCCESS;
|
|
}}>Continue</Button
|
|
>
|
|
</div>
|
|
{:else if currentStep.name == Steps.SIGNIN_MAIL_SUCCESS.name}
|
|
We found your email address, just walk up to the next available person
|
|
and tell them your name.
|
|
{/if}
|
|
</Card.Content>
|
|
<Card.Footer class="grid gap-4">
|
|
{#if currentStep.showback}
|
|
<Button
|
|
variant="destructive"
|
|
class="w-full"
|
|
on:click={() => {
|
|
switch (currentStep.name) {
|
|
case Steps.SIGNUP.name:
|
|
currentStep = Steps.WELCOME;
|
|
break;
|
|
case Steps.SIGNUP_MAIL.name:
|
|
currentStep = Steps.SIGNUP;
|
|
break;
|
|
case Steps.SIGNUP_AGB_ACCEPT.name:
|
|
currentStep = Steps.SIGNUP_MAIL;
|
|
break;
|
|
case Steps.SIGNIN.name:
|
|
currentStep = Steps.WELCOME;
|
|
break;
|
|
case Steps.SIGNIN_BARCODE.name:
|
|
currentStep = Steps.SIGNIN;
|
|
break;
|
|
case Steps.SIGNIN_MAIL.name:
|
|
currentStep = Steps.SIGNIN;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}}>Go Back</Button
|
|
>
|
|
{/if}
|
|
{#if currentStep.progress == 100}
|
|
<Button
|
|
variant="default"
|
|
class="w-full"
|
|
on:click={() => {
|
|
currentStep = Steps.WELCOME;
|
|
}}>Done</Button
|
|
>
|
|
{/if}
|
|
</Card.Footer>
|
|
</Card.Root>
|
|
</div>
|
|
</div>
|