initial admin (#42)

almost working admin panel (some back issues)

src/App.scss

@@ -28,6 +28,10 @@
     margin: 3px;
     width: 23%
   }
+  .menu-btns.admin .menu-btn{
+    width: 32%
+  }
+
 
   .menu-btns {
     margin-top: 25px;
@@ -40,6 +44,9 @@
     .menu-btn {
       width: 100%
     }
+    .menu-btns.admin .menu-btn{
+      width: 100%
+    }
   }
 
   .login-btn {

src/admin/Admin.js

@@ -0,0 +1,84 @@
+import './../App.scss'
+import './admin.scss'
+import {AdminService} from "../services/AdminService";
+import React, { useState } from "react";
+import { Link } from 'react-router-dom';
+function Admin() {
+    const [message, setMessage] = useState(true);
+    const [banId, setBanId] = useState('');
+    const [unbanId, setUnbanId] = useState('');
+
+    const handleSubmitBan = async (e) => {
+        e.preventDefault();
+
+        try {
+             await AdminService.banPlayer(banId)
+            setMessage('Ban succesful.')
+        } catch (e) {
+            setMessage('There was a problem with banning player.')
+        }
+    };
+    const handleSubmitUnban = async (e) => {
+        e.preventDefault();
+
+        try {
+            await AdminService.unbanPlayer(unbanId)
+            setMessage('Unban succesful.')
+        } catch (e) {
+            setMessage('There was a problem with unbanning player.')
+        }
+    };
+    return (
+        <div className="app">
+            <h1>Admin</h1>
+            <div className="menu-btns admin">
+                <div className="menu-btn">
+                    <Link to="/admin/PlayerBots">
+                        <button className="btn">Player Bots</button>
+                    </Link>
+                </div>
+                <div className="menu-btn">
+                    <Link to="/admin/PlayerGames">
+                        <button className="btn">Player Games</button>
+                    </Link>
+                </div>
+                <div className="menu-btn">
+                    <Link to="/admin/PlayerTournaments">
+                        <button className="btn">Player Tournaments</button>
+                    </Link>
+                </div>
+            </div>
+            <div className="ban-container">
+                <div className="ban-form">
+                    <form onSubmit={handleSubmitBan}>
+                    <label htmlFor="username">Player to ban</label>
+                                <input
+                                    type="text"
+                                    id="username"
+                                    onChange={(e) => setBanId(e.target.value)}
+                                    placeholder="Enter username to ban"
+                                    maxLength="30"
+                                />
+                                <button type="submit" className="submit">Ban</button>
+                    </form>
+                </div>
+                <div className="ban-form">
+                    <form onSubmit={handleSubmitUnban}>
+                    <label htmlFor="username">Player to unban</label>
+                                <input
+                                    type="text"
+                                    id="username"
+                                    onChange={(e) => setUnbanId(e.target.value)}
+                                    placeholder="Enter username to unban"
+                                    maxLength="30"
+                                />
+                                <button type="submit" className="submit">Unban</button>
+                    </form>
+                </div>
+            </div>
+            <p>{message}</p>
+        </div>
+    );
+}
+
+export default Admin;

src/admin/PlayerBots.js

@@ -0,0 +1,70 @@
+import './../lists/List.scss'
+// import DeleteGameButton from './DeleteGameButton';
+import { connect } from 'react-redux';
+import { login, logout } from '../User/store';
+import React, { useState } from "react";
+import {BotService} from "../services/BotService";
+function PlayerGames({ isAuthenticated, user, login, logout }) {
+
+    const [username, setUsername] = useState('');
+    const [botsList, setBotsList] = useState([]);
+    const [message, setMessage] = useState('');
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        try {
+            const gl = await BotService.getForPlayer(username);
+            setBotsList(gl.data.data);
+        } catch (e) {
+            setMessage('There was a problem with fetching bot data.');
+        }
+    };
+
+    return (
+        <div className="list">
+            <h1>Player Bots</h1>
+            <form onSubmit={handleSubmit}>
+                    <div className="form-group">
+                        <input
+                            type="text"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                            placeholder="Enter username"
+                            required
+                        />
+
+                    </div>
+
+
+                    <div className="form-group actions">
+                        <button type="submit" className="submit">Check player</button>
+                    </div>
+                </form>
+            <div className="menu-btns container-list">
+                <div className="item-list">
+                    {botsList.map((bot, index) => (
+                        <div key={index} className="menu-btns list-element btn">
+                            <button className="item-name color-primary-3 btn">{bot.gameId}</button>
+                            {/* <DeleteGameButton gameId={index} /> */}
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <p>{message}</p>
+        </div>
+    );
+}
+
+const mapStateToProps = (state) => ({
+    isAuthenticated: state.isAuthenticated,
+    user: state.user,
+  });
+
+const mapDispatchToProps = {login,logout,};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PlayerGames);
+
+
+
+

src/admin/PlayerGames.js

@@ -0,0 +1,70 @@
+import './../lists/List.scss'
+// import DeleteGameButton from './DeleteGameButton';
+import { connect } from 'react-redux';
+import { login, logout } from '../User/store';
+import React, { useState } from "react";
+import {GameService} from "../services/GameService";
+function PlayerGames({ isAuthenticated, user, login, logout }) {
+
+    const [username, setUsername] = useState('');
+    const [gamesList, setGamesList] = useState([]);
+    const [message, setMessage] = useState('');
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        try {
+            const gl = await GameService.getAllForPlayer(username);
+            setGamesList(gl.data.data);
+        } catch (e) {
+            setMessage('There was a problem with fetching game data.');
+        }
+    };
+
+    return (
+        <div className="list">
+            <h1>Player Games</h1>
+            <form onSubmit={handleSubmit}>
+                    <div className="form-group">
+                        <input
+                            type="text"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                            placeholder="Enter username"
+                            required
+                        />
+
+                    </div>
+
+
+                    <div className="form-group actions">
+                        <button type="submit" className="submit">Check player</button>
+                    </div>
+                </form>
+            <div className="menu-btns container-list">
+                <div className="item-list">
+                    {gamesList.map((game, index) => (
+                        <div key={index} className="menu-btns list-element btn">
+                            <button className="item-name color-primary-3 btn">{game.gameFileName}</button>
+                            {/* <DeleteGameButton gameId={index} /> */}
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <p>{message}</p>
+        </div>
+    );
+}
+
+const mapStateToProps = (state) => ({
+    isAuthenticated: state.isAuthenticated,
+    user: state.user,
+  });
+
+const mapDispatchToProps = {login,logout,};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PlayerGames);
+
+
+
+

src/admin/PlayerTournaments.js

@@ -0,0 +1,70 @@
+import './../lists/List.scss'
+// import DeleteGameButton from './DeleteGameButton';
+import { connect } from 'react-redux';
+import { login, logout } from '../User/store';
+import React, { useState } from "react";
+import {TournamentService} from "../services/TournamentService";
+function PlayerTournaments({ isAuthenticated, user, login, logout }) {
+
+    const [username, setUsername] = useState('');
+    const [gamesList, setGamesList] = useState([]);
+    const [message, setMessage] = useState('');
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        try {
+            const gl = await TournamentService.getForPlayer(username);
+            setGamesList(gl.data.data);
+        } catch (e) {
+            setMessage('There was a problem with fetching tournament data.');
+        }
+    };
+
+    return (
+        <div className="list">
+            <h1>Player Tournaments</h1>
+            <form onSubmit={handleSubmit}>
+                    <div className="form-group">
+                        <input
+                            type="text"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                            placeholder="Enter username"
+                            required
+                        />
+
+                    </div>
+
+
+                    <div className="form-group actions">
+                        <button type="submit" className="submit">Check player</button>
+                    </div>
+                </form>
+            <div className="menu-btns container-list">
+                <div className="item-list">
+                    {gamesList.map((game, index) => (
+                        <div key={index} className="menu-btns list-element btn">
+                            <button className="item-name color-primary-3 btn">{game.tournamentTitle}</button>
+                            {/* <DeleteGameButton gameId={index} /> */}
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <p>{message}</p>
+        </div>
+    );
+}
+
+const mapStateToProps = (state) => ({
+    isAuthenticated: state.isAuthenticated,
+    user: state.user,
+  });
+
+const mapDispatchToProps = {login,logout,};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PlayerTournaments);
+
+
+
+

src/admin/admin.scss

@@ -0,0 +1,19 @@
+.ban-container{
+    display: flex;
+    justify-content: space-around;
+    margin-top: 50px;
+
+    .ban-form{
+        flex-basis: 45%;
+
+        input{
+            width:100%;
+        }
+    }
+
+}
+@media only screen and (max-width: 650px) {
+    .ban-container{
+        flex-direction: column;
+    }
+}

src/index.js

@@ -17,6 +17,10 @@ import EditTournamentForm from "./forms/EditTournamentForm";
 import TournamentDetails from "./Tournaments/TournamentDetails";
 import ProfileView from "./User/ProfileView/ProfileView";
 import About from "./about.js";
+import Admin from "./admin/Admin";
+import PlayerBots from "./admin/PlayerBots";
+import PlayerGames from "./admin/PlayerGames";
+import PlayerTournaments from "./admin/PlayerTournaments";
 import Leaderboard from "./Tournaments/leaderboard.js";
 import TournamentsHelp from "./Tournaments/TournamentsHelp";
 import TournamentsLeaderboard from "./Tournaments/TournamentsLeaderboard";
@@ -93,6 +97,23 @@ const router = createBrowserRouter([
         path: "/leaderboard",
         element: <Leaderboard/>,
     },
+    {
+        path: "/admin",
+        element: <Admin/>,
+    },
+    {
+        path: "/admin/PlayerBots",
+        element: <PlayerBots/>,
+    },
+    {
+        path: "/admin/PlayerGames",
+        element: <PlayerGames/>,
+    },
+    {
+        path: "/admin/PlayerTournaments",
+        element: <PlayerTournaments/>,
+    },
+
 ]);
 
 const root = ReactDOM.createRoot(document.getElementById('root'));

src/services/AdminService.js

@@ -0,0 +1,18 @@
+import { Api } from './Api'
+export const AdminService = {
+
+    banPlayer: async function (id) {
+        try {
+            return await Api.put(`Administrative/banPlayer?playerId=${id}`);
+        } catch(e) {
+             return Api.processError(e)
+        }
+    },
+    unbanPlayer: async function (id) {
+        try {
+            return await Api.put(`Administrative/unbanPlayer?playerId=${id}`);
+        } catch(e) {
+             return Api.processError(e)
+        }
+    },
+}