Skip to content

Commit 818779c

Browse files
authored
Implement protocol error screens (#3132)
1 parent e52d938 commit 818779c

File tree

4 files changed

+62
-21
lines changed

4 files changed

+62
-21
lines changed

src/frontend/src/lib/app.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -247,12 +247,12 @@ a:not(:disabled) {
247247
--fg-brand-secondary: var(--color-brand-500);
248248
--fg-brand-secondary_alt: var(--color-surface-light-600);
249249
--fg-brand-secondary_hover: var(--color-surface-light-500);
250-
--fg-error-primary: var(--color-error-500);
251-
--fg-error-secondary: var(--color-error-400);
252-
--fg-warning-primary: var(--color-warning-500);
253-
--fg-warning-secondary: var(--color-warning-400);
254-
--fg-success-primary: var(--color-success-500);
255-
--fg-success-secondary: var(--color-success-400);
250+
--fg-error-primary: var(--color-error-400);
251+
--fg-error-secondary: var(--color-error-500);
252+
--fg-warning-primary: var(--color-warning-400);
253+
--fg-warning-secondary: var(--color-warning-500);
254+
--fg-success-primary: var(--color-success-400);
255+
--fg-success-secondary: var(--color-success-500);
256256

257257
/* Background colors */
258258
--bg-primary: var(--color-surface-dark-950);

src/frontend/src/lib/components/ui/Dialog.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
closedby={closeOnOutsideClick ? "any" : "none"}
9191
class={[
9292
// Layout base/dialog/bottomsheet
93-
"fixed flex max-w-full flex-col overflow-hidden bg-transparent",
93+
"fixed flex max-w-full flex-col overflow-hidden bg-transparent outline-none",
9494
"sm:m-auto sm:min-h-[100dvh] sm:w-100",
9595
"w-full max-sm:top-auto max-sm:bottom-0",
9696
// Backdrop base/visible

src/frontend/src/lib/components/ui/FeaturedIcon.svelte

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,39 @@
11
<script lang="ts">
22
import type { HTMLAttributes } from "svelte/elements";
33
4+
type Size = "sm" | "md" | "lg" | "xl";
5+
type Variant = "info" | "success" | "warning" | "error";
6+
47
type Props = HTMLAttributes<HTMLDivElement> & {
5-
size?: keyof typeof sizes;
8+
size?: Size;
9+
variant?: Variant;
610
};
711
8-
const { children, class: className, size = "md", ...props }: Props = $props();
9-
10-
const sizes = {
11-
sm: "size-8",
12-
md: "size-10",
13-
lg: "size-12",
14-
xl: "size-14",
15-
};
12+
const {
13+
children,
14+
class: className,
15+
size = "md",
16+
variant = "info",
17+
...props
18+
}: Props = $props();
1619
</script>
1720

1821
<div
1922
{...props}
2023
class={[
21-
"bg-bg-primary text-fg-secondary border-border-secondary flex shrink-0 items-center justify-center rounded-lg border",
22-
sizes[size],
24+
"flex shrink-0 items-center justify-center",
25+
{
26+
info: "bg-bg-primary text-fg-secondary ring-border-secondary rounded-lg ring",
27+
success: "bg-bg-success-primary text-fg-success-primary rounded-full",
28+
warning: "bg-bg-warning-primary text-fg-warning-primary rounded-full",
29+
error: "bg-bg-error-primary text-fg-error-primary rounded-full",
30+
}[variant],
31+
{
32+
sm: "size-8",
33+
md: "size-10",
34+
lg: "size-12",
35+
xl: "size-14",
36+
}[size],
2337
className,
2438
]}
2539
>

src/frontend/src/routes/(new-styling)/authorize/+layout.svelte

Lines changed: 30 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@
1111
import { fly, scale } from "svelte/transition";
1212
import { nonNullish } from "@dfinity/utils";
1313
import { lastUsedIdentitiesStore } from "$lib/stores/last-used-identities.store";
14+
import Dialog from "$lib/components/ui/Dialog.svelte";
15+
import Button from "$lib/components/ui/Button.svelte";
16+
import { RotateCcwIcon, CircleAlertIcon } from "@lucide/svelte";
17+
import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
1418
1519
const { children }: LayoutProps = $props();
1620
@@ -56,8 +60,31 @@
5660
<p class="text-text-secondary text-lg">Redirecting to the app</p>
5761
</div>
5862
{:else if status === "orphan" || status === "closed" || status === "invalid" || status === "failure"}
59-
<div>Error</div>
60-
{:else if status === "success"}
61-
<div>Success</div>
63+
{@const title = {
64+
orphan: "Missing request",
65+
closed: "Connection closed",
66+
invalid: "Invalid request",
67+
failure: "Something went wrong",
68+
}[status]}
69+
{@const description = {
70+
orphan:
71+
"There was an issue connecting with the application. Try a different browser; if the issue persists, contact the developer.",
72+
closed:
73+
"It seems like the connection with the service could not be established.",
74+
invalid: "It seems like an invalid authentication request was received.",
75+
failure:
76+
"Something went wrong during authentication. Authenticating service was notified and you may close this page.",
77+
}[status]}
78+
<Dialog>
79+
<FeaturedIcon size="lg" variant="error" class="mb-4 self-start">
80+
<CircleAlertIcon size="1.5rem" />
81+
</FeaturedIcon>
82+
<h1 class="text-text-primary mb-3 text-2xl font-medium">{title}</h1>
83+
<p class="text-md text-text-tertiary mb-6 font-medium">{description}</p>
84+
<Button onclick={() => window.close()} variant="secondary">
85+
<RotateCcwIcon size="1rem" />
86+
Return to app
87+
</Button>
88+
</Dialog>
6289
{/if}
6390
</CenterLayout>

0 commit comments

Comments
 (0)