c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-01 08:31:59 +00:00
Code Releases Activity

feat: loading screen, initSDK on bootstrap, fix FOUC for theme (#10350)

Browse source 
* feat: loading screen, initSDK on bootstrap, fix FOUC for theme

* pulsate immich logo, don't set localstorage

* Make it spin

* Rework error handling a bit

* Cleanup

* fix test

* rename, memoize

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Min Idzelis 2024-08-25 18:34:08 -04:00 committed by GitHub
parent b653a20d15
commit b2dd5a3152
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 328 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

156
web/src/app.html
View file

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en" class="dark"> <html>
<head> <head>
<!-- (used for SSR) --> <!-- (used for SSR) -->
<!-- metadata:tags --> <!-- metadata:tags -->
@ -14,35 +14,96 @@
<link rel="icon" type="image/png" sizes="144x144" href="/favicon-144.png" /> <link rel="icon" type="image/png" sizes="144x144" href="/favicon-144.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180.png" />
%sveltekit.head% %sveltekit.head%
<style>
/* prevent FOUC */
html {
height: 100%;
width: 100%;
}
body,
html {
margin: 0;
padding: 0;
}
@keyframes delayedVisibility {
to {
visibility: visible;
}
}
@keyframes stencil-pulse {
0% {
transform: scale(0.93);
filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.7));
}
70% {
transform: scale(1);
filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0));
}
100% {
transform: scale(0.93);
filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}
}
@keyframes loadspin {
100% {
transform: rotate(360deg);
}
}
#stencil svg {
height: 35%;
animation: stencil-pulse 1s linear infinite;
}
#stencil {
--stencil-width: 25vw;
display: flex;
width: var(--stencil-width);
margin-left: auto;
margin-right: auto;
margin-top: calc(50vh - var(--stencil-width) / 2);
margin-bottom: 100vh;
place-items: center;
justify-content: center;
overflow: hidden;
visibility: hidden;
animation:
0s linear 0.3s forwards delayedVisibility,
loadspin 2s linear infinite;
}
.bg-immich-bg {
background-color: white;
}
.dark .dark\:bg-immich-dark-bg {
background-color: black;
}
</style>
<script> <script>
/** /**
* Prevent FOUC on page load. * Prevent FOUC on page load.
*/ */
const colorThemeKeyName = 'color-theme'; const colorThemeKeyName = 'color-theme';
let theme;
const fallbackTheme = { value: 'dark', system: false };
let item = localStorage.getItem(colorThemeKeyName);
if (item === 'dark' || item === 'light') {
fallbackTheme.value = item;
item = JSON.stringify(fallbackTheme);
localStorage.setItem(colorThemeKeyName, item);
}
theme = JSON.parse(localStorage.getItem(colorThemeKeyName)); let theme = localStorage.getItem(colorThemeKeyName);
if (!theme) {
if (theme) { theme = { value: 'light', system: true };
if (theme.system) { } else if (theme === 'dark' || theme === 'light') {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { theme = { value: item, system: false };
theme.value = 'dark'; localStorage.setItem(colorThemeKeyName, JSON.stringify(theme));
} else {
theme.value = 'light';
}
}
} else { } else {
theme = fallbackTheme; theme = JSON.parse(theme);
} }
if (theme.value === 'light') { let themeValue = theme.value;
if (theme.system) {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
themeValue = 'dark';
} else {
themeValue = 'light';
}
}
if (themeValue === 'light') {
document.documentElement.classList.remove('dark'); document.documentElement.classList.remove('dark');
} else { } else {
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
@ -53,6 +114,59 @@
</head> </head>
<body class="bg-immich-bg dark:bg-immich-dark-bg"> <body class="bg-immich-bg dark:bg-immich-dark-bg">
<div id="stencil">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 792">
<style type="text/css">
.st0 {
fill: #fa2921;
}
.st1 {
fill: #ed79b5;
}
.st2 {
fill: #ffb400;
}
.st3 {
fill: #1e83f7;
}
.st4 {
fill: #18c249;
}
</style>
<g>
<path
class="st0"
d="M375.48,267.63c38.64,34.21,69.78,70.87,89.82,105.42c34.42-61.56,57.42-134.71,57.71-181.3
c0-0.33,0-0.63,0-0.91c0-68.94-68.77-95.77-128.01-95.77s-128.01,26.83-128.01,95.77c0,0.94,0,2.2,0,3.72
C300.01,209.24,339.15,235.47,375.48,267.63z"
/>
<path
class="st1"
d="M164.7,455.63c24.15-26.87,61.2-55.99,103.01-80.61c44.48-26.18,88.97-44.47,128.02-52.84
c-47.91-51.76-110.37-96.24-154.6-110.91c-0.31-0.1-0.6-0.19-0.86-0.28c-65.57-21.3-112.34,35.81-130.64,92.15
c-18.3,56.34-14.04,130.04,51.53,151.34C162.05,454.77,163.25,455.16,164.7,455.63z"
/>
<path
class="st2"
d="M681.07,302.19c-18.3-56.34-65.07-113.45-130.64-92.15c-0.9,0.29-2.1,0.68-3.54,1.15
c-3.75,35.93-16.6,81.27-35.96,125.76c-20.59,47.32-45.84,88.27-72.51,118c69.18,13.72,145.86,12.98,190.26-1.14
c0.31-0.1,0.6-0.2,0.86-0.28C695.11,432.22,699.37,358.52,681.07,302.19z"
/>
<path
class="st3"
d="M336.54,510.71c-11.15-50.39-14.8-98.36-10.7-138.08c-64.03,29.57-125.63,75.23-153.26,112.76
c-0.19,0.26-0.37,0.51-0.53,0.73c-40.52,55.78-0.66,117.91,47.27,152.72c47.92,34.82,119.33,53.54,159.86-2.24
c0.56-0.76,1.3-1.78,2.19-3.01C363.28,602.32,347.02,558.08,336.54,510.71z"
/>
<path
class="st4"
d="M617.57,482.52c-35.33,7.54-82.42,9.33-130.72,4.66c-51.37-4.96-98.11-16.32-134.63-32.5
c8.33,70.03,32.73,142.73,59.88,180.6c0.19,0.26,0.37,0.51,0.53,0.73c40.52,55.78,111.93,37.06,159.86,2.24
c47.92-34.82,87.79-96.95,47.27-152.72C619.2,484.77,618.46,483.75,617.57,482.52z"
/>
</g>
</svg>
</div>
<div>%sveltekit.body%</div> <div>%sveltekit.body%</div>
</body> </body>
</html> </html>

4
web/src/lib/components/admin-page/settings/admin-settings.svelte
View file

@ -7,7 +7,7 @@
} from '$lib/components/shared-components/notification/notification'; } from '$lib/components/shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { getConfig, getConfigDefaults, updateConfig, type SystemConfigDto } from '@immich/sdk'; import { getConfig, getConfigDefaults, updateConfig, type SystemConfigDto } from '@immich/sdk';
import { loadConfig } from '$lib/stores/server-config.store'; import { retrieveServerConfig } from '$lib/stores/server-config.store';
import { cloneDeep, isEqual } from 'lodash-es'; import { cloneDeep, isEqual } from 'lodash-es';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import type { SettingsResetOptions } from './admin-settings'; import type { SettingsResetOptions } from './admin-settings';
@ -39,7 +39,7 @@
savedConfig = cloneDeep(newConfig); savedConfig = cloneDeep(newConfig);
notificationController.show({ message: $t('settings_saved'), type: NotificationType.Info }); notificationController.show({ message: $t('settings_saved'), type: NotificationType.Info });
await loadConfig(); await retrieveServerConfig();
} catch (error) { } catch (error) {
handleError(error, $t('errors.unable_to_save_settings')); handleError(error, $t('errors.unable_to_save_settings'));
} }

