diff --git a/front/packages/ui/src/settings/index.tsx b/front/packages/ui/src/settings/index.tsx
index 42c93ae8..ab8f4573 100644
--- a/front/packages/ui/src/settings/index.tsx
+++ b/front/packages/ui/src/settings/index.tsx
@@ -18,15 +18,26 @@
* along with Kyoo. If not, see .
*/
-import { QueryIdentifier, QueryPage, User, UserP, setUserTheme, useUserTheme } from "@kyoo/models";
-import { Container, H1, Icon, P, Select, SubP, imageBorderRadius, ts } from "@kyoo/primitives";
+import {
+ QueryIdentifier,
+ QueryPage,
+ User,
+ UserP,
+ setUserTheme,
+ useAccount,
+ useUserTheme,
+} from "@kyoo/models";
+import { Container, H1, HR, Icon, P, Select, SubP, imageBorderRadius, ts } from "@kyoo/primitives";
import { DefaultLayout } from "../layout";
-import { ReactElement, ReactNode } from "react";
+import { Children, ReactElement, ReactNode } from "react";
import { useTranslation } from "react-i18next";
import { ScrollView, View } from "react-native";
import { px, rem, useYoshiki } from "yoshiki/native";
import Theme from "@material-symbols/svg-400/outlined/dark_mode.svg";
+import Username from "@material-symbols/svg-400/outlined/badge.svg";
+import Mail from "@material-symbols/svg-400/outlined/mail.svg";
+import Password from "@material-symbols/svg-400/outlined/password.svg";
const Preference = ({
icon,
@@ -38,7 +49,7 @@ const Preference = ({
icon: Icon;
label: string;
description: string;
- children: ReactNode;
+ children?: ReactNode;
}) => {
const { css } = useYoshiki();
@@ -67,7 +78,13 @@ const Preference = ({
);
};
-const SettingsContainer = ({ children, title }: { children: ReactElement; title: string }) => {
+const SettingsContainer = ({
+ children,
+ title,
+}: {
+ children: ReactElement | ReactElement[];
+ title: string;
+}) => {
const { css } = useYoshiki();
return (
@@ -75,7 +92,12 @@ const SettingsContainer = ({ children, title }: { children: ReactElement; title:
theme.variant.background, borderRadius: px(imageBorderRadius) })}
>
- {children}
+ {Children.map(children, (x, i) => (
+ <>
+ {i !== 0 &&
}
+ {x}
+ >
+ ))}
);
@@ -90,8 +112,9 @@ export const SettingsPage: QueryPage = () => {
const { t } = useTranslation();
const theme = useUserTheme("auto");
+ const account = useAccount();
return (
-
+
{
/>
+ {account && (
+
+
+
+
+
+ )}
);
};
diff --git a/front/translations/en.json b/front/translations/en.json
index 7c9be69e..9f8e46b8 100644
--- a/front/translations/en.json
+++ b/front/translations/en.json
@@ -84,6 +84,19 @@
"light": "Light",
"dark": "Dark"
}
+ },
+ "account": {
+ "label": "Account",
+ "username": {
+ "label": "Username"
+ },
+ "email": {
+ "label": "Email"
+ },
+ "password": {
+ "label": "Password",
+ "description": "Change your password"
+ }
}
},
"player": {
diff --git a/front/translations/fr.json b/front/translations/fr.json
index 27bd4a91..fa9b883c 100644
--- a/front/translations/fr.json
+++ b/front/translations/fr.json
@@ -84,6 +84,19 @@
"light": "Clair",
"dark": "Sombre"
}
+ },
+ "account": {
+ "label": "Compte",
+ "username": {
+ "label": "Nom d'utilisateur"
+ },
+ "email": {
+ "label": "Email"
+ },
+ "password": {
+ "label": "Mot de passe",
+ "description": "Changer de mot de passe"
+ }
}
},
"player": {