Skip to content

Commit

Permalink
Refactor / Add Head component
Browse files Browse the repository at this point in the history
  • Loading branch information
@choutkamartin
choutkamartin committed Mar 15, 2022
1 parent fe33ac0 commit ded6669
Show file tree
Hide file tree
Showing 9 changed files with 462 additions and 370 deletions.
30 changes: 20 additions & 10 deletions pages/404.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,30 @@
import Head from "next/head";
import Container from "components/Container";
import Heading from "components/Heading";
import Paragraph from "components/Paragraph";
import Anchor from "components/Anchor";

function NotFound() {
return (
<Container variant="box" className="py-24 flex-col items-start gap-y-4">
<Heading headingLevel="h1">404</Heading>
<Paragraph>
The page you were looking for does not exist. Probably it has been
deleted?
</Paragraph>
<Anchor to="/" type="button" variant="primary">
Back to the Homepage
</Anchor>
</Container>
<>
<Head>
<title>Datapick - 404</title>
<meta
name="description"
content="Datapick is a tool for labelling raw data. These labelled data can be later used for a machine learning model."
/>
</Head>
<Container variant="box" className="py-24 flex-col items-start gap-y-4">
<Heading headingLevel="h1">404</Heading>
<Paragraph>
The page you were looking for does not exist. Probably it has been
deleted?
</Paragraph>
<Anchor to="/" type="button" variant="primary">
Back to the Homepage
</Anchor>
</Container>
</>
);
}

Expand Down
29 changes: 20 additions & 9 deletions pages/500.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,30 @@
import Head from "next/head";
import Container from "components/Container";
import Heading from "components/Heading";
import Paragraph from "components/Paragraph";
import Anchor from "components/Anchor";

function ServerError() {
return (
<Container variant="box" className="py-24 flex-col items-start gap-y-4">
<Heading headingLevel="h1">500</Heading>
<Paragraph>
We are sorry, but a system error has occurred. Please, try again later.
</Paragraph>
<Anchor to="/" type="button" variant="primary">
Back to the Homepage
</Anchor>
</Container>
<>
<Head>
<title>Datapick - 500</title>
<meta
name="description"
content="Datapick is a tool for labelling raw data. These labelled data can be later used for a machine learning model."
/>
</Head>
<Container variant="box" className="py-24 flex-col items-start gap-y-4">
<Heading headingLevel="h1">500</Heading>
<Paragraph>
We are sorry, but a system error has occurred. Please, try again
later.
</Paragraph>
<Anchor to="/" type="button" variant="primary">
Back to the Homepage
</Anchor>
</Container>
</>
);
}

Expand Down
82 changes: 46 additions & 36 deletions pages/auth/forgot-password.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useForm } from "react-hook-form";
import Head from "next/head";
import Input from "components/inputs/Input";
import Heading from "components/Heading";
import Button from "components/buttons/Button";
Expand Down Expand Up @@ -36,42 +37,51 @@ function ForgotPassword() {
};

