From f5220e21e02415daeec415ed7da4176a1addc7ef Mon Sep 17 00:00:00 2001 From: Aleksi Lassila Date: Wed, 12 Jun 2024 23:10:48 +0300 Subject: [PATCH] feat: Logging in multiple users, user selection --- src/App.svelte | 16 ++-- src/lib/apis/reiverr/reiverr-api.ts | 8 +- src/lib/components/AddElementOverlay.svelte | 9 ++ .../components/Dialog/AddUserDialog.svelte | 14 +++ src/lib/components/Dialog/Dialog.svelte | 2 +- src/lib/components/Login.svelte | 64 +++++++++++++ .../SeriesPage/ManageSeasonCard.svelte | 7 +- src/lib/components/Sidebar/Sidebar.svelte | 3 +- src/lib/components/StackRouter/StackRouter.ts | 9 +- src/lib/pages/LoginPage.svelte | 64 +------------ src/lib/pages/SplashScreen.svelte | 7 ++ src/lib/pages/UsersPage.svelte | 92 ++++++++++++++++++- src/lib/selectable.ts | 2 + src/lib/stores/session.store.ts | 14 ++- src/lib/stores/user.store.ts | 3 +- 15 files changed, 226 insertions(+), 88 deletions(-) create mode 100644 src/lib/components/AddElementOverlay.svelte create mode 100644 src/lib/components/Dialog/AddUserDialog.svelte create mode 100644 src/lib/components/Login.svelte create mode 100644 src/lib/pages/SplashScreen.svelte diff --git a/src/App.svelte b/src/App.svelte index 8ec786e..d532cec 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -15,6 +15,8 @@ import { localSettings } from './lib/stores/localstorage.store'; import { user } from './lib/stores/user.store'; import { sessions } from './lib/stores/session.store'; + import SplashScreen from './lib/pages/SplashScreen.svelte'; + import UsersPage from './lib/pages/UsersPage.svelte'; user.subscribe((s) => console.log('user', s)); sessions.subscribe((s) => console.log('sessions', s)); @@ -57,15 +59,9 @@ {#if $user === undefined} -
-
-
-

Reiverr

-
-
Loading...
-
+ {:else if $user === null} - + {:else if $user.onboardingDone === false} {:else} @@ -92,10 +88,10 @@ - - {/if} + + diff --git a/src/lib/apis/reiverr/reiverr-api.ts b/src/lib/apis/reiverr/reiverr-api.ts index 17ffe9c..f0f366d 100644 --- a/src/lib/apis/reiverr/reiverr-api.ts +++ b/src/lib/apis/reiverr/reiverr-api.ts @@ -22,10 +22,10 @@ export class ReiverrApi implements Api { }); } - isSetupDone = async (): Promise => - this.getClient() - ?.GET('/user/isSetupDone') - .then((res) => res.data || false) || false; + // isSetupDone = async (): Promise => + // this.getClient() + // ?.GET('/user/isSetupDone') + // .then((res) => res.data || false) || false; async getUser() { const res = await this.getClient()?.GET('/user', {}); diff --git a/src/lib/components/AddElementOverlay.svelte b/src/lib/components/AddElementOverlay.svelte new file mode 100644 index 0000000..bd675da --- /dev/null +++ b/src/lib/components/AddElementOverlay.svelte @@ -0,0 +1,9 @@ + + +
+
+ +
+
diff --git a/src/lib/components/Dialog/AddUserDialog.svelte b/src/lib/components/Dialog/AddUserDialog.svelte new file mode 100644 index 0000000..18aa999 --- /dev/null +++ b/src/lib/components/Dialog/AddUserDialog.svelte @@ -0,0 +1,14 @@ + + + + { + close(); + navigate('/', { refresh: true }); + }} + /> + diff --git a/src/lib/components/Dialog/Dialog.svelte b/src/lib/components/Dialog/Dialog.svelte index ed7d6af..d0afd25 100644 --- a/src/lib/components/Dialog/Dialog.svelte +++ b/src/lib/components/Dialog/Dialog.svelte @@ -27,7 +27,7 @@ $$restProps.class )} > - +
diff --git a/src/lib/components/Login.svelte b/src/lib/components/Login.svelte new file mode 100644 index 0000000..3b81657 --- /dev/null +++ b/src/lib/components/Login.svelte @@ -0,0 +1,64 @@ + + + +

Login to Reiverr