105
web/src/lib/components/error.svelte Normal file
View file

@ -0,0 +1,105 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { copyToClipboard } from '$lib/utils';
import { mdiCodeTags, mdiContentCopy, mdiMessage, mdiPartyPopper } from '@mdi/js';
import { t } from 'svelte-i18n';
export let error: { message: string; code?: string | number; stack?: string } | undefined | null = undefined;
const handleCopy = async () => {
if (!error) {
return;
}
await copyToClipboard(`${error.message} - ${error.code}\n${error.stack}`);
};
</script>
<div class="h-screen w-screen">
<section class="bg-immich-bg dark:bg-immich-dark-bg">
<div class="flex place-items-center border-b px-6 py-4 dark:border-b-immich-dark-gray">
<a class="flex place-items-center gap-2 hover:cursor-pointer" href="/photos">
<ImmichLogo width="55%" />
</a>
</div>
</section>
<div class="fixed top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50">
<div>
<div
class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
>
<div>
<div class="flex items-center justify-between gap-4 px-4 py-4">
<h1 class="font-medium text-immich-primary dark:text-immich-dark-primary">
🚨 {$t('error_title')}
</h1>
<div class="flex justify-end">
<CircleIconButton
color="primary"
icon={mdiContentCopy}
title={$t('copy_error')}
on:click={() => handleCopy()}
/>
</div>
</div>
<hr />
<div class="immich-scrollbar max-h-[75vh] min-h-[300px] gap-4 overflow-y-auto p-4 pb-4">
<div class="flex w-full flex-col gap-2">
<p class="text-red-500">{error?.message} ({error?.code})</p>
{#if error?.stack}
<label for="stacktrace">{$t('stacktrace')}</label>
<pre id="stacktrace" class="text-xs">{error?.stack || 'No stack'}</pre>
{/if}
</div>
</div>
<hr />
<div class="flex place-content-center place-items-center justify-around">
<!-- href="https://github.com/immich-app/immich/issues/new" -->
<a
href="https://discord.immich.app"
target="_blank"
rel="noopener noreferrer"
class="flex grow basis-0 justify-center p-4"
>
<div class="flex flex-col place-content-center place-items-center gap-2">
<Icon path={mdiMessage} size={24} />
<p class="text-sm">{$t('get_help')}</p>
</div>
</a>
<a
href="https://github.com/immich-app/immich/releases"
target="_blank"
rel="noopener noreferrer"
class="flex grow basis-0 justify-center p-4"
>
<div class="flex flex-col place-content-center place-items-center gap-2">
<Icon path={mdiPartyPopper} size={24} />
<p class="text-sm">{$t('read_changelog')}</p>
</div>
</a>
<a
href="https://immich.app/docs/guides/docker-help"
target="_blank"
rel="noopener noreferrer"
class="flex grow basis-0 justify-center p-4"
>
<div class="flex flex-col place-content-center place-items-center gap-2">
<Icon path={mdiCodeTags} size={24} />
<p class="text-sm">{$t('check_logs')}</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

2
web/src/lib/components/forms/admin-registration-form.svelte
View file

@ -6,6 +6,7 @@
import Button from '../elements/buttons/button.svelte'; import Button from '../elements/buttons/button.svelte';
import PasswordField from '../shared-components/password-field.svelte'; import PasswordField from '../shared-components/password-field.svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import { retrieveServerConfig } from '$lib/stores/server-config.store';
let email = ''; let email = '';
let password = ''; let password = '';
@ -31,6 +32,7 @@
try { try {
await signUpAdmin({ signUpDto: { email, password, name } }); await signUpAdmin({ signUpDto: { email, password, name } });
await retrieveServerConfig();
await goto(AppRoute.AUTH_LOGIN); await goto(AppRoute.AUTH_LOGIN);
} catch (error) { } catch (error) {
handleError(error, $t('errors.unable_to_create_admin_account')); handleError(error, $t('errors.unable_to_create_admin_account'));

6
web/src/lib/components/forms/login-form.svelte
View file

@ -5,7 +5,7 @@
import { featureFlags, serverConfig } from '$lib/stores/server-config.store'; import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
import { oauth } from '$lib/utils'; import { oauth } from '$lib/utils';
import { getServerErrorMessage, handleError } from '$lib/utils/handle-error'; import { getServerErrorMessage, handleError } from '$lib/utils/handle-error';
import { getServerConfig, login } from '@immich/sdk'; import { login } from '@immich/sdk';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import Button from '../elements/buttons/button.svelte'; import Button from '../elements/buttons/button.svelte';
@ -58,11 +58,9 @@
try { try {
errorMessage = ''; errorMessage = '';
loading = true; loading = true;
const user = await login({ loginCredentialDto: { email, password } }); const user = await login({ loginCredentialDto: { email, password } });
const serverConfig = await getServerConfig();
if (user.isAdmin && !serverConfig.isOnboarded) { if (user.isAdmin && !$serverConfig.isOnboarded) {
await onOnboarding(); await onOnboarding();
return; return;
} }

2
web/src/lib/stores/server-config.store.ts
View file

@ -33,7 +33,7 @@ export const serverConfig = writable<ServerConfig>({
externalDomain: '', externalDomain: '',
}); });
export const loadConfig = async () => { export const retrieveServerConfig = async () => {
const [flags, config] = await Promise.all([getServerFeatures(), getServerConfig()]); const [flags, config] = await Promise.all([getServerFeatures(), getServerConfig()]);
featureFlags.update(() => ({ ...flags, loaded: true })); featureFlags.update(() => ({ ...flags, loaded: true }));

2
web/src/lib/utils.ts
View file

@ -33,7 +33,7 @@ interface DownloadRequestOptions<T = unknown> {
onDownloadProgress?: (event: ProgressEvent<XMLHttpRequestEventTarget>) => void; onDownloadProgress?: (event: ProgressEvent<XMLHttpRequestEventTarget>) => void;
} }
export const initApp = async () => { export const initLanguage = async () => {
const preferenceLang = get(lang); const preferenceLang = get(lang);
for (const { code, loader } of langs) { for (const { code, loader } of langs) {
register(code, loader); register(code, loader);

21
web/src/lib/utils/server.ts Normal file
View file

@ -0,0 +1,21 @@
import { retrieveServerConfig } from '$lib/stores/server-config.store';
import { initLanguage } from '$lib/utils';
import { defaults } from '@immich/sdk';
import { memoize } from 'lodash-es';
type fetchType = typeof fetch;
export function initSDK(fetch: fetchType) {
// set event.fetch on the fetch-client used by @immich/sdk
// https://kit.svelte.dev/docs/load#making-fetch-requests
// https://github.com/oazapfts/oazapfts/blob/main/README.md#fetch-options
defaults.fetch = fetch;
}
async function _init(fetch: fetchType) {
initSDK(fetch);
await initLanguage();
await retrieveServerConfig();
}
export const init = memoize(_init, () => 'singlevalue');

104
web/src/routes/+error.svelte
View file

@ -1,106 +1,6 @@
<script> <script>
import { page } from '$app/stores'; import { page } from '$app/stores';
import Icon from '$lib/components/elements/icon.svelte'; import Error from '$lib/components/error.svelte';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { copyToClipboard } from '$lib/utils';
import { mdiCodeTags, mdiContentCopy, mdiMessage, mdiPartyPopper } from '@mdi/js';
import { t } from 'svelte-i18n';
const handleCopy = async () => {
//
const error = $page.error || null;
if (!error) {
return;
}
await copyToClipboard(`${error.message} - ${error.code}\n${error.stack}`);
};
</script> </script>
<div class="h-screen w-screen"> <Error error={$page.error}></Error>
<section class="bg-immich-bg dark:bg-immich-dark-bg">
<div class="flex place-items-center border-b px-6 py-4 dark:border-b-immich-dark-gray">
<a class="flex place-items-center gap-2 hover:cursor-pointer" href="/photos">
<ImmichLogo width="55%" />
</a>
</div>
</section>
<div class="fixed top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50">
<div>
<div
class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
>
<div>
<div class="flex items-center justify-between gap-4 px-4 py-4">
<h1 class="font-medium text-immich-primary dark:text-immich-dark-primary">
🚨 {$t('error_title')}
</h1>
<div class="flex justify-end">
<CircleIconButton
color="primary"
icon={mdiContentCopy}
title={$t('copy_error')}
on:click={() => handleCopy()}
/>
</div>
</div>
<hr />
<div class="immich-scrollbar max-h-[75vh] min-h-[300px] gap-4 overflow-y-auto p-4 pb-4">
<div class="flex w-full flex-col gap-2">
<p class="text-red-500">{$page.error?.message} ({$page.error?.code})</p>
{#if $page.error?.stack}
<label for="stacktrace">{$t('stacktrace')}</label>
<pre id="stacktrace" class="text-xs">{$page.error?.stack || 'No stack'}</pre>
{/if}
</div>
</div>
<hr />
<div class="flex place-content-center place-items-center justify-around">
<!-- href="https://github.com/immich-app/immich/issues/new" -->
<a
href="https://discord.immich.app"
target="_blank"
rel="noopener noreferrer"
class="flex grow basis-0 justify-center p-4"
>
<div class="flex flex-col place-content-center place-items-center gap-2">
<Icon path={mdiMessage} size={24} />
<p class="text-sm">{$t('get_help')}</p>
</div>
</a>
<a
href="https://github.com/immich-app/immich/releases"
target="_blank"
rel="noopener noreferrer"
class="flex grow basis-0 justify-center p-4"
>
<div class="flex flex-col place-content-center place-items-center gap-2">
<Icon path={mdiPartyPopper} size={24} />
<p class="text-sm">{$t('read_changelog')}</p>
</div>
</a>
<a
href="https://immich.app/docs/guides/docker-help"
target="_blank"
rel="noopener noreferrer"
class="flex grow basis-0 justify-center p-4"
>
<div class="flex flex-col place-content-center place-items-center gap-2">
<Icon path={mdiCodeTags} size={24} />
<p class="text-sm">{$t('check_logs')}</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

26
web/src/routes/+layout.svelte
View file

@ -10,16 +10,18 @@
import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte'; import VersionAnnouncementBox from '$lib/components/shared-components/version-announcement-box.svelte';
import { Theme } from '$lib/constants'; import { Theme } from '$lib/constants';
import { colorTheme, handleToggleTheme, type ThemeSetting } from '$lib/stores/preferences.store'; import { colorTheme, handleToggleTheme, type ThemeSetting } from '$lib/stores/preferences.store';
import { loadConfig, serverConfig } from '$lib/stores/server-config.store';
import { serverConfig } from '$lib/stores/server-config.store';
import { user } from '$lib/stores/user.store'; import { user } from '$lib/stores/user.store';
import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket'; import { closeWebsocketConnection, openWebsocketConnection } from '$lib/stores/websocket';
import { copyToClipboard, setKey } from '$lib/utils'; import { copyToClipboard, setKey } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import '../app.css'; import '../app.css';
import { isAssetViewerRoute, isSharedLinkRoute } from '$lib/utils/navigation'; import { isAssetViewerRoute, isSharedLinkRoute } from '$lib/utils/navigation';
import DialogWrapper from '$lib/components/shared-components/dialog/dialog-wrapper.svelte'; import DialogWrapper from '$lib/components/shared-components/dialog/dialog-wrapper.svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import Error from '$lib/components/error.svelte';
import { shortcut } from '$lib/actions/shortcut'; import { shortcut } from '$lib/actions/shortcut';
let showNavigationLoadingBar = false; let showNavigationLoadingBar = false;
@ -33,8 +35,7 @@
const changeTheme = (theme: ThemeSetting) => { const changeTheme = (theme: ThemeSetting) => {
if (theme.system) { if (theme.system) {
theme.value = theme.value = window.matchMedia('(prefers-color-scheme: dark)').matches ? Theme.DARK : Theme.LIGHT;
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? Theme.DARK : Theme.LIGHT;
} }
if (theme.value === Theme.LIGHT) { if (theme.value === Theme.LIGHT) {
@ -55,6 +56,8 @@
}; };
onMount(() => { onMount(() => {
const element = document.querySelector('#stencil');
element?.remove();
// if the browser theme changes, changes the Immich theme too // if the browser theme changes, changes the Immich theme too
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', handleChangeTheme); window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', handleChangeTheme);
}); });
@ -77,14 +80,6 @@
afterNavigate(() => { afterNavigate(() => {
showNavigationLoadingBar = false; showNavigationLoadingBar = false;
}); });
onMount(async () => {
try {
await loadConfig();
} catch (error) {
handleError(error, $t('errors.unable_to_connect_to_server'));
}
});
</script> </script>
<svelte:head> <svelte:head>
@ -134,7 +129,12 @@
onShortcut: () => copyToClipboard(getMyImmichLink().toString()), onShortcut: () => copyToClipboard(getMyImmichLink().toString()),
}} }}
/> />
<slot />
{#if $page.data.error}
<Error error={$page.data.error}></Error>
{:else}
<slot />
{/if}
{#if showNavigationLoadingBar} {#if showNavigationLoadingBar}
<NavigationLoadingBar /> <NavigationLoadingBar />

16
web/src/routes/+layout.ts
View file

@ -1,19 +1,19 @@
import { initApp } from '$lib/utils'; import { init } from '$lib/utils/server';
import { defaults } from '@immich/sdk';
import type { LayoutLoad } from './$types'; import type { LayoutLoad } from './$types';
export const ssr = false; export const ssr = false;
export const csr = true; export const csr = true;
export const load = (async ({ fetch }) => { export const load = (async ({ fetch }) => {
// set event.fetch on the fetch-client used by @immich/sdk let error;
// https://kit.svelte.dev/docs/load#making-fetch-requests try {
// https://github.com/oazapfts/oazapfts/blob/main/README.md#fetch-options await init(fetch);
defaults.fetch = fetch; } catch (initError) {
error = initError;
await initApp(); }
return { return {
error,
meta: { meta: {
title: 'Immich', title: 'Immich',
}, },

36
web/src/routes/+page.ts
View file

@ -1,26 +1,38 @@
import { AppRoute } from '$lib/constants'; import { AppRoute } from '$lib/constants';
import { serverConfig } from '$lib/stores/server-config.store';
import { getFormatter } from '$lib/utils/i18n'; import { getFormatter } from '$lib/utils/i18n';
import { getServerConfig } from '@immich/sdk'; import { init } from '$lib/utils/server';
import { redirect } from '@sveltejs/kit'; import { redirect } from '@sveltejs/kit';
import { get } from 'svelte/store';
import { loadUser } from '../lib/utils/auth'; import { loadUser } from '../lib/utils/auth';
import type { PageLoad } from './$types'; import type { PageLoad } from './$types';
export const ssr = false; export const ssr = false;
export const csr = true; export const csr = true;
export const load = (async () => { export const load = (async ({ fetch }) => {
const authenticated = await loadUser(); let $t = (arg: string) => arg;
if (authenticated) { try {
redirect(302, AppRoute.PHOTOS); await init(fetch);
} const authenticated = await loadUser();
if (authenticated) {
redirect(302, AppRoute.PHOTOS);
}
const { isInitialized } = await getServerConfig(); const { isInitialized } = get(serverConfig);
if (isInitialized) { if (isInitialized) {
// Redirect to login page if there exists an admin account (i.e. server is initialized) // Redirect to login page if there exists an admin account (i.e. server is initialized)
redirect(302, AppRoute.AUTH_LOGIN); redirect(302, AppRoute.AUTH_LOGIN);
} }
const $t = await getFormatter(); $t = await getFormatter();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (redirectError: any) {
if (redirectError?.status === 302) {
throw redirectError;
}
}
return { return {
meta: { meta: {

11
web/src/routes/auth/login/+page.ts
View file

@ -1,12 +1,15 @@
import { AppRoute } from '$lib/constants'; import { AppRoute } from '$lib/constants';
import { serverConfig } from '$lib/stores/server-config.store';
import { getFormatter } from '$lib/utils/i18n'; import { getFormatter } from '$lib/utils/i18n';
import { defaults, getServerConfig } from '@immich/sdk';
import { redirect } from '@sveltejs/kit'; import { redirect } from '@sveltejs/kit';
import { get } from 'svelte/store';
import type { PageLoad } from './$types'; import type { PageLoad } from './$types';
export const load = (async ({ fetch }) => { export const load = (async ({ parent }) => {
defaults.fetch = fetch; await parent();
const { isInitialized } = await getServerConfig(); const { isInitialized } = get(serverConfig);
if (!isInitialized) { if (!isInitialized) {
// Admin not registered // Admin not registered
redirect(302, AppRoute.AUTH_REGISTER); redirect(302, AppRoute.AUTH_REGISTER);

2
web/src/routes/auth/onboarding/+page.ts
View file

@ -1,11 +1,9 @@
import { loadConfig } from '$lib/stores/server-config.store';
import { authenticate } from '$lib/utils/auth'; import { authenticate } from '$lib/utils/auth';
import { getFormatter } from '$lib/utils/i18n'; import { getFormatter } from '$lib/utils/i18n';
import type { PageLoad } from './$types'; import type { PageLoad } from './$types';
export const load = (async () => { export const load = (async () => {
await authenticate({ admin: true }); await authenticate({ admin: true });
await loadConfig();
const $t = await getFormatter(); const $t = await getFormatter();

8
web/src/routes/auth/register/+page.ts
View file

@ -1,11 +1,13 @@
import { AppRoute } from '$lib/constants'; import { AppRoute } from '$lib/constants';
import { serverConfig } from '$lib/stores/server-config.store';
import { getFormatter } from '$lib/utils/i18n'; import { getFormatter } from '$lib/utils/i18n';
import { getServerConfig } from '@immich/sdk';
import { redirect } from '@sveltejs/kit'; import { redirect } from '@sveltejs/kit';
import { get } from 'svelte/store';
import type { PageLoad } from './$types'; import type { PageLoad } from './$types';
export const load = (async () => { export const load = (async ({ parent }) => {
const { isInitialized } = await getServerConfig(); await parent();
const { isInitialized } = get(serverConfig);
if (isInitialized) { if (isInitialized) {
// Admin has been registered, redirect to login // Admin has been registered, redirect to login
redirect(302, AppRoute.AUTH_LOGIN); redirect(302, AppRoute.AUTH_LOGIN);