From f77a00528e15af92620e9dc1d7ccdf4142bdb0db Mon Sep 17 00:00:00 2001
From: andrew <andrewcs149@gmail.com>
Date: Tue, 19 Sep 2023 15:02:15 -0700
Subject: [PATCH] Add admin insights page

---
 devblog/devblog/ClientApp/src/App.tsx         |  4 +-
 .../src/components/DeleteAccount.tsx          | 34 +++++----
 .../devblog/ClientApp/src/components/Nav.tsx  |  7 ++
 .../ClientApp/src/components/styles/Nav.css   | 13 +++-
 .../devblog/ClientApp/src/pages/AddPost.tsx   | 36 +++++-----
 .../devblog/ClientApp/src/pages/Insights.tsx  | 71 +++++++++++++++++++
 .../devblog/ClientApp/src/pages/SignOut.tsx   |  2 +-
 .../ClientApp/src/pages/styles/AddPost.css    | 42 ++++++-----
 .../ClientApp/src/pages/styles/Insights.css   | 21 ++++++
 .../devblog/Controllers/AccountsController.cs | 51 ++++++++++++-
 10 files changed, 225 insertions(+), 56 deletions(-)
 create mode 100644 devblog/devblog/ClientApp/src/pages/Insights.tsx
 create mode 100644 devblog/devblog/ClientApp/src/pages/styles/Insights.css

diff --git a/devblog/devblog/ClientApp/src/App.tsx b/devblog/devblog/ClientApp/src/App.tsx
index 1b2e69f5..ac18f8cc 100644
--- a/devblog/devblog/ClientApp/src/App.tsx
+++ b/devblog/devblog/ClientApp/src/App.tsx
@@ -7,8 +7,9 @@ import Home from './pages/Home';
 import SignIn from './pages/SignIn';
 import Posts from './pages/Posts';
 import SignUp from './pages/SignUp';
-import "./global.css";
 import About from './pages/About';
