Clear up password from the state

package-lock.json

@@ -60,7 +60,7 @@
         "js-cookie": "^3.0.5",
         "lodash": "^4.17.21",
         "lucide-react": "^0.539.0",
-        "next": "^14.2.28",
+        "next": "^14.2.35",
         "next-themes": "^0.2.1",
         "punycode": "^2.3.1",
         "react": "^18.3.1",
@@ -765,9 +765,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.32.tgz",
-      "integrity": "sha512-n9mQdigI6iZ/DF6pCTwMKeWgF2e8lg7qgt5M7HXMLtyhZYMnf/u905M18sSpPmHL9MKp9JHo56C6jrD2EvWxng==",
+      "version": "14.2.35",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.35.tgz",
+      "integrity": "sha512-DuhvCtj4t9Gwrx80dmz2F4t/zKQ4ktN8WrMwOuVzkJfBilwAwGr6v16M5eI8yCuZ63H9TTuEU09Iu2HqkzFPVQ==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -811,9 +811,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.32.tgz",
-      "integrity": "sha512-osHXveM70zC+ilfuFa/2W6a1XQxJTvEhzEycnjUaVE8kpUS09lDpiDDX2YLdyFCzoUbvbo5r0X1Kp4MllIOShw==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.33.tgz",
+      "integrity": "sha512-HqYnb6pxlsshoSTubdXKu15g3iivcbsMXg4bYpjL2iS/V6aQot+iyF4BUc2qA/J/n55YtvE4PHMKWBKGCF/+wA==",
       "cpu": [
         "arm64"
       ],
@@ -827,9 +827,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.32.tgz",
-      "integrity": "sha512-P9NpCAJuOiaHHpqtrCNncjqtSBi1f6QUdHK/+dNabBIXB2RUFWL19TY1Hkhu74OvyNQEYEzzMJCMQk5agjw1Qg==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.33.tgz",
+      "integrity": "sha512-8HGBeAE5rX3jzKvF593XTTFg3gxeU4f+UWnswa6JPhzaR6+zblO5+fjltJWIZc4aUalqTclvN2QtTC37LxvZAA==",
       "cpu": [
         "x64"
       ],
@@ -843,9 +843,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.32.tgz",
-      "integrity": "sha512-v7JaO0oXXt6d+cFjrrKqYnR2ubrD+JYP7nQVRZgeo5uNE5hkCpWnHmXm9vy3g6foMO8SPwL0P3MPw1c+BjbAzA==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.33.tgz",
+      "integrity": "sha512-JXMBka6lNNmqbkvcTtaX8Gu5by9547bukHQvPoLe9VRBx1gHwzf5tdt4AaezW85HAB3pikcvyqBToRTDA4DeLw==",
       "cpu": [
         "arm64"
       ],
@@ -859,9 +859,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.32.tgz",
-      "integrity": "sha512-tA6sIKShXtSJBTH88i0DRd6I9n3ZTirmwpwAqH5zdJoQF7/wlJXR8DkPmKwYl5mFWhEKr5IIa3LfpMW9RRwKmQ==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.33.tgz",
+      "integrity": "sha512-Bm+QulsAItD/x6Ih8wGIMfRJy4G73tu1HJsrccPW6AfqdZd0Sfm5Imhgkgq2+kly065rYMnCOxTBvmvFY1BKfg==",
       "cpu": [
         "arm64"
       ],
@@ -875,9 +875,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.32.tgz",
-      "integrity": "sha512-7S1GY4TdnlGVIdeXXKQdDkfDysoIVFMD0lJuVVMeb3eoVjrknQ0JNN7wFlhCvea0hEk0Sd4D1hedVChDKfV2jw==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.33.tgz",
+      "integrity": "sha512-FnFn+ZBgsVMbGDsTqo8zsnRzydvsGV8vfiWwUo1LD8FTmPTdV+otGSWKc4LJec0oSexFnCYVO4hX8P8qQKaSlg==",
       "cpu": [
         "x64"
       ],
@@ -891,9 +891,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.32.tgz",
-      "integrity": "sha512-OHHC81P4tirVa6Awk6eCQ6RBfWl8HpFsZtfEkMpJ5GjPsJ3nhPe6wKAJUZ/piC8sszUkAgv3fLflgzPStIwfWg==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.33.tgz",
+      "integrity": "sha512-345tsIWMzoXaQndUTDv1qypDRiebFxGYx9pYkhwY4hBRaOLt8UGfiWKr9FSSHs25dFIf8ZqIFaPdy5MljdoawA==",
       "cpu": [
         "x64"
       ],
@@ -907,9 +907,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.32.tgz",
-      "integrity": "sha512-rORQjXsAFeX6TLYJrCG5yoIDj+NKq31Rqwn8Wpn/bkPNy5rTHvOXkW8mLFonItS7QC6M+1JIIcLe+vOCTOYpvg==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nscpt0G6UCTkrT2ppnJnFsYbPDQwmum4GNXYTeoTIdsmMydSKFz9Iny2jpaRupTb+Wl298+Rh82WKzt9LCcqSQ==",
       "cpu": [
         "arm64"
       ],
