Register

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

@@ -9,6 +9,7 @@ import MorceauDetail from "../pages/MorceauDetail";
 import Inventaire from "../pages/Inventaire";
 import Login from "../pages/Login";
 import Logout from "../pages/Logout";
+import Register from "../pages/Register";
 const App = () => {
   return (
     <BrowserRouter>
@@ -23,6 +24,7 @@ const App = () => {
           <Route path="inventaire" element={<Inventaire/>}/>
           <Route path="login" element={<Login/>}/>
           <Route path="logout" element={<Logout/>}/>
+          <Route path="register" element={<Register/>}/>
         </Route>
       </Routes>
     </BrowserRouter>

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

@@ -41,6 +41,9 @@ const Login = () => {
                         onChange={(e) => setPassword(e.target.value)} />
                 </div>
                 <Button className="btn-primary btn-ajouter-morceau" type="submit" >Connexion</Button>
+                <Button className="btn-primary btn-ajouter-morceau" type="button" >
+                    <a href="http://localhost:3000/register">Nouvel utilisateur</a>
+                </Button>
             </form>
         </div>
     )

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

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { Button } from "react-bootstrap";
+
+const Register = () => {
+
+    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">Nouvel utilisateur</h4>
+                <div className="form-group">
+                    <label>Nom Utilisateur: </label>
+                    <input className="form-control form-input" type='text'
+                        placeholder="Votre nom..."
+                        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" >Confirmer</Button>
+            </form>
+        </div>
+    )
+}
+
+export default Register;

GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css

@@ -15,6 +15,11 @@ html {
     height: 100%;
 }
 
+a {
+    color: white;
+    text-decoration: none; 
+}
+
 .contactUs {
     height: 100vh;
 }