add 2fa flows (wip)

CONTRIBUTING.md

@@ -96,7 +96,7 @@ for a Bazel LSP you can use the Bazel extension for VSCode and download [starpls
 
 ### Environment Variables
 
-We advice you to use [direnv](https://direnv.net/) to load the `.envrc` file, which sets up a few environment variables needed for development.
+We advise you to use [direnv](https://direnv.net/) to load the `.envrc` file, which sets up a few environment variables needed for development.
 
 ### Nix
 

cloud/core/emails/templates/emails/register_with_email/html.stpl

@@ -25,7 +25,7 @@
                                     style="width: 310px; border-style: solid; border-width: thin; border-color: #E6DEDB; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding: 24px; background-color: #FAF5F1;">
                                     <div
                                         style="font-family: 'Archivo', sans-serif; font-size: 24px; font-weight: 700; line-height: 32px; color: #272626;">
-                                        Thanks for singing up for Scuffle!
+                                        Thanks for signing up for Scuffle!
                                     </div>
                                     <div
                                         style="font-family: 'Archivo', sans-serif; margin-top: 16px; font-size: 16px; font-weight: 500; line-height: 24px; color: #272626;">

cloud/core/emails/templates/emails/register_with_email/text.stpl

@@ -1,4 +1,4 @@
-Thanks for singing up for Scuffle! Click the link below to access your Scuffle account.
+Thanks for signing up for Scuffle! Click the link below to access your Scuffle account.
 <%= self.url %>
 The link is valid for <%= self.timeout_minutes %> minutes.
 

cloud/dashboard/.env

@@ -1,7 +1,6 @@
 # Default Public Variables
 # If you want to modify any of the values, create an .env.local file to override them.
 
-PUBLIC_VITE_MSW_ENABLED=true
 PUBLIC_TURNSTILE_SITE_KEY=1x00000000000000000000AA
 # The default developement deployment we use right now.
 PUBLIC_GRPC_BASE_URL=https://core.lennart.scuf.dev/

cloud/dashboard/eslint.config.mjs

@@ -28,7 +28,6 @@ export default tsEslint.config(
             "**/build",
             "**/node_modules",
             "**/package",
-            "static/mockServiceWorker.js",
         ],
     },
 );

cloud/dashboard/package.json

@@ -13,12 +13,13 @@
         "@melt-ui/pp": "^0.3.2",
         "@melt-ui/svelte": "^0.86.4",
         "@protobuf-ts/grpcweb-transport": "^2.11.1",
+        "@protobuf-ts/runtime": "^2.11.1",
         "@protobuf-ts/runtime-rpc": "^2.11.1",
         "@scufflecloud/proto": "workspace:*",
         "@sveltejs/adapter-static": "^3.0.8",
         "@sveltejs/kit": "^2.16.0",
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
-        "@tanstack/svelte-query": "^5.62.2",
+        "@tanstack/svelte-query": "^6.0.0",
         "@types/d3-geo": "^3.1.0",
         "@types/lodash": "^4.17.16",
         "d3-geo": "^3.1.1",
@@ -30,8 +31,7 @@
         "globals": "^16.0.0",
         "lodash": "^4.17.21",
         "melt": "^0.17.8",
-        "msw": "^2.7.3",
-        "svelte": "^5.16.0",
+        "svelte": "^5.39.8",
         "svelte-echarts": "^1.0.0",
         "svelte-eslint-parser": "^0.43.0",
         "svelte-turnstile": "^0.11.0",
@@ -41,10 +41,5 @@
     },
     "dependenciesComments": {
         "svelte-eslint-parser": "New version has errors with `pnpm lint`. Can resolve later."
-    },
-    "msw": {
-        "workerDirectory": [
-            "static"
-        ]
     }
 }

cloud/dashboard/src/app.d.ts

@@ -7,6 +7,10 @@ declare global {
         // interface PageData {}
         // interface PageState {}
         // interface Platform {}
+        interface PageState {
+            loginMode?: import("$lib/types").LoginMode;
+            userEmail?: string;
+        }
     }
 }
 

