dev: instance setup workflow (#2935)
* chore: instance type updated * chore: instance not ready screen added * chore: instance layout added * chore: instance magic sign in endpoint and type added * chore: instance admin password endpoint added * chore: instance setup page added * chore: instance setup form added * chore: instance layout updated * fix: instance admin workflow setup * fix: admin workflow setup --------- Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
This commit is contained in:
Anmol Singh Bhatia
sriram veeraghanta
parent
ee30eb0590
commit
fd5b7d20a8
25 changed files with 905 additions and 38 deletions
|
|
@ -8,3 +8,7 @@ export * from "./github-config-form";
|
|||
export * from "./google-config-form";
|
||||
export * from "./image-config-form";
|
||||
export * from "./instance-admin-restriction";
|
||||
export * from "./not-ready-view";
|
||||
export * from "./setup-view";
|
||||
export * from "./setup-done-view";
|
||||
export * from "./setup-form";
|
||||
|
|
|
|||
34
web/components/instance/not-ready-view.tsx
Normal file
34
web/components/instance/not-ready-view.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { useTheme } from "next-themes";
|
||||
// image
|
||||
import instanceNotReady from "public/instance/plane-instance-not-ready.webp";
|
||||
import PlaneWhiteLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
|
||||
import PlaneDarkLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
|
||||
|
||||
export const InstanceNotReady = () => {
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
const planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneDarkLogo;
|
||||
|
||||
return (
|
||||
<div className="h-screen w-full overflow-y-auto bg-onboarding-gradient-100">
|
||||
<div className={`h-screen w-full pt-24`}>
|
||||
<div className="h-auto bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 p-4 rounded-md mx-auto shadow-sm border border-custom-border-100 ">
|
||||
<div className={`relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-md`}>
|
||||
<div className="flex items-center py-10 justify-center">
|
||||
<Image src={planeLogo} className="h-44 w-full" alt="image" />
|
||||
</div>
|
||||
<div className="mt-20">
|
||||
<Image src={instanceNotReady} className="h-46 w-full" alt="image" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-5 items-center py-12 pb-20 w-full">
|
||||
<h3 className="text-2xl font-medium">Your Plane instance isn’t ready yet</h3>
|
||||
<p className="text-sm">Ask your Instance Admin to complete set-up first.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
43
web/components/instance/setup-done-view.tsx
Normal file
43
web/components/instance/setup-done-view.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import React from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
import { UserCog2 } from "lucide-react";
|
||||
// image
|
||||
import instanceSetupDone from "public/instance-setup-done.svg";
|
||||
import PlaneLogo from "public/plane-logos/blue-without-text.png";
|
||||
|
||||
export const InstanceSetupDone = () => (
|
||||
<div className="h-screen w-full overflow-hidden">
|
||||
<div className={`bg-onboarding-gradient-100 h-screen w-full pt-12`}>
|
||||
<div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 ">
|
||||
<div
|
||||
className={`flex flex-col items-center relative px-7 sm:px-0 bg-onboarding-gradient-200 h-full rounded-t-md overflow-auto`}
|
||||
>
|
||||
<div className="flex items-center gap-5 py-10 justify-center">
|
||||
<Image src={PlaneLogo} height={44} width={44} alt="image" />
|
||||
<span className="text-4xl font-semibold">To the stratosphere now!</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center">
|
||||
<Image src={instanceSetupDone} height={360} width={444} alt="image" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-8 items-center py-12 w-full">
|
||||
<span className="text-xl font-medium">
|
||||
Your instance is now ready for more security, more controls, and more intelligence.
|
||||
</span>
|
||||
<Button size="lg" prependIcon={<UserCog2 />}>
|
||||
Go to God Mode
|
||||
</Button>
|
||||
|
||||
<div className="flex p-2.5 text-custom-primary-100 bg-custom-primary-10 border border-custom-primary-100 text-sm text-left mx-auto rounded">
|
||||
Use this wisely. Remember, with great power comes great responsibility.🕷️
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
167
web/components/instance/setup-form/email-code-form.tsx
Normal file
167
web/components/instance/setup-form/email-code-form.tsx
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
import { FC } from "react";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
// ui
|
||||
import { Input, Button } from "@plane/ui";
|
||||
// icons
|
||||
import { XCircle } from "lucide-react";
|
||||
// services
|
||||
import { AuthService } from "services/auth.service";
|
||||
const authService = new AuthService();
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import useTimer from "hooks/use-timer";
|
||||
|
||||
export interface InstanceSetupEmailCodeFormValues {
|
||||
email: string;
|
||||
token: string;
|
||||
}
|
||||
|
||||
export interface IInstanceSetupEmailCodeForm {
|
||||
email: string;
|
||||
handleNextStep: () => void;
|
||||
moveBack: () => void;
|
||||
}
|
||||
|
||||
export const InstanceSetupEmailCodeForm: FC<IInstanceSetupEmailCodeForm> = (props) => {
|
||||
const { handleNextStep, email, moveBack } = props;
|
||||
// form info
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<InstanceSetupEmailCodeFormValues>({
|
||||
defaultValues: {
|
||||
email,
|
||||
token: "",
|
||||
},
|
||||
});
|
||||
// hooks
|
||||
const { setToastAlert } = useToast();
|
||||
const { timer, setTimer } = useTimer(30);
|
||||
// computed
|
||||
const isResendDisabled = timer > 0 || isSubmitting;
|
||||
|
||||
const handleEmailCodeFormSubmit = (formValues: InstanceSetupEmailCodeFormValues) =>
|
||||
authService
|
||||
.instanceMagicSignIn({ key: `magic_${formValues.email}`, token: formValues.token })
|
||||
.then(() => {
|
||||
reset();
|
||||
handleNextStep();
|
||||
})
|
||||
.catch((err) => {
|
||||
setToastAlert({
|
||||
title: "Oops!",
|
||||
type: "error",
|
||||
message: err?.error,
|
||||
});
|
||||
});
|
||||
|
||||
const resendMagicCode = () => {
|
||||
setTimer(30);
|
||||
authService
|
||||
.instanceAdminEmailCode({ email })
|
||||
.then(() => {
|
||||
// setCodeResending(false);
|
||||
setTimer(30);
|
||||
})
|
||||
.catch((err) => {
|
||||
setToastAlert({
|
||||
title: "Oops!",
|
||||
type: "error",
|
||||
message: err?.error,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handleEmailCodeFormSubmit)}>
|
||||
<div className="pb-2">
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||
Let’s secure your instance
|
||||
</h1>
|
||||
<div className="text-center text-sm text-onboarding-text-200 mt-3">
|
||||
<p>Paste the code you got at </p>
|
||||
<span className="text-center text-sm text-custom-primary-80 mt-1 font-semibold ">{email}</span>
|
||||
<span className="text-onboarding-text-200">below.</span>
|
||||
</div>
|
||||
|
||||
<div className="relative mt-10 w-full sm:w-[360px] mx-auto">
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Email address is required",
|
||||
validate: (value) =>
|
||||
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
|
||||
value
|
||||
) || "Email address is not valid",
|
||||
}}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className={`flex items-center relative rounded-md bg-onboarding-background-200 mb-4`}>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
disabled
|
||||
placeholder="orville.wright@firstflight.com"
|
||||
className={`w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12`}
|
||||
/>
|
||||
<XCircle
|
||||
className="h-5 w-5 absolute stroke-custom-text-400 hover:cursor-pointer right-3"
|
||||
onClick={() => moveBack()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
className={`flex w-full justify-end text-xs outline-none ${
|
||||
isResendDisabled ? "cursor-default text-custom-text-200" : "cursor-pointer text-custom-primary-100"
|
||||
} `}
|
||||
>
|
||||
{timer > 0 ? (
|
||||
<span className="text-right">Request new code in {timer}s</span>
|
||||
) : isSubmitting ? (
|
||||
"Sending new code..."
|
||||
) : (
|
||||
<div className="flex justify-end w-full">
|
||||
<button
|
||||
type="button"
|
||||
className="w-fit pb-2 text-xs outline-none cursor-pointer text-custom-primary-100"
|
||||
onClick={resendMagicCode}
|
||||
disabled={isResendDisabled}
|
||||
>
|
||||
<span className="font-medium">Resend</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Controller
|
||||
name="token"
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className={`flex items-center relative rounded-md bg-onboarding-background-200 mb-4`}>
|
||||
<Input
|
||||
id="token"
|
||||
name="token"
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder="gets-sets-flys"
|
||||
className="border-onboarding-border-100 h-[46px] w-full "
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
|
||||
{isSubmitting ? "Verifying..." : "Next step"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
105
web/components/instance/setup-form/email-form.tsx
Normal file
105
web/components/instance/setup-form/email-form.tsx
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
import { FC } from "react";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
// ui
|
||||
import { Input, Button } from "@plane/ui";
|
||||
// icons
|
||||
import { XCircle } from "lucide-react";
|
||||
// services
|
||||
import { AuthService } from "services/auth.service";
|
||||
const authService = new AuthService();
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
|
||||
export interface InstanceSetupEmailFormValues {
|
||||
email: string;
|
||||
}
|
||||
|
||||
export interface IInstanceSetupEmailForm {
|
||||
handleNextStep: (email: string) => void;
|
||||
}
|
||||
|
||||
export const InstanceSetupEmailForm: FC<IInstanceSetupEmailForm> = (props) => {
|
||||
const { handleNextStep } = props;
|
||||
// form info
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
reset,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<InstanceSetupEmailFormValues>({
|
||||
defaultValues: {
|
||||
email: "",
|
||||
},
|
||||
});
|
||||
// hooks
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const handleEmailFormSubmit = (formValues: InstanceSetupEmailFormValues) =>
|
||||
authService
|
||||
.instanceAdminEmailCode({ email: formValues.email })
|
||||
.then(() => {
|
||||
reset();
|
||||
handleNextStep(formValues.email);
|
||||
})
|
||||
.catch((err) => {
|
||||
setToastAlert({
|
||||
title: "Oops!",
|
||||
type: "error",
|
||||
message: err?.error,
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handleEmailFormSubmit)}>
|
||||
<div className="pb-2">
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||
Let’s secure your instance
|
||||
</h1>
|
||||
<p className="text-center text-sm text-onboarding-text-200 mt-3">
|
||||
Explore privacy options. Get AI features. Secure access. <br /> Takes 2 minutes.
|
||||
</p>
|
||||
|
||||
<div className="relative mt-10 w-full sm:w-[360px] mx-auto">
|
||||
<Controller
|
||||
name="email"
|
||||
control={control}
|
||||
rules={{
|
||||
required: "Email address is required",
|
||||
validate: (value) =>
|
||||
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
|
||||
value
|
||||
) || "Email address is not valid",
|
||||
}}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className={`flex items-center relative rounded-md bg-onboarding-background-200`}>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder="orville.wright@firstflight.com"
|
||||
className={`w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12`}
|
||||
/>
|
||||
{value.length > 0 && (
|
||||
<XCircle
|
||||
className="h-5 w-5 absolute stroke-custom-text-400 hover:cursor-pointer right-3"
|
||||
onClick={() => setValue("email", "")}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<p className="text-xs text-custom-text-400 mt-0 py-2">
|
||||
Use your email address if you are the instance admin. <br /> Use your admin’s e-mail if you are not.
|
||||
</p>
|
||||
|
||||
<Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
|
||||
{isSubmitting ? "Sending code..." : "Send unique code"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
3
web/components/instance/setup-form/index.ts
Normal file
3
web/components/instance/setup-form/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export * from "./email-code-form";
|
||||
export * from "./email-form";
|
||||
export * from "./root";
|
||||
120
web/components/instance/setup-form/password-form.tsx
Normal file
120
web/components/instance/setup-form/password-form.tsx
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
import React from "react";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
// ui
|
||||
import { Input, Button } from "@plane/ui";
|
||||
// icons
|
||||
import { XCircle } from "lucide-react";
|
||||
// services
|
||||
import { AuthService } from "services/auth.service";
|
||||
const authService = new AuthService();
|
||||
|
||||
export interface InstanceSetupPasswordFormValues {
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface IInstanceSetupPasswordForm {
|
||||
email: string;
|
||||
onNextStep: () => void;
|
||||
resetSteps: () => void;
|
||||
}
|
||||
|
||||
export const InstanceSetupPasswordForm: React.FC<IInstanceSetupPasswordForm> = (props) => {
|
||||
const { onNextStep, email, resetSteps } = props;
|
||||
// form info
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<InstanceSetupPasswordFormValues>({
|
||||
defaultValues: {
|
||||
email,
|
||||
password: "",
|
||||
},
|
||||
mode: "onChange",
|
||||
reValidateMode: "onChange",
|
||||
});
|
||||
|
||||
const handlePasswordSubmit = (formData: InstanceSetupPasswordFormValues) =>
|
||||
authService.setInstanceAdminPassword({ password: formData.password }).then(() => {
|
||||
onNextStep();
|
||||
});
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handlePasswordSubmit)}>
|
||||
<div className="pb-2">
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||
Moving to the runway
|
||||
</h1>
|
||||
<p className="text-center text-sm text-onboarding-text-200 mt-3">
|
||||
{"Let's set a password so you can do away with codes."}
|
||||
</p>
|
||||
|
||||
<div className="relative mt-10 w-full sm:w-[360px] mx-auto">
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
rules={{
|
||||
required: "Email is required",
|
||||
validate: (value) =>
|
||||
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
|
||||
value
|
||||
) || "Email address is not valid",
|
||||
}}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className={`flex items-center relative rounded-md bg-onboarding-background-200`}>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder="orville.wright@firstflight.com"
|
||||
className={`w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12`}
|
||||
/>
|
||||
<XCircle
|
||||
className="h-5 w-5 absolute stroke-custom-text-400 hover:cursor-pointer right-3"
|
||||
onClick={() => resetSteps()}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="mt-4">
|
||||
<Controller
|
||||
control={control}
|
||||
name="password"
|
||||
rules={{
|
||||
required: "Password is required",
|
||||
minLength: {
|
||||
value: 8,
|
||||
message: "Minimum 8 characters required",
|
||||
},
|
||||
}}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className={`flex items-center relative rounded-md bg-onboarding-background-200`}>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
name="password"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
hasError={Boolean(errors.password)}
|
||||
placeholder="Enter your password..."
|
||||
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs mt-2 text-onboarding-text-200">
|
||||
{"Whatever you choose now will be your account's password"}
|
||||
</p>
|
||||
<Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
|
||||
{isSubmitting ? "Submitting..." : "Next Step"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
70
web/components/instance/setup-form/root.tsx
Normal file
70
web/components/instance/setup-form/root.tsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import { useState } from "react";
|
||||
// components
|
||||
import { InstanceSetupEmailCodeForm } from "./email-code-form";
|
||||
import { InstanceSetupEmailForm } from "./email-form";
|
||||
import { InstanceSetupPasswordForm } from "./password-form";
|
||||
import { LatestFeatureBlock } from "components/common";
|
||||
import { InstanceSetupDone } from "components/instance";
|
||||
|
||||
export enum EInstanceSetupSteps {
|
||||
EMAIL = "EMAIL",
|
||||
VERIFY_CODE = "VERIFY_CODE",
|
||||
PASSWORD = "PASSWORD",
|
||||
DONE = "DONE",
|
||||
}
|
||||
|
||||
export const InstanceSetupFormRoot = () => {
|
||||
// states
|
||||
const [setupStep, setSetupStep] = useState(EInstanceSetupSteps.EMAIL);
|
||||
const [email, setEmail] = useState<string>("");
|
||||
|
||||
return (
|
||||
<>
|
||||
{setupStep === EInstanceSetupSteps.DONE ? (
|
||||
<div>
|
||||
<InstanceSetupDone />
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 ">
|
||||
<div className={`px-7 sm:px-0 bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto`}>
|
||||
<div className="sm:w-96 mx-auto flex flex-col divide-y divide-custom-border-200">
|
||||
{setupStep === EInstanceSetupSteps.EMAIL && (
|
||||
<InstanceSetupEmailForm
|
||||
handleNextStep={(email) => {
|
||||
setEmail(email);
|
||||
setSetupStep(EInstanceSetupSteps.VERIFY_CODE);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{setupStep === EInstanceSetupSteps.VERIFY_CODE && (
|
||||
<InstanceSetupEmailCodeForm
|
||||
email={email}
|
||||
handleNextStep={() => {
|
||||
setSetupStep(EInstanceSetupSteps.PASSWORD);
|
||||
}}
|
||||
moveBack={() => {
|
||||
setSetupStep(EInstanceSetupSteps.EMAIL);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{setupStep === EInstanceSetupSteps.PASSWORD && (
|
||||
<InstanceSetupPasswordForm
|
||||
email={email}
|
||||
onNextStep={() => {
|
||||
setSetupStep(EInstanceSetupSteps.DONE);
|
||||
}}
|
||||
resetSteps={() => {
|
||||
setSetupStep(EInstanceSetupSteps.EMAIL);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<LatestFeatureBlock />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
38
web/components/instance/setup-view.tsx
Normal file
38
web/components/instance/setup-view.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import { useEffect, useCallback } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import Image from "next/image";
|
||||
// components
|
||||
import { InstanceSetupFormRoot } from "components/instance";
|
||||
// hooks
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// images
|
||||
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
|
||||
|
||||
export const InstanceSetupView = observer(() => {
|
||||
// store
|
||||
const {
|
||||
user: { fetchCurrentUser },
|
||||
} = useMobxStore();
|
||||
|
||||
const mutateUserInfo = useCallback(() => {
|
||||
fetchCurrentUser();
|
||||
}, [fetchCurrentUser]);
|
||||
|
||||
useEffect(() => {
|
||||
mutateUserInfo();
|
||||
}, [mutateUserInfo]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`bg-onboarding-gradient-100 h-full w-full`}>
|
||||
<div className="flex items-center justify-between sm:py-5 px-8 pb-4 sm:px-16 lg:px-28 ">
|
||||
<div className="flex gap-x-2 py-10 items-center">
|
||||
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
|
||||
<span className="font-semibold text-2xl sm:text-3xl">Plane</span>
|
||||
</div>
|
||||
</div>
|
||||
<InstanceSetupFormRoot />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue