From 7ba24c3a8447ef62d1da79612d2566d1e015f319 Mon Sep 17 00:00:00 2001
From: Gana016 <jayam.ganapathi12@gmail.com>
Date: Sun, 7 Mar 2021 13:13:25 +0530
Subject: [PATCH] updated forgot password
---
digital-course-file/src/Routes.js | 2 +
.../src/user/ForgotPassword.js | 48 +++++++++++++++++++
digital-course-file/src/user/Login.js | 42 ++++++++++++----
digital-course-file/src/user/Signin.js | 6 +++
4 files changed, 89 insertions(+), 9 deletions(-)
create mode 100644 digital-course-file/src/user/ForgotPassword.js
diff --git a/digital-course-file/src/Routes.js b/digital-course-file/src/Routes.js
index 2f12305..c13c1c7 100644
--- a/digital-course-file/src/Routes.js
+++ b/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'>
diff --git a/digital-course-file/src/user/ForgotPassword.js b/digital-course-file/src/user/ForgotPassword.js
new file mode 100644
index 0000000..58ea8ae
--- /dev/null
+++ b/digital-course-file/src/user/ForgotPassword.js
@@ -0,0 +1,48 @@
+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>
+ )
+}
diff --git a/digital-course-file/src/user/Login.js b/digital-course-file/src/user/Login.js
index 579d82d..4512730 100644
--- a/digital-course-file/src/user/Login.js
+++ b/digital-course-file/src/user/Login.js
@@ -1,6 +1,9 @@
-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>
@@ -48,25 +74,23 @@ const Login = (props) => {
<p></p>
<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>
diff --git a/digital-course-file/src/user/Signin.js b/digital-course-file/src/user/Signin.js
index 1cc6cbb..3462fac 100644
--- a/digital-course-file/src/user/Signin.js
+++ b/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>
--
GitLab