Skip to content

Commit 49e3e32

Browse files
dhavisiregardhavisiregar
authored
Merge pull request #3 from purwadhikafullstack/login
2 parents f0775f0 + a3f105e commit 49e3e32

File tree

8 files changed

+289
-109
lines changed

8 files changed

+289
-109
lines changed

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

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
'use client';
2+
import Login from '@/components/LoginPage/Login';
3+
import LogoLogin from '@/components/LoginPage/logoLogin';
4+
5+
const Page = () => {
6+
return (
7+
<div className="overflow-x-hidden bg-white h-screen">
8+
<div className="flex justify-center">
9+
<LogoLogin />
10+
</div>
11+
<div>
12+
<Login />
13+
</div>
14+
</div>
15+
);
16+
};
17+
18+
export default Page;

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

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
'use client';
2+
import Register from '@/components/RegisterForm/register';
3+
import LogoRegister from '@/components/RegisterForm/logoRegister';
4+
5+
const page = () => {
6+
return (
7+
<div className="overflow-x-hidden bg-white h-screen ">
8+
<div className="flex justify-center">
9+
<LogoRegister />
10+
</div>
11+
<div>
12+
<Register />
13+
</div>
14+
</div>
15+
);
16+
};
17+
18+
export default page;

‎apps/web/src/components/HomePage/Navbar.tsx

