Frontend new user profile page added and little fixing on login and s…

…ignup page
MatejFrnka · Feb 5, 2024 · b21e988 · b21e988
1 parent da8bd6f
commit b21e988
Show file tree

Hide file tree

Showing 15 changed files with 535 additions and 37 deletions.
diff --git a/frontend/sportsmatch-app/assets/female.png b/frontend/sportsmatch-app/assets/female.png
diff --git a/frontend/sportsmatch-app/assets/male.png b/frontend/sportsmatch-app/assets/male.png
diff --git a/frontend/sportsmatch-app/src/App.tsx b/frontend/sportsmatch-app/src/App.tsx
@@ -4,6 +4,7 @@ import Home from './pages/Home'
 import Test from './pages/Test'
 import Login from './pages/Login'
 import Signup from './pages/Signup'
+import NewUser from './pages/NewUser'
 
 function App() {
   return (
@@ -12,6 +13,7 @@ function App() {
         <Routes>
           <Route path="login" element={<Login />} />
           <Route path="signup" element={<Signup />} />
+          <Route path="newuser" element={<NewUser />} />
           <Route path="test" element={<Test />}>
             <Route index element={<Test />} />
             <Route path=":testId" element={<Test />} />

diff --git a/frontend/sportsmatch-app/src/components/LoginComponent.tsx b/frontend/sportsmatch-app/src/components/LoginComponent.tsx
@@ -3,20 +3,20 @@ import { FaMailBulk, FaLock, FaGoogle, FaFacebook } from 'react-icons/fa'
 
 function LoginComponent() {
   return (
-    <div className="wrapper">
+    <div className="wrapper-login">
       <form action="">
         <h1>Log in</h1>
-        <div className="input-box">
+        <div className="login-input-box">
           <label htmlFor="email"></label>
           <input type="email" placeholder="E-mail addres" required />
           <FaMailBulk className="icon" />
         </div>
-        <div className="input-box">
+        <div className="login-input-box">
           <label htmlFor="password"></label>
           <input type="password" placeholder="password" required />
           <FaLock className="icon" />
         </div>
-        <div className="remember-forgot">
+        <div className="login-remember-forgot">
           <label>
             <input type="checkbox" />
             Remember me{' '}
@@ -25,9 +25,9 @@ function LoginComponent() {
         </div>
 
         <button type="submit">Log in</button>
-        <div className="register-link">
+        <div className="login-register-link">
           <p>
-            Dont have an account <a href="signup">Register</a>
+            Dont have an account <a href="signup">REEGISTER</a>
           </p>
         </div>
         <p className="alt-login-text">Or log in using</p>

diff --git a/frontend/sportsmatch-app/src/components/NewUserComponent.tsx b/frontend/sportsmatch-app/src/components/NewUserComponent.tsx
@@ -0,0 +1,7 @@
+import '../styles/NewUserComponent.css'
+
+function NewUserComponent() {
+  return <div className="wrapper"></div>
+}
+
+export default NewUserComponent
diff --git a/frontend/sportsmatch-app/src/components/NewUserGenderComponent.tsx b/frontend/sportsmatch-app/src/components/NewUserGenderComponent.tsx
@@ -0,0 +1,33 @@
+import '../styles/NewUserComponent.css'
+
+function NewUserGenderComponent() {
+  return (
+    <div className="wrapper">
+      <form action="">
+        <div className="gender">
+          <p>Select your gender</p>
+          <div className="male-female">
+            <a href="">
+              <div className="parent-male">
+                <img className="img-male" src="./assets/male.png" alt="male" />
+                <div className="male"></div>
+              </div>
+            </a>
+            <a href="">
+              <div className="parent-female">
+                <img
+                  className="img-female"
+                  src="./assets/female.png"
+                  alt="female"
+                />
+                <div className="female"></div>
+              </div>
+            </a>
+          </div>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default NewUserGenderComponent
diff --git a/frontend/sportsmatch-app/src/components/NewUserInputComponent.tsx b/frontend/sportsmatch-app/src/components/NewUserInputComponent.tsx
@@ -0,0 +1,22 @@
+import '../styles/NewUserComponent.css'
+import { FaRegUser, FaRegCalendarAlt } from 'react-icons/fa'
+
+function NewUserInputComponent() {
+  return (
+    <div className="newUser-wrapper">
+      <form action="">
+        <h1>Profile</h1>
+        <div className="newUser-input-box">
+          <input type="text" placeholder="Enter Username" required />
+          <FaRegUser className="newUser-icon" />
+        </div>
+        <div className="newUser-input-box">
+          <input type="text" placeholder="Enter Date of Birth" required />
+          <FaRegCalendarAlt className="newUser-icon" />
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default NewUserInputComponent
diff --git a/frontend/sportsmatch-app/src/components/NewUserRegistrationButtonComponent.tsx b/frontend/sportsmatch-app/src/components/NewUserRegistrationButtonComponent.tsx
@@ -0,0 +1,15 @@
+import '../styles/NewUserComponent.css'
+
+function NewUserRegistrationButtonComponent() {
+  return (
+    <div className="wrapper">
+      <form action="">
+        <button className="save" type="submit">
+          Save profile
+        </button>
+      </form>
+    </div>
+  )
+}
+
+export default NewUserRegistrationButtonComponent
diff --git a/frontend/sportsmatch-app/src/components/SignupComponent.tsx b/frontend/sportsmatch-app/src/components/SignupComponent.tsx
@@ -1,31 +1,31 @@
-import '../styles/LoginComponent.css'
+import '../styles/SignupComponent.css'
 import { FaLock, FaMailBulk } from 'react-icons/fa'
 
 function SignupComponent() {
   return (
-    <div className="wrapper">
+    <div className="signup-wrapper">
       <form action="">
         <h1>Sign up</h1>
-        <div className="input-box">
+        <div className="signup-input-box">
           <label htmlFor="email"></label>
           <input type="email" placeholder="E-mail addres" required />
-          <FaMailBulk className="icon" />
+          <FaMailBulk className="signup-icon" />
         </div>
-        <div className="input-box">
+        <div className="signup-input-box">
           <label htmlFor="password"></label>
           <input type="password" placeholder="password" required />
-          <FaLock className="icon" />
+          <FaLock className="signup-icon" />
         </div>
-        <div className="input-box">
+        <div className="signup-input-box">
           <label htmlFor="confirm-password"></label>
           <input
             type="confirm-password"
             placeholder="confirm password"
             required
           />
-          <FaLock className="icon" />
+          <FaLock className="signup-icon" />
         </div>
-        <div className="remember-forgot">
+        <div className="signup-remember-forgot">
           <a href="login">Allready have an account? Log in here.</a>
         </div>
 

diff --git a/frontend/sportsmatch-app/src/components/SportsButtonComponent.tsx b/frontend/sportsmatch-app/src/components/SportsButtonComponent.tsx
@@ -0,0 +1,101 @@
+import { useState } from 'react'
+import '../styles/NewUserComponent.css'
+
+function SportsButtonComponent() {
+  const [selectedButtons, setSelectedButtons] = useState<string[]>([])
+
+  const handleCheckboxChange = (buttonText: string) => {
+    if (selectedButtons.includes(buttonText)) {
+      setSelectedButtons(
+        selectedButtons.filter((button) => button !== buttonText),
+      )
+    } else {
+      setSelectedButtons([...selectedButtons, buttonText])
+    }
+  }
+
+  return (
+    <div className="wrapper">
+      <form action="">
+        <p>Select your sports</p>
+        <div className="sports-container">
+          <label>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtons.includes('Tennis')}
+              onChange={() => handleCheckboxChange('Tennis')}
+            />
+            <span className="sports-button">🥎 Tennis</span>
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtons.includes('Gym')}
+              onChange={() => handleCheckboxChange('Gym')}
+            />
+            <span className="sports-button">🏋 Gym</span>
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtons.includes('Golf')}
+              onChange={() => handleCheckboxChange('Golf')}
+            />
+            <span className="sports-button">🏌🏽 Golf</span>
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtons.includes('Bowling')}
+              onChange={() => handleCheckboxChange('Bowling')}
+            />
+            <span className="sports-button">🎳 Bowling</span>
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtons.includes('Running')}
+              onChange={() => handleCheckboxChange('Running')}
+            />
+            <span className="sports-button">🏃 Running</span>
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtons.includes('Bicycle')}
+              onChange={() => handleCheckboxChange('Bicycle')}
+            />
+            <span className="sports-button">🚴‍♀️ Bicycle</span>
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtons.includes('Boxing')}
+              onChange={() => handleCheckboxChange('Boxing')}
+            />
+            <span className="sports-button">🥊 Boxing</span>
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              className="sports-checkbox"
+              checked={selectedButtons.includes('Ping pong')}
+              onChange={() => handleCheckboxChange('Ping pong')}
+            />
+            <span className="sports-button">🏓 Ping pong</span>
+          </label>
+          <button id="more-sports-button">.&nbsp;&nbsp;.&nbsp;&nbsp;.</button>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default SportsButtonComponent
diff --git a/frontend/sportsmatch-app/src/pages/NewUser.tsx b/frontend/sportsmatch-app/src/pages/NewUser.tsx
@@ -0,0 +1,20 @@
+import NewUserComponent from '../components/NewUserComponent'
+import NewUserInputComponent from '../components/NewUserInputComponent'
+import NewUserGenderComponent from '../components/NewUserGenderComponent'
+import SportsButtonComponent from '../components/SportsButtonComponent'
+import NewUserRegistrationButtonComponent from '../components/NewUserRegistrationButtonComponent'
+import '../styles/NewUserComponent.css'
+
+export default function NewUser() {
+  return (
+    <div className="wrapper-frame">
+      <div className="components-container">
+        <NewUserComponent />
+        <NewUserInputComponent />
+        <NewUserGenderComponent />
+        <SportsButtonComponent />
+        <NewUserRegistrationButtonComponent />
+      </div>
+    </div>
+  )
+}