src/Dockerfile

@@ -0,0 +1,29 @@
+# Use an official Node runtime as the base image
+FROM node:14 as build
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the app
+RUN npm run build
+
+# Use nginx to serve the static files
+FROM nginx:alpine
+
+# Copy the build output to replace the default nginx contents
+COPY --from=build /app/build /usr/share/nginx/html
+
+# Expose port 80
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

src/components/Admin.js

@@ -17,13 +17,15 @@ import {
     Alert,
     Container,
     Box,
-    TextField
+    TextField,
+    Tab
   } from '@mui/material';
 
 
 export default function Admin() {
   const [users, setUsers] = useState([]);
   const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const navigate = useNavigate();
   const fileInputRef = useRef(null);
@@ -59,13 +61,15 @@ export default function Admin() {
     try {
       const response = await axios.post(`${process.env.REACT_APP_API_URL}/admin/user`, {
         username,
-        password
+        password,
+        email
       }, {
         headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
       });
       setUsers([...users, response.data]);
       setUsername('');
       setPassword('');
+      setEmail('');
     } catch (error) {
       console.error(error);
     }
@@ -158,6 +162,13 @@ export default function Admin() {
           onChange={(e) => setPassword(e.target.value)}
           sx={{ mr: 2 }}
         />
+        <TextField
+          label="Email"
+          variant="outlined"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          sx={{ mr: 2 }}
+        />
         <Button type="submit" sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }} variant="contained" color="primary">
           Add User
         </Button>
@@ -167,14 +178,18 @@ export default function Admin() {
         <Table>
           <TableHead>
             <TableRow>
+              <TableCell>ID</TableCell>
               <TableCell>Username</TableCell>
+              <TableCell>Email</TableCell>
               <TableCell>Actions</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
             {users.map(user => (
               <TableRow key={user.ID}>
-                <TableCell>{user.username}</TableCell>
+                <TableCell style={{ width: '30px' }}>{user.ID}</TableCell>
+                <TableCell style={{ width: '100px'}}>{user.username}</TableCell>
+                <TableCell style={{ width: '300px'}}>{user.email}</TableCell>
                 <TableCell>
                   <Button 
                     variant="contained"