updated forgot password

digital-course-file/src/Routes.js

@@ -10,6 +10,7 @@ import copyright from './user/copyright'
 import { Link } from 'react-router-dom'
 import { Container, Button, Navbar, Nav } from 'react-bootstrap'
 import fire from './fire'
+import ForgotPassword from "./user/ForgotPassword"
 
 
 const Routes = () => {
@@ -51,6 +52,7 @@ const Routes = () => {
         <Route path='/' exact component={Signin} />
         <Route path='/signin' exact component={Signin} />
         <Route path='/copyright' exact component={copyright} />
+        <Route path='/forgot-password' component={ForgotPassword} />
       </Switch>
        <Navbar fixed='bottom' variant='light' bg='light'>
         <Container className='ml-sm-2'>

digital-course-file/src/user/ForgotPassword.js

+import React, { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import fire from '../fire'
+import firebase from 'firebase'
+
+export default function ForgotPassword() {
+  const [email, setEmail] = useState('')
+  const [emailError, setEmailError] = useState('')
+  const clearErrors = () => {
+    setEmailError('')
+    setEmail('')
+  }
+
+  const handleforgot = () => {
+    clearErrors()
+    fire
+      .auth()
+      .sendPasswordResetEmail(email)
+      .catch((e) => {
+        setEmailError(e.message)
+      })
+    setEmailError('Check your inbox for furthur instructions')
+  }
+  return (
+    <section className='login'>
+      <div className='loginContainer'>
+        <p className='errorMsg'>{emailError}</p>
+        <label>UserName</label>
+        <input
+          type='text'
+          autoFocus
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        ></input>
+        <div className='btnContainer'>
+          <button onClick={handleforgot}>Reset Password</button>
+          <p>
+            Have an account ?{' '}
+            <Link to='/signin'>
+              <span>Sign in</span>
+            </Link>
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}

digital-course-file/src/user/Login.js

-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import GoogleButton from 'react-google-button'
 import GithubButton from 'react-github-login-button'
+import { Link } from 'react-router-dom'
+import Loader from 'react-loader-spinner'
+
 
 const Login = (props) => {
   const {
@@ -16,7 +19,27 @@ const Login = (props) => {
     passwordError,
     googlesignin,
     githubsignin,
+    loading,
   } = props
+
+  useEffect(() => {
+    if (loading) {
+    return (
+      <>
+        <div className='centered'>
+          <Loader
+            type='Puff'
+            color='#00BFFF'
+            height={100}
+            width={100}
+            timeout={3000} //3 secs
+          />
+        </div>
+      </>
+    )
+  }
+  }, [loading])
+  
   return (
     <section className='login'>
       <div className='loginContainer'>
@@ -41,6 +64,9 @@ const Login = (props) => {
           {hasAccount ? (
             <>
               <button onClick={handleLogin}>Sign In</button>
+              <div className='w-100 text-center mt-3'>
+                <Link to='/forgot-password'>Forgot Password</Link>
+              </div>
               <p>
                 Don't have an account ?{' '}
                 <span onClick={() => setHasAccount(!hasAccount)}>Sign up</span>
@@ -49,24 +75,22 @@ const Login = (props) => {
               <GoogleButton onClick={googlesignin} />
               <p></p>
 
-              <GithubButton
-                onClick={githubsignin}
-              />
+              <GithubButton onClick={githubsignin} />
             </>
           ) : (
             <>
               <button onClick={handleSignup}>Sign up</button>
+              
               <p>
                 Have an account ?{' '}
                 <span onClick={() => setHasAccount(!hasAccount)}>Sign in</span>
               </p>
               <p></p>
+
               <GoogleButton onClick={googlesignin} />
               <p></p>
 
-              <GithubButton
-                onClick={githubsignin}
-              />
+              <GithubButton onClick={githubsignin} />
             </>
           )}
         </div>

digital-course-file/src/user/Signin.js

@@ -12,6 +12,7 @@ const Signin = () => {
   const [emailError, setEmailError] = useState('')
   const [passwordError, setPasswordError] = useState('')
   const [hasAccount, setHasAccount] = useState(false)
+  const [loading, setloading] = useState(false)
 
   const githubsignin = () => {
     var provider = new firebase.auth.GithubAuthProvider()
@@ -81,7 +82,10 @@ const Signin = () => {
     setPasswordError('')
   }
 
+  
+
   const handleLogin = () => {
+    setloading(true)
     clearErrors()
     fire
       .auth()
@@ -98,6 +102,7 @@ const Signin = () => {
             break
         }
       })
+    setloading(false)
   }
 
   const handleSignup = () => {
@@ -155,6 +160,7 @@ const Signin = () => {
           passwordError={passwordError}
           googlesignin={googlesignin}
           githubsignin={githubsignin}
+          loading={loading}
         />
       )}
     </div>