Skip to content

Commit 7b11cfc

Browse files
niemyjskiniemyjski
committed
next: improved unauthenticated views and refactored logo into component
1 parent 3611bba commit 7b11cfc

File tree

6 files changed

+158
-139
lines changed

6 files changed

+158
-139
lines changed

‎src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/Logo.svelte

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script lang="ts">
2+
import type { HTMLAttributes } from 'svelte/elements';
3+
4+
import logoDark from '$lib/assets/logo-dark.svg';
5+
import logo from '$lib/assets/logo.svg';
6+
import { cn } from '$lib/utils';
7+
8+
let { class: className, ...props }: HTMLAttributes<HTMLImageElement> = $props();
9+
</script>
10+
11+
<img alt="Exceptionless Logo" class={cn('"mx-auto dark:hidden" h-[100px]', className)} src={logo} {...props} />
12+
<img alt="Exceptionless Logo" class={cn('"mx-auto dark:block" hidden h-[100px]', className)} src={logoDark} {...props} />

‎src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Navbar.svelte

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
<script lang="ts">
22
import DarkModeButton from '$comp/DarkModeButton.svelte';
33
import Loading from '$comp/Loading.svelte';
4+
import Logo from '$comp/Logo.svelte';
45
import { A } from '$comp/typography';
56
import * as Avatar from '$comp/ui/avatar';
67
import { Button } from '$comp/ui/button';
78
import * as DropdownMenu from '$comp/ui/dropdown-menu';
89
import * as Sidebar from '$comp/ui/sidebar';
910
import { getGravatarFromCurrentUser } from '$features/users/gravatar.svelte';
1011
import logoSmall from '$lib/assets/exceptionless-48.png';
11-
import logoDark from '$lib/assets/logo-dark.svg';
12-
import logo from '$lib/assets/logo.svg';
1312
import { MediaQuery } from 'runed';
1413
import IconSearch from '~icons/mdi/search';
1514
@@ -33,10 +32,9 @@
3332
<div class="flex items-center justify-start">
3433
<Sidebar.Trigger variant="outline" class="size-9" />
3534

