frontend: show buttons only when authorized

frontend/src/Utils.tsx

@@ -1,3 +1,6 @@
+// authUtils.ts
+import { jwtDecode } from 'jwt-decode';
+
 export function decodeURIComponent(component: string): string
 {
     return component.replace("+", " ");
@@ -6,4 +9,22 @@ export function decodeURIComponent(component: string): string
 export function encodeURIComponent(component: string): string
 {
     return component.replace(" ", "+");
-}
+}
+
+interface DecodedToken {
+    sub: string; // The subject of the token (usually the username or user ID)
+    // Add other fields based on your token structure
+}
+
+export const getCurrentUser = (): string | null => {
+    const token = localStorage.getItem('jwt'); // Or however you store the token
+    if (!token) return null;
+
+    try {
+        const decodedToken = jwtDecode<DecodedToken>(token);
+        return decodedToken.sub; // Assuming 'sub' contains the username
+    } catch (e) {
+        console.error('Failed to decode JWT:', e);
+        return null;
+    }
+};

frontend/src/scoreboard/info.tsx

@@ -17,13 +17,15 @@ import {faFlag, faStar, faSync, faTrash} from "@fortawesome/free-solid-svg-icons
 import TopPlayersGraph from '../user/graph'; // Adjusted import path
 import {ToastContainer} from 'react-toastify';
 import RegisterPopup from './registerPopup';
-import WorldFlags from 'react-world-flags'; // Import flag component if using a library
+import WorldFlags from 'react-world-flags';
+import {getCurrentUser} from "../Utils.tsx"; // Import flag component if using a library
 
 const ScoreboardInfo: React.FC = () => {
     const {scoreboardName} = useParams<{ scoreboardName: string }>();
     const [users, setUsers] = useState<User[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<Error | null>(null);
+    const [owner, setOwner] = useState<string | null>(null);
 
     if (!scoreboardName) {
         setError(new Error('Unknown category or challenge'));
@@ -40,6 +42,7 @@ const ScoreboardInfo: React.FC = () => {
             }));
 
             setUsers(initialUsers);
+            setOwner(scoreboardInfo.owner);
             setLoading(false);
 
             for (const user of initialUsers) {
@@ -176,6 +179,7 @@ const ScoreboardInfo: React.FC = () => {
     if (loading) return <div>Loading...</div>;
     if (error) return <div>Error: {error.message}</div>;
 
+    const currentUser = getCurrentUser();
     return (
         <div id="scoreboard-details-container">
             <div className="box-center">
@@ -185,9 +189,10 @@ const ScoreboardInfo: React.FC = () => {
                 </button>
             </div>
 
+            {currentUser && currentUser === owner && (
             <div className="box-center">
                 <RegisterPopup onRegister={handleRegisterUser} scoreboardName={scoreboardName}/>
-            </div>
+            </div>)}
             <ToastContainer
                 position="top-right"
                 autoClose={5000}
@@ -231,9 +236,10 @@ const ScoreboardInfo: React.FC = () => {
                                 </span>
                             </div>
                         </div>
+                        {currentUser && currentUser === owner && (
                         <button onClick={() => handleDeleteUser(user.username)} className="delete-button">
                             <FontAwesomeIcon icon={faTrash}/>
-                        </button>
+                        </button>)}
                     </li>
                 ))}
             </ol>

frontend/src/scoreboard/list.tsx

@@ -1,16 +1,17 @@
 // scoreboard/list.tsx
 import React from 'react';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import './list.css';
-import {deleteScoreboard} from '../api'; // Import the delete function
-import {Scoreboard} from "../api";
+import { deleteScoreboard } from '../api'; // Import the delete function
+import { Scoreboard } from "../api";
+import {getCurrentUser} from "../Utils.tsx"; // Assuming User is imported from api
 
 interface ScoreboardListProps {
     scoreboards: Scoreboard[];
     onScoreboardDeleted: (name: string) => void; // Callback to refresh the list after deletion
 }
 
-const ScoreboardList: React.FC<ScoreboardListProps> = ({scoreboards, onScoreboardDeleted}) => {
+const ScoreboardList: React.FC<ScoreboardListProps> = ({ scoreboards, onScoreboardDeleted}) => {
     const handleDelete = async (name: string) => {
         try {
             await deleteScoreboard(name);
@@ -20,6 +21,7 @@ const ScoreboardList: React.FC<ScoreboardListProps> = ({scoreboards, onScoreboar
         }
     };
 
+    const currentUser = getCurrentUser();
     return (
         <table className="scoreboard-table">
             <thead>
@@ -41,9 +43,11 @@ const ScoreboardList: React.FC<ScoreboardListProps> = ({scoreboards, onScoreboar
                     <td>{scoreboard.owner}</td>
                     <td>{scoreboard.users.length}</td>
                     <td>
-                        <button onClick={() => handleDelete(scoreboard.name)} className="delete-button">
-                            Delete
-                        </button>
+                        {currentUser && currentUser === scoreboard.owner && (
+                            <button onClick={() => handleDelete(scoreboard.name)} className="delete-button">
+                                Delete
+                            </button>
+                        )}
                     </td>
                 </tr>
             ))}