Display permissions errors on the front

front/packages/ui/src/admin/users.tsx

@@ -179,7 +179,7 @@ export const UserList = () => {
 						username={user.username}
 						avatar={user.logo}
 						isAdmin={user.permissions?.includes("admin.write")}
-						isVerified={user.permissions && user.permissions.length > 0}
+						isVerified={user.isVerified}
 					/>
 				)}
 			</InfiniteFetch>

front/packages/ui/src/errors/error.tsx

@@ -20,12 +20,25 @@
 
 import { KyooErrors } from "@kyoo/models";
 import { P } from "@kyoo/primitives";
+import { ReactElement, createContext, useContext, useLayoutEffect, useState } from "react";
 import { View } from "react-native";
 import { useYoshiki } from "yoshiki/native";
+import { PermissionError } from "./unauthorized";
 
-export const ErrorView = ({ error }: { error: KyooErrors }) => {
+export const ErrorView = ({
+	error,
+	noBubble = false,
+}: {
+	error: KyooErrors;
+	noBubble?: boolean;
+}) => {
 	const { css } = useYoshiki();
+	const setError = useErrorContext();
 
+	useLayoutEffect(() => {
+		// if this is a permission error, make it go up the tree to have a whole page login screen.
+		if (!noBubble && (error.status === 401 || error.status == 403)) setError(error);
+	}, [error, noBubble, setError]);
 	console.log(error);
 	return (
 		<View
@@ -45,3 +58,15 @@ export const ErrorView = ({ error }: { error: KyooErrors }) => {
 		</View>
 	);
 };
+
+const ErrorCtx = createContext<(val: KyooErrors | null) => void>(null!);
+export const ErrorContext = ({ children }: { children: ReactElement }) => {
+	const [error, setError] = useState<KyooErrors | null>(null);
+	if (error && (error.status === 401 || error.status === 403))
+		return <PermissionError error={error} />;
+	if (error) return <ErrorView error={error} noBubble />;
+	return <ErrorCtx.Provider value={setError}>{children}</ErrorCtx.Provider>;
+};
+export const useErrorContext = () => {
+	return useContext(ErrorCtx);
+};

front/packages/ui/src/errors/unauthorized.tsx

@@ -18,10 +18,13 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { P } from "@kyoo/primitives";
+import { KyooErrors, useAccount } from "@kyoo/models";
+import { Button, Icon, Link, P, ts } from "@kyoo/primitives";
 import { useTranslation } from "react-i18next";
 import { View } from "react-native";
-import { useYoshiki } from "yoshiki/native";
+import { rem, useYoshiki } from "yoshiki/native";
+import { ErrorView } from "./error";
+import Register from "@material-symbols/svg-400/rounded/app_registration.svg";
 
 export const Unauthorized = ({ missing }: { missing: string[] }) => {
 	const { t } = useTranslation();
@@ -40,3 +43,31 @@ export const Unauthorized = ({ missing }: { missing: string[] }) => {
 		</View>
 	);
 };
+
+export const PermissionError = ({ error }: { error: KyooErrors }) => {
+	const { t } = useTranslation();
+	const { css } = useYoshiki();
+	const account = useAccount();
+
+	if (!account) {
+		return (
+			<View
+				{...css({ flexGrow: 1, flexShrink: 1, justifyContent: "center", alignItems: "center" })}
+			>
+				<P>{t("errors.needAccount")}</P>
+				<Button
+					as={Link}
+					href={"/register"}
+					text={t("login.register")}
+					licon={<Icon icon={Register} {...css({ marginRight: ts(2) })} />}
+				/>
+			</View>
+		);
+	}
+	if (account.isVerified) return <ErrorView error={error} noBubble />;
+	return (
+		<View {...css({ flexGrow: 1, flexShrink: 1, justifyContent: "center", alignItems: "center" })}>
+			<P>{t("errors.needVerification")}</P>
+		</View>
+	);
+};