From 58fc5fd900975ff979b2e3305d34e100a015cc84 Mon Sep 17 00:00:00 2001
From: "Rayyan (Rayy)" <rayyan.hodges@studytafensw.edu.au>
Date: Tue, 10 Oct 2023 08:05:45 +0000
Subject: [PATCH] Modify Signin.js to add error code from Firebase with invalid
 credentials

---
 src/App.js          |  21 +++--
 src/pages/Signin.js | 186 ++++++++++++++++++++------------------------
 2 files changed, 99 insertions(+), 108 deletions(-)

diff --git a/src/App.js b/src/App.js
index 24a28b6..3082e08 100644
--- a/src/App.js
+++ b/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">
@@ -107,4 +112,4 @@ const signIn = ( email, password ) => {
     );
   }
 
-  export default App;
\ No newline at end of file
+  export default App;
diff --git a/src/pages/Signin.js b/src/pages/Signin.js
index 0a23401..705bd8a 100644
--- a/src/pages/Signin.js
+++ b/src/pages/Signin.js
@@ -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 )
-    }
-    
-    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"
+    .then((response) => {
+      if( response ) {
+        // sign in successful
+      }
+    })
+    .catch( (code) => {
+      //console.log(code)
+      setErrorCode( code )
+    })
+  }
 
-                  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>
+  )
 }
\ No newline at end of file