réglage onChangeEvent + form terminer en attente api

.gitignore

@@ -14,6 +14,9 @@
 /out/
 
 
+
+/build/
+
 # misc
 .DS_Store
 *.pem

src/app/auth/login/page.tsx

@@ -1,31 +1,46 @@
+"use client"
 import usernameSvg from "@/assets/username.svg"
 import InputLoginButton from "@/components/inputs/InputLoginButtons"
-import { Input } from "postcss"
-
-
+import Link from "next/link"
+import { ChangeEvent, FormEvent, FormEventHandler, useState } from "react"
 export default function Login() {
+    const [username, setUsername] = useState<string>("")
+    const [password, setPassword] = useState<string>("")
+
+    function onUsernameChange(event: ChangeEvent<HTMLInputElement>){
+        setUsername(event.target.value)
+    }
+    function onPasswordChange(event: ChangeEvent<HTMLInputElement>){
+        setPassword(event.target.value)
+    }
+    function onSendForm(event: FormEvent){
+        event.preventDefault()
+        alert("form en développement")
+    }
     return (
         <div style={{
             justifyContent: "center",
             alignItems: "center",
-
+            color: "white",
             width: "100%",
             height: "93vh",
             display: "flex"
             }}>
-            <form className={"login_container"}>
+            <form className={"login_container"} onSubmit={onSendForm}>
                 <h2>Connection au compte</h2>
-                <InputLoginButton src={usernameSvg} alt="username" title={"nom d'utilisateur"}/>
-                <InputLoginButton src={usernameSvg} alt="password" title={"mot de passe"}/>
+                <InputLoginButton src={usernameSvg} alt="username" title={"nom d'utilisateur"} Change={onUsernameChange}/>
+                <InputLoginButton src={usernameSvg} alt="password" title={"mot de passe"} type="password" Change={onPasswordChange}/>
                 <div className={"login_check"}>
                    <div>
-                    <input type="checkbox"/><p> Se souvenir de moi</p>
+                    <input type="checkbox"/>
+                    <p> Se souvenir de moi</p>
                    </div>
                     <p>reset mot de passe</p>
                 </div>
+                <Link href={"/auth/register"}>Pas de compte ? merci de vous enregistrer</Link>
                 <div className={"white_line"}></div>
                 <div className={"login_buttons_container"}>
-                    <button className={"base"}>Se connecter</button>
+                    <button className={"base"} type="submit">Se connecter</button>
                     <button className={"discord"}>Se connecter par discord</button>
                 </div>
             </form>

src/app/auth/register/page.tsx

@@ -1,7 +1,48 @@
+"use client"
+import usernameSvg from "@/assets/username.svg"
+import InputLoginButton from "@/components/inputs/InputLoginButtons"
+import { ChangeEvent, FormEvent, useState } from "react"
+
+
 export default function Register() {
+    const [email, setEmail] = useState<string>("")
+    const [username, setUsername] = useState<string>("")
+    const [password, setPassword] = useState<string>("")
+
+    function onUsernameChange(event: ChangeEvent<HTMLInputElement>){
+        setUsername(event.target.value)
+    }
+    function onPasswordChange(event: ChangeEvent<HTMLInputElement>){
+        setPassword(event.target.value)
+    }
+
+    function onEmailChange(event: ChangeEvent<HTMLInputElement>){
+        setEmail(event.target.value)
+    }
+    function onSendForm(event: FormEvent){
+        event.preventDefault()
+        console.log("email: " , email)
+        console.log("username: " , username)
+        console.log("password: ", password)
+    }
     return (
-        <>
-            <h1>register</h1>
-        </>
+        <div style={{
+            justifyContent: "center",
+            alignItems: "center",
+            color: "white",
+            width: "100%",
+            height: "93vh",
+            display: "flex"
+            }}>
+            <form className={"login_container"}>
+                <h2>enregistrer un compte</h2>
+                <InputLoginButton src={usernameSvg} alt="email" title={"email"} Change={onEmailChange} />
+                <InputLoginButton src={usernameSvg} alt="username" title={"nom d'utilisateur"} Change={onUsernameChange}/>
+                <InputLoginButton src={usernameSvg} alt="password" title={"mot de passe"} type="password" Change={onPasswordChange}/>
+                <div className={"login_buttons_container"} style={{marginTop: "1vh"}}>
+                    <button className={"base"} style={{width: "75%"}}>Se connecter</button>
+                </div>
+            </form>
+        </div>
     )
 }

src/components/inputs/InputLoginButtons.tsx

@@ -1,13 +1,16 @@
 import { StaticImport } from "next/dist/shared/lib/get-img-props";
 import Image, { ImageProps } from "next/image";
-import { FC, InputHTMLAttributes } from "react";
+import { ChangeEventHandler, FC, InputHTMLAttributes } from "react";
 
 interface InputLoginButtonProps{
     src: String | Object | any,
     title: string,
     alt: string,
+    type?: string,
+    Change?: ChangeEventHandler<HTMLInputElement>
 }
-const InputLoginButton: FC<InputLoginButtonProps> =  ({src, title, alt, ...props}) => {
+const InputLoginButton: FC<InputLoginButtonProps> =  ({src, title, alt, type = "Text", Change, ...props}) => {
+
     return (
         <div style={{
             display: "flex",
@@ -16,7 +19,8 @@ const InputLoginButton: FC<InputLoginButtonProps> =  ({src, title, alt, ...props
             justifyContent: "center",
             height: "5vh",
             padding: "10px",
-            marginTop: "-60px"
+            marginTop: "-40px",
+            color: "black"
         }}>
             <Image src={src} alt={alt} style={{
                 width: "55px",
@@ -33,15 +37,17 @@ const InputLoginButton: FC<InputLoginButtonProps> =  ({src, title, alt, ...props
                 borderColor: "black",
                 borderWidth: "1px"
             }}/>
-            <input type="Text" placeholder={title} style={{
+            <input type={type} placeholder={title} style={{
                 height: "55px",
                 borderColor: "red",
                 border: "solid",
                 borderWidth: "1px",
                 borderRadius: "10px",
                 paddingLeft: "60px",
                 position: "absolute",
-            }}/>
+            }}
+            onChange={Change}
+            />
         </div>
     )
 }

src/components/navBar.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Image from 'next/image'
 import logo from '@/assets/logo.png'
+import Link from "next/link";
 export default function NavBar(): React.ReactNode {
     return (
         <>
@@ -11,7 +12,7 @@ export default function NavBar(): React.ReactNode {
                     <div className="nav_container_right">
                         <button className="nav_buttons">DASHBOARD</button>
 
-                        <button className="nav_buttons">LOGIN</button>
+                        <button className="nav_buttons"><Link href={"/auth/login"}>LOGIN</Link></button>
                     </div>
                 </div>
             </div>