From 519008c4bae3db046004e4bc2aaa23a2e66311c7 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 28 Jul 2024 00:08:12 +0900
Subject: frontend: jwt

---
 frontend/app/routes/dashboard.tsx | 22 ++++++++++++++++++++++
 frontend/app/routes/login.tsx     | 31 +++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 frontend/app/routes/dashboard.tsx
 create mode 100644 frontend/app/routes/login.tsx

(limited to 'frontend/app/routes')

diff --git a/frontend/app/routes/dashboard.tsx b/frontend/app/routes/dashboard.tsx
new file mode 100644
index 0000000..be274eb
--- /dev/null
+++ b/frontend/app/routes/dashboard.tsx
@@ -0,0 +1,22 @@
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { isAuthenticated } from "../services/auth.server";
+import { useLoaderData } from "@remix-run/react";
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  return await isAuthenticated(request, {
+    failureRedirect: "/login",
+  });
+}
+
+export default function Dashboard() {
+  const user = useLoaderData<typeof loader>()!;
+
+  return (
+    <div>
+      <h1>
+        #{user.userId} {user.displayUsername} (@{user.username})
+      </h1>
+      {user.isAdmin && <p>Admin</p>}
+    </div>
+  );
+}
diff --git a/frontend/app/routes/login.tsx b/frontend/app/routes/login.tsx
new file mode 100644
index 0000000..cf5be14
--- /dev/null
+++ b/frontend/app/routes/login.tsx
@@ -0,0 +1,31 @@
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
+import { Form } from "@remix-run/react";
+import { authenticator } from "../services/auth.server";
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  return await authenticator.isAuthenticated(request, {
+    successRedirect: "/dashboard",
+  });
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  return await authenticator.authenticate("default", request, {
+    successRedirect: "/dashboard",
+    failureRedirect: "/login",
+  });
+}
+
+export default function Login() {
+  return (
+    <Form method="post">
+      <input type="username" name="username" required />
+      <input
+        type="password"
+        name="password"
+        autoComplete="current-password"
+        required
+      />
+      <button>Log In</button>
+    </Form>
+  );
+}
-- 
cgit v1.2.3-70-g09d2