+10-108
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,3 @@
1-
// 'use client';
2-
// import { useState } from 'react';
3-
// import { useRouter } from 'next/navigation';
4-
5-
// const Navbar = () => {
6-
// const router = useRouter();
7-
// const [isOpen, setIsOpen] = useState(false);
8-
9-
// const handleClick = () => {
10-
// router.push('/home');
11-
// };
12-
13-
// const toggleMenu = () => {
14-
// setIsOpen(!isOpen);
15-
// };
16-
17-
// return (
18-
// <div className="fixed top-0 left-0 right-0 z-50 bg-white text-black shadow-md">
19-
// <div className="container mx-auto px-4 sm:px-6 lg:px-8">
20-
// <div className="flex justify-between items-center py-4">
21-
// {/* logo section */}
22-
// <div className="flex-shrink-0">
23-
// <img
24-
// onClick={handleClick}
25-
// src="/images/logo.png"
26-
// alt="logo"
27-
// className="w-[40%] cursor-pointer"
28-
// />
29-
// </div>
30-
31-
// {/* hamburger menu button */}
32-
// <div className="md:flex lg:hidden flex items-center">
33-
// <button
34-
// onClick={toggleMenu}
35-
// className="text-white focus:outline-none"
36-
// >
37-
// <svg
38-
// className="w-6 h-6"
39-
// fill="none"
40-
// stroke="currentColor"
41-
// viewBox="0 0 24 24"
42-
// xmlns="http://www.w3.org/2000/svg"
43-
// >
44-
// <path
45-
// strokeLinecap="round"
46-
// strokeLinejoin="round"
47-
// strokeWidth="2"
48-
// d={
49-
// isOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'
50-
// }
51-
// />
52-
// </svg>
53-
// </button>
54-
// </div>
55-
56-
// {/* navlinks section */}
57-
// <nav className="hidden lg:flex lg:space-x-6">
58-
// <a
59-
// href="/login"
60-
// className="text-lg font-semibold hover:text-secondary"
61-
// >
62-
// Log In
63-
// </a>
64-
// <a
65-
// href="/register"
66-
// className="text-lg font-semibold hover:text-secondary"
67-
// >
68-
// Register
69-
// </a>
70-
// </nav>
71-
// </div>
72-
// </div>
73-
74-
// {/* Mobile menu */}
75-
// {isOpen && (
76-
// <div className="md:flex lg:hidden bg-primary">
77-
// <nav className="flex flex-col space-y-2 px-4 py-2">
78-
// <a
79-
// href="/login"
80-
// className="text-md font-semibold hover:text-secondary"
81-
// >
82-
// Log in
83-
// </a>
84-
// <a
85-
// href="/register"
86-
// className="text-md font-semibold hover:text-secondary"
87-
// >
88-
// Register
89-
// </a>
90-
// </nav>
91-
// </div>
92-
// )}
93-
// </div>
94-
// );
95-
// };
96-
97-
// export default Navbar;
98-
991
'use client';
1002
import { useState } from 'react';
1013
import { useRouter } from 'next/navigation';
@@ -148,18 +50,18 @@ const Navbar: React.FC = () => {
14850
</div>
14951

15052
<ul className="flex space-x-6 ml-4">
151-
<li className="hover:underline text-orange-600 cursor-pointer">
152-
Dashboard
153-
</li>
154-
<li className="hover:underline text-orange-600 cursor-pointer">
155-
Team
156-
</li>
157-
<li className="hover:underline text-orange-600 cursor-pointer">
53+
<a
54+
href="/login"
55+
className="hover:underline text-orange-600 cursor-pointer"
56+
>
15857
Login
159-
</li>
160-
<li className="hover:underline text-orange-600 cursor-pointer">
58+
</a>
59+
<a
60+
href="/register"
61+
className="hover:underline text-orange-600 cursor-pointer"
62+
>
16163
Register
162-
</li>
64+
</a>
16365
</ul>
16466
</div>
16567
<div className="flex items-center space-x-4">

‎apps/web/src/components/LoginPage/Login.tsx

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
'use client';
2+
import axios from 'axios';
3+
import { useState } from 'react';
4+
import Swal from 'sweetalert2';
5+
6+
const LoginPage = () => {
7+
const [email, setEmail] = useState('');
8+
const [password, setPassword] = useState('');
9+
10+
const Login = async (e: { preventDefault: () => void }) => {
11+
e.preventDefault();
12+
try {
13+
await axios.post('http://localhost:8000/api/auth/login', {
14+
email: email,
15+
password: password,
16+
});
17+
18+
Swal.fire({
19+
title: 'Success',
20+
text: 'Login Success!',
21+
icon: 'success',
22+
}).then(() => {
23+
window.location.href = '/home';
24+
});
25+
} catch (error: any) {
26+
console.error(error);
27+
}
28+
};
29+
30+
return (
31+
<div className="flex gap-1 justify-center items-center py-14">
32+
<div className="flex justify-center">
33+
<img
34+
src="https://img.freepik.com/free-vector/mobile-login-concept-illustration_114360-83.jpg?t=st=1721103873~exp=1721107473~hmac=60fc637d34ea02bb6430031c4438d8525abd928356f958998a55bc43ed4b698a&w=740"
35+
alt="login"
36+
className="rounded-md h-auto w-1/2"
37+
/>
38+
</div>
39+
<div className="max-w-md p-6 mr-48 bg-primary border border-gray-300 rounded-md shadow-md">
40+
<h2 className="text-3xl text-center text-white font-bold mb-6">
41+
Log In
42+
</h2>
43+
<form onSubmit={Login} method="POST">
44+
<div className="mb-4">
45+
<label
46+
htmlFor="email"
47+
className="block text-sm text-white font-medium"
48+
>
49+
Email
50+
</label>
51+
<input
52+
type="text"
53+
name="email"
54+
id="email"
55+
value={email}
56+
onChange={(e) => setEmail(e.target.value)}
57+
className="mt-1 bg-white text-black block w-full p-2 border rounded-md shadow-sm"
58+
/>
59+
</div>
60+
<div className="mb-4">
61+
<label
62+
htmlFor="password"
63+
className="block text-sm text-white font-medium"
64+
>
65+
Password
66+
</label>
67+
<input
68+
type="password"
69+
name="password"
70+
id="password"
71+
value={password}
72+
onChange={(e) => setPassword(e.target.value)}
73+
className="mt-1 bg-white text-black block w-full p-2 border rounded-md shadow-sm"
74+
/>
75+
</div>
76+
<button
77+
type="submit"
78+
className="w-full px-4 py-2 bg-secondary hover:bg-third text-white rounded-md"
79+
>
80+
LOG IN
81+
</button>
82+
<div className="flex flex-col mt-4">
83+
<p className="text-white text-center py-2">
84+
Baru di Pasar Kita?{' '}
85+
<a href="/register" className="text-white hover:underline">
86+
Daftar
87+
</a>
88+
</p>
89+
</div>
90+
</form>
91+
</div>
92+
</div>
93+
);
94+
};
95+
96+
export default LoginPage;

‎apps/web/src/components/LoginPage/logoLogin.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { useRouter } from 'next/navigation';
2+
import React from 'react';
3+
4+
const logoLogin = () => {
5+
const router = useRouter();
6+
const handleClick = () => {
7+
router.push('/home');
8+
};
9+
10+
return (
11+
<div className="flex w-1/4 h-full justify-center pt-10">
12+
<img
13+
onClick={handleClick}
14+
src="/images/logo.png"
15+
alt="logo"
16+
className="w-[60%] cursor-pointer"
17+
/>
18+
</div>
19+
);
20+
};
21+
22+
export default logoLogin;

‎apps/web/src/components/RegisterForm/logoRegister.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { useRouter } from 'next/navigation';
2+
import React from 'react';
3+
4+
const logoRegister = () => {
5+
const router = useRouter();
6+
const handleClick = () => {
7+
router.push('/home');
8+
};
9+
10+
return (
11+
<div className="flex w-1/4 h-full justify-center pt-10">
12+
<img
13+
onClick={handleClick}
14+
src="/images/logo.png"
15+
alt="logo"
16+
className="w-[60%] cursor-pointer"
17+
/>
18+
</div>
19+
);
20+
};
21+
22+
export default logoRegister;

0 commit comments

Comments
 (0)