Add linked accounts category in settings

front/packages/ui/src/settings/account.tsx

@@ -136,37 +136,36 @@ export const AccountSettings = () => {
 				label={t("settings.account.avatar.label")}
 				description={t("settings.account.avatar.description")}
 			>
-				<View {...css({ flexDirection: "row", gap: ts(1) })}>
-					<Button
-						text={t("misc.edit")}
-						onPress={async () => {
-							const img = await ImagePicker.launchImageLibraryAsync({
-								mediaTypes: ImagePicker.MediaTypeOptions.Images,
-								aspect: [1, 1],
-								quality: 1,
-								base64: true,
-							});
-							if (img.canceled || img.assets.length !== 1) return;
-							const data = dataURItoBlob(img.assets[0].uri);
-							const formData = new FormData();
-							formData.append("picture", data);
-							await queryFn({
-								method: "POST",
-								path: ["auth", "me", "logo"],
-								formData,
-							});
-						}}
-					/>
-					<Button
-						text={t("misc.delete")}
-						onPress={async () => {
-							await queryFn({
-								method: "DELETE",
-								path: ["auth", "me", "logo"],
-							});
-						}}
-					/>
-				</View>
+				<Button
+					text={t("misc.edit")}
+					onPress={async () => {
+						const img = await ImagePicker.launchImageLibraryAsync({
+							mediaTypes: ImagePicker.MediaTypeOptions.Images,
+							aspect: [1, 1],
+							quality: 1,
+							base64: true,
+						});
+						if (img.canceled || img.assets.length !== 1) return;
+						const data = dataURItoBlob(img.assets[0].uri);
+						const formData = new FormData();
+						formData.append("picture", data);
+					await queryFn({
+							method: "POST",
+							path: ["auth", "me", "logo"],
+							formData,
+						});
+					}}
+				/>
+				<Button
+					text={t("misc.delete")}
+					onPress={async () => {
+					await queryFn({
+							method: "DELETE",
+							path: ["auth", "me", "logo"],
+						});
+					}}
+				/>
+
 			</Preference>
 			<Preference icon={Mail} label={t("settings.account.email.label")} description={account.email}>
 				<Button

front/packages/ui/src/settings/base.tsx

@@ -32,7 +32,7 @@ import {
 } from "@kyoo/primitives";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Children, ReactElement, ReactNode } from "react";
-import { View } from "react-native";
+import { Falsy, View } from "react-native";
 import { px, rem, useYoshiki } from "yoshiki/native";
 
 export const Preference = ({
@@ -43,7 +43,7 @@ export const Preference = ({
 	children,
 	...props
 }: {
-	customIcon?: ReactElement;
+	customIcon?: ReactElement | Falsy;
 	icon: Icon;
 	label: string;
 	description: string;
@@ -79,7 +79,7 @@ export const Preference = ({
 					<SubP>{description}</SubP>
 				</View>
 			</View>
-			<View {...css({ marginX: ts(2) })}>{children}</View>
+			<View {...css({ marginX: ts(2), flexDirection: "row", gap: ts(1) })}>{children}</View>
 		</View>
 	);
 };
@@ -90,7 +90,7 @@ export const SettingsContainer = ({
 	extra,
 	...props
 }: {
-	children: ReactElement | ReactElement[];
+	children: ReactElement | (ReactElement | Falsy)[] | Falsy;
 	title: string;
 	extra?: ReactElement;
 }) => {

front/packages/ui/src/settings/index.tsx

@@ -25,6 +25,7 @@ import { DefaultLayout } from "../layout";
 import { AccountSettings } from "./account";
 import { About, GeneralSettings } from "./general";
 import { PlaybackSettings } from "./playback";
+import { OidcSettings } from "./oidc";
 
 export const SettingsPage: QueryPage = () => {
 	const account = useAccount();
@@ -33,9 +34,11 @@ export const SettingsPage: QueryPage = () => {
 			<GeneralSettings />
 			{account && <PlaybackSettings />}
 			{account && <AccountSettings />}
+			{account && <OidcSettings />}
 			<About />
 		</ScrollView>
 	);
 };
 
 SettingsPage.getLayout = DefaultLayout;
+SettingsPage.getFetchUrls = () => [OidcSettings.query()];

front/packages/ui/src/settings/oidc.tsx

@@ -0,0 +1,83 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { QueryIdentifier, ServerInfo, ServerInfoP, useAccount, useFetch } from "@kyoo/models";
+import { IconButton, tooltip, ts } from "@kyoo/primitives";
+import { useTranslation } from "react-i18next";
+import { ImageBackground } from "react-native";
+import { useYoshiki } from "yoshiki/native";
+import { ErrorView } from "../errors";
+import { Preference, SettingsContainer } from "./base";
+
+import Badge from "@material-symbols/svg-400/outlined/badge.svg";
+import OpenProfile from "@material-symbols/svg-400/outlined/open_in_new.svg";
+import Remove from "@material-symbols/svg-400/outlined/close.svg";
+
+export const OidcSettings = () => {
+	const account = useAccount()!;
+	const { css } = useYoshiki();
+	const { t } = useTranslation();
+	const { data, error } = useFetch(OidcSettings.query());
+
+	return (
+		<SettingsContainer title={t("settings.oidc.label")}>
+			{error ? (
+				<ErrorView error={error} />
+			) : data ? (
+				Object.values(data.oidc).map((x) => (
+					<Preference
+						key={x.displayName}
+						icon={Badge}
+						label={x.displayName}
+						description={
+							true
+								? t("settings.oidc.connected", { username: "test" })
+								: t("settings.oidc.not-connected")
+						}
+						customIcon={
+							x.logoUrl != null && (
+								<ImageBackground
+									source={{ uri: x.logoUrl }}
+									{...css({ width: ts(3), height: ts(3), marginRight: ts(2) })}
+								/>
+							)
+						}
+					>
+						<IconButton
+							icon={OpenProfile}
+							onPress={() => {}}
+							{...tooltip(t("settings.oidc.open-profile", { provider: x.displayName }))}
+						/>
+						<IconButton
+							icon={Remove}
+							onPress={() => {}}
+							{...tooltip(t("settings.oidc.delete", { provider: x.displayName }))}
+						/>
+					</Preference>
+				))
+			) : null}
+		</SettingsContainer>
+	);
+};
+
+OidcSettings.query = (): QueryIdentifier<ServerInfo> => ({
+	path: ["info"],
+	parser: ServerInfoP,
+});

front/translations/en.json

@@ -130,6 +130,13 @@
 				"newPassword": "New password"
 			}
 		},
+		"oidc": {
+			"label": "Linked accounts",
+			"connected": "Connected as {{username}}.",
+			"not-connected": "Disconnected",
+			"open-profile": "Open your {{provider}} profile",
+			"delete": "Unlink your kyoo's account with your {{provider}} account"
+		},
 		"about": {
 			"label": "About",
 			"android-app": {

front/translations/fr.json

@@ -130,6 +130,13 @@
 				"newPassword": "Nouveau mot de passe"
 			}
 		},
+		"oidc": {
+			"label": "Comptes liés",
+			"connected": "Connecté en tant que {{username}}.",
+			"not-connected": "Déconnecté",
+			"open-profile": "Ouvrir votre profil {{provider}}",
+			"delete": "Dissocier votre compte Kyoo de votre compte {{provider}}"
+		},
 		"about": {
 			"label": "À propos",
 			"android-app": {