Theme disabled buttons

front/packages/models/src/query.tsx

@@ -49,7 +49,7 @@ export const queryFn = async <Parser extends z.ZodTypeAny>(
 	type?: Parser,
 	token?: string | null,
 ): Promise<z.infer<Parser>> => {
-	const url = context.apiUrl ? null : getCurrentApiUrl();
+	const url = context.apiUrl ?? getCurrentApiUrl();
 	if (token === undefined && context.authenticated !== false) token = await getToken();
 	const path = [url]
 		.concat(
@@ -166,6 +166,7 @@ export type QueryIdentifier<T = unknown, Ret = T> = {
 
 	placeholderData?: T | (() => T);
 	enabled?: boolean;
+	apiUrl?: string;
 	options?: Partial<Parameters<typeof queryFn>[0]>;
 };
 
@@ -183,10 +184,10 @@ export type QueryPage<Props = {}, Items = unknown> = ComponentType<
 export const toQueryKey = (query: {
 	path: (string | undefined)[];
 	params?: { [query: string]: boolean | number | string | string[] | undefined };
-	options?: { apiUrl?: string };
+	apiUrl?: string;
 }) => {
 	return [
-		query.options?.apiUrl,
+		query.apiUrl,
 		...query.path,
 		query.params
 			? "?" +
@@ -195,7 +196,7 @@ export const toQueryKey = (query: {
 					.map(([k, v]) => `${k}=${Array.isArray(v) ? v.join(",") : v}`)
 					.join("&")
 			: null,
-	];
+	].filter((x) => x);
 };
 
 export const useFetch = <Data,>(query: QueryIdentifier<Data>) => {

front/packages/primitives/src/button.tsx

@@ -31,6 +31,7 @@ export const Button = forwardRef(function Button<AsProps = PressableProps>(
 		text,
 		icon,
 		licon,
+		disabled,
 		as,
 		...props
 	}: {
@@ -38,6 +39,7 @@ export const Button = forwardRef(function Button<AsProps = PressableProps>(
 		text?: string;
 		licon?: ReactElement | Falsy;
 		icon?: ReactElement | Falsy;
+		disabled?: boolean;
 		as?: ComponentType<AsProps>;
 	} & AsProps,
 	ref: ForwardedRef<unknown>,
@@ -48,22 +50,35 @@ export const Button = forwardRef(function Button<AsProps = PressableProps>(
 	return (
 		<Container
 			ref={ref as any}
+			disabled={disabled}
 			{...(css(
-				{
-					flexGrow: 0,
-					flexDirection: "row",
-					alignItems: "center",
-					justifyContent: "center",
-					overflow: "hidden",
-					p: ts(0.5),
-					borderRadius: ts(5),
-					borderColor: (theme: Theme) => theme.accent,
-					borderWidth: ts(0.5),
-					fover: {
-						self: { bg: (theme: Theme) => theme.accent },
-						text: { color: (theme: Theme) => theme.colors.white },
+				[
+					{
+						flexGrow: 0,
+						flexDirection: "row",
+						alignItems: "center",
+						justifyContent: "center",
+						overflow: "hidden",
+						p: ts(0.5),
+						borderRadius: ts(5),
+						borderColor: (theme: Theme) => theme.accent,
+						borderWidth: ts(0.5),
+						fover: {
+							self: { bg: (theme: Theme) => theme.accent },
+							text: { color: (theme: Theme) => theme.colors.white },
+						},
 					},
-				},
+					disabled && {
+						child: {
+							self: {
+								borderColor: (theme) => theme.overlay1,
+							},
+							text: {
+								color: (theme) => theme.overlay1,
+							},
+						},
+					},
+				],
 				props as any,
 			) as AsProps)}
 		>

front/packages/ui/src/login/login.tsx

@@ -44,7 +44,6 @@ export const LoginPage: QueryPage<{ apiUrl?: string; error?: string }> = ({
 	const { css } = useYoshiki();
 
 	useEffect(() => {
-		console.log("login", apiUrl);
 		if (!apiUrl && Platform.OS !== "web")
 			router.replace("/server-url", undefined, {
 				experimental: { nativeBehavior: "stack-replace", isNestedNavigator: false },

front/packages/ui/src/login/server-url.tsx

@@ -19,7 +19,7 @@
  */
 
 import { QueryIdentifier, QueryPage, ServerInfo, ServerInfoP, useFetch } from "@kyoo/models";
-import { Button, P, Input, ts, H1, HR, Link } from "@kyoo/primitives";
+import { Button, P, Input, ts, H1, HR, Link, tooltip } from "@kyoo/primitives";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
@@ -42,11 +42,12 @@ const query: QueryIdentifier<ServerInfo> = {
 export const ServerUrlPage: QueryPage = () => {
 	const [_apiUrl, setApiUrl] = useState("");
 	const apiUrl = cleanApiUrl(_apiUrl);
-	const { data, error } = useFetch({ ...query, options: { apiUrl: apiUrl } });
+	const { data, error } = useFetch({ ...query, apiUrl });
 	const router = useRouter();
 	const { t } = useTranslation();
 	const { css } = useYoshiki();
 
+	console.log(data);
 	return (
 		<View
 			{...css({
@@ -58,15 +59,18 @@ export const ServerUrlPage: QueryPage = () => {
 			<H1>{t("login.server")}</H1>
 			<View {...css({ justifyContent: "center" })}>
 				<Input variant="big" onChangeText={setApiUrl} />
-				<P {...css({ color: (theme: Theme) => theme.colors.red, alignSelf: "center" })}>
-					{error?.errors[0] ?? " "}
-				</P>
+				{!data && (
+					<P {...css({ color: (theme: Theme) => theme.colors.red, alignSelf: "center" })}>
+						{error?.errors[0] ?? t("misc.loading")}
+					</P>
+				)}
 			</View>
 			<View {...css({ marginTop: ts(5) })}>
 				<Button
 					text={t("login.guest")}
 					onPress={() => {}}
-					disabled={error != null || data?.allowGuests != true}
+					disabled={data?.allowGuests != true}
+					{...(data?.allowGuests === false ? tooltip(t("login.guets-forbidden")) : {})}
 				/>
 				<HR />
 				<View {...css({ flexDirection: "row", gap: ts(2) })}>
@@ -75,7 +79,7 @@ export const ServerUrlPage: QueryPage = () => {
 						onPress={() => {
 							router.push(`/login?apiUrl=${apiUrl}`);
 						}}
-						disabled={error != null}
+						disabled={data == null}
 						{...css({ flexGrow: 1, flexShrink: 1 })}
 					/>
 					<Button
@@ -83,7 +87,7 @@ export const ServerUrlPage: QueryPage = () => {
 						onPress={() => {
 							router.push(`/register?apiUrl=${apiUrl}`);
 						}}
-						disabled={error != null}
+						disabled={data == null}
 						{...css({ flexGrow: 1, flexShrink: 1 })}
 					/>
 				</View>

front/translations/en.json

@@ -69,7 +69,8 @@
 		"expand": "Expand",
 		"collapse": "Collapse",
 		"edit": "Edit",
-		"or": "OR"
+		"or": "OR",
+		"loading": "Loading"
 	},
 	"navbar": {
 		"home": "Home",
@@ -167,6 +168,7 @@
 		"login": "Login",
 		"register": "Register",
 		"guest": "Continue as guest",
+		"guest-forbidden": "This instance of kyoo does not allow guests",
 		"via": "Continue with {{provider}}",
 		"add-account": "Add account",
 		"logout": "Logout",

front/translations/fr.json

@@ -69,7 +69,8 @@
 		"expand": "Développer",
 		"collapse": "Replier",
 		"edit": "Changer",
-		"or": "OU"
+		"or": "OU",
+		"loading": "Chargement en cours"
 	},
 	"navbar": {
 		"home": "Accueil",
@@ -168,6 +169,7 @@
 		"via": "Continuer avec {{provider}}",
 		"register": "Créer un compte",
 		"guest": "Continuer en tant qu'invité",
+		"guest-forbidden": "Cette instance de kyoo n'autorise pas les comptes invités.",
 		"add-account": "Ajouter un compte",
 		"logout": "Déconnexion",
 		"server": "Addresse du serveur",