a

islands/RegisterForm.tsx

@@ -1,5 +1,8 @@
 import { useState } from 'preact/hooks';
-
+import { render } from "preact";
+//import Button from '../components/Button.tsx'
+import { JSX, h} from "preact";
+import { isMail, isUserDuplication, takojson } from "../util/takoFunction.ts"
 export default function RegisterForm({ text, color,tako }: { text: string, color: string; tako: string;}) {
     const classs = "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" + color 
 
@@ -8,27 +11,51 @@ export default function RegisterForm({ text, color,tako }: { text: string, color
     const handleButtonClick = () => {
       setShowModal(!showModal);
     }
-    const [username, setUsername] = useState('');
-    const [password, setPassword] = useState('');
-
-    // deno-lint-ignore no-explicit-any
-    const handleSubmit = async (event: any) => {
-      event.preventDefault();
-      const response = await fetch('https://your-api-endpoint.com', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ username, password })
-      });
-
-      if (response.ok) {
-        console.log('Login successful');
-      } else {
-        console.log('Login failed');
-      }
+    const [username, setUsername] = useState("");
+    const [email, setEmail] = useState("");
+    const handleUsernameChange = (event: h.JSX.TargetedEvent<HTMLInputElement>) => {
+        setUsername(event.currentTarget.value);
+    };
+    const handleEmailChange = (event: h.JSX.TargetedEvent<HTMLInputElement>) => {
+        setEmail(event.currentTarget.value);
+    };
+    const handleSubmit = (event: JSX.TargetedEvent<HTMLFormElement, Event>) => {
+        event.preventDefault();
+        alert(email)
+        const data = {
+            requirements: "temp_register",
+            userName: username,
+            mail: email,
+        };
+        const response = fetch("/api/logins/register", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(data),
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                console.log(data.status);
+                if (data.status === "success") {
+                  alert("成功")
+                    //const container = document.getElementById("register-form");
+                    /*
+                    if (container) {
+                      //
+                    } else {
+                        console.error("Container element not found");
+                    }*/
+                } else if (data.status === "error") {
+                  alert("error")
+                } else {
+                  alert("error")
+                }
+            })
+            .catch((error) => {
+                alert("error")
+            });
     };
-
 return <>
     <button class={classs} onClick={handleButtonClick}>
         {text}
@@ -46,11 +73,11 @@ return <>
                 <form onSubmit={handleSubmit} class="">
                   <label class="mb-5">
                     <div>ユーザーネーム</div>
-                    <input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Username" value={username} onInput={(e) => e.target && setPassword((e.target as HTMLInputElement).value)} />
+                    <input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Username" value={username} onChange={handleUsernameChange} />
                   </label>
                   <label>
-                  <div>パスワード</div>
-                    <input type="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Username"  value={password} onInput={(e) => e.target && setPassword((e.target as HTMLInputElement).value)} />
+                  <div>Email</div>
+                    <input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Username"  value={email} onChange={handleEmailChange} />
                   </label>
                   <div>
                     <input type="submit" value="Submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" />

routes/api/logins/register.js

@@ -1,6 +1,9 @@
 export const handler = {
   async POST(req) {
-      const data = await req.json();
+      //const data = await req.json();
+      const data = {
+        "status": "success"
+      }
       return new Response(JSON.stringify(data), {
         headers: { "Content-Type": "application/json" },
       });