Display connected status on linked accounts

front/packages/models/src/resources/user.ts

@@ -64,6 +64,19 @@ export const UserP = ResourceP("user")
 			})
 			// keep a default for older versions of the api
 			.default({}),
+		/**
+		 * User accounts on other services.
+		 */
+		externalId: z
+			.record(
+				z.string(),
+				z.object({
+					id: z.string(),
+					username: z.string().optional(),
+					profileUrl: z.string().nullable(),
+				}),
+			)
+			.default({}),
 	})
 	.transform((x) => ({ ...x, logo: imageFn(`/user/${x.slug}/logo`) }));
 

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

@@ -19,7 +19,7 @@
  */
 
 import { QueryIdentifier, ServerInfo, ServerInfoP, useAccount, useFetch } from "@kyoo/models";
-import { IconButton, Skeleton, tooltip, ts } from "@kyoo/primitives";
+import { A, Button, IconButton, Link, Skeleton, tooltip, ts } from "@kyoo/primitives";
 import { useTranslation } from "react-i18next";
 import { ImageBackground } from "react-native";
 import { rem, useYoshiki } from "yoshiki/native";
@@ -41,37 +41,54 @@ export const OidcSettings = () => {
 			{error ? (
 				<ErrorView error={error} />
 			) : data ? (
-				Object.values(data.oidc).map((x) => (
+				Object.entries(data.oidc).map(([id, x]) => {
-					<Preference
+					const acc = account.externalId[id];
-						key={x.displayName}
+					return (
-						icon={Badge}
+						<Preference
-						label={x.displayName}
+							key={x.displayName}
-						description={
+							icon={Badge}
-							true
+							label={x.displayName}
-								? t("settings.oidc.connected", { username: "test" })
+							description={
-								: t("settings.oidc.not-connected")
+								acc
-						}
+									? t("settings.oidc.connected", { username: acc.username })
-						customIcon={
+									: t("settings.oidc.not-connected")
-							x.logoUrl != null && (
+							}
-								<ImageBackground
+							customIcon={
-									source={{ uri: x.logoUrl }}
+								x.logoUrl != null && (
-									{...css({ width: ts(3), height: ts(3), marginRight: ts(2) })}
+									<ImageBackground
+										source={{ uri: x.logoUrl }}
+										{...css({ width: ts(3), height: ts(3), marginRight: ts(2) })}
+									/>
+								)
+							}
+						>
+							{acc ? (
+								<>
+									{acc.profileUrl && (
+										<IconButton
+											icon={OpenProfile}
+											as={Link}
+											href={acc.profileUrl}
+											target="_blank"
+											{...tooltip(t("settings.oidc.open-profile", { provider: x.displayName }))}
+										/>
+									)}
+									<IconButton
+										icon={Remove}
+										onPress={() => {}}
+										{...tooltip(t("settings.oidc.delete", { provider: x.displayName }))}
+									/>
+								</>
+							) : (
+								<Button
+									text={t("settings.oidc.link")}
+									onPress={() => {}}
+									{...css({ minWidth: rem(6) })}
 								/>
-							)
+							)}
-						}
+						</Preference>
-					>
+					);
-						<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>
-				))
 			) : (
 				[...Array(3)].map((_, i) => (
 					<Preference

front/translations/en.json

@@ -135,6 +135,7 @@
 			"connected": "Connected as {{username}}.",
 			"not-connected": "Disconnected",
 			"open-profile": "Open your {{provider}} profile",
+			"link": "Link",
 			"delete": "Unlink your kyoo's account with your {{provider}} account"
 		},
 		"about": {

front/translations/fr.json

@@ -135,6 +135,7 @@
 			"connected": "Connecté en tant que {{username}}.",
 			"not-connected": "Déconnecté",
 			"open-profile": "Ouvrir votre profil {{provider}}",
+			"link": "Associer",
 			"delete": "Dissocier votre compte Kyoo de votre compte {{provider}}"
 		},
 		"about": {