Better error display when oidc login is used

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

View File

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

View File

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