@@ -923,9 +923,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.32.tgz",
-      "integrity": "sha512-jHUeDPVHrgFltqoAqDB6g6OStNnFxnc7Aks3p0KE0FbwAvRg6qWKYF5mSTdCTxA3axoSAUwxYdILzXJfUwlHhA==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.33.tgz",
+      "integrity": "sha512-pc9LpGNKhJ0dXQhZ5QMmYxtARwwmWLpeocFmVG5Z0DzWq5Uf0izcI8tLc+qOpqxO1PWqZ5A7J1blrUIKrIFc7Q==",
       "cpu": [
         "ia32"
       ],
@@ -939,9 +939,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.32.tgz",
-      "integrity": "sha512-2N0lSoU4GjfLSO50wvKpMQgKd4HdI2UHEhQPPPnlgfBJlOgJxkjpkYBqzk08f1gItBB6xF/n+ykso2hgxuydsA==",
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nOjfZMy8B94MdisuzZo9/57xuFVLHJaDj5e/xrduJp9CV2/HrfxTRH2fbyLe+K9QT41WBLUd4iXX3R7jBp0EUg==",
       "cpu": [
         "x64"
       ],
@@ -7405,12 +7405,12 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
     "node_modules/next": {
-      "version": "14.2.32",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.2.32.tgz",
-      "integrity": "sha512-fg5g0GZ7/nFc09X8wLe6pNSU8cLWbLRG3TZzPJ1BJvi2s9m7eF991se67wliM9kR5yLHRkyGKU49MMx58s3LJg==",
+      "version": "14.2.35",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.35.tgz",
+      "integrity": "sha512-KhYd2Hjt/O1/1aZVX3dCwGXM1QmOV4eNM2UTacK5gipDdPN/oHHK/4oVGy7X8GMfPMsUTUEmGlsy0EY1YGAkig==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "14.2.32",
+        "@next/env": "14.2.35",
         "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
@@ -7425,15 +7425,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.2.32",
-        "@next/swc-darwin-x64": "14.2.32",
-        "@next/swc-linux-arm64-gnu": "14.2.32",
-        "@next/swc-linux-arm64-musl": "14.2.32",
-        "@next/swc-linux-x64-gnu": "14.2.32",
-        "@next/swc-linux-x64-musl": "14.2.32",
-        "@next/swc-win32-arm64-msvc": "14.2.32",
-        "@next/swc-win32-ia32-msvc": "14.2.32",
-        "@next/swc-win32-x64-msvc": "14.2.32"
+        "@next/swc-darwin-arm64": "14.2.33",
+        "@next/swc-darwin-x64": "14.2.33",
+        "@next/swc-linux-arm64-gnu": "14.2.33",
+        "@next/swc-linux-arm64-musl": "14.2.33",
+        "@next/swc-linux-x64-gnu": "14.2.33",
+        "@next/swc-linux-x64-musl": "14.2.33",
+        "@next/swc-win32-arm64-msvc": "14.2.33",
+        "@next/swc-win32-ia32-msvc": "14.2.33",
+        "@next/swc-win32-x64-msvc": "14.2.33"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",

package.json

@@ -65,7 +65,7 @@
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "lucide-react": "^0.539.0",
-    "next": "^14.2.28",
+    "next": "^14.2.35",
     "next-themes": "^0.2.1",
     "punycode": "^2.3.1",
     "react": "^18.3.1",

src/interfaces/User.ts

@@ -13,6 +13,7 @@ export interface User {
   pending_approval?: boolean;
   last_login?: Date;
   permissions: Permissions;
+  password?: string;
 }
 
 export enum Role {

src/modules/users/UserInviteModal.tsx

@@ -1,4 +1,5 @@
 import Button from "@components/Button";
+import Code from "@components/Code";
 import HelpText from "@components/HelpText";
 import { Input } from "@components/Input";
 import { Label } from "@components/Label";
@@ -14,10 +15,11 @@ import { PeerGroupSelector } from "@components/PeerGroupSelector";
 import { IconMailForward } from "@tabler/icons-react";
 import { useApiCall } from "@utils/api";
 import { cn, validator } from "@utils/helpers";
-import { MailIcon, User2 } from "lucide-react";
+import { CopyIcon, MailIcon, User2 } from "lucide-react";
 import Image from "next/image";
 import React, { useMemo, useState } from "react";
 import { useSWRConfig } from "swr";
+import useCopyToClipboard from "@/hooks/useCopyToClipboard";
 import Avatar1 from "@/assets/avatars/009.jpg";
 import Avatar2 from "@/assets/avatars/030.jpg";
 import Avatar3 from "@/assets/avatars/063.jpg";
@@ -26,33 +28,104 @@ import { Group } from "@/interfaces/Group";
 import { Role, User } from "@/interfaces/User";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
 import { UserRoleSelector } from "@/modules/users/UserRoleSelector";
+import {isNetBirdHosted} from "@utils/netbird";
 
 type Props = {
   children: React.ReactNode;
   groups?: Group[];
 };
 
+const copyMessage = "Password was copied to your clipboard!";
+
 export default function UserInviteModal({ children, groups }: Readonly<Props>) {
   const [open, setOpen] = useState(false);
+  const [successModal, setSuccessModal] = useState(false);
+  const [createdUser, setCreatedUser] = useState<User>();
   const { mutate } = useSWRConfig();
+  const [, copyToClipboard] = useCopyToClipboard(createdUser?.password);
 
-  const handleOnSuccess = () => {
-    setOpen(false);
+  const handleOnSuccess = (user: User) => {
+    if (user.password) {
+      setCreatedUser(user);
+      setSuccessModal(true);
+    } else {
+      setOpen(false);
+    }
     setTimeout(() => {
       mutate("/users?service_user=false");
     }, 1000);
   };
 
+  const handleCopyAndClose = () => {
+    copyToClipboard(copyMessage).then(() => {
+      setCreatedUser(undefined);
+      setSuccessModal(false);
+      setOpen(false);
+    });
+  };
+
   return (
-    <Modal open={open} onOpenChange={setOpen} key={open ? 1 : 0}>
-      <ModalTrigger asChild={true}>{children}</ModalTrigger>
-      <UserInviteModalContent onSuccess={handleOnSuccess} groups={groups} />
-    </Modal>
+    <>
+      <Modal open={open} onOpenChange={setOpen} key={open ? 1 : 0}>
+        <ModalTrigger asChild={true}>{children}</ModalTrigger>
+        <UserInviteModalContent onSuccess={handleOnSuccess} groups={groups} />
+      </Modal>
+
+      <Modal
+        open={successModal}
+        onOpenChange={(open) => {
+          if (!open) {
+            setCreatedUser(undefined);
+          }
+          setSuccessModal(open);
+          setOpen(open);
+        }}
+      >
+        <ModalContent
+          onEscapeKeyDown={(e) => e.preventDefault()}
+          onInteractOutside={(e) => e.preventDefault()}
+          onPointerDownOutside={(e) => e.preventDefault()}
+          maxWidthClass={"max-w-md"}
+          className={"mt-20"}
+          showClose={false}
+        >
+          <div className={"pb-6 px-8"}>
+            <div className={"flex flex-col items-center justify-center gap-3"}>
+              <div>
+                <h2 className={"text-2xl text-center mb-2"}>
+                  User created successfully!
+                </h2>
+                <Paragraph className={"mt-0 text-sm text-center"}>
+                  This password will not be shown again, so be sure to copy it
+                  and store in a secure location.
+                </Paragraph>
+              </div>
+            </div>
+          </div>
+
+          <div className={"px-8 pb-6"}>
+            <Code message={copyMessage}>
+              <Code.Line>{createdUser?.password || ""}</Code.Line>
+            </Code>
+          </div>
+          <ModalFooter className={"items-center"}>
+            <Button
+              variant={"primary"}
+              className={"w-full"}
+              onClick={handleCopyAndClose}
+            >
+              <CopyIcon size={14} />
+              Copy & Close
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
   );
 }
 
 type ModalProps = {
-  onSuccess: () => void;
+  onSuccess: (user: User) => void;
   groups?: Group[];
 };
 
@@ -85,9 +158,9 @@ export function UserInviteModalContent({
           auto_groups: groupIds,
           is_service_user: false,
         })
-        .then(() => {
+        .then((user) => {
           mutate("/users?service_user=false");
-          onSuccess && onSuccess();
+          onSuccess && onSuccess(user);
         }),
       loadingMessage: "Sending invite...",
     });
@@ -121,10 +194,10 @@ export function UserInviteModalContent({
         }
       >
         <h2 className={"text-lg my-0 leading-[1.5 text-center]"}>
-          Invite User
+            {isNetBirdHosted() ? "Invite User" : "Create User"}
         </h2>
         <Paragraph className={cn("text-sm text-center max-w-xs")}>
-          Invite a user to your network and set their permissions.
+            {isNetBirdHosted() ? "Invite a user to your network and set their permissions." : "Create a NetBird user account with email and password."}
         </Paragraph>
       </div>
 

src/modules/users/UsersTable.tsx

@@ -277,7 +277,7 @@ export const InviteUserButton = ({
   if (!show) return null;
 
   return (
-    (isLocalDev() || isNetBirdHosted()) && (
+
       <UserInviteModal groups={groups}>
         <Button
           variant={"primary"}
@@ -285,9 +285,8 @@ export const InviteUserButton = ({
           disabled={!permission.users.create}
         >
           <MailPlus size={16} />
-          Invite User
+            {isNetBirdHosted() ? "Invite User" : "Create User"}
         </Button>
       </UserInviteModal>
-    )
   );
 };