Add sign-in redirect to home

src/App.js

@@ -18,6 +18,7 @@ import { Signout } from "./pages/Signout"
 import { Signin } from "./pages/Signin"
 
 
+
 function App() {
   const FBapp = initializeApp(FirebaseConfig)
   const FBauth = getAuth()
@@ -42,6 +43,7 @@ function App() {
   /// application states
   const [nav, setNav] = useState(navItems)
 
+
    // authentication observer
    onAuthStateChanged(FBauth, (user) => {
     if( user ) {
@@ -93,7 +95,7 @@ const signIn = ( email, password ) => {
           <Route path="/contact" element={<Contact greeting="Hey you, this is contact page!" />} />
           <Route path="/signup" element={ <Signup handler={signUp}/> } />
           <Route path="/signout" element={ <Signout handler={logOut}/> } />
-          <Route path="/signin" element={ <Signin handler={signIn}/> } />
+          <Route path="/signin" element={ <Signin handler={signIn} authstate={auth}/> } />
         </Routes>
       </div>
     );

src/pages/Signin.js

@@ -2,14 +2,16 @@ 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 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()
 
     useEffect( () => {
         if(email.indexOf('@') > 0) {
@@ -28,12 +30,23 @@ export function Signin ( props ) {
             setValidpassword( false )
         }
     }, [password])
+
+    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>
+        <Form onSubmit={ submitHandler }>
         <Form.Group>
         <Form.Label>Email</Form.Label>
   
@@ -44,7 +57,10 @@ export function Signin ( props ) {
                   name="email"
   
                   placeholder="you@example.com"
-  
+
+                  value={email}
+
+                  onChange={ (evt) => setEmail(evt.target.value)}
                   
   
                 />
@@ -62,6 +78,10 @@ export function Signin ( props ) {
                   name="password"
   
                   placeholder="minimum 8 characters"
+
+                  value={ password }
+
+                  onChange={ (evt) => setPassword(evt.target.value)} 
   
                  
   
@@ -71,7 +91,10 @@ export function Signin ( props ) {
               <Button
                 variant="primary"
                 className="mt-3 w-100"
-                type="submit">
+                type="submit"
+                disabled={ (validemail && validpassword) ? false : true }
+                >
+                
                 Sign in
               </Button>