Close session and access to the API input done

public/css_styles/styles.css

@@ -520,6 +520,44 @@
   border: #969696 solid 1px;
 }
 
+.go-to-account {
+  width: 3vw;
+  height: 3vw;
+  position: absolute;
+  left: 5vw;
+  background-color: #1FAB89;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100%;
+}
+.go-to-account .go-to-account-text {
+  font-family: "Raleway", sans-serif;
+  font-weight: 700;
+  text-decoration: none;
+  user-select: none;
+  color: #ffffff;
+}
+
+.close-session {
+  width: 6vw;
+  height: 3vw;
+  position: absolute;
+  left: 10vw;
+  background-color: #1FAB89;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5%;
+}
+.close-session .close-session-text {
+  font-family: "Raleway", sans-serif;
+  font-weight: 700;
+  text-decoration: none;
+  user-select: none;
+  color: #ffffff;
+}
+
 html, body {
   margin: 0;
   padding: 0;

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","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss"],"names":[],"mappings":"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","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","../sass_styles/_dark-mode_toogle-switch.scss","../sass_styles/_account.scss","../sass_styles/_goToAccount.scss"],"names":[],"mappings":"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","file":"styles.css"}

public/sass_styles/_goToAccount.scss

@@ -0,0 +1,53 @@
+.go-to-account {
+    
+    width: 3vw;
+    height: 3vw;
+
+    position: absolute;
+
+    left: 5vw;
+
+    background-color: $second-color;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 100%;
+
+    .go-to-account-text {
+
+        @include titleFont();
+        text-decoration: none;
+        user-select: none;
+
+        color: #ffffff;
+    }
+}
+
+.close-session {
+    width: 6vw;
+    height: 3vw;
+
+    position: absolute;
+
+    left: 10vw;
+
+    background-color: $second-color;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 5%;
+
+    .close-session-text {
+
+        @include titleFont();
+        text-decoration: none;
+
+        user-select: none;
+
+        color: #ffffff;
+    }
+}

public/sass_styles/styles.scss

@@ -60,6 +60,7 @@ $lightest-color-dark: #EEEEEE;
 @import 'identify';
 @import 'dark-mode_toogle-switch';
 @import 'account';
+@import 'goToAccount';
 
 html, body { 
     margin: 0;

src/App.js

@@ -1,3 +1,8 @@
+import React, {useState} from 'react'
+import {firebase} from './components/Firebase/firebase'
+import {getAuth, onAuthStateChanged} from 'firebase/auth'
+import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
+
 import AboutThis from "./components/AboutThis";
 import BannerLogin from "./components/BannerLogin";
 import GoDownArrow from "./components/GoDownArrow";
@@ -15,10 +20,27 @@ import Identify from "./components/Identify";
 import Account from "./components/Account";
 
 function App() {
+
+  const [signIn, setSignIn] = useState('')
+
+  const auth = getAuth()
+
+  onAuthStateChanged(auth, (user) => {
+
+      if (user) {
+          setSignIn(true)
+      } else {
+          setSignIn(false)
+      }
+
+  })
+    
   return (
     <Router>
       <>
-        <Header />
+        <Header 
+          signIn={signIn}
+        />
         
         <Switch>
 
@@ -31,7 +53,9 @@ function App() {
           </Route>
 
           <Route path="/">
-            <BannerLogin />
+            <BannerLogin 
+              signIn={signIn}
+            />
             <MainPomodoro />
             <GoDownArrow />
             <AboutThis />

src/components/BannerLogin.jsx

@@ -1,31 +1,13 @@
-import React, {useState} from 'react'
+import React from 'react'
-import {firebase} from './Firebase/firebase'
-import {getAuth, onAuthStateChanged} from 'firebase/auth'
-import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore";
 
-const BannerLogin = () => {
+const BannerLogin = (props) => {
 
     console.log('BANNER LOGIN DEPLOYED')
 
-    const [signIn, setSignIn] = useState('')
-
-    const auth = getAuth()
-
-    onAuthStateChanged(auth, (user) => {
-
-        if (user) {
-            setSignIn(true)
-        } else {
-            setSignIn(false)
-        }
-
-    })
-
-
     return (
         <>
             {
-                !signIn ? 
+                !props.signIn ? 
 
                     <div className="banner-login">
                         <p>Access to integrate and save your progress with Clockify!</p>

src/components/Header Childrens/GoToAccount.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+const GoToAccount = (props) => {
+    return (
+        <>
+            {
+                props.signIn ? 
+                    <>
+                        <a href="/config-account" className="go-to-account">
+                            <div className="go-to-account-text">API</div>
+                        </a>
+                        <a href="/identify?act=clss" className="close-session">
+                            <div className="close-session-text">Close session</div>
+                        </a>
+                    </>
+                : null
+            }
+        </>
+    )
+}
+
+export default GoToAccount

src/components/Header.jsx

@@ -1,7 +1,8 @@
 import React, {useState} from 'react'
 import DarkMode from './Header Childrens/DarkMode'
+import GoToAccount from './Header Childrens/GoToAccount'
 
-const Header = () => {
+const Header = (props) => {
 
     console.log("HEADER DEPLOYED")
     
@@ -10,6 +11,7 @@ const Header = () => {
             <a href="/"><h1>Pomodoro Timer</h1></a>
             <h3>Made By <span className="selectable"><a target="_blank" href="https://www.behance.net/franpessano" rel="noreferrer">Francisco Pessano</a></span></h3>
             <DarkMode />
+            <GoToAccount signIn={props.signIn}/>
         </header>
     )
 }

src/components/Identify.jsx

@@ -5,7 +5,7 @@ import RegisterForm from './Identify Childrens/RegisterForm'
 import {firebase} from './Firebase/firebase'
 import {withRouter} from 'react-router-dom'
 
-import {getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword} from 'firebase/auth'
+import {getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut } from 'firebase/auth'
 import { getFirestore, collection, doc, setDoc } from 'firebase/firestore'
 
 
@@ -134,6 +134,15 @@ const Identify = (props) => {
         alert('ACTION NOT VALID')
     }
 
+    const signOutFromApp = () => {
+
+        signOut(auth)
+            .then(() => {
+                
+                //! 'YOU CLOSE SESSION' MESSAGE CODE
+            })
+    }
+    
     React.useEffect( () => {
         const urlInfo = new URLSearchParams(window.location.search)
         const action = urlInfo.get('act')
@@ -143,6 +152,10 @@ const Identify = (props) => {
         } else {
             setAct('login')
         }
+
+        if (action === 'clss') {
+            signOutFromApp()
+        }
     }, [])