chore: メールアドレスでログインできるようにした (#409)

* chore: メールアドレスでログインできるようにした

* chore: fix e2e test account email

* chore: change autoComplete type

Author: laminne

app/lib/api/login.ts

@@ -5,14 +5,14 @@ import type {
 import { createCookie } from "react-router";
 
 export type LoginArgs = {
-  name: string;
+  email: string;
   passphrase: string;
 };
 
 export type ERROR_MESSAGES = "INVALID_CREDENTIALS" | "CONNECTION_FAILED";
 
 export const login = async (
-  { name, passphrase }: LoginArgs,
+  { email, passphrase }: LoginArgs,
   basePath: string
 ): Promise<
   | { error: ERROR_MESSAGES }
@@ -26,7 +26,7 @@ export const login = async (
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({ name, passphrase, captcha_token: "" }),
+      body: JSON.stringify({ email, passphrase, captcha_token: "" }),
     });
 
     if (!response.ok) {

app/routes/login.tsx

@@ -26,11 +26,11 @@ export const meta: MetaFunction = () => {
 
 export const action = async ({ request, context }: ActionFunctionArgs) => {
   const formData = await request.formData();
-  const name = formData.get("name") as string;
+  const email = formData.get("email") as string;
   const passphrase = formData.get("passphrase") as string;
 
   const basePath = (context.cloudflare.env as Env).API_BASE_URL;
-  const res = await login({ name, passphrase }, basePath);
+  const res = await login({ email, passphrase }, basePath);
   if ("error" in res) {
     const errorMessage =
       res.error === "INVALID_CREDENTIALS"
@@ -63,13 +63,13 @@ export default function Login() {
       </p>
 
       <Form method="post" className={styles.loginForm}>
-        <label htmlFor="name">Account name [required]</label>
+        <label htmlFor="email">Email address [required]</label>
         <input
-          type="text"
-          id="name"
-          name="name"
+          type="email"
+          id="email"
+          name="email"
           required
-          placeholder="@[email protected]"
+          placeholder="[email protected]"
           autoComplete="username"
         />
         <label htmlFor="password">Passphrase [required]</label>

tests/account.spec.ts

@@ -2,7 +2,7 @@ import { expect, test } from "@playwright/test";
 
 test("has account info", async ({ page }) => {
   await page.goto("/login");
-  await page.locator("#name").fill("@john@example.com");
+  await page.locator("#email").fill("testuser101@example.com");
   await page.locator("#password").fill("じゃすた・いぐざんぽぅ");
   await page.locator("#password + [type='submit']").click();
   await page.waitForURL("/");