Sma 17 implement login screen (#20)

frontend/sportsmatch-app/.eslintrc.json

@@ -46,6 +46,9 @@
 
     },
     "settings": {
+        "react": {
+            "version": "detect" 
+        },
         "import/resolver": {
           "typescript": {}
         }

frontend/sportsmatch-app/package.json

@@ -18,7 +18,10 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.3"
+    "react-icons": "^5.0.1",
+    "react-router-dom": "^6.21.3",
+    "react-social-login-buttons": "^3.9.1",
+    "reactjs-social-login": "^2.6.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.3.0",

frontend/sportsmatch-app/src/App.tsx

@@ -1,15 +1,17 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import './App.css'
 import Home from './pages/Home'
-import Login from './pages/Login'
 import Test from './pages/Test'
+import Login from './pages/Login'
+import Signup from './pages/Signup'
 
 function App() {
   return (
     <BrowserRouter>
       <div>
         <Routes>
           <Route path="login" element={<Login />} />
+          <Route path="signup" element={<Signup />} />
           <Route path="test" element={<Test />}>
             <Route index element={<Test />} />
             <Route path=":testId" element={<Test />} />

frontend/sportsmatch-app/src/components/LoginComponent.tsx

@@ -0,0 +1,48 @@
+import '../styles/LoginComponent.css'
+import { FaMailBulk, FaLock, FaGoogle, FaFacebook } from 'react-icons/fa'
+
+function LoginComponent() {
+  return (
+    <div className="wrapper">
+      <form action="">
+        <h1>Log in</h1>
+        <div className="input-box">
+          <label htmlFor="email"></label>
+          <input type="email" placeholder="E-mail addres" required />
+          <FaMailBulk className="icon" />
+        </div>
+        <div className="input-box">
+          <label htmlFor="password"></label>
+          <input type="password" placeholder="password" required />
+          <FaLock className="icon" />
+        </div>
+        <div className="remember-forgot">
+          <label>
+            <input type="checkbox" />
+            Remember me{' '}
+          </label>
+          <a href="#">Forgot password</a>
+        </div>
+
+        <button type="submit">Log in</button>
+        <div className="register-link">
+          <p>
+            Dont have an account <a href="signup">Register</a>
+          </p>
+        </div>
+        <p className="alt-login-text">Or log in using</p>
+
+        <div className="alt-login">
+          <div className="facebook">
+            <FaFacebook className="fb-icon" />
+          </div>
+          <div className="google">
+            <FaGoogle className="g-icon" />
+          </div>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default LoginComponent

frontend/sportsmatch-app/src/components/SignupComponent.tsx

@@ -0,0 +1,38 @@
+import '../styles/LoginComponent.css'
+import { FaLock, FaMailBulk } from 'react-icons/fa'
+
+function SignupComponent() {
+  return (
+    <div className="wrapper">
+      <form action="">
+        <h1>Sign up</h1>
+        <div className="input-box">
+          <label htmlFor="email"></label>
+          <input type="email" placeholder="E-mail addres" required />
+          <FaMailBulk className="icon" />
+        </div>
+        <div className="input-box">
+          <label htmlFor="password"></label>
+          <input type="password" placeholder="password" required />
+          <FaLock className="icon" />
+        </div>
+        <div className="input-box">
+          <label htmlFor="confirm-password"></label>
+          <input
+            type="confirm-password"
+            placeholder="confirm password"
+            required
+          />
+          <FaLock className="icon" />
+        </div>
+        <div className="remember-forgot">
+          <a href="login">Allready have an account? Log in here.</a>
+        </div>
+
+        <button type="submit">Sign up</button>
+      </form>
+    </div>
+  )
+}
+
+export default SignupComponent

frontend/sportsmatch-app/src/pages/Login.tsx

@@ -1,3 +1,9 @@
+import LoginComponent from '../components/LoginComponent'
+
 export default function Login() {
-  return <h1>This is a login page</h1>
+  return (
+    <>
+      <LoginComponent />
+    </>
+  )
 }

frontend/sportsmatch-app/src/pages/Signup.tsx

@@ -0,0 +1,9 @@
+import SignupComponent from '../components/SignupComponent'
+
+export default function NSignup() {
+  return (
+    <>
+      <SignupComponent />
+    </>
+  )
+}

frontend/sportsmatch-app/src/styles/LoginComponent.css

@@ -0,0 +1,169 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.wrapper {
+  width: 330px;
+  background: #fff;
+  border: 2px solid rgba(65, 58, 58, 0.2);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(30px);
+  color: #ccc;
+  border-radius: 10px;
+  padding: 30px 20px;
+}
+
+.wrapper h1 {
+  color: #e85f29;
+  font-size: 36px;
+  text-align: center;
+}
+
+.wrapper .input-box {
+  position: relative;
+  width: 100%;
+  height: 40px;
+  margin: 30px 0;
+}
+
+.input-box input {
+  width: 100%;
+  height: 100%;
+  border: 1px solid rgba(65, 58, 58, 0.2);
+  border-radius: 40px;
+  font-size: 13px;
+  padding: 20px 45px 20px 20px;
+}
+
+.input-box input::placeholder {
+  color: #ccc;
+}
+
+.input-box input:focus {
+  outline-color: #e85f29;
+}
+
+.input-box .icon {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 16px;
+}
+
+.wrapper .remember-forgot {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  margin: -15px 0 15px;
+}
+
+.remember-forgot label input {
+  accent-color: #ccc;
+  margin-right: 4px;
+}
+
+.remember-forgot a {
+  color: #ccc;
+  text-decoration: none;
+}
+
+.remember-forgot a:hover {
+  text-decoration: underline;
+}
+
+.wrapper button {
+  width: 100%;
+  height: 45px;
+  background: #e85f29;
+  border: none;
+  outline: none;
+  border-radius: 40px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  font-size: 16px;
+  color: #fff;
+  font-weight: 700;
+}
+
+.wrapper button:hover {
+  transform: scale(1.05);
+}
+
+.wrapper .register-link {
+  font-size: 14px;
+  text-align: center;
+  margin: 20px 0 15px;
+}
+
+.register-link p a {
+  color: #ccc;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.register-link p a:hover {
+  text-decoration: underline;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: #e9e6e6;
+  background-size: cover;
+  background-position: center;
+}
+
+.alt-login {
+  width: 100%;
+  height: 3em;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.alt-login div {
+  width: 45%;
+  height: 90%;
+  border-radius: 40px;
+  background-color: #e85f29;
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  justify-content: center;
+}
+
+.alt-login div:hover {
+  transform: scale(1.05);
+}
+
+.g-icon {
+  color: #fff;
+  position: relative;
+  top: 17px;
+  left: 40%;
+  transform: translateY(-50%);
+  font-size: 22px;
+}
+
+.fb-icon {
+  color: #fff;
+  position: relative;
+  top: 20px;
+  left: 40%;
+  transform: translateY(-50%);
+  font-size: 25px;
+}
+
+.alt-login-text {
+  color: #e85f29;
+  text-decoration: none;
+  text-align: center;
+}

frontend/sportsmatch-app/src/styles/SportEvent.css

@@ -1,5 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;900&display=swap');
 
+
+.container {
+  display: flex;
+  justify-content: center;
+  margin-top: 5%;
+
+}
 .event-card {
     display: grid;
     grid-template-columns: 1fr 1fr;