Dev session: login + design

src/client/.env

@@ -1,2 +1,3 @@
-REACT_APP_API_URL=https://asura.feal.no/api
+REACT_APP_API_URL=http://10.24.1.22:3001/api
+REACT_APP_LOGIN_URL=http://localhost:3001/auth/google
 BROWSER=none

src/client/src/AdminsOverview.js

@@ -1,10 +1,12 @@
 import * as React from "react";
-import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
+import { BrowserRouter as Router, Link, Route, Routes, useParams } from "react-router-dom";
-import AppBar from "./components/AsuraBar";
+import Appbar from "./components/AsuraBar";
 import ErrorSnackbar from "./components/ErrorSnackbar";
 
-import {Button, Textfield, Stack, InputLabel, Paper, Typography} from '@mui/material';
+import {Button, Box, TextField, Stack, InputLabel, Paper, TableContainer, Table, TableBody, TableHead, TableCell, TableRow, Typography} from '@mui/material';
-import DeleteIcon from '@mui/icons/Delete';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
 
 function showError(error) {
     alert("Something went wrong. \n" + error);
@@ -14,14 +16,14 @@ function showError(error) {
 function AdminCreator(props){
     function postCreate(){
         let adminEmail = document.getElementById("adminEmailInput").value;
-        if (!adminName) {
+        if (!adminEmail) {
             showError("Admin email is required");
             return;
         }
     
 
     let formData = new FormData();
-    formData.append("name", teamName)
+    formData.append("email", adminEmail)
     let body = new URLSearchParams(formData)
 
     fetch(process.env.REACT_APP_API_URL + `/admins/create`, {
@@ -58,5 +60,75 @@ function AdminCreator(props){
 
 function AdminList(props){
     const deleteAdmin = adminId => {
-        fetch(process.env.REACT_APP_API_URL)
+        fetch(process.env.REACT_APP_API_URL + `/admins/${adminId}`, {method: "DELETE"})
+            .then(res => res.json())
+            .then(data => {
+                if(data.status !== "OK"){
+                    showError(data.data);
+                    return;
+                }
+                props.setAdmins(props.admins.filter(admin => admin.id !== adminId));
+            })
+            .catch(error => showError(error));
+    }
+
+    return(
+        <Paper sx={{minHeight: "30vh", width:"90vw", margin:"10px auto"}} component={Stack} direction="column" justifycontent="center">
+            <div align="center">
+            {/* TODO: scroll denne menyen, eventuelt søkefelt */}
+                <Table aria-label="simple table">
+                    <TableHead>
+                        <TableRow>
+                            <TableCell>Admin</TableCell>
+                            <TableCell align="center">Actions</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {props.admins.map((admin) => (
+                            <TableRow key={admin.id}>
+                            <TableCell component="th" scope="row"> <b>
+                              {admin.name}
+                            </b></TableCell>
+                            {/* <TableCell align="right">{team.members}</TableCell> */}
+                            <TableCell align="center">
+                              {/* <Button variant="contained" sx={{margin: "auto 5px"}} color="primary" onClick={() => props.setSelectedTeamId(team.id)} endIcon={<EditIcon />}>Edit</Button> */}
+                              <Button variant="contained" sx={{margin: "auto 5px"}} color="error" onClick={() => {deleteAdmin(admin.id)}} endIcon={<DeleteIcon />}>Delete</Button>
+                            </TableCell>
+                          </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
+        </Paper>
+    )
+}
+
+export default function Admins(props) {
+    const [admins, setAdmins] = React.useState([]);
+    const { adminId } = useParams();
+
+    function getAdmins() {
+        fetch(process.env.REACT_APP_API_URL + `/admins/getAdmins`)
+            .then((res) => res.json())
+            .then((data) =>{
+                if(data.status !== "OK") {
+                    showError(data.data);
+                }
+                setAdmins(data.data);
+            })
+            .catch((err) => showError(err));
+        } 
+        React.useEffect(() => {
+            getAdmins()
+        }, []);
+
+        return (
+            <>
+            <Appbar pageTitle="Admins" />
+            <div className="admins">
+                <AdminCreator />
+                <AdminList />
+            </div>
+            </>
+        );
 }

src/client/src/FrontPage.js

@@ -5,6 +5,7 @@ import TournamentOverview from "./TournamentOverview.js";
 import TournamentManager from "./TournamentManager.js";
 import TournamentHistory from "./TournamentHistory";
 import TournamentTeams from "./TournamentTeams";
+import LoginPage from "./LoginPage";
 import AppBar from './components/AsuraBar';
 import { Button, Container, Typography, Box, Stack, Card, CardContent, CardMedia, Paper, Grid, Icon } from "@mui/material";
 import AddCircleIcon from '@mui/icons-material/AddCircle';
@@ -162,6 +163,7 @@ export default function App() {
         <Route path="/tournament/:tournamentId/manage" element={<TournamentManager />} />
         <Route path="/tournament/:tournamentId/teams" element={<TournamentTeams />} />
         <Route path="/history" element={<TournamentHistory />} />
+        <Route path="/login" element={<LoginPage />} />
       </Routes>
     </Router>
     </React.StrictMode>

src/client/src/LoginPage.js

@@ -6,3 +6,14 @@ import ErrorSnackbar from "./components/ErrorSnackbar";
 import {Button, Textfield, Stack, InputLabel, Paper, Typography} from '@mui/material';
 
 
+export default function LoginPage() {
+    return (
+        <>
+            <AppBar pageTitle="Sign in" />
+            <h2>Sign in with google</h2>
+            <a href={process.env.REACT_APP_LOGIN_URL}>
+                <img src="/btn_google_signing_dark.png" alt="Sign in with google" />
+            </a>
+        </>
+    );
+}

src/client/src/TournamentMatches.js

@@ -5,7 +5,7 @@ import Appbar from './components/Appbar';
 function MatchHistory() {
 
   return(
-    `Hei`
+    `Hei på deg din gamle sei`
   );
 }