mirror of
https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git
synced 2025-10-12 23:52:30 +00:00
Started the Firebase Integration. Users Register and Login done
This commit is contained in:
4
.gitignore
vendored
4
.gitignore
vendored
@@ -21,3 +21,7 @@
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# firebase
|
||||
|
||||
/src/components/Firebase
|
||||
1479
package-lock.json
generated
1479
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -6,6 +6,7 @@
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^11.2.7",
|
||||
"@testing-library/user-event": "^12.8.3",
|
||||
"firebase": "^9.1.0",
|
||||
"react": "^17.0.2",
|
||||
"react-countdown": "^2.3.2",
|
||||
"react-dom": "^17.0.2",
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss"],"names":[],"mappings":"AACA;EACI,kBCuCS;EDrCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EAEA;ECfJ;EACA;EAQA;EACA;EACA;;ADSA;EACI;EAEA;ECvBJ;EACA;EAQA;EACA;EACA;;ADgBI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AEhDpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFwBO;;AErBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFQG;EEPH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFFG;EEIH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFjBO;EEkBP;EAEA;EACA;;;AC/DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHwBO;EGvBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHTL;EGUK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH5CE;;;AGqDN;EACI;EACA;;;AAGJ;EACI;EACA;;;ACxGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBN2BU;;AMzBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;AC3CZ;EAGI;EACA;;AAII;EACI;EPDR;EOKQ;EACA;EAEA;EAEA;;AAEA;EACI;EACA;;AAGJ;EPtBR;EACA;EOwBY;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,OPGD;EOFC,kBPIF;;;AQ5Cd;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAEA;EACI;EAEA;EACA;EAEA;EACA,kBRyBD;EQvBC;EAEA;;AAEA;ERpBZ;EACA;EAQA;EACA;EACA;EQagB;;AAIR;EACI;EACA,kBRUM;;AQNd;EAEI;EACA;;AAEA;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;;ARTpB;EACI;EACA;;;AAGJ;EACI;EACA,kBA3Be","file":"styles.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss","../sass_styles/_historyButton.scss","../sass_styles/_pomodoro-counter.scss","../sass_styles/_identify.scss"],"names":[],"mappings":"AACA;EACI,kBCuCS;EDrCT;EACA;EACA;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EAEA;ECfJ;EACA;EAQA;EACA;EACA;;ADSA;EACI;EAEA;ECvBJ;EACA;EAQA;EACA;EACA;;ADgBI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AEhDpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFwBO;;AErBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFQG;EEPH;;AAIJ;EACI;EFtBR;EACA;EEyBQ,OFFG;EEIH;EACA;;AAIR;EF5BA;EACA;EACA;EAtBA;EACA;EEmDI;EACA;EACA;EAEA,YFjBO;EEkBP;EAEA;EACA;;;AC/DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHwBO;EGvBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHTL;EGUK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH5CE;;;AGqDN;EACI;EACA;;;AAGJ;EACI;EACA;;;ACxGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBN2BU;;AMzBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;AC3CZ;EAGI;EACA;;AAII;EACI;EPDR;EOKQ;EACA;EAEA;EAEA;;AAEA;EACI;EACA;;AAGJ;EPtBR;EACA;EOwBY;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,OPGD;EOFC,kBPIF;;;AQ5Cd;EACI;EACA;;AAEA;EACI;;AAEA;EACI;;AAEA;EACI;EAEA;EACA;EAEA;EACA,kBRyBD;EQvBC;EAEA;;AAEA;ERpBZ;EACA;EAQA;EACA;EACA;EQagB;;AAIR;EACI;EACA,kBRUM;;AQNd;EAEI;EACA;;AAEA;EACI;EAEA;EACA;EACA;EAEA;;AAGA;EACI;EACA;EAEA;EAEA;EACA;EACA;;AAIJ;EACI;EACA;;;ARRpB;EACI;EACA;;;AAGJ;EACI;EACA,kBA5Be","file":"styles.css"}
|
||||
3
public/sass_styles/_dark-mode_toogle-switch.scss
Normal file
3
public/sass_styles/_dark-mode_toogle-switch.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.dark-mode_toogle-switch {
|
||||
|
||||
}
|
||||
@@ -54,6 +54,7 @@ $lightest-color: #D7FBE8;
|
||||
@import 'historyButton';
|
||||
@import 'pomodoro-counter';
|
||||
@import 'identify';
|
||||
@import 'dark-mode_toogle-switch';
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
|
||||
@@ -12,16 +12,24 @@ import {
|
||||
} from "react-router-dom";
|
||||
|
||||
import Identify from "./components/Identify";
|
||||
import Account from "./components/Account";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<>
|
||||
<Header />
|
||||
|
||||
<Switch>
|
||||
|
||||
<Route path="/config-account">
|
||||
<Account />
|
||||
</Route>
|
||||
|
||||
<Route path="/identify">
|
||||
<Identify />
|
||||
</Route>
|
||||
|
||||
<Route path="/">
|
||||
<BannerLogin />
|
||||
<MainPomodoro />
|
||||
|
||||
31
src/components/Account.jsx
Normal file
31
src/components/Account.jsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import React, {useState} from 'react'
|
||||
import {firebase} from './Firebase/firebase'
|
||||
import {getAuth, onAuthStateChanged} from 'firebase/auth'
|
||||
|
||||
const Account = () => {
|
||||
|
||||
const [signIn, setSignIn] = useState('false')
|
||||
|
||||
const auth = getAuth()
|
||||
|
||||
onAuthStateChanged(auth, (user) => {
|
||||
|
||||
if (user) {
|
||||
setSignIn(true)
|
||||
} else {
|
||||
setSignIn(false)
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
signIn ?
|
||||
<h1>Insert your Clockify API here</h1> :
|
||||
<h1>Sign in before access to this page...</h1>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Account
|
||||
11
src/components/DarkMode.jsx
Normal file
11
src/components/DarkMode.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const DarkMode = () => {
|
||||
return (
|
||||
<input type="checkbox" className=".dark-mode_toogle-switch">
|
||||
|
||||
</input>
|
||||
)
|
||||
}
|
||||
|
||||
export default DarkMode
|
||||
@@ -2,13 +2,50 @@ import React, {useState} from 'react'
|
||||
import LoginForm from './Identify Childrens/LoginForm'
|
||||
import RegisterForm from './Identify Childrens/RegisterForm'
|
||||
|
||||
import {firebase} from './Firebase/firebase'
|
||||
import {withRouter} from 'react-router-dom'
|
||||
|
||||
const Identify = () => {
|
||||
import {getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword} from 'firebase/auth'
|
||||
|
||||
|
||||
const Identify = (props) => {
|
||||
|
||||
const [act, setAct] = useState('')
|
||||
|
||||
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [confirmPassword, setConfirmPassword] = useState('')
|
||||
|
||||
const [message, setMessage] = React.useState('')
|
||||
|
||||
const auth = getAuth()
|
||||
|
||||
const register = async () => {
|
||||
|
||||
try {
|
||||
const response = await createUserWithEmailAndPassword(auth, email, password)
|
||||
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
setMessage(error.message)
|
||||
console.log(message)
|
||||
}
|
||||
}
|
||||
|
||||
const login = async () => {
|
||||
|
||||
try {
|
||||
const response = await signInWithEmailAndPassword(auth, email, password)
|
||||
console.log(response)
|
||||
console.log(response.user)
|
||||
|
||||
props.history.push('/config-account')
|
||||
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
alert('USER OR PASSWORD NOT VALID')
|
||||
}
|
||||
}
|
||||
|
||||
const defineLogin = () => {
|
||||
if (act !== 'login') {
|
||||
@@ -35,6 +72,11 @@ const Identify = () => {
|
||||
return
|
||||
}
|
||||
|
||||
if (password.trim().length < 8) {
|
||||
alert('PASSWORD TOO SHORT')
|
||||
return
|
||||
}
|
||||
|
||||
if (act === 'register') {
|
||||
|
||||
if (!confirmPassword.trim()) {
|
||||
@@ -42,22 +84,27 @@ const Identify = () => {
|
||||
return
|
||||
}
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
alert("PASSWORDS DOESN'T MATCH")
|
||||
return
|
||||
}
|
||||
register()
|
||||
|
||||
e.target.reset()
|
||||
setEmail('')
|
||||
setPassword('')
|
||||
setConfirmPassword('')
|
||||
|
||||
//SEND TO FIREBASE
|
||||
return
|
||||
}
|
||||
|
||||
if (act === 'login') {
|
||||
|
||||
login()
|
||||
|
||||
e.target.reset()
|
||||
setEmail('')
|
||||
setPassword('')
|
||||
|
||||
//SEND TO FIREBASE
|
||||
return
|
||||
}
|
||||
|
||||
@@ -126,4 +173,4 @@ const Identify = () => {
|
||||
)
|
||||
}
|
||||
|
||||
export default Identify
|
||||
export default withRouter(Identify)
|
||||
|
||||
Reference in New Issue
Block a user