+
+ If this is your first time logging in, a new account will be created based on your credentials. +
+ + baseUrl.set(e.detail)} class="mb-4 w-full"> + Server + + + name.set(detail)} class="mb-4 w-full"> + Name + + Password + + + + {#if error} +
{error}
+ {/if} + diff --git a/src/lib/components/SeriesPage/ManageSeasonCard.svelte b/src/lib/components/SeriesPage/ManageSeasonCard.svelte index 4e1f115..a00906d 100644 --- a/src/lib/components/SeriesPage/ManageSeasonCard.svelte +++ b/src/lib/components/SeriesPage/ManageSeasonCard.svelte @@ -5,6 +5,7 @@ import classNames from 'classnames'; import { Plus, PlusCircled } from 'radix-icons-svelte'; import { getCardDimensions } from '../../utils'; + import AddElementOverlay from '../AddElementOverlay.svelte'; export let backdropUrl: string; @@ -31,10 +32,6 @@ class="bg-cover bg-center absolute inset-0" style={`background-image: url('${backdropUrl}')`} /> -
-
- -
-
+ diff --git a/src/lib/components/Sidebar/Sidebar.svelte b/src/lib/components/Sidebar/Sidebar.svelte index bf96b8d..7c8113a 100644 --- a/src/lib/components/Sidebar/Sidebar.svelte +++ b/src/lib/components/Sidebar/Sidebar.svelte @@ -16,6 +16,7 @@ import { onMount } from 'svelte'; import { useTabs } from '../Tab/Tab'; import { user } from '../../stores/user.store'; + import { sessions } from '../../stores/session.store'; enum Tabs { Users, @@ -121,7 +122,7 @@ sessions.setActiveSession()} let:hasFocus >
{ + const navigate = ( + routeString: string, + options: { replaceStack?: boolean; refresh?: boolean } = {} + ) => { + if (options.refresh) { + location.assign(routeString); + return; + } const page: Page = routeStringToRoute(routeString); const replaceStack = page.route.root || options.replaceStack || false; diff --git a/src/lib/pages/LoginPage.svelte b/src/lib/pages/LoginPage.svelte index 75214c5..02e9ba3 100644 --- a/src/lib/pages/LoginPage.svelte +++ b/src/lib/pages/LoginPage.svelte @@ -1,65 +1,9 @@
- -

Login to Reiverr

-
- If this is your first time logging in, a new account will be created based on your - credentials. -
- - baseUrl.set(e.detail)} class="mb-4 w-full"> - Server - - - name.set(detail)} class="mb-4 w-full"> - Name - - Password - - - - {#if error} -
{error}
- {/if} - +
+ +
diff --git a/src/lib/pages/SplashScreen.svelte b/src/lib/pages/SplashScreen.svelte new file mode 100644 index 0000000..6f2567b --- /dev/null +++ b/src/lib/pages/SplashScreen.svelte @@ -0,0 +1,7 @@ +
+
+
+

Reiverr

+
+
Loading...
+
diff --git a/src/lib/pages/UsersPage.svelte b/src/lib/pages/UsersPage.svelte index 0460804..4bc1e06 100644 --- a/src/lib/pages/UsersPage.svelte +++ b/src/lib/pages/UsersPage.svelte @@ -1,5 +1,93 @@ - -Users Page + + {#await users then users} + {#if users?.length} +

Who is watching?

+ + {#each users as item} + {@const user = item.user} + user && handleSwitchUser(item)}> + +
+
+ {user?.name} +
+ + + {/each} + createModal(AddUserDialog, {})}> + +
+
+ +
+ + + + + + + + + + {:else} +
+ +
+ {/if} + {/await} + diff --git a/src/lib/selectable.ts b/src/lib/selectable.ts index f02ccea..01a21ac 100644 --- a/src/lib/selectable.ts +++ b/src/lib/selectable.ts @@ -724,6 +724,8 @@ export class Selectable { this._addChildCount++; // console.log('Incremented addChildCount to', this._addChildCount); if (focusIndex > 0) this.focusIndex.update((prev) => prev + 1); // TODO: Maybe needs fixing pt1 + } else if (this.children.length === 0 && get(this.hasFocus)) { + childToFocus = child; } if (this._removedChildrenCount > 1) { diff --git a/src/lib/stores/session.store.ts b/src/lib/stores/session.store.ts index 0671e66..e6afaa4 100644 --- a/src/lib/stores/session.store.ts +++ b/src/lib/stores/session.store.ts @@ -1,8 +1,10 @@ import { createLocalStorageStore } from './localstorage.store'; import type { operations } from '../apis/reiverr/reiverr.generated'; import axios from 'axios'; +import { get } from 'svelte/store'; export interface Session { + id: string; baseUrl: string; token: string; } @@ -15,7 +17,7 @@ function useSessions() { } ); - function setActiveSession(session: Session) { + function setActiveSession(session?: Session) { sessions.update((s) => ({ ...s, activeSession: session })); } @@ -33,12 +35,13 @@ function useSessions() { if (res.status !== 200) return res; const session = { + id: res.data.user.id, baseUrl, token: res.data.accessToken }; sessions.update((s) => { - const sessions = s.sessions.concat(session); + const sessions = s.sessions.filter((s) => s.id !== session.id).concat(session); return { sessions, activeSession: activate ? session : s.activeSession @@ -59,11 +62,16 @@ function useSessions() { }); } + function removeSessions() { + sessions.set({ sessions: [] }); + } + return { subscribe: sessions.subscribe, setActiveSession, addSession, - removeSession + removeSession, + removeSessions }; } diff --git a/src/lib/stores/user.store.ts b/src/lib/stores/user.store.ts index a7cffc3..b9d0b97 100644 --- a/src/lib/stores/user.store.ts +++ b/src/lib/stores/user.store.ts @@ -26,7 +26,8 @@ function useUser() { Authorization: 'Bearer ' + activeSession.token } }) - .then((r) => r.data); + .then((r) => r.data) + .catch(() => null); if (lastActiveSession === activeSession) userStore.set(user); });