Add user approval feature

mlsmaycon · mlsmaycon · commit 499c5549a7f1 · 2025-08-31T19:53:20.000+02:00
diff --git a/src/app/error/page.tsx b/src/app/error/page.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { useOidc } from "@axa-fr/react-oidc";
+import Button from "@components/Button";
+import Paragraph from "@components/Paragraph";
+import loadConfig from "@utils/config";
+import { ArrowRightIcon, RefreshCw } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import NetBirdIcon from "@/assets/icons/NetBirdIcon";
+
+const config = loadConfig();
+
+export default function ErrorPage() {
+  const { logout, isAuthenticated } = useOidc();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [error, setError] = useState<{
+    code: number;
+    message: string;
+    type: string;
+  } | null>(null);
+
+  useEffect(() => {
+    // Get error details from URL params
+    const code = searchParams.get("code");
+    const message = searchParams.get("message");
+    const type = searchParams.get("type");
+
+    if (code && message) {
+      setError({
+        code: parseInt(code),
+        message: decodeURIComponent(message),
+        type: type || "error",
+      });
+    }
+  }, [searchParams]);
+
+  const handleLogout = () => {
+    // Use the same logout pattern as OIDCError
+    logout("/", { client_id: config.clientId });
+  };
+
+  const handleRetry = () => {
+    router.push("/");
+  };
+
+  if (!isAuthenticated) {
+    // If not authenticated, redirect to home
+    router.push("/");
+    return null;
+  }
+
+  const isBlockedUser = error?.code === 403 && error?.message?.toLowerCase().includes("blocked");
+  const isPendingApproval = error?.code === 403 && error?.message?.toLowerCase().includes("pending");
+
+  const getTitle = () => {
+    if (isBlockedUser) return "User Account Blocked";
+    if (isPendingApproval) return "User Approval Pending";
+    return "Access Error";
+  };
+
+  const getDescription = () => {
+    if (isBlockedUser) {
+      return "Your account has been blocked by an administrator. You cannot access the dashboard at this time.";
+    }
+    if (isPendingApproval) {
+      return "Your account is pending approval from an administrator. Please wait for approval before accessing the dashboard.";
+    }
+    return "An error occurred while trying to access the dashboard. Please try again or contact your administrator.";
+  };
+
+  return (
+    <div className="flex items-center justify-center flex-col h-screen max-w-lg mx-auto">
+      <div className="bg-nb-gray-930 mb-3 border border-nb-gray-900 h-12 w-12 rounded-md flex items-center justify-center">
+        <NetBirdIcon size={23} />
+      </div>
+      
+      <h1 className="text-center mt-2">{getTitle()}</h1>
+
+      <Paragraph className="text-center mt-2 block">
+        {getDescription()}
+      </Paragraph>
+
+      {error && (
+        <Paragraph className="text-center mt-4 block">
+          Error: <span className="inline capitalize">{error.message}</span>
+          {error.code && <span className="block text-sm text-nb-gray-400 mt-1">Code: {error.code}</span>}
+        </Paragraph>
+      )}
+
+      <Paragraph className="text-center mt-2 text-sm">
+        If you believe this is an error, please contact your administrator.
+      </Paragraph>
+
+      <div className="mt-5 space-y-3">
+        {!isBlockedUser && !isPendingApproval && (
+          <Button 
+            variant="default-outline"
+            size="sm"
+            onClick={handleRetry}
+          >
+            <RefreshCw size={16} className="mr-2" />
+            Try Again
+          </Button>
+        )}
+        
+        <Button 
+          variant="primary"
+          size="sm"
+          onClick={handleLogout}
+        >
+          {isBlockedUser || isPendingApproval ? "Sign Out" : "Logout"}
+          <ArrowRightIcon size={16} />
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/contexts/UsersProvider.tsx b/src/contexts/UsersProvider.tsx
@@ -62,18 +62,24 @@ const UserProfileProvider = ({ children }: Props) => {
     }
   }, [user, error, users, isLoading, isAllUsersLoading]);
 
+
   const data = useMemo(() => {
     return {
       loggedInUser,
     };
   }, [loggedInUser]);
 
