forked from github/plane
feat: sign up page added (#1306)
This commit is contained in:
parent
56a4e18a3c
commit
81f6562168
@ -1,11 +1,10 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
|
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
// react hook form
|
// react hook form
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
// services
|
|
||||||
import authenticationService from "services/authentication.service";
|
|
||||||
// hooks
|
|
||||||
import useToast from "hooks/use-toast";
|
|
||||||
// components
|
// components
|
||||||
import { EmailResetPasswordForm } from "components/account";
|
import { EmailResetPasswordForm } from "components/account";
|
||||||
// ui
|
// ui
|
||||||
@ -17,15 +16,19 @@ type EmailPasswordFormValues = {
|
|||||||
medium?: string;
|
medium?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const EmailPasswordForm = ({ handleSignIn }: any) => {
|
type Props = {
|
||||||
|
onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
|
||||||
const [isResettingPassword, setIsResettingPassword] = useState(false);
|
const [isResettingPassword, setIsResettingPassword] = useState(false);
|
||||||
|
|
||||||
const { setToastAlert } = useToast();
|
const router = useRouter();
|
||||||
|
const isSignUpPage = router.pathname === "/sign-up";
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
setError,
|
|
||||||
formState: { errors, isSubmitting, isValid, isDirty },
|
formState: { errors, isSubmitting, isValid, isDirty },
|
||||||
} = useForm<EmailPasswordFormValues>({
|
} = useForm<EmailPasswordFormValues>({
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
@ -37,31 +40,6 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
|
|||||||
reValidateMode: "onChange",
|
reValidateMode: "onChange",
|
||||||
});
|
});
|
||||||
|
|
||||||
const onSubmit = (formData: EmailPasswordFormValues) => {
|
|
||||||
authenticationService
|
|
||||||
.emailLogin(formData)
|
|
||||||
.then((response) => {
|
|
||||||
if (handleSignIn) handleSignIn(response);
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.log(error);
|
|
||||||
setToastAlert({
|
|
||||||
title: "Oops!",
|
|
||||||
type: "error",
|
|
||||||
message: "Enter the correct email address and password to sign in",
|
|
||||||
});
|
|
||||||
if (!error?.response?.data) return;
|
|
||||||
Object.keys(error.response.data).forEach((key) => {
|
|
||||||
const err = error.response.data[key];
|
|
||||||
console.log(err);
|
|
||||||
setError(key as keyof EmailPasswordFormValues, {
|
|
||||||
type: "manual",
|
|
||||||
message: Array.isArray(err) ? err.join(", ") : err,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{isResettingPassword ? (
|
{isResettingPassword ? (
|
||||||
@ -82,7 +60,7 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
|
|||||||
) || "Email ID is not valid",
|
) || "Email ID is not valid",
|
||||||
}}
|
}}
|
||||||
error={errors.email}
|
error={errors.email}
|
||||||
placeholder="Enter your Email ID"
|
placeholder="Enter your email ID"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-5">
|
<div className="mt-5">
|
||||||
@ -100,13 +78,21 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="mt-2 flex items-center justify-between">
|
<div className="mt-2 flex items-center justify-between">
|
||||||
<div className="ml-auto text-sm">
|
<div className="ml-auto text-sm">
|
||||||
<button
|
{isSignUpPage ? (
|
||||||
type="button"
|
<Link href="/">
|
||||||
onClick={() => setIsResettingPassword(true)}
|
<a className="font-medium text-brand-accent hover:text-brand-accent">
|
||||||
className="font-medium text-brand-accent hover:text-brand-accent"
|
Already have an account? Sign in.
|
||||||
>
|
</a>
|
||||||
Forgot your password?
|
</Link>
|
||||||
</button>
|
) : (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIsResettingPassword(true)}
|
||||||
|
className="font-medium text-brand-accent hover:text-brand-accent"
|
||||||
|
>
|
||||||
|
Forgot your password?
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-5">
|
<div className="mt-5">
|
||||||
@ -116,8 +102,21 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
|
|||||||
disabled={!isValid && isDirty}
|
disabled={!isValid && isDirty}
|
||||||
loading={isSubmitting}
|
loading={isSubmitting}
|
||||||
>
|
>
|
||||||
{isSubmitting ? "Signing in..." : "Sign In"}
|
{isSignUpPage
|
||||||
|
? isSubmitting
|
||||||
|
? "Signing up..."
|
||||||
|
: "Sign Up"
|
||||||
|
: isSubmitting
|
||||||
|
? "Signing in..."
|
||||||
|
: "Sign In"}
|
||||||
</SecondaryButton>
|
</SecondaryButton>
|
||||||
|
{!isSignUpPage && (
|
||||||
|
<Link href="/sign-up">
|
||||||
|
<a className="block font-medium text-brand-accent hover:text-brand-accent text-sm mt-1">
|
||||||
|
Don{"'"}t have an account? Sign up.
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
|
@ -31,16 +31,16 @@ type Props = {
|
|||||||
|
|
||||||
const restrictedUrls = [
|
const restrictedUrls = [
|
||||||
"api",
|
"api",
|
||||||
|
"installations",
|
||||||
|
"404",
|
||||||
"create-workspace",
|
"create-workspace",
|
||||||
"error",
|
"error",
|
||||||
"installations",
|
|
||||||
"invitations",
|
"invitations",
|
||||||
"magic-sign-in",
|
"magic-sign-in",
|
||||||
"onboarding",
|
"onboarding",
|
||||||
"reset-password",
|
"reset-password",
|
||||||
"signin",
|
"sign-up",
|
||||||
"workspace-member-invitation",
|
"workspace-member-invitation",
|
||||||
"404",
|
|
||||||
];
|
];
|
||||||
|
|
||||||
export const CreateWorkspaceForm: React.FC<Props> = ({
|
export const CreateWorkspaceForm: React.FC<Props> = ({
|
||||||
|
@ -21,6 +21,12 @@ import {
|
|||||||
import { Spinner } from "components/ui";
|
import { Spinner } from "components/ui";
|
||||||
// icons
|
// icons
|
||||||
import Logo from "public/logo.png";
|
import Logo from "public/logo.png";
|
||||||
|
// types
|
||||||
|
type EmailPasswordFormValues = {
|
||||||
|
email: string;
|
||||||
|
password?: string;
|
||||||
|
medium?: string;
|
||||||
|
};
|
||||||
|
|
||||||
const HomePage: NextPage = () => {
|
const HomePage: NextPage = () => {
|
||||||
const { user, isLoading, mutateUser } = useUserAuth("sign-in");
|
const { user, isLoading, mutateUser } = useUserAuth("sign-in");
|
||||||
@ -66,7 +72,6 @@ const HomePage: NextPage = () => {
|
|||||||
throw Error("Cant find credentials");
|
throw Error("Cant find credentials");
|
||||||
}
|
}
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
console.log(error);
|
|
||||||
setToastAlert({
|
setToastAlert({
|
||||||
title: "Error signing in!",
|
title: "Error signing in!",
|
||||||
type: "error",
|
type: "error",
|
||||||
@ -77,19 +82,30 @@ const HomePage: NextPage = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleEmailPasswordSignIn = async (response: any) => {
|
const handlePasswordSignIn = async (formData: EmailPasswordFormValues) => {
|
||||||
try {
|
await authenticationService
|
||||||
if (response) mutateUser();
|
.emailLogin(formData)
|
||||||
} catch (error: any) {
|
.then((response) => {
|
||||||
console.log(error);
|
try {
|
||||||
setToastAlert({
|
if (response) mutateUser();
|
||||||
title: "Error signing in!",
|
} catch (error: any) {
|
||||||
type: "error",
|
console.log(error);
|
||||||
message:
|
setToastAlert({
|
||||||
error?.error ||
|
title: "Error signing in!",
|
||||||
"Something went wrong. Please try again later or contact the support team.",
|
type: "error",
|
||||||
});
|
message:
|
||||||
}
|
error?.error ||
|
||||||
|
"Something went wrong. Please try again later or contact the support team.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() =>
|
||||||
|
setToastAlert({
|
||||||
|
title: "Oops!",
|
||||||
|
type: "error",
|
||||||
|
message: "Enter the correct email address and password to sign in",
|
||||||
|
})
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleEmailCodeSignIn = async (response: any) => {
|
const handleEmailCodeSignIn = async (response: any) => {
|
||||||
@ -114,7 +130,6 @@ const HomePage: NextPage = () => {
|
|||||||
<div>
|
<div>
|
||||||
<Spinner />
|
<Spinner />
|
||||||
</div>
|
</div>
|
||||||
{/* <div className="text-gray-500">Validating authentication</div> */}
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex h-screen w-full items-center justify-center overflow-auto">
|
<div className="flex h-screen w-full items-center justify-center overflow-auto">
|
||||||
@ -137,7 +152,7 @@ const HomePage: NextPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<EmailPasswordForm handleSignIn={handleEmailPasswordSignIn} />
|
<EmailPasswordForm onSubmit={handlePasswordSignIn} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
88
apps/app/pages/sign-up.tsx
Normal file
88
apps/app/pages/sign-up.tsx
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
|
// services
|
||||||
|
import authenticationService from "services/authentication.service";
|
||||||
|
// hooks
|
||||||
|
import useUserAuth from "hooks/use-user-auth";
|
||||||
|
import useToast from "hooks/use-toast";
|
||||||
|
// layouts
|
||||||
|
import DefaultLayout from "layouts/default-layout";
|
||||||
|
// components
|
||||||
|
import { EmailPasswordForm } from "components/account";
|
||||||
|
// images
|
||||||
|
import Logo from "public/logo.png";
|
||||||
|
// types
|
||||||
|
import type { NextPage } from "next";
|
||||||
|
type EmailPasswordFormValues = {
|
||||||
|
email: string;
|
||||||
|
password?: string;
|
||||||
|
medium?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const SignUp: NextPage = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const { setToastAlert } = useToast();
|
||||||
|
|
||||||
|
const { mutateUser } = useUserAuth("sign-in");
|
||||||
|
|
||||||
|
const handleSignUp = async (formData: EmailPasswordFormValues) => {
|
||||||
|
const payload = {
|
||||||
|
email: formData.email,
|
||||||
|
password: formData.password ?? "",
|
||||||
|
};
|
||||||
|
|
||||||
|
await authenticationService
|
||||||
|
.emailSignUp(payload)
|
||||||
|
.then(async (response) => {
|
||||||
|
setToastAlert({
|
||||||
|
type: "success",
|
||||||
|
title: "Success!",
|
||||||
|
message: "Account created successfully.",
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response) await mutateUser();
|
||||||
|
router.push("/");
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
if (err.status === 400)
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Error!",
|
||||||
|
message: "An user already exists with this Email ID.",
|
||||||
|
});
|
||||||
|
else
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Error!",
|
||||||
|
message: "Something went wrong. Please try again later or contact the support team.",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DefaultLayout>
|
||||||
|
<div className="flex h-screen w-full items-center justify-center overflow-auto">
|
||||||
|
<div className="flex min-h-full w-full flex-col justify-center py-12 px-6 lg:px-8">
|
||||||
|
<div className="flex flex-col gap-10 sm:mx-auto sm:w-full sm:max-w-md">
|
||||||
|
<div className="flex flex-col items-center justify-center gap-10">
|
||||||
|
<Image src={Logo} height={80} width={80} alt="Plane Web Logo" />
|
||||||
|
<div className="text-center text-xl font-medium text-brand-base">
|
||||||
|
Create a new Plane Account
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col rounded-[10px] bg-brand-base shadow-md">
|
||||||
|
<EmailPasswordForm onSubmit={handleSignUp} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DefaultLayout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SignUp;
|
@ -7,6 +7,7 @@ const nonValidatedRoutes = [
|
|||||||
"/magic-sign-in",
|
"/magic-sign-in",
|
||||||
"/reset-password",
|
"/reset-password",
|
||||||
"/workspace-member-invitation",
|
"/workspace-member-invitation",
|
||||||
|
"/sign-up",
|
||||||
];
|
];
|
||||||
|
|
||||||
const validateRouteCheck = (route: string): boolean => {
|
const validateRouteCheck = (route: string): boolean => {
|
||||||
|
@ -20,6 +20,18 @@ class AuthService extends APIService {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async emailSignUp(data: { email: string; password: string }) {
|
||||||
|
return this.post("/api/sign-up/", data, { headers: {} })
|
||||||
|
.then((response) => {
|
||||||
|
this.setAccessToken(response?.data?.access_token);
|
||||||
|
this.setRefreshToken(response?.data?.refresh_token);
|
||||||
|
return response?.data;
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
throw error?.response;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
async socialAuth(data: any) {
|
async socialAuth(data: any) {
|
||||||
return this.post("/api/social-auth/", data, { headers: {} })
|
return this.post("/api/social-auth/", data, { headers: {} })
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user