feat(onboarding): frontend for onboarding users

frontend/src/views/Login/components/InitialStep/InitialStep.tsx

@@ -12,7 +12,7 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import attemptCliLogin from "@app/components/utilities/attemptCliLogin";
 import attemptLogin from "@app/components/utilities/attemptLogin";
 import { Button, Input } from "@app/components/v2";
-import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
+import { useServerConfig } from "@app/context";
 
 import { navigateUserToOrg } from "../../Login.utils";
 
@@ -30,7 +30,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
   const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState(false);
   const [loginError, setLoginError] = useState(false);
-  const { data: serverDetails } = useFetchServerStatus();
+  const { config } = useServerConfig();
   const queryParams = new URLSearchParams(window.location.search);
 
   const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
@@ -84,7 +84,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
             setIsLoading(false);
             return;
           }
-          
+
           await navigateUserToOrg(router);
 
           // case: login does not require MFA step
@@ -225,7 +225,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
         </Button>
       </div>
       {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
-      {!serverDetails?.inviteOnlySignup ? (
+      {config.allowSignUp ? (
         <div className="mt-6 flex flex-row text-sm text-bunker-400">
           <Link href="/signup">
             <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
@@ -236,7 +236,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
       ) : (
         <div />
       )}
-      <div className="flex flex-row text-sm text-bunker-400">
+      <div className="flex flex-row text-sm text-bunker-400 mt-2">
         <Link href="/verify-email">
           <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
             Forgot password? Recover your account

frontend/src/views/admin/DashboardPage/DashboardPage.tsx

@@ -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>
+  );
+};

frontend/src/views/admin/DashboardPage/index.tsx

@@ -0,0 +1 @@
+export { AdminDashboardPage } from "./DashboardPage";

frontend/src/views/admin/SignUpPage/SignUpPage.tsx

@@ -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&apos;s Go
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+};

frontend/src/views/admin/SignUpPage/index.tsx

@@ -0,0 +1 @@
+export { SignUpPage } from "./SignUpPage";