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

feat: sign up page added (#1306)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-06-16 19:00:04 +05:30 committed by GitHub
parent 56a4e18a3c
commit 81f6562168
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 175 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
apps/app/components/account/email-password-form.tsx
View File

@ -1,11 +1,10 @@
import React, { useState } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
// react hook form
import { useForm } from "react-hook-form";
// services
import authenticationService from "services/authentication.service";
// hooks
import useToast from "hooks/use-toast";
// components
import { EmailResetPasswordForm } from "components/account";
// ui
@ -17,15 +16,19 @@ type EmailPasswordFormValues = {
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 { setToastAlert } = useToast();
const router = useRouter();
const isSignUpPage = router.pathname === "/sign-up";
const {
register,
handleSubmit,
setError,
formState: { errors, isSubmitting, isValid, isDirty },
} = useForm<EmailPasswordFormValues>({
defaultValues: {
@ -37,31 +40,6 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
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 (
<>
{isResettingPassword ? (
@ -82,7 +60,7 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
) || "Email ID is not valid",
}}
error={errors.email}
placeholder="Enter your Email ID"
placeholder="Enter your email ID"
/>
</div>
<div className="mt-5">
@ -100,13 +78,21 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
</div>
<div className="mt-2 flex items-center justify-between">
<div className="ml-auto text-sm">
<button
type="button"
onClick={() => setIsResettingPassword(true)}
className="font-medium text-brand-accent hover:text-brand-accent"
>
Forgot your password?
</button>
{isSignUpPage ? (
<Link href="/">
<a className="font-medium text-brand-accent hover:text-brand-accent">
Already have an account? Sign in.
</a>
</Link>
) : (
<button
type="button"
onClick={() => setIsResettingPassword(true)}
className="font-medium text-brand-accent hover:text-brand-accent"
>
Forgot your password?
</button>
)}
</div>
</div>
<div className="mt-5">
@ -116,8 +102,21 @@ export const EmailPasswordForm = ({ handleSignIn }: any) => {
disabled={!isValid && isDirty}
loading={isSubmitting}
>
{isSubmitting ? "Signing in..." : "Sign In"}
{isSignUpPage
? isSubmitting
? "Signing up..."
: "Sign Up"
: isSubmitting
? "Signing in..."
: "Sign In"}
</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>
</form>
)}

6
apps/app/components/workspace/create-workspace-form.tsx
View File

@ -31,16 +31,16 @@ type Props = {
const restrictedUrls = [
"api",
"installations",
"404",
"create-workspace",
"error",
"installations",
"invitations",
"magic-sign-in",
"onboarding",
"reset-password",
"signin",
"sign-up",
"workspace-member-invitation",
"404",
];
export const CreateWorkspaceForm: React.FC<Props> = ({

47
apps/app/pages/index.tsx
View File

@ -21,6 +21,12 @@ import {
import { Spinner } from "components/ui";
// icons
import Logo from "public/logo.png";
// types
type EmailPasswordFormValues = {
email: string;
password?: string;
medium?: string;
};
const HomePage: NextPage = () => {
const { user, isLoading, mutateUser } = useUserAuth("sign-in");
@ -66,7 +72,6 @@ const HomePage: NextPage = () => {
throw Error("Cant find credentials");
}
} catch (error: any) {
console.log(error);
setToastAlert({
title: "Error signing in!",
type: "error",
@ -77,19 +82,30 @@ const HomePage: NextPage = () => {
}
};
const handleEmailPasswordSignIn = async (response: any) => {
try {
if (response) mutateUser();
} catch (error: any) {
console.log(error);
setToastAlert({
title: "Error signing in!",
type: "error",
message:
error?.error ||
"Something went wrong. Please try again later or contact the support team.",
});
}
const handlePasswordSignIn = async (formData: EmailPasswordFormValues) => {
await authenticationService
.emailLogin(formData)
.then((response) => {
try {
if (response) mutateUser();
} catch (error: any) {
console.log(error);
setToastAlert({
title: "Error signing in!",
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) => {
@ -114,7 +130,6 @@ const HomePage: NextPage = () => {
<div>
<Spinner />
</div>
{/* <div className="text-gray-500">Validating authentication</div> */}
</div>
) : (
<div className="flex h-screen w-full items-center justify-center overflow-auto">
@ -137,7 +152,7 @@ const HomePage: NextPage = () => {
</div>
</>
) : (
<EmailPasswordForm handleSignIn={handleEmailPasswordSignIn} />
<EmailPasswordForm onSubmit={handlePasswordSignIn} />
)}
</div>
</div>

88
apps/app/pages/sign-up.tsx Normal file
View 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;

1
apps/app/services/api.service.ts
View File

@ -7,6 +7,7 @@ const nonValidatedRoutes = [
"/magic-sign-in",
"/reset-password",
"/workspace-member-invitation",
"/sign-up",
];
const validateRouteCheck = (route: string): boolean => {

12
apps/app/services/authentication.service.ts
View File

@ -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) {
return this.post("/api/social-auth/", data, { headers: {} })
.then((response) => {