forked from github/plane
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
@ -31,7 +31,7 @@ export const SignInRoot: React.FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mx-auto flex flex-col divide-y divide-custom-border-200">
|
||||
<div className="mx-auto flex flex-col">
|
||||
{signInStep === ESignInSteps.EMAIL && (
|
||||
<EmailForm
|
||||
handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
export * from "./product-updates-modal";
|
||||
export * from "./empty-state";
|
||||
export * from "./latest-feature-block";
|
||||
|
||||
35
web/components/common/latest-feature-block.tsx
Normal file
35
web/components/common/latest-feature-block.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import Image from "next/image";
|
||||
import { useTheme } from "next-themes";
|
||||
// icons
|
||||
import { Lightbulb } from "lucide-react";
|
||||
// images
|
||||
import signInIssues from "public/onboarding/onboarding-issues.svg";
|
||||
|
||||
export const LatestFeatureBlock = () => {
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`flex py-2 bg-onboarding-background-100 border border-onboarding-border-200 mx-auto rounded-[3.5px] sm:w-96 mt-16`}
|
||||
>
|
||||
<Lightbulb className="h-7 w-7 mr-2 mx-3" />
|
||||
<p className={`text-sm text-left text-onboarding-text-100`}>
|
||||
Try the latest features, like Tiptap editor, to write compelling responses.{" "}
|
||||
<span className="font-medium text-sm underline hover:cursor-pointer" onClick={() => {}}>
|
||||
See new features
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 ">
|
||||
<Image
|
||||
src={signInIssues}
|
||||
alt="Plane Issues"
|
||||
className={`flex object-cover rounded-md ${
|
||||
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
|
||||
} `}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
});
|
||||
@ -4,6 +4,9 @@ import { AdminAuthWrapper, UserAuthWrapper } from "layouts/auth-layout";
|
||||
// components
|
||||
import { InstanceAdminSidebar } from "./sidebar";
|
||||
import { InstanceAdminHeader } from "./header";
|
||||
import { InstanceSetupView } from "components/instance";
|
||||
// store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
|
||||
export interface IInstanceAdminLayout {
|
||||
children: ReactNode;
|
||||
@ -11,6 +14,18 @@ export interface IInstanceAdminLayout {
|
||||
|
||||
export const InstanceAdminLayout: FC<IInstanceAdminLayout> = (props) => {
|
||||
const { children } = props;
|
||||
// store
|
||||
const {
|
||||
instance: { instance },
|
||||
user: { currentUser },
|
||||
} = useMobxStore();
|
||||
// fetch
|
||||
|
||||
console.log("instance", instance);
|
||||
|
||||
if (instance?.is_setup_done === false) {
|
||||
return <InstanceSetupView />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
52
web/layouts/instance-layout/index.tsx
Normal file
52
web/layouts/instance-layout/index.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import { FC, ReactNode, useEffect } from "react";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// route
|
||||
import { useRouter } from "next/router";
|
||||
// store
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// components
|
||||
import { Spinner } from "@plane/ui";
|
||||
import { InstanceNotReady } from "components/instance";
|
||||
|
||||
type Props = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
const InstanceLayout: FC<Props> = observer(({ children }) => {
|
||||
// store
|
||||
const {
|
||||
instance: { fetchInstanceInfo, instance, createInstance },
|
||||
} = useMobxStore();
|
||||
|
||||
const router = useRouter();
|
||||
const isGodMode = router.pathname.includes("god-mode");
|
||||
|
||||
useSWR("INSTANCE_INFO", () => fetchInstanceInfo());
|
||||
|
||||
useEffect(() => {
|
||||
if (instance?.is_activated === false) {
|
||||
createInstance();
|
||||
}
|
||||
}, [instance?.is_activated, createInstance]);
|
||||
|
||||
return (
|
||||
<div className="h-screen w-full overflow-hidden">
|
||||
{instance ? (
|
||||
!instance.is_setup_done && !isGodMode ? (
|
||||
<InstanceNotReady />
|
||||
) : (
|
||||
children
|
||||
)
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default InstanceLayout;
|
||||
@ -102,21 +102,20 @@ export const ProfileLayoutSidebar = observer(() => {
|
||||
} ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
|
||||
>
|
||||
<div className="h-full w-full flex flex-col gap-y-4">
|
||||
<div
|
||||
className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
|
||||
sidebarCollapsed ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
<Link href={`/${redirectWorkspaceSlug}`}>
|
||||
<a className="flex-shrink-0 grid place-items-center h-5 w-5">
|
||||
<Link href={`/${redirectWorkspaceSlug}`}>
|
||||
<a
|
||||
className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
|
||||
sidebarCollapsed ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="flex-shrink-0 grid place-items-center h-5 w-5">
|
||||
<ChevronLeft className="h-5 w-5" strokeWidth={1} />
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
{!sidebarCollapsed && (
|
||||
<h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4>
|
||||
)}
|
||||
</div>
|
||||
</span>
|
||||
{!sidebarCollapsed && (
|
||||
<h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4>
|
||||
)}
|
||||
</a>
|
||||
</Link>
|
||||
<div className="flex-shrink-0 flex flex-col overflow-x-hidden px-4">
|
||||
{!sidebarCollapsed && (
|
||||
<h6 className="rounded text-custom-sidebar-text-400 px-1.5 text-sm font-semibold">Your account</h6>
|
||||
|
||||
@ -3,8 +3,15 @@ import dynamic from "next/dynamic";
|
||||
import Router from "next/router";
|
||||
import NProgress from "nprogress";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
// mobx store provider
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// constants
|
||||
import { THEMES } from "constants/themes";
|
||||
// layouts
|
||||
import InstanceLayout from "layouts/instance-layout";
|
||||
// contexts
|
||||
import { ToastContextProvider } from "contexts/toast.context";
|
||||
// dynamic imports
|
||||
const StoreWrapper = dynamic(() => import("lib/wrappers/store-wrapper"), { ssr: false });
|
||||
const PosthogWrapper = dynamic(() => import("lib/wrappers/posthog-wrapper"), { ssr: false });
|
||||
@ -29,18 +36,24 @@ export const AppProvider: FC<IAppProvider> = observer((props) => {
|
||||
} = useMobxStore();
|
||||
|
||||
return (
|
||||
<StoreWrapper>
|
||||
<CrispWrapper user={currentUser}>
|
||||
<PosthogWrapper
|
||||
user={currentUser}
|
||||
workspaceRole={currentWorkspaceRole}
|
||||
projectRole={currentProjectRole}
|
||||
posthogAPIKey={envConfig?.posthog_api_key || null}
|
||||
posthogHost={envConfig?.posthog_host || null}
|
||||
>
|
||||
{children}
|
||||
</PosthogWrapper>
|
||||
</CrispWrapper>
|
||||
</StoreWrapper>
|
||||
<ThemeProvider themes={THEMES} defaultTheme="system">
|
||||
<ToastContextProvider>
|
||||
<InstanceLayout>
|
||||
<StoreWrapper>
|
||||
<CrispWrapper user={currentUser}>
|
||||
<PosthogWrapper
|
||||
user={currentUser}
|
||||
workspaceRole={currentWorkspaceRole}
|
||||
projectRole={currentProjectRole}
|
||||
posthogAPIKey={envConfig?.posthog_api_key || null}
|
||||
posthogHost={envConfig?.posthog_host || null}
|
||||
>
|
||||
{children}
|
||||
</PosthogWrapper>
|
||||
</CrispWrapper>
|
||||
</StoreWrapper>
|
||||
</InstanceLayout>
|
||||
</ToastContextProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { ReactElement } from "react";
|
||||
import Head from "next/head";
|
||||
import { AppProps } from "next/app";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
// styles
|
||||
import "styles/globals.css";
|
||||
import "styles/editor.css";
|
||||
@ -9,10 +8,7 @@ import "styles/table.css";
|
||||
import "styles/command-pallette.css";
|
||||
import "styles/nprogress.css";
|
||||
import "styles/react-datepicker.css";
|
||||
// contexts
|
||||
import { ToastContextProvider } from "contexts/toast.context";
|
||||
// constants
|
||||
import { THEMES } from "constants/themes";
|
||||
import { SITE_TITLE } from "constants/seo-variables";
|
||||
// mobx store provider
|
||||
import { MobxStoreProvider } from "lib/mobx/store-provider";
|
||||
@ -34,11 +30,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
|
||||
<title>{SITE_TITLE}</title>
|
||||
</Head>
|
||||
<MobxStoreProvider {...pageProps}>
|
||||
<ThemeProvider themes={THEMES} defaultTheme="system">
|
||||
<ToastContextProvider>
|
||||
<AppProvider>{getLayout(<Component {...pageProps} />)}</AppProvider>
|
||||
</ToastContextProvider>
|
||||
</ThemeProvider>
|
||||
<AppProvider>{getLayout(<Component {...pageProps} />)}</AppProvider>
|
||||
</MobxStoreProvider>
|
||||
</>
|
||||
);
|
||||
|
||||
57
web/public/instance-not-ready.svg
Normal file
57
web/public/instance-not-ready.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 2.1 MiB |
60
web/public/instance-setup-done.svg
Normal file
60
web/public/instance-setup-done.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 MiB |
BIN
web/public/instance/plane-instance-not-ready.webp
Normal file
BIN
web/public/instance/plane-instance-not-ready.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
@ -80,6 +80,18 @@ export class AuthService extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async setInstanceAdminPassword(data: any): Promise<any> {
|
||||
return this.post("/api/licenses/instances/admins/set-password/", data)
|
||||
.then((response) => {
|
||||
this.setAccessToken(response?.data?.access_token);
|
||||
this.setRefreshToken(response?.data?.refresh_token);
|
||||
return response?.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async socialAuth(data: any): Promise<ILoginTokenResponse> {
|
||||
return this.post("/api/social-auth/", data, { headers: {} })
|
||||
.then((response) => {
|
||||
@ -100,6 +112,14 @@ export class AuthService extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async instanceAdminEmailCode(data: any): Promise<any> {
|
||||
return this.post("/api/licenses/instances/admins/magic-generate/", data, { headers: {} })
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
throw error?.response?.data;
|
||||
});
|
||||
}
|
||||
|
||||
async magicSignIn(data: IMagicSignInData): Promise<any> {
|
||||
return await this.post("/api/magic-sign-in/", data, { headers: {} })
|
||||
.then((response) => {
|
||||
@ -114,6 +134,16 @@ export class AuthService extends APIService {
|
||||
});
|
||||
}
|
||||
|
||||
async instanceMagicSignIn(data: any): Promise<any> {
|
||||
const response = await this.post("/api/licenses/instances/admins/magic-sign-in/", data);
|
||||
if (response?.status === 200) {
|
||||
this.setAccessToken(response?.data?.access_token);
|
||||
this.setRefreshToken(response?.data?.refresh_token);
|
||||
return response?.data;
|
||||
}
|
||||
throw response.response.data;
|
||||
}
|
||||
|
||||
async signOut(): Promise<any> {
|
||||
return this.post("/api/sign-out/", { refresh_token: this.getRefreshToken() })
|
||||
.then((response) => {
|
||||
|
||||
@ -15,7 +15,15 @@ export class InstanceService extends APIService {
|
||||
}
|
||||
|
||||
async getInstanceInfo(): Promise<IInstance> {
|
||||
return this.get("/api/licenses/instances/")
|
||||
return this.get("/api/licenses/instances/", { headers: {} })
|
||||
.then((response) => response.data)
|
||||
.catch((error) => {
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
|
||||
async createInstance(): Promise<IInstance> {
|
||||
return this.post("/api/licenses/instances/", {}, { headers: {} })
|
||||
.then((response) => response.data)
|
||||
.catch((error) => {
|
||||
throw error;
|
||||
|
||||
@ -17,6 +17,7 @@ export interface IInstanceStore {
|
||||
formattedConfig: IFormattedInstanceConfiguration | null;
|
||||
// action
|
||||
fetchInstanceInfo: () => Promise<IInstance>;
|
||||
createInstance: () => Promise<IInstance>;
|
||||
fetchInstanceAdmins: () => Promise<IInstanceAdmin[]>;
|
||||
updateInstanceInfo: (data: Partial<IInstance>) => Promise<IInstance>;
|
||||
fetchInstanceConfigurations: () => Promise<any>;
|
||||
@ -45,6 +46,7 @@ export class InstanceStore implements IInstanceStore {
|
||||
formattedConfig: computed,
|
||||
// actions
|
||||
fetchInstanceInfo: action,
|
||||
createInstance: action,
|
||||
fetchInstanceAdmins: action,
|
||||
updateInstanceInfo: action,
|
||||
fetchInstanceConfigurations: action,
|
||||
@ -84,6 +86,22 @@ export class InstanceStore implements IInstanceStore {
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Creating new Instance In case of no instance found
|
||||
*/
|
||||
createInstance = async () => {
|
||||
try {
|
||||
const instance = await this.instanceService.createInstance();
|
||||
runInAction(() => {
|
||||
this.instance = instance;
|
||||
});
|
||||
return instance;
|
||||
} catch (error) {
|
||||
console.log("Error while creating the instance");
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* fetch instance admins from API
|
||||
*/
|
||||
|
||||
2
web/types/instance.d.ts
vendored
2
web/types/instance.d.ts
vendored
@ -16,6 +16,8 @@ export interface IInstance {
|
||||
is_support_required: boolean;
|
||||
created_by: string | null;
|
||||
updated_by: string | null;
|
||||
is_activated: boolean;
|
||||
is_setup_done: boolean;
|
||||
}
|
||||
|
||||
export interface IInstanceConfiguration {
|
||||
|
||||
1
web/types/users.d.ts
vendored
1
web/types/users.d.ts
vendored
@ -16,6 +16,7 @@ export interface IUser {
|
||||
is_onboarded: boolean;
|
||||
is_password_autoset: boolean;
|
||||
is_tour_completed: boolean;
|
||||
is_password_autoset: boolean;
|
||||
mobile_number: string | null;
|
||||
role: string | null;
|
||||
onboarding_step: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user