Spaces:
Sleeping
Sleeping
login screen
#5
by
praneethys
- opened
- app/login/page.tsx +70 -0
- middleware.ts +1 -1
app/login/page.tsx
ADDED
@@ -0,0 +1,70 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
'use client';
|
2 |
+
|
3 |
+
import { useState } from "react";
|
4 |
+
import { useRouter } from "next/navigation";
|
5 |
+
|
6 |
+
const Login = () => {
|
7 |
+
const [username, setUsername] = useState("");
|
8 |
+
const [password, setPassword] = useState("");
|
9 |
+
|
10 |
+
const router = useRouter();
|
11 |
+
|
12 |
+
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
13 |
+
e.preventDefault();
|
14 |
+
|
15 |
+
router.push("/dashboard");
|
16 |
+
};
|
17 |
+
|
18 |
+
return (
|
19 |
+
<div className="flex flex-col items-center justify-center h-screen">
|
20 |
+
<h1 className="text-3xl font-bold mb-4">Login to your Financial Assistant</h1>
|
21 |
+
<form
|
22 |
+
className="bg-white shadow-md rounded px-8 pt-6 pb-8 m-4"
|
23 |
+
onSubmit={handleSubmit}
|
24 |
+
>
|
25 |
+
<div className="mb-4">
|
26 |
+
<label
|
27 |
+
className="block text-gray-700 text-sm font-bold mb-2"
|
28 |
+
htmlFor="username"
|
29 |
+
>
|
30 |
+
Username
|
31 |
+
</label>
|
32 |
+
<input
|
33 |
+
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
34 |
+
id="username"
|
35 |
+
type="text"
|
36 |
+
placeholder="Username"
|
37 |
+
value={username}
|
38 |
+
onChange={(e) => setUsername(e.target.value)}
|
39 |
+
/>
|
40 |
+
</div>
|
41 |
+
<div className="mb-6">
|
42 |
+
<label
|
43 |
+
className="block text-gray-700 text-sm font-bold mb-2"
|
44 |
+
htmlFor="password"
|
45 |
+
>
|
46 |
+
Password
|
47 |
+
</label>
|
48 |
+
<input
|
49 |
+
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
50 |
+
id="password"
|
51 |
+
type="password"
|
52 |
+
placeholder="Password"
|
53 |
+
value={password}
|
54 |
+
onChange={(e) => setPassword(e.target.value)}
|
55 |
+
/>
|
56 |
+
</div>
|
57 |
+
<div className="flex items-center justify-between">
|
58 |
+
<button
|
59 |
+
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
|
60 |
+
type="submit"
|
61 |
+
>
|
62 |
+
Sign In
|
63 |
+
</button>
|
64 |
+
</div>
|
65 |
+
</form>
|
66 |
+
</div>
|
67 |
+
);
|
68 |
+
};
|
69 |
+
|
70 |
+
export default Login;
|
middleware.ts
CHANGED
@@ -4,7 +4,7 @@ import type { NextRequest } from 'next/server'
|
|
4 |
// This function can be marked `async` if using `await` inside
|
5 |
export function middleware(request: NextRequest) {
|
6 |
if (request.nextUrl.pathname === '/') {
|
7 |
-
return NextResponse.redirect(new URL('/
|
8 |
}
|
9 |
return NextResponse.next();
|
10 |
}
|
|
|
4 |
// This function can be marked `async` if using `await` inside
|
5 |
export function middleware(request: NextRequest) {
|
6 |
if (request.nextUrl.pathname === '/') {
|
7 |
+
return NextResponse.redirect(new URL('/login', request.url))
|
8 |
}
|
9 |
return NextResponse.next();
|
10 |
}
|