more

src/routes/(components)/login.svelte

@@ -13,17 +13,12 @@
       <Card.Header>
         <Card.Title class="text-2xl">Login</Card.Title>
         <Card.Description
-          >Please enter credentials for an account that is allowed to create
-          runners and their selfservice links.</Card.Description
+          >Please enter kiosk credentials.</Card.Description
         >
       </Card.Header>
       <Card.Content class="grid gap-4">
         <div class="grid gap-2">
-          <Label for="email">Email</Label>
-          <Input id="email" type="email" placeholder="m@example.com" required />
-        </div>
-        <div class="grid gap-2">
-          <Label for="password">Password</Label>
+          <Label for="password">Token</Label>
           <Input id="password" type="password" required />
         </div>
       </Card.Content>

src/routes/(components)/signup.svelte

@@ -9,31 +9,83 @@
     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_MAIL_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 email = $state<string>("");
+  let remainingseconds = $state<number>(5);
+
+  // Function to handle automatic return to welcome screen
+  function startCountdown() {
+    if (currentStep.progress === 100) {
+      remainingseconds = 10;
+      const timer = setInterval(() => {
+        remainingseconds -= 1;
+        if (remainingseconds <= 0) {
+          clearInterval(timer);
+          currentStep = Steps.WELCOME;
+        }
+      }, 1000);
+      return timer;
+    }
+    return null;
+  }
+
+  import { onDestroy } from 'svelte';
+
+  // Watch for changes to currentStep
+  $effect(() => {
+    if (currentStep.progress === 100) {
+      const timer = startCountdown();
+      // Cleanup when component is destroyed
+      onDestroy(() => {
+        if (timer) clearInterval(timer);
+      });
+    }
+  });
 </script>
 
 <div class="pt-48">
@@ -94,6 +146,27 @@
             >
             <Input id="email" type="email" placeholder="m@example.com" />
           </div>
+          <Button
+            variant="default"
+            class="w-full"
+            on:click={() => {
+              currentStep = Steps.SIGNUP_MAIL_ACCEPT;
+            }}>Continue</Button
+          >
+        {:else if currentStep.name == Steps.SIGNUP_MAIL_ACCEPT.name}
+          <Button
+            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.
+          </p>
+          TODO:
         {:else if currentStep.name == Steps.SIGNIN.name}
           <div class="grid gap-2">
             <Button
@@ -123,6 +196,7 @@
               id="email"
               type="email"
               placeholder="m@example.com"
+              bind:value={email}
               required
             />
           </div>
@@ -130,14 +204,17 @@
             <Button
               class="w-full"
               on:click={() => {
-                currentStep = Steps.SIGNIN_BARCODE;
-              }}>Next!</Button
+                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>
-        {#if currentStep.name != Steps.WELCOME.name}
+      <Card.Footer class="grid gap-4">
+        {#if currentStep.showback}
           <Button
             variant="destructive"
             class="w-full"
@@ -164,6 +241,19 @@
             }}>Go Back</Button
           >
         {/if}
+        {#if currentStep.progress == 100}
+          <Button
+            variant="default"
+            class="w-full"
+            on:click={() => {
+              currentStep=Steps.WELCOME;
+              }
+            }>Done</Button
+          >
+          <p class="text-center">
+            Returning to the home screen in {remainingseconds} seconds...
+          </p>
+        {/if}
       </Card.Footer>
     </Card.Root>
   </div>