a bunch of aesthetics and also create user http requests

db_app/src/components/Login.js

@@ -2,7 +2,27 @@ import React,{useState, useEffect} from 'react';
 import {Routes, Route, useNavigate} from 'react-router-dom';
 import Axios from 'axios';
 import './Login.css';
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import TextField from "@mui/material/TextField";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import image from "./images/main_background.jpg"
 
+const theme = createTheme({
+    palette: {
+      primary: {
+        main: lightGreen[700],
+      },
+    },
+  });
 
 function Login() {
   const navigate = useNavigate();
@@ -12,11 +32,11 @@ function Login() {
 	}
 
   const [data,setData] = useState({
-    username:"",
+    net_id:"",
     password:""
   })
   
-  const {username,password} = data;
+  const {net_id,password} = data;
   
   const changeHandler = e => {
     setData({...data,[e.target.name]:[e.target.value]});
@@ -25,6 +45,7 @@ function Login() {
   const submitHandler = e => {
     e.preventDefault();
     console.log(data);
+    console.log(net_id[0])
     login();
   }
 
@@ -38,31 +59,84 @@ const getHello = () => {
 };
 
 const login = () => {
-  Axios.post("http://3.219.93.142:8000/api/", {net_id: username, password: password,}).then((response) => {
-     console.log(response.data);
+  Axios.post("http://3.219.93.142:8000/api/auth", {net_id: net_id[0], password: password[0],}).then((response) => {
+     console.log(response);
+     console.log(response.headers)
   });
 };
 
 
 
 
+
   
    return (
-      <div>
-        <center>
-          <h1>Log In</h1>
-          <button onClick={getHello}>Test</button>
-          <p>Log in to your account</p>
-        <form onSubmit={submitHandler}>
-        <p>Username:</p>
-        <input type="text" name="username" value={username} onChange={changeHandler}/>
-        <p>Password:</p>
-        <input type="password" name="password" value={password} onChange={changeHandler}/><br/>
-        <input type="submit" name="submit"/>
+    
+    
+        <ThemeProvider theme={theme}>
+      <div className='bg' style={{backgroundImage: 'url(' + require('./images/main_background.jpg') + ')'}}>
+     
+ 
+      
+      <div className='logbox'>
+       <Box
+        sx={{  
+          marginTop: 8,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}
+      >
+        <Typography component="h1" variant="h5">Log In</Typography>
+         
+          
+        <form className='formbox' onSubmit={submitHandler}>
+        <TextField
+            margin="normal"
+            required
+            fullWidth
+            id="net_id"
+            label="net_id"
+            name="net_id"
+            autoComplete="net_id"
+            autoFocus
+            value={net_id} 
+            onChange={changeHandler}
+          />
+          <TextField
+            margin="normal"
+            required
+            fullWidth
+            id="password"
+            label="Password"
+            name="password"
+            autoComplete="password"
+            autoFocus
+            value={password} 
+            onChange={changeHandler}
+          />
+        
+        
+        <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            sx={{ mt: 3, mb: 2 }}
+          >
+            Sign In</Button>
         </form>
-        <button onClick={navigateCreateAccount}>Create New Account</button>
-        </center>
+        <Button
+        onClick={navigateCreateAccount}
+        fullWidth
+        variant="contained"
+        sx={{ mt: 3, mb: 2, width:1/4 }}
+        >Create Account</Button>
+    
+      </Box>
+
       </div>
+      </div>
+      </ThemeProvider>
   
     );
   }