Akhil Mohan
6 months ago
parent
df7d8e7be9
commit
29fa85e499
@ -0,0 +1,53 @@
|
||||
import { createContext, ReactNode, useContext, useEffect, useMemo } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { ContentLoader } from "@app/components/v2/ContentLoader";
|
||||
import { useGetServerConfig } from "@app/hooks/api";
|
||||
import { TServerConfig } from "@app/hooks/api/admin/types";
|
||||
|
||||
type TServerConfigContext = {
|
||||
config: TServerConfig;
|
||||
};
|
||||
|
||||
const ServerConfigContext = createContext<TServerConfigContext | null>(null);
|
||||
|
||||
type Props = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export const ServerConfigProvider = ({ children }: Props): JSX.Element => {
|
||||
const router = useRouter();
|
||||
const { data, isLoading } = useGetServerConfig();
|
||||
|
||||
// memorize the workspace details for the context
|
||||
const value = useMemo<TServerConfigContext>(() => {
|
||||
return {
|
||||
config: data!
|
||||
};
|
||||
}, [data]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading && data && !data.initialized) {
|
||||
router.push("/admin/signup");
|
||||
}
|
||||
}, [isLoading, data]);
|
||||
|
||||
if (isLoading || (!data?.initialized && router.pathname !== "/admin/signup")) {
|
||||
return (
|
||||
<div className="bg-bunker-800">
|
||||
<ContentLoader text="Loading configurations" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <ServerConfigContext.Provider value={value}>{children}</ServerConfigContext.Provider>;
|
||||
};
|
||||
|
||||
export const useServerConfig = () => {
|
||||
const ctx = useContext(ServerConfigContext);
|
||||
if (!ctx) {
|
||||
throw new Error("useServerConfig has to be used within <UserContext.Provider>");
|
||||
}
|
||||
|
||||
return ctx;
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
export { ServerConfigProvider,useServerConfig } from "./ServerConfigContext";
|
||||
@ -0,0 +1,2 @@
|
||||
export { useCreateAdminUser, useUpdateServerConfig } from "./mutation";
|
||||
export { useGetServerConfig } from "./queries";
|
||||
@ -0,0 +1,39 @@
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
import { apiRequest } from "@app/config/request";
|
||||
|
||||
import { User } from "../users/types";
|
||||
import { adminQueryKeys } from "./queries";
|
||||
import { TCreateAdminUserDTO, TServerConfig } from "./types";
|
||||
|
||||
export const useCreateAdminUser = () => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation<{ user: User; token: string }, {}, TCreateAdminUserDTO>({
|
||||
mutationFn: async (opt) => {
|
||||
const { data } = await apiRequest.post("/api/v1/admin/signup", opt);
|
||||
return data;
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries(adminQueryKeys.serverConfig());
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateServerConfig = () => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation<TServerConfig, {}, Partial<TServerConfig>>({
|
||||
mutationFn: async (opt) => {
|
||||
const { data } = await apiRequest.patch<{ config: TServerConfig }>(
|
||||
"/api/v1/admin/config",
|
||||
opt
|
||||
);
|
||||
return data.config;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.setQueryData(adminQueryKeys.serverConfig(), data);
|
||||
queryClient.invalidateQueries(adminQueryKeys.serverConfig());
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,34 @@
|
||||
import { useQuery, UseQueryOptions } from "@tanstack/react-query";
|
||||
|
||||
import { apiRequest } from "@app/config/request";
|
||||
|
||||
import { TServerConfig } from "./types";
|
||||
|
||||
export const adminQueryKeys = {
|
||||
serverConfig: () => ["server-config"] as const
|
||||
};
|
||||
|
||||
const fetchServerConfig = async () => {
|
||||
const { data } = await apiRequest.get<{ config: TServerConfig }>("/api/v1/admin/config");
|
||||
return data.config;
|
||||
};
|
||||
|
||||
export const useGetServerConfig = ({
|
||||
options = {}
|
||||
}: {
|
||||
options?: Omit<
|
||||
UseQueryOptions<
|
||||
TServerConfig,
|
||||
unknown,
|
||||
TServerConfig,
|
||||
ReturnType<typeof adminQueryKeys.serverConfig>
|
||||
>,
|
||||
"queryKey" | "queryFn"
|
||||
>;
|
||||
} = {}) =>
|
||||
useQuery({
|
||||
queryKey: adminQueryKeys.serverConfig(),
|
||||
queryFn: fetchServerConfig,
|
||||
...options,
|
||||
enabled: options?.enabled ?? true
|
||||
});
|
||||
@ -0,0 +1,19 @@
|
||||
export type TServerConfig = {
|
||||
initialized: boolean;
|
||||
allowSignUp: boolean;
|
||||
};
|
||||
|
||||
export type TCreateAdminUserDTO = {
|
||||
email: string;
|
||||
firstName: string;
|
||||
lastName?: string;
|
||||
protectedKey: string;
|
||||
protectedKeyTag: string;
|
||||
protectedKeyIV: string;
|
||||
encryptedPrivateKey: string;
|
||||
encryptedPrivateKeyIV: string;
|
||||
encryptedPrivateKeyTag: string;
|
||||
publicKey: string;
|
||||
verifier: string;
|
||||
salt: string;
|
||||
};
|
||||
@ -0,0 +1,306 @@
|
||||
/* eslint-disable no-nested-ternary */
|
||||
/* eslint-disable no-unexpected-multiline */
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
/* eslint-disable vars-on-top */
|
||||
/* eslint-disable no-var */
|
||||
/* eslint-disable func-names */
|
||||
// @ts-nocheck
|
||||
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
|
||||
import {
|
||||
faArrowLeft,
|
||||
faArrowUpRightFromSquare,
|
||||
faBook,
|
||||
faEnvelope,
|
||||
faInfinity,
|
||||
faInfo,
|
||||
faMobile,
|
||||
faPlus,
|
||||
faQuestion
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
|
||||
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem } from "@app/components/v2";
|
||||
import { useOrganization, useSubscription, useUser } from "@app/context";
|
||||
import {
|
||||
useGetOrgTrialUrl,
|
||||
useGetUserAction,
|
||||
useLogoutUser,
|
||||
useRegisterUserAction
|
||||
} from "@app/hooks/api";
|
||||
|
||||
interface LayoutProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const supportOptions = [
|
||||
[
|
||||
<FontAwesomeIcon key={1} className="pr-4 text-sm" icon={faSlack} />,
|
||||
"Support Forum",
|
||||
"https://infisical.com/slack"
|
||||
],
|
||||
[
|
||||
<FontAwesomeIcon key={2} className="pr-4 text-sm" icon={faBook} />,
|
||||
"Read Docs",
|
||||
"https://infisical.com/docs/documentation/getting-started/introduction"
|
||||
],
|
||||
[
|
||||
<FontAwesomeIcon key={3} className="pr-4 text-sm" icon={faGithub} />,
|
||||
"GitHub Issues",
|
||||
"https://github.com/Infisical/infisical/issues"
|
||||
],
|
||||
[
|
||||
<FontAwesomeIcon key={4} className="pr-4 text-sm" icon={faEnvelope} />,
|
||||
"Email Support",
|
||||
"mailto:support@infisical.com"
|
||||
]
|
||||
];
|
||||
|
||||
export const AdminLayout = ({ children }: LayoutProps) => {
|
||||
const router = useRouter();
|
||||
const { mutateAsync } = useGetOrgTrialUrl();
|
||||
|
||||
// eslint-disable-next-line prefer-const
|
||||
const { currentOrg } = useOrganization();
|
||||
|
||||
const { user } = useUser();
|
||||
const { subscription } = useSubscription();
|
||||
const { data: updateClosed } = useGetUserAction("september_update_closed");
|
||||
const infisicalPlatformVersion = process.env.NEXT_PUBLIC_INFISICAL_PLATFORM_VERSION;
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const registerUserAction = useRegisterUserAction();
|
||||
|
||||
const closeUpdate = async () => {
|
||||
await registerUserAction.mutateAsync("september_update_closed");
|
||||
};
|
||||
|
||||
const logout = useLogoutUser();
|
||||
const logOutUser = async () => {
|
||||
try {
|
||||
console.log("Logging out...");
|
||||
await logout.mutateAsync();
|
||||
router.push("/login");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dark hidden h-screen w-full flex-col overflow-x-hidden md:flex">
|
||||
<div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
|
||||
<aside className="dark w-full border-r border-mineshaft-600 bg-gradient-to-tr from-mineshaft-700 via-mineshaft-800 to-mineshaft-900 md:w-60">
|
||||
<nav className="items-between flex h-full flex-col justify-between overflow-y-auto dark:[color-scheme:dark]">
|
||||
<div>
|
||||
{!router.asPath.includes("personal") && (
|
||||
<div className="flex h-12 cursor-default justify-between items-center px-3 pt-6">
|
||||
<Link href={`/org/${currentOrg?._id}/overview`}>
|
||||
<div className="my-6 flex cursor-default items-center justify-center pr-2 text-sm text-mineshaft-300 hover:text-mineshaft-100">
|
||||
<FontAwesomeIcon icon={faArrowLeft} className="pr-3" />
|
||||
Back to organization
|
||||
</div>
|
||||
</Link>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
asChild
|
||||
className="p-1 hover:bg-primary-400 hover:text-black data-[state=open]:bg-primary-400 data-[state=open]:text-black"
|
||||
>
|
||||
<div
|
||||
className="child flex items-center justify-center rounded-full bg-mineshaft pr-1 text-mineshaft-300 hover:bg-mineshaft-500"
|
||||
style={{ fontSize: "11px", width: "26px", height: "26px" }}
|
||||
>
|
||||
{user?.firstName?.charAt(0)}
|
||||
{user?.lastName && user?.lastName?.charAt(0)}
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="p-1">
|
||||
<div className="px-2 py-1 text-xs text-mineshaft-400">{user?.email}</div>
|
||||
<Link href="/personal-settings">
|
||||
<DropdownMenuItem>Personal Settings</DropdownMenuItem>
|
||||
</Link>
|
||||
<a
|
||||
href="https://infisical.com/docs/documentation/getting-started/introduction"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-3 w-full text-sm font-normal leading-[1.2rem] text-mineshaft-300 hover:text-mineshaft-100"
|
||||
>
|
||||
<DropdownMenuItem>
|
||||
Documentation
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowUpRightFromSquare}
|
||||
className="mb-[0.06rem] pl-1.5 text-xxs"
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
</a>
|
||||
<a
|
||||
href="https://infisical.com/slack"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-3 w-full text-sm font-normal leading-[1.2rem] text-mineshaft-300 hover:text-mineshaft-100"
|
||||
>
|
||||
<DropdownMenuItem>
|
||||
Join Slack Community
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowUpRightFromSquare}
|
||||
className="mb-[0.06rem] pl-1.5 text-xxs"
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
</a>
|
||||
{user?.superAdmin && (
|
||||
<Link href="/admin" legacyBehavior>
|
||||
<DropdownMenuItem className="mt-1 border-t border-mineshaft-600">
|
||||
Admin Panel
|
||||
</DropdownMenuItem>
|
||||
</Link>
|
||||
)}
|
||||
<div className="mt-1 h-1 border-t border-mineshaft-600" />
|
||||
<button type="button" onClick={logOutUser} className="w-full">
|
||||
<DropdownMenuItem>Log Out</DropdownMenuItem>
|
||||
</button>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`relative mt-10 ${
|
||||
subscription && subscription.slug === "starter" && !subscription.has_used_trial
|
||||
? "mb-2"
|
||||
: "mb-4"
|
||||
} flex w-full cursor-default flex-col items-center px-3 text-sm text-mineshaft-400`}
|
||||
>
|
||||
<div
|
||||
className={`${
|
||||
!updateClosed ? "block" : "hidden"
|
||||
} relative z-10 mb-6 flex pb-2 w-52 flex-col items-center justify-start rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3`}
|
||||
>
|
||||
<div className="text-md mt-2 w-full font-semibold text-mineshaft-100">
|
||||
Infisical September update
|
||||
</div>
|
||||
<div className="mt-1 mb-1 w-full text-sm font-normal leading-[1.2rem] text-mineshaft-300">
|
||||
Improved RBAC, new integrations, dashboard remake, and more!
|
||||
</div>
|
||||
<div className="mt-2 h-[6.77rem] w-full rounded-md border border-mineshaft-700">
|
||||
<Image
|
||||
src="/images/infisical-update-september-2023.png"
|
||||
height={319}
|
||||
width={539}
|
||||
alt="kubernetes image"
|
||||
className="rounded-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-3 flex w-full items-center justify-between px-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => closeUpdate()}
|
||||
className="text-mineshaft-400 duration-200 hover:text-mineshaft-100"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<a
|
||||
href="https://infisical.com/blog/infisical-update-september-2023"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm font-normal leading-[1.2rem] text-mineshaft-400 duration-200 hover:text-mineshaft-100"
|
||||
>
|
||||
Learn More{" "}
|
||||
<FontAwesomeIcon icon={faArrowUpRightFromSquare} className="pl-0.5 text-xs" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{router.asPath.includes("org") && (
|
||||
<div
|
||||
onKeyDown={() => null}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => router.push(`/org/${router.query.id}/members?action=invite`)}
|
||||
className="w-full"
|
||||
>
|
||||
<div className="mb-3 w-full pl-5 duration-200 hover:text-mineshaft-200">
|
||||
<FontAwesomeIcon icon={faPlus} className="mr-3" />
|
||||
Invite people
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div className="mb-2 w-full pl-5 duration-200 hover:text-mineshaft-200">
|
||||
<FontAwesomeIcon icon={faQuestion} className="mr-3 px-[0.1rem]" />
|
||||
Help & Support
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="p-1">
|
||||
{supportOptions.map(([icon, text, url]) => (
|
||||
<DropdownMenuItem key={url}>
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href={String(url)}
|
||||
className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
|
||||
>
|
||||
<div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
|
||||
{icon}
|
||||
<div className="text-sm">{text}</div>
|
||||
</div>
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
{subscription &&
|
||||
subscription.slug === "starter" &&
|
||||
!subscription.has_used_trial && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={async () => {
|
||||
if (!subscription || !currentOrg) return;
|
||||
|
||||
// direct user to start pro trial
|
||||
const url = await mutateAsync({
|
||||
orgId: currentOrg._id,
|
||||
success_url: window.location.href
|
||||
});
|
||||
|
||||
window.location.href = url;
|
||||
}}
|
||||
className="mt-1.5 w-full"
|
||||
>
|
||||
<div className="justify-left mb-1.5 mt-1.5 flex w-full items-center rounded-md bg-mineshaft-600 py-1 pl-4 text-mineshaft-300 duration-200 hover:bg-mineshaft-500 hover:text-primary-400">
|
||||
<FontAwesomeIcon
|
||||
icon={faInfinity}
|
||||
className="mr-3 ml-0.5 py-2 text-primary"
|
||||
/>
|
||||
Start Free Pro Trial
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
{infisicalPlatformVersion && (
|
||||
<div className="mb-2 w-full pl-5 duration-200 hover:text-mineshaft-200">
|
||||
<FontAwesomeIcon icon={faInfo} className="mr-4 px-[0.1rem]" />
|
||||
Version: {infisicalPlatformVersion}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
<main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 dark:[color-scheme:dark]">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<div className="z-[200] flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
|
||||
<FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
|
||||
<p className="max-w-sm px-6 text-center text-lg text-gray-200">
|
||||
{` ${t("common.no-mobile")} `}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
export { AdminLayout } from "./AdminLayout";
|
||||
@ -1 +1,2 @@
|
||||
export { AdminLayout } from "./AdminLayout";
|
||||
export { AppLayout } from "./AppLayout";
|
||||
|
||||
@ -0,0 +1,96 @@
|
||||
import crypto from "crypto";
|
||||
|
||||
import jsrp from "jsrp";
|
||||
import nacl from "tweetnacl";
|
||||
import { encodeBase64 } from "tweetnacl-util";
|
||||
|
||||
import Aes256Gcm from "@app/components/utilities/cryptography/aes-256-gcm";
|
||||
import { deriveArgonKey } from "@app/components/utilities/cryptography/crypto";
|
||||
|
||||
// eslint-disable-next-line new-cap
|
||||
const client = new jsrp.client();
|
||||
|
||||
type TUserPassKey = {
|
||||
protectedKey: string;
|
||||
protectedKeyTag: string;
|
||||
protectedKeyIV: string;
|
||||
encryptedPrivateKey: string;
|
||||
encryptedPrivateKeyIV: string;
|
||||
encryptedPrivateKeyTag: string;
|
||||
publicKey: string;
|
||||
verifier: string;
|
||||
salt: string;
|
||||
privateKey: string;
|
||||
};
|
||||
|
||||
export const generateUserPassKey = async (email: string, password: string) => {
|
||||
const pair = nacl.box.keyPair();
|
||||
const secretKeyUint8Array = pair.secretKey;
|
||||
const publicKeyUint8Array = pair.publicKey;
|
||||
const privateKey = encodeBase64(secretKeyUint8Array);
|
||||
const publicKey = encodeBase64(publicKeyUint8Array);
|
||||
return new Promise<TUserPassKey>((resolve, reject) => {
|
||||
client.init({ username: email, password }, () => {
|
||||
client.createVerifier(
|
||||
async (err: any, { salt, verifier }: { salt: string; verifier: string }) => {
|
||||
if (err) {
|
||||
return reject(err);
|
||||
}
|
||||
|
||||
try {
|
||||
// TODO: moduralize into KeyService
|
||||
const derivedKey = await deriveArgonKey({
|
||||
password,
|
||||
salt,
|
||||
mem: 65536,
|
||||
time: 3,
|
||||
parallelism: 1,
|
||||
hashLen: 32
|
||||
});
|
||||
|
||||
if (!derivedKey) throw new Error("Failed to derive key from password");
|
||||
|
||||
const key = crypto.randomBytes(32);
|
||||
|
||||
// create encrypted private key by encrypting the private
|
||||
// key with the symmetric key [key]
|
||||
const {
|
||||
ciphertext: encryptedPrivateKey,
|
||||
iv: encryptedPrivateKeyIV,
|
||||
tag: encryptedPrivateKeyTag
|
||||
} = Aes256Gcm.encrypt({
|
||||
text: privateKey,
|
||||
secret: key
|
||||
});
|
||||
|
||||
// create the protected key by encrypting the symmetric key
|
||||
// [key] with the derived key
|
||||
const {
|
||||
ciphertext: protectedKey,
|
||||
iv: protectedKeyIV,
|
||||
tag: protectedKeyTag
|
||||
} = Aes256Gcm.encrypt({
|
||||
text: key.toString("hex"),
|
||||
secret: Buffer.from(derivedKey.hash)
|
||||
});
|
||||
|
||||
return resolve({
|
||||
protectedKey,
|
||||
protectedKeyTag,
|
||||
protectedKeyIV,
|
||||
encryptedPrivateKey,
|
||||
encryptedPrivateKeyIV,
|
||||
encryptedPrivateKeyTag,
|
||||
publicKey,
|
||||
verifier,
|
||||
salt,
|
||||
privateKey
|
||||
});
|
||||
} catch (error) {
|
||||
return reject(error);
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,30 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Head from "next/head";
|
||||
|
||||
import { AdminLayout } from "@app/layouts";
|
||||
import { AdminDashboardPage } from "@app/views/admin/DashboardPage";
|
||||
|
||||
const AdminDashboard = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{t("common.head-title", { title: t("admin.dashboard") })}</title>
|
||||
<link rel="icon" href="/infisical.ico" />
|
||||
<meta property="og:image" content="/images/message.png" />
|
||||
<meta property="og:title" content={t("admin.dashboard.og-title") ?? ""} />
|
||||
<meta name="og:description" content={t("admin.dashboard.og-description") ?? ""} />
|
||||
</Head>
|
||||
<div className="h-full">
|
||||
<AdminDashboardPage />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminDashboard;
|
||||
|
||||
AdminDashboard.requireAuth = true;
|
||||
|
||||
AdminDashboard.layout = AdminLayout;
|
||||
@ -0,0 +1,21 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Head from "next/head";
|
||||
|
||||
import { SignUpPage } from "@app/views/admin/SignUpPage";
|
||||
|
||||
export default function LoginPage() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen max-h-screen overflow-y-auto flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6">
|
||||
<Head>
|
||||
<title>{t("common.head-title", { title: t("signup.title") })}</title>
|
||||
<link rel="icon" href="/infisical.ico" />
|
||||
<meta property="og:image" content="/images/message.png" />
|
||||
<meta property="og:title" content={t("signup.og-title") ?? ""} />
|
||||
<meta name="og:description" content={t("signup.og-description") ?? ""} />
|
||||
</Head>
|
||||
<SignUpPage />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
import { useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { ContentLoader, Switch, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
|
||||
import { useOrganization, useServerConfig, useUser } from "@app/context";
|
||||
import { useUpdateServerConfig } from "@app/hooks/api";
|
||||
|
||||
enum TabSections {
|
||||
Settings = "settings"
|
||||
}
|
||||
|
||||
export const AdminDashboardPage = () => {
|
||||
const router = useRouter();
|
||||
const data = useServerConfig();
|
||||
const { config } = data;
|
||||
const { user, isLoading: isUserLoading } = useUser();
|
||||
const { orgs } = useOrganization();
|
||||
const { mutate: updateServerConfig } = useUpdateServerConfig();
|
||||
|
||||
const isNotAllowed = !user?.superAdmin;
|
||||
|
||||
useEffect(() => {
|
||||
if (isNotAllowed && !isUserLoading) {
|
||||
if (orgs?.length) {
|
||||
localStorage.setItem("orgData.id", orgs?.[0]?._id);
|
||||
router.push(`/org/${orgs?.[0]?._id}/overview`);
|
||||
}
|
||||
}
|
||||
}, [isNotAllowed, isUserLoading]);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-7xl pb-12 text-white dark:[color-scheme:dark]">
|
||||
<div className="mb-8">
|
||||
<div className="mx-4 mb-4 mt-6 flex flex-col items-start justify-between px-2 text-xl">
|
||||
<h1 className="text-3xl font-semibold">Admin Dashboard</h1>
|
||||
<p className="text-base text-bunker-300">Manage your Infisical.</p>
|
||||
</div>
|
||||
</div>
|
||||
{isUserLoading || isNotAllowed ? (
|
||||
<ContentLoader text={isNotAllowed ? "Redirecting to org page..." : undefined} />
|
||||
) : (
|
||||
<div>
|
||||
<Tabs defaultValue={TabSections.Settings}>
|
||||
<TabList>
|
||||
<div className="flex flex-row border-b border-mineshaft-600 w-full">
|
||||
<Tab value={TabSections.Settings}>General</Tab>
|
||||
</div>
|
||||
</TabList>
|
||||
<TabPanel value={TabSections.Settings}>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Switch
|
||||
id="disable-invite"
|
||||
isChecked={Boolean(config?.allowSignUp)}
|
||||
onCheckedChange={(isChecked) => updateServerConfig({ allowSignUp: isChecked })}
|
||||
/>
|
||||
<div className="flex-grow">Enable signup or invite</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
export { AdminDashboardPage } from "./DashboardPage";
|
||||
@ -0,0 +1,164 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { useRouter } from "next/router";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
|
||||
// TODO(akhilmhdh): rewrite this into module functions in lib
|
||||
import { saveTokenToLocalStorage } from "@app/components/utilities/saveTokenToLocalStorage";
|
||||
import SecurityClient from "@app/components/utilities/SecurityClient";
|
||||
import { Button, ContentLoader, FormControl, Input } from "@app/components/v2";
|
||||
import { useServerConfig } from "@app/context";
|
||||
import { useCreateAdminUser } from "@app/hooks/api";
|
||||
import { generateUserPassKey } from "@app/lib/crypto";
|
||||
import { isLoggedIn } from "@app/reactQuery";
|
||||
|
||||
const formSchema = z
|
||||
.object({
|
||||
email: z.string().email().trim(),
|
||||
firstName: z.string().trim(),
|
||||
lastName: z.string().trim().optional(),
|
||||
password: z.string().trim().min(14).max(100),
|
||||
confirmPassword: z.string().trim()
|
||||
})
|
||||
.refine((data) => data.password === data.confirmPassword, {
|
||||
message: "Password don't match",
|
||||
path: ["confirmPassword"]
|
||||
});
|
||||
|
||||
type TFormSchema = z.infer<typeof formSchema>;
|
||||
|
||||
export const SignUpPage = () => {
|
||||
const router = useRouter();
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { isSubmitting }
|
||||
} = useForm<TFormSchema>({
|
||||
resolver: zodResolver(formSchema)
|
||||
});
|
||||
const { createNotification } = useNotificationContext();
|
||||
|
||||
const { config } = useServerConfig();
|
||||
|
||||
useEffect(() => {
|
||||
if (config?.initialized) {
|
||||
if (isLoggedIn()) {
|
||||
router.push("/admin");
|
||||
} else {
|
||||
router.push("/login");
|
||||
}
|
||||
}
|
||||
}, [config.initialized]);
|
||||
|
||||
const { mutateAsync: createAdminUser } = useCreateAdminUser();
|
||||
|
||||
const handleFormSubmit = async ({ email, password, firstName, lastName }: TFormSchema) => {
|
||||
// avoid multi submission
|
||||
if (isSubmitting) return;
|
||||
try {
|
||||
const { privateKey, ...userPass } = await generateUserPassKey(email, password);
|
||||
const res = await createAdminUser({
|
||||
email,
|
||||
firstName,
|
||||
lastName,
|
||||
...userPass
|
||||
});
|
||||
SecurityClient.setToken(res.token);
|
||||
saveTokenToLocalStorage({
|
||||
publicKey: userPass.publicKey,
|
||||
encryptedPrivateKey: userPass.encryptedPrivateKey,
|
||||
iv: userPass.encryptedPrivateKeyIV,
|
||||
tag: userPass.encryptedPrivateKeyTag,
|
||||
privateKey
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
createNotification({
|
||||
type: "error",
|
||||
text: "Faield to create admin"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (config?.initialized) return <ContentLoader text="Redirecting to admin page..." />;
|
||||
|
||||
return (
|
||||
<div className="flex justify-center items-center">
|
||||
<div className="text-mineshaft-200">
|
||||
<div className="text-center flex flex-col items-center space-y-4">
|
||||
<img src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
|
||||
<div className="text-4xl">Welcome to Infisical</div>
|
||||
<div>Create your first Admin Account</div>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)}>
|
||||
<div className="mt-8">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Controller
|
||||
control={control}
|
||||
name="firstName"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="First name"
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Input isFullWidth size="lg" {...field} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="lastName"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Last name"
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Input isFullWidth size="lg" {...field} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl label="Email" errorText={error?.message} isError={Boolean(error)}>
|
||||
<Input isFullWidth size="lg" {...field} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="password"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl label="Password" errorText={error?.message} isError={Boolean(error)}>
|
||||
<Input isFullWidth size="lg" type="password" {...field} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="confirmPassword"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Confirm password"
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Input isFullWidth size="lg" type="password" {...field} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" isFullWidth className="mt-4" isLoading={isSubmitting}>
|
||||
Let's Go
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
export { SignUpPage } from "./SignUpPage";
|
||||
Loading…
Reference in new issue