return (
<Container variant="box" className="py-8 lg:py-36">
<Card className="w-full">
<Card.Head className="text-white">
<div className="flex flex-col">
<Heading headingLevel="h2">Forgot Password</Heading>
<Paragraph className="text-white">
Forgot password? No problem! Enter your e-mail address you
signed-up with.
</Paragraph>
</div>
</Card.Head>
<Card.Body>
{error && <AlertError title={error} className="mb-6" />}
<form
className="flex flex-col gap-y-4"
onSubmit={handleSubmit(onSubmit)}
>
<Input
label="E-mail address"
id="email"
type="text"
register={register}
errors={errors.email}
required
/>
<Button type="submit">Continue</Button>
</form>
</Card.Body>
</Card>
<Modal
isOpen={isOpen}
setIsOpen={setIsOpen}
title="Success"
description="We've send you an email with a recovery link."
/>
</Container>
<>
<Head>
<title>Forgot password - Datapick</title>
<meta
name="description"
content="Datapick is a tool for labelling raw data. These labelled data can be later used for a machine learning model."
/>
</Head>
<Container variant="box" className="py-8 lg:py-36">
<Card className="w-full">
<Card.Head className="text-white">
<div className="flex flex-col">
<Heading headingLevel="h2">Forgot Password</Heading>
<Paragraph className="text-white">
Forgot password? No problem! Enter your e-mail address you
signed-up with.
</Paragraph>
</div>
</Card.Head>
<Card.Body>
{error && <AlertError title={error} className="mb-6" />}
<form
className="flex flex-col gap-y-4"
onSubmit={handleSubmit(onSubmit)}
>
<Input
label="E-mail address"
id="email"
type="text"
register={register}
errors={errors.email}
required
/>
<Button type="submit">Continue</Button>
</form>
</Card.Body>
</Card>
<Modal
isOpen={isOpen}
setIsOpen={setIsOpen}
title="Success"
description="We've send you an email with a recovery link."
/>
</Container>
</>
);
}

Expand Down
108 changes: 59 additions & 49 deletions pages/auth/new-user.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { signIn } from "next-auth/react";
import { useForm } from "react-hook-form";
import Head from "next/head";
import Input from "components/inputs/Input";
import Button from "components/buttons/Button";
import Heading from "components/Heading";
Expand Down Expand Up @@ -52,63 +53,72 @@ function NewUser({ user, error }) {
}

return (
<Container
variant="box"
className="py-8 lg:py-36 bg-gradient-to-r from-indigo-500 to-violet-500"
>
<Card>
<Card.Head className="text-white">
<Heading headingLevel="h2">Set up your account</Heading>
</Card.Head>
<Card.Body>
<div className="relative gap-x-36 gap-y-8">
<form
className="flex flex-col gap-y-4"
onSubmit={handleSubmit(onSubmit)}
>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-x-4">
<>
<Head>
<title>Create account - Datapick</title>
<meta
name="description"
content="Datapick is a tool for labelling raw data. These labelled data can be later used for a machine learning model."
/>
</Head>
<Container
variant="box"
className="py-8 lg:py-36 bg-gradient-to-r from-indigo-500 to-violet-500"
>
<Card>
<Card.Head className="text-white">
<Heading headingLevel="h2">Set up your account</Heading>
</Card.Head>
<Card.Body>
<div className="relative gap-x-36 gap-y-8">
<form
className="flex flex-col gap-y-4"
onSubmit={handleSubmit(onSubmit)}
>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-x-4">
<Input
label="E-mail address"
id="email"
type="text"
placeholder="email@email.com"
register={register}
errors={errors.email}
defaultValue={user.email}
readOnly
required
/>
<Input
label="Name"
id="name"
type="text"
register={register}
errors={errors.name}
required
/>
</div>
<Input
label="E-mail address"
id="email"
type="text"
placeholder="email@email.com"
label="Password"
id="password"
type="password"
register={register}
errors={errors.email}
defaultValue={user.email}
readOnly
errors={errors.passwordRepeat}
required
/>
<Input
label="Name"
id="name"
type="text"
label="Repeat password"
id="passwordRepeat"
type="password"
register={register}
errors={errors.name}
errors={errors.passwordRepeat}
required
/>
</div>
<Input
label="Password"
id="password"
type="password"
register={register}
errors={errors.passwordRepeat}
required
/>
<Input
label="Repeat password"
id="passwordRepeat"
type="password"
register={register}
errors={errors.passwordRepeat}
required
/>
<Button type="submit">Continue</Button>
</form>
</div>
</Card.Body>
</Card>
</Container>
<Button type="submit">Continue</Button>
</form>
</div>
</Card.Body>
</Card>
</Container>
</>
);
}

Expand Down
Loading

0 comments on commit ded6669

Please sign in to comment.