mirror of https://github.com/immich-app/immich.git
Migrate SvelteKit to the latest version `431` (#526)
Alex
GitHub
parent
fb0fa742f5
commit
db2ed2d881
File diff suppressed because it is too large
Load Diff
@ -1,31 +1,5 @@
|
||||
import type { ExternalFetch, GetSession, Handle } from '@sveltejs/kit';
|
||||
import * as cookie from 'cookie';
|
||||
import { serverApi } from '@api';
|
||||
import type { Handle } from '@sveltejs/kit';
|
||||
|
||||
export const handle: Handle = async ({ event, resolve }) => {
|
||||
const cookies = cookie.parse(event.request.headers.get('cookie') || '');
|
||||
|
||||
if (!cookies['immich_is_authenticated']) {
|
||||
return await resolve(event);
|
||||
}
|
||||
const accessToken = cookies['immich_access_token'];
|
||||
|
||||
try {
|
||||
serverApi.setAccessToken(accessToken);
|
||||
const { data } = await serverApi.userApi.getMyUserInfo();
|
||||
event.locals.user = data;
|
||||
|
||||
return await resolve(event);
|
||||
} catch (error) {
|
||||
event.locals.user = undefined;
|
||||
return await resolve(event);
|
||||
}
|
||||
};
|
||||
|
||||
export const getSession: GetSession = async ({ locals }) => {
|
||||
if (!locals.user) return {};
|
||||
|
||||
return {
|
||||
user: locals.user
|
||||
};
|
||||
return await resolve(event);
|
||||
};
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import { page } from '$app/stores';
|
||||
</script>
|
||||
|
||||
<div class="h-screen w-screen flex place-items-center place-content-center flex-col">
|
||||
<div class="min-w-[500px] bg-gray-300 rounded-2xl my-4 p-4">
|
||||
<code class="text-xs text-red-500">Error code {$page.status}</code>
|
||||
<br />
|
||||
<code class="text-sm">
|
||||
{$page.error.message}
|
||||
</code>
|
||||
<br />
|
||||
<div class="mt-5">
|
||||
<p class="text-sm font-medium">Verbose</p>
|
||||
<pre class="text-xs">{Object.values($page.error)}</pre>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://github.com/immich-app/immich/issues/new/choose"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button
|
||||
class="px-5 py-2 rounded-lg text-sm mt-6 bg-immich-primary text-white hover:bg-immich-primary/75"
|
||||
>Get help</button
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
import { browser } from '$app/env';
|
||||
import { api, serverApi } from '@api';
|
||||
import * as cookieParser from 'cookie';
|
||||
|
||||
import type { LayoutServerLoad } from './$types';
|
||||
|
||||
export const load: LayoutServerLoad = async ({ request }) => {
|
||||
const cookies = cookieParser.parse(request.headers.get('cookie') || '');
|
||||
const accessToken = cookies['immich_access_token'];
|
||||
|
||||
if (!accessToken) {
|
||||
return {
|
||||
user: undefined
|
||||
};
|
||||
}
|
||||
|
||||
serverApi.setAccessToken(accessToken);
|
||||
const { data: userInfo } = await serverApi.userApi.getMyUserInfo();
|
||||
|
||||
return {
|
||||
user: userInfo
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,29 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
async function onGettingStartedClicked() {
|
||||
data.isAdminUserExist ? await goto('/auth/login') : await goto('/auth/register');
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Welcome 🎉 - Immich</title>
|
||||
<meta name="description" content="Immich Web Interface" />
|
||||
</svelte:head>
|
||||
|
||||
<section class="h-screen w-screen flex place-items-center place-content-center">
|
||||
<div class="flex flex-col place-items-center gap-8 text-center max-w-[350px]">
|
||||
<div class="flex place-items-center place-content-center ">
|
||||
<img class="text-center" src="immich-logo.svg" height="200" width="200" alt="immich-logo" />
|
||||
</div>
|
||||
<h1 class="text-4xl text-immich-primary font-bold font-immich-title">Welcome to IMMICH Web</h1>
|
||||
<button
|
||||
class="border px-4 py-2 rounded-md bg-immich-primary hover:bg-immich-primary/75 text-white font-bold w-[200px]"
|
||||
on:click={onGettingStartedClicked}
|
||||
>Getting Started
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,21 @@
|
||||
export const prerender = false;
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { api } from '@api';
|
||||
import { browser } from '$app/env';
|
||||
import type { PageLoad } from './$types';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export const load: PageLoad = async ({ parent }) => {
|
||||
const { user } = await parent();
|
||||
if (user) {
|
||||
throw redirect(302, '/photos');
|
||||
}
|
||||
|
||||
if (browser) {
|
||||
const { data } = await api.userApi.getUserCount();
|
||||
|
||||
return {
|
||||
isAdminUserExist: data.userCount != 0
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,19 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { serverApi, UserResponseDto } from '@api';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async ({ parent }) => {
|
||||
const { user } = await parent();
|
||||
|
||||
if (!user) {
|
||||
throw redirect(302, '/auth/login');
|
||||
} else if (!user.isAdmin) {
|
||||
throw redirect(302, '/photos');
|
||||
}
|
||||
|
||||
const { data: allUsers } = await serverApi.userApi.getAllUsers(false);
|
||||
return {
|
||||
user: user,
|
||||
allUsers: allUsers
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,22 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { AlbumResponseDto, serverApi } from '@api';
|
||||
|
||||
export const load: PageServerLoad = async ({ parent }) => {
|
||||
try {
|
||||
const { user } = await parent();
|
||||
|
||||
if (!user) {
|
||||
throw Error('User is not logged in');
|
||||
}
|
||||
|
||||
const { data: albums } = await serverApi.albumApi.getAllAlbums();
|
||||
|
||||
return {
|
||||
user: user,
|
||||
albums: albums
|
||||
};
|
||||
} catch (e) {
|
||||
throw redirect(302, '/auth/login');
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,23 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { serverApi } from '@api';
|
||||
|
||||
export const load: PageServerLoad = async ({ parent, params }) => {
|
||||
const { user } = await parent();
|
||||
|
||||
if (!user) {
|
||||
throw redirect(302, '/auth/login');
|
||||
}
|
||||
|
||||
const albumId = params['albumId'];
|
||||
|
||||
try {
|
||||
const { data: album } = await serverApi.albumApi.getAlbumInfo(albumId);
|
||||
return {
|
||||
album
|
||||
};
|
||||
} catch (e) {
|
||||
throw redirect(302, '/albums');
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
export let data: PageData;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{data.album.albumName} - Immich</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="immich-scrollbar">
|
||||
<AlbumViewer album={data.album} />
|
||||
</div>
|
||||
@ -1,57 +0,0 @@
|
||||
<script context="module" lang="ts">
|
||||
export const prerender = false;
|
||||
|
||||
import type { Load } from '@sveltejs/kit';
|
||||
import { AlbumResponseDto } from '@api';
|
||||
|
||||
export const load: Load = async ({ fetch, params, session }) => {
|
||||
if (!browser && !session.user) {
|
||||
return {
|
||||
status: 302,
|
||||
redirect: '/auth/login'
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
const albumId = params['albumId'];
|
||||
|
||||
const albumInfo = await fetch(`/data/album/get-album-info?albumId=${albumId}`).then((r) =>
|
||||
r.json()
|
||||
);
|
||||
|
||||
return {
|
||||
status: 200,
|
||||
props: {
|
||||
album: albumInfo
|
||||
}
|
||||
};
|
||||
} catch (e: any) {
|
||||
if (e.response?.status === 404) {
|
||||
return {
|
||||
status: 302,
|
||||
redirect: '/albums'
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status: 302,
|
||||
redirect: '/auth/login'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
|
||||
import { browser } from '$app/env';
|
||||
|
||||
export let album: AlbumResponseDto;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{album.albumName} - Immich</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="immich-scrollbar">
|
||||
<AlbumViewer {album} />
|
||||
</div>
|
||||
@ -1,28 +0,0 @@
|
||||
<script context="module" lang="ts">
|
||||
export const prerender = false;
|
||||
import { browser } from '$app/env';
|
||||
import type { Load } from '@sveltejs/kit';
|
||||
|
||||
export const load: Load = async ({ params, session }) => {
|
||||
if (!browser && !session.user) {
|
||||
return {
|
||||
status: 302,
|
||||
redirect: '/auth/login'
|
||||
};
|
||||
}
|
||||
|
||||
const albumId = params['albumId'];
|
||||
|
||||
if (albumId) {
|
||||
return {
|
||||
status: 302,
|
||||
redirect: `/albums/${albumId}`
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
status: 302,
|
||||
redirect: `/photos`
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,18 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
export const prerender = false;
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load: PageLoad = async ({ params, parent }) => {
|
||||
const { user } = await parent();
|
||||
if (!user) {
|
||||
throw redirect(302, '/auth/login');
|
||||
}
|
||||
|
||||
const albumId = params['albumId'];
|
||||
|
||||
if (albumId) {
|
||||
throw redirect(302, `/albums/${albumId}`);
|
||||
} else {
|
||||
throw redirect(302, `/photos`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,25 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
import ChangePasswordForm from '$lib/components/forms/change-password-form.svelte';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
const onSuccessHandler = async () => {
|
||||
await fetch('auth/logout', { method: 'POST' });
|
||||
|
||||
goto('/auth/login');
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Change Password - Immich</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="h-screen w-screen flex place-items-center place-content-center">
|
||||
<div in:fade={{ duration: 100 }} out:fade={{ duration: 100 }}>
|
||||
<ChangePasswordForm user={data.user} on:success={onSuccessHandler} />
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,21 @@
|
||||
import { api } from '@api';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
export const prerender = false;
|
||||
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load: PageLoad = async () => {
|
||||
try {
|
||||
const { data: userInfo } = await api.userApi.getMyUserInfo();
|
||||
|
||||
if (userInfo.shouldChangePassword) {
|
||||
return {
|
||||
user: userInfo
|
||||
};
|
||||
} else {
|
||||
throw redirect(302, '/photos');
|
||||
}
|
||||
} catch (e) {
|
||||
throw redirect(302, '/auth/login');
|
||||
}
|
||||
};
|
||||
@ -1,56 +0,0 @@
|
||||
<script context="module" lang="ts">
|
||||
export const prerender = false;
|
||||
|
||||
import type { Load } from '@sveltejs/kit';
|
||||
|
||||
export const load: Load = async () => {
|
||||
try {
|
||||
const { data: userInfo } = await api.userApi.getMyUserInfo();
|
||||
|
||||
if (userInfo.shouldChangePassword) {
|
||||
return {
|
||||
status: 200,
|
||||
props: {
|
||||
user: userInfo
|
||||
}
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
status: 302,
|
||||
redirect: '/photos'
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
return {
|
||||
status: 302,
|
||||
redirect: '/auth/login'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
import ChangePasswordForm from '$lib/components/forms/change-password-form.svelte';
|
||||
import { api, UserResponseDto } from '@api';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
|
||||
const onSuccessHandler = async () => {
|
||||
await fetch('auth/logout', { method: 'POST' });
|
||||
|
||||
goto('/auth/login');
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Change Password - Immich</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="h-screen w-screen flex place-items-center place-content-center">
|
||||
<div in:fade={{ duration: 100 }} out:fade={{ duration: 100 }}>
|
||||
<ChangePasswordForm {user} on:success={onSuccessHandler} />
|
||||
</div>
|
||||
</section>
|
||||
@ -1,19 +0,0 @@
|
||||
import { api, serverApi } from '@api';
|
||||
import type { RequestHandler } from '@sveltejs/kit';
|
||||
|
||||
export const POST: RequestHandler = async () => {
|
||||
api.removeAccessToken();
|
||||
serverApi.removeAccessToken();
|
||||
|
||||
return {
|
||||
headers: {
|
||||
'Set-Cookie': [
|
||||
'immich_is_authenticated=deleted; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT;',
|
||||
'immich_access_token=delete; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT'
|
||||
]
|
||||
},
|
||||
body: {
|
||||
ok: true
|
||||
}
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,27 @@
|
||||
import { json } from '@sveltejs/kit';
|
||||
import { api, serverApi } from '@api';
|
||||
import type { RequestHandler } from '@sveltejs/kit';
|
||||
|
||||
export const POST: RequestHandler = async () => {
|
||||
api.removeAccessToken();
|
||||
serverApi.removeAccessToken();
|
||||
|
||||
const headers = new Headers();
|
||||
|
||||
headers.append(
|
||||
'set-cookie',
|
||||
'immich_is_authenticated=deleted; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT;'
|
||||
);
|
||||
headers.append(
|
||||
'set-cookie',
|
||||
'immich_access_token=delete; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT'
|
||||
);
|
||||
return json(
|
||||
{
|
||||
ok: true
|
||||
},
|
||||
{
|
||||
headers
|
||||
}
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,13 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { serverApi } from '@api';
|
||||
|
||||
export const load: PageServerLoad = async () => {
|
||||
const { data } = await serverApi.userApi.getUserCount();
|
||||
if (data.userCount != 0) {
|
||||
// Admin has been registered, redirect to login
|
||||
throw redirect(302, '/auth/login');
|
||||
}
|
||||
|
||||
return;
|
||||
};
|
||||
@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
import AdminRegistrationForm from '$lib/components/forms/admin-registration-form.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Admin Registration - Immich</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="h-screen w-screen flex place-items-center place-content-center">
|
||||
<AdminRegistrationForm />
|
||||
</section>
|
||||
@ -1,31 +0,0 @@
|
||||
<script context="module" lang="ts">
|
||||
import type { Load } from '@sveltejs/kit';
|
||||
|
||||
export const load: Load = async () => {
|
||||
const { data } = await api.userApi.getUserCount();
|
||||
if (data.userCount != 0) {
|
||||
// Admin has been registered, redirect to login
|
||||
return {
|
||||
status: 302,
|
||||
redirect: '/auth/login'
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
status: 200
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import AdminRegistrationForm from '$lib/components/forms/admin-registration-form.svelte';
|
||||
import { api } from '@api';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Admin Registration - Immich</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="h-screen w-screen flex place-items-center place-content-center">
|
||||
<AdminRegistrationForm />
|
||||
</section>
|
||||
@ -1 +0,0 @@
|
||||
This directory contain SSR endpoints to user serverApi instance to make request directly to DNS
|
||||
@ -1,18 +0,0 @@
|
||||
import { AlbumResponseDto, serverApi } from '@api';
|
||||
import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit';
|
||||
|
||||
export const GET = async ({
|
||||
url
|
||||
}: RequestEvent): Promise<RequestHandlerOutput<AlbumResponseDto>> => {
|
||||
try {
|
||||
const albumId = url.searchParams.get('albumId') || '';
|
||||
const { data } = await serverApi.albumApi.getAlbumInfo(albumId);
|
||||
return {
|
||||
body: data
|
||||
};
|
||||
} catch {
|
||||
return {
|
||||
status: 500
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -1,18 +0,0 @@
|
||||
import { AlbumResponseDto, serverApi } from '@api';
|
||||
import type { RequestEvent, RequestHandler, RequestHandlerOutput } from '@sveltejs/kit';
|
||||
|
||||
export const GET = async ({
|
||||
url
|
||||
}: RequestEvent): Promise<RequestHandlerOutput<AlbumResponseDto[]>> => {
|
||||
try {
|
||||
const isShared = url.searchParams.get('isShared') === 'true' || undefined;
|
||||
const { data } = await serverApi.albumApi.getAllAlbums(isShared);
|
||||
return {
|
||||
body: data
|
||||
};
|
||||
} catch {
|
||||
return {
|
||||
status: 500
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -1,15 +0,0 @@
|
||||
import { AssetResponseDto, serverApi } from '@api';
|
||||
import type { RequestHandlerOutput } from '@sveltejs/kit';
|
||||
|
||||
export const GET = async (): Promise<RequestHandlerOutput<AssetResponseDto[]>> => {
|
||||
try {
|
||||
const { data } = await serverApi.assetApi.getAllAssets();
|
||||
return {
|
||||
body: data
|
||||
};
|
||||
} catch {
|
||||
return {
|
||||
status: 500
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -1,17 +0,0 @@
|
||||
import { serverApi, UserResponseDto } from '@api';
|
||||
import type { RequestEvent, RequestHandlerOutput } from '@sveltejs/kit';
|
||||
|
||||
export const GET = async ({url} : RequestEvent): Promise<RequestHandlerOutput<UserResponseDto[]>> => {
|
||||
try {
|
||||
const isAll = url.searchParams.get('isAll') === 'true';
|
||||
|
||||
const { data } = await serverApi.userApi.getAllUsers(isAll);
|
||||
return {
|
||||
body: data
|
||||
};
|
||||
} catch {
|
||||
return {
|
||||
status: 500
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -1,15 +0,0 @@
|
||||
import { serverApi, UserResponseDto } from '@api';
|
||||
import type { RequestHandlerOutput } from '@sveltejs/kit';
|
||||
|
||||
export const GET = async (): Promise<RequestHandlerOutput<UserResponseDto>> => {
|
||||
try {
|
||||
const { data } = await serverApi.userApi.getMyUserInfo();
|
||||
return {
|
||||
body: data
|
||||
};
|
||||
} catch {
|
||||
return {
|
||||
status: 500
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -1,58 +0,0 @@
|
||||
<script context="module" lang="ts">
|
||||
export const prerender = false;
|
||||
import type { Load } from '@sveltejs/kit';
|
||||
import { api } from '@api';
|
||||
import { browser } from '$app/env';
|
||||
|
||||
export const load: Load = async () => {
|
||||
if (browser) {
|
||||
try {
|
||||
const {data: user} = await api.userApi.getMyUserInfo();
|
||||
|
||||
return {
|
||||
status: 302,
|
||||
redirect: '/photos'
|
||||
};
|
||||
} catch (e) {
|
||||
}
|
||||
|
||||
const {data} = await api.userApi.getUserCount();
|
||||
|
||||
return {
|
||||
status: 200,
|
||||
props: {
|
||||
isAdminUserExist: data.userCount != 0
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export let isAdminUserExist: boolean;
|
||||
|
||||
async function onGettingStartedClicked() {
|
||||
isAdminUserExist ? await goto('/auth/login') : await goto('/auth/register');
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Welcome 🎉 - Immich</title>
|
||||
<meta name="description" content="Immich Web Interface"/>
|
||||
</svelte:head>
|
||||
|
||||
<section class="h-screen w-screen flex place-items-center place-content-center">
|
||||
<div class="flex flex-col place-items-center gap-8 text-center max-w-[350px]">
|
||||
<div class="flex place-items-center place-content-center ">
|
||||
<img class="text-center" src="immich-logo.svg" height="200" width="200" alt="immich-logo"/>
|
||||
</div>
|
||||
<h1 class="text-4xl text-immich-primary font-bold font-immich-title">Welcome to IMMICH Web</h1>
|
||||
<button
|
||||
class="border px-4 py-2 rounded-md bg-immich-primary hover:bg-immich-primary/75 text-white font-bold w-[200px]"
|
||||
on:click={onGettingStartedClicked}>Getting Started
|
||||
</button
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,21 @@
|
||||
import { serverApi } from './../../api/api';
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { redirect, error } from '@sveltejs/kit';
|
||||
|
||||
export const load: PageServerLoad = async ({ parent }) => {
|
||||
try {
|
||||
const { user } = await parent();
|
||||
if (!user) {
|
||||
throw error(400, 'Not logged in');
|
||||
}
|
||||
|
||||
const { data: assets } = await serverApi.assetApi.getAllAssets();
|
||||
|
||||
return {
|
||||
user,
|
||||
assets
|
||||
};
|
||||
} catch (e) {
|
||||
throw redirect(302, '/auth/login');
|
||||
}
|
||||
};
|
||||
@ -1,20 +0,0 @@
|
||||
<script context="module" lang="ts">
|
||||
export const prerender = false;
|
||||
|
||||
import { browser } from '$app/env';
|
||||
import type { Load } from '@sveltejs/kit';
|
||||
|
||||
export const load: Load = async ({ session }) => {
|
||||
if (!browser && !session.user) {
|
||||
return {
|
||||
status: 302,
|
||||
redirect: '/auth/login'
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
status: 302,
|
||||
redirect: '/photos'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,14 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
export const prerender = false;
|
||||
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async ({ parent }) => {
|
||||
const { user } = await parent();
|
||||
|
||||
if (!user) {
|
||||
throw redirect(302, '/auth/login');
|
||||
} else {
|
||||
throw redirect(302, '/photos');
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,23 @@
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
export const prerender = false;
|
||||
|
||||
import { serverApi } from '@api';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async ({ parent }) => {
|
||||
try {
|
||||
const { user } = await parent();
|
||||
if (!user) {
|
||||
throw redirect(302, '/auth/login');
|
||||
}
|
||||
|
||||
const { data: sharedAlbums } = await serverApi.albumApi.getAllAlbums(true);
|
||||
|
||||
return {
|
||||
user: user,
|
||||
sharedAlbums: sharedAlbums
|
||||
};
|
||||
} catch (e) {
|
||||
throw redirect(302, '/auth/login');
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,83 @@
|
||||
<script lang="ts">
|
||||
import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
|
||||
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
|
||||
import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
|
||||
import SharedAlbumListTile from '$lib/components/sharing-page/shared-album-list-tile.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { api } from '@api';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
const createSharedAlbum = async () => {
|
||||
try {
|
||||
const { data: newAlbum } = await api.albumApi.createAlbum({
|
||||
albumName: 'Untitled'
|
||||
});
|
||||
|
||||
goto('/albums/' + newAlbum.id);
|
||||
} catch (e) {
|
||||
console.log('Error [createAlbum] ', e);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Albums - Immich</title>
|
||||
</svelte:head>
|
||||
|
||||
<section>
|
||||
<NavigationBar user={data.user} on:uploadClicked={() => {}} />
|
||||
</section>
|
||||
|
||||
<section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg">
|
||||
<SideBar />
|
||||
|
||||
<section class="overflow-y-auto relative">
|
||||
<section id="album-content" class="relative pt-8 pl-4 mb-12 bg-immich-bg">
|
||||
<!-- Main Section -->
|
||||
<div class="px-4 flex justify-between place-items-center">
|
||||
<div>
|
||||
<p class="font-medium">Sharing</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
on:click={createSharedAlbum}
|
||||
class="flex place-items-center gap-1 text-sm hover:bg-immich-primary/5 p-2 rounded-lg font-medium hover:text-gray-700"
|
||||
>
|
||||
<span>
|
||||
<PlusBoxOutline size="18" />
|
||||
</span>
|
||||
<p>Create shared album</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-4">
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<!-- Share Album List -->
|
||||
<div class="w-full flex flex-col place-items-center">
|
||||
{#each data.sharedAlbums as album}
|
||||
<a sveltekit:prefetch href={`albums/${album.id}`}>
|
||||
<SharedAlbumListTile {album} user={data.user} />
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Empty List -->
|
||||
{#if data.sharedAlbums.length === 0}
|
||||
<div
|
||||
class="border p-5 w-[50%] m-auto mt-10 bg-gray-50 rounded-3xl flex flex-col place-content-center place-items-center"
|
||||
>
|
||||
<img src="/empty-2.svg" alt="Empty shared album" width="500" />
|
||||
<p class="text-center text-immich-text-gray-500">
|
||||
Create a shared album to share photos and videos with people in your network
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@ -1,120 +0,0 @@
|
||||
<script context="module" lang="ts">
|
||||
export const prerender = false;
|
||||
|
||||
import type { Load } from '@sveltejs/kit';
|
||||
import { AlbumResponseDto, api, UserResponseDto } from '@api';
|
||||
import { browser } from '$app/env';
|
||||
|
||||
export const load: Load = async ({fetch, session}) => {
|
||||
if (!browser && !session.user) {
|
||||
return {
|
||||
status: 302,
|
||||
redirect: '/auth/login'
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
const [user, sharedAlbums] = await Promise.all([
|
||||
fetch('/data/user/get-my-user-info').then((r) => r.json()),
|
||||
fetch('/data/album/get-all-albums?isShared=true').then((r) => r.json())
|
||||
]);
|
||||
|
||||
return {
|
||||
status: 200,
|
||||
props: {
|
||||
user: user,
|
||||
sharedAlbums: sharedAlbums
|
||||
}
|
||||
};
|
||||
} catch (e) {
|
||||
return {
|
||||
status: 302,
|
||||
redirect: '/auth/login'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
|
||||
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
|
||||
import PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
|
||||
import SharedAlbumListTile from '$lib/components/sharing-page/shared-album-list-tile.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
export let sharedAlbums: AlbumResponseDto[];
|
||||
|
||||
const createSharedAlbum = async () => {
|
||||
try {
|
||||
const {data: newAlbum} = await api.albumApi.createAlbum({
|
||||
albumName: 'Untitled'
|
||||
});
|
||||
|
||||
goto('/albums/' + newAlbum.id);
|
||||
} catch (e) {
|
||||
console.log('Error [createAlbum] ', e);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Albums - Immich</title>
|
||||
</svelte:head>
|
||||
|
||||
<section>
|
||||
<NavigationBar {user} on:uploadClicked={() => {}}/>
|
||||
</section>
|
||||
|
||||
<section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg">
|
||||
<SideBar/>
|
||||
|
||||
<section class="overflow-y-auto relative">
|
||||
<section id="album-content" class="relative pt-8 pl-4 mb-12 bg-immich-bg">
|
||||
<!-- Main Section -->
|
||||
<div class="px-4 flex justify-between place-items-center">
|
||||
<div>
|
||||
<p class="font-medium">Sharing</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
on:click={createSharedAlbum}
|
||||
class="flex place-items-center gap-1 text-sm hover:bg-immich-primary/5 p-2 rounded-lg font-medium hover:text-gray-700"
|
||||
>
|
||||
<span>
|
||||
<PlusBoxOutline size="18"/>
|
||||
</span>
|
||||
<p>Create shared album</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-4">
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
<!-- Share Album List -->
|
||||
<div class="w-full flex flex-col place-items-center">
|
||||
{#each sharedAlbums as album}
|
||||
<a sveltekit:prefetch href={`albums/${album.id}`}>
|
||||
<SharedAlbumListTile {album} {user}/>
|
||||
</a
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Empty List -->
|
||||
{#if sharedAlbums.length === 0}
|
||||
<div
|
||||
class="border p-5 w-[50%] m-auto mt-10 bg-gray-50 rounded-3xl flex flex-col place-content-center place-items-center"
|
||||
>
|
||||
<img src="/empty-2.svg" alt="Empty shared album" width="500"/>
|
||||
<p class="text-center text-immich-text-gray-500">
|
||||
Create a shared album to share photos and videos with people in your network
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
Loading…
Reference in New Issue