36-
<a class="ml-2 mr-14 flex min-w-[250px] dark:text-white lg:ml-3" href="./">
35+
<a class="ml-2 mr-14 flex dark:text-white md:min-w-[250px] lg:ml-3" href="./">
3736
{#if isMediumScreenQuery.matches}
38-
<img alt="Exceptionless Logo" class="absolute top-[0px] mr-3 h-[65px] dark:hidden" src={logo} />
39-
<img alt="Exceptionless Logo" class="absolute top-[0px] mr-3 hidden h-[65px] dark:block" src={logoDark} />
37+
<Logo class="absolute top-[0px] mr-3 h-[65px]" />
4038
{:else}
4139
<img alt="Exceptionless Logo" class="mr-3 h-8" src={logoSmall} />
4240
{/if}

‎src/Exceptionless.Web/ClientApp/src/routes/(auth)/+layout.svelte

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
11
<script lang="ts">
2-
import logoDark from '$lib/assets/logo-dark.svg';
3-
import logo from '$lib/assets/logo.svg';
4-
52
let { children } = $props();
63
</script>
74

8-
<div class="flex h-screen">
9-
<div class="m-auto w-full rounded-md p-6 shadow-md lg:max-w-lg">
10-
<img alt="Exceptionless Logo" class="mx-auto h-[100px] dark:hidden" src={logo} />
11-
<img alt="Exceptionless Logo" class="mx-auto hidden h-[100px] dark:block" src={logoDark} />
12-
13-
{@render children()}
14-
</div>
5+
<div class="flex h-screen w-full items-center justify-center">
6+
{@render children()}
157
</div>

‎src/Exceptionless.Web/ClientApp/src/routes/(auth)/login/+page.svelte

Lines changed: 94 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
import { page } from '$app/stores';
44
import ErrorMessage from '$comp/ErrorMessage.svelte';
55
import Loading from '$comp/Loading.svelte';
6-
import { A, H2, Muted, P } from '$comp/typography';
6+
import Logo from '$comp/Logo.svelte';
7+
import { A, Muted, P } from '$comp/typography';
78
import { Button } from '$comp/ui/button';
9+
import * as Card from '$comp/ui/card';
810
import * as Form from '$comp/ui/form';
911
import { Input } from '$comp/ui/input';
1012
import {
@@ -55,92 +57,98 @@
5557
const { enhance, form: formData, message, submitting } = form;
5658
</script>
5759

58-
<H2 class="mb-2 mt-4 text-center leading-9">Log in to your account</H2>
60+
<Card.Root class="mx-auto max-w-sm">
61+
<Card.Header>
62+
<Logo />
63+
<Card.Title class="text-center text-2xl">Log in to your account</Card.Title>
64+
</Card.Header>
65+
<Card.Content>
66+
<form method="POST" use:enhance>
67+
<ErrorMessage message={$message}></ErrorMessage>
68+
<Form.Field {form} name="email">
69+
<Form.Control>
70+
{#snippet children({ props })}
71+
<Form.Label>Email</Form.Label>
72+
<Input {...props} bind:value={$formData.email} type="email" placeholder="Enter email address" autocomplete="email" required />
73+
{/snippet}
74+
</Form.Control>
75+
<Form.Description />
76+
<Form.FieldErrors />
77+
</Form.Field>
78+
<Form.Field {form} name="password">
79+
<Form.Control>
80+
{#snippet children({ props })}
81+
<Form.Label
82+
>Password
83+
<Muted class="float-right">
84+
<A href="/forgot-password">Forgot password?</A>
85+
</Muted></Form.Label
86+
>
87+
<Input
88+
{...props}
89+
bind:value={$formData.password}
90+
type="password"
91+
placeholder="Enter password"
92+
autocomplete="current-password"
93+
maxlength={100}
94+
minlength={6}
95+
required
96+
/>
97+
{/snippet}
98+
</Form.Control>
99+
<Form.Description />
100+
<Form.FieldErrors />
101+
</Form.Field>
102+
<Form.Button>
103+
{#if $submitting}
104+
<Loading class="mr-2" variant="secondary"></Loading> Logging in...
105+
{:else}
106+
Login
107+
{/if}</Form.Button
108+
>
109+
</form>
59110

60-
<form method="POST" use:enhance>
61-
<ErrorMessage message={$message}></ErrorMessage>
62-
<Form.Field {form} name="email">
63-
<Form.Control>
64-
{#snippet children({ props })}
65-
<Form.Label>Email</Form.Label>
66-
<Input {...props} bind:value={$formData.email} type="email" placeholder="Enter email address" autocomplete="email" required />
67-
{/snippet}
68-
</Form.Control>
69-
<Form.Description />
70-
<Form.FieldErrors />
71-
</Form.Field>
72-
<Form.Field {form} name="password">
73-
<Form.Control>
74-
{#snippet children({ props })}
75-
<Form.Label
76-
>Password
77-
<Muted class="float-right">
78-
<A href="/forgot-password">Forgot password?</A>
79-
</Muted></Form.Label
80-
>
81-
<Input
82-
{...props}
83-
bind:value={$formData.password}
84-
type="password"
85-
placeholder="Enter password"
86-
autocomplete="current-password"
87-
maxlength={100}
88-
minlength={6}
89-
required
90-
/>
91-
{/snippet}
92-
</Form.Control>
93-
<Form.Description />
94-
<Form.FieldErrors />
95-
</Form.Field>
96-
<Form.Button>
97-
{#if $submitting}
98-
<Loading class="mr-2" variant="secondary"></Loading> Logging in...
99-
{:else}
100-
Login
101-
{/if}</Form.Button
102-
>
103-
</form>
104-
105-
{#if enableOAuthLogin}
106-
<div class="my-4 flex w-full items-center">
107-
<hr class="w-full" />
108-
<P class="px-3">OR</P>
109-
<hr class="w-full" />
110-
</div>
111-
<div class="auto-cols-2 grid grid-flow-col grid-rows-2 gap-4">
112-
{#if microsoftClientId}
113-
<Button aria-label="Login with Microsoft" onclick={() => liveLogin(redirectUrl)}>
114-
<IconMicrosoft /> Microsoft
115-
</Button>
116-
{/if}
117-
{#if googleClientId}
118-
<Button aria-label="Login with Google" onclick={() => googleLogin(redirectUrl)}>
119-
<IconGoogle /> Google
120-
</Button>
121-
{/if}
122-
{#if facebookClientId}
123-
<Button aria-label="Login with Facebook" onclick={() => facebookLogin(redirectUrl)}>
124-
<IconFacebook /> Facebook
125-
</Button>
111+
{#if enableOAuthLogin}
112+
<div class="my-4 flex w-full items-center">
113+
<hr class="w-full" />
114+
<P class="px-3">OR</P>
115+
<hr class="w-full" />
116+
</div>
117+
<div class="auto-cols-2 grid grid-flow-col grid-rows-2 gap-4">
118+
{#if microsoftClientId}
119+
<Button aria-label="Login with Microsoft" onclick={() => liveLogin(redirectUrl)}>
120+
<IconMicrosoft /> Microsoft
121+
</Button>
122+
{/if}
123+
{#if googleClientId}
124+
<Button aria-label="Login with Google" onclick={() => googleLogin(redirectUrl)}>
125+
<IconGoogle /> Google
126+
</Button>
127+
{/if}
128+
{#if facebookClientId}
129+
<Button aria-label="Login with Facebook" onclick={() => facebookLogin(redirectUrl)}>
130+
<IconFacebook /> Facebook
131+
</Button>
132+
{/if}
133+
{#if gitHubClientId}
134+
<Button aria-label="Login with GitHub" onclick={() => githubLogin(redirectUrl)}>
135+
<IconGitHub /> GitHub
136+
</Button>
137+
{/if}
138+
</div>
126139
{/if}
127-
{#if gitHubClientId}
128-
<Button aria-label="Login with GitHub" onclick={() => githubLogin(redirectUrl)}>
129-
<IconGitHub /> GitHub
130-
</Button>
131-
{/if}
132-
</div>
133-
{/if}
134140

135-
{#if enableAccountCreation}
136-
<P class="text-center text-sm">
137-
Not a member?
138-
<A href="/signup">Start a free trial</A>
139-
</P>
141+
{#if enableAccountCreation}
142+
<P class="text-center text-sm">
143+
Not a member?
144+
<A href="/signup">Start a free trial</A>
145+
</P>
140146

141-
<P class="text-center text-sm">
142-
By signing up, you agree to our <A href="https://exceptionless.com/privacy" target="_blank">Privacy Policy</A>
143-
and
144-
<A href="https://exceptionless.com/terms" target="_blank">Terms of Service</A>.
145-
</P>
146-
{/if}
147+
<P class="text-center text-sm">
148+
By signing up, you agree to our <A href="https://exceptionless.com/privacy" target="_blank">Privacy Policy</A>
149+
and
150+
<A href="https://exceptionless.com/terms" target="_blank">Terms of Service</A>.
151+
</P>
152+
{/if}
153+
</Card.Content>
154+
</Card.Root>

‎src/Exceptionless.Web/ClientApp/src/routes/(auth)/logout/+page.svelte

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
import { goto } from '$app/navigation';
33
import ErrorMessage from '$comp/ErrorMessage.svelte';
44
import Loading from '$comp/Loading.svelte';
5-
import { H2 } from '$comp/typography';
5+
import Logo from '$comp/Logo.svelte';
6+
import * as Card from '$comp/ui/card';
67
import * as Form from '$comp/ui/form';
78
import { accessToken, logout } from '$features/auth/index.svelte';
89
import { useFetchClient } from '@exceptionless/fetchclient';
@@ -32,15 +33,22 @@
3233
}
3334
</script>
3435

35-
<H2 class="mb-2 mt-4 text-center leading-9">Log out?</H2>
36-
<form class="space-y-2" onsubmit={onLogout}>
37-
<ErrorMessage {message}></ErrorMessage>
36+
<Card.Root class="mx-auto max-w-sm">
37+
<Card.Header>
38+
<Logo />
39+
<Card.Title class="text-center text-2xl">Log out?</Card.Title>
40+
</Card.Header>
41+
<Card.Content>
42+
<form onsubmit={onLogout}>
43+
<ErrorMessage {message}></ErrorMessage>
3844

39-
<Form.Button>
40-
{#if client.loading}
41-
<Loading class="mr-2" variant="secondary"></Loading> Logging out...
42-
{:else}
43-
Logout
44-
{/if}
45-
</Form.Button>
46-
</form>
45+
<Form.Button>
46+
{#if client.loading}
47+
<Loading class="mr-2" variant="secondary"></Loading> Logging out...
48+
{:else}
49+
Logout
50+
{/if}
51+
</Form.Button>
52+
</form>
53+
</Card.Content>
54+
</Card.Root>

‎src/Exceptionless.Web/ClientApp/src/routes/status/+page.svelte

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
import { goto } from '$app/navigation';
33
import { page } from '$app/stores';
44
import Loading from '$comp/Loading.svelte';
5-
import { H2, P } from '$comp/typography';
5+
import Logo from '$comp/Logo.svelte';
6+
import { P } from '$comp/typography';
7+
import * as Card from '$comp/ui/card';
68
import { getHealthQuery } from '$features/status/api.svelte';
7-
import logoDark from '$lib/assets/logo-dark.svg';
8-
import logo from '$lib/assets/logo.svg';
99
1010
let redirect = $page.url.searchParams.get('redirect');
1111
@@ -17,29 +17,30 @@
1717
});
1818
</script>
1919

20-
<div class="flex h-screen">
21-
<div class="m-auto w-full rounded-md p-6 shadow-md lg:max-w-lg">
22-
<img alt="Exceptionless Logo" class="mx-auto h-[100px] dark:hidden" src={logo} />
23-
<img alt="Exceptionless Logo" class="mx-auto hidden h-[100px] dark:block" src={logoDark} />
24-
25-
<H2 class="mb-2 mt-4 text-center leading-9">Service Status</H2>
26-
27-
<P class="text-center text-sm">
28-
{#if healthResponse.isLoading}
29-
<Loading /> Checking service status...
30-
{:else if healthResponse.isSuccess}
31-
Service is healthy.
32-
{:else}
33-
We're sorry but the website is currently undergoing maintenance.
34-
{#if redirect}
35-
You'll be automatically redirected when the maintenance is completed.
20+
<div class="flex h-screen w-full items-center justify-center">
21+
<Card.Root class="mx-auto max-w-sm">
22+
<Card.Header>
23+
<Logo />
24+
<Card.Title class="text-center text-2xl">Service Status</Card.Title>
25+
</Card.Header>
26+
<Card.Content>
27+
<P class="text-center text-sm">
28+
{#if healthResponse.isLoading}
29+
<Loading /> Checking service status...
30+
{:else if healthResponse.isSuccess}
31+
Service is healthy.
32+
{:else}
33+
We're sorry but the website is currently undergoing maintenance.
34+
{#if redirect}
35+
You'll be automatically redirected when the maintenance is completed.
36+
{/if}
3637
{/if}
38+
</P>
39+
{#if healthResponse.isLoading || healthResponse.isSuccess}
40+
<P class="text-center text-sm">If you are currently experiencing an issue please contact support.</P>
41+
{:else}
42+
<P class="text-center text-sm">Please contact support for more information.</P>
3743
{/if}
38-
</P>
39-
{#if healthResponse.isLoading || healthResponse.isSuccess}
40-
<P class="text-center text-sm">If you are currently experiencing an issue please contact support.</P>
41-
{:else}
42-
<P class="text-center text-sm">Please contact support for more information.</P>
43-
{/if}
44-
</div>
44+
</Card.Content>
45+
</Card.Root>
4546
</div>

0 commit comments

Comments
 (0)