BUG FIX

public/css_styles/styles.css

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

public/sass_styles/_identify.scss

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

src/App.js

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

src/components/Identify Childrens/LoginForm.jsx

@@ -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>
+        
+            
+            
+        </>
     )
 }
 

src/components/Identify Childrens/ResetPassword.jsx

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

src/components/Identify.jsx

@@ -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()) {
+        if (act !== 'i forgor') {
-            setErrorMessage('PASSWORD EMPTY')
+            
-            return
+            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>

src/components/Main Pomodoro Childrens/MainPomodoroTimer Children/setTimeStyle.js

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

src/components/Main Pomodoro Childrens/MainPomodoroTimer.jsx

@@ -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 = () => {
+    const setTimeStyle = () => 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
-            }
-
-        }
-        
-    }
-
-
-
-
 
     React.useEffect (() => {
         if (actualStyle !== props.style) {