Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-31 12:14:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

Better error display when oidc login is used

Browse Source
This commit is contained in:
Zoe Roux 2024-03-03 22:33:45 +01:00
parent 15d479f1eb
commit 577f3f768d
2 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
front/packages/ui/src/login/login.tsx
View File

@ -38,11 +38,11 @@ export const cleanApiUrl = (apiUrl: string) => {
return apiUrl + "/api"; return apiUrl + "/api";
}; };
export const LoginPage: QueryPage = () => { export const LoginPage: QueryPage<{ error?: string }> = ({ error: initialError }) => {
const [apiUrl, setApiUrl] = useState(""); const [apiUrl, setApiUrl] = useState("");
const [username, setUsername] = useState(""); const [username, setUsername] = useState("");
const [password, setPassword] = useState(""); const [password, setPassword] = useState("");
const [error, setError] = useState<string | undefined>(undefined); const [error, setError] = useState<string | undefined>(initialError);
const router = useRouter(); const router = useRouter();
const { t } = useTranslation(); const { t } = useTranslation();

34
front/packages/ui/src/login/oidc.tsx
View File

@ -19,6 +19,7 @@
*/ */
import { import {
KyooErrors,
QueryIdentifier, QueryIdentifier,
QueryPage, QueryPage,
ServerInfo, ServerInfo,
@ -30,7 +31,7 @@ import { Button, HR, P, Skeleton, ts } from "@kyoo/primitives";
import { View, ImageBackground } from "react-native"; import { View, ImageBackground } from "react-native";
import { percent, rem, useYoshiki } from "yoshiki/native"; import { percent, rem, useYoshiki } from "yoshiki/native";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useEffect, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { useRouter } from "solito/router"; import { useRouter } from "solito/router";
import { ErrorView } from "../errors"; import { ErrorView } from "../errors";
@ -95,23 +96,30 @@ export const OidcCallbackPage: QueryPage<{ provider: string; code: string; error
code, code,
error, error,
}) => { }) => {
const [err, setErr] = useState<string | undefined>(); const hasRun = useRef(false);
const router = useRouter(); const router = useRouter();
useEffect(() => { useEffect(() => {
async function run() { if (hasRun.current) return;
if (error) { hasRun.current = true;
setErr(error);
return; function onError(error: string) {
} router.replace(`/login?error=${error}`, undefined, {
const { error: loginError } = await oidcLogin(provider, code);
setErr(loginError);
if (loginError) return;
router.replace("/", undefined, {
experimental: { nativeBehavior: "stack-replace", isNestedNavigator: false }, experimental: { nativeBehavior: "stack-replace", isNestedNavigator: false },
}); });
} }
run(); async function run() {
const { error: loginError } = await oidcLogin(provider, code);
if (loginError) onError(loginError);
else {
router.replace("/", undefined, {
experimental: { nativeBehavior: "stack-replace", isNestedNavigator: false },
});
}
}
if (error) onError(error);
else run();
}, [provider, code, router, error]); }, [provider, code, router, error]);
return <P>{err ?? "Loading"}</P>; return <P>{"Loading"}</P>;
}; };