second commit. adding auth code to files. bug fixes.

Author: cory

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env"]
+  }

authMid.js

@@ -7,13 +7,13 @@ const generateToken = (user) => {
 
 // Middleware for verifying JWT
 const verifyToken = (req, res, next) => {
-    const token = req.headers.authorization;
+    const token = req.headers.authorization.split(' ');
 
     if (!token) {
         return res.status(401).json({ message: 'No token provided' });
     }
 
-    jwt.verify(token, 'your_secret_key', (err, decoded) => {
+    jwt.verify(token[1], 'your_secret_key', (err, decoded) => {
         if (err) {
             return res.status(401).json({ message: 'Invalid token' });
         }

package-lock.json

@@ -10,6 +10,8 @@
   "author": "cory_martinez@rocketmail.com",
   "license": "MIT",
   "dependencies": {
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
     "cors": "^2.8.5",
     "express": "^4.19.2",
     "jsonwebtoken": "^9.0.2",

package.json

@@ -4,7 +4,7 @@ function AllData() {
     React.useEffect(() => {
       const fetchData = async () => {
         try {
-          // Check for JWT token in local storage (assuming you store it there)
+          // Check for JWT token in local storage 
           const token = localStorage.getItem('token');
           let headers = {};
 
@@ -13,7 +13,7 @@ function AllData() {
               Authorization: `Bearer ${token}`,
             };
           }
-          
+
           console.log('Request Headers:', headers);
           const response = await fetch('/account/all', { headers });
 

public/alldata.js

@@ -1,69 +1,86 @@
-function Balance(){
-  const [show, setShow]     = React.useState(true);
-  const [status, setStatus] = React.useState('');  
+function Balance() {
+  const [show, setShow] = React.useState(true);
+  const [status, setStatus] = React.useState('');
+  const [balance, setBalance] = React.useState('');
+  const [email, setEmail] = React.useState('');
+
+  async function handle() {
+    const token = localStorage.getItem('token');
+    if (!token) {
+      setStatus('Please login to check balance');
+      return;
+    }
+
+    try {
+      const response = await fetch(`/account/findOne/${email}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`API request failed with status: ${response.status}`);
+      }
+
+      const text = await response.text();
+      const data = JSON.parse(text);
+
+      setStatus('');
+      setShow(false);
+      setBalance(data.balance);
+    } catch (err) {
+      console.error('Error fetching balance:', err);
+      setStatus('Error fetching balance');
+    }
+  }
 
   return (
     <Card
       bgcolor="info"
       header="Balance"
       status={status}
-      body={show ?
-        <BalanceForm setShow={setShow} setStatus={setStatus}/> :
-        <BalanceMsg setShow={setShow} setStatus={setStatus}/>}
+      body={show ? (
+        <BalanceForm setShow={setShow} setStatus={setStatus} handle={handle} setEmail={setEmail} />
+      ) : (
+        <BalanceMsg setShow={setShow} setStatus={setStatus} balance={balance} />
+      )}
     />
-  )
-
+  );
 }
 
-function BalanceMsg(props){
-  return(<>
-    <h5>Success</h5>
-    <button type="submit" 
-      className="btn btn-light" 
-      onClick={() => {
-        props.setShow(true);
-        props.setStatus('');
-      }}>
+function BalanceMsg(props) {
+  return (
+    <>
+      <h5>Success! Your balance is: ${props.balance}</h5>
+      <button
+        type="submit"
+        className="btn btn-light"
+        onClick={() => {
+          props.setShow(true);
+          props.setStatus('');
+        }}
+      >
         Check balance again
-    </button>
-  </>);
+      </button>
+    </>
+  );
 }
 
-function BalanceForm(props){
-  const [email, setEmail]   = React.useState('');
-  const [balance, setBalance] = React.useState('');  
-
-  function handle(){
-    fetch(`/account/findOne/${email}`)
-    .then(response => response.text())
-    .then(text => {
-        try {
-            const data = JSON.parse(text);
-            props.setStatus(text);
-            props.setShow(false);
-            setBalance(user.balance);
-            console.log('JSON:', data);
-        } catch(err) {
-            props.setStatus(text)
-            console.log('err:', text);
-        }
-    });
-  }
-
-  return (<>
-
-    Email<br/>
-    <input type="input" 
-      className="form-control" 
-      placeholder="Enter email" 
-      value={email} 
-      onChange={e => setEmail(e.currentTarget.value)}/><br/>
+function BalanceForm(props) {
+  return (
+    <>
+      Email<br />
+      <input
+        type="input"
+        className="form-control"
+        placeholder="Enter email"
+        value={props.email}
+        onChange={(e) => props.setEmail(e.currentTarget.value)}
+      /><br />
 
-    <button type="submit" 
-      className="btn btn-light" 
-      onClick={handle}>
+      <button type="submit" className="btn btn-light" onClick={props.handle}>
         Check Balance
-    </button>
-
-  </>);
+      </button>
+    </>
+  );
 }

public/balance.js

@@ -6,15 +6,15 @@ const logout = () => {
   // Redirect to the login page after 1 second
   setTimeout(() => {
     localStorage.removeItem('token');
-    window.location.href = '/login';
+    window.location.href = '/#/login/';
   }, 1000); 
 };
 
 function Spa() {
   return (
     <HashRouter>
       <div>
-        <NavBar/>        
+        <NavBar logout={logout}/>        
         <UserContext.Provider value={{users:[{name:'abel',email:'abel@mit.edu',password:'secret',balance:100}]}}>
           <div className="container" style={{padding: "20px"}}>
             <Route path="/" exact component={Home} />