diff --git a/.env.example b/.env.example index 74666a5..d990bd1 100644 --- a/.env.example +++ b/.env.example @@ -1,6 +1,6 @@ -REACT_APP_FIREBASE_API_KEY = -REACT_APP_FIREBASE_AUTH_DOMAIN = -REACT_APP_FIREBASE_PROJECT_ID = -REACT_APP_FIREBASE_STORAGE_BUCKET = -REACT_APP_FIREBASE_MESSAGING_SENDER_ID = -REACT_APP_FIREBASE_APP_ID = \ No newline at end of file +REACT_APP_FIREBASE_API_KEY = +REACT_APP_FIREBASE_AUTH_DOMAIN = +REACT_APP_FIREBASE_PROJECT_ID = +REACT_APP_FIREBASE_STORAGE_BUCKET = +REACT_APP_FIREBASE_MESSAGING_SENDER_ID = +REACT_APP_FIREBASE_APP_ID = \ No newline at end of file diff --git a/package.json b/package.json index 73c1a28..24ac5db 100644 --- a/package.json +++ b/package.json @@ -11,13 +11,13 @@ "bootstrap-icons": "^1.8.2", "firebase": "^9.8.1", "node-sass": "^7.0.1", + "prettier": "^2.3.2", "react": "^18.1.0", "react-dom": "^18.1.0", "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "sass": "^1.51.0", - "web-vitals": "^2.1.4", - "prettier": "^2.3.2" + "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.js b/src/App.js index c3c47c0..d48a61d 100644 --- a/src/App.js +++ b/src/App.js @@ -13,6 +13,7 @@ import EventManagement from "./pages/EventManagement"; import Event from "./pages/Event"; import ManagerManagement from "./pages/ManagerManagement"; import Login from "./pages/Login"; +import Home from './pages/Home'; function App() { return ( @@ -27,6 +28,7 @@ function App() { } /> } /> } /> + } /> } /> diff --git a/src/assets/scss/AddEventForm.module.scss b/src/assets/scss/AddEventForm.module.scss index 2fb4cd4..16ffe1c 100644 --- a/src/assets/scss/AddEventForm.module.scss +++ b/src/assets/scss/AddEventForm.module.scss @@ -1,17 +1,44 @@ @import './variables.scss'; +.background { + background: rgba(145, 145, 192, 0.678); + width: 100%; + height: 100%; + z-index: 1; + position: absolute; + top: 0; + left: 0; + overflow: scroll; +} + .plate { - opacity: 100%; - position: relative; - width: 400px; - height: 500px; - margin: 0 auto; - margin-top: 80px; + position: absolute; + width: 25%; background-color: white; border-radius: 15px; display: flex; - margin-bottom: 25px; + padding: 5px 20px; box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.3), 0 6px 25px 0 rgba(0, 0, 0, 0.3); + left: 50%; + margin-top: 20px; + margin-bottom: 20px; + z-index: 2; + transform: translateX(-50%); + + @media (max-width: 1400px) { + width: 40%; + } + + @media (max-width: 1024px) { + width: 50%; + } + + @media (max-width: 700px) { + width: 70%; + } + @media (max-width: 500px) { + width: 90%; + } } .borders { @@ -25,6 +52,7 @@ } .title { + padding-top: 20px; font-family: 'Nunito', sans-serif; font-weight: 300; margin-bottom: 30px; @@ -37,4 +65,5 @@ .element:last-child { margin-top: 10px; + margin-bottom: 20px; } diff --git a/src/assets/scss/AddMemberForm.module.scss b/src/assets/scss/AddMemberForm.module.scss index 8200945..d43fbe4 100644 --- a/src/assets/scss/AddMemberForm.module.scss +++ b/src/assets/scss/AddMemberForm.module.scss @@ -1,17 +1,48 @@ @import './variables.scss'; -.plate { - opacity: 100%; - position: relative; - width: 400px; +.background { + background: rgba(145, 145, 192, 0.678); + width: 100%; height: 100%; - margin: 0 auto; - margin-top: 30px; + z-index: 1; + position: absolute; + top: 0; + left: 0; + overflow: scroll; +} +.plate { + position: absolute; + width: 25%; background-color: white; border-radius: 15px; display: flex; - margin-bottom: 25px; + padding: 5px 20px; box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.3), 0 6px 25px 0 rgba(0, 0, 0, 0.3); + left: 50%; + margin-top: 20px; + margin-bottom: 20px; + z-index: 2; + transform: translateX(-50%); + + @media (max-width: 1370px) { + width: 30%; + } + @media (max-width: 1270px) { + width: 35%; + } + @media (max-width: 1170px) { + width: 40%; + } + @media (max-width: 1024px) { + width: 50%; + } + + @media (max-width: 700px) { + width: 70%; + } + @media (max-width: 500px) { + width: 90%; + } } .borders { @@ -22,6 +53,10 @@ flex-direction: column; justify-content: center; margin: 25px auto; + + @media (max-width: 500px) { + font-size: 10px; + } } .title { diff --git a/src/assets/scss/event.module.scss b/src/assets/scss/event.module.scss index 31709b8..0bbdf0c 100644 --- a/src/assets/scss/event.module.scss +++ b/src/assets/scss/event.module.scss @@ -26,55 +26,60 @@ .event__box__list { display: flex; margin-left: 50px; - + + .comment__btn { + height: 25px; + } + @media (max-width: 834px) { margin-left: 0px; } - + p { font-size: 10px; margin-right: 50px; line-height: 15px; margin-top: 3px; - + padding-top: 3px; + @media (max-width: 834px) { margin-right: 30px; } - + @media (max-width: 648px) { margin-right: 20px; font-size: 8px; } - + @media (max-width: 543px) { margin-right: 10px; font-size: 6px; } - + @media (max-width: 348px) { margin-right: 5px; font-size: 5px; } } - + .event__box__img { margin: 0px 20px; padding-top: 3px; - + @media (max-width: 501px) { margin: 0px 10px; } - + @media (max-width: 349px) { margin: 0px 5px; } } } - + .event__box__btn { display: flex; flex-direction: row; - + div { @media (max-width: 1100px) { margin-right: 5px; diff --git a/src/assets/scss/eventList.module.scss b/src/assets/scss/eventList.module.scss index 19f6abc..21b9222 100644 --- a/src/assets/scss/eventList.module.scss +++ b/src/assets/scss/eventList.module.scss @@ -1,10 +1,14 @@ .container { - width: 900px; + width: 90%; margin: 0 auto; padding: 40px; - @media only screen and (max-width: 992px) { - max-width: 90%; - padding: 20px; + .textResponsive { + font-size: 17.5px; + padding-left: 42px; + + @media (max-width: 500px) { + font-size: 14px; + } } } diff --git a/src/assets/scss/eventManagement.module.scss b/src/assets/scss/eventManagement.module.scss index 817dbc7..68fffc2 100644 --- a/src/assets/scss/eventManagement.module.scss +++ b/src/assets/scss/eventManagement.module.scss @@ -1,5 +1,5 @@ .container { - width: 900px; + width: 90%; margin: 0 auto; padding: 40px; @@ -7,6 +7,29 @@ max-width: 90%; padding: 20px; } + .flexBlock { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0; + + .textResponsive { + font-size: 17.5px; + padding-left: 42px; + + @media (max-width: 500px) { + font-size: 14px; + } + } + .managementBtn { + font-size: 17.5px; + margin-right: 42px; + + @media (max-width: 500px) { + font-size: 14px; + } + } + } } .button__wrapper { diff --git a/src/assets/scss/home.module.scss b/src/assets/scss/home.module.scss index c5d88b0..1502834 100644 --- a/src/assets/scss/home.module.scss +++ b/src/assets/scss/home.module.scss @@ -1,4 +1,4 @@ -@import '../../assets/Scss/variables.scss'; +@import '../../assets/scss/variables.scss'; .container { width: 100%; diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss index e348798..352aef2 100644 --- a/src/assets/scss/index.scss +++ b/src/assets/scss/index.scss @@ -53,7 +53,7 @@ body { -moz-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family:'Nunito', sans-serif; - overflow: scroll; + overflow: auto; } input, button, diff --git a/src/assets/scss/login.module.scss b/src/assets/scss/login.module.scss index a2921bc..042789f 100644 --- a/src/assets/scss/login.module.scss +++ b/src/assets/scss/login.module.scss @@ -1,5 +1,7 @@ +@import '../../assets/Scss/variables.scss'; body { - background: linear-gradient(180deg, #4e73df 10%, #224abe 100%); + // background: linear-gradient(180deg, #4e73df 10%, #224abe 100%); + background: $light; overflow: hidden; } @@ -41,7 +43,7 @@ body { justify-content: center; margin-top: auto; margin-bottom: auto; - + @media (max-width: 990px) { width: 100%; } diff --git a/src/assets/scss/managermanagement.module.scss b/src/assets/scss/managermanagement.module.scss new file mode 100644 index 0000000..fcd6da5 --- /dev/null +++ b/src/assets/scss/managermanagement.module.scss @@ -0,0 +1,39 @@ +.tableContainerManagers { + max-width: 90%; + margin: 0 auto; + padding: 40px; + + .flexBlock { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0; + .textResponsive { + font-size: 17.5px; + padding-left: 42px; + + @media (max-width: 500px) { + font-size: 14px; + } + } + .managementBtn { + font-size: 17.5px; + margin-right: 42px; + + @media (max-width: 500px) { + font-size: 14px; + } + } + } + + .btnBlock { + padding-left: 20px; + padding-right: 20px; + display: flex; + justify-content: space-around; + } + + .tableRow { + vertical-align: middle; + } +} diff --git a/src/assets/scss/memberlist.module.scss b/src/assets/scss/memberlist.module.scss index cde13cf..1e3b7c6 100644 --- a/src/assets/scss/memberlist.module.scss +++ b/src/assets/scss/memberlist.module.scss @@ -3,25 +3,19 @@ margin: 0 auto; padding: 40px; - @media only screen and (max-width: 1024px) { - max-width: 100%; + .flexBlock { + padding-left: 42px; + overflow: hidden; } -} - -.flexBlock { - display: flex; - justify-content: space-between; - align-items: center; - padding: 30px 50px 30px 50px; -} -.btnBlock { - padding-left: 20px; - padding-right: 20px; - display: flex; - justify-content: space-around; -} + .btnBlock { + padding-left: 20px; + padding-right: 20px; + display: flex; + justify-content: space-around; + } -.tableRow { - vertical-align: middle; + .tableRow { + vertical-align: middle; + } } diff --git a/src/assets/scss/membermanagement.module.scss b/src/assets/scss/membermanagement.module.scss index 3e1eb3c..59e5d30 100644 --- a/src/assets/scss/membermanagement.module.scss +++ b/src/assets/scss/membermanagement.module.scss @@ -1,27 +1,46 @@ -.tableContainer { +.tableContainerManagement { max-width: 90%; - margin: 0 auto; - padding: 40px; - height: auto; - @media only screen and (max-width: 1024px) { - max-width: 100%; + margin: auto; + padding-top: 40px; + + .flexBlock { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0; + + .textResponsive { + font-size: 17.5px; + padding-left: 42px; + + @media (max-width: 500px) { + font-size: 14px; + } + } + + .managementBtn { + font-size: 17.5px; + margin-right: 42px; + + @media (max-width: 500px) { + font-size: 14px; + } + } } -} -.flexBlock { - display: flex; - justify-content: space-between; - align-items: center; - padding: 30px 50px 30px 50px; -} + .btnBlock { + padding-left: 10px; + padding-right: 10px; + display: flex; + justify-content: space-around; + } -.btnBlock { - padding-left: 20px; - padding-right: 20px; - display: flex; - justify-content: space-around; -} + .tableRow { + vertical-align: middle; + word-break: break-all; -.tableRow { - vertical-align: middle; + @media (max-width: 755px) { + word-break: normal; + } + } } diff --git a/src/assets/scss/profile.module.scss b/src/assets/scss/profile.module.scss index f41589b..cc076b6 100644 --- a/src/assets/scss/profile.module.scss +++ b/src/assets/scss/profile.module.scss @@ -1,8 +1,9 @@ .profile__container { display: flex; - justify-content: center; + justify-content: space-between; flex-direction: column; align-items: center; + height: 100vh; .profile__box__avatar__text { display: flex; @@ -11,6 +12,13 @@ flex-wrap: wrap; margin-top: 100px; padding: 10px; + + @media (max-width: 500px) { + justify-content: center; + flex-direction: column; + text-align: center; + margin-top: auto; + } } .profile__avatar { @@ -19,46 +27,34 @@ flex-direction: column; margin-right: 130px; padding: 10px; - - @media (max-width: 1100px) { - margin-right: 80px; - } - - @media (max-width: 768px) { - margin-right: 30px; - } - - @media (max-width: 568px) { - margin-right: 30px; + + @media (max-width: 500px) { + justify-content: center; + flex-direction: column; + margin: auto; } } p { - font-size: 16px; - line-height: 16px; - margin-bottom: 30px; - word-spacing: 11px; + font-size: 16px; + line-height: 16px; + margin-bottom: 30px; + word-spacing: 11px; } - + .profile__btn__change__pass { - margin-top: 130px; - transform: translate(350px, 0); - -webkit-transform: translate(350px, 0); - - @media (max-width: 1100px) { - transform: translate(100px, 0); - -webkit-transform: translate(100px, 0); - } - - @media (max-width: 768px) { - transform: translate(50px, 0); - -webkit-transform: translate(51px, 0); - } - - @media (max-width: 568px) { - margin-top: 40px; - transform: translate(0px, 0); - -webkit-transform: translate(0px, 0); + margin-top: 100px; + float: right; + + @media (max-width: 500px) { + float: none; + margin: auto; + text-align: center; } } + + @media (max-width: 500px) { + justify-content: center; + flex-direction: row; + } } diff --git a/src/assets/scss/sidebar.module.scss b/src/assets/scss/sidebar.module.scss index ad1b834..00930d7 100644 --- a/src/assets/scss/sidebar.module.scss +++ b/src/assets/scss/sidebar.module.scss @@ -43,7 +43,7 @@ opacity: 0.7; align-self: flex-start; - cursor: pointer; + cursor: pointer; &:hover { opacity: 1; color: #fff; @@ -71,9 +71,9 @@ display: flex; justify-content: center; align-items: center; - padding: 1.5rem 1rem; + height: 4.375rem; - .roleText { + .roleText { padding-left: 20px; font-size: 25px; margin-bottom: 0; diff --git a/src/assets/svg/svg-icons.js b/src/assets/svg/svg-icons.js index 27184d4..44efadc 100644 --- a/src/assets/svg/svg-icons.js +++ b/src/assets/svg/svg-icons.js @@ -1,5 +1,5 @@ export const SmileSvg = (props) => ( - + diff --git a/src/features/AddEventForm/AddEventForm.js b/src/features/AddEventForm/AddEventForm.js index 8bb14fb..8a6ae9a 100644 --- a/src/features/AddEventForm/AddEventForm.js +++ b/src/features/AddEventForm/AddEventForm.js @@ -8,22 +8,24 @@ import Input from '../../ui/input/Input/Input' const AddEventForm = ({ closeForm }) => { return ( -
-
- -
-

Add Event Form

-
- -
-
- -
-
- -
-
-
diff --git a/src/features/AddMemberForm/AddMemberForm.js b/src/features/AddMemberForm/AddMemberForm.js index 3b033af..79186b8 100644 --- a/src/features/AddMemberForm/AddMemberForm.js +++ b/src/features/AddMemberForm/AddMemberForm.js @@ -1,50 +1,158 @@ -import React from "react"; +import React, {useState} from "react"; -import style from "../../assets/scss/AddMemberForm.module.scss"; +import { initializeApp } from "firebase/app"; +import {getAuth, createUserWithEmailAndPassword, signOut} from 'firebase/auth'; +import {collection, addDoc} from "firebase/firestore"; +import {db} from '../../firebase-client'; + +import style from '../../assets/scss/AddMemberForm.module.scss' -import Button from "../../ui/button/Button"; import CloseButton from "../../ui/button/CloseButton"; -import Input from "../../ui/input/Input/Input"; +import Input from "../../ui/input/Input"; + +const firebaseConfig = { + apiKey: process.env.REACT_APP_FIREBASE_API_KEY, + authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN, + projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID, + storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET, + messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID, + appId: process.env.REACT_APP_FIREBASE_APP_ID, +}; const AddMemberForm = ({closeForm}) => { + + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [error, setError] = useState(''); + const [firstName, setFirstName] = useState(''); + const [lastName, setLastName] = useState(''); + const [birthDate, setBirthDate] = useState(''); + const [phone, setPhone] = useState(''); + const [organisation, setOrganisation] = useState(''); + const [initialScore, setInitialScore] = useState(''); + + const createMember = (e) => { + e.preventDefault(); + setError(''); + + let secondaryApp = initializeApp(firebaseConfig, "secondary"); + const secondaryAuth = getAuth(secondaryApp); + + createUserWithEmailAndPassword(secondaryAuth, email, password) + .then(signOut(secondaryAuth)) + .then(() => {secondaryApp = null}) + .then(() => { + addDoc(collection(db, "members"), { + firstName: firstName, + lastName: lastName, + email: email, + phone: phone, + organisation: organisation, + birthDate: birthDate, + score: initialScore, + role: 'user' + }); + }) + .catch(err => { + setError(err.message); + console.error(error); + }); + + setFirstName(''); + setLastName(''); + setEmail(''); + setPassword(''); + setPhone(''); + setOrganisation(''); + setBirthDate(''); + setInitialScore(''); + } return ( -
-
- -
-

Add Member Form

-
- -
-
- -
-
- +
+
+ + +
+

Add Member Form

+
+ setFirstName(e.target.value)} + /> +
+
+ setLastName(e.target.value)} + /> +
+
+ setEmail(e.target.value)} + /> +
+
+ setPassword(e.target.value)} + /> +
+
+ setBirthDate(e.target.value)} + /> +
+
+ setPhone(e.target.value)} + /> +
+
+ setOrganisation(e.target.value)} + /> +
+
+ setInitialScore(e.target.value)} + /> +
+
+ +
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
- + +
- ); -}; + ) +} -export default AddMemberForm; \ No newline at end of file +export default AddMemberForm \ No newline at end of file diff --git a/src/firebase-client.js b/src/firebase-client.js index 3562cac..e056edd 100644 --- a/src/firebase-client.js +++ b/src/firebase-client.js @@ -14,5 +14,4 @@ const firebaseConfig = { const app = initializeApp(firebaseConfig) export const db = getFirestore(app) - -export const auth = getAuth() +export const auth = getAuth(app) diff --git a/src/layout/Topbar/Topbar.js b/src/layout/Topbar/Topbar.js index bd7e1f6..1357aa0 100644 --- a/src/layout/Topbar/Topbar.js +++ b/src/layout/Topbar/Topbar.js @@ -1,8 +1,9 @@ -import React, { useState, useEffect, useContext } from 'react' -import { Link } from 'react-router-dom' -// import {getAuth, onAuthStateChanged} from 'firebase/auth'; -// import { signOut } from 'firebase/auth'; -// import {useNavigate} from 'react-router-dom'; +import React, {useState, useEffect, useContext} from 'react' +import {Link} from 'react-router-dom' +import { auth } from "../../firebase-client" +import {onAuthStateChanged} from 'firebase/auth' +import { signOut } from 'firebase/auth'; +import {useNavigate} from 'react-router-dom' import avatar from '../../assets/images/avatar.svg' import profile from '../../assets/images/profile.svg' @@ -11,71 +12,59 @@ import logout from '../../assets/images/logout.svg' import styles from '../../assets/scss/topbar.module.scss' import MenuContext from '../../context/MenuContext' -// const auth = getAuth(); - function Topbar() { - // const navigate = useNavigate(); - - const [isOpen, setIsOpen] = useState(false) - const [currentUser, setCurrentUser] = useState(null) - - // useEffect(() => { - // onAuthStateChanged(auth, (user) => { - // setCurrentUser(user) - // }) - // }, []) - - const toggle = () => setIsOpen(!isOpen) + const navigate = useNavigate(); + + const [isOpen, setIsOpen] = useState(false); + const [currentUser, setCurrentUser] = useState(null); - // const signIn = () => { - // navigate('/'); - // } + useEffect(() => { + onAuthStateChanged(auth, (user) => { + setCurrentUser(user) + }) + }, []) + + const toggle = () => setIsOpen(!isOpen); - // const signout = () => { - // signOut(auth); - // navigate('/'); - // } + const signIn = (e) => { + e.preventDefault(); + navigate('/auth'); + } + + const signout = () => { + signOut(auth); + toggle(); + navigate('/'); + } - // const goToProfile = () => { - // navigate('/'); - // } - - const { isMenuCheked, setIsMenuChecked } = useContext(MenuContext) - const burgerClasses = isMenuCheked ? `${styles.menuBtn} ${styles.bgBurger}` : styles.menuBtn - const menuToggleClasses = isMenuCheked ? `${styles.menuToggleActive} ${styles.menuToggle}` : styles.menuToggle - return ( - + ) } -export default Topbar +export default Topbar \ No newline at end of file diff --git a/src/pages/Event/Event.js b/src/pages/Event/Event.js index 347e539..0286d77 100644 --- a/src/pages/Event/Event.js +++ b/src/pages/Event/Event.js @@ -1,53 +1,68 @@ +import React from 'react' -import React from 'react'; - -import style from "../../assets/scss/event.module.scss"; -import Button from '../../ui/button/Button'; +import style from '../../assets/scss/event.module.scss' +import Button from '../../ui/button/Button' const Event = () => { return (
-
+

Event Name: Math Lecture

Date: 02.20.2022

Score: 14

Participants:

-
-
-
-
- +
+
+ +
-
-
-
- -
Profile Avatar
-

First Name

-

Last Name

-

Score

-
-
- -
Profile Avatar
-

First Name

-

Last Name

-

Score

-
-
- -
Profile Avatar
-

First Name

-

Last Name

-

Score

-
+
+
+ +
+ Profile Avatar +
+

First Name

+

Last Name

+

Score

+ +
+
+ +
+ Profile Avatar +
+

First Name

+

Last Name

+

Score

+ +
+
+ +
+ Profile Avatar +
+

First Name

+

Last Name

+

Score

+ +
) diff --git a/src/pages/EventList/EventList.js b/src/pages/EventList/EventList.js index fe20af6..2fd3740 100644 --- a/src/pages/EventList/EventList.js +++ b/src/pages/EventList/EventList.js @@ -8,10 +8,12 @@ const EventList = () => { return (
-
-
The List of Visited Events
+
+

+ The List of Visited Events +

-
+
diff --git a/src/pages/EventManagement/EventManagement.js b/src/pages/EventManagement/EventManagement.js index b9b26e7..4772c0a 100644 --- a/src/pages/EventManagement/EventManagement.js +++ b/src/pages/EventManagement/EventManagement.js @@ -2,22 +2,27 @@ import React, { useState } from 'react' import AddEventForm from '../../features/AddEventForm' import style from '../../assets/scss/eventManagement.module.scss' -import Button from '../../ui/button/Button' const EventList = () => { const [show, setShow] = useState(false) return (
+
{show ? setShow(false)} /> : null}
-
-
The Events Management
+
+

The Events Management

+
-
-
-
{show ? setShow(false)} /> : null}
-
+
+ +
diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js index ac9ee04..8136b85 100644 --- a/src/pages/Login/Login.js +++ b/src/pages/Login/Login.js @@ -1,35 +1,68 @@ -import React from "react"; -import InputEmail from "../../ui/input/InputEmail"; -import InputPassword from "../../ui/input/InputPassword"; +import React, {useState} from "react"; -import style from '../../assets/scss/login.module.scss' -import Button from '../../ui/button/Button' +import {useNavigate} from 'react-router-dom'; +import {signInWithEmailAndPassword} from 'firebase/auth'; +import { auth } from "../../firebase-client"; +import Input from '../../ui/input/Input' + +import style from "../../assets/scss/login.module.scss"; const Login = () => { + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [error, setError] = useState(''); + const navigate = useNavigate(); + + const signIn = (e) => { + e.preventDefault(); + signInWithEmailAndPassword(auth, email, password) + .then(() => { + navigate('/home'); + }) + .catch(err => { + setError(err.message); + console.error(error); + }); + } + return (
-
+
-

Welcome back!

- +

Welcome!

- + setEmail(e.target.value)} + />
-
- + setPassword(e.target.value)} + />
-
-
-
+
) } -export default Login +export default Login \ No newline at end of file diff --git a/src/pages/ManagerManagement/ManagerManagement.js b/src/pages/ManagerManagement/ManagerManagement.js index cdb598d..8a0ae5f 100644 --- a/src/pages/ManagerManagement/ManagerManagement.js +++ b/src/pages/ManagerManagement/ManagerManagement.js @@ -1,19 +1,19 @@ import React from 'react' -import styles from '../../assets/scss/memberlist.module.scss' +import styles from '../../assets/scss/managermanagement.module.scss' import Button from '../../ui/button/Button' const ManagerManagement = () => { return ( -
+
-

Managers List

-
-
+
@@ -31,8 +31,12 @@ const ManagerManagement = () => { {/* {Managers} */} @@ -44,4 +48,4 @@ const ManagerManagement = () => { ) } -export default ManagerManagement; +export default ManagerManagement diff --git a/src/pages/MemberList/MemberList.js b/src/pages/MemberList/MemberList.js index acb48c6..fbdd9a7 100644 --- a/src/pages/MemberList/MemberList.js +++ b/src/pages/MemberList/MemberList.js @@ -11,7 +11,7 @@ const MemberList = () => {

Members List

-
+
Adolphus @gmail - - + +
diff --git a/src/pages/MemberManagement/MemberManagement.js b/src/pages/MemberManagement/MemberManagement.js index b726150..2f5dd59 100644 --- a/src/pages/MemberManagement/MemberManagement.js +++ b/src/pages/MemberManagement/MemberManagement.js @@ -1,60 +1,66 @@ -import React, { useState } from "react"; -import AddMemberForm from "../../features/AddMemberForm"; +import React, { useState } from "react" +import AddMemberForm from "../../features/AddMemberForm" +import { auth } from "../../firebase-client" -import styles from "../../assets/scss/membermanagement.module.scss"; +import styles from '../../assets/scss/membermanagement.module.scss' const MemberManagement = () => { - const [show, setShow] = useState(false); + const [show, setShow] = useState(false) return ( -
-
-
-

Members List

- -
-
- { show ? setShow(false)}/> : null} -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - {/* {Members} */} - -
AvatarFirst NameLast NameOrganisationEmailPhoneScoreBirth DateManaging
1GustavusAdolphusArmy@gmail+38067124942524.05.1598 - - -
-
+
+
{show ? setShow(false)} /> : null}
+
+
+

Members List

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
AvatarFirst NameLast NameOrganisationEmailPhoneScoreBirth DateManaging
1GustavusAdolphusArmy@gmail+38067124942524.05.1598 + + +
+
) } -export default MemberManagement; +export default MemberManagement diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js index ffdfb0a..3fc3b30 100644 --- a/src/pages/Profile/Profile.js +++ b/src/pages/Profile/Profile.js @@ -5,20 +5,26 @@ import Button from '../../ui/button/Button' const Profile = () => { return (
-
-
- Profile Avatar -
-
-

First Name

-

Last Name

-

Score

-

Place in the ranking

-
-
-
- +
+
+

First Name

+

Last Name

+

Score

+

Place in the ranking

+
+
+
+ +
) diff --git a/src/ui/input/Input/Input.js b/src/ui/input/Input/Input.js index 3c2211f..0384ec7 100644 --- a/src/ui/input/Input/Input.js +++ b/src/ui/input/Input/Input.js @@ -1,8 +1,18 @@ import React from 'react' import style from '../../../assets/scss/input.module.scss' -const Input = ({ type, placeholder, min, max }) => { - return -} + const Input = ({type, placeholder, value, onChange, min, max}) => { + return ( + + ) +}; export default Input