Add "ui login" support

src/features/authentication/AuthManager.ts

@@ -0,0 +1,93 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { AppStorage } from '@/lib/storage/AppStorage.ts';
+import { useSessionStorage } from '@/base/hooks/useStorage.tsx';
+
+export class AuthManager {
+    static readonly AUTH_REQUIRED_KEY = 'auth-required';
+
+    static readonly REFRESH_TOKEN_KEY = 'auth-refresh-token';
+
+    static readonly REACT_SESSION_REFRESH_KEY = 'auth-react-session-refresh';
+
+    private static accessToken: string | null = null;
+
+    static isAuthRequired(): boolean | null {
+        return AppStorage.session.getItemParsed(AuthManager.AUTH_REQUIRED_KEY, null);
+    }
+
+    static setAuthRequired(value: boolean | null): void {
+        AppStorage.session.setItem(AuthManager.AUTH_REQUIRED_KEY, value);
+    }
+
+    static useIsAuthRequired(): boolean | null {
+        const [value] = useSessionStorage(AuthManager.AUTH_REQUIRED_KEY, null);
+
+        return value;
+    }
+
+    static getAccessToken(): string | null {
+        return AuthManager.accessToken;
+    }
+
+    static getRefreshToken(): string | null {
+        return AppStorage.session.getItemParsed(AuthManager.REFRESH_TOKEN_KEY, null);
+    }
+
+    static getTokens(): { accessToken: string | null; refreshToken: string | null } {
+        return {
+            accessToken: AuthManager.getAccessToken(),
+            refreshToken: AuthManager.getRefreshToken(),
+        };
+    }
+
+    static setAccessToken(token: string): void {
+        AuthManager.accessToken = token;
+        AuthManager.refreshReactSessionContext();
+    }
+
+    static setRefreshToken(token: string): void {
+        AppStorage.session.setItem(AuthManager.REFRESH_TOKEN_KEY, token);
+        AuthManager.refreshReactSessionContext();
+    }
+
+    static setTokens(accessToken: string, refreshToken: string): void {
+        AuthManager.setAccessToken(accessToken);
+        AuthManager.setRefreshToken(refreshToken);
+    }
+
+    static removeAccessToken(): void {
+        AuthManager.accessToken = null;
+        AuthManager.refreshReactSessionContext();
+    }
+
+    static removeRefreshToken(): void {
+        AppStorage.session.setItem(AuthManager.REFRESH_TOKEN_KEY, undefined);
+        AuthManager.refreshReactSessionContext();
+    }
+
+    static removeTokens(): void {
+        AuthManager.removeAccessToken();
+        AuthManager.removeRefreshToken();
+    }
+
+    private static getNextReactSessionContextId(): number {
+        const id = AppStorage.session.getItemParsed(AuthManager.REACT_SESSION_REFRESH_KEY, 0);
+
+        return (id + 1) % Number.MAX_SAFE_INTEGER;
+    }
+
+    static refreshReactSessionContext(): void {
+        AppStorage.session.setItem(AuthManager.REACT_SESSION_REFRESH_KEY, AuthManager.getNextReactSessionContextId());
+    }
+
+    static useListenToReactSessionContextRefreshEvent(): void {
+        useSessionStorage(AuthManager.REACT_SESSION_REFRESH_KEY, 0);
+    }
+}

src/features/authentication/SessionContext.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { createContext, ReactNode, useContext, useMemo } from 'react';
+import { AuthManager } from '@/features/authentication/AuthManager.ts';
+
+interface TSessionContext {
+    isAuthRequired: boolean | null;
+    accessToken: string | null;
+    refreshToken: string | null;
+}
+
+const SessionContext = createContext<TSessionContext>({
+    isAuthRequired: null,
+    accessToken: null,
+    refreshToken: null,
+});
+
+export const SessionContextProvider = ({ children }: { children: ReactNode }) => {
+    AuthManager.useListenToReactSessionContextRefreshEvent();
+
+    const isAuthRequired = AuthManager.useIsAuthRequired();
+    const { accessToken, refreshToken } = AuthManager.getTokens();
+
+    const value = useMemo(
+        () => ({
+            isAuthRequired,
+            accessToken,
+            refreshToken,
+        }),
+        [isAuthRequired, accessToken, refreshToken],
+    );
+
+    return <SessionContext.Provider value={value}>{children}</SessionContext.Provider>;
+};
+
+export const useSessionContext = () => useContext(SessionContext);

src/features/authentication/components/AuthGuard.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { ReactNode, useEffect } from 'react';
+import { useSessionContext } from '@/features/authentication/SessionContext.tsx';
+import { SplashScreen } from '@/features/authentication/components/SplashScreen.tsx';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { AuthManager } from '@/features/authentication/AuthManager.ts';
+
+export const AuthGuard = ({ children }: { children: ReactNode }) => {
+    const { isAuthRequired } = useSessionContext();
+
+    requestManager.useGetAbout({
+        skip: isAuthRequired !== null,
+        onCompleted: () => AuthManager.setAuthRequired(false),
+    });
+
+    useEffect(() => {
+        const onUnload = () => AuthManager.setAuthRequired(null);
+
+        window.addEventListener('beforeunload', onUnload);
+
+        return () => window.removeEventListener('beforeunload', onUnload);
+    }, []);
+
+    if (isAuthRequired === null) {
+        return <SplashScreen />;
+    }
+
+    return children;
+};

