a bunch of aesthetics and also create user http requests

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