diff --git a/public/css_styles/styles.css b/public/css_styles/styles.css index 3593139..65e95a9 100644 --- a/public/css_styles/styles.css +++ b/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; diff --git a/public/css_styles/styles.css.map b/public/css_styles/styles.css.map index 0864513..d56818c 100644 --- a/public/css_styles/styles.css.map +++ b/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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/public/sass_styles/_goToAccount.scss b/public/sass_styles/_goToAccount.scss new file mode 100644 index 0000000..751f209 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/public/sass_styles/styles.scss b/public/sass_styles/styles.scss index 473fb86..a6fffcc 100644 --- a/public/sass_styles/styles.scss +++ b/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; diff --git a/src/App.js b/src/App.js index 3e5566d..9ab6da6 100644 --- a/src/App.js +++ b/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 ( <> -
+
@@ -31,7 +53,9 @@ function App() { - + diff --git a/src/components/BannerLogin.jsx b/src/components/BannerLogin.jsx index 59d8d6f..cf7403e 100644 --- a/src/components/BannerLogin.jsx +++ b/src/components/BannerLogin.jsx @@ -1,31 +1,13 @@ -import React, {useState} from 'react' -import {firebase} from './Firebase/firebase' -import {getAuth, onAuthStateChanged} from 'firebase/auth' -import { doc, updateDoc, getFirestore, collection, getDoc } from "firebase/firestore"; +import React from 'react' -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 ?

Access to integrate and save your progress with Clockify!

diff --git a/src/components/Header Childrens/GoToAccount.jsx b/src/components/Header Childrens/GoToAccount.jsx new file mode 100644 index 0000000..b2edfe5 --- /dev/null +++ b/src/components/Header Childrens/GoToAccount.jsx @@ -0,0 +1,22 @@ +import React from 'react' + +const GoToAccount = (props) => { + return ( + <> + { + props.signIn ? + <> + +
API
+ + +
Close session
+ + + : null + } + + ) +} + +export default GoToAccount diff --git a/src/components/Header.jsx b/src/components/Header.jsx index ffebea2..29bb00b 100644 --- a/src/components/Header.jsx +++ b/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 = () => {

Pomodoro Timer

Made By Francisco Pessano

+
) } diff --git a/src/components/Identify.jsx b/src/components/Identify.jsx index 8e019d4..4aadf3c 100644 --- a/src/components/Identify.jsx +++ b/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' @@ -133,6 +133,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) @@ -143,6 +152,10 @@ const Identify = (props) => { } else { setAct('login') } + + if (action === 'clss') { + signOutFromApp() + } }, [])