Skip to content
Snippets Groups Projects
Commit a934adb6 authored by Tarek Shah's avatar Tarek Shah
Browse files

fixed login; put login component in its own file; added some aesthetics (will change later)

parent 336413bd
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/crisis-events-text-summarization-frontend/public/images/login_background.jpg 0 → 100644
+ 0
− 0
View file @ a934adb6
frontend/crisis-events-text-summarization-frontend/public/images/login_background.jpg

108 KiB

frontend/crisis-events-text-summarization-frontend/src/App.js
+ 51
− 85
View file @ a934adb6
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>
......
frontend/crisis-events-text-summarization-frontend/src/login.js
+ 68
− 64
View file @ a934adb6
// 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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment