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

refactor: custom hook for sign in redirection (#2969)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-12-04 15:04:04 +05:30 committed by Aaryan Khandelwal
parent aa15a36693
commit 0ce63ec29e
8 changed files with 198 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/account/sign-in-forms/email-form.tsx
View File

@ -84,7 +84,7 @@ export const EmailForm: React.FC<Props> = (props) => {
return (
<>
<h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
Get on your flight deck!
Get on your flight deck
</h1>
<p className="text-center text-sm text-onboarding-text-200 mt-3">
Sign in with the email you used to sign up for Plane

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

@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import Link from "next/link";
import { Controller, useForm } from "react-hook-form";
import { XCircle } from "lucide-react";
@ -36,6 +36,8 @@ const authService = new AuthService();
export const PasswordForm: React.FC<Props> = (props) => {
const { email, updateEmail, handleStepChange, handleSignInRedirection } = props;
// states
const [isSendingResetPasswordLink, setIsSendingResetPasswordLink] = useState(false);
// toast alert
const { setToastAlert } = useToast();
// form info
@ -113,6 +115,8 @@ export const PasswordForm: React.FC<Props> = (props) => {
return;
}
setIsSendingResetPasswordLink(true);
authService
.sendResetPasswordLink({ email: emailFormValue })
.then(() => handleStepChange(ESignInSteps.SET_PASSWORD_LINK))
@ -122,7 +126,8 @@ export const PasswordForm: React.FC<Props> = (props) => {
title: "Error!",
message: err?.error ?? "Something went wrong. Please try again.",
})
);
)
.finally(() => setIsSendingResetPasswordLink(false));
};
return (
@ -189,9 +194,12 @@ export const PasswordForm: React.FC<Props> = (props) => {
<button
type="button"
onClick={handleForgotPassword}
className="text-xs font-medium text-custom-primary-100"
className={`text-xs font-medium ${
isSendingResetPasswordLink ? "text-onboarding-text-300" : "text-custom-primary-100"
}`}
disabled={isSendingResetPasswordLink}
>
Forgot your password?
{isSendingResetPasswordLink ? "Sending link..." : "Forgot your password?"}
</button>
</div>
</div>

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

@ -1,4 +1,6 @@
import React, { useState } from "react";
// hooks
import useSignInRedirection from "hooks/use-sign-in-redirection";
// components
import {
EmailForm,
@ -19,33 +21,27 @@ export enum ESignInSteps {
CREATE_PASSWORD = "CREATE_PASSWORD",
}
type Props = {
handleSignInRedirection: () => Promise<void>;
};
const OAUTH_HIDDEN_STEPS = [ESignInSteps.OPTIONAL_SET_PASSWORD, ESignInSteps.CREATE_PASSWORD];
export const SignInRoot: React.FC<Props> = (props) => {
const { handleSignInRedirection } = props;
export const SignInRoot = () => {
// states
const [signInStep, setSignInStep] = useState<ESignInSteps>(ESignInSteps.EMAIL);
const [email, setEmail] = useState("");
// sign in redirection hook
const { handleRedirection } = useSignInRedirection();
return (
<>
<div className="mx-auto flex flex-col">
{signInStep === ESignInSteps.EMAIL && (
<EmailForm
handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
updateEmail={(newEmail) => setEmail(newEmail)}
/>
<EmailForm handleStepChange={(step) => setSignInStep(step)} updateEmail={(newEmail) => setEmail(newEmail)} />
)}
{signInStep === ESignInSteps.PASSWORD && (
<PasswordForm
email={email}
updateEmail={(newEmail) => setEmail(newEmail)}
handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
handleSignInRedirection={handleSignInRedirection}
handleStepChange={(step) => setSignInStep(step)}
handleSignInRedirection={handleRedirection}
/>
)}
{signInStep === ESignInSteps.SET_PASSWORD_LINK && (
@ -55,30 +51,30 @@ export const SignInRoot: React.FC<Props> = (props) => {
<UniqueCodeForm
email={email}
updateEmail={(newEmail) => setEmail(newEmail)}
handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
handleSignInRedirection={handleSignInRedirection}
handleStepChange={(step) => setSignInStep(step)}
handleSignInRedirection={handleRedirection}
/>
)}
{signInStep === ESignInSteps.OPTIONAL_SET_PASSWORD && (
<OptionalSetPasswordForm
email={email}
handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
handleSignInRedirection={handleSignInRedirection}
handleStepChange={(step) => setSignInStep(step)}
handleSignInRedirection={handleRedirection}
/>
)}
{signInStep === ESignInSteps.CREATE_PASSWORD && (
<CreatePasswordForm
email={email}
handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
handleSignInRedirection={handleSignInRedirection}
handleStepChange={(step) => setSignInStep(step)}
handleSignInRedirection={handleRedirection}
/>
)}
</div>
{!OAUTH_HIDDEN_STEPS.includes(signInStep) && (
<OAuthOptions
updateEmail={(newEmail) => setEmail(newEmail)}
handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
handleSignInRedirection={handleSignInRedirection}
handleStepChange={(step) => setSignInStep(step)}
handleSignInRedirection={handleRedirection}
/>
)}
</>

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

@ -30,7 +30,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
const {
control,
formState: { errors, isValid },
watch,
handleSubmit,
} = useForm({
defaultValues: {
email,
@ -39,11 +39,13 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
reValidateMode: "onChange",
});
const handleSendNewLink = async () => {
const handleSendNewLink = async (formData: { email: string }) => {
setIsSendingNewLink(true);
updateEmail(formData.email);
const payload: IEmailCheckData = {
email: watch("email"),
email: formData.email,
type: "password",
};
@ -76,7 +78,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
password
</p>
<form className="mt-5 sm:w-96 mx-auto space-y-4">
<form onSubmit={handleSubmit(handleSendNewLink)} className="mt-5 sm:w-96 mx-auto space-y-4">
<div className="space-y-1">
<Controller
control={control}
@ -92,10 +94,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
name="email"
type="email"
value={value}
onChange={(e) => {
updateEmail(e.target.value);
onChange(e.target.value);
}}
onChange={onChange}
ref={ref}
hasError={Boolean(errors.email)}
placeholder="orville.wright@firstflight.com"
@ -112,11 +111,10 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
/>
</div>
<Button
type="button"
type="submit"
variant="primary"
className="w-full"
size="xl"
onClick={handleSendNewLink}
disabled={!isValid}
loading={isSendingNewLink}
>

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

@ -1,12 +1,13 @@
import { useState, useEffect, useCallback } from "react";
import { useEffect } from "react";
import Link from "next/link";
import { observer } from "mobx-react-lite";
import Image from "next/image";
import { useTheme } from "next-themes";
import { useRouter } from "next/router";
import { Lightbulb } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useSignInRedirection from "hooks/use-sign-in-redirection";
// components
import { SignInRoot } from "components/account";
// ui
@ -14,122 +15,84 @@ import { Loader, Spinner } from "@plane/ui";
// images
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
import latestFeatures from "public/onboarding/onboarding-pages.svg";
// types
import { IUser, IUserSettings } from "types";
export type AuthType = "sign-in" | "sign-up";
export const SignInView = observer(() => {
// store
const {
user: { fetchCurrentUser, fetchCurrentUserSettings },
user: { currentUser },
appConfig: { envConfig },
} = useMobxStore();
// router
const router = useRouter();
const { next: next_url } = router.query;
// states
const [isLoading, setLoading] = useState(false);
// next-themes
const { resolvedTheme } = useTheme();
const handleSignInRedirection = useCallback(
async (user: IUser) => {
// if the user is not onboarded, redirect them to the onboarding page
if (!user.is_onboarded) {
router.push("/onboarding");
return;
}
// if next_url is provided, redirect the user to that url
if (next_url) {
router.push(next_url.toString());
return;
}
// if the user is onboarded, fetch their last workspace details
await fetchCurrentUserSettings()
.then((userSettings: IUserSettings) => {
const workspaceSlug =
userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
if (workspaceSlug) router.push(`/${workspaceSlug}`);
else router.push("/profile");
})
.catch(() => setLoading(false));
},
[fetchCurrentUserSettings, router, next_url]
);
const mutateUserInfo = useCallback(async () => {
await fetchCurrentUser().then(async (user) => {
await handleSignInRedirection(user);
});
}, [fetchCurrentUser, handleSignInRedirection]);
// sign in redirection hook
const { isRedirecting, handleRedirection } = useSignInRedirection();
useEffect(() => {
mutateUserInfo();
}, [mutateUserInfo]);
handleRedirection();
}, [handleRedirection]);
if (isRedirecting || currentUser)
return (
<div className="grid place-items-center h-screen">
<Spinner />
</div>
);
return (
<>
{isLoading ? (
<div className="grid place-items-center h-screen">
<Spinner />
<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 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 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">
{!envConfig ? (
<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>
</div>
) : (
<>
<SignInRoot />
<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">
{!envConfig ? (
<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 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-8 -mt-2 ${
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
} `}
/>
</div>
) : (
<>
<SignInRoot handleSignInRedirection={mutateUserInfo} />
<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-8 -mt-2 ${
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
} `}
/>
</div>
</div>
</>
)}
</div>
</div>
</div>
</>
)}
</div>
)}
</>
</div>
</div>
);
});

74
web/hooks/use-sign-in-redirection.ts Normal file
View File

@ -0,0 +1,74 @@
import { useCallback, useState } from "react";
import { useRouter } from "next/router";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// types
import { IUser, IUserSettings } from "types";
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_url } = router.query;
// mobx store
const {
user: { fetchCurrentUser, fetchCurrentUserSettings },
} = useMobxStore();
const handleSignInRedirection = useCallback(
async (user: IUser) => {
// if the user is not onboarded, redirect them to the onboarding page
if (!user.is_onboarded) {
router.push("/onboarding");
return;
}
// if next_url is provided, redirect the user to that url
if (next_url) {
router.push(next_url.toString());
return;
}
// if the user is onboarded, fetch their last workspace details
await fetchCurrentUserSettings()
.then((userSettings: IUserSettings) => {
const workspaceSlug =
userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
if (workspaceSlug) router.push(`/${workspaceSlug}`);
else router.push("/profile");
})
.catch((err) => setError(err));
},
[fetchCurrentUserSettings, router, next_url]
);
const updateUserInfo = useCallback(async () => {
setIsRedirecting(true);
await fetchCurrentUser()
.then(async (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;

39
web/pages/accounts/password.tsx
View File

@ -1,4 +1,4 @@
import { ReactElement, useCallback } from "react";
import { ReactElement } from "react";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
@ -9,6 +9,7 @@ import { Controller, useForm } from "react-hook-form";
import { AuthService } from "services/auth.service";
// hooks
import useToast from "hooks/use-toast";
import useSignInRedirection from "hooks/use-sign-in-redirection";
// layouts
import DefaultLayout from "layouts/default-layout";
// ui
@ -20,9 +21,6 @@ import latestFeatures from "public/onboarding/onboarding-pages.svg";
import { checkEmailValidity } from "helpers/string.helper";
// type
import { NextPageWithLayout } from "types/app";
import { useMobxStore } from "lib/mobx/store-provider";
// types
import { IUser, IUserSettings } from "types";
type TResetPasswordFormValues = {
email: string;
@ -45,10 +43,8 @@ const HomePage: NextPageWithLayout = () => {
const { resolvedTheme } = useTheme();
// toast
const { setToastAlert } = useToast();
// mobx store
const {
user: { fetchCurrentUser, fetchCurrentUserSettings },
} = useMobxStore();
// sign in redirection hook
const { handleRedirection } = useSignInRedirection();
// form info
const {
control,
@ -61,31 +57,6 @@ const HomePage: NextPageWithLayout = () => {
},
});
const handleSignInRedirection = useCallback(
async (user: IUser) => {
// if the user is not onboarded, redirect them to the onboarding page
if (!user.is_onboarded) {
router.push("/onboarding");
return;
}
// if the user is onboarded, fetch their last workspace details
await fetchCurrentUserSettings().then((userSettings: IUserSettings) => {
const workspaceSlug =
userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
if (workspaceSlug) router.push(`/${workspaceSlug}`);
else router.push("/profile");
});
},
[fetchCurrentUserSettings, router]
);
const mutateUserInfo = useCallback(async () => {
await fetchCurrentUser().then(async (user) => {
await handleSignInRedirection(user);
});
}, [fetchCurrentUser, handleSignInRedirection]);
const handleResetPassword = async (formData: TResetPasswordFormValues) => {
if (!uidb64 || !token || !email) return;
@ -95,7 +66,7 @@ const HomePage: NextPageWithLayout = () => {
await authService
.resetPassword(uidb64.toString(), token.toString(), payload)
.then(() => mutateUserInfo())
.then(() => handleRedirection())
.catch((err) =>
setToastAlert({
type: "error",

38
web/public/onboarding/onboarding-pages.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 527 KiB

After

Width:  |  Height:  |  Size: 528 KiB