thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: new sign-in, sign-up and forgot password workflows (#3415)

Browse Source 
* chore: sign up workflow updated

* chore: sign in workflow updated

* refactor: folder structure

* chore: forgot password workflow

* refactor: form component props

* chore: forgot password popover for instances with smtp unconfigured

* chore: updated UX copy

* chore: update reset password link

* chore: update email placeholder
This commit is contained in:
Aaryan Khandelwal 2024-01-19 20:55:03 +05:30 committed by sriram veeraghanta
parent 4a26f11e23
commit 577118ca02
36 changed files with 1022 additions and 763 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apiserver/plane/bgtasks/forgot_password_task.py
View File

@ -21,7 +21,7 @@ from plane.license.utils.instance_value import get_email_configuration
def forgot_password(first_name, email, uidb64, token, current_site):
try:
relative_link = (
f"/accounts/password/?uidb64={uidb64}&token={token}&email={email}"
f"/accounts/reset-password/?uidb64={uidb64}&token={token}&email={email}"
)
abs_url = str(current_site) + relative_link

10
packages/types/src/app.d.ts vendored
View File

@ -1,14 +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;
google_client_id: string | null;
has_openai_configured: boolean;
has_unsplash_configured: boolean;
is_smtp_configured: boolean;
magic_login: boolean;
posthog_api_key: string | null;
posthog_host: string | null;
slack_client_id: string | null;
}

2
space/components/accounts/sign-in-forms/create-password.tsx
View File

@ -101,7 +101,7 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
disabled
/>

2
space/components/accounts/sign-in-forms/email-form.tsx
View File

@ -100,7 +100,7 @@ export const EmailForm: React.FC<Props> = (props) => {
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
/>
{value.length > 0 && (

2
space/components/accounts/sign-in-forms/optional-set-password.tsx
View File

@ -61,7 +61,7 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 text-onboarding-text-400"
disabled
/>

2
space/components/accounts/sign-in-forms/password.tsx
View File

@ -155,7 +155,7 @@ export const PasswordForm: React.FC<Props> = (props) => {
value={value}
onChange={onChange}
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
/>
{value.length > 0 && (

2
space/components/accounts/sign-in-forms/self-hosted-sign-in.tsx
View File

@ -97,7 +97,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
value={value}
onChange={onChange}
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
/>
{value.length > 0 && (

2
space/components/accounts/sign-in-forms/set-password-link.tsx
View File

@ -87,7 +87,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
value={value}
onChange={onChange}
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
disabled
/>

2
space/components/accounts/sign-in-forms/unique-code.tsx
View File

@ -182,7 +182,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
}}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
/>
{value.length > 0 && (

2
space/pages/accounts/password.tsx
View File

@ -104,7 +104,7 @@ const HomePage: NextPage = () => {
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
disabled
/>

137
web/components/account/email-signup-form.tsx
View File

@ -1,137 +0,0 @@
import React from "react";
import Link from "next/link";
import { Controller, useForm } from "react-hook-form";
// ui
import { Button, Input } from "@plane/ui";
// types
type EmailPasswordFormValues = {
email: string;
password?: string;
confirm_password: string;
medium?: string;
};
type Props = {
onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
};
export const EmailSignUpForm: React.FC<Props> = (props) => {
const { onSubmit } = props;
const {
handleSubmit,
control,
watch,
formState: { errors, isSubmitting, isValid, isDirty },
} = useForm<EmailPasswordFormValues>({
defaultValues: {
email: "",
password: "",
confirm_password: "",
medium: "email",
},
mode: "onChange",
reValidateMode: "onChange",
});
return (
<>
<form className="mx-auto mt-10 w-full space-y-4 sm:w-[360px]" onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-1">
<Controller
control={control}
name="email"
rules={{
required: "Email address is required",
validate: (value) =>
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
value
) || "Email address is not valid",
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="email"
name="email"
type="email"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="Enter your email address..."
className="h-[46px] w-full border-custom-border-300"
/>
)}
/>
</div>
<div className="space-y-1">
<Controller
control={control}
name="password"
rules={{
required: "Password is required",
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="password"
name="password"
type="password"
value={value ?? ""}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.password)}
placeholder="Enter your password..."
className="h-[46px] w-full border-custom-border-300"
/>
)}
/>
</div>
<div className="space-y-1">
<Controller
control={control}
name="confirm_password"
rules={{
required: "Password is required",
validate: (val: string) => {
if (watch("password") != val) {
return "Your passwords do no match";
}
},
}}
render={({ field: { value, onChange, ref } }) => (
<Input
id="confirm_password"
name="confirm_password"
type="password"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.confirm_password)}
placeholder="Confirm your password..."
className="h-[46px] w-full border-custom-border-300"
/>
)}
/>
</div>
<div className="text-right text-xs">
<Link href="/">
<span className="text-custom-text-200 hover:text-custom-primary-100">
Already have an account? Sign in.
</span>
</Link>
</div>
<div>
<Button
variant="primary"
type="submit"
className="w-full"
size="xl"
disabled={!isValid && isDirty}
loading={isSubmitting}
>
{isSubmitting ? "Signing up..." : "Sign up"}
</Button>
</div>
</form>
</>
);
};

5
web/components/account/index.ts
View File

@ -1,5 +1,4 @@
export * from "./o-auth";
export * from "./sign-in-forms";
export * from "./sign-up-forms";
export * from "./deactivate-account-modal";
export * from "./github-sign-in";
export * from "./google-sign-in";
export * from "./email-signup-form";

5
web/components/account/github-sign-in.tsx → web/components/account/o-auth/github-sign-in.tsx
View File

@ -12,10 +12,11 @@ import githubDarkModeImage from "/public/logos/github-dark.svg";
type Props = {
handleSignIn: React.Dispatch<string>;
clientId: string;
type: "sign_in" | "sign_up";
};
export const GitHubSignInButton: FC<Props> = (props) => {
const { handleSignIn, clientId } = props;
const { handleSignIn, clientId, type } = props;
// states
const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
const [gitCode, setGitCode] = useState<null | string>(null);
@ -53,7 +54,7 @@ export const GitHubSignInButton: FC<Props> = (props) => {
width={20}
alt="GitHub Logo"
/>
<span className="text-onboarding-text-200">Sign-in with GitHub</span>
<span className="text-onboarding-text-200">{type === "sign_in" ? "Sign-in" : "Sign-up"} with GitHub</span>
</button>
</Link>
</div>

7
web/components/account/google-sign-in.tsx → web/components/account/o-auth/google-sign-in.tsx
View File

@ -4,10 +4,11 @@ import Script from "next/script";
type Props = {
handleSignIn: React.Dispatch<any>;
clientId: string;
type: "sign_in" | "sign_up";
};
export const GoogleSignInButton: FC<Props> = (props) => {
const { handleSignIn, clientId } = props;
const { handleSignIn, clientId, type } = props;
// refs
const googleSignInButton = useRef<HTMLDivElement>(null);
// states
@ -29,7 +30,7 @@ export const GoogleSignInButton: FC<Props> = (props) => {
theme: "outline",
size: "large",
logo_alignment: "center",
text: "signin_with",
text: type === "sign_in" ? "signin_with" : "signup_with",
width: 384,
} as GsiButtonConfiguration // customization attributes
);
@ -40,7 +41,7 @@ export const GoogleSignInButton: FC<Props> = (props) => {
window?.google?.accounts.id.prompt(); // also display the One Tap dialog
setGsiScriptLoaded(true);
}, [handleSignIn, gsiScriptLoaded, clientId]);
}, [handleSignIn, gsiScriptLoaded, clientId, type]);
useEffect(() => {
if (window?.google?.accounts?.id) {

3
web/components/account/o-auth/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from "./github-sign-in";
export * from "./google-sign-in";
export * from "./o-auth-options";

11
web/components/account/sign-in-forms/o-auth-options.tsx → web/components/account/o-auth/o-auth-options.tsx
View File

@ -9,13 +9,14 @@ import { GitHubSignInButton, GoogleSignInButton } from "components/account";
type Props = {
handleSignInRedirection: () => Promise<void>;
type: "sign_in" | "sign_up";
};
// services
const authService = new AuthService();
export const OAuthOptions: React.FC<Props> = observer((props) => {
const { handleSignInRedirection } = props;
const { handleSignInRedirection, type } = props;
// toast alert
const { setToastAlert } = useToast();
// mobx store
@ -72,12 +73,14 @@ export const OAuthOptions: React.FC<Props> = observer((props) => {
<p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">Or continue with</p>
<hr className="w-full border-onboarding-border-100" />
</div>
<div className="mx-auto mt-7 space-y-4 overflow-hidden sm:w-96">
<div className="mx-auto mt-7 grid grid-cols-2 gap-4 overflow-hidden sm:w-96">
{envConfig?.google_client_id && (
<GoogleSignInButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} />
<div className="h-[42px] flex items-center !overflow-hidden">
<GoogleSignInButton clientId={envConfig?.google_client_id} handleSignIn={handleGoogleSignIn} type={type} />
</div>
)}
{envConfig?.github_client_id && (
<GitHubSignInButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} />
<GitHubSignInButton clientId={envConfig?.github_client_id} handleSignIn={handleGitHubSignIn} type={type} />
)}
</div>
</>

110
web/components/account/sign-in-forms/email.tsx Normal file
View File

@ -0,0 +1,110 @@
import React from "react";
import { Controller, useForm } from "react-hook-form";
import { XCircle } from "lucide-react";
import { observer } from "mobx-react-lite";
// services
import { AuthService } from "services/auth.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 "@plane/types";
type Props = {
onSubmit: (isPasswordAutoset: boolean) => void;
updateEmail: (email: string) => void;
};
type TEmailFormValues = {
email: string;
};
const authService = new AuthService();
export const SignInEmailForm: React.FC<Props> = observer((props) => {
const { onSubmit, updateEmail } = props;
// hooks
const { setToastAlert } = useToast();
const {
control,
formState: { errors, isSubmitting, isValid },
handleSubmit,
} = 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) => onSubmit(res.is_password_autoset))
.catch((err) =>
setToastAlert({
type: "error",
title: "Error!",
message: err?.error ?? "Something went wrong. Please try again.",
})
);
};
return (
<>
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
Welcome back, let{"'"}s get you on board
</h1>
<p className="mt-2.5 text-center text-sm text-onboarding-text-200">
Get back to your issues, projects and workspaces.
</p>
<form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-8 space-y-4 sm:w-96">
<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 } }) => (
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
<Input
id="email"
name="email"
type="email"
value={value}
onChange={onChange}
hasError={Boolean(errors.email)}
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
autoFocus
/>
{value.length > 0 && (
<XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={() => onChange("")}
/>
)}
</div>
)}
/>
</div>
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
Continue
</Button>
</form>
</>
);
});

54
web/components/account/sign-in-forms/forgot-password-popover.tsx Normal file
View File

@ -0,0 +1,54 @@
import { Fragment, useState } from "react";
import { usePopper } from "react-popper";
import { Popover } from "@headlessui/react";
import { X } from "lucide-react";
export const ForgotPasswordPopover = () => {
// popper-js refs
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
// popper-js init
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: "right-start",
modifiers: [
{
name: "preventOverflow",
options: {
padding: 12,
},
},
],
});
return (
<Popover className="relative">
<Popover.Button as={Fragment}>
<button
type="button"
ref={setReferenceElement}
className="text-xs font-medium text-custom-primary-100 outline-none"
>
Forgot your password?
</button>
</Popover.Button>
<Popover.Panel className="fixed z-10">
{({ close }) => (
<div
className="border border-onboarding-border-300 bg-onboarding-background-100 rounded z-10 py-1 px-2 w-64 break-words flex items-start gap-3 text-left ml-3"
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<span className="flex-shrink-0">🤥</span>
<p className="text-xs">
We see that your god hasn{"'"}t enabled SMTP, we will not be able to send a password reset link
</p>
<button type="button" className="flex-shrink-0" onClick={() => close()}>
<X className="h-3 w-3 text-onboarding-text-200" />
</button>
</div>
)}
</Popover.Panel>
</Popover>
);
};

7
web/components/account/sign-in-forms/index.ts
View File

@ -1,9 +1,6 @@
export * from "./create-password";
export * from "./email-form";
export * from "./o-auth-options";
export * from "./email";
export * from "./forgot-password-popover";
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";

113
web/components/account/sign-in-forms/optional-set-password.tsx
View File

@ -1,36 +1,76 @@
import React, { useState } from "react";
import Link from "next/link";
import { Controller, useForm } from "react-hook-form";
// services
import { AuthService } from "services/auth.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/account";
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;
type TCreatePasswordFormValues = {
email: string;
password: string;
};
const defaultValues: TCreatePasswordFormValues = {
email: "",
password: "",
};
// services
const authService = new AuthService();
export const SignInOptionalSetPasswordForm: React.FC<Props> = (props) => {
const { email, handleSignInRedirection } = props;
// states
const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false);
// toast alert
const { setToastAlert } = useToast();
// form info
const {
control,
formState: { errors, isValid },
} = useForm({
formState: { errors, isSubmitting, isValid },
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.",
})
);
};
const handleGoToWorkspace = async () => {
setIsGoingToWorkspace(true);
@ -39,12 +79,11 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
return (
<>
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">Set a password</h1>
<p className="mt-2.5 px-20 text-center text-sm text-onboarding-text-200">
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">Set your password</h1>
<p className="mt-2.5 text-center text-sm text-onboarding-text-200">
If you{"'"}d like to do away with codes, set a password here.
</p>
<form className="mx-auto mt-5 space-y-4 sm:w-96">
<form onSubmit={handleSubmit(handleCreatePassword)} className="mx-auto mt-5 space-y-4 sm:w-96">
<Controller
control={control}
name="email"
@ -61,22 +100,47 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 text-onboarding-text-400"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
disabled
/>
)}
/>
<div className="grid grid-cols-2 gap-2.5">
<div>
<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="Enter password"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
minLength={8}
autoFocus
/>
)}
/>
<p className="text-onboarding-text-200 text-xs mt-2 pb-3">
Whatever you choose now will be your account{"'"}s password until you change it.
</p>
</div>
<div className="space-y-2.5">
<Button
type="button"
type="submit"
variant="primary"
onClick={() => handleStepChange(ESignInSteps.CREATE_PASSWORD)}
className="w-full"
size="xl"
disabled={!isValid}
loading={isSubmitting}
>
Create password
Set password
</Button>
<Button
type="button"
@ -84,20 +148,11 @@ export const OptionalSetPasswordForm: React.FC<Props> = (props) => {
className="w-full"
size="xl"
onClick={handleGoToWorkspace}
disabled={!isValid}
loading={isGoingToWorkspace}
>
{isOnboarded ? "Go to workspace" : "Set up workspace"}
Skip to workspace
</Button>
</div>
<p className="text-xs text-onboarding-text-200">
When you click{" "}
<span className="text-custom-primary-100">{isOnboarded ? "Go to workspace" : "Set up workspace"}</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>
</>
);

