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": {