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:
parent
380b00c1a2
commit
ea69d82ea5
@ -31,7 +31,7 @@ export const SignInRoot: React.FC<Props> = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="mx-auto flex flex-col divide-y divide-custom-border-200">
|
<div className="mx-auto flex flex-col">
|
||||||
{signInStep === ESignInSteps.EMAIL && (
|
{signInStep === ESignInSteps.EMAIL && (
|
||||||
<EmailForm
|
<EmailForm
|
||||||
handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
|
handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
|
||||||
|
@ -1,2 +1,3 @@
|
|||||||
export * from "./product-updates-modal";
|
export * from "./product-updates-modal";
|
||||||
export * from "./empty-state";
|
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 "./google-config-form";
|
||||||
export * from "./image-config-form";
|
export * from "./image-config-form";
|
||||||
export * from "./instance-admin-restriction";
|
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
|
// components
|
||||||
import { InstanceAdminSidebar } from "./sidebar";
|
import { InstanceAdminSidebar } from "./sidebar";
|
||||||
import { InstanceAdminHeader } from "./header";
|
import { InstanceAdminHeader } from "./header";
|
||||||
|
import { InstanceSetupView } from "components/instance";
|
||||||
|
// store
|
||||||
|
import { useMobxStore } from "lib/mobx/store-provider";
|
||||||
|
|
||||||
export interface IInstanceAdminLayout {
|
export interface IInstanceAdminLayout {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
@ -11,6 +14,18 @@ export interface IInstanceAdminLayout {
|
|||||||
|
|
||||||
export const InstanceAdminLayout: FC<IInstanceAdminLayout> = (props) => {
|
export const InstanceAdminLayout: FC<IInstanceAdminLayout> = (props) => {
|
||||||
const { children } = 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 (
|
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"}`}
|
} ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
|
||||||
>
|
>
|
||||||
<div className="h-full w-full flex flex-col gap-y-4">
|
<div className="h-full w-full flex flex-col gap-y-4">
|
||||||
<div
|
<Link href={`/${redirectWorkspaceSlug}`}>
|
||||||
|
<a
|
||||||
className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
|
className={`flex-shrink-0 flex items-center gap-2 px-4 pt-4 truncate ${
|
||||||
sidebarCollapsed ? "justify-center" : ""
|
sidebarCollapsed ? "justify-center" : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<Link href={`/${redirectWorkspaceSlug}`}>
|
<span className="flex-shrink-0 grid place-items-center h-5 w-5">
|
||||||
<a className="flex-shrink-0 grid place-items-center h-5 w-5">
|
|
||||||
<ChevronLeft className="h-5 w-5" strokeWidth={1} />
|
<ChevronLeft className="h-5 w-5" strokeWidth={1} />
|
||||||
</a>
|
</span>
|
||||||
</Link>
|
|
||||||
|
|
||||||
{!sidebarCollapsed && (
|
{!sidebarCollapsed && (
|
||||||
<h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4>
|
<h4 className="text-custom-text-200 font-semibold text-lg truncate">Profile settings</h4>
|
||||||
)}
|
)}
|
||||||
</div>
|
</a>
|
||||||
|
</Link>
|
||||||
<div className="flex-shrink-0 flex flex-col overflow-x-hidden px-4">
|
<div className="flex-shrink-0 flex flex-col overflow-x-hidden px-4">
|
||||||
{!sidebarCollapsed && (
|
{!sidebarCollapsed && (
|
||||||
<h6 className="rounded text-custom-sidebar-text-400 px-1.5 text-sm font-semibold">Your account</h6>
|
<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 Router from "next/router";
|
||||||
import NProgress from "nprogress";
|
import NProgress from "nprogress";
|
||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
|
import { ThemeProvider } from "next-themes";
|
||||||
// mobx store provider
|
// mobx store provider
|
||||||
import { useMobxStore } from "lib/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
|
// dynamic imports
|
||||||
const StoreWrapper = dynamic(() => import("lib/wrappers/store-wrapper"), { ssr: false });
|
const StoreWrapper = dynamic(() => import("lib/wrappers/store-wrapper"), { ssr: false });
|
||||||
const PosthogWrapper = dynamic(() => import("lib/wrappers/posthog-wrapper"), { ssr: false });
|
const PosthogWrapper = dynamic(() => import("lib/wrappers/posthog-wrapper"), { ssr: false });
|
||||||
@ -29,6 +36,9 @@ export const AppProvider: FC<IAppProvider> = observer((props) => {
|
|||||||
} = useMobxStore();
|
} = useMobxStore();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<ThemeProvider themes={THEMES} defaultTheme="system">
|
||||||
|
<ToastContextProvider>
|
||||||
|
<InstanceLayout>
|
||||||
<StoreWrapper>
|
<StoreWrapper>
|
||||||
<CrispWrapper user={currentUser}>
|
<CrispWrapper user={currentUser}>
|
||||||
<PosthogWrapper
|
<PosthogWrapper
|
||||||
@ -42,5 +52,8 @@ export const AppProvider: FC<IAppProvider> = observer((props) => {
|
|||||||
</PosthogWrapper>
|
</PosthogWrapper>
|
||||||
</CrispWrapper>
|
</CrispWrapper>
|
||||||
</StoreWrapper>
|
</StoreWrapper>
|
||||||
|
</InstanceLayout>
|
||||||
|
</ToastContextProvider>
|
||||||
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
import { ReactElement } from "react";
|
import { ReactElement } from "react";
|
||||||
import Head from "next/head";
|
import Head from "next/head";
|
||||||
import { AppProps } from "next/app";
|
import { AppProps } from "next/app";
|
||||||
import { ThemeProvider } from "next-themes";
|
|
||||||
// styles
|
// styles
|
||||||
import "styles/globals.css";
|
import "styles/globals.css";
|
||||||
import "styles/editor.css";
|
import "styles/editor.css";
|
||||||
@ -9,10 +8,7 @@ import "styles/table.css";
|
|||||||
import "styles/command-pallette.css";
|
import "styles/command-pallette.css";
|
||||||
import "styles/nprogress.css";
|
import "styles/nprogress.css";
|
||||||
import "styles/react-datepicker.css";
|
import "styles/react-datepicker.css";
|
||||||
// contexts
|
|
||||||
import { ToastContextProvider } from "contexts/toast.context";
|
|
||||||
// constants
|
// constants
|
||||||
import { THEMES } from "constants/themes";
|
|
||||||
import { SITE_TITLE } from "constants/seo-variables";
|
import { SITE_TITLE } from "constants/seo-variables";
|
||||||
// mobx store provider
|
// mobx store provider
|
||||||
import { MobxStoreProvider } from "lib/mobx/store-provider";
|
import { MobxStoreProvider } from "lib/mobx/store-provider";
|
||||||
@ -34,11 +30,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
|
|||||||
<title>{SITE_TITLE}</title>
|
<title>{SITE_TITLE}</title>
|
||||||
</Head>
|
</Head>
|
||||||
<MobxStoreProvider {...pageProps}>
|
<MobxStoreProvider {...pageProps}>
|
||||||
<ThemeProvider themes={THEMES} defaultTheme="system">
|
|
||||||
<ToastContextProvider>
|
|
||||||
<AppProvider>{getLayout(<Component {...pageProps} />)}</AppProvider>
|
<AppProvider>{getLayout(<Component {...pageProps} />)}</AppProvider>
|
||||||
</ToastContextProvider>
|
|
||||||
</ThemeProvider>
|
|
||||||
</MobxStoreProvider>
|
</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> {
|
async socialAuth(data: any): Promise<ILoginTokenResponse> {
|
||||||
return this.post("/api/social-auth/", data, { headers: {} })
|
return this.post("/api/social-auth/", data, { headers: {} })
|
||||||
.then((response) => {
|
.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> {
|
async magicSignIn(data: IMagicSignInData): Promise<any> {
|
||||||
return await this.post("/api/magic-sign-in/", data, { headers: {} })
|
return await this.post("/api/magic-sign-in/", data, { headers: {} })
|
||||||
.then((response) => {
|
.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> {
|
async signOut(): Promise<any> {
|
||||||
return this.post("/api/sign-out/", { refresh_token: this.getRefreshToken() })
|
return this.post("/api/sign-out/", { refresh_token: this.getRefreshToken() })
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
|
@ -15,7 +15,15 @@ export class InstanceService extends APIService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async getInstanceInfo(): Promise<IInstance> {
|
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)
|
.then((response) => response.data)
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
throw error;
|
throw error;
|
||||||
|
@ -17,6 +17,7 @@ export interface IInstanceStore {
|
|||||||
formattedConfig: IFormattedInstanceConfiguration | null;
|
formattedConfig: IFormattedInstanceConfiguration | null;
|
||||||
// action
|
// action
|
||||||
fetchInstanceInfo: () => Promise<IInstance>;
|
fetchInstanceInfo: () => Promise<IInstance>;
|
||||||
|
createInstance: () => Promise<IInstance>;
|
||||||
fetchInstanceAdmins: () => Promise<IInstanceAdmin[]>;
|
fetchInstanceAdmins: () => Promise<IInstanceAdmin[]>;
|
||||||
updateInstanceInfo: (data: Partial<IInstance>) => Promise<IInstance>;
|
updateInstanceInfo: (data: Partial<IInstance>) => Promise<IInstance>;
|
||||||
fetchInstanceConfigurations: () => Promise<any>;
|
fetchInstanceConfigurations: () => Promise<any>;
|
||||||
@ -45,6 +46,7 @@ export class InstanceStore implements IInstanceStore {
|
|||||||
formattedConfig: computed,
|
formattedConfig: computed,
|
||||||
// actions
|
// actions
|
||||||
fetchInstanceInfo: action,
|
fetchInstanceInfo: action,
|
||||||
|
createInstance: action,
|
||||||
fetchInstanceAdmins: action,
|
fetchInstanceAdmins: action,
|
||||||
updateInstanceInfo: action,
|
updateInstanceInfo: action,
|
||||||
fetchInstanceConfigurations: 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
|
* 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;
|
is_support_required: boolean;
|
||||||
created_by: string | null;
|
created_by: string | null;
|
||||||
updated_by: string | null;
|
updated_by: string | null;
|
||||||
|
is_activated: boolean;
|
||||||
|
is_setup_done: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IInstanceConfiguration {
|
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_onboarded: boolean;
|
||||||
is_password_autoset: boolean;
|
is_password_autoset: boolean;
|
||||||
is_tour_completed: boolean;
|
is_tour_completed: boolean;
|
||||||
|
is_password_autoset: boolean;
|
||||||
mobile_number: string | null;
|
mobile_number: string | null;
|
||||||
role: string | null;
|
role: string | null;
|
||||||
onboarding_step: {
|
onboarding_step: {
|
||||||
|
Loading…
Reference in New Issue
Block a user