Kenny Login - Highway to the Danger Zone

GrossesMitaines/grosses-mitaines-ui/src/components/App.js

@@ -7,9 +7,9 @@ import ContactUs from "../pages/ContactUs";
 import Morceaux from "../pages/Morceaux";
 import MorceauDetail from "../pages/MorceauDetail";
 import Inventaire from "../pages/Inventaire";
+import Login from "../pages/Login";
 
 const App = () => {
-
   return (
     <BrowserRouter>
       <Routes>
@@ -21,6 +21,7 @@ const App = () => {
           <Route path="privacy" element={<Privacy/>}/>
           <Route path="morceaux/:id" element={<MorceauDetail/>}/>
           <Route path="inventaire" element={<Inventaire/>}/>
+          <Route path="login" element={<Login/>}/>
         </Route>
       </Routes>
     </BrowserRouter>

GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js

@@ -31,6 +31,9 @@ const Topbar = () => {
                         <Link className="nav-link" to="/privacy" >
                             Vie privée
                         </Link>
+                        <Link className="nav-link" to="/login" >
+                            Connexion
+                        </Link>
                         <Dropdown className="dropdown-gestion-container">
                             <Dropdown.Toggle className="dropdown-gestion" >
                                 Gestion

GrossesMitaines/grosses-mitaines-ui/src/pages/Login.js

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { Button } from "react-bootstrap";
+
+const Login = () => {
+
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+
+    const handleLogin = async (e) => {
+        e.preventDefault();
+
+        const response = await fetch(`https://localhost:7292/api/Login?rememberme=true`, {
+            method: 'POST',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ username, password })
+        })  
+
+        // Partie de display d'erreur ou de redirection (faudrait checker pour se faire un state de connexion).
+
+    }
+
+    return (
+        <div className="inventaire-form-container">
+            <form className="form-horizontal" onSubmit={handleLogin}>
+                <h4 className="text-center">Connexion</h4>
+                <div className="form-group">
+                    <label>Nom Utilisateur: </label>
+                    <input className="form-control form-input" type='text'
+                        placeholder="Nom de l'utilisateur..."
+                        value={username}
+                        onChange={(e) => setUsername(e.target.value)} />
+                </div>
+                <div className="form-group">
+                    <label>Mot de passe: </label>
+                    <input type='password' className="form-control form-input"
+                        placeholder="Mot de passe..."
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)} />
+                </div>
+                <Button className="btn-primary btn-ajouter-morceau" type="submit" >Connexion</Button>
+            </form>
+        </div>
+    )
+}
+
+export default Login;