127
web/components/account/sign-in-forms/password.tsx
View File

@ -1,5 +1,6 @@
import React, { useEffect, useState } from "react";
import React, { useState } from "react";
import Link from "next/link";
import { observer } from "mobx-react-lite";
import { Controller, useForm } from "react-hook-form";
import { XCircle } from "lucide-react";
// services
@ -7,22 +8,20 @@ import { AuthService } from "services/auth.service";
// hooks
import useToast from "hooks/use-toast";
import { useApplication } from "hooks/store";
// components
import { ESignInSteps, ForgotPasswordPopover } from "components/account";
// ui
import { Button, Input } from "@plane/ui";
// helpers
import { checkEmailValidity } from "helpers/string.helper";
// types
import { IPasswordSignInData } from "@plane/types";
// constants
import { ESignInSteps } from "components/account";
import { observer } from "mobx-react-lite";
type Props = {
email: string;
updateEmail: (email: string) => void;
handleStepChange: (step: ESignInSteps) => void;
handleSignInRedirection: () => Promise<void>;
handleEmailClear: () => void;
onSubmit: () => Promise<void>;
};
type TPasswordFormValues = {
@ -37,24 +36,24 @@ const defaultValues: TPasswordFormValues = {
const authService = new AuthService();
export const PasswordForm: React.FC<Props> = observer((props) => {
const { email, updateEmail, handleStepChange, handleSignInRedirection, handleEmailClear } = props;
export const SignInPasswordForm: React.FC<Props> = observer((props) => {
const { email, handleStepChange, handleEmailClear, onSubmit } = props;
// states
const [isSendingUniqueCode, setIsSendingUniqueCode] = useState(false);
const [isSendingResetPasswordLink, setIsSendingResetPasswordLink] = useState(false);
// toast alert
const { setToastAlert } = useToast();
const {
config: { envConfig },
} = useApplication();
// derived values
const isSmtpConfigured = envConfig?.is_smtp_configured;
// form info
const {
control,
formState: { dirtyFields, errors, isSubmitting, isValid },
formState: { errors, isSubmitting, isValid },
getValues,
handleSubmit,
setError,
setFocus,
} = useForm<TPasswordFormValues>({
defaultValues: {
...defaultValues,
@ -65,8 +64,6 @@ export const PasswordForm: React.FC<Props> = observer((props) => {
});
const handleFormSubmit = async (formData: TPasswordFormValues) => {
updateEmail(formData.email);
const payload: IPasswordSignInData = {
email: formData.email,
password: formData.password,
@ -74,7 +71,7 @@ export const PasswordForm: React.FC<Props> = observer((props) => {
await authService
.passwordSignIn(payload)
.then(async () => await handleSignInRedirection())
.then(async () => await onSubmit())
.catch((err) =>
setToastAlert({
type: "error",
@ -84,31 +81,6 @@ export const PasswordForm: React.FC<Props> = observer((props) => {
);
};
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");
@ -134,16 +106,15 @@ export const PasswordForm: React.FC<Props> = observer((props) => {
.finally(() => setIsSendingUniqueCode(false));
};
useEffect(() => {
setFocus("password");
}, [setFocus]);
return (
<>
<h1 className="sm:text-2.5xl text-center text-2xl font-semibold text-onboarding-text-100">
Get on your flight deck
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
Welcome back, let{"'"}s get you on board
</h1>
<form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-11 space-y-4 sm:w-96">
<p className="mt-2.5 text-center text-sm text-onboarding-text-200">
Get back to your issues, projects and workspaces.
</p>
<form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-5 space-y-4 sm:w-96">
<div>
<Controller
control={control}
@ -161,14 +132,17 @@ export const PasswordForm: React.FC<Props> = observer((props) => {
value={value}
onChange={onChange}
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
disabled
disabled={isSmtpConfigured}
/>
{value.length > 0 && (
<XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={handleEmailClear}
onClick={() => {
if (isSmtpConfigured) handleEmailClear();
else onChange("");
}}
/>
)}
</div>
@ -180,7 +154,7 @@ export const PasswordForm: React.FC<Props> = observer((props) => {
control={control}
name="password"
rules={{
required: dirtyFields.email ? false : "Password is required",
required: "Password is required",
}}
render={({ field: { value, onChange } }) => (
<Input
@ -190,23 +164,34 @@ export const PasswordForm: React.FC<Props> = observer((props) => {
hasError={Boolean(errors.password)}
placeholder="Enter password"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
autoFocus
/>
)}
/>
<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 className="w-full text-right mt-2 pb-3">
{isSmtpConfigured ? (
<Link
href={`/accounts/forgot-password?email=${email}`}
className="text-xs font-medium text-custom-primary-100"
>
Forgot your password?
</Link>
) : (
<ForgotPasswordPopover />
)}
</div>
</div>
<div className="flex gap-4">
<div className="space-y-2.5">
<Button
type="submit"
variant="primary"
className="w-full"
size="xl"
disabled={!isValid}
loading={isSubmitting}
>
{envConfig?.is_smtp_configured ? "Continue" : "Go to workspace"}
</Button>
{envConfig && envConfig.is_smtp_configured && (
<Button
type="button"
@ -216,26 +201,10 @@ export const PasswordForm: React.FC<Props> = observer((props) => {
size="xl"
loading={isSendingUniqueCode}
>
{isSendingUniqueCode ? "Sending code" : "Use unique code"}
{isSendingUniqueCode ? "Sending code" : "Sign in with unique code"}
</Button>
)}
<Button
type="submit"
variant="primary"
className="w-full"
size="xl"
disabled={!isValid}
loading={isSubmitting}
>
Continue
</Button>
</div>
<p className="text-xs text-onboarding-text-200">
When you click <span className="text-custom-primary-100">Go to workspace</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>
</>
);

121
web/components/account/sign-in-forms/root.tsx
View File

@ -1,4 +1,5 @@
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
import Link from "next/link";
import { observer } from "mobx-react-lite";
// hooks
import { useApplication } from "hooks/store";
@ -6,115 +7,115 @@ import useSignInRedirection from "hooks/use-sign-in-redirection";
// components
import { LatestFeatureBlock } from "components/common";
import {
EmailForm,
UniqueCodeForm,
PasswordForm,
SetPasswordLink,
SignInEmailForm,
SignInUniqueCodeForm,
SignInPasswordForm,
OAuthOptions,
OptionalSetPasswordForm,
CreatePasswordForm,
SignInOptionalSetPasswordForm,
} from "components/account";
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];
export const SignInRoot = observer(() => {
// states
const [signInStep, setSignInStep] = useState<ESignInSteps>(ESignInSteps.EMAIL);
const [signInStep, setSignInStep] = useState<ESignInSteps | null>(null);
const [email, setEmail] = useState("");
const [isOnboarded, setIsOnboarded] = useState(false);
// sign in redirection hook
const { handleRedirection } = useSignInRedirection();
// mobx store
const {
config: { envConfig },
} = useApplication();
// derived values
const isSmtpConfigured = envConfig?.is_smtp_configured;
// step 1 submit handler- email verification
const handleEmailVerification = (isPasswordAutoset: boolean) => {
if (isSmtpConfigured && isPasswordAutoset) setSignInStep(ESignInSteps.UNIQUE_CODE);
else setSignInStep(ESignInSteps.PASSWORD);
};
// step 2 submit handler- unique code sign in
const handleUniqueCodeSignIn = async (isPasswordAutoset: boolean) => {
if (isPasswordAutoset) setSignInStep(ESignInSteps.OPTIONAL_SET_PASSWORD);
else await handleRedirection();
};
// step 3 submit handler- password sign in
const handlePasswordSignIn = async () => {
await handleRedirection();
};
const isOAuthEnabled = envConfig && (envConfig.google_client_id || envConfig.github_client_id);
useEffect(() => {
if (isSmtpConfigured) setSignInStep(ESignInSteps.EMAIL);
else setSignInStep(ESignInSteps.PASSWORD);
}, [isSmtpConfigured]);
return (
<>
<div className="mx-auto flex flex-col">
<>
{signInStep === ESignInSteps.EMAIL && (
<EmailForm
handleStepChange={(step) => setSignInStep(step)}
updateEmail={(newEmail) => setEmail(newEmail)}
<SignInEmailForm onSubmit={handleEmailVerification} updateEmail={(newEmail) => setEmail(newEmail)} />
)}
{signInStep === ESignInSteps.UNIQUE_CODE && (
<SignInUniqueCodeForm
email={email}
handleEmailClear={() => {
setEmail("");
setSignInStep(ESignInSteps.EMAIL);
}}
onSubmit={handleUniqueCodeSignIn}
submitButtonText="Continue"
/>
)}
{signInStep === ESignInSteps.PASSWORD && (
<PasswordForm
<SignInPasswordForm
email={email}
updateEmail={(newEmail) => setEmail(newEmail)}
handleStepChange={(step) => setSignInStep(step)}
handleEmailClear={() => {
setEmail("");
setSignInStep(ESignInSteps.EMAIL);
}}
handleSignInRedirection={handleRedirection}
onSubmit={handlePasswordSignIn}
handleStepChange={(step) => setSignInStep(step)}
/>
)}
{signInStep === ESignInSteps.SET_PASSWORD_LINK && (
<SetPasswordLink email={email} updateEmail={(newEmail) => setEmail(newEmail)} />
)}
{signInStep === ESignInSteps.USE_UNIQUE_CODE_FROM_PASSWORD && (
<UniqueCodeForm
<SignInUniqueCodeForm
email={email}
updateEmail={(newEmail) => setEmail(newEmail)}
handleStepChange={(step) => setSignInStep(step)}
handleSignInRedirection={handleRedirection}
submitButtonLabel="Go to workspace"
showTermsAndConditions
updateUserOnboardingStatus={(value) => setIsOnboarded(value)}
handleEmailClear={() => {
setEmail("");
setSignInStep(ESignInSteps.EMAIL);
}}
/>
)}
{signInStep === ESignInSteps.UNIQUE_CODE && (
<UniqueCodeForm
email={email}
updateEmail={(newEmail) => setEmail(newEmail)}
handleStepChange={(step) => setSignInStep(step)}
handleSignInRedirection={handleRedirection}
updateUserOnboardingStatus={(value) => setIsOnboarded(value)}
handleEmailClear={() => {
setEmail("");
setSignInStep(ESignInSteps.EMAIL);
}}
onSubmit={handleUniqueCodeSignIn}
submitButtonText="Go to workspace"
/>
)}
{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}
/>
<SignInOptionalSetPasswordForm email={email} handleSignInRedirection={handleRedirection} />
)}
</>
</div>
{isOAuthEnabled && !OAUTH_HIDDEN_STEPS.includes(signInStep) && (
<OAuthOptions handleSignInRedirection={handleRedirection} />
)}
{isOAuthEnabled &&
(signInStep === ESignInSteps.EMAIL || (!isSmtpConfigured && signInStep === ESignInSteps.PASSWORD)) && (
<>
<OAuthOptions handleSignInRedirection={handleRedirection} type="sign_in" />
<p className="text-xs text-onboarding-text-300 text-center mt-6">
Don{"'"}t have an account?{" "}
<Link href="/accounts/sign-up" className="text-custom-primary-100 font-medium underline">
Sign up
</Link>
</p>
</>
)}
<LatestFeatureBlock />
</>
);

103
web/components/account/sign-in-forms/set-password-link.tsx
View File

@ -1,103 +0,0 @@
import React from "react";
import { Controller, useForm } from "react-hook-form";
// services
import { AuthService } from "services/auth.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 "@plane/types";
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="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
Get on your flight deck
</h1>
<p className="mt-2.5 px-20 text-center text-sm text-onboarding-text-200">
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="mx-auto mt-5 space-y-4 sm:w-96">
<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@frstflt.com"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
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>
</>
);
};

93
web/components/account/sign-in-forms/unique-code.tsx
View File

@ -1,7 +1,6 @@
import React, { useEffect, useState } from "react";
import Link from "next/link";
import React, { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { CornerDownLeft, XCircle } from "lucide-react";
import { XCircle } from "lucide-react";
// services
import { AuthService } from "services/auth.service";
import { UserService } from "services/user.service";
@ -14,18 +13,12 @@ import { Button, Input } from "@plane/ui";
import { checkEmailValidity } from "helpers/string.helper";
// types
import { IEmailCheckData, IMagicSignInData } from "@plane/types";
// constants
import { ESignInSteps } from "components/account";
type Props = {
email: string;
updateEmail: (email: string) => void;
handleStepChange: (step: ESignInSteps) => void;
handleSignInRedirection: () => Promise<void>;
submitButtonLabel?: string;
showTermsAndConditions?: boolean;
updateUserOnboardingStatus: (value: boolean) => void;
onSubmit: (isPasswordAutoset: boolean) => Promise<void>;
handleEmailClear: () => void;
submitButtonText: string;
};
type TUniqueCodeFormValues = {
@ -42,17 +35,8 @@ const defaultValues: TUniqueCodeFormValues = {
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,
handleEmailClear,
} = props;
export const SignInUniqueCodeForm: React.FC<Props> = (props) => {
const { email, onSubmit, handleEmailClear, submitButtonText } = props;
// states
const [isRequestingNewCode, setIsRequestingNewCode] = useState(false);
// toast alert
@ -62,11 +46,10 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
// form info
const {
control,
formState: { dirtyFields, errors, isSubmitting, isValid },
formState: { errors, isSubmitting, isValid },
getValues,
handleSubmit,
reset,
setFocus,
} = useForm<TUniqueCodeFormValues>({
defaultValues: {
...defaultValues,
@ -88,10 +71,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
.then(async () => {
const currentUser = await userService.currentUser();
updateUserOnboardingStatus(currentUser.is_onboarded);
if (currentUser.is_password_autoset) handleStepChange(ESignInSteps.OPTIONAL_SET_PASSWORD);
else await handleSignInRedirection();
await onSubmit(currentUser.is_password_autoset);
})
.catch((err) =>
setToastAlert({
@ -131,13 +111,6 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
);
};
const handleFormSubmit = async (formData: TUniqueCodeFormValues) => {
updateEmail(formData.email);
if (dirtyFields.email) await handleSendNewCode(formData);
else await handleUniqueCodeSignIn(formData);
};
const handleRequestNewCode = async () => {
setIsRequestingNewCode(true);
@ -147,21 +120,16 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
};
const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0;
const hasEmailChanged = dirtyFields.email;
useEffect(() => {
setFocus("token");
}, [setFocus]);
return (
<>
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
Get on your flight deck
</h1>
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">Moving to the runway</h1>
<p className="mt-2.5 text-center text-sm text-onboarding-text-200">
Paste the code you got at <span className="font-semibold text-custom-primary-100">{email}</span> below.
Paste the code you got at
<br />
<span className="font-semibold text-custom-primary-100">{email}</span> below.
</p>
<form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-5 space-y-4 sm:w-96">
<form onSubmit={handleSubmit(handleUniqueCodeSignIn)} className="mx-auto mt-5 space-y-4 sm:w-96">
<div>
<Controller
control={control}
@ -178,12 +146,9 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
type="email"
value={value}
onChange={onChange}
onBlur={() => {
if (hasEmailChanged) handleSendNewCode(getValues());
}}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
disabled
/>
@ -196,21 +161,13 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
</div>
)}
/>
{hasEmailChanged && (
<button
type="submit"
className="mt-1.5 flex items-center gap-1 border-none bg-transparent text-xs text-onboarding-text-300 outline-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",
required: "Code is required",
}}
render={({ field: { value, onChange } }) => (
<Input
@ -219,6 +176,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
hasError={Boolean(errors.token)}
placeholder="gets-sets-flys"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
autoFocus
/>
)}
/>
@ -241,24 +199,9 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
</button>
</div>
</div>
<Button
type="submit"
variant="primary"
className="w-full"
size="xl"
disabled={!isValid || hasEmailChanged}
loading={isSubmitting}
>
{submitButtonLabel}
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
{submitButtonText}
</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>
</>
);

36
web/components/account/sign-in-forms/email-form.tsx → web/components/account/sign-up-forms/email.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React from "react";
import { Controller, useForm } from "react-hook-form";
import { XCircle } from "lucide-react";
import { observer } from "mobx-react-lite";
@ -6,18 +6,15 @@ import { observer } from "mobx-react-lite";
import { AuthService } from "services/auth.service";
// hooks
import useToast from "hooks/use-toast";
import { useApplication } from "hooks/store";
// ui
import { Button, Input } from "@plane/ui";
// helpers
import { checkEmailValidity } from "helpers/string.helper";
// types
import { IEmailCheckData } from "@plane/types";
// constants
import { ESignInSteps } from "components/account";
type Props = {
handleStepChange: (step: ESignInSteps) => void;
onSubmit: () => void;
updateEmail: (email: string) => void;
};
@ -27,18 +24,14 @@ type TEmailFormValues = {
const authService = new AuthService();
export const EmailForm: React.FC<Props> = observer((props) => {
const { handleStepChange, updateEmail } = props;
export const SignUpEmailForm: React.FC<Props> = observer((props) => {
const { onSubmit, updateEmail } = props;
// hooks
const { setToastAlert } = useToast();
const {
config: { envConfig },
} = useApplication();
const {
control,
formState: { errors, isSubmitting, isValid },
handleSubmit,
setFocus,
} = useForm<TEmailFormValues>({
defaultValues: {
email: "",
@ -57,14 +50,7 @@ export const EmailForm: React.FC<Props> = observer((props) => {
await authService
.emailCheck(payload)
.then((res) => {
// if the password has been auto set, send the user to magic sign-in
if (res.is_password_autoset && envConfig?.is_smtp_configured) {
handleStepChange(ESignInSteps.UNIQUE_CODE);
}
// if the password has not been auto set, send them to password sign-in
else handleStepChange(ESignInSteps.PASSWORD);
})
.then(() => onSubmit())
.catch((err) =>
setToastAlert({
type: "error",
@ -74,10 +60,6 @@ export const EmailForm: React.FC<Props> = observer((props) => {
);
};
useEffect(() => {
setFocus("email");
}, [setFocus]);
return (
<>
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
@ -96,7 +78,7 @@ export const EmailForm: React.FC<Props> = observer((props) => {
required: "Email is required",
validate: (value) => checkEmailValidity(value) || "Email is invalid",
}}
render={({ field: { value, onChange, ref } }) => (
render={({ field: { value, onChange } }) => (
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
<Input
id="email"
@ -104,10 +86,10 @@ export const EmailForm: React.FC<Props> = observer((props) => {
type="email"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
autoFocus
/>
{value.length > 0 && (
<XCircle
@ -120,7 +102,7 @@ export const EmailForm: React.FC<Props> = observer((props) => {
/>
</div>
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
Continue
Verify
</Button>
</form>
</>

5
web/components/account/sign-up-forms/index.ts Normal file
View File

@ -0,0 +1,5 @@
export * from "./email";
export * from "./optional-set-password";
export * from "./password";
export * from "./root";
export * from "./unique-code";

110
web/components/account/sign-in-forms/create-password.tsx → web/components/account/sign-up-forms/optional-set-password.tsx
View File

@ -1,5 +1,4 @@
import React, { useEffect } from "react";
import Link from "next/link";
import React, { useState } from "react";
import { Controller, useForm } from "react-hook-form";
// services
import { AuthService } from "services/auth.service";
@ -10,13 +9,12 @@ import { Button, Input } from "@plane/ui";
// helpers
import { checkEmailValidity } from "helpers/string.helper";
// constants
import { ESignInSteps } from "components/account";
import { ESignUpSteps } from "components/account";
type Props = {
email: string;
handleStepChange: (step: ESignInSteps) => void;
handleStepChange: (step: ESignUpSteps) => void;
handleSignInRedirection: () => Promise<void>;
isOnboarded: boolean;
};
type TCreatePasswordFormValues = {
@ -32,8 +30,10 @@ const defaultValues: TCreatePasswordFormValues = {
// services
const authService = new AuthService();
export const CreatePasswordForm: React.FC<Props> = (props) => {
const { email, handleSignInRedirection, isOnboarded } = props;
export const SignUpOptionalSetPasswordForm: React.FC<Props> = (props) => {
const { email, handleSignInRedirection } = props;
// states
const [isGoingToWorkspace, setIsGoingToWorkspace] = useState(false);
// toast alert
const { setToastAlert } = useToast();
// form info
@ -41,7 +41,6 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
control,
formState: { errors, isSubmitting, isValid },
handleSubmit,
setFocus,
} = useForm<TCreatePasswordFormValues>({
defaultValues: {
...defaultValues,
@ -75,16 +74,21 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
);
};
useEffect(() => {
setFocus("password");
}, [setFocus]);
const handleGoToWorkspace = async () => {
setIsGoingToWorkspace(true);
await handleSignInRedirection().finally(() => setIsGoingToWorkspace(false));
};
return (
<>
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
Get on your flight deck
</h1>
<form onSubmit={handleSubmit(handleCreatePassword)} className="mx-auto mt-11 space-y-4 sm:w-96">
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">Moving to the runway</h1>
<p className="mt-2.5 text-center text-sm text-onboarding-text-200">
Let{"'"}s set a password so
<br />
you can do away with codes.
</p>
<form onSubmit={handleSubmit(handleCreatePassword)} className="mx-auto mt-5 space-y-4 sm:w-96">
<Controller
control={control}
name="email"
@ -101,40 +105,58 @@ export const CreatePasswordForm: React.FC<Props> = (props) => {
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
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="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
minLength={8}
/>
)}
/>
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
{isOnboarded ? "Go to workspace" : "Set up workspace"}
</Button>
<p className="text-xs text-onboarding-text-200">
When you click the button above, you agree with our{" "}
<Link href="https://plane.so/terms-and-conditions" target="_blank" rel="noopener noreferrer">
<span className="font-semibold underline">terms and conditions of service.</span>
</Link>
</p>
<div>
<Controller
control={control}
name="password"
rules={{
required: "Password is required",
}}
render={({ field: { value, onChange } }) => (
<Input
type="password"
value={value}
onChange={onChange}
hasError={Boolean(errors.password)}
placeholder="Enter password"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
minLength={8}
autoFocus
/>
)}
/>
<p className="text-onboarding-text-200 text-xs mt-2 pb-3">
This password will continue to be your account{"'"}s password.
</p>
</div>
<div className="space-y-2.5">
<Button
type="submit"
variant="primary"
className="w-full"
size="xl"
disabled={!isValid}
loading={isSubmitting}
>
Set password
</Button>
<Button
type="button"
variant="outline-primary"
className="w-full"
size="xl"
onClick={handleGoToWorkspace}
loading={isGoingToWorkspace}
>
Skip to setup
</Button>
</div>
</form>
</>
);

44
web/components/account/sign-in-forms/self-hosted-sign-in.tsx → web/components/account/sign-up-forms/password.tsx
View File

@ -1,5 +1,6 @@
import React, { useEffect } from "react";
import React from "react";
import Link from "next/link";
import { observer } from "mobx-react-lite";
import { Controller, useForm } from "react-hook-form";
import { XCircle } from "lucide-react";
// services
@ -14,9 +15,7 @@ import { checkEmailValidity } from "helpers/string.helper";
import { IPasswordSignInData } from "@plane/types";
type Props = {
email: string;
updateEmail: (email: string) => void;
handleSignInRedirection: () => Promise<void>;
onSubmit: () => Promise<void>;
};
type TPasswordFormValues = {
@ -31,20 +30,18 @@ const defaultValues: TPasswordFormValues = {
const authService = new AuthService();
export const SelfHostedSignInForm: React.FC<Props> = (props) => {
const { email, updateEmail, handleSignInRedirection } = props;
export const SignUpPasswordForm: React.FC<Props> = observer((props) => {
const { onSubmit } = props;
// toast alert
const { setToastAlert } = useToast();
// form info
const {
control,
formState: { dirtyFields, errors, isSubmitting },
formState: { errors, isSubmitting, isValid },
handleSubmit,
setFocus,
} = useForm<TPasswordFormValues>({
defaultValues: {
...defaultValues,
email,
},
mode: "onChange",
reValidateMode: "onChange",
@ -56,11 +53,9 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
password: formData.password,
};
updateEmail(formData.email);
await authService
.passwordSignIn(payload)
.then(async () => await handleSignInRedirection())
.then(async () => await onSubmit())
.catch((err) =>
setToastAlert({
type: "error",
@ -70,16 +65,15 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
);
};
useEffect(() => {
setFocus("email");
}, [setFocus]);
return (
<>
<h1 className="sm:text-2.5xl text-center text-2xl font-semibold text-onboarding-text-100">
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
Get on your flight deck
</h1>
<form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-11 space-y-4 sm:w-96">
<p className="mt-2.5 text-center text-sm text-onboarding-text-200">
Create or join a workspace. Start with your e-mail.
</p>
<form onSubmit={handleSubmit(handleFormSubmit)} className="mx-auto mt-5 space-y-4 sm:w-96">
<div>
<Controller
control={control}
@ -97,7 +91,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
value={value}
onChange={onChange}
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
/>
{value.length > 0 && (
@ -115,7 +109,7 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
control={control}
name="password"
rules={{
required: dirtyFields.email ? false : "Password is required",
required: "Password is required",
}}
render={({ field: { value, onChange } }) => (
<Input
@ -125,12 +119,16 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
hasError={Boolean(errors.password)}
placeholder="Enter password"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
autoFocus
/>
)}
/>
<p className="text-onboarding-text-200 text-xs mt-2 pb-3">
This password will continue to be your account{"'"}s password.
</p>
</div>
<Button type="submit" variant="primary" className="w-full" size="xl" loading={isSubmitting}>
Continue
<Button type="submit" variant="primary" className="w-full" size="xl" disabled={!isValid} loading={isSubmitting}>
Create account
</Button>
<p className="text-xs text-onboarding-text-200">
When you click the button above, you agree with our{" "}
@ -141,4 +139,4 @@ export const SelfHostedSignInForm: React.FC<Props> = (props) => {
</form>
</>
);
};
});

97
web/components/account/sign-up-forms/root.tsx Normal file
View File

@ -0,0 +1,97 @@
import React, { useEffect, useState } from "react";
import { observer } from "mobx-react-lite";
// hooks
import { useApplication } from "hooks/store";
import useSignInRedirection from "hooks/use-sign-in-redirection";
// components
import {
OAuthOptions,
SignUpEmailForm,
SignUpOptionalSetPasswordForm,
SignUpPasswordForm,
SignUpUniqueCodeForm,
} from "components/account";
import Link from "next/link";
export enum ESignUpSteps {
EMAIL = "EMAIL",
UNIQUE_CODE = "UNIQUE_CODE",
PASSWORD = "PASSWORD",
OPTIONAL_SET_PASSWORD = "OPTIONAL_SET_PASSWORD",
}
const OAUTH_ENABLED_STEPS = [ESignUpSteps.EMAIL];
export const SignUpRoot = observer(() => {
// states
const [signInStep, setSignInStep] = useState<ESignUpSteps | null>(null);
const [email, setEmail] = useState("");
// sign in redirection hook
const { handleRedirection } = useSignInRedirection();
// mobx store
const {
config: { envConfig },
} = useApplication();
// step 1 submit handler- email verification
const handleEmailVerification = () => setSignInStep(ESignUpSteps.UNIQUE_CODE);
// step 2 submit handler- unique code sign in
const handleUniqueCodeSignIn = async (isPasswordAutoset: boolean) => {
if (isPasswordAutoset) setSignInStep(ESignUpSteps.OPTIONAL_SET_PASSWORD);
else await handleRedirection();
};
// step 3 submit handler- password sign in
const handlePasswordSignIn = async () => {
await handleRedirection();
};
const isOAuthEnabled = envConfig && (envConfig.google_client_id || envConfig.github_client_id);
useEffect(() => {
if (envConfig?.is_smtp_configured) setSignInStep(ESignUpSteps.EMAIL);
else setSignInStep(ESignUpSteps.PASSWORD);
}, [envConfig?.is_smtp_configured]);
return (
<>
<div className="mx-auto flex flex-col">
<>
{signInStep === ESignUpSteps.EMAIL && (
<SignUpEmailForm onSubmit={handleEmailVerification} updateEmail={(newEmail) => setEmail(newEmail)} />
)}
{signInStep === ESignUpSteps.UNIQUE_CODE && (
<SignUpUniqueCodeForm
email={email}
handleEmailClear={() => {
setEmail("");
setSignInStep(ESignUpSteps.EMAIL);
}}
onSubmit={handleUniqueCodeSignIn}
/>
)}
{signInStep === ESignUpSteps.PASSWORD && <SignUpPasswordForm onSubmit={handlePasswordSignIn} />}
{signInStep === ESignUpSteps.OPTIONAL_SET_PASSWORD && (
<SignUpOptionalSetPasswordForm
email={email}
handleSignInRedirection={handleRedirection}
handleStepChange={(step) => setSignInStep(step)}
/>
)}
</>
</div>
{isOAuthEnabled && signInStep && OAUTH_ENABLED_STEPS.includes(signInStep) && (
<>
<OAuthOptions handleSignInRedirection={handleRedirection} type="sign_up" />
<p className="text-xs text-onboarding-text-300 text-center mt-6">
Already using Plane?{" "}
<Link href="/" className="text-custom-primary-100 font-medium underline">
Sign in
</Link>
</p>
</>
)}
</>
);
});

215
web/components/account/sign-up-forms/unique-code.tsx Normal file
View File

@ -0,0 +1,215 @@
import React, { 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/auth.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 "@plane/types";
type Props = {
email: string;
handleEmailClear: () => void;
onSubmit: (isPasswordAutoset: boolean) => Promise<void>;
};
type TUniqueCodeFormValues = {
email: string;
token: string;
};
const defaultValues: TUniqueCodeFormValues = {
email: "",
token: "",
};
// services
const authService = new AuthService();
const userService = new UserService();
export const SignUpUniqueCodeForm: React.FC<Props> = (props) => {
const { email, handleEmailClear, onSubmit } = 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: { errors, isSubmitting, isValid },
getValues,
handleSubmit,
reset,
} = 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();
await onSubmit(currentUser.is_password_autoset);
})
.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 handleRequestNewCode = async () => {
setIsRequestingNewCode(true);
await handleSendNewCode(getValues())
.then(() => setResendCodeTimer(30))
.finally(() => setIsRequestingNewCode(false));
};
const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0;
return (
<>
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">Moving to the runway</h1>
<p className="mt-2.5 text-center text-sm text-onboarding-text-200">
Paste the code you got at
<br />
<span className="font-semibold text-custom-primary-100">{email}</span> below.
</p>
<form onSubmit={handleSubmit(handleUniqueCodeSignIn)} className="mx-auto mt-5 space-y-4 sm:w-96">
<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="relative flex items-center rounded-md bg-onboarding-background-200">
<Input
id="email"
name="email"
type="email"
value={value}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
disabled
/>
{value.length > 0 && (
<XCircle
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
onClick={handleEmailClear}
/>
)}
</div>
)}
/>
</div>
<div>
<Controller
control={control}
name="token"
rules={{
required: "Code is required",
}}
render={({ field: { value, onChange } }) => (
<Input
value={value}
onChange={onChange}
hasError={Boolean(errors.token)}
placeholder="gets-sets-flys"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
autoFocus
/>
)}
/>
<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} loading={isSubmitting}>
Create account
</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>
</>
);
};

2
web/components/instance/setup-form/sign-in-form.tsx
View File

@ -88,7 +88,7 @@ export const InstanceSetupSignInForm: FC<IInstanceSetupEmailForm> = (props) => {
type="email"
value={value}
onChange={onChange}
placeholder="orville.wright@frstflt.com"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
/>
{value.length > 0 && (

26
web/components/page-views/signin.tsx
View File

@ -7,7 +7,7 @@ import useSignInRedirection from "hooks/use-sign-in-redirection";
// components
import { SignInRoot } from "components/account";
// ui
import { Loader, Spinner } from "@plane/ui";
import { Spinner } from "@plane/ui";
// images
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
@ -26,7 +26,7 @@ export const SignInView = observer(() => {
handleRedirection();
}, [handleRedirection]);
if (isRedirecting || currentUser)
if (isRedirecting || currentUser || !envConfig)
return (
<div className="grid h-screen place-items-center">
<Spinner />
@ -35,32 +35,16 @@ export const SignInView = observer(() => {
return (
<div className="h-full w-full bg-onboarding-gradient-100">
<div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28 ">
<div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">
<div className="flex items-center gap-x-2 py-10">
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
<span className="text-2xl font-semibold sm:text-3xl">Plane</span>
</div>
</div>
<div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
<div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3">
<div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
{!envConfig ? (
<div className="mx-auto flex justify-center pt-10">
<div>
<Loader className="mx-auto w-full space-y-4 pb-4">
<Loader.Item height="46px" width="360px" />
<Loader.Item height="46px" width="360px" />
</Loader>
<Loader className="mx-auto w-full space-y-4 pt-4">
<Loader.Item height="46px" width="360px" />
<Loader.Item height="46px" width="360px" />
</Loader>
</div>
</div>
) : (
<SignInRoot />
)}
<SignInRoot />
</div>
</div>
</div>

138
web/pages/accounts/forgot-password.tsx Normal file
View File

@ -0,0 +1,138 @@
import { ReactElement } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
import { Controller, useForm } from "react-hook-form";
// services
import { AuthService } from "services/auth.service";
// hooks
import useToast from "hooks/use-toast";
import useTimer from "hooks/use-timer";
// layouts
import DefaultLayout from "layouts/default-layout";
// components
import { LatestFeatureBlock } from "components/common";
// ui
import { Button, Input } from "@plane/ui";
// images
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
// helpers
import { checkEmailValidity } from "helpers/string.helper";
// type
import { NextPageWithLayout } from "lib/types";
type TForgotPasswordFormValues = {
email: string;
};
const defaultValues: TForgotPasswordFormValues = {
email: "",
};
// services
const authService = new AuthService();
const ForgotPasswordPage: NextPageWithLayout = () => {
// router
const router = useRouter();
const { email } = router.query;
// toast
const { setToastAlert } = useToast();
// timer
const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(0);
// form info
const {
control,
formState: { errors, isSubmitting, isValid },
handleSubmit,
} = useForm<TForgotPasswordFormValues>({
defaultValues: {
...defaultValues,
email: email?.toString() ?? "",
},
});
const handleForgotPassword = async (formData: TForgotPasswordFormValues) => {
await authService
.sendResetPasswordLink({
email: formData.email,
})
.then(() => {
setToastAlert({
type: "success",
title: "Email sent",
message:
"Check your inbox for a link to reset your password. If it doesn't appear within a few minutes, check your spam folder.",
});
setResendCodeTimer(30);
})
.catch((err) =>
setToastAlert({
type: "error",
title: "Error!",
message: err?.error ?? "Something went wrong. Please try again.",
})
);
};
return (
<div className="h-full w-full bg-onboarding-gradient-100">
<div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28 ">
<div className="flex items-center gap-x-2 py-10">
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
<span className="text-2xl font-semibold sm:text-3xl">Plane</span>
</div>
</div>
<div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3 ">
<div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
<div className="mx-auto flex flex-col divide-y divide-custom-border-200 sm:w-96">
<h1 className="sm:text-2.5xl text-center text-2xl font-medium text-onboarding-text-100">
Get on your flight deck
</h1>
<p className="mt-2.5 text-center text-sm text-onboarding-text-200">Get a link to reset your password</p>
<form onSubmit={handleSubmit(handleForgotPassword)} className="mx-auto mt-5 space-y-4 sm:w-96">
<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="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
/>
)}
/>
<Button
type="submit"
variant="primary"
className="w-full"
size="xl"
disabled={!isValid}
loading={isSubmitting || resendTimerCode > 0}
>
{resendTimerCode > 0 ? `Request new link in ${resendTimerCode}s` : "Get link"}
</Button>
</form>
</div>
<LatestFeatureBlock />
</div>
</div>
</div>
);
};
ForgotPasswordPage.getLayout = function getLayout(page: ReactElement) {
return <DefaultLayout>{page}</DefaultLayout>;
};
export default ForgotPasswordPage;

86
web/pages/accounts/password.tsx → web/pages/accounts/reset-password.tsx
View File

@ -1,9 +1,6 @@
import { ReactElement } from "react";
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/auth.service";
@ -12,11 +9,12 @@ import useToast from "hooks/use-toast";
import useSignInRedirection from "hooks/use-sign-in-redirection";
// layouts
import DefaultLayout from "layouts/default-layout";
// components
import { LatestFeatureBlock } from "components/common";
// 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
@ -35,12 +33,10 @@ const defaultValues: TResetPasswordFormValues = {
// services
const authService = new AuthService();
const HomePage: NextPageWithLayout = () => {
const ResetPasswordPage: NextPageWithLayout = () => {
// router
const router = useRouter();
const { uidb64, token, email } = router.query;
// next-themes
const { resolvedTheme } = useTheme();
// toast
const { setToastAlert } = useToast();
// sign in redirection hook
@ -108,35 +104,30 @@ const HomePage: NextPageWithLayout = () => {
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@frstflt.com"
placeholder="name@company.com"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400"
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="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
minLength={8}
/>
)}
/>
<p className="mt-3 text-xs text-onboarding-text-200">
Whatever you choose now will be your account{"'"}s password until you change it.
</p>
</div>
<Controller
control={control}
name="password"
rules={{
required: "Password is required",
}}
render={({ field: { value, onChange } }) => (
<Input
type="password"
value={value}
onChange={onChange}
hasError={Boolean(errors.password)}
placeholder="Enter password"
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
minLength={8}
/>
)}
/>
<Button
type="submit"
variant="primary"
@ -145,44 +136,19 @@ const HomePage: NextPageWithLayout = () => {
disabled={!isValid}
loading={isSubmitting}
>
{isSubmitting ? "Signing in..." : "Go to workspace"}
Set password
</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="mx-auto mt-16 flex rounded-[3.5px] border border-onboarding-border-200 bg-onboarding-background-100 py-2 sm:w-96">
<Lightbulb className="mx-3 mr-2 h-7 w-7" />
<p className="text-left text-sm 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="text-sm font-medium underline hover:cursor-pointer">See new features</span>
</Link>
</p>
</div>
<div className="mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 bg-onboarding-background-100 object-cover sm:h-52 sm:w-96">
<div className="h-[90%]">
<Image
src={latestFeatures}
alt="Plane Issues"
className={`-mt-2 ml-8 h-full rounded-md ${
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
} `}
/>
</div>
</div>
<LatestFeatureBlock />
</div>
</div>
</div>
);
};
HomePage.getLayout = function getLayout(page: ReactElement) {
ResetPasswordPage.getLayout = function getLayout(page: ReactElement) {
return <DefaultLayout>{page}</DefaultLayout>;
};
export default HomePage;
export default ResetPasswordPage;

99
web/pages/accounts/sign-up.tsx
View File

@ -1,97 +1,52 @@
import React, { useEffect, ReactElement } from "react";
import React from "react";
import Image from "next/image";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// next-themes
import { useTheme } from "next-themes";
// services
import { AuthService } from "services/auth.service";
// hooks
import { useUser } from "hooks/store";
import useUserAuth from "hooks/use-user-auth";
import useToast from "hooks/use-toast";
import { useApplication, useUser } from "hooks/store";
// layouts
import DefaultLayout from "layouts/default-layout";
// components
import { EmailSignUpForm } from "components/account";
// images
import { SignUpRoot } from "components/account";
// ui
import { Spinner } from "@plane/ui";
// assets
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
// types
import { NextPageWithLayout } from "lib/types";
type EmailPasswordFormValues = {
email: string;
password?: string;
medium?: string;
};
// services
const authService = new AuthService();
const SignUpPage: NextPageWithLayout = observer(() => {
// router
const router = useRouter();
// toast alert
const { setToastAlert } = useToast();
// next-themes
const { setTheme } = useTheme();
// store hooks
const { currentUser, fetchCurrentUser, currentUserLoader } = useUser();
// custom hooks
const {} = useUserAuth({ routeAuth: "sign-in", user: currentUser, isLoading: currentUserLoader });
const {
config: { envConfig },
} = useApplication();
const { currentUser } = useUser();
const handleSignUp = async (formData: EmailPasswordFormValues) => {
const payload = {
email: formData.email,
password: formData.password ?? "",
};
await authService
.emailSignUp(payload)
.then(async (response) => {
setToastAlert({
type: "success",
title: "Success!",
message: "Account created successfully.",
});
if (response) await fetchCurrentUser();
router.push("/onboarding");
})
.catch((err) =>
setToastAlert({
type: "error",
title: "Error!",
message: err?.error || "Something went wrong. Please try again later or contact the support team.",
})
);
};
useEffect(() => {
setTheme("system");
}, [setTheme]);
if (currentUser || !envConfig)
return (
<div className="grid h-screen place-items-center">
<Spinner />
</div>
);
return (
<>
<div className="left-20 top-0 hidden h-screen w-[0.5px] border-r-[0.5px] border-custom-border-200 sm:fixed sm:block lg:left-32" />
<div className="fixed left-7 top-11 grid place-items-center bg-custom-background-100 sm:left-16 sm:top-12 sm:py-5 lg:left-28">
<div className="grid place-items-center bg-custom-background-100">
<div className="h-[30px] w-[30px]">
<Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
</div>
<div className="h-full w-full bg-onboarding-gradient-100">
<div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">
<div className="flex items-center gap-x-2 py-10">
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
<span className="text-2xl font-semibold sm:text-3xl">Plane</span>
</div>
</div>
<div className="grid h-full w-full place-items-center overflow-y-auto px-7 py-5">
<div>
<h1 className="font- text-center text-2xl">SignUp on Plane</h1>
<EmailSignUpForm onSubmit={handleSignUp} />
<div className="mx-auto h-full rounded-t-md border-x border-t border-custom-border-200 bg-onboarding-gradient-100 px-4 pt-4 shadow-sm sm:w-4/5 md:w-2/3">
<div className="h-full overflow-auto rounded-t-md bg-onboarding-gradient-200 px-7 pb-56 pt-24 sm:px-0">
<SignUpRoot />
</div>
</div>
</>
</div>
);
});
SignUpPage.getLayout = function getLayout(page: ReactElement) {
SignUpPage.getLayout = function getLayout(page: React.ReactElement) {
return <DefaultLayout>{page}</DefaultLayout>;
};

3
web/store/application/app-config.store.ts
View File

@ -5,8 +5,9 @@ import { IAppConfig } from "@plane/types";
import { AppConfigService } from "services/app_config.service";
export interface IAppConfigStore {
// observables
envConfig: IAppConfig | null;
// action
// actions
fetchAppConfig: () => Promise<any>;
}