feat: final state

src/routes/(components)/signup.svelte

@@ -9,31 +9,73 @@
     WELCOME: {
       name: "Welcome",
       progress: 0,
+      showback: false,
     },
     SIGNUP: {
       name: "Signup",
       progress: 25,
+      showback: true,
     },
     SIGNUP_MAIL: {
       name: "Signup with Mail",
       progress: 50,
+      showback: true,
     },
     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">
@@ -123,6 +165,7 @@
               id="email"
               type="email"
               placeholder="m@example.com"
+              bind:value={email}
               required
             />
           </div>
@@ -130,14 +173,17 @@
             <Button
               class="w-full"
               on:click={() => {
-                currentStep = Steps.SIGNIN_BARCODE;
+                console.log("Email: ", email);
-              }}>Next!</Button
+                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>
+      <Card.Footer class="grid gap-4">
-        {#if currentStep.name != Steps.WELCOME.name}
+        {#if currentStep.showback}
           <Button
             variant="destructive"
             class="w-full"
@@ -164,6 +210,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>