-  return !isLoading && loggedInUser ? (
+  // Show loading only when we're still loading and don't have user data
+  if (isLoading || !loggedInUser) {
+    return <FullScreenLoading />;
+  }
+
+  // For blocked or pending approval users, we still need to provide the context
+  // so they can access their user data on the blocked page
+  return (
     <UserProfileContext.Provider value={data}>
       <PermissionsProvider user={loggedInUser}>{children}</PermissionsProvider>
     </UserProfileContext.Provider>
-  ) : (
-    <FullScreenLoading />
   );
 };
 
diff --git a/src/interfaces/Account.ts b/src/interfaces/Account.ts
@@ -7,6 +7,7 @@ export interface Account {
   settings: {
     extra: {
       peer_approval_enabled: boolean;
+      user_approval_required: boolean;
     };
     peer_login_expiration_enabled: boolean;
     peer_login_expiration: number;
diff --git a/src/interfaces/User.ts b/src/interfaces/User.ts
@@ -10,6 +10,7 @@ export interface User {
   is_current?: boolean;
   is_service_user?: boolean;
   is_blocked?: boolean;
+  pending_approval?: boolean;
   last_login?: Date;
   permissions: Permissions;
 }
diff --git a/src/modules/activity/ActivityDescription.tsx b/src/modules/activity/ActivityDescription.tsx
@@ -253,6 +253,22 @@ export default function ActivityDescription({ event }: Props) {
       </div>
     );
 
+  if (event.activity_code == "user.approve")
+    return (
+      <div className={"inline"}>
+        User <Value>{event.meta.username}</Value>{" "}
+        <Value>{event.meta.email}</Value> was approved
+      </div>
+    );
+
+  if (event.activity_code == "user.reject")
+    return (
+      <div className={"inline"}>
+        User <Value>{event.meta.username}</Value>{" "}
+        <Value>{event.meta.email}</Value> was rejected
+      </div>
+    );
+
   /**
    * Service User
    */
diff --git a/src/modules/activity/utils.ts b/src/modules/activity/utils.ts
@@ -19,6 +19,7 @@ const ACTION_COLOR_MAPPING: Record<string, ActionStatus> = {
   delete: ActionStatus.ERROR,
   revoke: ActionStatus.ERROR,
   block: ActionStatus.ERROR,
+  reject: ActionStatus.ERROR,
 
   // Warning actions
   overuse: ActionStatus.WARNING,
diff --git a/src/modules/settings/AuthenticationTab.tsx b/src/modules/settings/AuthenticationTab.tsx
@@ -52,6 +52,17 @@ export default function AuthenticationTab({ account }: Readonly<Props>) {
     }
   });
 
+  /**
+   * User approval required
+   */
+  const [userApprovalRequired, setUserApprovalRequired] = useState<boolean>(() => {
+    try {
+      return account?.settings?.extra?.user_approval_required || false;
+    } catch (error) {
+      return false;
+    }
+  });
+
   // Peer Expiration
   const [
     loginExpiration,
@@ -86,6 +97,7 @@ export default function AuthenticationTab({ account }: Readonly<Props>) {
 
   const { hasChanges, updateRef } = useHasChanges([
     peerApproval,
+    userApprovalRequired,
     loginExpiration,
     expiresIn,
     expireInterval,
@@ -118,13 +130,15 @@ export default function AuthenticationTab({ account }: Readonly<Props>) {
             extra: {
               ...account.settings?.extra,
               peer_approval_enabled: peerApproval,
+              user_approval_required: userApprovalRequired,
             },
           },
         } as Account)
         .then(() => {
           mutate("/accounts");
           updateRef([
             peerApproval,
+            userApprovalRequired,
             loginExpiration,
             expiresIn,
             expireInterval,
@@ -181,6 +195,27 @@ export default function AuthenticationTab({ account }: Readonly<Props>) {
         </div>
 
         <div className={"flex flex-col gap-6 w-full mt-8 mb-3"}>
+          <div className={"flex flex-col"}>
+            <FancyToggleSwitch
+              value={userApprovalRequired}
+              onChange={setUserApprovalRequired}
+              dataCy={"user-approval-required"}
+              label={
+                <>
+                  <ShieldIcon size={15} />
+                  User Approval Required
+                </>
+              }
+              helpText={
+                <>
+                  Require manual approval for new users joining via <br />
+                  domain matching. Users will be blocked until approved.
+                </>
+              }
+              disabled={!permission.settings.update}
+            />
+          </div>
+
           <div className={"flex flex-col"}>
             <FancyToggleSwitch
               value={loginExpiration}
diff --git a/src/modules/users/table-cells/UserActionCell.tsx b/src/modules/users/table-cells/UserActionCell.tsx
@@ -2,7 +2,7 @@ import Button from "@components/Button";
 import { notify } from "@components/Notification";
 import { useApiCall } from "@utils/api";
 import { isNetBirdHosted } from "@utils/netbird";
-import { Trash2 } from "lucide-react";
+import { CheckCircle, Trash2, XCircle } from "lucide-react";
 import * as React from "react";
 import { useMemo } from "react";
 import { useSWRConfig } from "swr";
@@ -36,6 +36,40 @@ export default function UserActionCell({
     });
   };
 
+  const approveUser = async () => {
+    const name = user.name || "User";
+    notify({
+      title: `'${name}' approved`,
+      description: "User was successfully approved.",
+      promise: userRequest.post("", `/${user.id}/approve`).then(() => {
+        mutate(`/users?service_user=${serviceUser}`);
+      }),
+      loadingMessage: "Approving the user...",
+    });
+  };
+
+  const rejectUser = async () => {
+    const name = user.name || "User";
+    const choice = await confirm({
+      title: `Reject '${name}'?`,
+      description:
+        "Rejecting this user will remove them from the account permanently. This action cannot be undone.",
+      confirmText: "Reject",
+      cancelText: "Cancel",
+      type: "danger",
+    });
+    if (!choice) return;
+    
+    notify({
+      title: `'${name}' rejected`,
+      description: "User was successfully rejected and removed.",
+      promise: userRequest.del("", `/${user.id}/reject`).then(() => {
+        mutate(`/users?service_user=${serviceUser}`);
+      }),
+      loadingMessage: "Rejecting the user...",
+    });
+  };
+
   const openConfirm = async () => {
     const name = user.name || "User";
     const choice = await confirm({
@@ -55,21 +89,50 @@ export default function UserActionCell({
     return user.is_current;
   }, [permission.users.delete, user.is_current]);
 
+  const isPendingApproval = user.pending_approval;
+  const canManageUsers = permission.users.update;
+
   return (
-    <div className={"flex justify-end pr-4 items-center gap-4"}>
-      {!serviceUser && isNetBirdHosted() && (
+    <div className={"flex justify-end pr-4 items-center gap-2"}>
+      {!serviceUser && isNetBirdHosted() && !isPendingApproval && (
         <UserResendInviteButton user={user} />
       )}
-      <Button
-        variant={"danger-outline"}
-        size={"sm"}
-        onClick={openConfirm}
-        data-cy={"delete-user"}
-        disabled={disabled}
-      >
-        <Trash2 size={16} />
-        Delete
-      </Button>
+      
+      {isPendingApproval && canManageUsers && (
+        <>
+          <Button
+            variant={"outline"}
+            size={"sm"}
+            onClick={approveUser}
+            data-cy={"approve-user"}
+          >
+            <CheckCircle size={16} />
+            Approve
+          </Button>
+          <Button
+            variant={"danger-outline"}
+            size={"sm"}
+            onClick={rejectUser}
+            data-cy={"reject-user"}
+          >
+            <XCircle size={16} />
+            Reject
+          </Button>
+        </>
+      )}
+      
+      {!isPendingApproval && (
+        <Button
+          variant={"danger-outline"}
+          size={"sm"}
+          onClick={openConfirm}
+          data-cy={"delete-user"}
+          disabled={disabled}
+        >
+          <Trash2 size={16} />
+          Delete
+        </Button>
+      )}
     </div>
   );
 }
diff --git a/src/modules/users/table-cells/UserStatusCell.tsx b/src/modules/users/table-cells/UserStatusCell.tsx
diff --git a/src/utils/api.tsx b/src/utils/api.tsx

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ export interface User {`
`10`	`10`	`is_current?: boolean;`
`11`	`11`	`is_service_user?: boolean;`
`12`	`12`	`is_blocked?: boolean;`
	`13`	`+ pending_approval?: boolean;`
`13`	`14`	`last_login?: Date;`
`14`	`15`	`permissions: Permissions;`
`15`	`16`	`}`