fixed login

frontend/crisis-events-text-summarization-frontend/src/App.js

@@ -13,6 +13,7 @@ import Button from '@mui/material/Button';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
 
 import CollectionList from './collection_list';
 import CollectionEditor from './collection_editor';
@@ -33,8 +34,8 @@ const dummy_collection_data = [
 function App() {
   const [foo, setFoo] = useState('');
   const [authenticated, setAuthenticated] = useState(false);
-  const [username, setUsername] = useState("test_user");
-  const [password, setPassword] = useState("admintest12345");
+  const [username, setUsername] = useState(""); //test_user
+  const [password, setPassword] = useState(""); //admintest12345
 
   const [loadedCollections, setLoadedCollections] = useState([]);
   const [selectedCollection, setSelectedCollection] = useState(null);
@@ -88,7 +89,7 @@ function App() {
         headers: {
             "Content-Type": "application/json",
         },
-        body: JSON.stringify({"authenticate":{"username":"test_user","password":"12345"}}),
+        body: JSON.stringify({"authenticate":{"username": username,"password": password}}),
       }
     )
     .then((response) => response.json())
@@ -116,6 +117,37 @@ function App() {
     }
   }
 
+  if (!authenticated) {
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+        }}
+      >
+        <h1>Login</h1>
+          <TextField
+            label="Username"
+            variant="outlined"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            margin="normal"
+          />
+          <TextField
+            label="Password"
+            type="password"
+            variant="outlined"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            margin="normal"
+          />
+          <Button variant="contained" aria-label="Basic button group" onClick={loginFunction}>Login</Button>
+      </Box>
+    );    
+  }
 
   return (
     <div className="App">
@@ -126,7 +158,7 @@ function App() {
           <ButtonGroup variant="contained" aria-label="Basic button group">
             <Button>Home</Button>
             <Button>Menu 2</Button>
-            <Button onClick={loginFunction}>Login</Button>
+            {/*<Button onClick={loginFunction}>Login</Button>*/}
           </ButtonGroup>
 
           <br/>