forked from github/plane
chore: updated plane deploy sign-in workflows for cloud and self-hosted instances (#2999)
* chore: deploy onboarding workflow * chore: sign in workflow improvement * fix: build error
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
0fc273aca6
commit
0e1ee80512
@ -1,218 +0,0 @@
|
|||||||
import React, { useEffect, useState, useCallback } from "react";
|
|
||||||
|
|
||||||
// react hook form
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
|
|
||||||
// services
|
|
||||||
import authenticationService from "services/authentication.service";
|
|
||||||
|
|
||||||
// hooks
|
|
||||||
import useToast from "hooks/use-toast";
|
|
||||||
import useTimer from "hooks/use-timer";
|
|
||||||
|
|
||||||
// ui
|
|
||||||
import { Button, Input } from "@plane/ui";
|
|
||||||
|
|
||||||
// types
|
|
||||||
type EmailCodeFormValues = {
|
|
||||||
email: string;
|
|
||||||
key?: string;
|
|
||||||
token?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const EmailCodeForm = ({ handleSignIn }: any) => {
|
|
||||||
const [codeSent, setCodeSent] = useState(false);
|
|
||||||
const [codeResent, setCodeResent] = useState(false);
|
|
||||||
const [isCodeResending, setIsCodeResending] = useState(false);
|
|
||||||
const [errorResendingCode, setErrorResendingCode] = useState(false);
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
|
||||||
|
|
||||||
const { setToastAlert } = useToast();
|
|
||||||
const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer();
|
|
||||||
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
setError,
|
|
||||||
setValue,
|
|
||||||
getValues,
|
|
||||||
watch,
|
|
||||||
formState: { errors, isSubmitting, isValid, isDirty },
|
|
||||||
} = useForm<EmailCodeFormValues>({
|
|
||||||
defaultValues: {
|
|
||||||
email: "",
|
|
||||||
key: "",
|
|
||||||
token: "",
|
|
||||||
},
|
|
||||||
mode: "onChange",
|
|
||||||
reValidateMode: "onChange",
|
|
||||||
});
|
|
||||||
|
|
||||||
const isResendDisabled = resendCodeTimer > 0 || isCodeResending || isSubmitting || errorResendingCode;
|
|
||||||
|
|
||||||
const onSubmit = useCallback(
|
|
||||||
async ({ email }: EmailCodeFormValues) => {
|
|
||||||
setErrorResendingCode(false);
|
|
||||||
await authenticationService
|
|
||||||
.emailCode({ email })
|
|
||||||
.then((res) => {
|
|
||||||
setValue("key", res.key);
|
|
||||||
setCodeSent(true);
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
setErrorResendingCode(true);
|
|
||||||
setToastAlert({
|
|
||||||
title: "Oops!",
|
|
||||||
type: "error",
|
|
||||||
message: err?.error,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
[setToastAlert, setValue]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleSignin = async (formData: EmailCodeFormValues) => {
|
|
||||||
setIsLoading(true);
|
|
||||||
await authenticationService
|
|
||||||
.magicSignIn(formData)
|
|
||||||
.then((response) => {
|
|
||||||
setIsLoading(false);
|
|
||||||
handleSignIn(response);
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
setIsLoading(false);
|
|
||||||
setToastAlert({
|
|
||||||
title: "Oops!",
|
|
||||||
type: "error",
|
|
||||||
message: error?.response?.data?.error ?? "Enter the correct code to sign in",
|
|
||||||
});
|
|
||||||
setError("token" as keyof EmailCodeFormValues, {
|
|
||||||
type: "manual",
|
|
||||||
message: error?.error,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const emailOld = getValues("email");
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setErrorResendingCode(false);
|
|
||||||
}, [emailOld]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const submitForm = (e: KeyboardEvent) => {
|
|
||||||
if (!codeSent && e.key === "Enter") {
|
|
||||||
e.preventDefault();
|
|
||||||
handleSubmit(onSubmit)().then(() => {
|
|
||||||
setResendCodeTimer(30);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!codeSent) {
|
|
||||||
window.addEventListener("keydown", submitForm);
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener("keydown", submitForm);
|
|
||||||
};
|
|
||||||
}, [handleSubmit, codeSent, onSubmit, setResendCodeTimer]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{(codeSent || codeResent) && (
|
|
||||||
<p className="text-center mt-4">
|
|
||||||
We have sent the sign in code.
|
|
||||||
<br />
|
|
||||||
Please check your inbox at <span className="font-medium">{watch("email")}</span>
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
<form className="space-y-4 mt-10 sm:w-[360px] mx-auto">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Input
|
|
||||||
id="email"
|
|
||||||
type="email"
|
|
||||||
placeholder="Enter your email address..."
|
|
||||||
className="border-custom-border-300 h-[46px] w-full"
|
|
||||||
{...register("email", {
|
|
||||||
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",
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
{errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{codeSent && (
|
|
||||||
<>
|
|
||||||
<Input
|
|
||||||
id="token"
|
|
||||||
type="token"
|
|
||||||
{...register("token", {
|
|
||||||
required: "Code is required",
|
|
||||||
})}
|
|
||||||
placeholder="Enter code..."
|
|
||||||
className="border-custom-border-300 h-[46px] w-full"
|
|
||||||
/>
|
|
||||||
{errors.token && <div className="text-sm text-red-500">{errors.token.message}</div>}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`flex w-full justify-end text-xs outline-none ${
|
|
||||||
isResendDisabled ? "cursor-default text-custom-text-200" : "cursor-pointer text-custom-primary-100"
|
|
||||||
} `}
|
|
||||||
onClick={() => {
|
|
||||||
setIsCodeResending(true);
|
|
||||||
onSubmit({ email: getValues("email") }).then(() => {
|
|
||||||
setCodeResent(true);
|
|
||||||
setIsCodeResending(false);
|
|
||||||
setResendCodeTimer(30);
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
disabled={isResendDisabled}
|
|
||||||
>
|
|
||||||
{resendCodeTimer > 0 ? (
|
|
||||||
<span className="text-right">Request new code in {resendCodeTimer} seconds</span>
|
|
||||||
) : isCodeResending ? (
|
|
||||||
"Sending new code..."
|
|
||||||
) : errorResendingCode ? (
|
|
||||||
"Please try again later"
|
|
||||||
) : (
|
|
||||||
<span className="font-medium">Resend code</span>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{codeSent ? (
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
type="submit"
|
|
||||||
className="w-full"
|
|
||||||
size="xl"
|
|
||||||
onClick={handleSubmit(handleSignin)}
|
|
||||||
disabled={!isValid && isDirty}
|
|
||||||
loading={isLoading}
|
|
||||||
>
|
|
||||||
{isLoading ? "Signing in..." : "Sign in"}
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
className="w-full"
|
|
||||||
size="xl"
|
|
||||||
onClick={() => {
|
|
||||||
handleSubmit(onSubmit)().then(() => {
|
|
||||||
setResendCodeTimer(30);
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
disabled={!isValid && isDirty}
|
|
||||||
loading={isSubmitting}
|
|
||||||
>
|
|
||||||
{isSubmitting ? "Sending code..." : "Send sign in code"}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</form>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,118 +0,0 @@
|
|||||||
import React, { useState } from "react";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
// components
|
|
||||||
import { EmailResetPasswordForm } from "./email-reset-password-form";
|
|
||||||
// ui
|
|
||||||
import { Button, Input } from "@plane/ui";
|
|
||||||
|
|
||||||
// types
|
|
||||||
type EmailPasswordFormValues = {
|
|
||||||
email: string;
|
|
||||||
password?: string;
|
|
||||||
medium?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
|
|
||||||
const [isResettingPassword, setIsResettingPassword] = useState(false);
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const isSignUpPage = router.pathname === "/sign-up";
|
|
||||||
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors, isSubmitting, isValid, isDirty },
|
|
||||||
} = useForm<EmailPasswordFormValues>({
|
|
||||||
defaultValues: {
|
|
||||||
email: "",
|
|
||||||
password: "",
|
|
||||||
medium: "email",
|
|
||||||
},
|
|
||||||
mode: "onChange",
|
|
||||||
reValidateMode: "onChange",
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
|
|
||||||
{isResettingPassword ? "Reset your password" : isSignUpPage ? "Sign up on Plane" : "Sign in to Plane"}
|
|
||||||
</h1>
|
|
||||||
{isResettingPassword ? (
|
|
||||||
<EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
|
|
||||||
) : (
|
|
||||||
<form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Input
|
|
||||||
id="email"
|
|
||||||
type="email"
|
|
||||||
{...register("email", {
|
|
||||||
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",
|
|
||||||
})}
|
|
||||||
placeholder="Enter your email address..."
|
|
||||||
className="border-custom-border-300 h-[46px] w-full"
|
|
||||||
/>
|
|
||||||
{errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Input
|
|
||||||
id="password"
|
|
||||||
type="password"
|
|
||||||
{...register("password", {
|
|
||||||
required: "Password is required",
|
|
||||||
})}
|
|
||||||
placeholder="Enter your password..."
|
|
||||||
className="border-custom-border-300 h-[46px] w-full"
|
|
||||||
/>
|
|
||||||
{errors.password && <div className="text-sm text-red-500">{errors.password.message}</div>}
|
|
||||||
</div>
|
|
||||||
<div className="text-right text-xs">
|
|
||||||
{isSignUpPage ? (
|
|
||||||
<Link href="/">
|
|
||||||
<span className="text-custom-text-200 hover:text-custom-primary-100">
|
|
||||||
Already have an account? Sign in.
|
|
||||||
</span>
|
|
||||||
</Link>
|
|
||||||
) : (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setIsResettingPassword(true)}
|
|
||||||
className="text-custom-text-200 hover:text-custom-primary-100"
|
|
||||||
>
|
|
||||||
Forgot your password?
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
type="submit"
|
|
||||||
size="xl"
|
|
||||||
className="w-full"
|
|
||||||
disabled={!isValid && isDirty}
|
|
||||||
loading={isSubmitting}
|
|
||||||
>
|
|
||||||
{isSignUpPage ? (isSubmitting ? "Signing up..." : "Sign up") : isSubmitting ? "Signing in..." : "Sign in"}
|
|
||||||
</Button>
|
|
||||||
{!isSignUpPage && (
|
|
||||||
<Link href="/sign-up">
|
|
||||||
<span className="block text-custom-text-200 hover:text-custom-primary-100 text-xs mt-4">
|
|
||||||
Don{"'"}t have an account? Sign up.
|
|
||||||
</span>
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
// ui
|
|
||||||
import { Button, Input } from "@plane/ui";
|
|
||||||
// types
|
|
||||||
type Props = {
|
|
||||||
setIsResettingPassword: React.Dispatch<React.SetStateAction<boolean>>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword }) => {
|
|
||||||
// const { setToastAlert } = useToast();
|
|
||||||
|
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors, isSubmitting },
|
|
||||||
} = useForm({
|
|
||||||
defaultValues: {
|
|
||||||
email: "",
|
|
||||||
},
|
|
||||||
mode: "onChange",
|
|
||||||
reValidateMode: "onChange",
|
|
||||||
});
|
|
||||||
|
|
||||||
const forgotPassword = async (formData: any) => {
|
|
||||||
// const payload = {
|
|
||||||
// email: formData.email,
|
|
||||||
// };
|
|
||||||
// await userService
|
|
||||||
// .forgotPassword(payload)
|
|
||||||
// .then(() =>
|
|
||||||
// setToastAlert({
|
|
||||||
// type: "success",
|
|
||||||
// title: "Success!",
|
|
||||||
// message: "Password reset link has been sent to your email address.",
|
|
||||||
// })
|
|
||||||
// )
|
|
||||||
// .catch((err) => {
|
|
||||||
// if (err.status === 400)
|
|
||||||
// setToastAlert({
|
|
||||||
// type: "error",
|
|
||||||
// title: "Error!",
|
|
||||||
// message: "Please check the Email ID entered.",
|
|
||||||
// });
|
|
||||||
// else
|
|
||||||
// setToastAlert({
|
|
||||||
// type: "error",
|
|
||||||
// title: "Error!",
|
|
||||||
// message: "Something went wrong. Please try again.",
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form className="mx-auto mt-10 w-full space-y-4 sm:w-[360px]" onSubmit={handleSubmit(forgotPassword)}>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Input
|
|
||||||
id="email"
|
|
||||||
type="email"
|
|
||||||
{...register("email", {
|
|
||||||
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",
|
|
||||||
})}
|
|
||||||
placeholder="Enter registered email address.."
|
|
||||||
className="h-[46px] border-custom-border-300 w-full"
|
|
||||||
/>
|
|
||||||
{errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
|
|
||||||
</div>
|
|
||||||
<div className="mt-5 flex flex-col-reverse items-center gap-2 sm:flex-row">
|
|
||||||
<Button variant="neutral-primary" className="w-full" size="xl" onClick={() => setIsResettingPassword(false)}>
|
|
||||||
Go Back
|
|
||||||
</Button>
|
|
||||||
<Button variant="primary" className="w-full" size="xl" type="submit" loading={isSubmitting}>
|
|
||||||
{isSubmitting ? "Sending link..." : "Send reset link"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
@ -38,7 +38,7 @@ export const GithubLoginButton: FC<GithubLoginButtonProps> = (props) => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full flex justify-center items-center">
|
<div className="w-full">
|
||||||
<Link
|
<Link
|
||||||
className="w-full"
|
className="w-full"
|
||||||
href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
|
href={`https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${loginCallBackURL}&scope=read:user,user:email`}
|
||||||
|
|||||||
@ -29,9 +29,8 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
|
|||||||
theme: "outline",
|
theme: "outline",
|
||||||
size: "large",
|
size: "large",
|
||||||
logo_alignment: "center",
|
logo_alignment: "center",
|
||||||
width: 360,
|
|
||||||
text: "signin_with",
|
text: "signin_with",
|
||||||
} as any // customization attributes
|
} as GsiButtonConfiguration // customization attributes
|
||||||
);
|
);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
@ -40,7 +39,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
|
|||||||
(window as any)?.google?.accounts.id.prompt(); // also display the One Tap dialog
|
(window as any)?.google?.accounts.id.prompt(); // also display the One Tap dialog
|
||||||
|
|
||||||
setGsiScriptLoaded(true);
|
setGsiScriptLoaded(true);
|
||||||
}, [handleSignIn, gsiScriptLoaded]);
|
}, [handleSignIn, gsiScriptLoaded, clientId]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if ((window as any)?.google?.accounts?.id) {
|
if ((window as any)?.google?.accounts?.id) {
|
||||||
|
|||||||
@ -1,8 +1,5 @@
|
|||||||
export * from "./email-code-form";
|
|
||||||
export * from "./email-password-form";
|
|
||||||
export * from "./email-reset-password-form";
|
|
||||||
export * from "./github-login-button";
|
export * from "./github-login-button";
|
||||||
export * from "./google-login";
|
export * from "./google-login";
|
||||||
export * from "./onboarding-form";
|
export * from "./onboarding-form";
|
||||||
export * from "./sign-in";
|
|
||||||
export * from "./user-logged-in";
|
export * from "./user-logged-in";
|
||||||
|
export * from "./sign-in-forms";
|
||||||
|
|||||||
@ -11,7 +11,7 @@ import { USER_ROLES } from "constants/workspace";
|
|||||||
// hooks
|
// hooks
|
||||||
import useToast from "hooks/use-toast";
|
import useToast from "hooks/use-toast";
|
||||||
// services
|
// services
|
||||||
import UserService from "services/user.service";
|
import { UserService } from "services/user.service";
|
||||||
// ui
|
// ui
|
||||||
import { Button, Input } from "@plane/ui";
|
import { Button, Input } from "@plane/ui";
|
||||||
|
|
||||||
@ -93,6 +93,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
|
|||||||
<Input
|
<Input
|
||||||
id="firstName"
|
id="firstName"
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
|
className="w-full"
|
||||||
placeholder="Enter your first name..."
|
placeholder="Enter your first name..."
|
||||||
{...register("first_name", {
|
{...register("first_name", {
|
||||||
required: "First name is required",
|
required: "First name is required",
|
||||||
@ -105,6 +106,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
|
|||||||
<Input
|
<Input
|
||||||
id="lastName"
|
id="lastName"
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
|
className="w-full"
|
||||||
placeholder="Enter your last name..."
|
placeholder="Enter your last name..."
|
||||||
{...register("last_name", {
|
{...register("last_name", {
|
||||||
required: "Last name is required",
|
required: "Last name is required",
|
||||||
@ -173,7 +175,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button variant="primary" type="submit" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
|
<Button variant="primary" type="submit" size="xl" disabled={!isValid} loading={isSubmitting}>
|
||||||
{isSubmitting ? "Updating..." : "Continue"}
|
{isSubmitting ? "Updating..." : "Continue"}
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
141
space/components/accounts/sign-in-forms/create-password.tsx
Normal file
141
space/components/accounts/sign-in-forms/create-password.tsx
Normal file
@ -0,0 +1,141 @@
|
|||||||
|
import React, { useEffect } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Controller, useForm } from "react-hook-form";
|
||||||
|
// services
|
||||||
|
import { AuthService } from "services/authentication.service";
|
||||||
|
// hooks
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
// ui
|
||||||
|
import { Button, Input } from "@plane/ui";
|
||||||
|
// helpers
|
||||||
|
import { checkEmailValidity } from "helpers/string.helper";
|
||||||
|
// constants
|
||||||
|
import { ESignInSteps } from "components/accounts";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
email: string;
|
||||||
|
handleStepChange: (step: ESignInSteps) => void;
|
||||||
|
handleSignInRedirection: () => Promise<void>;
|
||||||
|
isOnboarded: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
type TCreatePasswordFormValues = {
|
||||||
|
email: string;
|
||||||
|
password: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultValues: TCreatePasswordFormValues = {
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
// services
|
||||||
|
const authService = new AuthService();
|
||||||
|
|
||||||
|
export const CreatePasswordForm: React.FC<Props> = (props) => {
|
||||||
|
const { email, handleSignInRedirection, isOnboarded } = props;
|
||||||
|
// toast alert
|
||||||
|
const { setToastAlert } = useToast();
|
||||||
|
// form info
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
formState: { errors, isSubmitting, isValid },
|
||||||
|
setFocus,
|
||||||
|
handleSubmit,
|
||||||
|
} = useForm<TCreatePasswordFormValues>({
|
||||||
|
defaultValues: {
|
||||||
|
...defaultValues,
|
||||||
|
email,
|
||||||
|
},
|
||||||
|
mode: "onChange",
|
||||||
|
reValidateMode: "onChange",
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleCreatePassword = async (formData: TCreatePasswordFormValues) => {
|
||||||
|
const payload = {
|
||||||
|
password: formData.password,
|
||||||
|
};
|
||||||
|
|
||||||
|
await authService
|
||||||
|
.setPassword(payload)
|
||||||
|
.then(async () => {
|
||||||
|
setToastAlert({
|
||||||
|
type: "success",
|
||||||
|
title: "Success!",
|
||||||
|
message: "Password created successfully.",
|
||||||
|
});
|
||||||
|
await handleSignInRedirection();
|
||||||
|
})
|
||||||
|
.catch((err) =>
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Error!",
|
||||||
|
message: err?.error ?? "Something went wrong. Please try again.",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setFocus("password");
|
||||||
|
}, [setFocus]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||||
|
Get on your flight deck
|
||||||
|
</h1>
|
||||||
|
<form onSubmit={handleSubmit(handleCreatePassword)} className="mt-11 sm:w-96 mx-auto space-y-4">
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="email"
|
||||||
|
rules={{
|
||||||
|
required: "Email is required",
|
||||||
|
validate: (value) => checkEmailValidity(value) || "Email is invalid",
|
||||||
|
}}
|
||||||
|
render={({ field: { value, onChange, ref } }) => (
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
ref={ref}
|
||||||
|
hasError={Boolean(errors.email)}
|
||||||
|
placeholder="orville.wright@firstflight.com"
|
||||||
|
className="w-full h-[46px] text-onboarding-text-400 border border-onboarding-border-100 pr-12 !bg-onboarding-background-200"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="password"
|
||||||
|
rules={{
|
||||||
|
required: "Password is required",
|
||||||
|
}}
|
||||||
|
render={({ field: { value, onChange, ref } }) => (
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
ref={ref}
|
||||||
|
hasError={Boolean(errors.password)}
|
||||||
|
placeholder="Choose password"
|
||||||
|
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12 !bg-onboarding-background-200"
|
||||||
|
minLength={8}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
|
||||||
|
{isOnboarded ? "Go to board" : "Set up profile"}
|
||||||
|
</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>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
122
space/components/accounts/sign-in-forms/email-form.tsx
Normal file
122
space/components/accounts/sign-in-forms/email-form.tsx
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
import React, { useEffect } from "react";
|
||||||
|
import { Controller, useForm } from "react-hook-form";
|
||||||
|
import { XCircle } from "lucide-react";
|
||||||
|
// services
|
||||||
|
import { AuthService } from "services/authentication.service";
|
||||||
|
// hooks
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
// ui
|
||||||
|
import { Button, Input } from "@plane/ui";
|
||||||
|
// helpers
|
||||||
|
import { checkEmailValidity } from "helpers/string.helper";
|
||||||
|
// types
|
||||||
|
import { IEmailCheckData } from "types/auth";
|
||||||
|
// constants
|
||||||
|
import { ESignInSteps } from "components/accounts";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
handleStepChange: (step: ESignInSteps) => void;
|
||||||
|
updateEmail: (email: string) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
type TEmailFormValues = {
|
||||||
|
email: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const authService = new AuthService();
|
||||||
|
|
||||||
|
export const EmailForm: React.FC<Props> = (props) => {
|
||||||
|
const { handleStepChange, updateEmail } = props;
|
||||||
|
|
||||||
|
const { setToastAlert } = useToast();
|
||||||
|
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
formState: { errors, isSubmitting, isValid },
|
||||||
|
handleSubmit,
|
||||||
|
setFocus,
|
||||||
|
} = useForm<TEmailFormValues>({
|
||||||
|
defaultValues: {
|
||||||
|
email: "",
|
||||||
|
},
|
||||||
|
mode: "onChange",
|
||||||
|
reValidateMode: "onChange",
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleFormSubmit = async (data: TEmailFormValues) => {
|
||||||
|
const payload: IEmailCheckData = {
|
||||||
|
email: data.email,
|
||||||
|
};
|
||||||
|
|
||||||
|
// update the global email state
|
||||||
|
updateEmail(data.email);
|
||||||
|
|
||||||
|
await authService
|
||||||
|
.emailCheck(payload)
|
||||||
|
.then((res) => {
|
||||||
|
// if the password has been autoset, send the user to magic sign-in
|
||||||
|
if (res.is_password_autoset) handleStepChange(ESignInSteps.UNIQUE_CODE);
|
||||||
|
// if the password has not been autoset, send them to password sign-in
|
||||||
|
else handleStepChange(ESignInSteps.PASSWORD);
|
||||||
|
})
|
||||||
|
.catch((err) =>
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Error!",
|
||||||
|
message: err?.error ?? "Something went wrong. Please try again.",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setFocus("email");
|
||||||
|
}, [setFocus]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||||
|
Get on your flight deck
|
||||||
|
</h1>
|
||||||
|
<p className="text-center text-sm text-onboarding-text-200 mt-2.5">
|
||||||
|
Create or join a workspace. Start with your e-mail.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit(handleFormSubmit)} className="mt-8 sm:w-96 mx-auto space-y-4">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="email"
|
||||||
|
rules={{
|
||||||
|
required: "Email is required",
|
||||||
|
validate: (value) => checkEmailValidity(value) || "Email is invalid",
|
||||||
|
}}
|
||||||
|
render={({ field: { value, onChange, ref } }) => (
|
||||||
|
<div className="flex items-center relative rounded-md bg-onboarding-background-200">
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
ref={ref}
|
||||||
|
hasError={Boolean(errors.email)}
|
||||||
|
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={() => onChange("")}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
|
||||||
|
Continue
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
9
space/components/accounts/sign-in-forms/index.ts
Normal file
9
space/components/accounts/sign-in-forms/index.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
export * from "./create-password";
|
||||||
|
export * from "./email-form";
|
||||||
|
export * from "./o-auth-options";
|
||||||
|
export * from "./optional-set-password";
|
||||||
|
export * from "./password";
|
||||||
|
export * from "./root";
|
||||||
|
export * from "./self-hosted-sign-in";
|
||||||
|
export * from "./set-password-link";
|
||||||
|
export * from "./unique-code";
|
||||||
86
space/components/accounts/sign-in-forms/o-auth-options.tsx
Normal file
86
space/components/accounts/sign-in-forms/o-auth-options.tsx
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
import useSWR from "swr";
|
||||||
|
|
||||||
|
import { observer } from "mobx-react-lite";
|
||||||
|
// services
|
||||||
|
import { AuthService } from "services/authentication.service";
|
||||||
|
import { AppConfigService } from "services/app-config.service";
|
||||||
|
// hooks
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
// components
|
||||||
|
import { GithubLoginButton, GoogleLoginButton } from "components/accounts";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
handleSignInRedirection: () => Promise<void>;
|
||||||
|
};
|
||||||
|
|
||||||
|
// services
|
||||||
|
const authService = new AuthService();
|
||||||
|
const appConfig = new AppConfigService();
|
||||||
|
|
||||||
|
export const OAuthOptions: React.FC<Props> = observer((props) => {
|
||||||
|
const { handleSignInRedirection } = props;
|
||||||
|
// toast alert
|
||||||
|
const { setToastAlert } = useToast();
|
||||||
|
|
||||||
|
const { data: envConfig } = useSWR("APP_CONFIG", () => appConfig.envConfig());
|
||||||
|
|
||||||
|
const handleGoogleSignIn = async ({ clientId, credential }: any) => {
|
||||||
|
try {
|
||||||
|
if (clientId && credential) {
|
||||||
|
const socialAuthPayload = {
|
||||||
|
medium: "google",
|
||||||
|
credential,
|
||||||
|
clientId,
|
||||||
|
};
|
||||||
|
const response = await authService.socialAuth(socialAuthPayload);
|
||||||
|
|
||||||
|
if (response) handleSignInRedirection();
|
||||||
|
} else throw Error("Cant find credentials");
|
||||||
|
} catch (err: any) {
|
||||||
|
setToastAlert({
|
||||||
|
title: "Error signing in!",
|
||||||
|
type: "error",
|
||||||
|
message: err?.error || "Something went wrong. Please try again later or contact the support team.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGitHubSignIn = async (credential: string) => {
|
||||||
|
try {
|
||||||
|
if (envConfig && envConfig.github_client_id && credential) {
|
||||||
|
const socialAuthPayload = {
|
||||||
|
medium: "github",
|
||||||
|
credential,
|
||||||
|
clientId: envConfig.github_client_id,
|
||||||
|
};
|
||||||
|
const response = await authService.socialAuth(socialAuthPayload);
|
||||||
|
|
||||||
|
if (response) handleSignInRedirection();
|
||||||
|
} else throw Error("Cant find credentials");
|
||||||
|
} catch (err: any) {
|
||||||
|
setToastAlert({
|
||||||
|
title: "Error signing in!",
|
||||||
|
type: "error",
|
||||||
|
message: err?.error || "Something went wrong. Please try again later or contact the support team.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex sm:w-96 items-center mt-4 mx-auto">
|
||||||
|
<hr className="border-onboarding-border-100 w-full" />
|
||||||
|
<p className="text-center text-sm text-onboarding-text-400 mx-3 flex-shrink-0">Or continue with</p>
|
||||||
|
<hr className="border-onboarding-border-100 w-full" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col sm:flex-row items-center gap-2 pt-7 sm:w-96 mx-auto overflow-hidden">
|
||||||
|
{envConfig?.google_client_id && (
|
||||||
|
<GoogleLoginButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
|
||||||
|
)}
|
||||||
|
{envConfig?.github_client_id && (
|
||||||
|
<GithubLoginButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Controller, useForm } from "react-hook-form";
|
||||||
|
// ui
|
||||||
|
import { Button, Input } from "@plane/ui";
|
||||||
|
// helpers
|
||||||
|
import { checkEmailValidity } from "helpers/string.helper";
|
||||||
|
// constants
|
||||||
|
import { ESignInSteps } from "components/accounts";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
email: string;
|
||||||
|
handleStepChange: (step: ESignInSteps) => void;
|
||||||
|
handleSignInRedirection: () => Promise<void>;
|
||||||
|
isOnboarded: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
|
||||||
|
const { email, handleStepChange, handleSignInRedirection, isOnboarded } = props;
|
||||||
|
// states
|
||||||
|
const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false);
|
||||||
|
// form info
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
formState: { errors, isValid },
|
||||||
|
} = useForm({
|
||||||
|
defaultValues: {
|
||||||
|
email,
|
||||||
|
},
|
||||||
|
mode: "onChange",
|
||||||
|
reValidateMode: "onChange",
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleGoToWorkspace = async () => {
|
||||||
|
setIsGoingToWorkspace(true);
|
||||||
|
|
||||||
|
await handleSignInRedirection().finally(() => setIsGoingToWorkspace(false));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">Set a password</h1>
|
||||||
|
<p className="text-center text-sm text-onboarding-text-200 px-20 mt-2.5">
|
||||||
|
If you{"'"}d like to do away with codes, set a password here.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form className="mt-5 sm:w-96 mx-auto space-y-4">
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="email"
|
||||||
|
rules={{
|
||||||
|
required: "Email is required",
|
||||||
|
validate: (value) => checkEmailValidity(value) || "Email is invalid",
|
||||||
|
}}
|
||||||
|
render={({ field: { value, onChange, ref } }) => (
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
ref={ref}
|
||||||
|
hasError={Boolean(errors.email)}
|
||||||
|
placeholder="orville.wright@firstflight.com"
|
||||||
|
className="w-full h-[46px] text-onboarding-text-400 border border-onboarding-border-100 pr-12"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="grid grid-cols-2 gap-2.5">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="primary"
|
||||||
|
onClick={() => handleStepChange(ESignInSteps.CREATE_PASSWORD)}
|
||||||
|
className="w-full"
|
||||||
|
size="xl"
|
||||||
|
disabled={!isValid}
|
||||||
|
>
|
||||||
|
Create password
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline-primary"
|
||||||
|
className="w-full"
|
||||||
|
size="xl"
|
||||||
|
onClick={handleGoToWorkspace}
|
||||||
|
disabled={!isValid}
|
||||||
|
loading={isGoingToWorkspace}
|
||||||
|
>
|
||||||
|
{isOnboarded ? "Go to board" : "Set up profile"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-onboarding-text-200">
|
||||||
|
When you click{" "}
|
||||||
|
<span className="text-custom-primary-100">{isOnboarded ? "Go to board" : "Set up profile"}</span> 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>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
233
space/components/accounts/sign-in-forms/password.tsx
Normal file
233
space/components/accounts/sign-in-forms/password.tsx
Normal file
@ -0,0 +1,233 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Controller, useForm } from "react-hook-form";
|
||||||
|
import { XCircle } from "lucide-react";
|
||||||
|
// services
|
||||||
|
import { AuthService } from "services/authentication.service";
|
||||||
|
// hooks
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
// ui
|
||||||
|
import { Button, Input } from "@plane/ui";
|
||||||
|
// helpers
|
||||||
|
import { checkEmailValidity } from "helpers/string.helper";
|
||||||
|
// types
|
||||||
|
import { IPasswordSignInData } from "types/auth";
|
||||||
|
// constants
|
||||||
|
import { ESignInSteps } from "components/accounts";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
email: string;
|
||||||
|
updateEmail: (email: string) => void;
|
||||||
|
handleStepChange: (step: ESignInSteps) => void;
|
||||||
|
handleSignInRedirection: () => Promise<void>;
|
||||||
|
};
|
||||||
|
|
||||||
|
type TPasswordFormValues = {
|
||||||
|
email: string;
|
||||||
|
password: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultValues: TPasswordFormValues = {
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
const authService = new AuthService();
|
||||||
|
|
||||||
|
export const PasswordForm: React.FC<Props> = (props) => {
|
||||||
|
const { email, updateEmail, handleStepChange, handleSignInRedirection } = props;
|
||||||
|
// states
|
||||||
|
const [isSendingUniqueCode, setIsSendingUniqueCode] = useState(false);
|
||||||
|
const [isSendingResetPasswordLink, setIsSendingResetPasswordLink] = useState(false);
|
||||||
|
// toast alert
|
||||||
|
const { setToastAlert } = useToast();
|
||||||
|
// form info
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
formState: { dirtyFields, errors, isSubmitting, isValid },
|
||||||
|
getValues,
|
||||||
|
handleSubmit,
|
||||||
|
setError,
|
||||||
|
setFocus,
|
||||||
|
} = useForm<TPasswordFormValues>({
|
||||||
|
defaultValues: {
|
||||||
|
...defaultValues,
|
||||||
|
email,
|
||||||
|
},
|
||||||
|
mode: "onChange",
|
||||||
|
reValidateMode: "onChange",
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleFormSubmit = async (formData: TPasswordFormValues) => {
|
||||||
|
updateEmail(formData.email);
|
||||||
|
|
||||||
|
const payload: IPasswordSignInData = {
|
||||||
|
email: formData.email,
|
||||||
|
password: formData.password,
|
||||||
|
};
|
||||||
|
|
||||||
|
await authService
|
||||||
|
.passwordSignIn(payload)
|
||||||
|
.then(async () => await handleSignInRedirection())
|
||||||
|
.catch((err) =>
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Error!",
|
||||||
|
message: err?.error ?? "Something went wrong. Please try again.",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleForgotPassword = async () => {
|
||||||
|
const emailFormValue = getValues("email");
|
||||||
|
|
||||||
|
const isEmailValid = checkEmailValidity(emailFormValue);
|
||||||
|
|
||||||
|
if (!isEmailValid) {
|
||||||
|
setError("email", { message: "Email is invalid" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsSendingResetPasswordLink(true);
|
||||||
|
|
||||||
|
authService
|
||||||
|
.sendResetPasswordLink({ email: emailFormValue })
|
||||||
|
.then(() => handleStepChange(ESignInSteps.SET_PASSWORD_LINK))
|
||||||
|
.catch((err) =>
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Error!",
|
||||||
|
message: err?.error ?? "Something went wrong. Please try again.",
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.finally(() => setIsSendingResetPasswordLink(false));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSendUniqueCode = async () => {
|
||||||
|
const emailFormValue = getValues("email");
|
||||||
|
|
||||||
|
const isEmailValid = checkEmailValidity(emailFormValue);
|
||||||
|
|
||||||
|
if (!isEmailValid) {
|
||||||
|
setError("email", { message: "Email is invalid" });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsSendingUniqueCode(true);
|
||||||
|
|
||||||
|
await authService
|
||||||
|
.generateUniqueCode({ email: emailFormValue })
|
||||||
|
.then(() => handleStepChange(ESignInSteps.USE_UNIQUE_CODE_FROM_PASSWORD))
|
||||||
|
.catch((err) =>
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Error!",
|
||||||
|
message: err?.error ?? "Something went wrong. Please try again.",
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.finally(() => setIsSendingUniqueCode(false));
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setFocus("password");
|
||||||
|
}, [setFocus]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||||
|
Get on your flight deck
|
||||||
|
</h1>
|
||||||
|
<form onSubmit={handleSubmit(handleFormSubmit)} className="mt-11 sm:w-96 mx-auto space-y-4">
|
||||||
|
<div>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="email"
|
||||||
|
rules={{
|
||||||
|
required: "Email is required",
|
||||||
|
validate: (value) => checkEmailValidity(value) || "Email is invalid",
|
||||||
|
}}
|
||||||
|
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}
|
||||||
|
hasError={Boolean(errors.email)}
|
||||||
|
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={() => onChange("")}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="password"
|
||||||
|
rules={{
|
||||||
|
required: dirtyFields.email ? false : "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"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="w-full text-right">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleForgotPassword}
|
||||||
|
className={`text-xs font-medium ${
|
||||||
|
isSendingResetPasswordLink ? "text-onboarding-text-300" : "text-custom-primary-100"
|
||||||
|
}`}
|
||||||
|
disabled={isSendingResetPasswordLink}
|
||||||
|
>
|
||||||
|
{isSendingResetPasswordLink ? "Sending link" : "Forgot your password?"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid sm:grid-cols-2 gap-2.5">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
onClick={handleSendUniqueCode}
|
||||||
|
variant="primary"
|
||||||
|
className="w-full"
|
||||||
|
size="xl"
|
||||||
|
loading={isSendingUniqueCode}
|
||||||
|
>
|
||||||
|
{isSendingUniqueCode ? "Sending code" : "Use unique code"}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="outline-primary"
|
||||||
|
className="w-full"
|
||||||
|
size="xl"
|
||||||
|
disabled={!isValid}
|
||||||
|
loading={isSubmitting}
|
||||||
|
>
|
||||||
|
Go to board
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-onboarding-text-200">
|
||||||
|
When you click <span className="text-custom-primary-100">Go to board</span> 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>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
120
space/components/accounts/sign-in-forms/root.tsx
Normal file
120
space/components/accounts/sign-in-forms/root.tsx
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { observer } from "mobx-react-lite";
|
||||||
|
import useSWR from "swr";
|
||||||
|
// hooks
|
||||||
|
import useSignInRedirection from "hooks/use-sign-in-redirection";
|
||||||
|
// services
|
||||||
|
import { AppConfigService } from "services/app-config.service";
|
||||||
|
// components
|
||||||
|
import { LatestFeatureBlock } from "components/common";
|
||||||
|
import {
|
||||||
|
EmailForm,
|
||||||
|
UniqueCodeForm,
|
||||||
|
PasswordForm,
|
||||||
|
SetPasswordLink,
|
||||||
|
OAuthOptions,
|
||||||
|
OptionalSetPasswordForm,
|
||||||
|
CreatePasswordForm,
|
||||||
|
SelfHostedSignInForm,
|
||||||
|
} from "components/accounts";
|
||||||
|
|
||||||
|
export enum ESignInSteps {
|
||||||
|
EMAIL = "EMAIL",
|
||||||
|
PASSWORD = "PASSWORD",
|
||||||
|
SET_PASSWORD_LINK = "SET_PASSWORD_LINK",
|
||||||
|
UNIQUE_CODE = "UNIQUE_CODE",
|
||||||
|
OPTIONAL_SET_PASSWORD = "OPTIONAL_SET_PASSWORD",
|
||||||
|
CREATE_PASSWORD = "CREATE_PASSWORD",
|
||||||
|
USE_UNIQUE_CODE_FROM_PASSWORD = "USE_UNIQUE_CODE_FROM_PASSWORD",
|
||||||
|
}
|
||||||
|
|
||||||
|
const OAUTH_HIDDEN_STEPS = [ESignInSteps.OPTIONAL_SET_PASSWORD, ESignInSteps.CREATE_PASSWORD];
|
||||||
|
|
||||||
|
const appConfig = new AppConfigService();
|
||||||
|
|
||||||
|
export const SignInRoot = observer(() => {
|
||||||
|
// states
|
||||||
|
const [signInStep, setSignInStep] = useState<ESignInSteps>(ESignInSteps.EMAIL);
|
||||||
|
const [email, setEmail] = useState("");
|
||||||
|
const [isOnboarded, setIsOnboarded] = useState(false);
|
||||||
|
// sign in redirection hook
|
||||||
|
const { handleRedirection } = useSignInRedirection();
|
||||||
|
|
||||||
|
const { data: envConfig } = useSWR("APP_CONFIG", () => appConfig.envConfig());
|
||||||
|
|
||||||
|
const isOAuthEnabled = envConfig && (envConfig.google_client_id || envConfig.github_client_id);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="mx-auto flex flex-col">
|
||||||
|
{envConfig?.is_self_managed ? (
|
||||||
|
<SelfHostedSignInForm
|
||||||
|
email={email}
|
||||||
|
updateEmail={(newEmail) => setEmail(newEmail)}
|
||||||
|
handleSignInRedirection={handleRedirection}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{signInStep === ESignInSteps.EMAIL && (
|
||||||
|
<EmailForm
|
||||||
|
handleStepChange={(step) => setSignInStep(step)}
|
||||||
|
updateEmail={(newEmail) => setEmail(newEmail)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{signInStep === ESignInSteps.PASSWORD && (
|
||||||
|
<PasswordForm
|
||||||
|
email={email}
|
||||||
|
updateEmail={(newEmail) => setEmail(newEmail)}
|
||||||
|
handleStepChange={(step) => setSignInStep(step)}
|
||||||
|
handleSignInRedirection={handleRedirection}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{signInStep === ESignInSteps.SET_PASSWORD_LINK && (
|
||||||
|
<SetPasswordLink email={email} updateEmail={(newEmail) => setEmail(newEmail)} />
|
||||||
|
)}
|
||||||
|
{signInStep === ESignInSteps.USE_UNIQUE_CODE_FROM_PASSWORD && (
|
||||||
|
<UniqueCodeForm
|
||||||
|
email={email}
|
||||||
|
updateEmail={(newEmail) => setEmail(newEmail)}
|
||||||
|
handleStepChange={(step) => setSignInStep(step)}
|
||||||
|
handleSignInRedirection={handleRedirection}
|
||||||
|
submitButtonLabel="Go to board"
|
||||||
|
showTermsAndConditions
|
||||||
|
updateUserOnboardingStatus={(value) => setIsOnboarded(value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{signInStep === ESignInSteps.UNIQUE_CODE && (
|
||||||
|
<UniqueCodeForm
|
||||||
|
email={email}
|
||||||
|
updateEmail={(newEmail) => setEmail(newEmail)}
|
||||||
|
handleStepChange={(step) => setSignInStep(step)}
|
||||||
|
handleSignInRedirection={handleRedirection}
|
||||||
|
updateUserOnboardingStatus={(value) => setIsOnboarded(value)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{signInStep === ESignInSteps.OPTIONAL_SET_PASSWORD && (
|
||||||
|
<OptionalSetPasswordForm
|
||||||
|
email={email}
|
||||||
|
handleStepChange={(step) => setSignInStep(step)}
|
||||||
|
handleSignInRedirection={handleRedirection}
|
||||||
|
isOnboarded={isOnboarded}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{signInStep === ESignInSteps.CREATE_PASSWORD && (
|
||||||
|
<CreatePasswordForm
|
||||||
|
email={email}
|
||||||
|
handleStepChange={(step) => setSignInStep(step)}
|
||||||
|
handleSignInRedirection={handleRedirection}
|
||||||
|
isOnboarded={isOnboarded}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{isOAuthEnabled &&
|
||||||
|
!OAUTH_HIDDEN_STEPS.includes(signInStep) &&
|
||||||
|
signInStep !== ESignInSteps.CREATE_PASSWORD &&
|
||||||
|
signInStep !== ESignInSteps.PASSWORD && <OAuthOptions handleSignInRedirection={handleRedirection} />}
|
||||||
|
<LatestFeatureBlock />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
144
space/components/accounts/sign-in-forms/self-hosted-sign-in.tsx
Normal file
144
space/components/accounts/sign-in-forms/self-hosted-sign-in.tsx
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
import React, { useEffect } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Controller, useForm } from "react-hook-form";
|
||||||
|
import { XCircle } from "lucide-react";
|
||||||
|
// services
|
||||||
|
import { AuthService } from "services/authentication.service";
|
||||||
|
// hooks
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
// ui
|
||||||
|
import { Button, Input } from "@plane/ui";
|
||||||
|
// helpers
|
||||||
|
import { checkEmailValidity } from "helpers/string.helper";
|
||||||
|
// types
|
||||||
|
import { IPasswordSignInData } from "types/auth";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
email: string;
|
||||||
|
updateEmail: (email: string) => void;
|
||||||
|
handleSignInRedirection: () => Promise<void>;
|
||||||
|
};
|
||||||
|
|
||||||
|
type TPasswordFormValues = {
|
||||||
|
email: string;
|
||||||
|
password: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultValues: TPasswordFormValues = {
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
const authService = new AuthService();
|
||||||
|
|
||||||
|
export const SelfHostedSignInForm: React.FC<Props> = (props) => {
|
||||||
|
const { email, updateEmail, handleSignInRedirection } = props;
|
||||||
|
// toast alert
|
||||||
|
const { setToastAlert } = useToast();
|
||||||
|
// form info
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
formState: { dirtyFields, errors, isSubmitting },
|
||||||
|
handleSubmit,
|
||||||
|
setFocus,
|
||||||
|
} = useForm<TPasswordFormValues>({
|
||||||
|
defaultValues: {
|
||||||
|
...defaultValues,
|
||||||
|
email,
|
||||||
|
},
|
||||||
|
mode: "onChange",
|
||||||
|
reValidateMode: "onChange",
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleFormSubmit = async (formData: TPasswordFormValues) => {
|
||||||
|
const payload: IPasswordSignInData = {
|
||||||
|
email: formData.email,
|
||||||
|
password: formData.password,
|
||||||
|
};
|
||||||
|
|
||||||
|
updateEmail(formData.email);
|
||||||
|
|
||||||
|
await authService
|
||||||
|
.passwordSignIn(payload)
|
||||||
|
.then(async () => await handleSignInRedirection())
|
||||||
|
.catch((err) =>
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Error!",
|
||||||
|
message: err?.error ?? "Something went wrong. Please try again.",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setFocus("email");
|
||||||
|
}, [setFocus]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||||
|
Get on your flight deck
|
||||||
|
</h1>
|
||||||
|
<form onSubmit={handleSubmit(handleFormSubmit)} className="mt-11 sm:w-96 mx-auto space-y-4">
|
||||||
|
<div>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="email"
|
||||||
|
rules={{
|
||||||
|
required: "Email is required",
|
||||||
|
validate: (value) => checkEmailValidity(value) || "Email is invalid",
|
||||||
|
}}
|
||||||
|
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}
|
||||||
|
hasError={Boolean(errors.email)}
|
||||||
|
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={() => onChange("")}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="password"
|
||||||
|
rules={{
|
||||||
|
required: dirtyFields.email ? false : "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"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button type="submit" variant="primary" className="w-full" size="xl" loading={isSubmitting}>
|
||||||
|
Go to board
|
||||||
|
</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>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
103
space/components/accounts/sign-in-forms/set-password-link.tsx
Normal file
103
space/components/accounts/sign-in-forms/set-password-link.tsx
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Controller, useForm } from "react-hook-form";
|
||||||
|
// services
|
||||||
|
import { AuthService } from "services/authentication.service";
|
||||||
|
// hooks
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
// ui
|
||||||
|
import { Button, Input } from "@plane/ui";
|
||||||
|
// helpers
|
||||||
|
import { checkEmailValidity } from "helpers/string.helper";
|
||||||
|
// types
|
||||||
|
import { IEmailCheckData } from "types/auth";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
email: string;
|
||||||
|
updateEmail: (email: string) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const authService = new AuthService();
|
||||||
|
|
||||||
|
export const SetPasswordLink: React.FC<Props> = (props) => {
|
||||||
|
const { email, updateEmail } = props;
|
||||||
|
|
||||||
|
const { setToastAlert } = useToast();
|
||||||
|
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
formState: { errors, isSubmitting, isValid },
|
||||||
|
handleSubmit,
|
||||||
|
} = useForm({
|
||||||
|
defaultValues: {
|
||||||
|
email,
|
||||||
|
},
|
||||||
|
mode: "onChange",
|
||||||
|
reValidateMode: "onChange",
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSendNewLink = async (formData: { email: string }) => {
|
||||||
|
updateEmail(formData.email);
|
||||||
|
|
||||||
|
const payload: IEmailCheckData = {
|
||||||
|
email: formData.email,
|
||||||
|
};
|
||||||
|
|
||||||
|
await authService
|
||||||
|
.sendResetPasswordLink(payload)
|
||||||
|
.then(() =>
|
||||||
|
setToastAlert({
|
||||||
|
type: "success",
|
||||||
|
title: "Success!",
|
||||||
|
message: "We have sent a new link to your email.",
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.catch((err) =>
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Error!",
|
||||||
|
message: err?.error ?? "Something went wrong. Please try again.",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||||
|
Get on your flight deck
|
||||||
|
</h1>
|
||||||
|
<p className="text-center text-sm text-onboarding-text-200 px-20 mt-2.5">
|
||||||
|
We have sent a link to <span className="font-semibold text-custom-primary-100">{email},</span> so you can set a
|
||||||
|
password
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit(handleSendNewLink)} className="mt-5 sm:w-96 mx-auto space-y-4">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="email"
|
||||||
|
rules={{
|
||||||
|
required: "Email is required",
|
||||||
|
validate: (value) => checkEmailValidity(value) || "Email is invalid",
|
||||||
|
}}
|
||||||
|
render={({ field: { value, onChange } }) => (
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
hasError={Boolean(errors.email)}
|
||||||
|
placeholder="orville.wright@firstflight.com"
|
||||||
|
className="w-full h-[46px] text-onboarding-text-400 border border-onboarding-border-100 pr-12 !bg-onboarding-background-200"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
|
||||||
|
{isSubmitting ? "Sending new link" : "Get link again"}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
263
space/components/accounts/sign-in-forms/unique-code.tsx
Normal file
263
space/components/accounts/sign-in-forms/unique-code.tsx
Normal file
@ -0,0 +1,263 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Controller, useForm } from "react-hook-form";
|
||||||
|
import { CornerDownLeft, XCircle } from "lucide-react";
|
||||||
|
// services
|
||||||
|
import { AuthService } from "services/authentication.service";
|
||||||
|
import { UserService } from "services/user.service";
|
||||||
|
// hooks
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
import useTimer from "hooks/use-timer";
|
||||||
|
// ui
|
||||||
|
import { Button, Input } from "@plane/ui";
|
||||||
|
// helpers
|
||||||
|
import { checkEmailValidity } from "helpers/string.helper";
|
||||||
|
// types
|
||||||
|
import { IEmailCheckData, IMagicSignInData } from "types/auth";
|
||||||
|
// constants
|
||||||
|
import { ESignInSteps } from "components/accounts";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
email: string;
|
||||||
|
updateEmail: (email: string) => void;
|
||||||
|
handleStepChange: (step: ESignInSteps) => void;
|
||||||
|
handleSignInRedirection: () => Promise<void>;
|
||||||
|
submitButtonLabel?: string;
|
||||||
|
showTermsAndConditions?: boolean;
|
||||||
|
updateUserOnboardingStatus: (value: boolean) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
type TUniqueCodeFormValues = {
|
||||||
|
email: string;
|
||||||
|
token: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultValues: TUniqueCodeFormValues = {
|
||||||
|
email: "",
|
||||||
|
token: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
// services
|
||||||
|
const authService = new AuthService();
|
||||||
|
const userService = new UserService();
|
||||||
|
|
||||||
|
export const UniqueCodeForm: React.FC<Props> = (props) => {
|
||||||
|
const {
|
||||||
|
email,
|
||||||
|
updateEmail,
|
||||||
|
handleStepChange,
|
||||||
|
handleSignInRedirection,
|
||||||
|
submitButtonLabel = "Continue",
|
||||||
|
showTermsAndConditions = false,
|
||||||
|
updateUserOnboardingStatus,
|
||||||
|
} = props;
|
||||||
|
// states
|
||||||
|
const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
|
||||||
|
// toast alert
|
||||||
|
const { setToastAlert } = useToast();
|
||||||
|
// timer
|
||||||
|
const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(30);
|
||||||
|
// form info
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
formState: { dirtyFields, errors, isSubmitting, isValid },
|
||||||
|
getValues,
|
||||||
|
handleSubmit,
|
||||||
|
reset,
|
||||||
|
setFocus,
|
||||||
|
} = useForm<TUniqueCodeFormValues>({
|
||||||
|
defaultValues: {
|
||||||
|
...defaultValues,
|
||||||
|
email,
|
||||||
|
},
|
||||||
|
mode: "onChange",
|
||||||
|
reValidateMode: "onChange",
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleUniqueCodeSignIn = async (formData: TUniqueCodeFormValues) => {
|
||||||
|
const payload: IMagicSignInData = {
|
||||||
|
email: formData.email,
|
||||||
|
key: `magic_${formData.email}`,
|
||||||
|
token: formData.token,
|
||||||
|
};
|
||||||
|
|
||||||
|
await authService
|
||||||
|
.magicSignIn(payload)
|
||||||
|
.then(async () => {
|
||||||
|
const currentUser = await userService.currentUser();
|
||||||
|
|
||||||
|
updateUserOnboardingStatus(currentUser.onboarding_step.profile_complete ?? false);
|
||||||
|
|
||||||
|
if (currentUser.is_password_autoset) handleStepChange(ESignInSteps.OPTIONAL_SET_PASSWORD);
|
||||||
|
else await handleSignInRedirection();
|
||||||
|
})
|
||||||
|
.catch((err) =>
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Error!",
|
||||||
|
message: err?.error ?? "Something went wrong. Please try again.",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSendNewCode = async (formData: TUniqueCodeFormValues) => {
|
||||||
|
const payload: IEmailCheckData = {
|
||||||
|
email: formData.email,
|
||||||
|
};
|
||||||
|
|
||||||
|
await authService
|
||||||
|
.generateUniqueCode(payload)
|
||||||
|
.then(() => {
|
||||||
|
setResendCodeTimer(30);
|
||||||
|
setToastAlert({
|
||||||
|
type: "success",
|
||||||
|
title: "Success!",
|
||||||
|
message: "A new unique code has been sent to your email.",
|
||||||
|
});
|
||||||
|
|
||||||
|
reset({
|
||||||
|
email: formData.email,
|
||||||
|
token: "",
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((err) =>
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Error!",
|
||||||
|
message: err?.error ?? "Something went wrong. Please try again.",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFormSubmit = async (formData: TUniqueCodeFormValues) => {
|
||||||
|
updateEmail(formData.email);
|
||||||
|
|
||||||
|
if (dirtyFields.email) await handleSendNewCode(formData);
|
||||||
|
else await handleUniqueCodeSignIn(formData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRequestNewCode = async () => {
|
||||||
|
setIsRequestingNewCode(true);
|
||||||
|
|
||||||
|
await handleSendNewCode(getValues())
|
||||||
|
.then(() => setResendCodeTimer(30))
|
||||||
|
.finally(() => setIsRequestingNewCode(false));
|
||||||
|
};
|
||||||
|
|
||||||
|
const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0;
|
||||||
|
const hasEmailChanged = dirtyFields.email;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setFocus("token");
|
||||||
|
}, [setFocus]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||||
|
Get on your flight deck
|
||||||
|
</h1>
|
||||||
|
<p className="text-center text-sm text-onboarding-text-200 mt-2.5">
|
||||||
|
Paste the code you got at <span className="font-semibold text-custom-primary-100">{email}</span> below.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit(handleFormSubmit)} className="mt-5 sm:w-96 mx-auto space-y-4">
|
||||||
|
<div>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="email"
|
||||||
|
rules={{
|
||||||
|
required: "Email is required",
|
||||||
|
validate: (value) => checkEmailValidity(value) || "Email is invalid",
|
||||||
|
}}
|
||||||
|
render={({ field: { value, onChange, ref } }) => (
|
||||||
|
<div className="flex items-center relative rounded-md bg-onboarding-background-200">
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
onBlur={() => {
|
||||||
|
if (hasEmailChanged) handleSendNewCode(getValues());
|
||||||
|
}}
|
||||||
|
ref={ref}
|
||||||
|
hasError={Boolean(errors.email)}
|
||||||
|
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={() => onChange("")}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{hasEmailChanged && (
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="text-xs text-onboarding-text-300 mt-1.5 flex items-center gap-1 outline-none bg-transparent border-none"
|
||||||
|
>
|
||||||
|
Hit <CornerDownLeft className="h-2.5 w-2.5" /> or <span className="italic">Tab</span> to get a new code
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="token"
|
||||||
|
rules={{
|
||||||
|
required: hasEmailChanged ? false : "Code is required",
|
||||||
|
}}
|
||||||
|
render={({ field: { value, onChange } }) => (
|
||||||
|
<Input
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
hasError={Boolean(errors.token)}
|
||||||
|
placeholder="gets-sets-flys"
|
||||||
|
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12 !bg-onboarding-background-200"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="w-full text-right">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleRequestNewCode}
|
||||||
|
className={`text-xs ${
|
||||||
|
isRequestNewCodeDisabled
|
||||||
|
? "text-onboarding-text-300"
|
||||||
|
: "text-onboarding-text-200 hover:text-custom-primary-100"
|
||||||
|
}`}
|
||||||
|
disabled={isRequestNewCodeDisabled}
|
||||||
|
>
|
||||||
|
{resendTimerCode > 0
|
||||||
|
? `Request new code in ${resendTimerCode}s`
|
||||||
|
: isRequestingNewCode
|
||||||
|
? "Requesting new code"
|
||||||
|
: "Request new code"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="primary"
|
||||||
|
className="w-full"
|
||||||
|
size="xl"
|
||||||
|
disabled={!isValid || hasEmailChanged}
|
||||||
|
loading={isSubmitting}
|
||||||
|
>
|
||||||
|
{submitButtonLabel}
|
||||||
|
</Button>
|
||||||
|
{showTermsAndConditions && (
|
||||||
|
<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>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -1,139 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import useSWR from "swr";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
// mobx
|
|
||||||
import { observer } from "mobx-react-lite";
|
|
||||||
import { useMobxStore } from "lib/mobx/store-provider";
|
|
||||||
// services
|
|
||||||
import authenticationService from "services/authentication.service";
|
|
||||||
import { AppConfigService } from "services/app-config.service";
|
|
||||||
// hooks
|
|
||||||
import useToast from "hooks/use-toast";
|
|
||||||
// components
|
|
||||||
import { EmailPasswordForm, GoogleLoginButton, EmailCodeForm } from "components/accounts";
|
|
||||||
// images
|
|
||||||
const imagePrefix = Boolean(parseInt(process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX || "0")) ? "/spaces" : "";
|
|
||||||
|
|
||||||
const appConfig = new AppConfigService();
|
|
||||||
|
|
||||||
export const SignInView = observer(() => {
|
|
||||||
const { user: userStore } = useMobxStore();
|
|
||||||
// router
|
|
||||||
const router = useRouter();
|
|
||||||
const { next_path } = router.query as { next_path: string };
|
|
||||||
// toast
|
|
||||||
const { setToastAlert } = useToast();
|
|
||||||
// fetch app config
|
|
||||||
const { data } = useSWR("APP_CONFIG", () => appConfig.envConfig());
|
|
||||||
|
|
||||||
const onSignInError = (error: any) => {
|
|
||||||
setToastAlert({
|
|
||||||
title: "Error signing in!",
|
|
||||||
type: "error",
|
|
||||||
message: error?.error || "Something went wrong. Please try again later or contact the support team.",
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSignInSuccess = (response: any) => {
|
|
||||||
userStore.setCurrentUser(response?.user);
|
|
||||||
|
|
||||||
const isOnboard = response?.user?.onboarding_step?.profile_complete || false;
|
|
||||||
|
|
||||||
if (isOnboard) {
|
|
||||||
if (next_path) router.push(next_path);
|
|
||||||
else router.push("/login");
|
|
||||||
} else {
|
|
||||||
if (next_path) router.push(`/onboarding?next_path=${next_path}`);
|
|
||||||
else router.push("/onboarding");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleGoogleSignIn = async ({ clientId, credential }: any) => {
|
|
||||||
try {
|
|
||||||
if (clientId && credential) {
|
|
||||||
const socialAuthPayload = {
|
|
||||||
medium: "google",
|
|
||||||
credential,
|
|
||||||
clientId,
|
|
||||||
};
|
|
||||||
const response = await authenticationService.socialAuth(socialAuthPayload);
|
|
||||||
|
|
||||||
onSignInSuccess(response);
|
|
||||||
} else {
|
|
||||||
throw Error("Cant find credentials");
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
|
||||||
onSignInError(err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePasswordSignIn = async (formData: any) => {
|
|
||||||
await authenticationService
|
|
||||||
.emailLogin(formData)
|
|
||||||
.then((response) => {
|
|
||||||
try {
|
|
||||||
if (response) {
|
|
||||||
onSignInSuccess(response);
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
|
||||||
onSignInError(err);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((err) => onSignInError(err));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEmailCodeSignIn = async (response: any) => {
|
|
||||||
try {
|
|
||||||
if (response) {
|
|
||||||
onSignInSuccess(response);
|
|
||||||
}
|
|
||||||
} catch (err: any) {
|
|
||||||
onSignInError(err);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="h-screen w-full overflow-hidden">
|
|
||||||
<div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
|
|
||||||
<div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
|
|
||||||
<div className="grid place-items-center bg-custom-background-100">
|
|
||||||
<div className="h-[30px] w-[30px]">
|
|
||||||
<img src={`${imagePrefix}/plane-logos/blue-without-text.png`} alt="Plane Logo" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">Sign in to Plane</h1>
|
|
||||||
{data?.email_password_login && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
|
|
||||||
|
|
||||||
{data?.magic_login && (
|
|
||||||
<div className="flex flex-col divide-y divide-custom-border-200">
|
|
||||||
<div className="pb-7">
|
|
||||||
<EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
|
|
||||||
{data?.google_client_id && (
|
|
||||||
<GoogleLoginButton clientId={data.google_client_id} handleSignIn={handleGoogleSignIn} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p className="pt-16 text-custom-text-200 text-sm text-center">
|
|
||||||
By signing up, you agree to the{" "}
|
|
||||||
<a
|
|
||||||
href="https://plane.so/terms-and-conditions"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="font-medium underline"
|
|
||||||
>
|
|
||||||
Terms & Conditions
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
1
space/components/common/index.ts
Normal file
1
space/components/common/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from "./latest-feature-block";
|
||||||
36
space/components/common/latest-feature-block.tsx
Normal file
36
space/components/common/latest-feature-block.tsx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useTheme } from "next-themes";
|
||||||
|
// icons
|
||||||
|
import { Lightbulb } from "lucide-react";
|
||||||
|
// images
|
||||||
|
import latestFeatures from "public/onboarding/onboarding-pages.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">
|
||||||
|
Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
|
||||||
|
<Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
|
||||||
|
<span className="font-medium text-sm underline hover:cursor-pointer">Learn more</span>
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 overflow-hidden">
|
||||||
|
<div className="h-[90%]">
|
||||||
|
<Image
|
||||||
|
src={latestFeatures}
|
||||||
|
alt="Plane Issues"
|
||||||
|
className={`rounded-md h-full ml-10 -mt-2 ${
|
||||||
|
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
|
||||||
|
} `}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -157,7 +157,7 @@ const IssueNavbar = observer(() => {
|
|||||||
|
|
||||||
{user ? (
|
{user ? (
|
||||||
<div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
|
<div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
|
||||||
<Avatar name={user?.display_name} src={user?.avatar} size={24} shape="square" className="!text-base" />
|
<Avatar name={user?.display_name} src={user?.avatar} shape="square" size="sm" />
|
||||||
<h6 className="text-xs font-medium">{user.display_name}</h6>
|
<h6 className="text-xs font-medium">{user.display_name}</h6>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@ -1,18 +1,61 @@
|
|||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
// mobx
|
// mobx
|
||||||
import { observer } from "mobx-react-lite";
|
import { observer } from "mobx-react-lite";
|
||||||
import { useMobxStore } from "lib/mobx/store-provider";
|
import { useMobxStore } from "lib/mobx/store-provider";
|
||||||
// components
|
// components
|
||||||
import { SignInView, UserLoggedIn } from "components/accounts";
|
import { SignInRoot, UserLoggedIn } from "components/accounts";
|
||||||
|
import { Loader } from "@plane/ui";
|
||||||
|
// images
|
||||||
|
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
|
||||||
|
|
||||||
export const LoginView = observer(() => {
|
export const LoginView = observer(() => {
|
||||||
const { user: userStore } = useMobxStore();
|
// store
|
||||||
|
const {
|
||||||
|
user: { currentUser, loader },
|
||||||
|
} = useMobxStore();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{userStore?.loader ? (
|
{loader ? (
|
||||||
<div className="relative flex h-screen w-screen items-center justify-center">Loading</div> // TODO: Add spinner instead
|
<div className="relative flex h-screen w-screen items-center justify-center">Loading</div> // TODO: Add spinner instead
|
||||||
) : (
|
) : (
|
||||||
<>{userStore.currentUser ? <UserLoggedIn /> : <SignInView />}</>
|
<>
|
||||||
|
{currentUser ? (
|
||||||
|
<UserLoggedIn />
|
||||||
|
) : (
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
{!true ? (
|
||||||
|
<div className="pt-10 mx-auto flex justify-center">
|
||||||
|
<div>
|
||||||
|
<Loader className="space-y-4 w-full pb-4 mx-auto">
|
||||||
|
<Loader.Item height="46px" width="360px" />
|
||||||
|
<Loader.Item height="46px" width="360px" />
|
||||||
|
</Loader>
|
||||||
|
|
||||||
|
<Loader className="space-y-4 w-full pt-4 mx-auto">
|
||||||
|
<Loader.Item height="46px" width="360px" />
|
||||||
|
<Loader.Item height="46px" width="360px" />
|
||||||
|
</Loader>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<SignInRoot />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
11
space/google.d.ts
vendored
Normal file
11
space/google.d.ts
vendored
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
// google.d.ts
|
||||||
|
interface GsiButtonConfiguration {
|
||||||
|
type: "standard" | "icon";
|
||||||
|
theme?: "outline" | "filled_blue" | "filled_black";
|
||||||
|
size?: "large" | "medium" | "small";
|
||||||
|
text?: "signin_with" | "signup_with" | "continue_with" | "signup_with";
|
||||||
|
shape?: "rectangular" | "pill" | "circle" | "square";
|
||||||
|
logo_alignment?: "left" | "center";
|
||||||
|
width?: number;
|
||||||
|
local?: string;
|
||||||
|
}
|
||||||
@ -29,3 +29,21 @@ export const copyTextToClipboard = async (text: string) => {
|
|||||||
}
|
}
|
||||||
await navigator.clipboard.writeText(text);
|
await navigator.clipboard.writeText(text);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @returns {boolean} true if email is valid, false otherwise
|
||||||
|
* @description Returns true if email is valid, false otherwise
|
||||||
|
* @param {string} email string to check if it is a valid email
|
||||||
|
* @example checkEmailIsValid("hello world") => false
|
||||||
|
* @example checkEmailIsValid("example@plane.so") => true
|
||||||
|
*/
|
||||||
|
export const checkEmailValidity = (email: string): boolean => {
|
||||||
|
if (!email) return false;
|
||||||
|
|
||||||
|
const isEmailValid =
|
||||||
|
/^(([^<>()[\]\\.,;:\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(
|
||||||
|
email
|
||||||
|
);
|
||||||
|
|
||||||
|
return isEmailValid;
|
||||||
|
};
|
||||||
|
|||||||
66
space/hooks/use-sign-in-redirection.tsx
Normal file
66
space/hooks/use-sign-in-redirection.tsx
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
import { useCallback, useState } from "react";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
// mobx store
|
||||||
|
import { useMobxStore } from "lib/mobx/store-provider";
|
||||||
|
// types
|
||||||
|
import { IUser } from "types/user";
|
||||||
|
|
||||||
|
type UseSignInRedirectionProps = {
|
||||||
|
error: any | null;
|
||||||
|
isRedirecting: boolean;
|
||||||
|
handleRedirection: () => Promise<void>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const useSignInRedirection = (): UseSignInRedirectionProps => {
|
||||||
|
// states
|
||||||
|
const [isRedirecting, setIsRedirecting] = useState(true);
|
||||||
|
const [error, setError] = useState<any | null>(null);
|
||||||
|
// router
|
||||||
|
const router = useRouter();
|
||||||
|
const { next_path } = router.query;
|
||||||
|
// mobx store
|
||||||
|
const {
|
||||||
|
user: { fetchCurrentUser },
|
||||||
|
} = useMobxStore();
|
||||||
|
|
||||||
|
const handleSignInRedirection = useCallback(
|
||||||
|
async (user: IUser) => {
|
||||||
|
const isOnboard = user.onboarding_step?.profile_complete;
|
||||||
|
|
||||||
|
if (isOnboard) {
|
||||||
|
// if next_path is provided, redirect the user to that url
|
||||||
|
if (next_path) router.push(next_path.toString());
|
||||||
|
else router.push("/login");
|
||||||
|
} else {
|
||||||
|
// if the user profile is not complete, redirect them to the onboarding page to complete their profile and then redirect them to the next path
|
||||||
|
if (next_path) router.push(`/onboarding?next_path=${next_path}`);
|
||||||
|
else router.push("/onboarding");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[router, next_path]
|
||||||
|
);
|
||||||
|
|
||||||
|
const updateUserInfo = useCallback(async () => {
|
||||||
|
setIsRedirecting(true);
|
||||||
|
|
||||||
|
await fetchCurrentUser()
|
||||||
|
.then(async (user) => {
|
||||||
|
if (user)
|
||||||
|
await handleSignInRedirection(user)
|
||||||
|
.catch((err) => setError(err))
|
||||||
|
.finally(() => setIsRedirecting(false));
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
setError(err);
|
||||||
|
setIsRedirecting(false);
|
||||||
|
});
|
||||||
|
}, [fetchCurrentUser, handleSignInRedirection]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
error,
|
||||||
|
isRedirecting,
|
||||||
|
handleRedirection: updateUserInfo,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useSignInRedirection;
|
||||||
180
space/pages/accounts/password.tsx
Normal file
180
space/pages/accounts/password.tsx
Normal file
@ -0,0 +1,180 @@
|
|||||||
|
import { NextPage } from "next";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
import { useTheme } from "next-themes";
|
||||||
|
import { Lightbulb } from "lucide-react";
|
||||||
|
import { Controller, useForm } from "react-hook-form";
|
||||||
|
// services
|
||||||
|
import { AuthService } from "services/authentication.service";
|
||||||
|
// hooks
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
import useSignInRedirection from "hooks/use-sign-in-redirection";
|
||||||
|
// ui
|
||||||
|
import { Button, Input } from "@plane/ui";
|
||||||
|
// images
|
||||||
|
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
|
||||||
|
import latestFeatures from "public/onboarding/onboarding-pages.svg";
|
||||||
|
// helpers
|
||||||
|
import { checkEmailValidity } from "helpers/string.helper";
|
||||||
|
|
||||||
|
type TResetPasswordFormValues = {
|
||||||
|
email: string;
|
||||||
|
password: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultValues: TResetPasswordFormValues = {
|
||||||
|
email: "",
|
||||||
|
password: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
// services
|
||||||
|
const authService = new AuthService();
|
||||||
|
|
||||||
|
const HomePage: NextPage = () => {
|
||||||
|
// router
|
||||||
|
const router = useRouter();
|
||||||
|
const { uidb64, token, email } = router.query;
|
||||||
|
// next-themes
|
||||||
|
const { resolvedTheme } = useTheme();
|
||||||
|
// toast
|
||||||
|
const { setToastAlert } = useToast();
|
||||||
|
// sign in redirection hook
|
||||||
|
const { handleRedirection } = useSignInRedirection();
|
||||||
|
// form info
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
formState: { errors, isSubmitting, isValid },
|
||||||
|
handleSubmit,
|
||||||
|
} = useForm<TResetPasswordFormValues>({
|
||||||
|
defaultValues: {
|
||||||
|
...defaultValues,
|
||||||
|
email: email?.toString() ?? "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleResetPassword = async (formData: TResetPasswordFormValues) => {
|
||||||
|
if (!uidb64 || !token || !email) return;
|
||||||
|
|
||||||
|
const payload = {
|
||||||
|
new_password: formData.password,
|
||||||
|
};
|
||||||
|
|
||||||
|
await authService
|
||||||
|
.resetPassword(uidb64.toString(), token.toString(), payload)
|
||||||
|
.then(() => handleRedirection())
|
||||||
|
.catch((err) =>
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Error!",
|
||||||
|
message: err?.error ?? "Something went wrong. Please try again.",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||||
|
Let{"'"}s get a new password
|
||||||
|
</h1>
|
||||||
|
<form onSubmit={handleSubmit(handleResetPassword)} className="mt-11 sm:w-96 mx-auto space-y-4">
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="email"
|
||||||
|
rules={{
|
||||||
|
required: "Email is required",
|
||||||
|
validate: (value) => checkEmailValidity(value) || "Email is invalid",
|
||||||
|
}}
|
||||||
|
render={({ field: { value, onChange, ref } }) => (
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
type="email"
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
ref={ref}
|
||||||
|
hasError={Boolean(errors.email)}
|
||||||
|
placeholder="orville.wright@firstflight.com"
|
||||||
|
className="w-full h-[46px] text-onboarding-text-400 border border-onboarding-border-100 pr-12 !bg-onboarding-background-200"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<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="Choose password"
|
||||||
|
className="w-full h-[46px] placeholder:text-onboarding-text-400 border border-onboarding-border-100 pr-12 !bg-onboarding-background-200"
|
||||||
|
minLength={8}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-onboarding-text-200 mt-3">
|
||||||
|
Whatever you choose now will be your account{"'"}s password until you change it.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
variant="primary"
|
||||||
|
className="w-full"
|
||||||
|
size="xl"
|
||||||
|
disabled={!isValid}
|
||||||
|
loading={isSubmitting}
|
||||||
|
>
|
||||||
|
{isSubmitting ? "Signing in..." : "Continue"}
|
||||||
|
</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>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<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.{" "}
|
||||||
|
<Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
|
||||||
|
<span className="font-medium text-sm underline hover:cursor-pointer">See new features</span>
|
||||||
|
</Link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 overflow-hidden">
|
||||||
|
<div className="h-[90%]">
|
||||||
|
<Image
|
||||||
|
src={latestFeatures}
|
||||||
|
alt="Plane Issues"
|
||||||
|
className={`rounded-md h-full ml-8 -mt-2 ${
|
||||||
|
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
|
||||||
|
} `}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HomePage;
|
||||||
73
space/public/onboarding/onboarding-pages.svg
Normal file
73
space/public/onboarding/onboarding-pages.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 2.6 MiB |
@ -2,15 +2,8 @@
|
|||||||
import APIService from "services/api.service";
|
import APIService from "services/api.service";
|
||||||
// helper
|
// helper
|
||||||
import { API_BASE_URL } from "helpers/common.helper";
|
import { API_BASE_URL } from "helpers/common.helper";
|
||||||
|
// types
|
||||||
export interface IAppConfig {
|
import { IAppConfig } from "types/app";
|
||||||
email_password_login: boolean;
|
|
||||||
google_client_id: string | null;
|
|
||||||
github_app_name: string | null;
|
|
||||||
github_client_id: string | null;
|
|
||||||
magic_login: boolean;
|
|
||||||
slack_client_id: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export class AppConfigService extends APIService {
|
export class AppConfigService extends APIService {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
|||||||
@ -1,12 +1,21 @@
|
|||||||
// services
|
// services
|
||||||
import APIService from "services/api.service";
|
import APIService from "services/api.service";
|
||||||
import { API_BASE_URL } from "helpers/common.helper";
|
import { API_BASE_URL } from "helpers/common.helper";
|
||||||
|
import { IEmailCheckData, IEmailCheckResponse, ILoginTokenResponse, IPasswordSignInData } from "types/auth";
|
||||||
|
|
||||||
class AuthService extends APIService {
|
export class AuthService extends APIService {
|
||||||
constructor() {
|
constructor() {
|
||||||
super(API_BASE_URL);
|
super(API_BASE_URL);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async emailCheck(data: IEmailCheckData): Promise<IEmailCheckResponse> {
|
||||||
|
return this.post("/api/email-check/", data, { headers: {} })
|
||||||
|
.then((response) => response?.data)
|
||||||
|
.catch((error) => {
|
||||||
|
throw error?.response?.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
async emailLogin(data: any) {
|
async emailLogin(data: any) {
|
||||||
return this.post("/api/sign-in/", data, { headers: {} })
|
return this.post("/api/sign-in/", data, { headers: {} })
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
@ -47,6 +56,26 @@ class AuthService extends APIService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async passwordSignIn(data: IPasswordSignInData): Promise<ILoginTokenResponse> {
|
||||||
|
return this.post("/api/sign-in/", data, { headers: {} })
|
||||||
|
.then((response) => {
|
||||||
|
this.setAccessToken(response?.data?.access_token);
|
||||||
|
this.setRefreshToken(response?.data?.refresh_token);
|
||||||
|
return response?.data;
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
throw error?.response?.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async sendResetPasswordLink(data: { email: string }): Promise<any> {
|
||||||
|
return this.post(`/api/forgot-password/`, data)
|
||||||
|
.then((response) => response?.data)
|
||||||
|
.catch((error) => {
|
||||||
|
throw error?.response;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
async emailCode(data: any) {
|
async emailCode(data: any) {
|
||||||
return this.post("/api/magic-generate/", data, { headers: {} })
|
return this.post("/api/magic-generate/", data, { headers: {} })
|
||||||
.then((response) => response?.data)
|
.then((response) => response?.data)
|
||||||
@ -73,6 +102,42 @@ class AuthService extends APIService {
|
|||||||
throw response.response.data;
|
throw response.response.data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async generateUniqueCode(data: { email: string }): Promise<any> {
|
||||||
|
return this.post("/api/magic-generate/", data, { headers: {} })
|
||||||
|
.then((response) => response?.data)
|
||||||
|
.catch((error) => {
|
||||||
|
throw error?.response?.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async resetPassword(
|
||||||
|
uidb64: string,
|
||||||
|
token: string,
|
||||||
|
data: {
|
||||||
|
new_password: string;
|
||||||
|
}
|
||||||
|
): Promise<ILoginTokenResponse> {
|
||||||
|
return this.post(`/api/reset-password/${uidb64}/${token}/`, data, { headers: {} })
|
||||||
|
.then((response) => {
|
||||||
|
if (response?.status === 200) {
|
||||||
|
this.setAccessToken(response?.data?.access_token);
|
||||||
|
this.setRefreshToken(response?.data?.refresh_token);
|
||||||
|
return response?.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
throw error?.response?.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async setPassword(data: { password: string }): Promise<any> {
|
||||||
|
return this.post(`/api/users/me/set-password/`, data)
|
||||||
|
.then((response) => response?.data)
|
||||||
|
.catch((error) => {
|
||||||
|
throw error?.response?.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
async signOut() {
|
async signOut() {
|
||||||
return this.post("/api/sign-out/", { refresh_token: this.getRefreshToken() })
|
return this.post("/api/sign-out/", { refresh_token: this.getRefreshToken() })
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
@ -87,7 +152,3 @@ class AuthService extends APIService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const authService = new AuthService();
|
|
||||||
|
|
||||||
export default authService;
|
|
||||||
|
|||||||
@ -1,13 +1,16 @@
|
|||||||
// services
|
// services
|
||||||
import APIService from "services/api.service";
|
import APIService from "services/api.service";
|
||||||
|
// helpers
|
||||||
import { API_BASE_URL } from "helpers/common.helper";
|
import { API_BASE_URL } from "helpers/common.helper";
|
||||||
|
// types
|
||||||
|
import { IUser } from "types/user";
|
||||||
|
|
||||||
class UserService extends APIService {
|
export class UserService extends APIService {
|
||||||
constructor() {
|
constructor() {
|
||||||
super(API_BASE_URL);
|
super(API_BASE_URL);
|
||||||
}
|
}
|
||||||
|
|
||||||
async currentUser(): Promise<any> {
|
async currentUser(): Promise<IUser> {
|
||||||
return this.get("/api/users/me/")
|
return this.get("/api/users/me/")
|
||||||
.then((response) => response?.data)
|
.then((response) => response?.data)
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
@ -23,5 +26,3 @@ class UserService extends APIService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default UserService;
|
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
// mobx
|
// mobx
|
||||||
import { observable, action, computed, makeObservable, runInAction } from "mobx";
|
import { observable, action, computed, makeObservable, runInAction } from "mobx";
|
||||||
// service
|
// service
|
||||||
import UserService from "services/user.service";
|
import { UserService } from "services/user.service";
|
||||||
// types
|
// types
|
||||||
import { IUser } from "types/user";
|
import { IUser } from "types/user";
|
||||||
|
|
||||||
@ -9,7 +9,7 @@ export interface IUserStore {
|
|||||||
loader: boolean;
|
loader: boolean;
|
||||||
error: any | null;
|
error: any | null;
|
||||||
currentUser: any | null;
|
currentUser: any | null;
|
||||||
fetchCurrentUser: () => void;
|
fetchCurrentUser: () => Promise<IUser | undefined>;
|
||||||
currentActor: () => any;
|
currentActor: () => any;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -83,12 +83,13 @@ class UserStore implements IUserStore {
|
|||||||
this.loader = true;
|
this.loader = true;
|
||||||
this.error = null;
|
this.error = null;
|
||||||
const response = await this.userService.currentUser();
|
const response = await this.userService.currentUser();
|
||||||
if (response) {
|
|
||||||
|
if (response)
|
||||||
runInAction(() => {
|
runInAction(() => {
|
||||||
this.loader = false;
|
this.loader = false;
|
||||||
this.currentUser = response;
|
this.currentUser = response;
|
||||||
});
|
});
|
||||||
}
|
return response;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error("Failed to fetch current user", error);
|
console.error("Failed to fetch current user", error);
|
||||||
this.loader = false;
|
this.loader = false;
|
||||||
|
|||||||
@ -97,6 +97,28 @@
|
|||||||
--color-background-100: 255, 255, 255; /* primary bg */
|
--color-background-100: 255, 255, 255; /* primary bg */
|
||||||
--color-background-90: 250, 250, 250; /* secondary bg */
|
--color-background-90: 250, 250, 250; /* secondary bg */
|
||||||
--color-background-80: 245, 245, 245; /* tertiary bg */
|
--color-background-80: 245, 245, 245; /* tertiary bg */
|
||||||
|
|
||||||
|
/* onboarding colors */
|
||||||
|
--gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%);
|
||||||
|
--gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
|
||||||
|
--gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%);
|
||||||
|
--gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
|
||||||
|
|
||||||
|
--color-onboarding-text-100: 23, 23, 23;
|
||||||
|
--color-onboarding-text-200: 58, 58, 58;
|
||||||
|
--color-onboarding-text-300: 82, 82, 82;
|
||||||
|
--color-onboarding-text-400: 163, 163, 163;
|
||||||
|
|
||||||
|
--color-onboarding-background-100: 236, 241, 255;
|
||||||
|
--color-onboarding-background-200: 255, 255, 255;
|
||||||
|
--color-onboarding-background-300: 236, 241, 255;
|
||||||
|
--color-onboarding-background-400: 177, 206, 250;
|
||||||
|
|
||||||
|
--color-onboarding-border-100: 229, 229, 229;
|
||||||
|
--color-onboarding-border-200: 217, 228, 255;
|
||||||
|
--color-onboarding-border-300: 229, 229, 229, 0.5;
|
||||||
|
|
||||||
|
--color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="light"] {
|
[data-theme="light"] {
|
||||||
@ -140,6 +162,27 @@
|
|||||||
--color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
|
--color-shadow-xl: 0px 0px 14px 0px rgba(0, 0, 0, 0.25), 0px 6px 10px 0px rgba(0, 0, 0, 0.55);
|
||||||
--color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
|
--color-shadow-2xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.25), 0px 8px 12px 0px rgba(0, 0, 0, 0.6);
|
||||||
--color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
|
--color-shadow-3xl: 0px 4px 24px 0px rgba(0, 0, 0, 0.3), 0px 12px 40px 0px rgba(0, 0, 0, 0.65);
|
||||||
|
|
||||||
|
/* onboarding colors */
|
||||||
|
--gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%);
|
||||||
|
--gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%);
|
||||||
|
--gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%);
|
||||||
|
|
||||||
|
--color-onboarding-text-100: 237, 238, 240;
|
||||||
|
--color-onboarding-text-200: 176, 180, 187;
|
||||||
|
--color-onboarding-text-300: 118, 123, 132;
|
||||||
|
--color-onboarding-text-400: 105, 110, 119;
|
||||||
|
|
||||||
|
--color-onboarding-background-100: 54, 58, 64;
|
||||||
|
--color-onboarding-background-200: 40, 42, 45;
|
||||||
|
--color-onboarding-background-300: 40, 42, 45;
|
||||||
|
--color-onboarding-background-400: 67, 72, 79;
|
||||||
|
|
||||||
|
--color-onboarding-border-100: 54, 58, 64;
|
||||||
|
--color-onboarding-border-200: 54, 58, 64;
|
||||||
|
--color-onboarding-border-300: 34, 35, 38, 0.5;
|
||||||
|
|
||||||
|
--color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="dark"] {
|
[data-theme="dark"] {
|
||||||
|
|||||||
14
space/types/app.ts
Normal file
14
space/types/app.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
export interface IAppConfig {
|
||||||
|
email_password_login: boolean;
|
||||||
|
file_size_limit: number;
|
||||||
|
google_client_id: string | null;
|
||||||
|
github_app_name: string | null;
|
||||||
|
github_client_id: string | null;
|
||||||
|
magic_login: boolean;
|
||||||
|
slack_client_id: string | null;
|
||||||
|
posthog_api_key: string | null;
|
||||||
|
posthog_host: string | null;
|
||||||
|
has_openai_configured: boolean;
|
||||||
|
has_unsplash_configured: boolean;
|
||||||
|
is_self_managed: boolean;
|
||||||
|
}
|
||||||
26
space/types/auth.ts
Normal file
26
space/types/auth.ts
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
export type TEmailCheckTypes = "magic_code" | "password";
|
||||||
|
|
||||||
|
export interface IEmailCheckData {
|
||||||
|
email: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IEmailCheckResponse {
|
||||||
|
is_password_autoset: boolean;
|
||||||
|
is_existing: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ILoginTokenResponse {
|
||||||
|
access_token: string;
|
||||||
|
refresh_token: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IMagicSignInData {
|
||||||
|
email: string;
|
||||||
|
key: string;
|
||||||
|
token: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IPasswordSignInData {
|
||||||
|
email: string;
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
@ -16,6 +16,13 @@ export interface IUser {
|
|||||||
last_name: string;
|
last_name: string;
|
||||||
mobile_number: string;
|
mobile_number: string;
|
||||||
role: string;
|
role: string;
|
||||||
|
is_password_autoset: boolean;
|
||||||
|
onboarding_step: {
|
||||||
|
workspace_join?: boolean;
|
||||||
|
profile_complete?: boolean;
|
||||||
|
workspace_create?: boolean;
|
||||||
|
workspace_invite?: boolean;
|
||||||
|
};
|
||||||
token: string;
|
token: string;
|
||||||
updated_at: Date;
|
updated_at: Date;
|
||||||
username: string;
|
username: string;
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React from "react";
|
import React, { useEffect } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Controller, useForm } from "react-hook-form";
|
import { Controller, useForm } from "react-hook-form";
|
||||||
// services
|
// services
|
||||||
@ -41,6 +41,7 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
|
|||||||
control,
|
control,
|
||||||
formState: { errors, isSubmitting, isValid },
|
formState: { errors, isSubmitting, isValid },
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
|
setFocus,
|
||||||
} = useForm<TCreatePasswordFormValues>({
|
} = useForm<TCreatePasswordFormValues>({
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
...defaultValues,
|
...defaultValues,
|
||||||
@ -74,6 +75,10 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setFocus("password");
|
||||||
|
}, [setFocus]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React from "react";
|
import React, { useEffect } from "react";
|
||||||
import { Controller, useForm } from "react-hook-form";
|
import { Controller, useForm } from "react-hook-form";
|
||||||
import { XCircle } from "lucide-react";
|
import { XCircle } from "lucide-react";
|
||||||
// services
|
// services
|
||||||
@ -34,6 +34,7 @@ export const EmailForm: React.FC<Props> = (props) => {
|
|||||||
control,
|
control,
|
||||||
formState: { errors, isSubmitting, isValid },
|
formState: { errors, isSubmitting, isValid },
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
|
setFocus,
|
||||||
} = useForm<TEmailFormValues>({
|
} = useForm<TEmailFormValues>({
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
email: "",
|
email: "",
|
||||||
@ -67,6 +68,10 @@ export const EmailForm: React.FC<Props> = (props) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setFocus("email");
|
||||||
|
}, [setFocus]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Controller, useForm } from "react-hook-form";
|
import { Controller, useForm } from "react-hook-form";
|
||||||
import { XCircle } from "lucide-react";
|
import { XCircle } from "lucide-react";
|
||||||
@ -48,6 +48,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
|
|||||||
getValues,
|
getValues,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
setError,
|
setError,
|
||||||
|
setFocus,
|
||||||
} = useForm<TPasswordFormValues>({
|
} = useForm<TPasswordFormValues>({
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
...defaultValues,
|
...defaultValues,
|
||||||
@ -127,6 +128,10 @@ export const PasswordForm: React.FC<Props> = (props) => {
|
|||||||
.finally(() => setIsSendingUniqueCode(false));
|
.finally(() => setIsSendingUniqueCode(false));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setFocus("password");
|
||||||
|
}, [setFocus]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React from "react";
|
import React, { useEffect } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Controller, useForm } from "react-hook-form";
|
import { Controller, useForm } from "react-hook-form";
|
||||||
import { XCircle } from "lucide-react";
|
import { XCircle } from "lucide-react";
|
||||||
@ -40,6 +40,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
|
|||||||
control,
|
control,
|
||||||
formState: { dirtyFields, errors, isSubmitting },
|
formState: { dirtyFields, errors, isSubmitting },
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
|
setFocus,
|
||||||
} = useForm<TPasswordFormValues>({
|
} = useForm<TPasswordFormValues>({
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
...defaultValues,
|
...defaultValues,
|
||||||
@ -69,6 +70,10 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setFocus("email");
|
||||||
|
}, [setFocus]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-onboarding-text-100">
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Controller, useForm } from "react-hook-form";
|
import { Controller, useForm } from "react-hook-form";
|
||||||
import { CornerDownLeft, XCircle } from "lucide-react";
|
import { CornerDownLeft, XCircle } from "lucide-react";
|
||||||
@ -64,6 +64,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
|||||||
getValues,
|
getValues,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
reset,
|
reset,
|
||||||
|
setFocus,
|
||||||
} = useForm<TUniqueCodeFormValues>({
|
} = useForm<TUniqueCodeFormValues>({
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
...defaultValues,
|
...defaultValues,
|
||||||
@ -146,6 +147,9 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
|||||||
const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0;
|
const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0;
|
||||||
const hasEmailChanged = dirtyFields.email;
|
const hasEmailChanged = dirtyFields.email;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setFocus("token");
|
||||||
|
}, [setFocus]);
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user