Skip to content

Commit ea7c9ba

Browse files
sea-snakesea-snake
committed
Redesign direct auth redirect screen
1 parent 38c745c commit ea7c9ba

File tree

5 files changed

+101
-81
lines changed

5 files changed

+101
-81
lines changed

‎src/frontend/src/lib/components/ui/AuthorizeHeader.svelte‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,21 +34,10 @@
3434
<img
3535
src={dapp.logoSrc}
3636
alt={`${dapp.name} logo`}
37-
class={[
38-
"h-16 max-w-50 object-contain",
39-
dapp.logoDarkSrc !== undefined && "dark:hidden",
40-
]}
37+
class={["h-20 max-w-50 object-contain"]}
4138
/>
42-
{#if dapp.logoDarkSrc !== undefined}
43-
<img
44-
src={dapp.logoDarkSrc}
45-
alt={`${dapp.name} logo`}
46-
class="hidden h-16 max-w-50 object-contain dark:block"
47-
aria-hidden="true"
48-
/>
49-
{/if}
5039
{:else}
51-
<div class="flex size-16 items-center justify-center" aria-hidden="true">
40+
<div class="flex size-20 items-center justify-center" aria-hidden="true">
5241
<GlobeIcon class="size-6" />
5342
</div>
5443
{/if}

‎src/frontend/src/lib/icons/caffeine_logo.svg‎

Lines changed: 1 addition & 7 deletions
Loading

‎src/frontend/src/lib/icons/caffeine_logo_dark.svg‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/frontend/src/lib/legacy/flows/dappsExplorer/dapps.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -649,7 +649,6 @@
649649
"https://dev.caffeine.ai"
650650
],
651651
"logo": "caffeine_logo.svg",
652-
"logoDark": "caffeine_logo_dark.svg",
653652
"certified_attributes": true
654653
}
655654
]

‎src/frontend/src/routes/(new-styling)/(resuming-channel)/resume-openid-authorize/+page.svelte‎

