chore: updated sign-in workflows for cloud and self-hosted instances (#2994)
* chore: update onboarding workflow * dev: update user count tasks * fix: forgot password endpoint * dev: instance and onboarding updates * chore: update sign-in workflow for cloud and self-hosted instances (#2993) * chore: updated auth services * chore: new signin workflow updated * chore: updated content * chore: instance admin setup * dev: update instance verification task * dev: run the instance verification task every 4 hours * dev: update migrations * chore: update latest features image --------- Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>
This commit is contained in:
Aaryan Khandelwal
sriram veeraghanta
parent
f481957818
commit
be2cf2e842
53 changed files with 1017 additions and 1368 deletions
|
|
@ -1,160 +0,0 @@
|
|||
import { FC, useState } 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;
|
||||
// states
|
||||
const [isResendingCode, setIsResendingCode] = useState(false);
|
||||
// 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 || isResendingCode;
|
||||
|
||||
const handleEmailCodeFormSubmit = async (formValues: InstanceSetupEmailCodeFormValues) =>
|
||||
await authService
|
||||
.instanceMagicSignIn({ key: `magic_${formValues.email}`, token: formValues.token })
|
||||
.then(() => {
|
||||
reset();
|
||||
handleNextStep();
|
||||
})
|
||||
.catch((err) => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: err?.error ?? "Something went wrong. Please try again.",
|
||||
});
|
||||
});
|
||||
|
||||
const resendMagicCode = async () => {
|
||||
setIsResendingCode(true);
|
||||
|
||||
await authService
|
||||
.instanceAdminEmailCode({ email })
|
||||
.then(() => setTimer(30))
|
||||
.catch((err) => {
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: err?.error ?? "Something went wrong. Please try again.",
|
||||
});
|
||||
})
|
||||
.finally(() => setIsResendingCode(false));
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handleEmailCodeFormSubmit)}>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||
Let{"'"}s secure your instance
|
||||
</h1>
|
||||
<p className="text-center text-sm text-onboarding-text-200 mt-3">
|
||||
Paste the code you got at
|
||||
<br />
|
||||
<span className="text-custom-primary-100 font-semibold">{email}</span> below.
|
||||
</p>
|
||||
<div className="relative mt-5 w-full sm:w-96 mx-auto space-y-4">
|
||||
<div>
|
||||
<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}
|
||||
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="w-full text-right">
|
||||
<button
|
||||
type="button"
|
||||
onClick={resendMagicCode}
|
||||
className={`text-xs ${
|
||||
isResendDisabled ? "text-onboarding-text-300" : "text-onboarding-text-200 hover:text-custom-primary-100"
|
||||
}`}
|
||||
disabled={isResendDisabled}
|
||||
>
|
||||
{timer > 0
|
||||
? `Request new code in ${timer}s`
|
||||
: isSubmitting
|
||||
? "Requesting new code..."
|
||||
: "Request new code"}
|
||||
</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-fays"
|
||||
className="border-onboarding-border-100 h-[46px] w-full "
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<Button variant="primary" className="w-full" size="xl" type="submit" loading={isSubmitting}>
|
||||
{isSubmitting ? "Verifying..." : "Next step"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,3 +1,2 @@
|
|||
export * from "./email-code-form";
|
||||
export * from "./email-form";
|
||||
export * from "./root";
|
||||
export * from "./sign-in-form";
|
||||
|
|
|
|||
|
|
@ -1,126 +0,0 @@
|
|||
import React from "react";
|
||||
import Link from "next/link";
|
||||
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-medium 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-5 w-full sm:w-96 mx-auto space-y-4">
|
||||
<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>
|
||||
<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>
|
||||
)}
|
||||
/>
|
||||
<p className="text-xs mt-3 text-onboarding-text-200 pb-2">
|
||||
Whatever you choose now will be your account{"'"}s password
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="primary" className="w-full mt-4" size="xl" type="submit" loading={isSubmitting}>
|
||||
{isSubmitting ? "Submitting..." : "Next step"}
|
||||
</Button>
|
||||
<p className="text-xs text-onboarding-text-200">
|
||||
When you click the button above, you agree with our{" "}
|
||||
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
|
||||
<span className="font-semibold underline">terms and conditions of service.</span>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,63 +1,25 @@
|
|||
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";
|
||||
import { InstanceSetupDone, InstanceSetupSignInForm } from "components/instance";
|
||||
|
||||
export enum EInstanceSetupSteps {
|
||||
EMAIL = "EMAIL",
|
||||
VERIFY_CODE = "VERIFY_CODE",
|
||||
PASSWORD = "PASSWORD",
|
||||
SIGN_IN = "SIGN_IN",
|
||||
DONE = "DONE",
|
||||
}
|
||||
|
||||
export const InstanceSetupFormRoot = () => {
|
||||
// states
|
||||
const [setupStep, setSetupStep] = useState(EInstanceSetupSteps.EMAIL);
|
||||
const [email, setEmail] = useState<string>("");
|
||||
const [setupStep, setSetupStep] = useState(EInstanceSetupSteps.SIGN_IN);
|
||||
|
||||
return (
|
||||
<>
|
||||
{setupStep === EInstanceSetupSteps.DONE ? (
|
||||
<InstanceSetupDone />
|
||||
) : (
|
||||
{setupStep === EInstanceSetupSteps.DONE && <InstanceSetupDone />}
|
||||
{setupStep === EInstanceSetupSteps.SIGN_IN && (
|
||||
<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="bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto">
|
||||
<div className="mx-auto flex flex-col">
|
||||
{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);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<InstanceSetupSignInForm handleNextStep={() => setSetupStep(EInstanceSetupSteps.DONE)} />
|
||||
</div>
|
||||
<LatestFeatureBlock />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { FC } from "react";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
// ui
|
||||
import { Input, Button } from "@plane/ui";
|
||||
// icons
|
||||
|
|
@ -9,37 +11,48 @@ import { AuthService } from "services/auth.service";
|
|||
const authService = new AuthService();
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// helpers
|
||||
import { checkEmailValidity } from "helpers/string.helper";
|
||||
|
||||
export interface InstanceSetupEmailFormValues {
|
||||
interface InstanceSetupEmailFormValues {
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export interface IInstanceSetupEmailForm {
|
||||
handleNextStep: (email: string) => void;
|
||||
}
|
||||
|
||||
export const InstanceSetupEmailForm: FC<IInstanceSetupEmailForm> = (props) => {
|
||||
export const InstanceSetupSignInForm: FC<IInstanceSetupEmailForm> = (props) => {
|
||||
const { handleNextStep } = props;
|
||||
const {
|
||||
user: { fetchCurrentUser },
|
||||
} = useMobxStore();
|
||||
// form info
|
||||
const {
|
||||
control,
|
||||
formState: { errors, isSubmitting },
|
||||
handleSubmit,
|
||||
setValue,
|
||||
reset,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<InstanceSetupEmailFormValues>({
|
||||
defaultValues: {
|
||||
email: "",
|
||||
password: "",
|
||||
},
|
||||
});
|
||||
// hooks
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const handleEmailFormSubmit = (formValues: InstanceSetupEmailFormValues) =>
|
||||
authService
|
||||
.instanceAdminEmailCode({ email: formValues.email })
|
||||
.then(() => {
|
||||
reset();
|
||||
const handleFormSubmit = async (formValues: InstanceSetupEmailFormValues) => {
|
||||
const payload = {
|
||||
email: formValues.email,
|
||||
password: formValues.password,
|
||||
};
|
||||
|
||||
await authService
|
||||
.instanceAdminSignIn(payload)
|
||||
.then(async () => {
|
||||
await fetchCurrentUser();
|
||||
handleNextStep(formValues.email);
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -49,9 +62,10 @@ export const InstanceSetupEmailForm: FC<IInstanceSetupEmailForm> = (props) => {
|
|||
message: err?.error ?? "Something went wrong. Please try again.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handleEmailFormSubmit)}>
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)}>
|
||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||
Let{"'"}s secure your instance
|
||||
</h1>
|
||||
|
|
@ -66,13 +80,10 @@ export const InstanceSetupEmailForm: FC<IInstanceSetupEmailForm> = (props) => {
|
|||
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",
|
||||
validate: (value) => checkEmailValidity(value) || "Email is invalid",
|
||||
}}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className={`flex items-center relative rounded-md bg-onboarding-background-200`}>
|
||||
<div className="flex items-center relative rounded-md bg-onboarding-background-200">
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
|
|
@ -80,7 +91,7 @@ export const InstanceSetupEmailForm: FC<IInstanceSetupEmailForm> = (props) => {
|
|||
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`}
|
||||
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12"
|
||||
/>
|
||||
{value.length > 0 && (
|
||||
<XCircle
|
||||
|
|
@ -91,11 +102,28 @@ export const InstanceSetupEmailForm: FC<IInstanceSetupEmailForm> = (props) => {
|
|||
</div>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="password"
|
||||
rules={{
|
||||
required: "Password is required",
|
||||
}}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<Input
|
||||
type="password"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
hasError={Boolean(errors.password)}
|
||||
placeholder="Enter password"
|
||||
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12 !bg-onboarding-background-200"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<p className="text-xs text-custom-text-200 pb-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" size="xl" type="submit" loading={isSubmitting}>
|
||||
{isSubmitting ? "Sending code..." : "Send unique code"}
|
||||
{isSubmitting ? "Signing in..." : "Sign in"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
Loading…
Add table
Add a link
Reference in a new issue