diff --git a/front/packages/models/src/accounts.tsx b/front/packages/models/src/accounts.tsx index edea2b41..6f3faa26 100644 --- a/front/packages/models/src/accounts.tsx +++ b/front/packages/models/src/accounts.tsx @@ -157,3 +157,11 @@ export const useAccount = () => { export const useAccounts = () => { return useContext(AccountContext); }; + +export const useHasPermission = (...perms: string[]) => { + const account = useAccount(); + + // TODO: Read permission of guest account here. + if (!account) return false; + return perms.every((perm) => account.permissions.includes(perm)); +}; diff --git a/front/packages/ui/src/navbar/index.tsx b/front/packages/ui/src/navbar/index.tsx index 23c9ae6d..d5ffc96c 100644 --- a/front/packages/ui/src/navbar/index.tsx +++ b/front/packages/ui/src/navbar/index.tsx @@ -18,7 +18,7 @@ * along with Kyoo. If not, see . */ -import { imageFn, logout, useAccount, useAccounts } from "@kyoo/models"; +import { logout, useAccount, useAccounts, useHasPermission } from "@kyoo/models"; import { Input, IconButton, @@ -30,6 +30,7 @@ import { Menu, PressableFeedback, HR, + Link, } from "@kyoo/primitives"; import { Platform, TextInput, View, ViewProps } from "react-native"; import { useTranslation } from "react-i18next"; @@ -39,6 +40,7 @@ import Search from "@material-symbols/svg-400/rounded/search-fill.svg"; import Login from "@material-symbols/svg-400/rounded/login.svg"; import Register from "@material-symbols/svg-400/rounded/app_registration.svg"; import Logout from "@material-symbols/svg-400/rounded/logout.svg"; +import Admin from "@material-symbols/svg-400/rounded/admin_panel_settings.svg"; import Settings from "@material-symbols/svg-400/rounded/settings.svg"; import { KyooLongLogo } from "./icon"; import { forwardRef, useEffect, useRef, useState } from "react"; @@ -105,7 +107,7 @@ export const NavbarProfile = () => { alt={t("navbar.login")} size={24} color={theme.colors.white} - {...css({ marginLeft: ts(1), justifyContent: "center" })} + {...css({ margin: ts(1), justifyContent: "center" })} {...tooltip(account?.username ?? t("navbar.login"))} > {accounts?.map((x) => ( @@ -137,6 +139,7 @@ export const NavbarRight = () => { const { css, theme } = useYoshiki(); const { t } = useTranslation(); const { push } = useRouter(); + const isAdmin = useHasPermission("admin.read"); return ( @@ -150,6 +153,15 @@ export const NavbarRight = () => { {...tooltip(t("navbar.search"))} /> )} + {isAdmin && ( + + )} ); diff --git a/front/translations/en.json b/front/translations/en.json index c6abce97..11fddcd7 100644 --- a/front/translations/en.json +++ b/front/translations/en.json @@ -74,7 +74,8 @@ "home": "Home", "browse": "Browse", "search": "Search", - "login": "Login" + "login": "Login", + "admin": "Admin panel" }, "settings": { "general": { diff --git a/front/translations/fr.json b/front/translations/fr.json index 0fa1ea8f..b8d1a5be 100644 --- a/front/translations/fr.json +++ b/front/translations/fr.json @@ -74,7 +74,8 @@ "home": "Accueil", "browse": "Liste", "search": "Rechercher", - "login": "Connexion" + "login": "Connexion", + "admin": "Section admin" }, "settings": { "general": {