diff --git a/frontend/crisis-events-text-summarization-frontend/public/images/login_background.jpg b/frontend/crisis-events-text-summarization-frontend/public/images/login_background.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..46d644110dca4236bdc8bc7463750ae0dae9e7c2
Binary files /dev/null and b/frontend/crisis-events-text-summarization-frontend/public/images/login_background.jpg differ
diff --git a/frontend/crisis-events-text-summarization-frontend/src/App.js b/frontend/crisis-events-text-summarization-frontend/src/App.js
index a5ac9cec006c57805f9cd44ce9f184e9282ba227..0a96e691658caaa4e88b2317fb2ee870e07f5195 100644
--- a/frontend/crisis-events-text-summarization-frontend/src/App.js
+++ b/frontend/crisis-events-text-summarization-frontend/src/App.js
@@ -1,7 +1,7 @@
import logo from './logo.svg';
import './App.css';
import './login'
-import Login from './login';
+import Login from './login.js';
import React, { useState, useEffect, useContext } from 'react'
// MUI imports
@@ -35,7 +35,25 @@ function App() {
const [foo, setFoo] = useState('');
const [authenticated, setAuthenticated] = useState(false);
const [username, setUsername] = useState(""); //test_user
- const [password, setPassword] = useState(""); //admintest12345
+ const [password, setPassword] = useState(""); //12345
+
+ useEffect(() => {
+ // Check if user is already authenticated from sessionStorage
+ const isAuthenticated = sessionStorage.getItem('authenticated');
+ if (isAuthenticated === 'true') {
+ setAuthenticated(true);
+ }
+ }, []);
+
+ useEffect(() => {
+ if (authenticated) {
+ // If user is authenticated, save the state in sessionStorage
+ sessionStorage.setItem('authenticated', 'true');
+ } else {
+ // If user is not authenticated, remove the state from sessionStorage
+ sessionStorage.removeItem('authenticated');
+ }
+ }, [authenticated]);
const [loadedCollections, setLoadedCollections] = useState([]);
const [selectedCollection, setSelectedCollection] = useState(null);
@@ -56,24 +74,6 @@ function App() {
setLoadedRawFiles(r)
}
- useEffect(() => {
- // Check if user is already authenticated from localStorage
- const isAuthenticated = localStorage.getItem('authenticated');
- if (isAuthenticated === 'true') {
- setAuthenticated(true);
- }
- }, []);
-
- useEffect(() => {
- if (authenticated) {
- // If user is authenticated, save the state in localStorage
- localStorage.setItem('authenticated', 'true');
- } else {
- // If user is not authenticated, remove the state from localStorage
- localStorage.removeItem('authenticated');
- }
- }, [authenticated]);
-
useEffect(
() => {
// console.log("Mounting App");
@@ -88,11 +88,11 @@ function App() {
},[loadedRawFiles,loadedLinkFiles,loadedXMLFiles]
);
- useEffect(
- () => {
- console.log("Updated authentication",authenticated);
- },[authenticated]
- );
+ // useEffect(
+ // () => {
+ // console.log("Updated authentication",authenticated);
+ // },[authenticated]
+ // );
useEffect(
() => {
@@ -115,41 +115,13 @@ function App() {
},[selectedCollection]
);
- const displayLoginStatus = () => {
- if (authenticated) {
- return "User: " + username + ", Password: " + password
- } else {
- return "Log in"
- }
- };
-
- const loginFunction = () => {
- fetch(
- "http://127.0.0.1:5000/login",
- {
- method: "POST", // or 'PUT'
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify({"authenticate":{"username": username,"password": password}}),
- }
- )
- .then((response) => response.json())
- .then((response) => {
- //do something with the response
- console.log("Got Test Response:",response)
- setFoo(response);
- if (response["status"] === "success") {
- // setUsername(true);
- // setAuthenticated(true);
- setAuthenticated(true);
- }
- });
-
- };
-
-
-
+ // const displayLoginStatus = () => {
+ // if (authenticated) {
+ // return "User: " + username + ", Password: " + password
+ // } else {
+ // return "Log in"
+ // }
+ // };
const showEditor= () => {
if (selectedCollection == null) {
@@ -191,34 +163,28 @@ function App() {
if (!authenticated) {
return (
- <Box
- sx={{
+ <div
+ style={{
+ backgroundImage: 'url(/images/login_background.jpg)',
+ backgroundSize: 'cover',
+ backgroundPosition: 'center',
+ minHeight: '100vh',
display: 'flex',
- flexDirection: 'column',
alignItems: 'center',
- justifyContent: 'center',
- height: '100vh',
+ justifyContent: 'center'
}}
>
- <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>
- );
+ <Login
+ username={username}
+ password={password}
+ authenticated={authenticated}
+ setUsername={setUsername}
+ setPassword={setPassword}
+ setAuthenticated={setAuthenticated}
+ setFoo={setFoo}
+ ></Login>
+ </div>
+ )
}
return (
@@ -234,7 +200,7 @@ function App() {
</ButtonGroup>
<br/>
- <b>Login Status: {displayLoginStatus()}</b>
+ {/* <b>Login Status: {displayLoginStatus()}</b> */}
</Box>
diff --git a/frontend/crisis-events-text-summarization-frontend/src/login.js b/frontend/crisis-events-text-summarization-frontend/src/login.js
index aa55d00d13cfc765c9a66958bee7b72df2b36103..a3a97d6be837419868a6b4d2a02a7c53ff4a1930 100644
--- a/frontend/crisis-events-text-summarization-frontend/src/login.js
+++ b/frontend/crisis-events-text-summarization-frontend/src/login.js
@@ -1,73 +1,77 @@
-// import './login.css';
-import React, { useState, useEffect } from 'react'
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+function Login(props) {
+ const username = props.username;
+ const password = props.password;
-async function PostSignInfo(data) {
-
- try {
- const respone = await fetch("http://127.0.0.1:5000/login", {
- method: "POST", // or 'PUT'
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify(data),
- });
- }
- catch (error) {
- console.error("Could not upload signup information successfully", error);
- }
-}
-
-
-
-const Login = (props) => {
-
- const [username, setUsername] = useState('');
- const [password, setPassword] = useState('');
-
- const handleSubmit = (e) => {};
-
- const authenticate = (e) => {
- console.log("Submitting");
- fetch("http://127.0.0.1:5000/database_service")
- .then((res) => res.json())
- .then((json) => {
- console.log(json);
+ const loginFunction = () => {
+ fetch(
+ "http://127.0.0.1:5000/login",
+ {
+ method: "POST", // or 'PUT'
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({ "authenticate": { "username": username, "password": password } }),
+ }
+ )
+ .then((response) => response.json())
+ .then((response) => {
+ //do something with the response
+ console.log("Got Test Response:", response)
+ props.setFoo(response);
+ if (response["status"] === "success") {
+ props.setAuthenticated(true);
+ }
});
- };
+ };
- const component_content = (
- <div className="login-container">
- <h2>Enter Username</h2>
- <form onSubmit={authenticate}>
- <div className="input-group">
- <label htmlFor="username">enter username</label>
- <input
- type="text"
- id="username"
- name="username"
- // value={username}
- // onChange={(e) => setUsername(e.target.value)}
- />
- </div>
-
- <div className="input-group">
- <label htmlFor="password">Password</label>
- <input
- type="password"
- id="password"
- name="password"
- // value={password}
- // onChange={(e) => setPassword(e.target.value)}
- required
- />
- </div>
- <button type="submit">Login</button>
- </form>
+ return (
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+ <h1 style={{ marginTop: '-40px', marginBottom: '50px' }}>Welcome to the Crisis Events Text Summarization Website</h1>
+ <Box
+ sx={{
+ backgroundColor: 'white',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ height: '50vh',
+ width: '20vw',
+ borderRadius: '10px'
+ }}
+ >
+ <h1>Login</h1>
+ <TextField
+ sx={{ backgroundColor: 'white', marginBottom: '-8px' }}
+ label="Username"
+ variant="outlined"
+ value={username}
+ onChange={(e) => props.setUsername(e.target.value)}
+ margin="normal"
+ />
+ <TextField
+ sx={{ backgroundColor: 'white' }}
+ label="Password"
+ type="password"
+ variant="outlined"
+ value={password}
+ onChange={(e) => props.setPassword(e.target.value)}
+ margin="normal"
+ />
+ <Button
+ variant="contained"
+ aria-label="Basic button group"
+ onClick={loginFunction}
+ sx={{marginTop: '15px'}}
+ >
+ Login
+ </Button>
+ </Box>
</div>
);
-
- return component_content;
}
export default Login;
\ No newline at end of file