From 3249ac95aff2050fb3b099a69cb0fecfe1e9a137 Mon Sep 17 00:00:00 2001
From: Murias10 <uo290009@uniovi.es>
Date: Sun, 28 Apr 2024 20:21:39 +0200
Subject: [PATCH 1/5] Change password field and images size

---
 webapp/src/components/AddUser/AddUser.js           | 14 +++++---------
 webapp/src/components/Login/Login.js               |  2 +-
 .../src/components/PasswordField/PasswordField.js  |  6 ++----
 webapp/src/components/Quiz/Question.css            |  4 ++--
 webapp/src/pages/Home/Home.js                      |  2 +-
 5 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/webapp/src/components/AddUser/AddUser.js b/webapp/src/components/AddUser/AddUser.js
index 02abf1ee..5585d8a9 100644
--- a/webapp/src/components/AddUser/AddUser.js
+++ b/webapp/src/components/AddUser/AddUser.js
@@ -108,20 +108,16 @@ const AddUser = () => {
         />
         <p className="form-error">{formErrors.username}</p>
 
-        <PasswordField password={password} setPassword={setPassword} />
+        <PasswordField placeholder={t("register.password_placeholder")} password={password} setPassword={setPassword} />
 
         <PasswordStrengthBar password={password} shortScoreWord={t("register.strength.very_week")} scoreWords={strengthWords} minLength={8} />
 
         <p className="form-error">{formErrors.password}</p>
-        <input
-          type="password"
-          name="repeatPassword"
-          id="repeatPassword"
-          placeholder={t("register.password_confirm_placeholder")}
-          onChange={e => setRepeatPassword(e.target.value)}
-          value={repeatPassword}
-        />
+
+        <PasswordField placeholder={t("register.password_confirm_placeholder")} password={repeatPassword} setPassword={setRepeatPassword} />
+
         <p className="form-error">{formErrors.repeatPassword}</p>
+
         <button className="button-common">{t("register.button")}</button>
       </form>
       <Link to="/login">{t("register.go_login")}</Link>
diff --git a/webapp/src/components/Login/Login.js b/webapp/src/components/Login/Login.js
index 6e023d34..60c711a4 100644
--- a/webapp/src/components/Login/Login.js
+++ b/webapp/src/components/Login/Login.js
@@ -87,7 +87,7 @@ const Login = () => {
         />
         <p className="form-error">{formErrors.username}</p>
 
-        <PasswordField password={password} setPassword={setPassword} />
+        <PasswordField placeholder={t("login.password_placeholder")} password={password} setPassword={setPassword} />
 
         <p className="form-error">{formErrors.password}</p>
         <button className="button-common" onClick={loginHandler}>
diff --git a/webapp/src/components/PasswordField/PasswordField.js b/webapp/src/components/PasswordField/PasswordField.js
index a599ed59..a357490a 100644
--- a/webapp/src/components/PasswordField/PasswordField.js
+++ b/webapp/src/components/PasswordField/PasswordField.js
@@ -5,11 +5,9 @@ import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
 
 import './PasswordField.css'
 
-import { useTranslation } from "react-i18next";
-const PasswordField = ({ password, setPassword }) => {
+const PasswordField = ({ placeholder, password, setPassword }) => {
 
     const [showPassword, setShowPassword] = useState(false);
-    const { t } = useTranslation();
 
     return (
         <div className="input-box">
@@ -17,7 +15,7 @@ const PasswordField = ({ password, setPassword }) => {
                 type={showPassword ? "text" : "password"}
                 name="password"
                 id="password"
-                placeholder={t("register.password_placeholder")}
+                placeholder={placeholder}
                 onChange={e => setPassword(e.target.value)}
                 value={password}
             />
diff --git a/webapp/src/components/Quiz/Question.css b/webapp/src/components/Quiz/Question.css
index 7928bbc7..d6dc89bf 100644
--- a/webapp/src/components/Quiz/Question.css
+++ b/webapp/src/components/Quiz/Question.css
@@ -46,8 +46,8 @@
 }
 
 .quiz-image img {
-  max-width: 100%;
-  width: 20%;
+  width: auto;
+  max-width: 190px;
   border-radius: 10px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
\ No newline at end of file
diff --git a/webapp/src/pages/Home/Home.js b/webapp/src/pages/Home/Home.js
index cb0ee0b4..0aeece46 100644
--- a/webapp/src/pages/Home/Home.js
+++ b/webapp/src/pages/Home/Home.js
@@ -23,7 +23,7 @@ function Home() {
         <>
           <img className="App-logo" src="KaW.png" alt="Logo of Know and Win APP" />
           <div className="welcome-message">
-            {t("home.welcome")}<span className="username">{user.username}</span>!
+            {t("home.welcome")} <strong>{user.username}</strong>
           </div>
         </>
       ) : (

From da5b6440ade2b9ea1041d3ff5bb1c074e5781dfe Mon Sep 17 00:00:00 2001
From: Murias10 <uo290009@uniovi.es>
Date: Sun, 28 Apr 2024 20:32:08 +0200
Subject: [PATCH 2/5] add media query

---
 webapp/src/components/Quiz/Question.css | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/Quiz/Question.css b/webapp/src/components/Quiz/Question.css
index d6dc89bf..82bb7738 100644
--- a/webapp/src/components/Quiz/Question.css
+++ b/webapp/src/components/Quiz/Question.css
@@ -39,15 +39,29 @@
     padding: 60px;
     font-size: 20px;
   }
+
+
+}
+
+@media (min-width: 400px) {
+  .quiz-image img {
+    width: 250px;
+  }
 }
 
+@media (max-width: 400px) {
+  .quiz-image img {
+    width: 195px;
+  }
+}
+
+
+
 .question-text {
   margin-bottom: 20px;
 }
 
 .quiz-image img {
-  width: auto;
-  max-width: 190px;
   border-radius: 10px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
\ No newline at end of file

From 262a205899fe7b41c7d576c56aba6f4a01651e8f Mon Sep 17 00:00:00 2001
From: Murias10 <uo290009@uniovi.es>
Date: Sun, 28 Apr 2024 20:37:42 +0200
Subject: [PATCH 3/5] Fix tests

---
 webapp/src/components/test/Login.test.js         | 2 +-
 webapp/src/components/test/PasswordField.test.js | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/webapp/src/components/test/Login.test.js b/webapp/src/components/test/Login.test.js
index 139a78e3..75b861ed 100644
--- a/webapp/src/components/test/Login.test.js
+++ b/webapp/src/components/test/Login.test.js
@@ -22,7 +22,7 @@ i18n.init({
     en: {
       translation: {
         'login.username_placeholder': 'Username',
-        'register.password_placeholder': 'Password',
+        'login.password_placeholder': 'Password',
         'login.button': 'Login',
         'login.welcome':
           'Welcome to Know and Win App, please login to procceed',
diff --git a/webapp/src/components/test/PasswordField.test.js b/webapp/src/components/test/PasswordField.test.js
index 2aad07a9..ba577665 100644
--- a/webapp/src/components/test/PasswordField.test.js
+++ b/webapp/src/components/test/PasswordField.test.js
@@ -26,24 +26,24 @@ const renderPasswordField = _ =>
     render(
         <MemoryRouter>
             <I18nextProvider i18n={i18n}>
-                <PasswordField password="12345678" setPassword={() => {}} />
+                <PasswordField placeholder={"placeholder"} password="12345678" setPassword={() => { }} />
             </I18nextProvider>
         </MemoryRouter>
     )
 
 
 describe('password field tests', () => {
-   
+
     test('hide password', () => {
         renderPasswordField()
-        const inputElement = screen.getByPlaceholderText('Password')
+        const inputElement = screen.getByPlaceholderText('placeholder')
         expect(inputElement).toHaveAttribute('type', 'password')
     })
 
     test('show password', () => {
         renderPasswordField()
         fireEvent.click(screen.getByRole('button'))
-        const inputElement = screen.getByPlaceholderText('Password')
+        const inputElement = screen.getByPlaceholderText('placeholder')
         expect(inputElement).toHaveAttribute('type', 'text')
     })
 })
\ No newline at end of file

From cb331f8b28addf8a3df8d7d18d661d172467c4af Mon Sep 17 00:00:00 2001
From: Murias10 <uo290009@uniovi.es>
Date: Sun, 28 Apr 2024 21:00:17 +0200
Subject: [PATCH 4/5] Fix tests

---
 webapp/src/components/AddUser/AddUser.js             | 4 ++--
 webapp/src/components/Login/Login.js                 | 2 +-
 webapp/src/components/PasswordField/PasswordField.js | 6 +++---
 webapp/src/components/test/PasswordField.test.js     | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/webapp/src/components/AddUser/AddUser.js b/webapp/src/components/AddUser/AddUser.js
index 5585d8a9..d27f9311 100644
--- a/webapp/src/components/AddUser/AddUser.js
+++ b/webapp/src/components/AddUser/AddUser.js
@@ -108,13 +108,13 @@ const AddUser = () => {
         />
         <p className="form-error">{formErrors.username}</p>
 
-        <PasswordField placeholder={t("register.password_placeholder")} password={password} setPassword={setPassword} />
+        <PasswordField id="password" name="password" placeholder={t("register.password_placeholder")} password={password} setPassword={setPassword} />
 
         <PasswordStrengthBar password={password} shortScoreWord={t("register.strength.very_week")} scoreWords={strengthWords} minLength={8} />
 
         <p className="form-error">{formErrors.password}</p>
 
-        <PasswordField placeholder={t("register.password_confirm_placeholder")} password={repeatPassword} setPassword={setRepeatPassword} />
+        <PasswordField id="repeatPassword" name="repeatPassword" placeholder={t("register.password_confirm_placeholder")} password={repeatPassword} setPassword={setRepeatPassword} />
 
         <p className="form-error">{formErrors.repeatPassword}</p>
 
diff --git a/webapp/src/components/Login/Login.js b/webapp/src/components/Login/Login.js
index 60c711a4..fc07e327 100644
--- a/webapp/src/components/Login/Login.js
+++ b/webapp/src/components/Login/Login.js
@@ -87,7 +87,7 @@ const Login = () => {
         />
         <p className="form-error">{formErrors.username}</p>
 
-        <PasswordField placeholder={t("login.password_placeholder")} password={password} setPassword={setPassword} />
+        <PasswordField id="password" name="password" placeholder={t("login.password_placeholder")} password={password} setPassword={setPassword} />
 
         <p className="form-error">{formErrors.password}</p>
         <button className="button-common" onClick={loginHandler}>
diff --git a/webapp/src/components/PasswordField/PasswordField.js b/webapp/src/components/PasswordField/PasswordField.js
index a357490a..81f05dbd 100644
--- a/webapp/src/components/PasswordField/PasswordField.js
+++ b/webapp/src/components/PasswordField/PasswordField.js
@@ -5,7 +5,7 @@ import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
 
 import './PasswordField.css'
 
-const PasswordField = ({ placeholder, password, setPassword }) => {
+const PasswordField = ({ id, name, placeholder, password, setPassword }) => {
 
     const [showPassword, setShowPassword] = useState(false);
 
@@ -13,8 +13,8 @@ const PasswordField = ({ placeholder, password, setPassword }) => {
         <div className="input-box">
             <input
                 type={showPassword ? "text" : "password"}
-                name="password"
-                id="password"
+                name={name}
+                id={id}
                 placeholder={placeholder}
                 onChange={e => setPassword(e.target.value)}
                 value={password}
diff --git a/webapp/src/components/test/PasswordField.test.js b/webapp/src/components/test/PasswordField.test.js
index ba577665..5d3af848 100644
--- a/webapp/src/components/test/PasswordField.test.js
+++ b/webapp/src/components/test/PasswordField.test.js
@@ -26,7 +26,7 @@ const renderPasswordField = _ =>
     render(
         <MemoryRouter>
             <I18nextProvider i18n={i18n}>
-                <PasswordField placeholder={"placeholder"} password="12345678" setPassword={() => { }} />
+                <PasswordField id="password" name="password" placeholder={"placeholder"} password="12345678" setPassword={() => { }} />
             </I18nextProvider>
         </MemoryRouter>
     )

From 7b574373e5055b6898ba00016d81c90fc537f6ef Mon Sep 17 00:00:00 2001
From: Raulms29 <UO287827@uniovi.es>
Date: Sun, 28 Apr 2024 22:49:49 +0200
Subject: [PATCH 5/5] Fixed e2e tests

---
 webapp/e2e/steps/register-form.utils.js |  5 ++---
 webapp/src/pages/AppLayout.js           | 16 ++++++++--------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/webapp/e2e/steps/register-form.utils.js b/webapp/e2e/steps/register-form.utils.js
index a7234eaf..d6eb5a9f 100644
--- a/webapp/e2e/steps/register-form.utils.js
+++ b/webapp/e2e/steps/register-form.utils.js
@@ -7,11 +7,10 @@ async function registerUser(page, username, password) {
 
 async function waitForWelcomeMessage(page, username) {
   await expect(page).toMatchElement('.welcome-message', {
-    text: 'Welcome back,',
-    timeout: 5000,
+    text: 'Welcome back, ',
   })
 
-  await expect(page).toMatchElement('.welcome-message .username', {
+  await expect(page).toMatchElement('.welcome-message strong', {
     text: username,
   })
 }
diff --git a/webapp/src/pages/AppLayout.js b/webapp/src/pages/AppLayout.js
index f447b355..0589fedb 100644
--- a/webapp/src/pages/AppLayout.js
+++ b/webapp/src/pages/AppLayout.js
@@ -50,19 +50,19 @@ const AppLayout = ({ volume }) => {
                     />
                 )}
 
-            <Header
-                onToggleNav={toggleNav}
-                onChangeTheme={changeThemeHandler}
-                theme={theme}
-                volume={volume}
-            />
+                <Header
+                    onToggleNav={toggleNav}
+                    onChangeTheme={changeThemeHandler}
+                    theme={theme}
+                    volume={volume}
+                />
 
-            <Nav openNav={nav} onToggleNav={toggleNav}/>
+                <Nav openNav={nav} onToggleNav={toggleNav} />
 
             </div>
 
             <main>
-                <Outlet/>
+                <Outlet />
 
             </main>
         </div>