Modify Signin.js to add error code from Firebase with invalid credentials

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 (
       <div className="App">

src/pages/Signin.js

@@ -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()
     props.handler( email, password )
-    }
+    .then((response) => {
+      if( response ) {
+        // sign in successful
+      }
+    })
+    .catch( (code) => {
+      //console.log(code)
+      setErrorCode( code )
+    })
+  }
 
-    return (
+  return(
-        <Container>
+    <Container>
-        <Row>
+      <Row>
-          <Col md={ {span: 4, offset: 4} }>
+        <Col md={ {span: 4, offset: 4} }>
-        <Form onSubmit={ submitHandler }>
+          <Form onSubmit={ submitHandler }>
-        <Form.Group>
+            <Form.Group>
-        <Form.Label>Email</Form.Label>
+              <Form.Label>Email</Form.Label>
-  
+              <Form.Control 
-                <Form.Control
+                type="email" 
-  
+                name="email" 
-                  type="email"
+                placeholder="you@example.com" 
-  
+                value={ email }
-                  name="email"
+                onChange={ (evt) => setEmail(evt.target.value) }
-  
+              />
-                  placeholder="you@example.com"
+            </Form.Group>
-
+            <Form.Group>
-                  value={email}
+              <Form.Label>Password</Form.Label>
-
+              <Form.Control 
-                  onChange={ (evt) => setEmail(evt.target.value)}
+                type="password" 
-                  
+                name="password" 
-  
+                placeholder="your password" 
-                />
+                value={ password }
-  
+                onChange={ (evt) => setPassword(evt.target.value) }
-              </Form.Group>
+              />
-  
+            </Form.Group>
-              <Form.Group>
+            <Button 
-  
+              variant="primary" 
-                <Form.Label>Password</Form.Label>
+              className="mt-3 w-100" 
-  
+              type="submit"
-                <Form.Control
+              disabled={ (validemail && validpassword) ? false : true }
-  
+            >
-                  type="password"
+              Sign in
-  
+            </Button>
-                  name="password"
+            <Form.Text>{errorCode}</Form.Text>
-  
+          </Form>
-                  placeholder="minimum 8 characters"
+        </Col>
-
+      </Row>
-                  value={ password }
+    </Container>
-
+  )
-                  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>
-    )
 }