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,14 +41,16 @@ export const OidcSettings = () => {
 			{error ? (
 				<ErrorView error={error} />
 			) : data ? (
-				Object.values(data.oidc).map((x) => (
+				Object.entries(data.oidc).map(([id, x]) => {
+					const acc = account.externalId[id];
+					return (
 						<Preference
 							key={x.displayName}
 							icon={Badge}
 							label={x.displayName}
 							description={
-							true
-								? t("settings.oidc.connected", { username: "test" })
+								acc
+									? t("settings.oidc.connected", { username: acc.username })
 									: t("settings.oidc.not-connected")
 							}
 							customIcon={
@@ -60,18 +62,33 @@ export const OidcSettings = () => {
 								)
 							}
 						>
+							{acc ? (
+								<>
+									{acc.profileUrl && (
 										<IconButton
 											icon={OpenProfile}
-							onPress={() => {}}
+											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>
-				))
+					);
+				})
 			) : (
 				[...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": {