src/features/authentication/components/SplashScreen.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { useTheme } from '@mui/material/styles';
+import Stack from '@mui/material/Stack';
+import { SuwayomiLogo } from '@/assets/SuwayomiLogo.tsx';
+import { ServerAddressSetting } from '@/features/settings/components/ServerAddressSetting.tsx';
+
+export const SplashScreen = () => {
+    const theme = useTheme();
+
+    return (
+        <Stack
+            sx={{
+                minWidth: '100vw',
+                minHeight: '100vh',
+                justifyContent: 'center',
+                alignItems: 'center',
+                backgroundColor: 'primary.light',
+                ...theme.applyStyles('dark', {
+                    backgroundColor: 'primary.dark',
+                }),
+            }}
+        >
+            <SuwayomiLogo
+                sx={{
+                    fontSize: 250,
+                    [theme.breakpoints.up('lg')]: {
+                        fontSize: 350,
+                    },
+                }}
+                circleRingColor={theme.palette.primary.light}
+            />
+            {import.meta.env.DEV && (
+                <Stack sx={{ height: 'auto', mt: 5 }}>
+                    <ServerAddressSetting />
+                </Stack>
+            )}
+        </Stack>
+    );
+};

src/features/authentication/screens/LoginPage.tsx

@@ -0,0 +1,143 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { useTranslation } from 'react-i18next';
+import { useEffect, useState } from 'react';
+import TextField from '@mui/material/TextField';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { Navigate, useNavigate } from 'react-router-dom';
+import { useTheme } from '@mui/material/styles';
+import { StringParam, useQueryParam } from 'use-query-params';
+import { PasswordTextField } from '@/base/components/inputs/PasswordTextField.tsx';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { makeToast } from '@/base/utils/Toast.ts';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+import { AuthManager } from '@/features/authentication/AuthManager.ts';
+import { SuwayomiLogo } from '@/assets/SuwayomiLogo.tsx';
+import { useSessionContext } from '@/features/authentication/SessionContext.tsx';
+import { AppRoutes } from '@/base/AppRoute.constants.ts';
+import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
+import { SearchParam } from '@/base/Base.types.ts';
+import { ServerAddressSetting } from '@/features/settings/components/ServerAddressSetting.tsx';
+
+export const LoginPage = () => {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const { setOverride } = useNavBarContext();
+    const navigate = useNavigate();
+    const { isAuthRequired, accessToken, refreshToken } = useSessionContext();
+
+    const [redirect] = useQueryParam(SearchParam.REDIRECT, StringParam);
+    const [loginUser, { loading: isLoading }] = requestManager.useLoginUser();
+
+    const [username, setUsername] = useState('');
+    const [password, setPassword] = useState('');
+
+    const isAuthenticated = !isAuthRequired || (!!isAuthRequired && !!accessToken && !!refreshToken);
+
+    const doLogin = async () => {
+        try {
+            const { data } = await loginUser({ variables: { username, password } });
+
+            if (data) {
+                AuthManager.setTokens(data.login.accessToken, data.login.refreshToken);
+                navigate(redirect ?? AppRoutes.root.path);
+            }
+        } catch (e) {
+            makeToast(t('tracking.action.login.label.failure', { name: 'Suwayomi' }), 'error', getErrorMessage(e));
+        }
+    };
+
+    useEffect(() => {
+        setOverride({ status: true, value: null });
+
+        return () => setOverride({ status: false, value: null });
+    }, []);
+
+    if (isAuthenticated) {
+        return <Navigate to={AppRoutes.root.path} replace />;
+    }
+
+    return (
+        <Stack
+            sx={{
+                [theme.breakpoints.up('lg')]: {
+                    flexDirection: 'row',
+                },
+            }}
+        >
+            <Stack
+                sx={{
+                    minHeight: '50vh',
+                    flexBasis: '60%',
+                    p: 4,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    backgroundColor: 'primary.light',
+                    ...theme.applyStyles('dark', {
+                        backgroundColor: 'primary.dark',
+                    }),
+                    [theme.breakpoints.up('lg')]: {
+                        minHeight: '0vh',
+                        height: '100vh',
+                    },
+                }}
+            >
+                <SuwayomiLogo
+                    sx={{
+                        fontSize: 250,
+                        [theme.breakpoints.up('lg')]: {
+                            fontSize: 350,
+                        },
+                    }}
+                    circleRingColor={theme.palette.primary.light}
+                />
+            </Stack>
+            <Stack
+                sx={{
+                    minHeight: '50vh',
+                    flexBasis: '40%',
+                    p: 4,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    [theme.breakpoints.up('lg')]: {
+                        minHeight: '0vh',
+                        height: '100vh',
+                    },
+                }}
+            >
+                <Stack sx={{ maxWidth: 300, gap: 2 }}>
+                    <Stack>
+                        <TextField
+                            autoFocus
+                            margin="dense"
+                            id="username"
+                            name="username"
+                            label={t('global.label.username')}
+                            type="text"
+                            fullWidth
+                            variant="standard"
+                            onChange={(e) => setUsername(e.target.value)}
+                        />
+                        <PasswordTextField
+                            margin="dense"
+                            fullWidth
+                            variant="standard"
+                            onChange={(e) => setPassword(e.target.value)}
+                        />
+                        {import.meta.env.DEV && <ServerAddressSetting />}
+                    </Stack>
+                    <Button disabled={isLoading || (!username && !password)} variant="contained" onClick={doLogin}>
+                        {t('global.button.log_in')}
+                    </Button>
+                </Stack>
+            </Stack>
+        </Stack>
+    );
+};