-
-
+
+
## Technologies Used
+- NextJS
- ReactJS
-- AntD UI framework
+- Tailwind CSS
- Auth0
- Nginx
- Docker
@@ -38,28 +38,28 @@ Auth0 so far is the only 3rd party dependency that can't be really self-hosted.
1. Install [Docker](https://docs.docker.com/get-docker/)
2. Register [Auth0](https://auth0.com/) account
-3. Running Wiretrustee UI Dashboard requires the following Auth0 environmental variables to be set (see docker command below):
+3. Running NetBird UI Dashboard requires the following Auth0 environmental variables to be set (see docker command below):
`AUTH0_DOMAIN` `AUTH0_CLIENT_ID` `AUTH0_AUDIENCE`
To obtain these, please use [Auth0 React SDK Guide](https://auth0.com/docs/quickstart/spa/react/01-login#configure-auth0) up until "Configure Allowed Web Origins"
-4. Wiretrustee UI Dashboard uses Wiretrustee Management Service HTTP API, so setting `NETBIRD_MGMT_API_ENDPOINT` is required. Most likely it will be `http://localhost:33071` if you are hosting Management API on the same server.
+4. NetBird UI Dashboard uses NetBirds Management Service HTTP API, so setting `NETBIRD_MGMT_API_ENDPOINT` is required. Most likely it will be `http://localhost:33071` if you are hosting Management API on the same server.
5. Run docker container without SSL (Let's Encrypt):
```shell
- docker run -d --name wiretrustee-dashboard \
+ docker run -d --name netbird-dashboard \
--rm -p 80:80 -p 443:443 \
-e AUTH0_DOMAIN=
+
+
+
+ Create rules to manage access in your network and define what peers
+ can connect.
+
+
+ Learn more about
+
+ Access Controls
+
+ in our documentation.
+
+
+
+ + {policies && policies.length > 1 + ? `${policies.length} Access Control Rules` + : "Access Control Rules"} +
+
+
+
+
+ Here you can see all the account and network activity events.
+
+
+ Learn more about{" "}
+
+ Activity Events
+
+ in our documentation.
+
+
+ + {events && events.length > 1 + ? `${events.length} Activity Events` + : "Activity Events"} +
+
+
+
+
+ Add nameservers for domain name resolution in your NetBird network.
+
+
+ Learn more about
+
+ DNS
+
+ in our documentation.
+
+
+
+ + {nameserverGroups && nameserverGroups.length > 1 + ? `${nameserverGroups.length} Nameservers` + : "Nameservers"} +
+
+
+
+ {"Manage your account's DNS settings."}
+
+ Learn more about
+
+ DNS
+
+ in our documentation.
+
+
+ {!isLoading && (
+
+
+ DNS Settings
+
+
+
+ Peers in these groups will require manual domain name resolution
+
+
+
+
+
+
+
+
+
+
+
+ Network routes allow you to access other networks like LANs and
+ VPCs without installing NetBird on every resource.
+
+
+ Learn more about
+
+ Network Routes
+
+ in our documentation.
+
+
+
+ + {groupedRoutes && groupedRoutes.length > 1 + ? `${groupedRoutes.length} Network Routes` + : "Network Routes"} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ setName(newName);
+ setShowEditNameModal(false);
+ }}
+ peer={peer}
+ initialName={name}
+ key={showEditNameModal ? 1 : 0}
+ />
+
+
+
+
+
+
+ {user?.email}
+
+
+
+
+
+
+
+
+
+ !set
+ ? setSsh(false)
+ : openSSHDialog().then((confirm) => setSsh(confirm))
+ }
+ label={
+ <>
+
+
+
+
+ }
+ className={"w-full block"}
+ disabled={!!peer.user_id}
+ >
+
+
+
+ Use groups to control what this peer can access.
+
+
+
+
+ ) : null}
+
+
+
+
+
+
+ Access other networks without installing NetBird on every
+ resource.
+
+
+ Network Routes
+
+
+
+
+
+
+
+
+ A list of all machines and devices connected to your private network.
+ Use this view to manage peers.
+
+
+ Learn more about{" "}
+
+ Peers
+
+ in our documentation.
+
+
+ {peers && peers.length > 1 ? `${peers.length} Peers` : "Peers"}
+
+ {account &&
+
+
+
+
+ Setup keys are pre-authentication keys that allow to register new
+ machines in your network.
+
+
+ Learn more about
+
+ Setup Keys
+
+ in our documentation.
+
+
+ + {setupKeys && setupKeys.length > 1 + ? `${setupKeys.length} Setup Keys` + : "Setup Keys"} +
+
+
+
+
+ Use service users to create API tokens and avoid losing automated
+ access.
+
+
+ Learn more about
+
+ Service Users
+
+ in our documentation.
+
+
+ + {users && users.length > 1 + ? `${users.length} Service Users` + : "Service Users"} +
+
+
+
+
+
+
+ {(user.is_current || user.is_service_user) && (
+ <>
+
+
+
+
+
+
+
+
+ {user.is_service_user ? (
+
+ {user.name}
+
+
+
+
+
+
+
+
+ {!user.is_service_user && (
+
+
+
+
+ Groups will be assigned to peers added by this user.
+
+
+ )}
+
+
+
+
+
+ Set a role for the user to assign access permissions.
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ Access tokens give access to NetBird API.
+
+
+ Access Tokens
+
+
+
+
+
+
+
+
+
+
+
+ Manage users and their permissions. Same-domain email users are added
+ automatically on first sign-in.
+
+
+ Learn more about
+
+ Users
+
+ in our documentation.
+
+
+ {users && users.length > 1 ? `${users.length} Users` : "Users"}
+
+
+ );
+};
diff --git a/src/assets/countries/CountryJPRounded.tsx b/src/assets/countries/CountryJPRounded.tsx
new file mode 100644
index 00000000..5a5337fe
--- /dev/null
+++ b/src/assets/countries/CountryJPRounded.tsx
@@ -0,0 +1,20 @@
+import Image from "next/image";
+import * as React from "react";
+import jpIcon from "@/assets/countries/jp.svg";
+
+export const CountryJPRounded = () => {
+ return (
+
+
+ );
+};
diff --git a/src/assets/countries/CountryUSRounded.tsx b/src/assets/countries/CountryUSRounded.tsx
new file mode 100644
index 00000000..cbd4939d
--- /dev/null
+++ b/src/assets/countries/CountryUSRounded.tsx
@@ -0,0 +1,20 @@
+import Image from "next/image";
+import * as React from "react";
+import usIcon from "@/assets/countries/us.svg";
+
+export const CountryUSRounded = () => {
+ return (
+
+
+ );
+};
diff --git a/src/assets/countries/eu.svg b/src/assets/countries/eu.svg
new file mode 100644
index 00000000..7f04d8a0
--- /dev/null
+++ b/src/assets/countries/eu.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/countries/jp.svg b/src/assets/countries/jp.svg
new file mode 100644
index 00000000..6299e732
--- /dev/null
+++ b/src/assets/countries/jp.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/countries/us.svg b/src/assets/countries/us.svg
new file mode 100644
index 00000000..9201215e
--- /dev/null
+++ b/src/assets/countries/us.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/default-profile.png b/src/assets/default-profile.png
deleted file mode 100644
index 2b8b6583..00000000
Binary files a/src/assets/default-profile.png and /dev/null differ
diff --git a/src/assets/direct_bi.svg b/src/assets/direct_bi.svg
deleted file mode 100644
index a2106af8..00000000
--- a/src/assets/direct_bi.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/assets/direct_in.svg b/src/assets/direct_in.svg
deleted file mode 100644
index ae162cb2..00000000
--- a/src/assets/direct_in.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/assets/direct_out.svg b/src/assets/direct_out.svg
deleted file mode 100644
index 88769c6f..00000000
--- a/src/assets/direct_out.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/assets/forward_default.svg b/src/assets/forward_default.svg
deleted file mode 100644
index ef0faccb..00000000
--- a/src/assets/forward_default.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/assets/google-play-badge.png b/src/assets/google-play-badge.png
index 131f3aca..fa69aed7 100644
Binary files a/src/assets/google-play-badge.png and b/src/assets/google-play-badge.png differ
diff --git a/src/assets/icons/AccessControlIcon.tsx b/src/assets/icons/AccessControlIcon.tsx
new file mode 100644
index 00000000..e9b77a7d
--- /dev/null
+++ b/src/assets/icons/AccessControlIcon.tsx
@@ -0,0 +1,14 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function AccessControlIcon(props: IconProps) {
+ return (
+
+ );
+}
diff --git a/src/assets/icons/ActivityIcon.tsx b/src/assets/icons/ActivityIcon.tsx
new file mode 100644
index 00000000..9dd977c4
--- /dev/null
+++ b/src/assets/icons/ActivityIcon.tsx
@@ -0,0 +1,17 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function ActivityIcon(props: IconProps) {
+ return (
+
+ );
+}
diff --git a/src/assets/icons/AndroidIcon.tsx b/src/assets/icons/AndroidIcon.tsx
new file mode 100644
index 00000000..bfae8454
--- /dev/null
+++ b/src/assets/icons/AndroidIcon.tsx
@@ -0,0 +1,16 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function AndroidIcon(props: IconProps) {
+ return (
+
+ );
+}
diff --git a/src/assets/icons/AppleIcon.tsx b/src/assets/icons/AppleIcon.tsx
new file mode 100644
index 00000000..2d2fac5d
--- /dev/null
+++ b/src/assets/icons/AppleIcon.tsx
@@ -0,0 +1,28 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function AppleIcon(props: IconProps) {
+ return (
+
+ );
+}
diff --git a/src/assets/icons/CircleIcon.tsx b/src/assets/icons/CircleIcon.tsx
new file mode 100644
index 00000000..c852b51d
--- /dev/null
+++ b/src/assets/icons/CircleIcon.tsx
@@ -0,0 +1,30 @@
+import { cn } from "@utils/helpers";
+import React from "react";
+
+type Props = {
+ active?: boolean;
+ size?: number;
+ inactiveDot?: "gray" | "red";
+ className?: string;
+};
+export default function CircleIcon({
+ active,
+ size = 11,
+ inactiveDot = "gray",
+ className,
+}: Props) {
+ return (
+
+ );
+}
diff --git a/src/assets/icons/DNSIcon.tsx b/src/assets/icons/DNSIcon.tsx
new file mode 100644
index 00000000..c6456a4e
--- /dev/null
+++ b/src/assets/icons/DNSIcon.tsx
@@ -0,0 +1,15 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function DNSIcon(props: IconProps) {
+ return (
+
+ );
+}
diff --git a/src/assets/icons/DockerIcon.tsx b/src/assets/icons/DockerIcon.tsx
new file mode 100644
index 00000000..8fe775a8
--- /dev/null
+++ b/src/assets/icons/DockerIcon.tsx
@@ -0,0 +1,16 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function DockerIcon(props: IconProps) {
+ return (
+
+ );
+}
diff --git a/src/assets/icons/DocsIcon.tsx b/src/assets/icons/DocsIcon.tsx
new file mode 100644
index 00000000..b345dd9f
--- /dev/null
+++ b/src/assets/icons/DocsIcon.tsx
@@ -0,0 +1,16 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function DocsIcon(props: IconProps) {
+ return (
+
+ );
+}
diff --git a/src/assets/icons/IOSIcon.tsx b/src/assets/icons/IOSIcon.tsx
new file mode 100644
index 00000000..0dfcd1fd
--- /dev/null
+++ b/src/assets/icons/IOSIcon.tsx
@@ -0,0 +1,17 @@
+import {iconProperties, IconProps} from "@/assets/icons/IconProperties";
+
+export default function IOSIcon(props: IconProps) {
+ return (
+
+ );
+}
diff --git a/src/assets/icons/IconProperties.tsx b/src/assets/icons/IconProperties.tsx
new file mode 100644
index 00000000..0946f206
--- /dev/null
+++ b/src/assets/icons/IconProperties.tsx
@@ -0,0 +1,26 @@
+export type IconProps = {
+ size?: 16 | 32 | 44 | 128 | 256 | 512 | number;
+ className?: string;
+ autoHeight?: boolean;
+};
+
+export const defaultIconProps: IconProps = {
+ size: 16,
+ className:
+ "dark:fill-nb-gray-400 fill-gray-500 peer-data-[active=true]/icon:dark:fill-white peer-data-[active=true]/icon:fill-gray-900 shrink-0",
+ autoHeight: false,
+};
+
+export const iconProperties = (props: IconProps) => {
+ return {
+ className: props.className ? props.className : defaultIconProps.className,
+ style: {
+ width: props.size ? `${props.size}px` : `${defaultIconProps.size}px`,
+ height: props.autoHeight
+ ? "auto"
+ : props.size
+ ? `${props.size}px`
+ : `${defaultIconProps.size}px`,
+ },
+ };
+};
diff --git a/src/assets/icons/IntegrationIcon.tsx b/src/assets/icons/IntegrationIcon.tsx
new file mode 100644
index 00000000..c4f0bc6c
--- /dev/null
+++ b/src/assets/icons/IntegrationIcon.tsx
@@ -0,0 +1,14 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function IntegrationIcon(props: IconProps) {
+ return (
+
+ );
+}
diff --git a/src/assets/icons/LoadingIcon.tsx b/src/assets/icons/LoadingIcon.tsx
new file mode 100644
index 00000000..50b20528
--- /dev/null
+++ b/src/assets/icons/LoadingIcon.tsx
@@ -0,0 +1,105 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function LoadingIcon(props: IconProps) {
+ return (
+
+ );
+}
diff --git a/src/assets/icons/LongArrowBidirectionalIcon.tsx b/src/assets/icons/LongArrowBidirectionalIcon.tsx
new file mode 100644
index 00000000..8271b0e7
--- /dev/null
+++ b/src/assets/icons/LongArrowBidirectionalIcon.tsx
@@ -0,0 +1,16 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function LongArrowBidirectionalIcon(props: IconProps) {
+ return (
+
+ );
+}
diff --git a/src/assets/icons/LongArrowLeftIcon.tsx b/src/assets/icons/LongArrowLeftIcon.tsx
new file mode 100644
index 00000000..36aa14d5
--- /dev/null
+++ b/src/assets/icons/LongArrowLeftIcon.tsx
@@ -0,0 +1,16 @@
+import { iconProperties, IconProps } from "@/assets/icons/IconProperties";
+
+export default function LongArrowLeftIcon(props: IconProps) {
+ return (
+
+ );
+}
diff --git a/src/assets/icons/NetBirdIcon.tsx b/src/assets/icons/NetBirdIcon.tsx
new file mode 100644
index 00000000..310ffdbf
--- /dev/null
+++ b/src/assets/icons/NetBirdIcon.tsx
@@ -0,0 +1,13 @@
+import Image from "next/image";
+import * as React from "react";
+import { memo } from "react";
+import NetBirdLogo from "@/assets/netbird.svg";
+
+type Props = {
+ size?: number;
+};
+function NetBirdIcon({ size = 16 }: Props) {
+ return
+
+ Already verified your email address?
+
+
+
+
+
+
+ ) : (
+ <>
+
+ There was an error logging you in.
+ Error: {oidcUserLoadingState} +
+
+
+ )}
+
+ );
+};
diff --git a/src/auth/OIDCProvider.tsx b/src/auth/OIDCProvider.tsx
new file mode 100644
index 00000000..ffdd570b
--- /dev/null
+++ b/src/auth/OIDCProvider.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import { OidcProvider } from "@axa-fr/react-oidc";
+import {
+ AuthorityConfiguration,
+ OidcConfiguration,
+} from "@axa-fr/react-oidc/dist/vanilla/oidc";
+import FullScreenLoading from "@components/ui/FullScreenLoading";
+import { useRedirect } from "@hooks/useRedirect";
+import loadConfig, { buildExtras } from "@utils/config";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
+import { OIDCError } from "@/auth/OIDCError";
+import { SecureProvider } from "@/auth/SecureProvider";
+
+type Props = {
+ children: React.ReactNode;
+};
+
+const config = loadConfig();
+
+/**
+ * Unfortunately Auth0 https://
+
+ {title}
+ + {accessDenied ? ( + <> ++ Error: {oidcUserLoadingState} +
+
+ It looks like your login session is no longer active or has expired.
+ Please login again to continue using the app.
+
+
+
+ );
+};
diff --git a/src/components/AccessControlEdit.tsx b/src/components/AccessControlEdit.tsx
deleted file mode 100644
index 90daf571..00000000
--- a/src/components/AccessControlEdit.tsx
+++ /dev/null
@@ -1,943 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { RootState } from "typesafe-actions";
-import { actions as policyActions } from "../store/policy";
-import {
- Button,
- Col,
- Divider,
- Form,
- Input,
- Card,
- Row,
- Select,
- SelectProps,
- Switch,
- Tag,
- Typography,
- Breadcrumb,
-} from "antd";
-import inbound from "../assets/in_bound.svg";
-import outBoundGreen from "../assets/out_bound_green.svg";
-import outBoundblue from "../assets/out_bound_blue.svg";
-import reverseDefault from "../assets/reverse_default.svg";
-import forwardDefault from "../assets/forward_default.svg";
-import reverseGreen from "../assets/reverse_green.svg";
-import { Policy, PolicyToSave } from "../store/policy/types";
-import { uniq } from "lodash";
-import { Header } from "antd/es/layout/layout";
-import { RuleObject } from "antd/lib/form";
-import { useGetTokenSilently } from "../utils/token";
-import { Container } from "./Container";
-import { useGetGroupTagHelpers } from "../utils/groups";
-
-const { Paragraph } = Typography;
-const { Option } = Select;
-const { Text } = Typography;
-
-interface FormPolicy {
- id?: string;
- name: string;
- description: string;
- enabled: boolean;
- query: string;
- bidirectional: boolean;
- protocol: string;
- ports: string[];
- action: string;
- tagSourceGroups: string[];
- tagDestinationGroups: string[];
-}
-
-const AccessControlEdit = () => {
- const { optionRender, blueTagRender, tagGroups, grayTagRender } =
- useGetGroupTagHelpers();
-
- const { getTokenSilently } = useGetTokenSilently();
- const dispatch = useDispatch();
- const setupEditPolicyVisible = useSelector(
- (state: RootState) => state.policy.setupEditPolicyVisible
- );
- const groups = useSelector((state: RootState) => state.group.data);
- const actions: SelectProps["options"] = [
- { label: "Accept", value: "accept" },
- { label: "Drop", value: "drop" },
- ];
- const protocols: SelectProps["options"] = [
- { label: "ALL", value: "all" },
- { label: "TCP", value: "tcp" },
- { label: "UDP", value: "udp" },
- { label: "ICMP", value: "icmp" },
- ];
- const formPolicyCopy: any = ["ALL"];
-
- const policy = useSelector((state: RootState) => state.policy.policy);
- const savedPolicy = useSelector(
- (state: RootState) => state.policy.savedPolicy
- );
- const [editName, setEditName] = useState(false);
- const [editDescription, setEditDescription] = useState(false);
- const [direction, setDirection] = useState
+
+ Session Expired
+
-
- }
- className="menlo-font"
- value={formPolicyCopy}
- disabled={true}
- >
-
- ) : (
- - (
-
{children}
+
+ {children}
+
+ );
+}
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
deleted file mode 100644
index cc7c003c..00000000
--- a/src/components/Banner.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import {useEffect, useState} from "react";
-import {Button, Col, Row, Space, Typography} from "antd";
-import { CloseOutlined } from '@ant-design/icons';
-import {Md5} from "ts-md5";
-
-const { Text } = Typography
-
-const Banner = () => {
- const [show, setShow] = useState(false);
- const banner_md5_key = 'banner_md5'
- const banner_closed_key = 'banner_closed'
-
- const dismiss = () => {
- setShow(false);
- localStorage.setItem(banner_closed_key,'true');
- };
-
- // todo: when updating this announcement, ensure to
- // remove the condition on App.tsx that limits the current banner to cloud and local dev
- const announcement = "Discover the new NetBird Dashboard with a brand new look and feel."
-
- const announcement_md5 = Md5.hashStr(announcement)
-
- const linkLearnMore = () => {
- return (
-
-
-
- {announcement}
-
-
-
-
-
-
- {announcement}
-
-
- {linkLearnMore()}
-
-
-
-
- } onClick={dismiss} size="small" style={{position: "absolute", right: 5, top: 5}}/>
-
- ) : null;
-}
-
-export default Banner
\ No newline at end of file
diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx
new file mode 100644
index 00000000..b272623f
--- /dev/null
+++ b/src/components/Breadcrumbs.tsx
@@ -0,0 +1,44 @@
+import { cn } from "@utils/helpers";
+import { ChevronRightIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+type Props = {
+ children: React.ReactNode;
+};
+function Breadcrumbs({ children }: Props) {
+ return {children}
;
+}
+
+type ItemProps = {
+ href?: string;
+ label: string;
+ icon?: React.ReactNode;
+ active?: boolean;
+};
+
+export const Item = ({ href, label, icon, active }: ItemProps) => {
+ const router = useRouter();
+
+ return (
+
+
+ );
+};
+
+Breadcrumbs.Item = Item;
+
+export default Breadcrumbs;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 00000000..3784a562
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { cva, VariantProps } from "class-variance-authority";
+import classNames from "classnames";
+import React, { forwardRef } from "react";
+
+type ButtonVariants = VariantProps
+ {icon && icon}
+ {href ? router.push(href)}>{label} : label}
+
+
+ {children}
+
+ );
+}
+
+const ButtonGroupButton = forwardRef(
+ ({ ...props }: ButtonProps, ref: React.ForwardedRef
+ {children}
+
+ );
+}
+
+function CardList({ children }: Props) {
+ return - {children}
{label}
+
+ copy && copyToClipBoard(`${label} has been copied to clipboard.`)
+ }
+ >
+
+
+
+ );
+}
+
+function CodeComment({ children }: Props) {
+ return (
+
+
+
+
+ {showCopyIcon && (
+
+ {copied ?
+ {children}
+
+
+ {children}
+
+ );
+}
+Code.Comment = CodeComment;
+
+function CodeLine({ children }: Props) {
+ return {children};
+}
+
+Code.Line = CodeLine;
diff --git a/src/components/Command.tsx b/src/components/Command.tsx
new file mode 100644
index 00000000..2f544c5c
--- /dev/null
+++ b/src/components/Command.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { Dialog, DialogContent } from "@components/Dialog";
+import { DialogProps } from "@radix-ui/react-dialog";
+import { cn } from "@utils/helpers";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import * as React from "react";
+
+const Command = React.forwardRef<
+ React.ElementRef
+
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+ React.ElementRef {
+ e.stopPropagation();
+ e.preventDefault();
+ copyToClipboard(message).then();
+ }}
+ ref={wrapper}
+ >
+ {children}
+
+ {copied ? (
+
+ );
+}
diff --git a/src/components/DatePickerWithRange.tsx b/src/components/DatePickerWithRange.tsx
new file mode 100644
index 00000000..b142a29f
--- /dev/null
+++ b/src/components/DatePickerWithRange.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import Button from "@components/Button";
+import { Popover, PopoverContent, PopoverTrigger } from "@components/Popover";
+import { Calendar } from "@components/ui/Calendar";
+import { cn } from "@utils/helpers";
+import dayjs from "dayjs";
+import { Calendar as CalendarIcon } from "lucide-react";
+import React from "react";
+import { DateRange } from "react-day-picker";
+
+interface Props {
+ value?: DateRange;
+ onChange?: (range: DateRange | undefined) => void;
+ className?: string;
+}
+
+export function DatePickerWithRange({ className, value, onChange }: Props) {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
new file mode 100644
index 00000000..7e3dcd87
--- /dev/null
+++ b/src/components/Dialog.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "@utils/helpers";
+import { X } from "lucide-react";
+import * as React from "react";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef {
+ if (disabled) return;
+ onChange(!value);
+ }}
+ className={cn(
+ "px-5 py-3.5 border rounded-md cursor-pointer transition-all duration-300 relative z-[1]",
+ value
+ ? "border-nb-gray-800 bg-nb-gray-900/70"
+ : "border-nb-gray-800 bg-nb-gray-900/30 hover:bg-nb-gray-900/40",
+ disabled && "opacity-30 pointer-events-none",
+ )}
+ >
+
+ );
+}
diff --git a/src/components/FooterComponent.tsx b/src/components/FooterComponent.tsx
deleted file mode 100644
index 862f7c5b..00000000
--- a/src/components/FooterComponent.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { Layout } from 'antd';
-
-const { Footer } = Layout
-
-export default () => {
- return (
-
- );
-};
diff --git a/src/components/FullTooltip.tsx b/src/components/FullTooltip.tsx
new file mode 100644
index 00000000..f8b4e9cb
--- /dev/null
+++ b/src/components/FullTooltip.tsx
@@ -0,0 +1,57 @@
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@components/Tooltip";
+import { cn } from "@utils/helpers";
+import React from "react";
+
+type Props = {
+ children: React.ReactNode;
+ content: React.ReactNode;
+ hoverButton?: boolean;
+ isAction?: boolean;
+ interactive?: boolean;
+ disabled?: boolean;
+ className?: string;
+};
+export default function FullTooltip({
+ children,
+ content,
+ hoverButton,
+ isAction,
+ interactive = true,
+ disabled,
+ className,
+}: Props) {
+ return !disabled ? (
+
+
+
+
+ {helpText}
+
+
+
+ {children && value ? children : null}
+
+ {children}
+
+ ) : (
+ {children}
+ )}
+
+ {content}
+
+ {children}
+ );
+}
diff --git a/src/components/HelpText.tsx b/src/components/HelpText.tsx
new file mode 100644
index 00000000..61a1d43b
--- /dev/null
+++ b/src/components/HelpText.tsx
@@ -0,0 +1,25 @@
+import { cn } from "@utils/helpers";
+import React from "react";
+
+type Props = {
+ children?: React.ReactNode;
+ margin?: boolean;
+ className?: string;
+};
+export default function HelpText({
+ children,
+ margin = true,
+ className,
+}: Props) {
+ return (
+ + {children} +
+ ); +} diff --git a/src/components/InlineLink.tsx b/src/components/InlineLink.tsx new file mode 100644 index 00000000..08fcf2e0 --- /dev/null +++ b/src/components/InlineLink.tsx @@ -0,0 +1,36 @@ +import { cn } from "@utils/helpers"; +import { cva, VariantProps } from "class-variance-authority"; +import Link, { LinkProps } from "next/link"; +import React from "react"; + +export type InlineLinkProps = VariantProps
+ {customPrefix && (
+
+ {error && (
+
+ {customPrefix}
+
+ )}
+
+
+ {icon}
+
+
+
+
+
+ {customSuffix}
+
+
+ {
+ if (e.target.files === null) return;
+ handleFileUpload(e.target.files);
+ }}
+ ref={inputRef}
+ accept="application/JSON"
+ />
+
+ );
+};
diff --git a/src/components/Kbd.tsx b/src/components/Kbd.tsx
new file mode 100644
index 00000000..e45213c1
--- /dev/null
+++ b/src/components/Kbd.tsx
@@ -0,0 +1,45 @@
+import { cn } from "@utils/helpers";
+import { cva, VariantProps } from "class-variance-authority";
+import React from "react";
+
+type BadgeVariants = VariantProps
+
+
+
+
+ + Upload your service account key (.json) +
++ + Click to upload + {" "} + or drag and drop your file here +
+
+ {children}
+
+ );
+}
diff --git a/src/components/Label.tsx b/src/components/Label.tsx
new file mode 100644
index 00000000..425c5522
--- /dev/null
+++ b/src/components/Label.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "@utils/helpers";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+const labelVariants = cva(
+ "text-sm font-medium tracking-wider leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-1 inline-block dark:text-nb-gray-200 flex items-center gap-2",
+);
+
+const Label = React.forwardRef<
+ React.ElementRefAlready verified your email address?
- - - - - -{"Login Error: User state: " + oidcUserLoadingState}
-}
-
-export default LoginError;
\ No newline at end of file
diff --git a/src/components/NameServerGroupAdd.tsx b/src/components/NameServerGroupAdd.tsx
deleted file mode 100644
index 360c951d..00000000
--- a/src/components/NameServerGroupAdd.tsx
+++ /dev/null
@@ -1,952 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { RootState } from "typesafe-actions";
-import { actions as nsGroupActions } from "../store/nameservers";
-import {
- Button,
- Col,
- Switch,
- Form,
- FormListFieldData,
- Input,
- InputNumber,
- message,
- Modal,
- Row,
- Select,
- Space,
- Typography,
-} from "antd";
-import {
- CloseOutlined,
- MinusCircleOutlined,
- PlusOutlined,
-} from "@ant-design/icons";
-import { Header } from "antd/es/layout/layout";
-import { RuleObject } from "antd/lib/form";
-import cidrRegex from "cidr-regex";
-import {
- NameServer,
- NameServerGroup,
- NameServerGroupToSave,
-} from "../store/nameservers/types";
-import { useGetGroupTagHelpers } from "../utils/groups";
-import { useGetTokenSilently } from "../utils/token";
-import { domainValidator } from "../utils/common";
-
-const { Paragraph, Text } = Typography;
-
-interface formNSGroup extends NameServerGroup {}
-
-const NameServerGroupAdd = () => {
- const {
- blueTagRender,
- handleChangeTags,
- dropDownRender,
- optionRender,
- tagGroups,
- getExistingAndToCreateGroupsLists,
- getGroupNamesFromIDs,
- selectValidator,
- } = useGetGroupTagHelpers();
- const dispatch = useDispatch();
- const { getTokenSilently } = useGetTokenSilently();
- const { Option } = Select;
- const nsGroup = useSelector(
- (state: RootState) => state.nameserverGroup.nameserverGroup
- );
- const setupNewNameServerGroupVisible = useSelector(
- (state: RootState) => state.nameserverGroup.setupNewNameServerGroupVisible
- );
- const savedNSGroup = useSelector(
- (state: RootState) => state.nameserverGroup.savedNameServerGroup
- );
- const nsGroupData = useSelector(
- (state: RootState) => state.nameserverGroup.data
- );
-
- const [formNSGroup, setFormNSGroup] = useState({} as formNSGroup);
- const [form] = Form.useForm();
- const [editName, setEditName] = useState(false);
- const [isPrimary, setIsPrimary] = useState(false);
- const [editDescription, setEditDescription] = useState(false);
- const inputNameRef = useRef
-
-
- {!!fields.length && (
-
-
- Nameserver IP
-
-
-
- Port
-
-
-
- )}
- {fields.map((field, index) => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- remove(field.name)} />
-
-
- );
- })}
-
-
-
-
-
-
-
-
- );
-
- // @ts-ignore
- const renderDomains = (
- fields: FormListFieldData[],
- { add, remove }: any,
- { errors }: any
- ) => (
- <>
-
-
-
-
-
- {formNSGroup.enabled
- ? "Disable this server if you don't want the configuration to apply immediately"
- : " Enable this server if you want the configuration to apply immediately"}
-
-
-
-
- {!!fields.length && (
-
-
- Nameserver IP
-
-
-
- Port
-
-
-
- )}
- {fields.map((field, index) => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- remove(field.name)} />
-
-
- );
- })}
-
-
-
-
-
-
-
-
-
-
-
-
-
- Add domain if you want to have a specific one
-
-
-
-
- {fields.map((field, index) => {
- return (
-
-
-
-
-
- remove(field.name)}
- />
-
-
- );
- })}
-
-
-
-
-
-
-
-
- );
- };
-
- const handleChangeDisabled = (checked: boolean) => {
- setFormNSGroup({
- ...formNSGroup,
- enabled: checked,
- });
- };
-
- const onBreadcrumbUsersClick = () => {
- onCancel();
- };
-
- const handleChangeMarkDomain = (checked: boolean) => {
- setFormNSGroup({
- ...formNSGroup,
- search_domains_enabled: checked,
- });
- };
-
- return (
- <>
-