+import Insights from './pages/Insights';
+import "./global.css";
 
 const App = () => {
   return (
@@ -19,6 +20,7 @@ const App = () => {
         <Route path="/posts" element={<Posts />} />
         <Route path="/posts/create" element={<AddPost />} />
         <Route path="/about" element={<About />} />
+        <Route path="/insights" element={<Insights />} />
         <Route path="/signin" element={<SignIn />} />
         <Route path="/signup" element={<SignUp />} />
         <Route path="/signout" element={<SignOut />} />
diff --git a/devblog/devblog/ClientApp/src/components/DeleteAccount.tsx b/devblog/devblog/ClientApp/src/components/DeleteAccount.tsx
index 9daf84be..fc851877 100644
--- a/devblog/devblog/ClientApp/src/components/DeleteAccount.tsx
+++ b/devblog/devblog/ClientApp/src/components/DeleteAccount.tsx
@@ -11,21 +11,25 @@ const DeleteAccount = () => {
     }, []);
 
     const handleDelete = async () => {
-        await fetch(`api/accounts/${userName}`, {
-            method: "DELETE",
-            headers: {
-                "Content-Type": "application/json",
-                "Authorization": `Bearer ${localStorage.getItem("token")}`
-            }
-        }).then(async () => {
-            await fetch(`api/accounts/signout`, {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-            }).then(() => {
-                localStorage.clear();
-                window.location.reload();
-            });
-        })
+        const shouldDelete = window.confirm("Are you sure?");
+
+        if (shouldDelete) {
+            await fetch(`api/accounts/${userName}`, {
+                method: "DELETE",
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${localStorage.getItem("token")}`
+                }
+            }).then(async () => {
+                await fetch(`api/accounts/signout`, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                }).then(() => {
+                    localStorage.clear();
+                    window.location.reload();
+                });
+            })
+        }
     };
 
     return <>{loggedIn && <button onClick={handleDelete} > Delete Account</button >}</>
diff --git a/devblog/devblog/ClientApp/src/components/Nav.tsx b/devblog/devblog/ClientApp/src/components/Nav.tsx
index c3367353..21f99efd 100644
--- a/devblog/devblog/ClientApp/src/components/Nav.tsx
+++ b/devblog/devblog/ClientApp/src/components/Nav.tsx
@@ -3,6 +3,7 @@ import { Link, useLocation } from "react-router-dom";
 import SignOut from "../pages/SignOut";
 import { MdMenu } from "react-icons/md";
 import { IsLoggedIn } from "../components/AuthenticationService";
+import { GetIsAdmin } from "./AuthenticationService";
 import "./styles/Nav.css";
 
 const Nav = () => {
@@ -10,8 +11,11 @@ const Nav = () => {
     const [userName, setUsername] = useState("");
     const [isMenuClicked, setIsMenuClicked] = useState(false)
     const [display, setDisplay] = useState("none")
+    const [isAdmin, setIsAdmin] = useState(false);
     const location = useLocation();
 
+    useEffect(() => setIsAdmin(GetIsAdmin), []);
+
     const isActive = (path: string) => {
         return location.pathname === path ? "active" : "non-active";
     };
@@ -52,6 +56,7 @@ const Nav = () => {
                     <Link to="/" className={isActive("/")}>Home</Link>
                     <Link to="/posts" className={isActive("/posts")}>Posts</Link>
                     <Link to="/about" className={isActive("/about")}>About</Link>
+                    {isAdmin && <Link to="/insights" className={isActive("/insights")}>Insights</Link>}
 
                     {loggedIn ? (
                         <span className="accounts">
@@ -74,6 +79,8 @@ const Nav = () => {
                     <Link to="/" className={isActive("/")}>Home</Link>
                     <Link to="/posts" className={isActive("/posts")}>Posts</Link>
                     <Link to="/about" className={isActive("/about")}>About</Link>
+                    {isAdmin && <Link to="/insights" className={isActive("/insights")}>Insights</Link>}
+
                     {loggedIn && <SignOut />}
 
                     {!loggedIn &&
diff --git a/devblog/devblog/ClientApp/src/components/styles/Nav.css b/devblog/devblog/ClientApp/src/components/styles/Nav.css
index 5cb95b13..8d84b830 100644
--- a/devblog/devblog/ClientApp/src/components/styles/Nav.css
+++ b/devblog/devblog/ClientApp/src/components/styles/Nav.css
@@ -53,7 +53,8 @@ s .navbar .nav-items a.active {
 
 .nav-items>a:nth-child(1),
 .nav-items>a:nth-child(2),
-.nav-items>a:nth-child(3) {
+.nav-items>a:nth-child(3),
+.nav-items>a:nth-child(4) {
     margin-top: auto;
     margin-bottom: 5px;
 }
@@ -96,7 +97,10 @@ s .navbar .nav-items a.active {
     .mobile-nav-links form {
         text-decoration: none;
         padding-top: 5px;
-        /* border: 2px solid yellow; */
+    }
+
+    .mobile-nav-links>a:hover {
+        opacity: 1.0;
     }
 
     .mobile-nav-links a.active {
@@ -120,9 +124,12 @@ s .navbar .nav-items a.active {
         flex-direction: column;
     }
 
+    .logout-form {
+        width: fit-content;
+    }
+
     .logout {
         font-size: 16px;
-        margin-left: auto;
         padding: 0px;
     }
 }
\ No newline at end of file
diff --git a/devblog/devblog/ClientApp/src/pages/AddPost.tsx b/devblog/devblog/ClientApp/src/pages/AddPost.tsx
index 46d334e6..3483efc8 100644
--- a/devblog/devblog/ClientApp/src/pages/AddPost.tsx
+++ b/devblog/devblog/ClientApp/src/pages/AddPost.tsx
@@ -113,26 +113,28 @@ const AddPost = () => {
                         </div>
                     </div>
 
-                    <label>Image
-                        <input
-                            type="file"
-                            required
-                            multiple
-                            onChange={(e) => e.target.files && setFile(Array.from(e.target.files))} />
-                    </label>
+                    <div className="new-post-info">
+                        <label>Image
+                            <input
+                                type="file"
+                                required
+                                multiple
+                                onChange={(e) => e.target.files && setFile(Array.from(e.target.files))} />
+                        </label>
 
-                    <label>Description
-                        <p>Mastodon char count: {charCount}/500</p>
-                        <div className="addpost-description">
-                            <textarea onChange={(e) => setDescription(e.currentTarget.value)} />
-                        </div>
-                    </label>
+                        <label>Description
+                            <p>Mastodon character limit: {charCount}/500</p>
+                            <div className="addpost-description">
+                                <textarea placeholder="Write description here..." onChange={(e) => setDescription(e.currentTarget.value)} />
+                            </div>
+                        </label>
 
-                    <p>Preview:</p>
-                    <div className="post-preview">
-                        <ReactMarkdown children={description} />
+                        <p>Preview:</p>
+                        <div className="post-preview">
+                            <ReactMarkdown children={description} />
+                        </div>
+                        <button>Create Post</button>
                     </div>
-                    <button>Create Post</button>
                 </form>
             }
         </div >
diff --git a/devblog/devblog/ClientApp/src/pages/Insights.tsx b/devblog/devblog/ClientApp/src/pages/Insights.tsx
new file mode 100644
index 00000000..70599860
--- /dev/null
+++ b/devblog/devblog/ClientApp/src/pages/Insights.tsx
@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import "./styles/Insights.css";
+import { MdDelete as Trash } from "react-icons/md";
+
+interface IUserInfo {
+    userName: string,
+    email: string
+}
+
+const Insights = () => {
+    const [users, setUsers] = useState<IUserInfo[]>();
+
+    const getUsers = async () => {
+        await fetch("api/accounts/count", {
+            method: "GET",
+            headers: {
+                "Authorization": `Bearer ${localStorage.getItem("token")}`
+            }
+        }).then((res) => { return res.json(); })
+            .then((data) => {
+                setUsers(data);
+            });
+    }
+
+    const handleDeleteAccount = async (userName: string) => {
+        const shouldDelete = window.confirm(`Are you sure you would like to delete user ${userName}?`);
+
+        if (shouldDelete) {
+            await fetch(`api/accounts/admin/${userName}`, {
+                method: "DELETE",
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": `Bearer ${localStorage.getItem("token")}`
+                }
+            }).then(() => {
+                // users.filter((user) => user.userName !== userNameToRemove);
+                setUsers(users?.filter((user) => user.userName !== userName));
+            })
+                .catch((e) => console.log(`Error deleting account: ${e}`));
+        }
+    }
+
+    useEffect(() => { getUsers() }, []);
+
+    return (
+        <section className="insights">
+            <p>Total Users: {users?.length}</p>
+
+            <table className="user-table">
+                <thead>
+                    <tr>
+                        <th>Username</th>
+                        <th>Email</th>
+                        <th>Delete</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {users?.map((user, index) => (
+                        <tr key={index}>
+                            <td>{user.userName}</td>
+                            <td>{user.email}</td>
+                            <td><Trash className="delete-post-btn" onClick={() => handleDeleteAccount(user.userName)} /></td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </section>
+    )
+}
+
+export default Insights;
\ No newline at end of file
diff --git a/devblog/devblog/ClientApp/src/pages/SignOut.tsx b/devblog/devblog/ClientApp/src/pages/SignOut.tsx
index 76a485e3..3c3caac2 100644
--- a/devblog/devblog/ClientApp/src/pages/SignOut.tsx
+++ b/devblog/devblog/ClientApp/src/pages/SignOut.tsx
@@ -15,7 +15,7 @@ const SignOut = () => {
     };
 
     return (
-        <form onSubmit={handleSignOut}>
+        <form className="logout-form" onSubmit={handleSignOut}>
             <button className="logout">Logout</button>
         </form>
     );
diff --git a/devblog/devblog/ClientApp/src/pages/styles/AddPost.css b/devblog/devblog/ClientApp/src/pages/styles/AddPost.css
index 180aa644..f4a922b0 100644
--- a/devblog/devblog/ClientApp/src/pages/styles/AddPost.css
+++ b/devblog/devblog/ClientApp/src/pages/styles/AddPost.css
@@ -1,3 +1,20 @@
+.upload-platforms {
+    background-color: rgb(26, 32, 41);
+    border: .15em solid rgb(70, 68, 60);
+    border-radius: .5em;
+    margin-bottom: 40px;
+    padding: 10px 20px;
+}
+
+.upload-status>h4 p {
+    color: red;
+    margin-left: 30px;
+}
+
+.upload-platforms ul {
+    list-style: none;
+}
+
 .create-post {
     align-items: center;
     justify-content: center;
@@ -23,41 +40,34 @@ a {
     color: white;
 }
 
+.new-post-info {
+    background-color: rgb(26, 32, 41);
+    border: .15em solid rgb(70, 68, 60);
+    border-radius: .5em;
+    padding: 10px 20px;
+}
+
 .addpost-description {
     display: flex;
 }
 
 .addpost-description>textarea {
-    background-color: rgb(26, 32, 41);
+    /* background-color: rgb(26, 32, 41); */
     width: 100%;
     min-height: 100px;
     resize: none;
     outline: none;
     font-size: 17;
     border: none;
-    border-right: 2px solid rgb(70, 68, 60);
 }
 
 .post-preview {
     padding: 20px;
     margin-bottom: 20px;
     min-height: 100px;
-    background-color: rgb(26, 32, 41);
+    /* background-color: rgb(26, 32, 41); */
 }
 
 .create-post {
     font-family: 'Chivo Mono', monospace;
-}
-
-.upload-platforms {
-    margin-bottom: 40px;
-}
-
-.upload-status>h4 p {
-    color: red;
-    margin-left: 30px;
-}
-
-.upload-platforms ul {
-    list-style: none;
 }
\ No newline at end of file
diff --git a/devblog/devblog/ClientApp/src/pages/styles/Insights.css b/devblog/devblog/ClientApp/src/pages/styles/Insights.css
new file mode 100644
index 00000000..f3addff2
--- /dev/null
+++ b/devblog/devblog/ClientApp/src/pages/styles/Insights.css
@@ -0,0 +1,21 @@
+.insights {
+    font-family: 'Chivo Mono', monospace;
+    margin-top: 150px;
+}
+
+.insights>table {
+    border: .15em solid rgb(70, 68, 60);
+    border-radius: .5em;
+    width: 100%;
+}
+
+
+.insights>table th,
+.insights>table td {
+    padding: 15px;
+    text-align: left;
+}
+
+.insights>table>tbody tr:nth-child(odd) {
+    background-color: rgb(26, 32, 41);
+}
\ No newline at end of file
diff --git a/devblog/devblog/Controllers/AccountsController.cs b/devblog/devblog/Controllers/AccountsController.cs
index 9ae2d0d8..69951878 100644
--- a/devblog/devblog/Controllers/AccountsController.cs
+++ b/devblog/devblog/Controllers/AccountsController.cs
@@ -3,6 +3,7 @@
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Identity;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.EntityFrameworkCore;
 using Microsoft.IdentityModel.Tokens;
 using System.IdentityModel.Tokens.Jwt;
 using System.Security.Claims;
@@ -16,11 +17,8 @@ public class AccountsController : ControllerBase
     {
         public SignInManager<User> _signInMgr { get; }
         public UserManager<User> _userMgr { get; }
-
         public IConfiguration _config;
-
         private readonly IUsernameService _username;
-        //private readonly IEmailRepository _email;
 
         public AccountsController(SignInManager<User> signInMgr, UserManager<User> usermgr, IConfiguration config, IUsernameService username)
         {
@@ -30,6 +28,36 @@ public AccountsController(SignInManager<User> signInMgr, UserManager<User> userm
             _username = username;
         }
 
+        /// <summary>
+        /// Returns all user's usernames and emails
+        /// </summary>
+        /// <returns>List<UserInfo></returns>
+        [Authorize(Roles = "Admin")]
+        [HttpGet("count")]
+        public async Task<List<UserInfo>> GetUsersCount()
+        {
+            var users = await _userMgr.Users
+                .Select(u => new UserInfo
+                {
+                    UserName = u.UserName,
+                    Email = u.Email
+                })
+                .ToListAsync();
+
+            return users;
+        }
+
+        public class UserInfo
+        {
+            public string? UserName { get; set; }
+            public string? Email { get; set; }
+        }
+
+
+        /// <summary>
+        /// Delete an account
+        /// </summary>
+        /// <param name="username"></param>
         [Authorize(Roles = "Visitor")]
         [HttpDelete("{username}")]
         public async Task<IActionResult> DeleteAccount(string username)
@@ -48,6 +76,23 @@ public async Task<IActionResult> DeleteAccount(string username)
             return Redirect("/");
         }
 
+        [Authorize(Roles = "Admin")]
+        [HttpDelete("admin/{username}")]
+        public async Task AdminDeleteAccount(string username)
+        {
+            User user = _userMgr.Users.Where(x => x.NormalizedUserName == username).FirstOrDefault();
+
+            if(user != null)
+            {
+                await _userMgr.DeleteAsync(user);
+            }
+        }
+
+
+        /// <summary>
+        /// Signs in a user
+        /// </summary>
+        /// <param name="signIn"></param>
         [HttpPost("signin")]
         public async Task<IActionResult> SignIn(SignIn signIn)
         {