Add authentication requirement for puzzle and theme management routes

Author: Eric-Philippe

app/routes/puzzles.py

@@ -1,6 +1,7 @@
 from flask import jsonify, request, abort
 from .. import app, loader
 from ..utils.utils import get_puzzle_info
+from ..auth import login_required
 
 @app.route('/puzzles', methods=['GET'])
 def puzzles():
@@ -115,6 +116,7 @@ def run():
     return jsonify({'message': 'Theme or puzzle not found'})
 
 @app.route('/puzzle/upload', methods=['POST'])
+@login_required
 def upload_puzzle():
     """
     Upload puzzle
@@ -154,6 +156,7 @@ def upload_puzzle():
     return jsonify({'message': 'Puzzle uploaded'})
 
 @app.route('/puzzle', methods=['DELETE'])
+@login_required
 def delete_puzzle():
     """
     Delete puzzle

app/routes/themes.py

@@ -60,6 +60,7 @@ def theme():
 
 # Create theme
 @app.route('/theme', methods=['POST'])
+@login_required
 def create_theme():
     """
     Create a theme
@@ -82,6 +83,7 @@ def create_theme():
 
 # Delete theme
 @app.route('/theme', methods=['DELETE'])
+@login_required
 def delete_theme():
     """
     Delete a theme
@@ -105,6 +107,7 @@ def delete_theme():
     return jsonify({'message': 'Theme deleted'})
 
 @app.route('/theme/reload', methods=['POST'])
+@login_required
 def reload():
     """
     Reload the puzzles

frontend/src/components/FileUpload/FileUpload.tsx

@@ -13,6 +13,7 @@ import { Button } from "primereact/button";
 import { Tooltip } from "primereact/tooltip";
 import { Tag } from "primereact/tag";
 import "./FileUpload.css";
+import AuthService from "../../services/AuthService";
 
 interface FileUploadProps {
   theme: string;
@@ -89,9 +90,13 @@ export default function FileUploadComponent({
           }
           const fileFormData = new FormData();
           fileFormData.append("file", file, file.name);
+          const token = AuthService.getToken();
           return fetch(`/puzzle/upload?theme=${theme}`, {
             method: "POST",
             body: fileFormData,
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
           });
         })
       );
@@ -100,6 +105,9 @@ export default function FileUploadComponent({
 
       fetch("/theme/reload", {
         method: "POST",
+        headers: {
+          Authorization: `Bearer ${AuthService.getToken()}`,
+        },
       }).then((res) => {
         if (res.ok) {
           setRefresh(true);

frontend/src/pages/Home/Home.tsx

@@ -6,6 +6,7 @@ import { InputText } from "primereact/inputtext";
 import { Dialog } from "primereact/dialog";
 import { useEffect, useState } from "react";
 import { convertBytes } from "../../utils/utils";
+import AuthService from "../../services/AuthService";
 
 interface HomeProps {
   setSelectedMenu: (menu: string) => void;
@@ -43,8 +44,13 @@ export default function HomePage({ setSelectedMenu }: HomeProps) {
   };
 
   const handleDeleteTheme = (theme: Theme) => {
+    const token = AuthService.getToken();
     fetch(`/theme?name=${theme.name}`, {
       method: "DELETE",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
     }).then((res) => {
       if (res.ok) {
         setSuccessMsg("Theme deleted successfully");
@@ -61,9 +67,11 @@ export default function HomePage({ setSelectedMenu }: HomeProps) {
   };
 
   const handleCreateTheme = () => {
+    const token = AuthService.getToken();
     fetch(`/theme?name=${newThemeName}`, {
       method: "POST",
       headers: {
+        Authorization: `Bearer ${token}`,
         "Content-Type": "application/json",
       },
     }).then((res) => {

frontend/src/pages/Theme/Theme.tsx

@@ -7,6 +7,7 @@ import { convertBytes } from "../../utils/utils";
 import { Puzzle } from "../../types/Puzzle";
 import FileUploadComponent from "../../components/FileUpload/FileUpload";
 import { Toast } from "primereact/toast";
+import AuthService from "../../services/AuthService";
 
 interface ThemeProps {
   selectedMenu: string;
@@ -35,8 +36,13 @@ export default function ThemePage({ selectedMenu }: ThemeProps) {
   }, [selectedTheme, refreshTheme]);
 
   const handleDeletePuzzle = (puzzle: Puzzle) => {
+    const token = AuthService.getToken();
     fetch(`/puzzle?theme=${selectedTheme}&puzzle=${puzzle.name}`, {
       method: "DELETE",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json",
+      },
     }).then((res) => {
       if (res.ok) {
         setTheme((prevTheme) => {