Skip to content

Commit 3611a9e

Browse files
sea-snakesea-snake
authored
Custom unsupported page for users trying to sign in from within X. (#3520)
Custom unsupported page for users trying to sign in from within X. # Changes - Move generic unsupported page as is into `components/views/Generic.svelte`. - Create `components/views/X.svelte` for X specific instructions. - Create `Toolbar*` components for illustrative guidance in above instructions. <img width="236" height="512" alt="image" src="https://github.com/user-attachments/assets/732d1da7-68ba-4534-9f29-61cd17e59f60" /> <!-- SCREENSHOTS REPORT START --> <!-- SCREENSHOTS REPORT STOP -->
1 parent 8f39819 commit 3611a9e

File tree

6 files changed

+254
-63
lines changed

6 files changed

+254
-63
lines changed

‎src/frontend/src/routes/(new-styling)/unsupported/+page.svelte‎

Lines changed: 9 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,12 @@
11
<script lang="ts">
2-
import { SUPPORT_URL, UNSUPPORTED_BROWSER_SUPPORT_URL } from "$lib/config";
3-
import Header from "$lib/components/layout/Header.svelte";
4-
import { ArrowRightIcon, TriangleAlertIcon } from "@lucide/svelte";
5-
import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
6-
import { t } from "$lib/stores/locale.store";
7-
import { Trans } from "$lib/components/locale";
8-
import Button from "$lib/components/ui/Button.svelte";
9-
</script>
2+
import XBrowser from "./components/views/XBrowser.svelte";
3+
import Generic from "./components/views/Generic.svelte";
104
11-
<div class="flex min-h-[100dvh] flex-col" data-page="new-unsupported-view">
12-
<div class="h-[env(safe-area-inset-top)]"></div>
5+
const isX = /\bTwitter/i.test(navigator.userAgent);
6+
</script>
137

14-
<Header />
15-
<div class="flex flex-1 flex-col items-center justify-center">
16-
<div
17-
class="flex flex-1 flex-col items-stretch justify-end p-4 sm:max-w-100 sm:items-center sm:justify-center"
18-
>
19-
<div class="mb-8 flex flex-1 flex-col justify-center sm:flex-none">
20-
<FeaturedIcon size="lg" variant="error" class="mb-4 self-start">
21-
<TriangleAlertIcon size="1.25rem" class="text-fg-warning-primary" />
22-
</FeaturedIcon>
23-
<h1 class="text-text-primary mb-3 text-left text-2xl font-medium">
24-
{$t`Unsupported Browser`}
25-
</h1>
26-
<p class="text-text-primary mb-5 text-left">
27-
{$t`It looks like you're trying to sign in from inside an app (such as X, Telegram, or Instagram). This app's built-in browser is not supported.`}
28-
</p>
29-
<div>
30-
<p class="text-text-primary mb-3 text-left">
31-
<strong>{$t`To continue:`}</strong>
32-
</p>
33-
<ol
34-
class="text-text-tertiary mb-5 list-decimal space-y-2 pl-6 text-left text-base font-medium"
35-
>
36-
<li>{$t`Long-press the link that opened this page.`}</li>
37-
<li>
38-
<Trans>
39-
Select <span class="text-text-primary font-semibold"
40-
>Open in Safari</span
41-
>
42-
or
43-
<span class="text-text-primary font-semibold"
44-
>Open in Chrome</span
45-
>.
46-
</Trans>
47-
</li>
48-
<li>{$t`Sign in there.`}</li>
49-
</ol>
50-
</div>
51-
<p class="self-center">
52-
<Button
53-
href={UNSUPPORTED_BROWSER_SUPPORT_URL}
54-
target="_blank"
55-
rel="noopener noreferrer"
56-
variant="tertiary"
57-
size="sm"
58-
>
59-
<span>{$t`Learn how to open links in your browser`}</span>
60-
<ArrowRightIcon class="size-4" />
61-
</Button>
62-
</p>
63-
</div>
64-
</div>
65-
</div>
66-
</div>
8+
{#if isX}
9+
<XBrowser />
10+
{:else}
11+
<Generic />
12+
{/if}

‎src/frontend/src/routes/(new-styling)/unsupported/components/ui/Toolbar.svelte‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script lang="ts">
2+
import type { SvelteHTMLElements } from "svelte/elements";
3+
4+
const {
5+
children,
6+
class: className,
7+
...props
8+
}: SvelteHTMLElements["div"] = $props();
9+
</script>
10+
11+
<div
12+
{...props}
13+
class={[
14+
"bg-surface-light-50 dark:bg-surface-dark-900 pointer-events-none flex flex-row gap-2 rounded-xl p-2.5",
15+
className,
16+
]}
17+
>
18+
{@render children?.()}
19+
</div>

‎src/frontend/src/routes/(new-styling)/unsupported/components/ui/ToolbarButton.svelte‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script lang="ts">
2+
import type { SvelteHTMLElements } from "svelte/elements";
3+
4+
const {
5+
children,
6+
class: className,
7+
...props
8+
}: SvelteHTMLElements["div"] = $props();
9+
</script>
10+
11+
<div
12+
{...props}
13+
class={[
14+
"bg-surface-light-200 dark:bg-surface-dark-700 text-text-primary flex h-9 min-w-9 items-center justify-center rounded-full",
15+
className,
16+
]}
17+
>
18+
{@render children?.()}
19+
</div>

‎src/frontend/src/routes/(new-styling)/unsupported/components/ui/ToolbarHighlight.svelte‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script lang="ts">
2+
import type { SvelteHTMLElements } from "svelte/elements";
3+
4+
const {
5+
children,
6+
class: className,
7+
...props
8+
}: SvelteHTMLElements["div"] = $props();
9+
</script>
10+
11+
<div {...props} class={["relative", className]}>
12+
{@render children?.()}
13+
<div
14+
class="absolute -inset-[5px] rounded-full border-[1px] border-blue-700 dark:border-blue-300"
15+
></div>
16+
<div
17+
class="absolute -inset-[10px] rounded-full border-[0.75px] border-blue-500 dark:border-blue-500"
18+
></div>
19+
<div
20+
class="absolute -inset-[14px] rounded-full border-[0.5px] border-blue-300 dark:border-blue-700"
21+
></div>
22+
<div
23+
class="absolute -inset-[18px] rounded-full border-[0.25px] border-blue-200 dark:border-blue-800"
24+
></div>
25+
</div>

‎src/frontend/src/routes/(new-styling)/unsupported/components/views/Generic.svelte‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script lang="ts">
2+
import { UNSUPPORTED_BROWSER_SUPPORT_URL } from "$lib/config";
3+
import { ArrowRightIcon, TriangleAlertIcon } from "@lucide/svelte";
4+
import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
5+
import { t } from "$lib/stores/locale.store";
6+
import { Trans } from "$lib/components/locale";
7+
import Header from "$lib/components/layout/Header.svelte";
8+
import Button from "$lib/components/ui/Button.svelte";
9+
</script>
10+
11+
<div class="flex min-h-[100dvh] flex-col">
12+
<div class="h-[env(safe-area-inset-top)]"></div>
13+
<Header />
14+
<div
15+
class="mx-auto mt-auto flex max-w-110 flex-col sm:mb-auto sm:px-6 sm:py-6"
16+
>
17+
<div class="flex flex-1 flex-col items-center justify-center">
18+
<div
19+
class="flex flex-1 flex-col items-stretch justify-end p-4 sm:max-w-100 sm:items-center sm:justify-center"
20+
>
21+
<div class="mb-8 flex flex-1 flex-col justify-center sm:flex-none">
22+
<FeaturedIcon size="lg" variant="error" class="mb-4 self-start">
23+
<TriangleAlertIcon size="1.25rem" class="text-fg-warning-primary" />
24+
</FeaturedIcon>
25+
<h1 class="text-text-primary mb-3 text-left text-2xl font-medium">
26+
{$t`Unsupported Browser`}
27+
</h1>
28+
<p class="text-text-primary mb-5 text-left">
29+
{$t`It looks like you're trying to sign in from inside an app (such as X, Telegram, or Instagram). This app's built-in browser is not supported.`}
30+
</p>
31+
<div>
32+
<p class="text-text-primary mb-3 text-left">
33+
<strong>{$t`To continue:`}</strong>
34+
</p>
35+
<ol
36+
class="text-text-tertiary mb-5 list-decimal space-y-2 pl-6 text-left text-base font-medium"
37+
>
38+
<li>{$t`Long-press the link that opened this page.`}</li>
39+
<li>
40+
<Trans>
41+
Select <span class="text-text-primary font-semibold"
42+
>Open in Safari</span
43+
>
44+
or
45+
<span class="text-text-primary font-semibold"
46+
>Open in Chrome</span
47+
>.
48+
</Trans>
49+
</li>
50+
<li>{$t`Sign in there.`}</li>
51+
</ol>
52+
</div>
53+
<p class="self-center">
54+
<Button
55+
href={UNSUPPORTED_BROWSER_SUPPORT_URL}
56+
target="_blank"
57+
rel="noopener noreferrer"
58+
variant="tertiary"
59+
size="sm"
60+
>
61+
<span>{$t`Learn how to open links in your browser`}</span>
62+
<ArrowRightIcon class="size-4" />
63+
</Button>
64+
</p>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
<div class="h-[env(safe-area-inset-bottom)]"></div>
70+
</div>

‎src/frontend/src/routes/(new-styling)/unsupported/components/views/XBrowser.svelte‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<script lang="ts">
2+
import { t } from "$lib/stores/locale.store";
3+
import { Trans } from "$lib/components/locale";
4+
import {
5+
ChevronLeftIcon,
6+
PanelTopIcon,
7+
RotateCwIcon,
8+
XIcon,
9+
} from "@lucide/svelte";
10+
import FeaturedIcon from "$lib/components/ui/FeaturedIcon.svelte";
11+
import Toolbar from "../ui/Toolbar.svelte";
12+
import ToolbarButton from "../ui/ToolbarButton.svelte";
13+
import ToolbarHighlight from "../ui/ToolbarHighlight.svelte";
14+
</script>
15+
16+
<div class="flex min-h-[100dvh] flex-col">
17+
<div class="mx-auto mt-auto flex max-w-100 flex-col px-6 sm:mb-auto sm:py-6">
18+
<div class="limited-height mb-4">
19+
<FeaturedIcon size="md">
20+
<PanelTopIcon class="size-5" />
21+
</FeaturedIcon>
22+
</div>
23+
<h1 class="text-text-primary mb-3 text-2xl font-medium">
24+
{$t`Open in browser to continue`}
25+
</h1>
26+
<p class="text-text-tertiary mb-5 text-base font-medium">
27+
<Trans>
28+
It looks like you're trying to sign in from a social app. Follow these
29+
steps to continue:
30+
</Trans>
31+
</p>
32+
<ol class="flex flex-col gap-3">
33+
<li
34+
class="bg-surface-light-200 dark:bg-surface-dark-700 rounded-xl px-3 pt-5 pb-4"
35+
>
36+
<div class="mb-3 flex flex-row items-center gap-3">
37+
<div
38+
class="bg-fg-primary-inversed text-fg-secondary size-8 rounded-full text-center leading-8"
39+
aria-hidden="true"
40+
>
41+
1
42+
</div>
43+
<h2 class="text-text-primary text-lg">{$t`Return to application`}</h2>
44+
</div>
45+
<p class="text-text-primary mb-5 text-sm">
46+
<Trans>
47+
Tap on the highlighted <b>back</b> button.
48+
</Trans>
49+
</p>
50+
<Toolbar aria-hidden="true">
51+
<ToolbarButton>
52+
<XIcon class="size-4" />
53+
</ToolbarButton>
54+
<ToolbarHighlight>
55+
<ToolbarButton>
56+
<ChevronLeftIcon class="size-4" />
57+
</ToolbarButton>
58+
</ToolbarHighlight>
59+
<ToolbarButton class="mx-auto px-3 text-[8px]">
60+
{window.location.host}
61+
</ToolbarButton>
62+
<ToolbarButton class="invisible" />
63+
<ToolbarButton>
64+
<RotateCwIcon class="size-4" />
65+
</ToolbarButton>
66+
</Toolbar>
67+
</li>
68+
<li
69+
class="bg-surface-light-200 dark:bg-surface-dark-700 rounded-xl px-3 pt-5 pb-4"
70+
>
71+
<div class="mb-3 flex flex-row items-center gap-3">
72+
<div
73+
class="bg-fg-primary-inversed text-fg-secondary size-8 rounded-full text-center leading-8"
74+
aria-hidden="true"
75+
>
76+
2
77+
</div>
78+
<h2 class="text-text-primary text-lg">{$t`Open in browser`}</h2>
79+
</div>
80+
<p class="text-text-primary mb-5 text-sm">
81+
<Trans>
82+
Tap on the <b>address bar</b> and <b>open in browser</b>.
83+
</Trans>
84+
</p>
85+
<Toolbar aria-hidden="true">
86+
<ToolbarButton>
87+
<XIcon class="size-4" />
88+
</ToolbarButton>
89+
<ToolbarButton>
90+
<ChevronLeftIcon class="size-4" />
91+
</ToolbarButton>
92+
<ToolbarHighlight class="mx-auto">
93+
<ToolbarButton class="px-3 text-[8px]">example.com</ToolbarButton>
94+
</ToolbarHighlight>
95+
<ToolbarButton class="invisible" />
96+
<ToolbarButton>
97+
<RotateCwIcon class="size-4" />
98+
</ToolbarButton>
99+
</Toolbar>
100+
</li>
101+
</ol>
102+
<div class="max-sm:h-20"></div>
103+
</div>
104+
</div>
105+
106+
<style>
107+
@media (max-height: 640px) {
108+
.limited-height {
109+
display: none;
110+
}
111+
}
112+
</style>

0 commit comments

Comments
 (0)