add: improved admin functions

front/src/pages/ChannelPage.tsx

@@ -42,6 +42,9 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
     }
 
     function purgeChannel() {
+        if (!window.confirm(`Are you sure you want to purge ${channel?.name}?`)) {
+            return;
+        }
         axios
             .post(`/api/channels/${name}/purge`, { token })
             .catch((err) => {
@@ -51,6 +54,9 @@ export default function ChannelPage({socket}: {socket: WebSocket}) {
     }
 
     function deleteChannel() {
+        if (!window.confirm(`Are you sure you want to delete ${channel?.name}?`)) {
+            return;
+        }
         axios
             .post(`/api/channels/${name}/delete`, { token })
             .then(() => {

front/src/pages/ChannelsPage.tsx

@@ -13,6 +13,9 @@ export default function ChannelsPage({socket}: {socket: WebSocket}) {
     const [user, setUser] = useState<User>();
 
     function deleteChannel(name: string) {
+        if (!window.confirm(`Are you sure you want to delete ${name}?`)) {
+            return;
+        }
         axios
             .post(`/api/channels/${name}/delete`, { token })
             .catch((err) => {

front/src/pages/UserPage.tsx

@@ -1,4 +1,4 @@
-import { Link, useParams } from "react-router-dom";
+import { Link, useParams, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { User, Messages } from "../types";
 import TopBar from "../components/TopBar";
@@ -8,16 +8,47 @@ import axios from "axios";
 import "../styles/UserPage.css";
 
 export default function UserPage({socket}: {socket: WebSocket}) {
+    const navigate = useNavigate();
     const { username } = useParams();
     const [pageUser, setPageUser] = useState<User>();
     const [messages, setMessages] = useState<Messages>();
     const [user, setUser] = useState<User>();
     const [noUser, setNoUser] = useState<boolean>(false);
+    const [token, setToken] = useState<string>("");
+
+    function deleteUser() {
+        if (!window.confirm(`Are you sure you want to delete ${pageUser?.username}?`)) {
+            return;
+        }
+        axios
+            .post(`/api/users/${pageUser?.username}/delete`, { token })
+            .then(() => {
+                navigate("/");
+            })
+            .catch((err) => {
+                console.error(err.response.data);
+            });
+    }
+
+    function deleteUserPfp() {
+        if (!window.confirm(`Are you sure you want to delete ${pageUser?.username}'s profile picture?`)) {
+            return;
+        }
+        axios
+            .post(`/api/users/${pageUser?.username}/deletepfp`, { token })
+            .then(() => {
+                window.location.reload();
+            })
+            .catch((err) => {
+                console.error(err.response.data);
+            });
+    }
 
     useEffect(() => {
         const localToken = localStorage.getItem("token");
 
         if (localToken) {
+            setToken(localToken);
             axios
                 .post("/api/auth/me", { token: localToken }).then((res) => {
                     setUser(res.data);
@@ -100,6 +131,16 @@ export default function UserPage({socket}: {socket: WebSocket}) {
                 {pageUser.id === user?.id && (
                     <Link to="/edit-profile">Edit profile</Link>
                 )}
+                {user?.admin == 1 && (
+                    <div>
+                        <button onClick={deleteUser}>    
+                            Delete user
+                        </button>
+                        <button onClick={deleteUserPfp}>
+                            Delete profile picture
+                        </button>
+                    </div>
+                )}
             </div>
             <div className="user-messages">
                 <h2>Last messages</h2>

front/src/pages/UsersPage.tsx

@@ -13,6 +13,9 @@ export default function UsersPage({socket}: {socket: WebSocket}) {
     const [thisUser, setThisUser] = useState<User>();
 
     function deleteUser(username: string) {
+        if (!window.confirm(`Are you sure you want to delete ${username}?`)) {
+            return;
+        }
         axios
             .post(`/api/users/${username}/delete`, { token })
             .catch((err) => {

front/src/styles/UserPage.css

@@ -13,6 +13,7 @@
     padding: 10px;
     display: flex;
     flex-direction: column;
+    align-items: start;
     background-color: #fff6fd;
 }