cloud/dashboard/src/components/assets/all-assets.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+    import SearchInput from "$components/search-input.svelte";
+    import IconLayout_3 from "$lib/images/icon-layout-3.svelte";
+    import IconLayout from "$lib/images/icon-layout.svelte";
+    import AssetCard from "./asset-card.svelte";
+    import Header from "./assets-header.svelte";
+    import SlidingToggle from "./sliding-toggle.svelte";
+    import TimeFilterDropdown from "./time-filter-dropdown.svelte";
+    import { DISPLAY_MODES } from "./types";
+
+    // Search functionality
+    let searchQuery = $state("");
+    let displayMode = $state(DISPLAY_MODES.GRID);
+
+    // These will come from a paginated response
+    const streams = [
+        {
+            status: "Live",
+            streamName: "unique-stream-name",
+            streamId: "8a28e499d6s7987fd981293fd981293",
+            startTime: "May 5, 04:01:11 PM EDT",
+            duration: "1h 30min",
+            endTime: "May 6, 04:01:11 PM EDT",
+        },
+        {
+            status: "Live",
+            streamName: "unique-stream-name",
+            streamId: "8a28e499d6s7987fd981293fd981293",
+            startTime: "May 5, 04:01:11 PM EDT",
+            duration: "1h 30min",
+            endTime: "May 6, 04:01:11 PM EDT",
+        },
+        {
+            status: "Finished",
+            streamName: "unique-stream-name",
+            streamId: "8a28e499d6s7987fd981293fd981293",
+            startTime: "May 5, 04:01:11 PM EDT",
+            duration: "1h 30min",
+            endTime: "May 6, 04:01:11 PM EDT",
+        },
+        {
+            status: "Finished",
+            streamName: "unique-stream-name",
+            streamId: "8a28e499d6s7987fd981293fd981293",
+            startTime: "May 5, 04:01:11 PM EDT",
+            duration: "1h 30min",
+            endTime: "May 6, 04:01:11 PM EDT",
+        },
+    ];
+
+    function handleDisplayModeToggle() {
+        if (displayMode === DISPLAY_MODES.GRID) {
+            displayMode = DISPLAY_MODES.LIST;
+        } else {
+            displayMode = DISPLAY_MODES.GRID;
+        }
+    }
+
+    let selectedTimeFilter = $state("latest");
+
+    function handleTimeFilterChange(filterId: string) {
+        selectedTimeFilter = filterId;
+    }
+</script>
+
+<Header />
+<div class="search-row">
+    <SearchInput bind:value={searchQuery} placeholder="Search..." />
+    <TimeFilterDropdown
+        selectedFilter={selectedTimeFilter}
+        onFilterChange={handleTimeFilterChange}
+    />
+    <SlidingToggle
+        leftLabel={IconLayout}
+        rightLabel={IconLayout_3}
+        value={displayMode === DISPLAY_MODES.GRID ? "left" : "right"}
+        onToggle={handleDisplayModeToggle}
+    />
+</div>
+<div class="separator"></div>
+<div class="card-container">
+    {#each streams as stream, i (i)}
+        <AssetCard {...stream} />
+    {/each}
+</div>
+
+<div class="separator"></div>
+
+<style>
+    .card-container {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .separator {
+      height: 1px;
+      background-color: var(--colors-gray50);
+      margin: 1.5rem 0;
+    }
+
+    .search-row {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 1.5rem;
+      gap: 0.5rem;
+      height: 2.5rem;
+    }
+</style>

cloud/dashboard/src/components/assets/asset-card.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+    import IconTimelineDot from "$lib/images/icon-timeline-dot.svelte";
+    import IconWebhook from "$lib/images/icon-webhook.svelte";
+    import StreamStatusPill from "$lib/shared-components/stream-status-pill.svelte";
+
+    let {
+        streamName = "unique-stream-name",
+        streamId = "8a28e499d6s7987fd981293fd981293",
+        startTime = "May 5, 04:01:11 PM EDT",
+        duration = "1h 30min",
+        endTime = "May 6, 04:01:11 PM EDT",
+    } = $props();
+
+    // const statusIcon = {
+    //     live: IconRoadmapDot,
+    //     finished: IconRoadmapDot,
+    // };
+
+    // const IconComponent = statusIcon[status as keyof typeof statusIcon];
+</script>
+
+<div class="stream-card">
+    <div class="left-section">
+        <div class="status-section">
+            <IconWebhook />
+            <StreamStatusPill status="live" />
+            <h3 class="stream-name">{streamName}</h3>
+        </div>
+        <div class="stream-details">
+            <p class="stream-id">{streamId}</p>
+        </div>
+    </div>
+    <div class="right-section">
+        <div class="start-time">
+            <span class="time">{startTime}</span>
+            <IconTimelineDot variant="default" />
+        </div>
+        <div class="time-divider"></div>
+        <div class="end-time">
+            <span class="duration">{duration}</span>
+            <span class="time">{endTime}</span>
+            <IconTimelineDot variant="finished" />
+        </div>
+    </div>
+</div>
+
+<style>
+    .stream-card {
+      background: var(--colors-gray20);
+      border-radius: 0.75rem;
+      padding: 0.75rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+    }
+
+    .left-section {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+
+      .status-section {
+        display: flex;
+        flex-direction: row;
+        gap: 0.5rem;
+        align-items: center;
+
+        .stream-name {
+          color: white;
+          font-weight: 500;
+          font-size: 0.875rem;
+          margin: 0;
+        }
+      }
+    }
+
+    .stream-details {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .stream-id {
+      color: #9ca3af;
+      font-size: 0.75rem;
+      margin: 0;
+    }
+
+    .right-section {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      text-align: right;
+      justify-content: center;
+
+      .start-time {
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1rem;
+        color: #282625;
+        display: flex;
+        gap: 0.5rem;
+      }
+
+      .time-divider {
+        width: 0.125rem;
+        align-self: right;
+        height: 1rem;
+        background-color: var(--colors-gray50);
+        margin-right: 0.3rem;
+      }
+
+      .end-time {
+        font-size: 0.875rem;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 1rem;
+        color: #282625;
+        display: flex;
+        gap: 0.5rem;
+      }
+    }
+</style>