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