aboutsummaryrefslogtreecommitdiffhomepage
path: root/frontend/app/routes/login.tsx
blob: 1c861fc80155eb8580d93b7d1b93676cc5ebfd85 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import type {
	ActionFunctionArgs,
	LoaderFunctionArgs,
	MetaFunction,
} from "@remix-run/node";
import { Form } from "@remix-run/react";
import { ensureUserNotLoggedIn, login } from "../.server/auth";

export const meta: MetaFunction = () => {
	return [{ title: "Login | iOSDC Japan 2024 Albatross.swift" }];
};

export async function loader({ request }: LoaderFunctionArgs) {
	return await ensureUserNotLoggedIn(request);
}

export async function action({ request }: ActionFunctionArgs) {
	await login(request);
	return null;
}

export default function Login() {
	return (
		<div className="min-h-screen bg-gray-100 flex items-center justify-center">
			<Form
				method="post"
				className="bg-white p-8 rounded shadow-md w-full max-w-sm"
			>
				<h2 className="text-2xl font-bold mb-6 text-center">Login</h2>
				<div className="mb-4">
					<label
						htmlFor="username"
						className="block text-sm font-medium text-gray-700"
					>
						Username
					</label>
					<input
						type="text"
						name="username"
						id="username"
						required
						className="mt-1 p-2 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
					/>
				</div>
				<div className="mb-6">
					<label
						htmlFor="password"
						className="block text-sm font-medium text-gray-700"
					>
						Password
					</label>
					<input
						type="password"
						name="password"
						id="password"
						autoComplete="current-password"
						required
						className="mt-1 p-2 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
					/>
				</div>
				<button
					type="submit"
					className="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition duration-300"
				>
					Log In
				</button>
			</Form>
		</div>
	);
}