franpcode/Pomodoro-Timer-with-Clockify-integration
1
0
Fork 0
mirror of https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git synced 2025-10-12 23:52:30 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

BUG FIX

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-10 16:00:37 -03:00
parent ad4b9b7cd0
commit 5ad9a1581c
9 changed files with 304 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
public/css_styles/styles.css
View File

@@ -553,14 +553,14 @@ html, body {
.identify-container:has {
height: 100%;
}
.identify-container .error-message-container {
.identify-container .error-message-container, .identify-container .success-message-container {
width: 70vw;
background-color: #D17262;
display: flex;
justify-content: center;
align-items: center;
}
.identify-container .error-message-container p {
.identify-container .error-message-container p, .identify-container .success-message-container p {
margin: 2vw;
color: #ffffff;
font-family: "Raleway", sans-serif;
@@ -568,6 +568,12 @@ html, body {
user-select: none;
font-size: 22pt;
}
.identify-container .success-message-container {
background-color: #D7FBE8;
}
.identify-container .success-message-container p {
color: #464646;
}
.identify-container .identify {
width: 70vw;
}
@@ -619,6 +625,29 @@ html, body {
border: #969696 solid 1px;
}
.loading-container {
width: 100%;
height: 83vh;
display: flex;
justify-content: center;
align-items: center;
}
.loading-container.dark-mode-component {
background-color: #303841;
}
.reset-password {
height: 4vh;
width: 60%;
margin-bottom: 1vh;
border: none;
border-bottom: 1px solid #969696;
outline: none;
width: 50%;
border: #969696 solid 1px;
background-color: #62D2A2;
}
.identify-container.dark-mode-component {
background-color: #3A4750;
}

2
public/css_styles/styles.css.map
View File

File diff suppressed because one or more lines are too long

42
public/sass_styles/_identify.scss
View File

@@ -13,7 +13,7 @@ html, body {
flex-grow: 1;
.error-message-container {
.error-message-container, .success-message-container {
width: 70vw;
background-color: #D17262;
@@ -33,6 +33,17 @@ html, body {
}
}
.success-message-container {
background-color: $lightest-color;
p {
color: #464646;
}
}
.identify {
@@ -106,6 +117,35 @@ html, body {
}
.loading-container {
width: 100%;
height: 83vh;
display: flex;
justify-content: center;
align-items: center;
&.dark-mode-component {
background-color:$main-color-dark ;
}
}
.reset-password {
height: 4vh;
width: 60%;
margin-bottom: 1vh;
border: none;
border-bottom: 1px solid $border-color;
outline: none;
width: 50%;
border: $border-color solid 1px;
background-color: $main-color;
}
.identify-container.dark-mode-component {
background-color: $second-color-dark;

3
src/App.js
View File

@@ -24,6 +24,7 @@ import ClockifyTasksDisplay from './components/ClockifyTasksDisplay';
import Credits from './components/Credits';
import Footer from './components/Footer';
import ResetPassword from './components/Identify Childrens/ResetPassword';
function App() {
@@ -79,6 +80,8 @@ function App() {
<Switch>
<Route path="/config-account">
<Account

7
src/components/Identify Childrens/LoginForm.jsx
View File

@@ -2,6 +2,7 @@ import React from 'react'
const LoginForm = (props) => {
return (
<>
<form onSubmit={props.sendForm}>
<input
type="email"
@@ -19,7 +20,13 @@ const LoginForm = (props) => {
}}
/>
<input type="submit" value="Login"></input>
<button class="reset-password" onClick={() => props.setAct('i forgor')}>Reset Password?</button>
</form>
</>
)
}

19
src/components/Identify Childrens/ResetPassword.jsx Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react'
const ResetPassword = (props) => {
return (
<form onSubmit={props.sendForm}>
<input
type="email"
placeholder="Email"
onChange= {(e) => {
props.setEmail(e.target.value)
}}
/>
<input type="submit" value="Reset password"></input>
<button class="reset-password" onClick={() => props.setAct('login')}>Back to login</button>
</form>
)
}
export default ResetPassword

94
src/components/Identify.jsx
View File

@@ -5,8 +5,12 @@ import RegisterForm from './Identify Childrens/RegisterForm'
import {firebase} from './Firebase/firebase'
import {withRouter} from 'react-router-dom'
import {getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, onAuthStateChanged } from 'firebase/auth'
import {getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, onAuthStateChanged, sendPasswordResetEmail } from 'firebase/auth'
import { getFirestore, collection, doc, setDoc } from 'firebase/firestore'
import ResetPassword from './Identify Childrens/ResetPassword'
import loadingGifLightTheme from './img/loading-light-theme.png'
import loadingGifDarkTheme from './img/loading-dark-theme.png'
const Identify = (props) => {
@@ -19,6 +23,8 @@ const Identify = (props) => {
const [message, setMessage] = React.useState('')
const [errorMessage, setErrorMessage] = React.useState(0)
const [successMessage, setSuccessMessage] = React.useState(0)
const [loading, setLoading] = useState(false)
const auth = getAuth()
@@ -39,10 +45,14 @@ const Identify = (props) => {
addNewUserToFirebase(uid)
props.history.push('/config-account')
setLoading(false)
} catch (error) {
setMessage(error.message)
setLoading(false)
}
}
@@ -73,17 +83,35 @@ const Identify = (props) => {
try {
const response = await signInWithEmailAndPassword(auth, email, password)
props.history.push('/config-account')
await setLoading(false)
} catch (error) {
setErrorMessage('USER OR PASSWORD NOT VALID')
setLoading(false)
}
}
const resetPasswordFirestore = async () => {
try {
const response = await sendPasswordResetEmail(auth, email)
setSuccessMessage('Recovery email send')
setLoading(false)
} catch (error) {
setErrorMessage('There was a problem sending the email.')
setLoading(false)
}
}
const defineLogin = () => {
if (act !== 'login') {
setAct('login')
@@ -99,30 +127,46 @@ const Identify = (props) => {
const sendForm = (e) => {
e.preventDefault()
setLoading(true)
if (!email.trim()) {
setErrorMessage('EMAIL EMPTY')
setLoading(false)
return
}
if (!password.trim()) {
setErrorMessage('PASSWORD EMPTY')
return
}
if (act !== 'i forgor') {
if (!password.trim()) {
setErrorMessage('PASSWORD EMPTY')
setLoading(false)
return
}
if (password.trim().length < 8) {
setErrorMessage('PASSWORD TOO SHORT')
setLoading(false)
return
}
if (password.trim().length < 8) {
setErrorMessage('PASSWORD TOO SHORT')
return
}
if (act === 'register') {
if (!confirmPassword.trim()) {
setErrorMessage('CONFIRM PASSWORD PLEASE')
setLoading(false)
return
}
if (password !== confirmPassword) {
setErrorMessage("PASSWORDS DOESN'T MATCH")
setLoading(false)
return
}
register()
@@ -143,6 +187,18 @@ const Identify = (props) => {
e.target.reset()
setEmail('')
setPassword('')
return
}
if (act === 'i forgor') {
resetPasswordFirestore()
e.target.reset()
setEmail('')
setErrorMessage(0)
return
}
@@ -181,6 +237,14 @@ const Identify = (props) => {
})
}, [])
if (loading) {
return (
<div className={props.darkMode ? 'loading-container dark-mode-component' : 'loading-container'} >
<img src={props.darkMode ? loadingGifDarkTheme : loadingGifLightTheme} alt=""/>
</div>
)
}
return (
<div className={props.darkMode ? 'identify-container dark-mode-component' : 'identify-container'}>
@@ -189,6 +253,11 @@ const Identify = (props) => {
errorMessage ? <p>{errorMessage}</p> : null
}
</div>
<div className="success-message-container">
{
successMessage ? <p>{successMessage}</p> : null
}
</div>
<div className="identify">
<nav className="options-container">
@@ -225,11 +294,14 @@ const Identify = (props) => {
<div className="form-container">
{
act === 'login' ? <LoginForm setEmail={setEmail} setPassword={setPassword} sendForm={sendForm}/> : null
act === 'login' ? <LoginForm setEmail={setEmail} setPassword={setPassword} sendForm={sendForm} setAct={setAct}/> : null
}
{
act === 'register' ? <RegisterForm setEmail={setEmail} setPassword={setPassword} setConfirmPassword={setConfirmPassword} sendForm={sendForm}/> : null
}
{
act === 'i forgor' ? <ResetPassword setEmail={setEmail} sendForm={sendForm} setAct={setAct}/> : null
}
</div>
</div>
</div>

117
src/components/Main Pomodoro Childrens/MainPomodoroTimer Children/setTimeStyle.js Normal file
View File

@@ -0,0 +1,117 @@
const setTimeStyleExternal = (props, setMinutes, setSeconds, setBreakTime, setActualStyle, breakTime) => {
if (props.style === 'Can I play, Daddy?') {
const minutes = 10
const seconds = 0
setMinutes(minutes)
setSeconds(seconds)
setBreakTime(
{
normal: {
minutes: 5,
seconds: 0
},
extended: {
minutes: 15,
seconds: 0
}
}
)
setActualStyle(props.style)
return {
minutes, seconds, breakTime
}
}
if (props.style === 'Regular'){
const minutes = 25
const seconds = 0
setMinutes(minutes)
setSeconds(seconds)
setBreakTime(
{
normal: {
minutes: 5,
seconds: 0
},
extended: {
minutes: 15,
seconds: 0
}
}
)
setActualStyle(props.style)
return {
minutes, seconds, breakTime
}
}
if (props.style === 'Creative work') {
const minutes = 50
const seconds = 0
setMinutes(minutes)
setSeconds(seconds)
setBreakTime(
{
normal: {
minutes: 10,
seconds: 0
},
extended: {
minutes: 20,
seconds: 0
}
}
)
setActualStyle(props.style)
return {
minutes, seconds, breakTime
}
}
if (props.style === 'Last minute delivery') {
const minutes = 90
const seconds = 0
setMinutes(minutes)
setSeconds(seconds)
setBreakTime(
{
normal: {
minutes: 15,
seconds: 0
},
extended: {
minutes: 30,
seconds: 0
}
}
)
setActualStyle(props.style)
return {
minutes, seconds, breakTime
}
}
}
export default setTimeStyleExternal

122
src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx
View File

@@ -7,6 +7,7 @@ import detectKeys from '../Misc/detectKeys'
import bell_x2 from '../sounds/bell-x2.mp3'
import bell_x3 from '../sounds/bell-x3.mp3'
import setTimeStyleExternal from './MainPomodoroTimer Children/setTimeStyle'
const MainPomodoroTimer = (props) => {
@@ -29,126 +30,7 @@ const MainPomodoroTimer = (props) => {
const [velocity, setVelocity] = useState(1)
const setTimeStyle = () => {
if (props.style === 'Can I play, Daddy?') {
const minutes = 10
const seconds = 0
setMinutes(minutes)
setSeconds(seconds)
setBreakTime(
{
normal: {
minutes: 5,
seconds: 0
},
extended: {
minutes: 15,
seconds: 0
}
}
)
setActualStyle(props.style)
return {
minutes, seconds, breakTime
}
}
if (props.style === 'Regular'){
const minutes = 25
const seconds = 0
setMinutes(minutes)
setSeconds(seconds)
setBreakTime(
{
normal: {
minutes: 5,
seconds: 0
},
extended: {
minutes: 15,
seconds: 0
}
}
)
setActualStyle(props.style)
return {
minutes, seconds, breakTime
}
}
if (props.style === 'Creative work') {
const minutes = 50
const seconds = 0
setMinutes(minutes)
setSeconds(seconds)
setBreakTime(
{
normal: {
minutes: 10,
seconds: 0
},
extended: {
minutes: 20,
seconds: 0
}
}
)
setActualStyle(props.style)
return {
minutes, seconds, breakTime
}
}
if (props.style === 'Last minute delivery') {
const minutes = 90
const seconds = 0
setMinutes(minutes)
setSeconds(seconds)
setBreakTime(
{
normal: {
minutes: 15,
seconds: 0
},
extended: {
minutes: 30,
seconds: 0
}
}
)
setActualStyle(props.style)
return {
minutes, seconds, breakTime
}
}
}
const setTimeStyle = () => setTimeStyleExternal(props, setMinutes, setSeconds, setBreakTime, setActualStyle, breakTime)
React.useEffect (() => {
if (actualStyle !== props.style) {