Started the Firebase Integration. Users Register and Login done

.gitignore

@@ -21,3 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# firebase
+
+/src/components/Firebase

package.json

@@ -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",

public/css_styles/styles.css.map

@@ -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"}

public/sass_styles/_dark-mode_toogle-switch.scss

@@ -0,0 +1,3 @@
+.dark-mode_toogle-switch {
+    
+}

public/sass_styles/styles.scss

@@ -54,6 +54,7 @@ $lightest-color: #D7FBE8;
 @import 'historyButton';
 @import 'pomodoro-counter';
 @import 'identify';
+@import 'dark-mode_toogle-switch';
 
 html, body { 
     margin: 0;

src/App.js

@@ -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 />

src/components/Account.jsx

@@ -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

src/components/DarkMode.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const DarkMode = () => {
+    return (
+        <input type="checkbox" className=".dark-mode_toogle-switch">
+            
+        </input>
+    )
+}
+
+export default DarkMode

src/components/Identify.jsx

@@ -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)