src/routes/(components)/login.svelte

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

src/routes/(components)/signup.svelte

@@ -9,83 +9,31 @@
     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">
@@ -146,27 +94,6 @@
             >
             <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
@@ -196,7 +123,6 @@
               id="email"
               type="email"
               placeholder="m@example.com"
-              bind:value={email}
               required
             />
           </div>
@@ -204,17 +130,14 @@
             <Button
               class="w-full"
               on:click={() => {
-                console.log("Email: ", email);
-                currentStep = Steps.SIGNIN_MAIL_SUCCESS;
-              }}>Continue</Button
+                currentStep = Steps.SIGNIN_BARCODE;
+              }}>Next!</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}
+      <Card.Footer>
+        {#if currentStep.name != Steps.WELCOME.name}
           <Button
             variant="destructive"
             class="w-full"
@@ -241,19 +164,6 @@
             }}>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>