wip: Add user management features and update environment configurations

Author: aeltorio

client/eslint.config.js

@@ -25,6 +25,9 @@ export default [
         URL: 'readonly',
         console: 'readonly',
         fetch: 'readonly',
+        HTMLFormElement: 'readonly',
+        FormData: 'readonly',
+        FormDataEntryValue: 'readonly',
       },
       parserOptions: {
         ecmaFeatures: {
@@ -34,8 +37,8 @@ export default [
     },
     settings: {
       react: {
-        version: 'detect'
-      }
+        version: '19'
+      },
     },
     plugins: {
       react: reactPlugin,

client/package-lock.json

@@ -34,6 +34,7 @@
     "framer-motion": "^12.5.0",
     "i18next": "^24.2.3",
     "i18next-http-backend": "^3.0.2",
+    "jose": "^6.0.10",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-i18next": "^15.4.1",

client/package.json

@@ -7,6 +7,8 @@ import { SiteLoading } from "./components/site-loading";
 import DefaultLayout from "./layouts/default";
 import { title } from "./components/primitives";
 import { AuthenticationGuard, LogoutButton } from "./components/auth0";
+import { siteConfig } from "./config/site";
+import AddNewUser from "./pages/add-new-user";
 
 import IndexPage from "@/pages/index";
 import ApiPage from "@/pages/api";
@@ -60,9 +62,16 @@ function App() {
           path="/blog"
         />
         <Route element={<AboutPage />} path="/about" />
+        {siteConfig().apiMenuItems.map((item) => (
+          <Route
+            key={item.href}
+            element={<AuthenticationGuard component={AddNewUser} />}
+            path={item.href}
+          />
+        ))}
       </Routes>
     </Suspense>
   );
 }
 
-export default App;
+export default App;

client/src/App.tsx

@@ -26,6 +26,7 @@ import { Tooltip } from "@heroui/tooltip";
 import { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "@heroui/link";
+import { createRemoteJWKSet, JWTPayload, jwtVerify } from "jose";
 
 import { SiteLoading } from "./site-loading";
 
@@ -292,7 +293,10 @@ export const LoginLogoutLink: FC<LogoutLinkProps> = ({
  * <AuthenticationGuard component={ProtectedDashboard} />
  * ```
  */
-export const AuthenticationGuard: FC<{ component: FC }> = ({ component }) => {
+export const AuthenticationGuard: FC<{
+  component: FC;
+  permission?: string;
+}> = ({ component }) => {
   const Component = withAuthenticationRequired(component, {
     onRedirecting: () => (
       <>
@@ -349,3 +353,47 @@ export const getJsonFromSecuredApi = async (
     throw error;
   }
 };
+
+/**
+ * Checks if the user has a specific permission.
+ * @param permission - The permission to check for
+ * @param {GetAccessTokenFunction} getAccessTokenFunction - Function to retrieve an access token, typically Auth0's getAccessTokenSilently
+ * @returns {Promise<boolean>} Promise resolving to true if the user has the permission, false otherwise
+ * @throws {Error} If token acquisition fails or the API request fails
+ */
+export const userHasPermission = async (
+  permission: string,
+  getAccessTokenFunction: GetAccessTokenFunction,
+) => {
+  try {
+    const accessToken = await getAccessTokenFunction({
+      authorizationParams: {
+        audience: import.meta.env.AUTH0_AUDIENCE,
+        scope: import.meta.env.AUTH0_SCOPE,
+      },
+    });
+
+    if (!accessToken) {
+      return false;
+    }
+    const JWKS = createRemoteJWKSet(
+      new URL(`https://${import.meta.env.AUTH0_DOMAIN}/.well-known/jwks.json`),
+    );
+
+    const joseResult = await jwtVerify(accessToken, JWKS, {
+      issuer: `https://${import.meta.env.AUTH0_DOMAIN}/`,
+      audience: import.meta.env.AUTH0_AUDIENCE,
+    });
+    const payload = joseResult.payload as JWTPayload;
+
+    if (payload.permissions instanceof Array) {
+      return payload.permissions.includes(permission);
+    } else {
+      return false;
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(error);
+    throw error;
+  }
+};

client/src/components/auth0.tsx

@@ -226,3 +226,25 @@ export const SearchIcon = (props: IconSvgProps) => (
     />
   </svg>
 );
+
+export const ChevronDown = (props: IconSvgProps) => {
+  return (
+    <svg
+      fill="none"
+      height={props.size || props.height || 24}
+      viewBox="0 0 24 24"
+      width={props.size || props.width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
+        stroke={props.color || "currentColor"}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};

client/src/components/icons.tsx

@@ -11,14 +11,20 @@ import {
 } from "@heroui/navbar";
 import { link as linkStyles } from "@heroui/theme";
 import { clsx } from "@heroui/shared-utils";
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownTrigger,
+} from "@heroui/dropdown";
 
 import { I18nIcon, LanguageSwitch } from "./language-switch";
 import { LoginLogoutButton, LoginLogoutLink } from "./auth0";
 
 import { siteConfig } from "@/config/site";
 import { ThemeSwitch } from "@/components/theme-switch";
-import { GithubIcon, HeartFilledIcon } from "@/components/icons";
+import { ChevronDown, GithubIcon } from "@/components/icons";
 import { Logo } from "@/components/icons";
 import { availableLanguages } from "@/i18n";
 
@@ -54,6 +60,30 @@ export const Navbar = () => {
             </NavbarItem>
           ))}
         </div>
+        <NavbarItem>
+          <Dropdown>
+            <DropdownTrigger>
+              <Button
+                className={clsx(
+                  linkStyles({ color: "foreground" }),
+                  "data-[active=true]:text-primary data-[active=true]:font-medium",
+                )}
+                variant="light"
+              >
+                {t("Administration")} <ChevronDown />
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu>
+              {siteConfig().apiMenuItems.map((item) => (
+                <DropdownItem key={item.href} textValue={item.label}>
+                  <Link color="foreground" href="/add-user">
+                    {item.label}
+                  </Link>
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </Dropdown>
+        </NavbarItem>
       </NavbarContent>
 
       <NavbarContent
@@ -71,18 +101,6 @@ export const Navbar = () => {
           />
           <LoginLogoutButton />
         </NavbarItem>
-        <NavbarItem className="hidden md:flex">
-          <Button
-            isExternal
-            as={Link}
-            className="text-sm font-normal text-default-600 bg-default-100"
-            href={siteConfig().links.sponsor}
-            startContent={<HeartFilledIcon className="text-danger" />}
-            variant="flat"
-          >
-            <Trans i18nKey="sponsor" />
-          </Button>
-        </NavbarItem>
       </NavbarContent>
 
       <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">

client/src/components/navbar.tsx

@@ -53,6 +53,12 @@ export const siteConfig = () => {
         href: "/about",
       },
     ],
+    apiMenuItems: [
+      {
+        label: i18next.t("add-a-new-user"),
+        href: "/add-user",
+      },
+    ],
     links: {
       github: "https://github.com/sctg-development/feedback-flow",
       sctg: "https://sctg.eu.org",

client/src/config/site.ts

@@ -37,5 +37,11 @@
   "api-answer": "API API المضمون",
   "log-out-someone": "تسجيل الخروج {{name}}",
   "brand": "SCTG",
-  "Feedback Flow": "Feedback Flow"
+  "Feedback Flow": "Feedback Flow",
+  "Administration": "إدارة",
+  "add-a-new-user": "أضف مستخدمًا جديدًا",
+  "enter-the-user-name": "أدخل اسم المستخدم",
+  "please-enter-a-name": "الرجاء إدخال اسم",
+  "submit": "يُقدِّم",
+  "name": "اسم"
 }

client/src/locales/base/ar-SA.json

@@ -37,5 +37,11 @@
   "api-answer": "Secured API answer",
   "log-out-someone": "Log out {{name}}",
   "brand": "SCTG",
-  "Feedback Flow": "Feedback Flow"
+  "Feedback Flow": "Feedback Flow",
+  "Administration": "Administration",
+  "add-a-new-user": "Add a new user",
+  "please-enter-a-name": "Please enter a name",
+  "enter-the-user-name": "Enter the user name",
+  "submit": "Submit",
+  "name": "Name"
 }