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