From 1d50e867682b18c184005f7501ee62dde6b89f57 Mon Sep 17 00:00:00 2001 From: Tatsuto YAMAMOTO Date: Tue, 8 Oct 2024 09:19:07 +0900 Subject: [PATCH 1/4] feat: initial styling --- app/components/login.module.css | 9 +++++++++ app/components/loginForm.tsx | 16 ++++++++++++++++ app/root.module.css | 9 +++++++++ app/root.tsx | 3 ++- app/routes/login.tsx | 19 +++++++++++++++++++ app/styles/login.css | 3 +++ 6 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 app/components/login.module.css create mode 100644 app/components/loginForm.tsx create mode 100644 app/root.module.css create mode 100644 app/routes/login.tsx create mode 100644 app/styles/login.css diff --git a/app/components/login.module.css b/app/components/login.module.css new file mode 100644 index 0000000..c354360 --- /dev/null +++ b/app/components/login.module.css @@ -0,0 +1,9 @@ +.loginForm { + display: flex; + flex-direction: column; + align-items: center; + + h1 { + text-align: center; + } +} diff --git a/app/components/loginForm.tsx b/app/components/loginForm.tsx new file mode 100644 index 0000000..bdea594 --- /dev/null +++ b/app/components/loginForm.tsx @@ -0,0 +1,16 @@ +import styles from "~/components/login.module.css"; + +export const LoginForm = () => { + return ( + <> +

Welcome back

+
+ + + + + +
+ + ); +}; diff --git a/app/root.module.css b/app/root.module.css new file mode 100644 index 0000000..d55866a --- /dev/null +++ b/app/root.module.css @@ -0,0 +1,9 @@ +.root { + width: 50svw; + min-width: 20rem; + height: 100vh; + margin: 0 auto; + padding: 0.5rem; + border: solid; + border-width: 0 0.5px 0 0.5px; +} diff --git a/app/root.tsx b/app/root.tsx index 9df66a3..54966d3 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -1,4 +1,5 @@ import { Links, Meta, Outlet, Scripts } from "@remix-run/react"; +import styles from "~/root.module.css"; export function Layout({ children }: { children: React.ReactNode }) { return ( @@ -9,7 +10,7 @@ export function Layout({ children }: { children: React.ReactNode }) { - + {children} diff --git a/app/routes/login.tsx b/app/routes/login.tsx new file mode 100644 index 0000000..6f9bde4 --- /dev/null +++ b/app/routes/login.tsx @@ -0,0 +1,19 @@ +import { MetaFunction } from "@remix-run/react"; +import { LoginForm } from "~/components/loginForm"; + +export const meta: MetaFunction = () => { + return [ + { + title: "Log in | Caramel", + description: "Log in to your account", + }, + ]; +}; + +export default function Login() { + return ( + <> + + + ); +} diff --git a/app/styles/login.css b/app/styles/login.css new file mode 100644 index 0000000..adc68fa --- /dev/null +++ b/app/styles/login.css @@ -0,0 +1,3 @@ +h1 { + color: red; +} From 1e4013e2705989913fbae3695bcc79a7fe744eeb Mon Sep 17 00:00:00 2001 From: Tatsuto YAMAMOTO Date: Tue, 8 Oct 2024 12:51:05 +0900 Subject: [PATCH 2/4] feat: login page logic --- app/components/loginForm.tsx | 16 ---------- app/hooks/login.ts | 36 ++++++++++++++++++++++ app/routes/login.tsx | 59 +++++++++++++++++++++++++++++++++--- 3 files changed, 91 insertions(+), 20 deletions(-) delete mode 100644 app/components/loginForm.tsx create mode 100644 app/hooks/login.ts diff --git a/app/components/loginForm.tsx b/app/components/loginForm.tsx deleted file mode 100644 index bdea594..0000000 --- a/app/components/loginForm.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import styles from "~/components/login.module.css"; - -export const LoginForm = () => { - return ( - <> -

Welcome back

-
- - - - - -
- - ); -}; diff --git a/app/hooks/login.ts b/app/hooks/login.ts new file mode 100644 index 0000000..b9ce74a --- /dev/null +++ b/app/hooks/login.ts @@ -0,0 +1,36 @@ +export type LoginArgs = { + name: string; + passphrase: string; +}; + +export const login = async ({ + name, + passphrase, +}: LoginArgs): Promise< + | { error: string } + | { + authorization_token: string; + } +> => { + try { + const response = await fetch("http://localhost:3000/login", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ name, passphrase, captcha_token: "" }), + }); + + if (!response.ok) { + console.error(response); + if (response.status === 400) { + throw new Error("Invalid credentials"); + } + throw new Error("Unknown error"); + } + const { authorization_token } = await response.json(); + return { authorization_token }; + } catch (e) { + return { error: (e as Error).message }; + } +}; diff --git a/app/routes/login.tsx b/app/routes/login.tsx index 6f9bde4..2f6a4ae 100644 --- a/app/routes/login.tsx +++ b/app/routes/login.tsx @@ -1,19 +1,70 @@ -import { MetaFunction } from "@remix-run/react"; -import { LoginForm } from "~/components/loginForm"; +import { ActionFunctionArgs } from "@remix-run/node"; +import { Form, MetaFunction, useActionData } from "@remix-run/react"; +import { useEffect } from "react"; +import styles from "~/components/login.module.css"; +import { login } from "~/hooks/login"; export const meta: MetaFunction = () => { return [ { title: "Log in | Caramel", - description: "Log in to your account", + }, + { + content: "noindex", }, ]; }; +export const action = async ({ + request, +}: ActionFunctionArgs): Promise< + | { authorization_token: string } + | { + error: string; + } +> => { + const formData = await request.formData(); + const name = formData.get("name") as string; + const passphrase = formData.get("passphrase") as string; + return login({ name, passphrase }); +}; + export default function Login() { + const data = useActionData(); + + useEffect(() => { + if (!data) return; + if ("error" in data) return; + + localStorage.setItem("authToken", data.authorization_token); + // FIXME: Should use redirect() ? + window.location.href = "/"; + }, [data]); + return ( <> - +

Welcome back

+ + {(() => { + if (!data) return null; + if ("error" in data) return

{data.error}

; + return

Logged in

; + })()} + +
+ + + + + + +
); } From a55ba22d23eebbf777d9e8639a1c41ce9d9f7c25 Mon Sep 17 00:00:00 2001 From: Tatsuto YAMAMOTO Date: Tue, 8 Oct 2024 21:01:26 +0900 Subject: [PATCH 3/4] chore(style): remove duplicated border-width --- app/{hooks => lib}/login.ts | 0 app/root.module.css | 5 +++-- app/routes/login.tsx | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) rename app/{hooks => lib}/login.ts (100%) diff --git a/app/hooks/login.ts b/app/lib/login.ts similarity index 100% rename from app/hooks/login.ts rename to app/lib/login.ts diff --git a/app/root.module.css b/app/root.module.css index d55866a..95f428d 100644 --- a/app/root.module.css +++ b/app/root.module.css @@ -1,9 +1,10 @@ .root { width: 50svw; - min-width: 20rem; + max-width: 60rem; height: 100vh; margin: 0 auto; + box-sizing: border-box; padding: 0.5rem; border: solid; - border-width: 0 0.5px 0 0.5px; + border-width: 0 0.5px; } diff --git a/app/routes/login.tsx b/app/routes/login.tsx index 2f6a4ae..1199775 100644 --- a/app/routes/login.tsx +++ b/app/routes/login.tsx @@ -2,7 +2,7 @@ import { ActionFunctionArgs } from "@remix-run/node"; import { Form, MetaFunction, useActionData } from "@remix-run/react"; import { useEffect } from "react"; import styles from "~/components/login.module.css"; -import { login } from "~/hooks/login"; +import { login } from "~/lib/login"; export const meta: MetaFunction = () => { return [ From db87320ae07c7d49ffc9ed3730c26f2f04aac891 Mon Sep 17 00:00:00 2001 From: Tatsuto YAMAMOTO Date: Tue, 8 Oct 2024 21:18:03 +0900 Subject: [PATCH 4/4] feat: set autoComplete to input --- app/routes/login.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/app/routes/login.tsx b/app/routes/login.tsx index 1199775..da25ab2 100644 --- a/app/routes/login.tsx +++ b/app/routes/login.tsx @@ -59,9 +59,16 @@ export default function Login() { name="name" required placeholder="@hello@s.pulsate.dev" + autoComplete="username" /> - +