Modify Signin.js to add error code from Firebase with invalid credentials
This commit is contained in:
GitHub
parent
0524ba25bd
commit
58fc5fd900
21
src/App.js
21
src/App.js
|
|
@ -82,13 +82,18 @@ function App() {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const signIn = ( email, password ) => {
|
const signIn = (email, password) => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
signInWithEmailAndPassword(FBauth, email, password)
|
signInWithEmailAndPassword(FBauth, email, password)
|
||||||
.then( () => {
|
.then(() => {
|
||||||
// user is signed in
|
// user is signed in
|
||||||
} )
|
resolve(true)
|
||||||
.catch( (error) => { console.log(error) })
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log(error)
|
||||||
|
reject( error.code )
|
||||||
|
})
|
||||||
|
})
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
|
|
@ -107,4 +112,4 @@ const signIn = ( email, password ) => {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|
|
||||||
|
|
@ -1,109 +1,95 @@
|
||||||
import Form from 'react-bootstrap/Form';
|
import Form from "react-bootstrap/Form"
|
||||||
import Container from 'react-bootstrap/Container';
|
import Container from "react-bootstrap/Container"
|
||||||
import Row from 'react-bootstrap/Row';
|
import Row from "react-bootstrap/Row"
|
||||||
import Col from 'react-bootstrap/Col';
|
import Col from "react-bootstrap/Col"
|
||||||
import Button from "react-bootstrap/Button";
|
import Button from "react-bootstrap/Button"
|
||||||
import {useState, useEffect} from 'react';
|
import {useState, useEffect} from 'react'
|
||||||
import {useNavigate} from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
export function Signin ( props ) {
|
export function Signin( props ) {
|
||||||
const [email, setEmail] = useState('')
|
|
||||||
const [validemail, setValidemail] = useState(false)
|
|
||||||
const [password, setPassword] = useState('')
|
|
||||||
const [validpassword, setValidpassword] = useState(false)
|
|
||||||
const navigate = useNavigate()
|
|
||||||
|
|
||||||
useEffect( () => {
|
const [email,setEmail] = useState('')
|
||||||
if(email.indexOf('@') > 0) {
|
const [validemail, setValidemail] = useState(false)
|
||||||
setValidemail(true)
|
const [password,setPassword] = useState('')
|
||||||
}
|
const [validpassword, setValidpassword ] = useState(false)
|
||||||
else {
|
const [errorCode, setErrorCode] = useState()
|
||||||
setValidemail( false )
|
const navigate = useNavigate()
|
||||||
}
|
|
||||||
}, [email])
|
|
||||||
|
|
||||||
useEffect( () => {
|
useEffect( () => {
|
||||||
if( password.length >= 8 ) {
|
if( email.indexOf('@') > 0 ) {
|
||||||
setValidpassword(true)
|
setValidemail(true)
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
setValidpassword( false )
|
setValidemail( false )
|
||||||
}
|
}
|
||||||
}, [password])
|
} , [email])
|
||||||
|
|
||||||
useEffect( () => {
|
useEffect( () => {
|
||||||
if( props.authstate ) {
|
if( password.length >= 8 ) {
|
||||||
navigate('/')
|
setValidpassword( true )
|
||||||
}
|
}
|
||||||
}, [props.authstate])
|
else {
|
||||||
|
setValidpassword( false )
|
||||||
|
}
|
||||||
|
} , [password])
|
||||||
|
|
||||||
const submitHandler = (evt) => {
|
useEffect( () => {
|
||||||
|
if( props.authstate ) {
|
||||||
|
navigate("/")
|
||||||
|
}
|
||||||
|
}, [props.authstate])
|
||||||
|
|
||||||
|
const submitHandler = (evt) => {
|
||||||
evt.preventDefault()
|
evt.preventDefault()
|
||||||
props.handler( email, password )
|
props.handler( email, password )
|
||||||
}
|
.then((response) => {
|
||||||
|
if( response ) {
|
||||||
return (
|
// sign in successful
|
||||||
<Container>
|
}
|
||||||
<Row>
|
})
|
||||||
<Col md={ {span: 4, offset: 4} }>
|
.catch( (code) => {
|
||||||
<Form onSubmit={ submitHandler }>
|
//console.log(code)
|
||||||
<Form.Group>
|
setErrorCode( code )
|
||||||
<Form.Label>Email</Form.Label>
|
})
|
||||||
|
}
|
||||||
<Form.Control
|
|
||||||
|
|
||||||
type="email"
|
|
||||||
|
|
||||||
name="email"
|
|
||||||
|
|
||||||
placeholder="you@example.com"
|
|
||||||
|
|
||||||
value={email}
|
return(
|
||||||
|
<Container>
|
||||||
onChange={ (evt) => setEmail(evt.target.value)}
|
<Row>
|
||||||
|
<Col md={ {span: 4, offset: 4} }>
|
||||||
|
<Form onSubmit={ submitHandler }>
|
||||||
/>
|
<Form.Group>
|
||||||
|
<Form.Label>Email</Form.Label>
|
||||||
</Form.Group>
|
<Form.Control
|
||||||
|
type="email"
|
||||||
<Form.Group>
|
name="email"
|
||||||
|
placeholder="you@example.com"
|
||||||
<Form.Label>Password</Form.Label>
|
value={ email }
|
||||||
|
onChange={ (evt) => setEmail(evt.target.value) }
|
||||||
<Form.Control
|
/>
|
||||||
|
</Form.Group>
|
||||||
type="password"
|
<Form.Group>
|
||||||
|
<Form.Label>Password</Form.Label>
|
||||||
name="password"
|
<Form.Control
|
||||||
|
type="password"
|
||||||
placeholder="minimum 8 characters"
|
name="password"
|
||||||
|
placeholder="your password"
|
||||||
value={ password }
|
value={ password }
|
||||||
|
onChange={ (evt) => setPassword(evt.target.value) }
|
||||||
onChange={ (evt) => setPassword(evt.target.value)}
|
/>
|
||||||
|
</Form.Group>
|
||||||
|
<Button
|
||||||
|
variant="primary"
|
||||||
/>
|
className="mt-3 w-100"
|
||||||
|
type="submit"
|
||||||
</Form.Group>
|
disabled={ (validemail && validpassword) ? false : true }
|
||||||
<Button
|
>
|
||||||
variant="primary"
|
Sign in
|
||||||
className="mt-3 w-100"
|
</Button>
|
||||||
type="submit"
|
<Form.Text>{errorCode}</Form.Text>
|
||||||
disabled={ (validemail && validpassword) ? false : true }
|
</Form>
|
||||||
>
|
</Col>
|
||||||
|
</Row>
|
||||||
Sign in
|
</Container>
|
||||||
</Button>
|
)
|
||||||
|
|
||||||
</Form>
|
|
||||||
|
|
||||||
</Col>
|
|
||||||
|
|
||||||
</Row>
|
|
||||||
|
|
||||||
</Container>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue