Skip to content

Commit ac5da2a

Browse files
bensohhbensohh
committed
Update the Header component new props
1 parent 9d29131 commit ac5da2a

File tree

2 files changed

+91
-112
lines changed

2 files changed

+91
-112
lines changed

‎apps/frontend/src/app/login/page.tsx‎

Lines changed: 38 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,83 @@
11
"use client";
22
import Header from "@/components/Header/header";
3-
import {
4-
Button,
5-
Input,
6-
Layout,
7-
message,
8-
Form,
9-
} from "antd";
3+
import { Button, Input, Layout, message, Form } from "antd";
104
import { Content } from "antd/es/layout/layout";
115
import "./styles.scss";
126
import { useEffect, useState } from "react";
137
import Link from "next/link";
148
import TextArea from "antd/es/input/TextArea";
15-
import {loginUser} from '@/app/services/user'
16-
import {setToken} from '@/app/services/login-store'
9+
import { loginUser } from "@/app/services/user";
10+
import { setToken } from "@/app/services/login-store";
1711
import { useRouter } from "next/navigation";
1812

1913
type InputFields = {
20-
email: string
21-
password: string
22-
}
14+
email: string;
15+
password: string;
16+
};
2317

2418
export default function Home() {
25-
2619
const [isLoginFailed, setIsLoginFailed] = useState(false);
2720
const router = useRouter();
2821
const [messageApi, contextHolder] = message.useMessage();
29-
22+
3023
const successMessage = (message: string) => {
3124
messageApi.open({
3225
type: "success",
3326
content: message,
3427
});
3528
};
3629

37-
function submitDetails({email, password}: InputFields): void {
38-
loginUser(email, password).then(jwt => {
39-
successMessage("Login successful")
40-
setToken(jwt);
41-
router.push("/");
42-
43-
}).catch(err => {
44-
console.error(err);
45-
setIsLoginFailed(true);
46-
})
30+
function submitDetails({ email, password }: InputFields): void {
31+
loginUser(email, password)
32+
.then((jwt) => {
33+
successMessage("Login successful");
34+
setToken(jwt);
35+
router.push("/");
36+
})
37+
.catch((err) => {
38+
console.error(err);
39+
setIsLoginFailed(true);
40+
});
4741
}
4842

4943
return (
5044
<>
5145
{contextHolder}
5246
<Layout>
53-
<Header/>
47+
<Header selectedKey={undefined} />
5448
<Content>
5549
<div className="login-card">
5650
<h1>Login</h1>
57-
<Form
58-
name="basic"
59-
onFinish={submitDetails}
60-
>
51+
<Form name="basic" onFinish={submitDetails}>
6152
<Form.Item<InputFields>
62-
name="email"
53+
name="email"
6354
rules={[
6455
{
65-
required: true,
66-
message: "Please provide your email."
56+
required: true,
57+
message: "Please provide your email.",
6758
},
6859
]}
6960
>
70-
<Input
71-
type="email"
72-
placeholder="Email"
73-
/>
61+
<Input type="email" placeholder="Email" />
7462
</Form.Item>
7563

7664
<Form.Item<InputFields>
77-
name="password"
78-
rules={[{
79-
required: true,
80-
message: "Please enter your password."
81-
}]}
65+
name="password"
66+
rules={[
67+
{
68+
required: true,
69+
message: "Please enter your password.",
70+
},
71+
]}
8272
>
83-
<Input.Password
84-
placeholder="Password"
85-
/>
73+
<Input.Password placeholder="Password" />
8674
</Form.Item>
8775

88-
<div
89-
style={{visibility: isLoginFailed ? "visible" : "hidden"}}
90-
className="registration-failed-text">This email/username is not valid
76+
<div
77+
style={{ visibility: isLoginFailed ? "visible" : "hidden" }}
78+
className="registration-failed-text"
79+
>
80+
This email/username is not valid
9181
</div>
9282

9383
<Form.Item>
@@ -97,9 +87,7 @@ export default function Home() {
9787
</Form.Item>
9888
</Form>
9989
<p>
100-
Let me <Link
101-
href="/register"
102-
>register</Link>
90+
Let me <Link href="/register">register</Link>
10391
</p>
10492
</div>
10593
</Content>

‎apps/frontend/src/app/register/page.tsx‎

Lines changed: 53 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,22 @@
11
"use client";
22
import Header from "@/components/Header/header";
3-
import {
4-
Button,
5-
Input,
6-
Layout,
7-
message,
8-
Form,
9-
} from "antd";
3+
import { Button, Input, Layout, message, Form } from "antd";
104
import { Content } from "antd/es/layout/layout";
115
import "./styles.scss";
126
import { useEffect, useState } from "react";
137
import Link from "next/link";
148
import TextArea from "antd/es/input/TextArea";
15-
import { createUser } from '@/app/services/user'
9+
import { createUser } from "@/app/services/user";
1610
import { useRouter } from "next/navigation";
1711

1812
type InputFields = {
19-
username: string
20-
email: string
21-
password: string
22-
confirmPassword: string
23-
}
13+
username: string;
14+
email: string;
15+
password: string;
16+
confirmPassword: string;
17+
};
2418

2519
export default function Home() {
26-
2720
const [isRegistrationFailed, setIsRegistrationFailed] = useState(false);
2821
const router = useRouter();
2922
const [messageApi, contextHolder] = message.useMessage();
@@ -35,21 +28,22 @@ export default function Home() {
3528
});
3629
};
3730

38-
function submitDetails({username, email, password}: InputFields): void {
31+
function submitDetails({ username, email, password }: InputFields): void {
3932
createUser(username, email, password)
40-
.then(() => {
41-
successMessage("Account successfully created")
42-
router.push("/login");
43-
}).catch(err => {
44-
console.log(err);
45-
setIsRegistrationFailed(true);
46-
})
33+
.then(() => {
34+
successMessage("Account successfully created");
35+
router.push("/login");
36+
})
37+
.catch((err) => {
38+
console.log(err);
39+
setIsRegistrationFailed(true);
40+
});
4741
}
4842
return (
4943
<>
5044
{contextHolder}
5145
<Layout>
52-
<Header/>
46+
<Header selectedKey={undefined} />
5347
<Content>
5448
<div className="login-card">
5549
<h1>Register</h1>
@@ -59,80 +53,79 @@ export default function Home() {
5953
style={{ margin: "auto" }}
6054
onFinish={submitDetails}
6155
>
62-
6356
<Form.Item<InputFields>
64-
name="username"
57+
name="username"
6558
rules={[
6659
{
6760
required: true,
68-
message: "You must provide a username."
61+
message: "You must provide a username.",
6962
},
7063
{
7164
pattern: /^\S+$/,
72-
message: "Please provide a valid username."
65+
message: "Please provide a valid username.",
7366
},
7467
]}
7568
>
76-
<Input
77-
placeholder="Username"
78-
/>
69+
<Input placeholder="Username" />
7970
</Form.Item>
8071

8172
<Form.Item<InputFields>
82-
name="email"
73+
name="email"
8374
rules={[
8475
{
85-
required: true,
86-
message: "You must provide an email."
76+
required: true,
77+
message: "You must provide an email.",
8778
},
8879
{
8980
type: "email",
90-
message: "Please provide a valid email address."
81+
message: "Please provide a valid email address.",
9182
},
9283
]}
9384
>
94-
<Input
95-
type="email"
96-
placeholder="Email"
97-
/>
85+
<Input type="email" placeholder="Email" />
9886
</Form.Item>
9987

10088
<Form.Item<InputFields>
101-
name="password"
102-
rules={[{
103-
required: true,
104-
message: "You must provide a password."
105-
}]}
89+
name="password"
90+
rules={[
91+
{
92+
required: true,
93+
message: "You must provide a password.",
94+
},
95+
]}
10696
>
107-
<Input.Password
108-
placeholder="Password"
109-
/>
97+
<Input.Password placeholder="Password" />
11098
</Form.Item>
11199

112100
<Form.Item<InputFields>
113101
name="confirmPassword"
114102
rules={[
115103
{
116-
required: true,
117-
message: "Please confirm your password."
104+
required: true,
105+
message: "Please confirm your password.",
118106
},
119-
({getFieldValue}) => ({
107+
({ getFieldValue }) => ({
120108
validator: async (r, confirmPassword) => {
121-
if (!!confirmPassword && getFieldValue("password") !== confirmPassword) {
122-
throw new Error("Passwords do not match")
109+
if (
110+
!!confirmPassword &&
111+
getFieldValue("password") !== confirmPassword
112+
) {
113+
throw new Error("Passwords do not match");
123114
}
124-
}
125-
})
115+
},
116+
}),
126117
]}
127118
>
128-
<Input.Password
129-
placeholder="Confirm Password"
130-
/>
119+
<Input.Password placeholder="Confirm Password" />
131120
</Form.Item>
132121

133-
<div
134-
style={{visibility: isRegistrationFailed ? "visible" : "hidden"}}
135-
className="registration-failed-text">A user with the same email/username already exists
122+
<div
123+
style={{
124+
visibility: isRegistrationFailed ? "visible" : "hidden",
125+
}}
126+
className="registration-failed-text"
127+
>
128+
A user with the same email/username already exists
136129
</div>
137130

138131
<Form.Item>
@@ -142,9 +135,7 @@ export default function Home() {
142135
</Form.Item>
143136
</Form>
144137
<p>
145-
Let me <Link
146-
href="/login"
147-
>login</Link>
138+
Let me <Link href="/login">login</Link>
148139
</p>
149140
</div>
150141
</Content>

0 commit comments

Comments
 (0)