diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a2622c16a..64180c0f8 100644 --- a/CONTRIBUTING.md +++ b/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 diff --git a/cloud/core/emails/templates/emails/register_with_email/html.stpl b/cloud/core/emails/templates/emails/register_with_email/html.stpl index 4fa907f79..854f25399 100644 --- a/cloud/core/emails/templates/emails/register_with_email/html.stpl +++ b/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;">
- Thanks for singing up for Scuffle! + Thanks for signing up for Scuffle!
diff --git a/cloud/core/emails/templates/emails/register_with_email/text.stpl b/cloud/core/emails/templates/emails/register_with_email/text.stpl index 3ffe888fb..f007760b8 100644 --- a/cloud/core/emails/templates/emails/register_with_email/text.stpl +++ b/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. diff --git a/cloud/dashboard/.env b/cloud/dashboard/.env index 1f40d343a..65b9712bb 100644 --- a/cloud/dashboard/.env +++ b/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/ diff --git a/cloud/dashboard/eslint.config.mjs b/cloud/dashboard/eslint.config.mjs index 391c49075..91f5b3638 100644 --- a/cloud/dashboard/eslint.config.mjs +++ b/cloud/dashboard/eslint.config.mjs @@ -28,7 +28,6 @@ export default tsEslint.config( "**/build", "**/node_modules", "**/package", - "static/mockServiceWorker.js", ], }, ); diff --git a/cloud/dashboard/package.json b/cloud/dashboard/package.json index 3242c2a36..1441a2f4a 100644 --- a/cloud/dashboard/package.json +++ b/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" - ] } } diff --git a/cloud/dashboard/src/app.d.ts b/cloud/dashboard/src/app.d.ts index d76242adf..082f115b8 100644 --- a/cloud/dashboard/src/app.d.ts +++ b/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; + } } } diff --git a/cloud/dashboard/src/components/settings-block.svelte b/cloud/dashboard/src/components/settings-block.svelte deleted file mode 100644 index 9d67f7a99..000000000 --- a/cloud/dashboard/src/components/settings-block.svelte +++ /dev/null @@ -1,318 +0,0 @@ - - -
-
-
- {#each [icon] as IconComponent, index (`icon-${index}`)} - - {/each} -
-
-

{title}

- {#if subtitle} - {subtitle} - {/if} -
-
-
- {#each cards as card (card.id)} -
-
-
-

{card.title}

- {#if card.status} - - {card.status.label} - - {/if} -
-
- - {#if card.description} -

{card.description}

- {/if} - - {#if card.customContent} -
- {@render card.customContent()} -
- {/if} - - {#if card.actions && card.actions.length > 0} -
- {#each card.actions as action (action.label)} - {#if action.variant === "toggle"} - - handleToggleChange(action, checked)} - size="medium" - /> - {:else} - - {/if} - {/each} -
- {/if} -
- {/each} -
-
- - diff --git a/cloud/dashboard/src/components/settings/settings-page.svelte b/cloud/dashboard/src/components/settings/settings-page.svelte deleted file mode 100644 index bf7aef7c7..000000000 --- a/cloud/dashboard/src/components/settings/settings-page.svelte +++ /dev/null @@ -1,282 +0,0 @@ - - -
- - - - - -
- - diff --git a/cloud/dashboard/src/components/streams/all-video-streams.svelte b/cloud/dashboard/src/components/streams/all-video-streams.svelte deleted file mode 100644 index ed96aec84..000000000 --- a/cloud/dashboard/src/components/streams/all-video-streams.svelte +++ /dev/null @@ -1,80 +0,0 @@ - - -
-
-
- - - - - -
-
-{#await streamedData} -
Loading...
-{:then resolvedStreams} - -{:catch error} -

{error.message}

-{/await} - - diff --git a/cloud/dashboard/src/components/streams/assets/assets-tab.svelte b/cloud/dashboard/src/components/streams/assets/assets-tab.svelte deleted file mode 100644 index 8d700196f..000000000 --- a/cloud/dashboard/src/components/streams/assets/assets-tab.svelte +++ /dev/null @@ -1,30 +0,0 @@ - - -
- -
- - diff --git a/cloud/dashboard/src/features/login-two-factor/createMfaWebauthnChallenge.ts b/cloud/dashboard/src/features/login-two-factor/createMfaWebauthnChallenge.ts new file mode 100644 index 000000000..a9151e4e9 --- /dev/null +++ b/cloud/dashboard/src/features/login-two-factor/createMfaWebauthnChallenge.ts @@ -0,0 +1,48 @@ +import { sessionsServiceClient, usersServiceClient } from "$lib/grpcClient"; +import { isWebauthnSupported, parseCredentialRequestOptions, serializeCredentialAssertionResponse } from "$lib/utils"; +import { getWebAuthnErrorMessage } from "../settings/utils"; + +export async function createMfaWebauthnChallenge(userId: string): Promise { + if (!isWebauthnSupported()) { + throw new Error("WebAuthn not supported on this browser"); + } + + const challengeCall = usersServiceClient.createWebauthnChallenge({ id: userId }); + const challengeStatus = await challengeCall.status; + + if (challengeStatus.code !== "OK") { + throw new Error(challengeStatus.detail || "Failed to initiate WebAuthn credential challenge"); + } + + const challengeResponse = await challengeCall.response; + + const publicKey = parseCredentialRequestOptions(challengeResponse.optionsJson); + + let credential: PublicKeyCredential | null = null; + + try { + credential = await navigator.credentials.get({ publicKey }) as PublicKeyCredential | null; + } catch (err) { + throw new Error(getWebAuthnErrorMessage(err)); + } + + if (!credential) { + throw new Error("No credential received from authenticator"); + } + + const responseJson = serializeCredentialAssertionResponse(credential); + + // Returns a usersession that we should just consume locally but we can do that later + + console.log("collected credential now validating for session"); + await sessionsServiceClient.validateMfaForUserSession({ + response: { + oneofKind: "webauthn", + webauthn: { + responseJson, + }, + }, + }).response; + + console.log("completely validation for session"); +} diff --git a/cloud/dashboard/src/features/login-two-factor/mfaChallengeMutations.ts b/cloud/dashboard/src/features/login-two-factor/mfaChallengeMutations.ts new file mode 100644 index 000000000..2098f6e6f --- /dev/null +++ b/cloud/dashboard/src/features/login-two-factor/mfaChallengeMutations.ts @@ -0,0 +1,17 @@ +import { authState } from "$lib/auth.svelte"; +import { withRpcErrorHandling } from "$lib/utils"; +import { createMutation } from "@tanstack/svelte-query"; +import { createMfaWebauthnChallenge } from "./createMfaWebauthnChallenge"; + +export function useCreateWebauthnChallenge(userId: string | undefined) { + return createMutation(() => ({ + mutationFn: () => + withRpcErrorHandling(async () => { + if (!userId) throw new Error("User not authenticated"); + return await createMfaWebauthnChallenge(userId); + }), + onSuccess: () => { + authState().reloadUserForMfa(); + }, + })); +} diff --git a/cloud/dashboard/src/features/login-two-factor/recovery-code-collapsible.svelte b/cloud/dashboard/src/features/login-two-factor/recovery-code-collapsible.svelte new file mode 100644 index 000000000..7f545351c --- /dev/null +++ b/cloud/dashboard/src/features/login-two-factor/recovery-code-collapsible.svelte @@ -0,0 +1,111 @@ + + +
+ + + {#if troubleshootCollapsible.open} +
+ +
+ {/if} +
+ + diff --git a/cloud/dashboard/src/features/login-two-factor/recovery-code-form.svelte b/cloud/dashboard/src/features/login-two-factor/recovery-code-form.svelte new file mode 100644 index 000000000..9d62ca66d --- /dev/null +++ b/cloud/dashboard/src/features/login-two-factor/recovery-code-form.svelte @@ -0,0 +1,180 @@ + + +
+ +

2FA Recovery

+
+

+ No 2FA device available?
Paste your backup code below. +

+ +{#if error} +
{error}
+{/if} + +
+
+ +
+ +
+ + diff --git a/cloud/dashboard/src/components/login/mfa-form.svelte b/cloud/dashboard/src/features/login-two-factor/totp-form.svelte similarity index 82% rename from cloud/dashboard/src/components/login/mfa-form.svelte rename to cloud/dashboard/src/features/login-two-factor/totp-form.svelte index 27a7204f5..860e4d41a 100644 --- a/cloud/dashboard/src/components/login/mfa-form.svelte +++ b/cloud/dashboard/src/features/login-two-factor/totp-form.svelte @@ -1,14 +1,20 @@
-

MFA Login

- Enter the 6-digit code from your 2FA authenticator app below. + Enter the 6-digit code from your 2FA authenticator app below

@@ -53,6 +56,18 @@ Continue {/if} +{#if onModeChange} + + +{/if} + diff --git a/cloud/dashboard/src/features/login-two-factor/types.ts b/cloud/dashboard/src/features/login-two-factor/types.ts new file mode 100644 index 000000000..1bbc9cc9a --- /dev/null +++ b/cloud/dashboard/src/features/login-two-factor/types.ts @@ -0,0 +1,6 @@ +export const DEFAULT_TWO_FACTOR_MODE: TwoFactorMode = "webauthn"; + +export type TwoFactorMode = + | "webauthn" + | "totp" + | "recovery-code"; diff --git a/cloud/dashboard/src/features/login-two-factor/web-authnn-form.svelte b/cloud/dashboard/src/features/login-two-factor/web-authnn-form.svelte new file mode 100644 index 000000000..906291ebf --- /dev/null +++ b/cloud/dashboard/src/features/login-two-factor/web-authnn-form.svelte @@ -0,0 +1,127 @@ + + +
+

Authentication

+
+

+ Plug in your security key and touch it when prompted to continue. +

+ +{#if webauthnMutation.isError} + +{/if} +{#if onToptModeChange} + + +{/if} + +
+ + + diff --git a/cloud/dashboard/src/features/login/authMutations.ts b/cloud/dashboard/src/features/login/authMutations.ts new file mode 100644 index 000000000..b6f03fb99 --- /dev/null +++ b/cloud/dashboard/src/features/login/authMutations.ts @@ -0,0 +1,106 @@ +// lib/auth/mutations.ts +import { goto } from "$app/navigation"; +import { authState } from "$lib/auth.svelte"; +import { sessionsServiceClient } from "$lib/grpcClient"; +import { base64urlToArrayBuffer, withRpcErrorHandling } from "$lib/utils"; +import { CaptchaProvider } from "@scufflecloud/proto/scufflecloud/core/v1/common.js"; +import { createMutation } from "@tanstack/svelte-query"; + +interface CompleteGoogleLoginParams { + code: string; + state: string; +} + +interface SendMagicLinkParams { + email: string; + captchaToken: string; +} + +interface CompleteMagicLinkParams { + code: string; +} + +export function useInitiateGoogleLogin() { + return createMutation(() => ({ + mutationFn: () => + withRpcErrorHandling(async () => { + const device = await authState().getDeviceOrInit(); + const response = await sessionsServiceClient.loginWithGoogle({ device }).response; + window.location.href = response.authorizationUrl; + }), + })); +} + +export function useCompleteGoogleLogin() { + return createMutation(() => ({ + mutationFn: ({ code, state }: CompleteGoogleLoginParams) => + withRpcErrorHandling(async () => { + const device = await authState().getDeviceOrInit(); + const response = await sessionsServiceClient.completeLoginWithGoogle({ + code, + state, + device, + }).response; + + if (!response.newUserSessionToken) { + throw new Error("No session token received"); + } + + await authState().handleNewUserSessionToken(response.newUserSessionToken); + + if (response.newUserSessionToken?.sessionMfaPending) { + goto("/mfa"); + } else { + goto("/"); + } + }), + })); +} + +export function useSendMagicLink() { + return createMutation(() => ({ + mutationFn: ({ email, captchaToken }: SendMagicLinkParams) => + withRpcErrorHandling(async () => { + if (!email || !captchaToken) { + throw new Error("Email and captcha token are required"); + } + + await sessionsServiceClient.loginWithMagicLink({ + captcha: { + provider: CaptchaProvider.TURNSTILE, + token: captchaToken, + }, + email, + }).response; + + console.log("Magic link sent successfully to:", email); + }), + })); +} + +export function useCompleteMagicLink() { + return createMutation(() => ({ + mutationFn: ({ code }: CompleteMagicLinkParams) => + withRpcErrorHandling(async () => { + const device = await authState().getDeviceOrInit(); + const codeBuffer = base64urlToArrayBuffer(code); + + const response = await sessionsServiceClient.completeLoginWithMagicLink({ + code: new Uint8Array(codeBuffer), + device, + }).response; + + if (!response) { + throw new Error("No session token received"); + } + + await authState().handleNewUserSessionToken(response); + + if (response?.sessionMfaPending) { + goto("/mfa"); + } else { + goto("/"); + } + }), + })); +} diff --git a/cloud/dashboard/src/components/login/forgot-password-form.svelte b/cloud/dashboard/src/features/login/forgot-password-form.svelte similarity index 100% rename from cloud/dashboard/src/components/login/forgot-password-form.svelte rename to cloud/dashboard/src/features/login/forgot-password-form.svelte diff --git a/cloud/dashboard/src/components/login/login-footer.svelte b/cloud/dashboard/src/features/login/login-footer.svelte similarity index 100% rename from cloud/dashboard/src/components/login/login-footer.svelte rename to cloud/dashboard/src/features/login/login-footer.svelte diff --git a/cloud/dashboard/src/components/login/login-header.svelte b/cloud/dashboard/src/features/login/login-header.svelte similarity index 100% rename from cloud/dashboard/src/components/login/login-header.svelte rename to cloud/dashboard/src/features/login/login-header.svelte diff --git a/cloud/dashboard/src/features/login/login-layout.svelte b/cloud/dashboard/src/features/login/login-layout.svelte new file mode 100644 index 000000000..b22872c4e --- /dev/null +++ b/cloud/dashboard/src/features/login/login-layout.svelte @@ -0,0 +1,23 @@ + + + + + diff --git a/cloud/dashboard/src/components/login/login-page.svelte b/cloud/dashboard/src/features/login/login-page.svelte similarity index 64% rename from cloud/dashboard/src/components/login/login-page.svelte rename to cloud/dashboard/src/features/login/login-page.svelte index 269c4bf15..ae63649af 100644 --- a/cloud/dashboard/src/components/login/login-page.svelte +++ b/cloud/dashboard/src/features/login/login-page.svelte @@ -1,13 +1,14 @@ - +
{#if loginMode === "login"} @@ -192,7 +195,7 @@ href="/password" onclick={(e) => { e.preventDefault(); - loginMode = "password"; + changeLoginMode("password"); }} class="link" class:disabled={isLoading} @@ -211,7 +214,7 @@ href="/forgot-password" onclick={(e) => { e.preventDefault(); - loginMode = "forgot-password"; + changeLoginMode("forgot-password"); }} class="link" class:disabled={isLoading} @@ -238,21 +241,10 @@ diff --git a/cloud/dashboard/src/components/login/passkey-form.svelte b/cloud/dashboard/src/features/login/passkey-form.svelte similarity index 100% rename from cloud/dashboard/src/components/login/passkey-form.svelte rename to cloud/dashboard/src/features/login/passkey-form.svelte diff --git a/cloud/dashboard/src/components/login/password-form.svelte b/cloud/dashboard/src/features/login/password-form.svelte similarity index 100% rename from cloud/dashboard/src/components/login/password-form.svelte rename to cloud/dashboard/src/features/login/password-form.svelte diff --git a/cloud/dashboard/src/components/login/password-reset-sent.svelte b/cloud/dashboard/src/features/login/password-reset-sent.svelte similarity index 100% rename from cloud/dashboard/src/components/login/password-reset-sent.svelte rename to cloud/dashboard/src/features/login/password-reset-sent.svelte diff --git a/cloud/dashboard/src/components/login/signin-options.svelte b/cloud/dashboard/src/features/login/signin-options.svelte similarity index 57% rename from cloud/dashboard/src/components/login/signin-options.svelte rename to cloud/dashboard/src/features/login/signin-options.svelte index f34618659..4393b0878 100644 --- a/cloud/dashboard/src/components/login/signin-options.svelte +++ b/cloud/dashboard/src/features/login/signin-options.svelte @@ -1,33 +1,28 @@ -
OR
+ diff --git a/cloud/dashboard/src/features/settings/consts.ts b/cloud/dashboard/src/features/settings/consts.ts new file mode 100644 index 000000000..3de8e54fe --- /dev/null +++ b/cloud/dashboard/src/features/settings/consts.ts @@ -0,0 +1,10 @@ +export const STEP_TO_TITLE = { + select: "New 2FA method", + waiting: "Waiting for results...", + success: "Passkey added", +}; + +export type AuthStepType = keyof typeof STEP_TO_TITLE; + +export const DEFAULT_TOTP_AUTH_NAME = "Mobile Authenticator"; +export const DEFAULT_WEBAUTHN_AUTH_NAME = "Security Key"; diff --git a/cloud/dashboard/src/features/settings/createWebAuthn.svelte.ts b/cloud/dashboard/src/features/settings/createWebAuthn.svelte.ts new file mode 100644 index 000000000..e84236c74 --- /dev/null +++ b/cloud/dashboard/src/features/settings/createWebAuthn.svelte.ts @@ -0,0 +1,48 @@ +import { usersServiceClient } from "$lib/grpcClient"; +import { isWebauthnSupported, parseCredentialCreationOptions, serializeCredentialCreationResponse } from "$lib/utils"; +import { getWebAuthnErrorMessage, WEB_AUTHN_NOT_ALLOWED_ERROR } from "./utils"; + +export async function createWebauthnCredential(userId: string): Promise { + if (!isWebauthnSupported()) { + throw new Error("WebAuthn not supported on this browser"); + } + + const createCall = usersServiceClient.createWebauthnCredential({ id: userId }); + const createStatus = await createCall.status; + + if (createStatus.code !== "OK") { + throw new Error(createStatus.detail || "Failed to initiate WebAuthn credential creation"); + } + + const createResponse = await createCall.response; + const publicKey = parseCredentialCreationOptions(createResponse.optionsJson); + + let credential: PublicKeyCredential | null = null; + try { + credential = await navigator.credentials.create({ + publicKey, + }) as PublicKeyCredential; + } catch (err) { + throw new Error(getWebAuthnErrorMessage(err)); + } + + if (!credential) { + throw new Error(WEB_AUTHN_NOT_ALLOWED_ERROR); + } + + const responseJson = serializeCredentialCreationResponse(credential); + + const completeCall = usersServiceClient.completeCreateWebauthnCredential({ + id: userId, + responseJson, + }); + + const completeStatus = await completeCall.status; + + if (completeStatus.code !== "OK") { + throw new Error(completeStatus.detail || "Failed to complete WebAuthn credential creation"); + } + + const completeResponse = await completeCall.response; + return completeResponse.id; +} diff --git a/cloud/dashboard/src/features/settings/credentialMutations.svelte.ts b/cloud/dashboard/src/features/settings/credentialMutations.svelte.ts new file mode 100644 index 000000000..531851c10 --- /dev/null +++ b/cloud/dashboard/src/features/settings/credentialMutations.svelte.ts @@ -0,0 +1,134 @@ +import { usersServiceClient } from "$lib/grpcClient"; +import { withRpcErrorHandling } from "$lib/utils"; +import { createMutation, QueryClient, useQueryClient } from "@tanstack/svelte-query"; +import { createWebauthnCredential } from "./createWebAuthn.svelte"; +import type { MfaCredential } from "./types"; + +type UpdateWebauthnNameType = { + id: string; + name: string; +}; + +// --Webauthn mutations-- +export function useCreateWebauthnCredential(userId: string | undefined) { + return createMutation(() => ({ + mutationFn: () => + withRpcErrorHandling(async () => { + if (!userId) throw new Error("User not authenticated"); + return await createWebauthnCredential(userId); + }), + })); +} + +export function useUpdateWebauthnName(userId: string | undefined) { + const queryClient: QueryClient = useQueryClient(); + + return createMutation(() => ({ + mutationFn: ({ id, name }: UpdateWebauthnNameType) => + withRpcErrorHandling(async () => { + if (!userId) throw new Error("User not authenticated"); + + const call = usersServiceClient.updateWebauthnCredential({ + userId, + id, + name, + }); + + const status = await call.status; + if (status.code !== "OK") { + throw new Error(status.detail || "Failed to update credential name"); + } + }), + onSuccess: (_data, { id, name }) => { + const existingData = queryClient.getQueryData(["webauthn-list"]); + + // Check if the credential exists in the cache. They won't yet if the key was just added + const credentialExists = existingData?.some(cred => cred.id === id); + + if (credentialExists) { + queryClient.setQueryData( + ["webauthn-list"], + (old) => old?.map(cred => cred.id === id ? { ...cred, name } : cred), + ); + } else { + // Credential was just added, refetch the list + queryClient.invalidateQueries({ + queryKey: ["webauthn-list"], + }); + } + }, + })); +} + +export function useDeleteWebauthnCredential(userId: string | undefined) { + const queryClient: QueryClient = useQueryClient(); + + return createMutation(() => ({ + mutationFn: async ({ id }: { id: string }) => + withRpcErrorHandling(async () => { + if (!userId) throw new Error("User not authenticated"); + const call = usersServiceClient.deleteWebauthnCredential({ + userId, + id, + }); + + const status = await call.status; + if (status.code !== "OK") { + throw new Error(status.detail || "Failed to delete credential"); + } + }), + onSuccess: (_data, { id }) => { + queryClient.setQueryData( + ["webauthn-list"], + (old: MfaCredential[] | undefined) => old?.filter(cred => cred.id !== id), + ); + }, + })); +} + +// --TOTP mutations-- +export function useCreateTotpCredential(userId: string | undefined) { + return createMutation(() => ({ + mutationFn: () => + withRpcErrorHandling(async () => { + if (!userId) throw new Error("User not authenticated"); + + const createCall = usersServiceClient.createTotpCredential({ id: userId }); + const createStatus = await createCall.status; + + if (createStatus.code !== "OK") { + throw new Error(createStatus.detail || "Failed to initiate TOTP credential creation"); + } + + const createResponse = await createCall.response; + return { + qrCode: createResponse.secretQrcodePng, + secretUrl: createResponse.secretUrl, + }; + }), + })); +} + +export function useCompleteTotpCredential(userId: string | undefined) { + return createMutation(() => ({ + mutationFn: ({ code, name }: { code: string; name?: string }) => + withRpcErrorHandling(async () => { + if (!userId) throw new Error("User not authenticated"); + + const completeCall = usersServiceClient.completeCreateTotpCredential({ + id: userId, + code, + name, + }); + + const completeStatus = await completeCall.status; + + if (completeStatus.code !== "OK") { + throw new Error(completeStatus.detail || "Failed to complete TOTP credential creation"); + } + + const completeResponse = await completeCall.response; + return completeResponse; + }), + })); +} diff --git a/cloud/dashboard/src/features/settings/recovery-codes-button.svelte b/cloud/dashboard/src/features/settings/recovery-codes-button.svelte new file mode 100644 index 000000000..d27ea3c0d --- /dev/null +++ b/cloud/dashboard/src/features/settings/recovery-codes-button.svelte @@ -0,0 +1,313 @@ + + + + { + currentStep = "confirm"; + generatedCodes = []; + }} +> + {#if currentStep === "confirm"} +
+

+ {#if hasExistingCodes} + Generating new recovery codes will invalidate your existing + codes. Make sure you've saved them somewhere safe. + {:else} + Recovery codes are used to access your account if you lose + access to your two-factor authentication device. + {/if} +

+ +
+

Important

+

+ Save these codes in a secure location. Each code can only be + used once. +

+
+ +
+ + +
+ + {#if generateCodesMutation.isError} +

+ Failed to generate recovery codes. Please try again. +

+ {/if} +
+ {:else if currentStep === "success"} +
+

+ Your recovery codes have been generated. Store them in a safe + place. +

+ +
+ {#each generatedCodes as code, index (`code-${index + 1}`)} + {code} + {/each} +
+ +
+ + +
+ + +
+ {/if} + + + diff --git a/cloud/dashboard/src/features/settings/settings-page.svelte b/cloud/dashboard/src/features/settings/settings-page.svelte new file mode 100644 index 000000000..d563e0ae2 --- /dev/null +++ b/cloud/dashboard/src/features/settings/settings-page.svelte @@ -0,0 +1,346 @@ + + +
+ + + + + + 0} + hasExistingCodes={activeMethods.length > 0} + /> + + + + + +
+ + diff --git a/cloud/dashboard/src/features/settings/two-factor-settings-card.svelte b/cloud/dashboard/src/features/settings/two-factor-settings-card.svelte new file mode 100644 index 000000000..a7250c8e4 --- /dev/null +++ b/cloud/dashboard/src/features/settings/two-factor-settings-card.svelte @@ -0,0 +1,676 @@ + + +
+ Active authentication methods +
+
+ {#if enabled && methods.length > 0} +
+ {#each methods as method (method.id)} +
+
+ +
+
+
+ {method.name} + { + method.type.toUpperCase() + } +
+
+ onEditMethod(method)} + onDelete={() => onDeleteMethod(method)} + /> +
+ {/each} +
+ {:else} +
+ No active 2FA methods. +
+ {/if} + +
+ + {#if currentStep === "select"} +
+

+ Choose new method for authentication +

+ +
+ + + +
+
+ {:else if currentStep === "waiting"} +
+ {#if createWebAuthnMutation.isError} + +
+ + +
+ {:else} + + + {/if} +
+ {:else if currentStep === "success"} +
+
+ + New passkey successfully added +
+ +

+ Optionally you can name the passkey. +

+ + + {#if updateNameMutation.isError} + + {/if} + +
+ {/if} + +
+ + + +
+ + + {#if updateNameMutation.isError} + + {/if} + +
+ + +
+
+ + + + +
+

+ Are you sure you want to delete { + methodToDelete?.name ?? "this passkey" + }? This action cannot be undone. +

+ + {#if deleteCredentialMutation.isError} + + {/if} + +
+ + +
+
+ + + diff --git a/cloud/dashboard/src/features/settings/types.ts b/cloud/dashboard/src/features/settings/types.ts new file mode 100644 index 000000000..a5c63566a --- /dev/null +++ b/cloud/dashboard/src/features/settings/types.ts @@ -0,0 +1,5 @@ +import type { TotpCredential, WebauthnCredential } from "@scufflecloud/proto/scufflecloud/core/v1/users_service.js"; + +export type MfaCredential = + | (TotpCredential & { type: "totp" }) + | (WebauthnCredential & { type: "webauthn" }); diff --git a/cloud/dashboard/src/features/settings/utils.ts b/cloud/dashboard/src/features/settings/utils.ts new file mode 100644 index 000000000..ad042a4a8 --- /dev/null +++ b/cloud/dashboard/src/features/settings/utils.ts @@ -0,0 +1,20 @@ +export const WEB_AUTHN_INVALID_STATE_ERROR = "An authenticator already exists containing one of the credentials."; +export const WEB_AUTHN_NOT_ALLOWED_ERROR = "WebAuthn operation was cancelled"; + +/** + * Reads WebAuthn errors and returns a user-friendly message + */ +export function getWebAuthnErrorMessage(err: unknown): string { + if (!(err instanceof Error)) { + return "An unexpected error occurred during authentication."; + } + + switch (err.name) { + case "InvalidStateError": + return WEB_AUTHN_INVALID_STATE_ERROR; + case "NotAllowedError": + return WEB_AUTHN_NOT_ALLOWED_ERROR; + default: + return "Authentication failed. Please try again."; + } +} diff --git a/cloud/dashboard/src/lib/auth-guards.ts b/cloud/dashboard/src/lib/auth-guards.ts new file mode 100644 index 000000000..5a1dc5929 --- /dev/null +++ b/cloud/dashboard/src/lib/auth-guards.ts @@ -0,0 +1,17 @@ +import { browser } from "$app/environment"; +import { authState } from "$lib/auth.svelte"; +import { type LoadEvent, redirect } from "@sveltejs/kit"; + +/** + * Redirects authenticated users away from auth pages (login, password, passkey) + * to manage in root page.ts routing + */ +export async function redirectIfAuthenticated(event: LoadEvent) { + if (!browser) return; + await event.parent(); + + const auth = authState(); + if (auth.userSessionToken.state === "authenticated") { + redirect(303, "/"); + } +} diff --git a/cloud/dashboard/src/lib/auth.svelte.ts b/cloud/dashboard/src/lib/auth.svelte.ts index ecff2f1a4..584fac674 100644 --- a/cloud/dashboard/src/lib/auth.svelte.ts +++ b/cloud/dashboard/src/lib/auth.svelte.ts @@ -1,4 +1,5 @@ import { browser } from "$app/environment"; +import { type RpcError } from "@protobuf-ts/runtime-rpc"; import type { Timestamp } from "@scufflecloud/proto/google/protobuf/timestamp.js"; import { type Device, @@ -7,14 +8,8 @@ import { type NewUserSessionToken, } from "@scufflecloud/proto/scufflecloud/core/v1/sessions_service.js"; import { User } from "@scufflecloud/proto/scufflecloud/core/v1/users.js"; -import { sessionsServiceClient, usersServiceClient } from "./grpcClient"; -import { arrayBufferToBase64 } from "./utils"; - -// Replace with Uint8Array.fromBase64 in the future -// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array/fromBase64 -function base64ToArrayBuffer(base64: string): ArrayBuffer { - return Uint8Array.from(atob(base64), c => c.charCodeAt(0)).buffer; -} +import { rpcErrorToString, sessionsServiceClient, usersServiceClient } from "./grpcClient"; +import { arrayBufferToBase64, base64ToArrayBuffer } from "./utils"; function timestampToDate(timestmap: Timestamp): Date | null { const seconds = parseInt(timestmap.seconds); @@ -191,25 +186,35 @@ export function authState() { /** * Call this function to initialize the auth state. This must be called prior to any other function. */ - initialize() { + async initialize() { if (!browser) return; + const time = Date.now(); + console.log("Initializing auth state"); + if (!deviceKeypair) { deviceKeypair = { state: "loading" }; - loadDeviceKeypair().then((keypair) => { + try { + const keypair = await loadDeviceKeypair(); deviceKeypair = { state: "loaded", data: keypair }; - }).catch((err) => { + console.log("Loaded device key"); + } catch (err) { console.error("Failed to load device key", err); deviceKeypair = { state: "loaded", data: null }; - }); + } } if (!user) { user = { state: "loading" }; - loadUser(userSessionToken).then((loadedUser) => { - user = loadedUser; - }); + try { + user = await loadUser(userSessionToken); + } catch (err) { + console.error("Failed to load user", err); + user = { state: "error", error: "Failed to load user" }; + } } + + console.log("Finished initializing auth state, took", Date.now() - time, "ms"); }, /** * Generates a new device, persists it and returns it. @@ -294,15 +299,15 @@ export function authState() { async logout() { if (!browser) return; - const call = sessionsServiceClient.invalidateUserSession({}); - const status = await call.status; - if (status.code === "OK") { + try { + const call = sessionsServiceClient.invalidateUserSession({}); + await call.status; + userSessionToken = { state: "unauthenticated" }; window.localStorage.removeItem("userSessionToken"); user = { state: "unauthenticated" }; - } else { - console.error("Failed to logout", status); - throw new Error("Failed to logout: " + status.detail); + } catch (err) { + throw new Error(rpcErrorToString(err as RpcError)); } }, /** @@ -337,6 +342,30 @@ export function authState() { this.handleNewUserSessionToken(response); } }, + + async reloadUserForMfa(): Promise { + user = { state: "loading" }; + + if (userSessionToken.state === "authenticated" && userSessionToken.data.mfaPending) { + const updatedToken: AuthState = { + state: "authenticated", + data: { + ...userSessionToken.data, + mfaPending: null, + }, + }; + + userSessionToken = updatedToken; + + const stored = { + ...updatedToken, + data: toStoredUserSessionToken(updatedToken.data), + }; + window.localStorage.setItem("userSessionToken", JSON.stringify(stored)); + } + + user = await loadUser(userSessionToken); + }, /** * Returns the device public key. If the keypair is not yet loaded or does not exist, null is returned. */ @@ -363,9 +392,26 @@ export function authState() { * Returns the current authenticated user or null if not authenticated. */ get user() { - if (!user) throw new Error("User not initialized"); + if (!user) return null; return user.state === "authenticated" ? user.data : null; }, + + /** + * Checks if the user has 2FA enabled. Not including recovery codes + */ + get hasPendingMfa(): boolean { + if (userSessionToken.state !== "authenticated") throw new Error("User not authenticated"); + + const mfaOptions = userSessionToken.data.mfaPending; + + // No pending MFA + if (!mfaOptions) { + return false; + } + + return mfaOptions.includes(MfaOption.TOTP) + || mfaOptions.includes(MfaOption.WEB_AUTHN); + }, }; } @@ -374,15 +420,19 @@ async function loadUser(state: AuthState): Promise { - const device = await authState().getDeviceOrInit(); - - const call = sessionsServiceClient.loginWithGoogle({ device }); - const status = await call.status; - - if (status.code === "OK") { - const response = await call.response; - window.location.href = response.authorizationUrl; - } else { - throw new Error(status.detail || "Google login failed"); - } -} - -/** - * Completes Google OAuth login flow with authorization code - */ -async function completeGoogleLogin(code: string, state: string): Promise { - const device = await authState().getDeviceOrInit(); - - const call = sessionsServiceClient.completeLoginWithGoogle({ - code, - state, - device, - }); - - const status = await call.status; - console.log("Google completion status:", status); - - if (status.code === "OK") { - const response = await call.response; - console.log("Google completion response:", response); - - // TODO: Implement /two-factor here - - // if (response.newUserSessionToken?.sessionMfaPending) { - // // Redirect to MFA page - // goto("/mfa"); - // return; - // } - - if (response.newUserSessionToken) { - await authState().handleNewUserSessionToken(response.newUserSessionToken); - goto("/projects"); - } else { - throw new Error("No session token received"); - } - } else { - throw new Error(status.detail || "Google login completion failed"); - } -} - -/** - * Checks URL parameters for OAuth callback. Place in $effect. - */ -export function handleGoogleOAuthCallback(): void { - const urlParams = new URLSearchParams(window.location.search); - const code = urlParams.get("code"); - const state = urlParams.get("state"); - - if (code && state) { - completeGoogleLogin(code, state).catch(console.error); - } -} - -export interface GoogleAuthProps { - loading: () => boolean; - error: () => string | null; - initiateLogin: () => Promise; - handleOAuthCallback: () => void; -} - -/** - * Hook for Google authentication with reactive state - */ -export function useGoogleAuth(): GoogleAuthProps { - let loading = $state(false); - let error = $state(null); - - return { - loading: () => loading, - error: () => error, - async initiateLogin() { - loading = true; - error = null; - try { - await initiateGoogleLogin(); - } catch (err) { - error = err instanceof Error ? err.message : "Google login failed"; - loading = false; - } - }, - - handleOAuthCallback: () => handleGoogleOAuthCallback(), - }; -} diff --git a/cloud/dashboard/src/lib/components/assets/all-assets.svelte b/cloud/dashboard/src/lib/components/assets/all-assets.svelte new file mode 100644 index 000000000..f34504d07 --- /dev/null +++ b/cloud/dashboard/src/lib/components/assets/all-assets.svelte @@ -0,0 +1,109 @@ + + +
+
+ + + +
+
+
+ {#each streams as stream, i (i)} + + {/each} +
+ +
+ + diff --git a/cloud/dashboard/src/lib/components/assets/asset-card.svelte b/cloud/dashboard/src/lib/components/assets/asset-card.svelte new file mode 100644 index 000000000..40661d00f --- /dev/null +++ b/cloud/dashboard/src/lib/components/assets/asset-card.svelte @@ -0,0 +1,125 @@ + + +
+
+
+ + +

{streamName}

+
+
+

{streamId}

+
+
+
+
+ {startTime} + +
+
+
+ {duration} + {endTime} + +
+
+
+ + diff --git a/cloud/dashboard/src/lib/components/assets/assets-header.svelte b/cloud/dashboard/src/lib/components/assets/assets-header.svelte new file mode 100644 index 000000000..45809e03d --- /dev/null +++ b/cloud/dashboard/src/lib/components/assets/assets-header.svelte @@ -0,0 +1,193 @@ + + +
+
+

Tab Headline

+

+ We're on a mission to revolutionize video streaming solutions with + cutting-edge tools and libraries. +

+
+ +
+ +
+
+ + diff --git a/cloud/dashboard/src/lib/components/assets/sliding-toggle.svelte b/cloud/dashboard/src/lib/components/assets/sliding-toggle.svelte new file mode 100644 index 000000000..57f83be59 --- /dev/null +++ b/cloud/dashboard/src/lib/components/assets/sliding-toggle.svelte @@ -0,0 +1,95 @@ + + +
+
+
+
+ + +
+
+ diff --git a/cloud/dashboard/src/lib/components/assets/time-filter-dropdown.svelte b/cloud/dashboard/src/lib/components/assets/time-filter-dropdown.svelte new file mode 100644 index 000000000..47a5a1b01 --- /dev/null +++ b/cloud/dashboard/src/lib/components/assets/time-filter-dropdown.svelte @@ -0,0 +1,217 @@ + + +
+ + + {#if $open} +
+ {#each timeFilters as filter (filter.id)} +
handleFilterSelect(filter.id)} + > +
+ {filter.icon} + {filter.name} + {#if filter.id === selectedFilter} + + + + {/if} +
+
+ {/each} +
+ {/if} +
+ + diff --git a/cloud/dashboard/src/lib/components/assets/types.ts b/cloud/dashboard/src/lib/components/assets/types.ts new file mode 100644 index 000000000..a53cf1ec7 --- /dev/null +++ b/cloud/dashboard/src/lib/components/assets/types.ts @@ -0,0 +1,8 @@ +export type TimelineDotVariant = "default" | "live" | "finished"; + +type DisplayMode = "GRID" | "LIST"; + +export const DISPLAY_MODES: Record = { + GRID: 0, + LIST: 1, +}; diff --git a/cloud/dashboard/src/lib/components/badge.svelte b/cloud/dashboard/src/lib/components/badge.svelte new file mode 100644 index 000000000..2ad6e180a --- /dev/null +++ b/cloud/dashboard/src/lib/components/badge.svelte @@ -0,0 +1,66 @@ + + + + + {@render children()} + + + diff --git a/cloud/dashboard/src/lib/components/inline-notification.svelte b/cloud/dashboard/src/lib/components/inline-notification.svelte new file mode 100644 index 000000000..c6b2b7333 --- /dev/null +++ b/cloud/dashboard/src/lib/components/inline-notification.svelte @@ -0,0 +1,138 @@ + + +{#if isVisible} +
+
+ +
+ +
+ {message} +
+
+{/if} + + diff --git a/cloud/dashboard/src/components/left-nav/consts.svelte.ts b/cloud/dashboard/src/lib/components/left-nav/consts.svelte.ts similarity index 100% rename from cloud/dashboard/src/components/left-nav/consts.svelte.ts rename to cloud/dashboard/src/lib/components/left-nav/consts.svelte.ts diff --git a/cloud/dashboard/src/components/left-nav/nav-item-base.svelte b/cloud/dashboard/src/lib/components/left-nav/nav-item-base.svelte similarity index 96% rename from cloud/dashboard/src/components/left-nav/nav-item-base.svelte rename to cloud/dashboard/src/lib/components/left-nav/nav-item-base.svelte index 38aeb4657..c95519c26 100644 --- a/cloud/dashboard/src/components/left-nav/nav-item-base.svelte +++ b/cloud/dashboard/src/lib/components/left-nav/nav-item-base.svelte @@ -1,5 +1,5 @@ + +
+ {@render children()} +
+ + diff --git a/cloud/dashboard/src/lib/components/login-or-divider.svelte b/cloud/dashboard/src/lib/components/login-or-divider.svelte new file mode 100644 index 000000000..6f53b19ba --- /dev/null +++ b/cloud/dashboard/src/lib/components/login-or-divider.svelte @@ -0,0 +1,28 @@ +
OR
+ + diff --git a/cloud/dashboard/src/lib/components/modal.svelte b/cloud/dashboard/src/lib/components/modal.svelte new file mode 100644 index 000000000..b33fd591f --- /dev/null +++ b/cloud/dashboard/src/lib/components/modal.svelte @@ -0,0 +1,209 @@ + + + +{#if triggerLabel} + +{/if} + +{#if $open} +
+
+
+ +
+
+ {#if onBack} + + {/if} + + {#if title} +

{title}

+ {/if} + + {#if !hideCloseButton} + + {/if} +
+ +
+ {@render children()} +
+
+
+{/if} + + diff --git a/cloud/dashboard/src/components/overview/world-map.svelte b/cloud/dashboard/src/lib/components/overview/world-map.svelte similarity index 100% rename from cloud/dashboard/src/components/overview/world-map.svelte rename to cloud/dashboard/src/lib/components/overview/world-map.svelte diff --git a/cloud/dashboard/src/components/right-nav/api-information.svelte b/cloud/dashboard/src/lib/components/right-nav/api-information.svelte similarity index 100% rename from cloud/dashboard/src/components/right-nav/api-information.svelte rename to cloud/dashboard/src/lib/components/right-nav/api-information.svelte diff --git a/cloud/dashboard/src/components/right-nav/right-nav.svelte b/cloud/dashboard/src/lib/components/right-nav/right-nav.svelte similarity index 59% rename from cloud/dashboard/src/components/right-nav/right-nav.svelte rename to cloud/dashboard/src/lib/components/right-nav/right-nav.svelte index 76327a183..5f9345d96 100644 --- a/cloud/dashboard/src/components/right-nav/right-nav.svelte +++ b/cloud/dashboard/src/lib/components/right-nav/right-nav.svelte @@ -1,9 +1,9 @@ + diff --git a/cloud/dashboard/src/components/select.svelte b/cloud/dashboard/src/lib/components/select.svelte similarity index 100% rename from cloud/dashboard/src/components/select.svelte rename to cloud/dashboard/src/lib/components/select.svelte diff --git a/cloud/dashboard/src/lib/components/settings-block.svelte b/cloud/dashboard/src/lib/components/settings-block.svelte new file mode 100644 index 000000000..8c03ca80e --- /dev/null +++ b/cloud/dashboard/src/lib/components/settings-block.svelte @@ -0,0 +1,75 @@ + + +
+
+
+ +
+
+

{title}

+ {#if subtitle} + {subtitle} + {/if} +
+
+
+ {@render children()} +
+
+ + diff --git a/cloud/dashboard/src/lib/components/settings-card.svelte b/cloud/dashboard/src/lib/components/settings-card.svelte new file mode 100644 index 000000000..1afc4e829 --- /dev/null +++ b/cloud/dashboard/src/lib/components/settings-card.svelte @@ -0,0 +1,137 @@ + + + +
+ {#if isLoading} +
+
+
+
+
+ {:else} +
+
+

{title}

+ {#if badge} + + {badge.label} + + {/if} +
+
+ + {#if description} +

{description}

+ {/if} + + {#if children} + {@render children()} + {/if} + {/if} +
+ + diff --git a/cloud/dashboard/src/lib/components/streams/all-video-streams.svelte b/cloud/dashboard/src/lib/components/streams/all-video-streams.svelte new file mode 100644 index 000000000..bb9ad4059 --- /dev/null +++ b/cloud/dashboard/src/lib/components/streams/all-video-streams.svelte @@ -0,0 +1,39 @@ + + +
+
+ +
+{#await streamedData} +
Loading...
+{:then resolvedStreams} + +{:catch error} +

{error.message}

+{/await} + + diff --git a/cloud/dashboard/src/lib/components/streams/assets/assets-tab.svelte b/cloud/dashboard/src/lib/components/streams/assets/assets-tab.svelte new file mode 100644 index 000000000..25b34746b --- /dev/null +++ b/cloud/dashboard/src/lib/components/streams/assets/assets-tab.svelte @@ -0,0 +1,27 @@ + + +
+ + + { + vodRecordingEnabled = checked; + console.log("VOD Asset recording toggled"); + }} + showStateText={true} + size="medium" + /> + + +
diff --git a/cloud/dashboard/src/components/streams/create-stream-modal.svelte b/cloud/dashboard/src/lib/components/streams/create-stream-modal.svelte similarity index 73% rename from cloud/dashboard/src/components/streams/create-stream-modal.svelte rename to cloud/dashboard/src/lib/components/streams/create-stream-modal.svelte index 7c8000fa2..7970b0987 100644 --- a/cloud/dashboard/src/components/streams/create-stream-modal.svelte +++ b/cloud/dashboard/src/lib/components/streams/create-stream-modal.svelte @@ -1,17 +1,17 @@ {#if open} @@ -53,20 +53,20 @@
- + -->
{/if} diff --git a/cloud/dashboard/src/components/streams/events/chart.svelte b/cloud/dashboard/src/lib/components/streams/events/chart.svelte similarity index 100% rename from cloud/dashboard/src/components/streams/events/chart.svelte rename to cloud/dashboard/src/lib/components/streams/events/chart.svelte diff --git a/cloud/dashboard/src/components/streams/events/events-legend.svelte b/cloud/dashboard/src/lib/components/streams/events/events-legend.svelte similarity index 100% rename from cloud/dashboard/src/components/streams/events/events-legend.svelte rename to cloud/dashboard/src/lib/components/streams/events/events-legend.svelte diff --git a/cloud/dashboard/src/components/streams/events/events-list.svelte b/cloud/dashboard/src/lib/components/streams/events/events-list.svelte similarity index 100% rename from cloud/dashboard/src/components/streams/events/events-list.svelte rename to cloud/dashboard/src/lib/components/streams/events/events-list.svelte diff --git a/cloud/dashboard/src/components/streams/events/events-tab.svelte b/cloud/dashboard/src/lib/components/streams/events/events-tab.svelte similarity index 100% rename from cloud/dashboard/src/components/streams/events/events-tab.svelte rename to cloud/dashboard/src/lib/components/streams/events/events-tab.svelte diff --git a/cloud/dashboard/src/components/streams/events/sample-data.ts b/cloud/dashboard/src/lib/components/streams/events/sample-data.ts similarity index 100% rename from cloud/dashboard/src/components/streams/events/sample-data.ts rename to cloud/dashboard/src/lib/components/streams/events/sample-data.ts diff --git a/cloud/dashboard/src/components/streams/events/shape-renderers.ts b/cloud/dashboard/src/lib/components/streams/events/shape-renderers.ts similarity index 100% rename from cloud/dashboard/src/components/streams/events/shape-renderers.ts rename to cloud/dashboard/src/lib/components/streams/events/shape-renderers.ts diff --git a/cloud/dashboard/src/components/streams/events/stream-select.svelte b/cloud/dashboard/src/lib/components/streams/events/stream-select.svelte similarity index 100% rename from cloud/dashboard/src/components/streams/events/stream-select.svelte rename to cloud/dashboard/src/lib/components/streams/events/stream-select.svelte diff --git a/cloud/dashboard/src/components/streams/events/types.ts b/cloud/dashboard/src/lib/components/streams/events/types.ts similarity index 100% rename from cloud/dashboard/src/components/streams/events/types.ts rename to cloud/dashboard/src/lib/components/streams/events/types.ts diff --git a/cloud/dashboard/src/components/streams/header.svelte b/cloud/dashboard/src/lib/components/streams/header.svelte similarity index 100% rename from cloud/dashboard/src/components/streams/header.svelte rename to cloud/dashboard/src/lib/components/streams/header.svelte diff --git a/cloud/dashboard/src/components/streams/new-stream.svelte b/cloud/dashboard/src/lib/components/streams/new-stream.svelte similarity index 100% rename from cloud/dashboard/src/components/streams/new-stream.svelte rename to cloud/dashboard/src/lib/components/streams/new-stream.svelte diff --git a/cloud/dashboard/src/components/streams/overview/overview-tab.svelte b/cloud/dashboard/src/lib/components/streams/overview/overview-tab.svelte similarity index 100% rename from cloud/dashboard/src/components/streams/overview/overview-tab.svelte rename to cloud/dashboard/src/lib/components/streams/overview/overview-tab.svelte diff --git a/cloud/dashboard/src/components/streams/overview/video-header.svelte b/cloud/dashboard/src/lib/components/streams/overview/video-header.svelte similarity index 100% rename from cloud/dashboard/src/components/streams/overview/video-header.svelte rename to cloud/dashboard/src/lib/components/streams/overview/video-header.svelte diff --git a/cloud/dashboard/src/components/streams/settings/settings-tab.svelte b/cloud/dashboard/src/lib/components/streams/settings/settings-tab.svelte similarity index 83% rename from cloud/dashboard/src/components/streams/settings/settings-tab.svelte rename to cloud/dashboard/src/lib/components/streams/settings/settings-tab.svelte index 8d700196f..5cf01b59a 100644 --- a/cloud/dashboard/src/components/streams/settings/settings-tab.svelte +++ b/cloud/dashboard/src/lib/components/streams/settings/settings-tab.svelte @@ -1,6 +1,6 @@
diff --git a/cloud/dashboard/src/components/streams/stream-detail-tabs.svelte b/cloud/dashboard/src/lib/components/streams/stream-detail-tabs.svelte similarity index 100% rename from cloud/dashboard/src/components/streams/stream-detail-tabs.svelte rename to cloud/dashboard/src/lib/components/streams/stream-detail-tabs.svelte diff --git a/cloud/dashboard/src/components/streams/streams-table.svelte b/cloud/dashboard/src/lib/components/streams/streams-table.svelte similarity index 92% rename from cloud/dashboard/src/components/streams/streams-table.svelte rename to cloud/dashboard/src/lib/components/streams/streams-table.svelte index 9294d78fa..e8b8e02e6 100644 --- a/cloud/dashboard/src/components/streams/streams-table.svelte +++ b/cloud/dashboard/src/lib/components/streams/streams-table.svelte @@ -4,7 +4,7 @@ import StreamStatusPill from "$lib/shared-components/stream-status-pill.svelte"; import type { VideoStream } from "./types"; - export let streams: VideoStream[]; + let { streams }: { streams: VideoStream[] } = $props(); // Map stream statuses to text that gets displayed here const iconMap = { @@ -25,18 +25,14 @@ {#each streams as stream (stream.id)} + {@const StatusIcon = iconMap[stream.status]}
- + + import { goto } from "$app/navigation"; + import { authState } from "$lib/auth.svelte"; import IconConfigureTab from "$lib/images/icon-configure-tab.svelte"; import Search from "$lib/images/search.svelte"; import { onMount } from "svelte"; @@ -122,9 +124,15 @@
- +