Merge pull request #207 from Arquisoft/fix-usability

Fix usability
Arquisoft · Apr 28, 2024 · 5b1c52d · 5b1c52d
2 parents 3e6f8db + 7b57437
commit 5b1c52d
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 35 deletions.
diff --git 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/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 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>
-        <input
-          type="password"
-          name="repeatPassword"
-          id="repeatPassword"
-          placeholder={t("register.password_confirm_placeholder")}
-          onChange={e => setRepeatPassword(e.target.value)}
-          value={repeatPassword}
-        />
+
+        <PasswordField id="repeatPassword" name="repeatPassword" 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
@@ -87,7 +87,7 @@ const Login = () => {
         />
         <p className="form-error">{formErrors.username}</p>
 
-        <PasswordField 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
@@ -5,19 +5,17 @@ import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
 
 import './PasswordField.css'
 
-import { useTranslation } from "react-i18next";
-const PasswordField = ({ password, setPassword }) => {
+const PasswordField = ({ id, name, placeholder, password, setPassword }) => {
 
     const [showPassword, setShowPassword] = useState(false);
-    const { t } = useTranslation();
 
     return (
         <div className="input-box">
             <input
                 type={showPassword ? "text" : "password"}
-                name="password"
-                id="password"
-                placeholder={t("register.password_placeholder")}
+                name={name}
+                id={id}
+                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
@@ -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 {
-  max-width: 100%;
-  width: 20%;
   border-radius: 10px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
diff --git 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
@@ -26,24 +26,24 @@ const renderPasswordField = _ =>
     render(
         <MemoryRouter>
             <I18nextProvider i18n={i18n}>
-                <PasswordField password="12345678" setPassword={() => {}} />
+                <PasswordField id="password" name="password" 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')
     })
 })
diff --git 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>

diff --git 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>
         </>
       ) : (