diff --git a/front/packages/ui/src/settings/account.tsx b/front/packages/ui/src/settings/account.tsx
index 237f259b..d54a4999 100644
--- a/front/packages/ui/src/settings/account.tsx
+++ b/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")}
>
-
-
+ {
+ 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,
+ });
+ }}
+ />
+ {
+ await queryFn({
+ method: "DELETE",
+ path: ["auth", "me", "logo"],
+ });
+ }}
+ />
+
{description}
- {children}
+ {children}
);
};
@@ -90,7 +90,7 @@ export const SettingsContainer = ({
extra,
...props
}: {
- children: ReactElement | ReactElement[];
+ children: ReactElement | (ReactElement | Falsy)[] | Falsy;
title: string;
extra?: ReactElement;
}) => {
diff --git a/front/packages/ui/src/settings/index.tsx b/front/packages/ui/src/settings/index.tsx
index 1967043d..3a74f5d0 100644
--- a/front/packages/ui/src/settings/index.tsx
+++ b/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 = () => {
{account && }
{account && }
+ {account && }
);
};
SettingsPage.getLayout = DefaultLayout;
+SettingsPage.getFetchUrls = () => [OidcSettings.query()];
diff --git a/front/packages/ui/src/settings/oidc.tsx b/front/packages/ui/src/settings/oidc.tsx
new file mode 100644
index 00000000..c7da72ea
--- /dev/null
+++ b/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 .
+ */
+
+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 (
+
+ {error ? (
+
+ ) : data ? (
+ Object.values(data.oidc).map((x) => (
+
+ )
+ }
+ >
+ {}}
+ {...tooltip(t("settings.oidc.open-profile", { provider: x.displayName }))}
+ />
+ {}}
+ {...tooltip(t("settings.oidc.delete", { provider: x.displayName }))}
+ />
+
+ ))
+ ) : null}
+
+ );
+};
+
+OidcSettings.query = (): QueryIdentifier => ({
+ path: ["info"],
+ parser: ServerInfoP,
+});
diff --git a/front/translations/en.json b/front/translations/en.json
index 6d44622d..755abda1 100644
--- a/front/translations/en.json
+++ b/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": {
diff --git a/front/translations/fr.json b/front/translations/fr.json
index e444972d..c785b675 100644
--- a/front/translations/fr.json
+++ b/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": {