Lines changed: 98 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@
44
authorizationContextStore,
55
authorizationStore,
66
} from "$lib/stores/authorization.store";
7-
import Button from "$lib/components/ui/Button.svelte";
8-
import { ArrowRightIcon } from "@lucide/svelte";
97
import { getDapps } from "$lib/legacy/flows/dappsExplorer/dapps";
108
import { decodeJWT, findConfig } from "$lib/utils/openID";
119
import { AuthFlow } from "$lib/flows/authFlow.svelte";
@@ -25,6 +23,10 @@
2523
DirectOpenIdEvents,
2624
directOpenIdFunnel,
2725
} from "$lib/utils/analytics/DirectOpenIdFunnel";
26+
import { draw, fade, scale } from "svelte/transition";
27+
import { cubicOut } from "svelte/easing";
28+
import { triggerDropWaveAnimation } from "$lib/utils/animation-dispatcher";
29+
import Logo from "$lib/components/ui/Logo.svelte";
2830
2931
const dapps = getDapps();
3032
const dapp = $derived(
@@ -33,6 +35,8 @@
3335
),
3436
);
3537
38+
let animateTransitions = $state(false);
39+
3640
const createAttributesListener =
3741
(issuer: string) => async (request: JsonRequest) => {
3842
if (request.id === undefined || request.method !== "ii_attributes") {
@@ -138,6 +142,11 @@
138142
if (config === undefined) {
139143
return;
140144
}
145+
// Animate transitions and background
146+
animateTransitions = true;
147+
triggerDropWaveAnimation();
148+
149+
// Authenticate and respond to requests
141150
directOpenIdFunnel.addProperties({
142151
openid_issuer: config.issuer,
143152
});
@@ -165,57 +174,92 @@
165174
</script>
166175

167176
<div class="flex min-h-[100dvh] flex-col items-center justify-center px-8">
168-
{#if dapp?.logoSrc !== undefined}
169-
<img
170-
src={dapp.logoSrc}
171-
alt={$t`${dapp.name} logo`}
172-
class={[
173-
"mb-10 h-16 max-w-50 object-contain",
174-
dapp.logoDarkSrc !== undefined && "dark:hidden",
175-
]}
176-
/>
177-
{#if dapp.logoDarkSrc !== undefined}
178-
<img
179-
src={dapp.logoDarkSrc}
180-
alt={$t`${dapp.name} logo`}
181-
class="mb-10 hidden h-16 max-w-50 object-contain dark:block"
182-
aria-hidden="true"
183-
/>
184-
{/if}
177+
{#if animateTransitions}
178+
<div
179+
transition:scale={{ duration: 500, easing: cubicOut, start: 0.9 }}
180+
class="flex flex-col items-center justify-center"
181+
>
182+
{#if dapp?.logoSrc !== undefined}
183+
<div class="relative">
184+
<svg viewBox="0 0 92 92" width="92" height="92" class="mb-4">
185+
<path
186+
d="M 46 1 H 71 A 20 20 0 0 1 91 21 V 71 A 20 20 0 0 1 71 91 H 21 A 20 20 0 0 1 1 71 V 21 A 20 20 0 0 1 21 1 H 46"
187+
class="stroke-border-tertiary fill-none stroke-2"
188+
/>
189+
<g
190+
transition:fade|global={{
191+
duration: 500,
192+
easing: cubicOut,
193+
delay: 500,
194+
}}
195+
>
196+
<path
197+
transition:draw|global={{
198+
duration: 6000,
199+
easing: cubicOut,
200+
delay: 500,
201+
}}
202+
d="M 46 1 H 71 A 20 20 0 0 1 91 21 V 71 A 20 20 0 0 1 71 91 H 21 A 20 20 0 0 1 1 71 V 21 A 20 20 0 0 1 21 1 H 46"
203+
x="1"
204+
y="1"
205+
width="90"
206+
height="90"
207+
rx="20"
208+
ry="20"
209+
stroke-linecap="round"
210+
class="stroke-fg-primary fill-none stroke-2"
211+
/>
212+
</g>
213+
</svg>
214+
<img
215+
src={dapp.logoSrc}
216+
alt={$t`${dapp.name} logo`}
217+
class="absolute inset-1 size-[84px] rounded-[18px] object-cover"
218+
/>
219+
</div>
220+
{:else}
221+
<svg viewBox="0 0 92 92" width="92" height="92" class="mb-4">
222+
<circle
223+
cx="46"
224+
cy="46"
225+
r="45"
226+
stroke-width="2"
227+
class="stroke-border-tertiary fill-none stroke-2"
228+
/>
229+
<g
230+
transition:fade|global={{
231+
duration: 500,
232+
easing: cubicOut,
233+
delay: 500,
234+
}}
235+
>
236+
<circle
237+
transition:draw|global={{
238+
duration: 6000,
239+
easing: cubicOut,
240+
delay: 500,
241+
}}
242+
cx="46"
243+
cy="46"
244+
r="45"
245+
stroke-linecap="round"
246+
class="stroke-fg-primary origin-center -rotate-90 fill-none stroke-2"
247+
/>
248+
</g>
249+
</svg>
250+
{/if}
251+
<p class="text-text-primary mb-2 text-2xl font-medium">
252+
{$t`Signing in securely`}
253+
</p>
254+
<a
255+
href={window.location.origin}
256+
target="_blank"
257+
class="text-text-secondary flex flex-row items-center gap-2 text-base"
258+
>
259+
<span>{$t`Powered by`}</span>
260+
<Logo class="text-text-secondary h-2" />
261+
<span>{window.location.hostname}</span>
262+
</a>
263+
</div>
185264
{/if}
186-
<p class="text-text-secondary mb-1 text-xl font-semibold">
187-
{$t`Signing in securely`}
188-
</p>
189-
<p class="text-text-tertiary text-sm">{$t`This takes a few seconds.`}</p>
190-
<div class="bg-bg-quaternary my-6 h-0.5 w-full max-w-74 rounded-full">
191-
<div class="bg-fg-brand-primary animate-grow h-full rounded-full"></div>
192-
</div>
193-
<p class="text-text-secondary text-base">
194-
{$t`Powered by Internet Identity`}
195-
</p>
196-
<Button
197-
href={window.location.origin}
198-
target="_blank"
199-
variant="tertiary"
200-
class="mt-10"
201-
size="sm"
202-
>
203-
<span>{$t`How it works`}</span>
204-
<ArrowRightIcon class="size-4" />
205-
</Button>
206265
</div>
207-
208-
<style>
209-
@keyframes grow {
210-
from {
211-
width: 0;
212-
}
213-
to {
214-
width: 100%;
215-
}
216-
}
217-
218-
.animate-grow {
219-
animation: grow 6s ease-out forwards;
220-
}
221-
</style>

0 commit comments

Comments
 (0)