feat: reset password without emergency kit

frontend/src/pages/admin/SignUpPage/SignUpPage.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { Helmet } from "react-helmet";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -8,16 +7,13 @@ import { AnimatePresence, motion } from "framer-motion";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { generateBackupPDFAsync } from "@app/components/utilities/generateBackupPDF";
 // 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, useSelectOrganization } from "@app/hooks/api";
-import { generateUserBackupKey, generateUserPassKey } from "@app/lib/crypto";
-
-import { DownloadBackupKeys } from "./components/DownloadBackupKeys";
+import { generateUserPassKey } from "@app/lib/crypto";
 
 const formSchema = z
   .object({
@@ -34,25 +30,17 @@ const formSchema = z
 
 type TFormSchema = z.infer<typeof formSchema>;
 
-enum SignupSteps {
-  DetailsForm = "details-form",
-  BackupKey = "backup-key"
-}
-
 export const SignUpPage = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const {
     control,
     handleSubmit,
-    getValues,
     formState: { isSubmitting }
   } = useForm<TFormSchema>({
     resolver: zodResolver(formSchema)
   });
 
-  const [step, setStep] = useState(SignupSteps.DetailsForm);
-
   const { config } = useServerConfig();
   const { mutateAsync: createAdminUser } = useCreateAdminUser();
   const { mutateAsync: selectOrganization } = useSelectOrganization();
@@ -84,7 +72,7 @@ export const SignUpPage = () => {
       // Will be refactored in next iteration to make it url based rather than local storage ones
       // Part of migration to nextjs 14
       localStorage.setItem("orgData.id", res.organization.id);
-      setStep(SignupSteps.BackupKey);
+      navigate({ to: "/admin" });
     } catch (err) {
       console.log(err);
       createNotification({
@@ -94,27 +82,7 @@ export const SignUpPage = () => {
     }
   };
 
-  const handleBackupKeyGenerate = async () => {
-    try {
-      const { email, password, firstName, lastName } = getValues();
-      const generatedKey = await generateUserBackupKey(email, password);
-      await generateBackupPDFAsync({
-        generatedKey,
-        personalEmail: email,
-        personalName: `${firstName} ${lastName}`
-      });
-      navigate({ to: "/admin" });
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed to generate backup"
-      });
-    }
-  };
-
-  if (config?.initialized && step === SignupSteps.DetailsForm)
-    return <ContentLoader text="Redirecting to admin page..." />;
+  if (config?.initialized) return <ContentLoader text="Redirecting to admin page..." />;
 
   return (
     <div className="flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6">
@@ -127,56 +95,28 @@ export const SignUpPage = () => {
       </Helmet>
       <div className="flex items-center justify-center">
         <AnimatePresence mode="wait">
-          {step === SignupSteps.DetailsForm && (
-            <motion.div
-              className="text-mineshaft-200"
-              key="panel-1"
-              transition={{ duration: 0.15 }}
-              initial={{ opacity: 0, translateX: 30 }}
-              animate={{ opacity: 1, translateX: 0 }}
-              exit={{ opacity: 0, translateX: 30 }}
-            >
-              <div className="flex flex-col items-center space-y-2 text-center">
-                <img src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
-                <div className="pt-4 text-4xl">Welcome to Infisical</div>
-                <div className="pb-4 text-bunker-300">Create your first Super 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="md" {...field} />
-                        </FormControl>
-                      )}
-                    />
-                    <Controller
-                      control={control}
-                      name="lastName"
-                      render={({ field, fieldState: { error } }) => (
-                        <FormControl
-                          label="Last name"
-                          errorText={error?.message}
-                          isError={Boolean(error)}
-                        >
-                          <Input isFullWidth size="md" {...field} />
-                        </FormControl>
-                      )}
-                    />
-                  </div>
+          <motion.div
+            className="text-mineshaft-200"
+            key="panel-1"
+            transition={{ duration: 0.15 }}
+            initial={{ opacity: 0, translateX: 30 }}
+            animate={{ opacity: 1, translateX: 0 }}
+            exit={{ opacity: 0, translateX: 30 }}
+          >
+            <div className="flex flex-col items-center space-y-2 text-center">
+              <img src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
+              <div className="pt-4 text-4xl">Welcome to Infisical</div>
+              <div className="pb-4 text-bunker-300">Create your first Super Admin Account</div>
+            </div>
+            <form onSubmit={handleSubmit(handleFormSubmit)}>
+              <div className="mt-8">
+                <div className="flex items-center space-x-4">
                   <Controller
                     control={control}
-                    name="email"
+                    name="firstName"
                     render={({ field, fieldState: { error } }) => (
                       <FormControl
-                        label="Email"
+                        label="First name"
                         errorText={error?.message}
                         isError={Boolean(error)}
                       >
@@ -186,56 +126,66 @@ export const SignUpPage = () => {
                   />
                   <Controller
                     control={control}
-                    name="password"
+                    name="lastName"
                     render={({ field, fieldState: { error } }) => (
                       <FormControl
-                        label="Password"
+                        label="Last name"
                         errorText={error?.message}
                         isError={Boolean(error)}
                       >
-                        <Input isFullWidth size="md" 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="md" type="password" {...field} />
+                        <Input isFullWidth size="md" {...field} />
                       </FormControl>
                     )}
                   />
                 </div>
-                <Button
-                  type="submit"
-                  colorSchema="primary"
-                  variant="outline_bg"
-                  isFullWidth
-                  className="mt-4"
-                  isLoading={isSubmitting}
-                >
-                  Continue
-                </Button>
-              </form>
-            </motion.div>
-          )}
-          {step === SignupSteps.BackupKey && (
-            <motion.div
-              className="text-mineshaft-200"
-              key="panel-2"
-              transition={{ duration: 0.15 }}
-              initial={{ opacity: 0, translateX: 30 }}
-              animate={{ opacity: 1, translateX: 0 }}
-              exit={{ opacity: 0, translateX: 30 }}
-            >
-              <DownloadBackupKeys onGenerate={handleBackupKeyGenerate} />
-            </motion.div>
-          )}
+                <Controller
+                  control={control}
+                  name="email"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl label="Email" errorText={error?.message} isError={Boolean(error)}>
+                      <Input isFullWidth size="md" {...field} />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="password"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Password"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Input isFullWidth size="md" 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="md" type="password" {...field} />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <Button
+                type="submit"
+                colorSchema="primary"
+                variant="outline_bg"
+                isFullWidth
+                className="mt-4"
+                isLoading={isSubmitting}
+              >
+                Continue
+              </Button>
+            </form>
+          </motion.div>
         </AnimatePresence>
       </div>
     </div>