From 2631d2e3d4205b947826a5954d6723cb80f486b2 Mon Sep 17 00:00:00 2001 From: Mister-Mario <mariojr2003@gmail.com> Date: Sat, 23 Mar 2024 20:34:08 +0100 Subject: [PATCH] Now we can login as a user registered --- webapp/package-lock.json | 26 +++---- webapp/package.json | 2 +- .../components/loginAndRegistration/Login.js | 77 +++++++++++++------ 3 files changed, 67 insertions(+), 38 deletions(-) diff --git a/webapp/package-lock.json b/webapp/package-lock.json index ad42295e..9ae1d63d 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -21,7 +21,7 @@ "react-dom": "^18.2.0", "react-i18next": "^14.0.5", "react-icons": "^5.0.1", - "react-router-dom": "^6.22.2", + "react-router-dom": "^6.22.3", "react-scripts": "^5.0.1", "web-vitals": "^3.5.1" }, @@ -5050,9 +5050,9 @@ } }, "node_modules/@remix-run/router": { - "version": "1.15.2", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.2.tgz", - "integrity": "sha512-+Rnav+CaoTE5QJc4Jcwh5toUpnVLKYbpU6Ys0zqbakqbaLQHeglLVHPfxOiQqdNmUy5C2lXz5dwC6tQNX2JW2Q==", + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==", "engines": { "node": ">=14.0.0" } @@ -22195,11 +22195,11 @@ } }, "node_modules/react-router": { - "version": "6.22.2", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.2.tgz", - "integrity": "sha512-YD3Dzprzpcq+tBMHBS822tCjnWD3iIZbTeSXMY9LPSG541EfoBGyZ3bS25KEnaZjLcmQpw2AVLkFyfgXY8uvcw==", + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", "dependencies": { - "@remix-run/router": "1.15.2" + "@remix-run/router": "1.15.3" }, "engines": { "node": ">=14.0.0" @@ -22209,12 +22209,12 @@ } }, "node_modules/react-router-dom": { - "version": "6.22.2", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.2.tgz", - "integrity": "sha512-WgqxD2qySEIBPZ3w0sHH+PUAiamDeszls9tzqMPBDA1YYVucTBXLU7+gtRfcSnhe92A3glPnvSxK2dhNoAVOIQ==", + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", "dependencies": { - "@remix-run/router": "1.15.2", - "react-router": "6.22.2" + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" }, "engines": { "node": ">=14.0.0" diff --git a/webapp/package.json b/webapp/package.json index f31b2a0c..aab06447 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -16,7 +16,7 @@ "react-dom": "^18.2.0", "react-i18next": "^14.0.5", "react-icons": "^5.0.1", - "react-router-dom": "^6.22.2", + "react-router-dom": "^6.22.3", "react-scripts": "^5.0.1", "web-vitals": "^3.5.1" }, diff --git a/webapp/src/components/loginAndRegistration/Login.js b/webapp/src/components/loginAndRegistration/Login.js index 167b5ca8..b33e629c 100644 --- a/webapp/src/components/loginAndRegistration/Login.js +++ b/webapp/src/components/loginAndRegistration/Login.js @@ -1,50 +1,80 @@ import React from "react"; -import { FaUser, FaLock } from "react-icons/fa"; import { Link } from "react-router-dom"; -import Button from "@mui/material/Button"; import { useTranslation } from "react-i18next"; import "../../custom.css"; +import axios from 'axios'; +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; const Login = () => { + const navigate = useNavigate(); + const apiUrl = (process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000') + "/login"; const { t } = useTranslation("global"); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + + const handleSubmit = async (event) => { + event.preventDefault(); + try { + const response = await axios.post(apiUrl, { username, password }); + console.log("Hello " + response.username); + //Used to redirect to the menu to start playing + navigate('/menu'); + } catch (error) { + console.error('Error adding user:', error); + } + }; return ( - <div className="wrapper"> - <form action=""> - <div className="wrapper2"> + <div className="general"> + + <div className="card"> + <div className="card2"> + <form className="form" onSubmit={handleSubmit}> <h1>{t("login.title")}</h1> <div className="input-box"> - <input type="text" placeholder={t("login.username_placeholder")} /> - <FaUser className="icon" /> + <input + type="text" + placeholder={t("addUser.username_placeholder")} + required + value={username} + onChange={(e) => setUsername(e.target.value)} + /> </div> <div className="input-box"> - <input type="password" placeholder={t("login.password_placeholder")} /> - <FaLock className="icon" /> + <input + type="password" + placeholder={t("addUser.password_placeholder")} + required + value={password} + onChange={(e) => setPassword(e.target.value)} + /> </div> - + {//TODO: Study this option and see if it is viable + } <div className="remember-forgot"> <label> <input type="checkbox" /> {t("login.remember_me")} </label> - <a href="#">{t("login.forgot_password")}</a> </div> - <ButtonMenu /> + <button type="submit">{t("login.login_button")}</button> <LinkRegister /> - </div> - </form> + </form> + </div> + </div> </div> ); }; -function ButtonMenu() { - const { t } = useTranslation("global"); - return ( - <Link to="/menu" className="button-menu"> - <Button>{t("login.login_button")}</Button> - </Link> - ); -} +// function ButtonMenu() { +// const { t } = useTranslation("global"); +// return ( +// <Link to="/menu" className="button-menu"> + +// </Link> +// ); +// } function LinkRegister() { const { t } = useTranslation("global"); @@ -57,7 +87,6 @@ function LinkRegister() { export default Login; - // // src/components/Login.js // import React, { useState } from 'react'; // import axios from 'axios'; @@ -137,4 +166,4 @@ export default Login; // ); // }; -// export default Login; +// export default Login; \ No newline at end of file