a bunch of aesthetics and also create user http requests

db_app/src/App.js

@@ -1,6 +1,7 @@
 import "./App.css";
 import Login from "./components/Login";
 import CreateAccount from "./components/CreateAccount";
+import Menus from "./components/Menus";
 
 
 import {
@@ -19,6 +20,7 @@ function App() {
       <Routes>
         <Route path='/' element={<Login/>}></Route>
         <Route path='/CreateAccount' element={<CreateAccount/>}></Route>
+        <Route path='/Menus' element={<Menus/>}></Route>
       </Routes>
     </Router>
   );

db_app/src/components/CreateAccount.js

@@ -1,6 +1,17 @@
 import React,{useState} 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";
 
 function CreateAccount() {
 
@@ -11,12 +22,13 @@ function CreateAccount() {
 	}
 
   const [data,setData] = useState({
-    username:"",
+    net_id:"",
     password:"",
-    email:"",
+    first_name:"",
+    last_name:"",
   })
   
-  const {username,password,email} = data;
+  const {net_id, password, first_name, last_name} = data;
   
   const changeHandler = e => {
     setData({...data,[e.target.name]:[e.target.value]});
@@ -25,25 +37,102 @@ function CreateAccount() {
   const submitHandler = e => {
     e.preventDefault();
     console.log(data);
+    console.log(net_id[0])
+    console.log(password[0])
+    console.log(first_name[0])
+    console.log(last_name[0])
+    createAccount();
   }
  
+  const createAccount = () => {
+    Axios.post("http://3.219.93.142:8000/api/signup", {net_id: net_id[0], password: password[0], first_name: first_name[0], last_name: last_name[0]}).then((response) => {
+       console.log(response);
+    });
+  };
   
     return (
       <div>
-        <center>
-          <h1>Create Account</h1>
-          <p>Enter your account information</p>
+        <Box
+        sx={{  
+          marginTop: 8,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}
+      >
+           <Typography component="h1" variant="h5">Create Account</Typography>
+       
+          
         <form onSubmit={submitHandler}>
-        <p>Username:</p>
-        <input type="text" name="username" value={username} onChange={changeHandler}/><br/>
-        <p>Password:</p>
-        <input type="password" name="password" value={password} onChange={changeHandler}/><br/>
-        <p>Email:</p>
-        <input type="email" name="email" value={email} onChange={changeHandler}/><br/>
-        <input type="submit" name="submit"/>
+        <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}
+          />
+           <TextField
+            margin="normal"
+            required
+            fullWidth
+            id="first_name"
+            label="First name"
+            name="first_name"
+            autoComplete="first_name"
+            autoFocus
+            value={first_name} 
+            onChange={changeHandler}
+          />
+
+<TextField
+            margin="normal"
+            required
+            fullWidth
+            id="last_name"
+            label="Last name"
+            name="last_name"
+            autoComplete="last_name"
+            autoFocus
+            value={last_name} 
+            onChange={changeHandler}
+          />
+        
+        
+        <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            sx={{ mt: 3, mb: 2 }}
+        
+          >
+            Submit</Button>
         </form>
+        <Button
+        onClick={navigateLogin}
+        fullWidth
+        variant="contained"
+        sx={{ mt: 3, mb: 2, width:1/4 }}
+        >Back to Login</Button>
     
-        </center>
+      </Box>
+      
       </div>
   
     );

db_app/src/components/Login.css

@@ -1,39 +1,20 @@
-.App {
-    text-align: center;
-  }
-  
-  .App-logo {
-    height: 40vmin;
-    pointer-events: none;
-  }
-  
-  @media (prefers-reduced-motion: no-preference) {
-    .App-logo {
-      animation: App-logo-spin infinite 20s linear;
-    }
-  }
-  
-  .App-header {
-    background-color: #282c34;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
-  }
-  
-  .App-link {
-    color: #61dafb;
-  }
-  
-  @keyframes App-logo-spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  
+.bg {
+position:fixed;
+ height: 100vh;
+ width: 100vw;
+}
+
+.logbox {
+  background-color: rgba(255, 255, 255, 0.33);
+  padding: 15px;
+  margin-top:10vh;
+  margin-bottom:10vh;
+  margin-left:20vw;
+  margin-right:20vw;
+}
+
+.formbox {
+  background-color: rgba(255, 255, 255, 0.6);
+  margin:10px;
+  padding:10px;
+}

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>
   
     );
   }

db_app/src/components/Menus.js

@@ -1,43 +1,50 @@
 import React,{useState} from 'react';
 import {Routes, Route, useNavigate} from 'react-router-dom';
 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 AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Avatar from '@mui/material/Avatar';
+import Tooltip from '@mui/material/Tooltip';
+import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem';
+import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+    palette: {
+      primary: {
+        main: lightGreen[700],
+      },
+    },
+  });
 
 function Menus() {
-
-    const navigate = useNavigate();
-
-	const navigateLogin = () => {
-		 navigate('/');
-	}
-
-  const [data,setData] = useState({
-    username:"",
-    password:"",
-    email:"",
-  })
-  
-  const {username,password,email} = data;
-  
-  const changeHandler = e => {
-    setData({...data,[e.target.name]:[e.target.value]});
-  }
-  
-  const submitHandler = e => {
-    e.preventDefault();
-    console.log(data);
-  }
  
+
+  return (
+
+    <ThemeProvider theme={theme}>
+    <AppBar position="static">
+  <Toolbar variant="dense">
+    <Button variant="h6" color="inherit" component="div">
+      Photos
+    </Button>
+  </Toolbar>
+</AppBar>
+</ThemeProvider>
   
-    return (
-      <div>
-        <center>
-          <h1>Menus</h1>
-        
-    
-        </center>
-      </div>
-  
-    );
-  }
-  
-  export default Menus;
+  );
+}
+export default Menus;