From 87d84b922fa4aee1a81d428dd9055973ba014aef Mon Sep 17 00:00:00 2001 From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> Date: Wed, 15 Mar 2023 22:38:29 +0100 Subject: [PATCH] feat(web): improve /auth pages (#1969) * feat(web): improve /auth pages * invalidate load functions after login * handle login server errors more graceful * add loading state to oauth button --- .../forms/admin-registration-form.svelte | 148 +++++++------- .../forms/change-password-form.svelte | 89 ++++---- .../lib/components/forms/login-form.svelte | 191 +++++++++--------- .../fullscreen-container.svelte | 29 +++ web/src/lib/constants.ts | 5 +- .../auth/change-password/+page.server.ts | 31 ++- .../routes/auth/change-password/+page.svelte | 25 ++- web/src/routes/auth/login/+page.server.ts | 20 +- web/src/routes/auth/login/+page.svelte | 24 ++- web/src/routes/auth/register/+page.svelte | 13 +- 10 files changed, 299 insertions(+), 276 deletions(-) create mode 100644 web/src/lib/components/shared-components/fullscreen-container.svelte diff --git a/web/src/lib/components/forms/admin-registration-form.svelte b/web/src/lib/components/forms/admin-registration-form.svelte index b4e706d5fe..526958b593 100644 --- a/web/src/lib/components/forms/admin-registration-form.svelte +++ b/web/src/lib/components/forms/admin-registration-form.svelte @@ -1,14 +1,11 @@ -
-
- -

- Admin Registration -

-

- Since you are the first user on the system, you will be assigned as the Admin and are - responsible for administrative tasks, and additional users will be created by you. -

+
+
+ +
- -
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+ {#if error} +

{error}

+ {/if} - {#if error} -

{error}

- {/if} - - {#if success} -
-

Admin account has been registered

-

- Login -

-
- {/if} - -
- -
-
-
+
+ +
+ diff --git a/web/src/lib/components/forms/change-password-form.svelte b/web/src/lib/components/forms/change-password-form.svelte index f207aec1ab..fe8a824435 100644 --- a/web/src/lib/components/forms/change-password-form.svelte +++ b/web/src/lib/components/forms/change-password-form.svelte @@ -1,7 +1,6 @@ -
-
- -

- Change Password -

- -

- Hi {user.firstName} - {user.lastName} ({user.email}), -
-
- This is either the first time you are signing into the system or a request has been made to change - your password. Please enter the new password below. -

+
+
+ +
- -
- - -
+
+ + +
-
- - -
+ {#if error} +

{error}

+ {/if} - {#if error} -

{error}

- {/if} - - {#if success} -

{success}

- {/if} -
- -
-
-
+ {#if success} +

{success}

+ {/if} +
+ +
+ diff --git a/web/src/lib/components/forms/login-form.svelte b/web/src/lib/components/forms/login-form.svelte index 94aec4605e..962a7d0d27 100644 --- a/web/src/lib/components/forms/login-form.svelte +++ b/web/src/lib/components/forms/login-form.svelte @@ -1,33 +1,33 @@ -
-
- -

Login

-
- - {#if loginPageMessage} -

- {@html loginPageMessage} -

- {/if} - - {#if authConfig.passwordLoginEnabled} -
- {#if error} -

- {error} -

- {/if} - -
- - -
- -
- - -
- -
- -
-
- {/if} - - {#if authConfig.enabled} - {#if authConfig.passwordLoginEnabled} -
-
- - or - -
+{#if authConfig.passwordLoginEnabled} +
+ {#if error} +

+ {error} +

{/if} -
- {#if oauthError} -

{oauthError}

- {/if} - - - + +
+ + +
+ +
+ + +
+ +
+ +
+ +{/if} + +{#if authConfig.enabled} + {#if authConfig.passwordLoginEnabled} +
+
+ + or +
{/if} +
+ {#if oauthError} +

{oauthError}

+ {/if} + + + +
+{/if} - {#if !authConfig.enabled && !authConfig.passwordLoginEnabled} -

Login has been disabled.

- {/if} -
+{#if !authConfig.enabled && !authConfig.passwordLoginEnabled} +

Login has been disabled.

+{/if} diff --git a/web/src/lib/components/shared-components/fullscreen-container.svelte b/web/src/lib/components/shared-components/fullscreen-container.svelte new file mode 100644 index 0000000000..c37e93d554 --- /dev/null +++ b/web/src/lib/components/shared-components/fullscreen-container.svelte @@ -0,0 +1,29 @@ + + +
+
+
+ +

+ {title} +

+
+ + {#if showMessage} +
+ +
+ {/if} + + +
+
diff --git a/web/src/lib/constants.ts b/web/src/lib/constants.ts index b31eda302f..860f40dec9 100644 --- a/web/src/lib/constants.ts +++ b/web/src/lib/constants.ts @@ -14,5 +14,8 @@ export enum AppRoute { SHARING = '/sharing', SEARCH = '/search', - AUTH_LOGIN = '/auth/login' + AUTH_LOGIN = '/auth/login', + AUTH_LOGOUT = '/auth/logout', + AUTH_REGISTER = '/auth/register', + AUTH_CHANGE_PASSWORD = '/auth/change-password' } diff --git a/web/src/routes/auth/change-password/+page.server.ts b/web/src/routes/auth/change-password/+page.server.ts index c23726ada0..b7ee95ded6 100644 --- a/web/src/routes/auth/change-password/+page.server.ts +++ b/web/src/routes/auth/change-password/+page.server.ts @@ -1,23 +1,18 @@ -export const prerender = false; - +import { AppRoute } from '$lib/constants'; import { redirect } from '@sveltejs/kit'; import type { PageServerLoad } from './$types'; -export const load = (async ({ locals: { api } }) => { - try { - const { data: userInfo } = await api.userApi.getMyUserInfo(); - - if (userInfo.shouldChangePassword) { - return { - user: userInfo, - meta: { - title: 'Change Password' - } - }; - } else { - throw redirect(302, '/photos'); - } - } catch (e) { - throw redirect(302, '/auth/login'); +export const load = (async ({ locals: { user } }) => { + if (!user) { + throw redirect(302, AppRoute.AUTH_LOGIN); + } else if (!user.shouldChangePassword) { + throw redirect(302, AppRoute.PHOTOS); } + + return { + user, + meta: { + title: 'Change Password' + } + }; }) satisfies PageServerLoad; diff --git a/web/src/routes/auth/change-password/+page.svelte b/web/src/routes/auth/change-password/+page.svelte index 5e2ee868ab..993f8c68fe 100644 --- a/web/src/routes/auth/change-password/+page.svelte +++ b/web/src/routes/auth/change-password/+page.svelte @@ -1,21 +1,28 @@ -
-
- -
-
+ +

+ Hi {data.user.firstName} + {data.user.lastName} ({data.user.email}), +
+
+ This is either the first time you are signing into the system or a request has been made to change + your password. Please enter the new password below. +

+ + + diff --git a/web/src/routes/auth/login/+page.server.ts b/web/src/routes/auth/login/+page.server.ts index 03549e03c9..918a20dd03 100644 --- a/web/src/routes/auth/login/+page.server.ts +++ b/web/src/routes/auth/login/+page.server.ts @@ -1,14 +1,32 @@ +import { AppRoute } from '$lib/constants'; import { redirect } from '@sveltejs/kit'; +import type { OAuthConfigResponseDto } from '@api'; import type { PageServerLoad } from './$types'; export const load = (async ({ locals: { api } }) => { const { data } = await api.userApi.getUserCount(true); if (data.userCount === 0) { // Admin not registered - throw redirect(302, '/auth/register'); + throw redirect(302, AppRoute.AUTH_REGISTER); + } + + let authConfig: OAuthConfigResponseDto = { + passwordLoginEnabled: true, + enabled: false + }; + + try { + // TODO: Figure out how to get correct redirect URI server-side. + const { data } = await api.oauthApi.generateConfig({ redirectUri: '/' }); + data.url = undefined; + + authConfig = data; + } catch (err) { + console.error('[ERROR] login/+page.server.ts:', err); } return { + authConfig, meta: { title: 'Login' } diff --git a/web/src/routes/auth/login/+page.svelte b/web/src/routes/auth/login/+page.svelte index 40de092f60..38f1816c0d 100644 --- a/web/src/routes/auth/login/+page.svelte +++ b/web/src/routes/auth/login/+page.svelte @@ -1,16 +1,22 @@ -
+ +

+ {@html loginPageMessage} +

+ goto('/photos')} - on:first-login={() => goto('/auth/change-password')} + authConfig={data.authConfig} + on:success={() => goto(AppRoute.PHOTOS, { invalidateAll: true })} + on:first-login={() => goto(AppRoute.AUTH_CHANGE_PASSWORD)} /> -
+ diff --git a/web/src/routes/auth/register/+page.svelte b/web/src/routes/auth/register/+page.svelte index 61bb280bb0..a711e28771 100644 --- a/web/src/routes/auth/register/+page.svelte +++ b/web/src/routes/auth/register/+page.svelte @@ -1,7 +1,16 @@ -
+ +

+ Since you are the first user on the system, you will be assigned as the Admin and are + responsible for administrative tasks, and additional users will be created by you. +

+ -
+