Add ListLogs Panel module

Author: hodgef

src/components/Admin/Actions/ListLogs.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { LogResults, ListLogsPageProps } from "../interfaces";
+import { getAppHelper } from "../Utils";
+
+export const ListLogs: React.FC<ListLogsPageProps> = (props) => {
+    const { pageName = "", csrfToken = "" } = props;
+    const { setProps } = getAppHelper(pageName);
+    const [results, setResults] = React.useState<LogResults[]>([]);
+
+    const onSubmit = () => {
+        const data = {} as { logId: string };
+
+        Array.from(document.querySelectorAll("input")).forEach(input => {
+            const key = input.getAttribute("id") as string;
+            data[key] = input.value;
+        });
+
+        if (!data.logId) {
+            setProps({
+                ...props,
+                dialog: { className: "alert-danger", message: "You must provide a log id" }
+            });
+        }
+
+        fetch(`/admp/logs?logId=${data.logId}`, {
+            method: 'get',
+            headers: { "X-Apiker-Csrf": csrfToken }
+        })
+            .then(r => r.json().then(res => ({ status: r.status, body: res })))
+            .then(data => {
+                const { status, body = {} } = data;
+                const { entries = [] } = body;
+                const isSucessful = status === 200;
+
+                const message = isSucessful ? "Action performed successfully" : "Failure returned by the endpoint.";
+
+                setProps({
+                    ...props,
+                    dialog: { className: isSucessful ? "alert-primary" : "alert-danger", message }
+                });
+
+                setResults(entries);
+            })
+            .catch(error => {
+                setProps({
+                    ...props,
+                    dialog: { className: "alert-danger", message: error?.message }
+                });
+            })
+    };
+
+    return (
+        <div className="action-wrapper">
+            <form className="login-form" onSubmit={onSubmit}>
+                <input className="form-control form-control-lg mt-2" id="logId" type="text" placeholder="Log ID" />
+                <button className="btn btn-primary mt-2 action-btn" type="submit">Submit</button>
+            </form>
+            {(results && results.length) ? results.map((result) => (
+                <div className="results-container">
+                    <div className="results-item">
+                        <ul>
+                            {Object.keys(result).map((key) => (
+                                <li><span className="title">{key}</span> <span className="text" title={key === "time" ? new Date(result[key] as string).toLocaleString() : result[key]}>
+                                    {key === "time" ? new Date(result[key] as string).toLocaleString() : result[key]}
+                                </span></li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            )) : null}
+        </div>
+    );
+}

src/components/Admin/Admin.ts

@@ -1,7 +1,7 @@
 import { Handler, RequestParams } from "../Request";
 import { resRaw } from "../Response";
 import { apikerPagesStatic } from "../Static";
-import { bansEndpoint, loginEndpoint, searchBansEndpoint, sendEmailEndpoint, updateUserEndpoint } from "./Api";
+import { searchLogsEndpoint, bansEndpoint, loginEndpoint, searchBansEndpoint, sendEmailEndpoint, updateUserEndpoint } from "./Api";
 import { adminPanelPage } from "./Panel";
 import { adminCsrfCheckMiddleware, adminMiddleware } from "./middleware";
 
@@ -17,6 +17,7 @@ export const getAdminRoutes = () => ({
     "/admp/login": (params: RequestParams) => adminCsrfCheckMiddleware(params, loginEndpoint),
 
     // Check for admin logged in and CSRF
+    "/admp/logs": (params: RequestParams) => adminMiddleware(params, searchLogsEndpoint),
     "/admp/bans": (params: RequestParams) => adminMiddleware(params, bansEndpoint),
     "/admp/bans/:userId": (params: RequestParams) => adminMiddleware(params, searchBansEndpoint),
     "/admp/email": (params: RequestParams) => adminMiddleware(params, sendEmailEndpoint),

src/components/Admin/Api/index.ts

@@ -1,3 +1,4 @@
+export * from "./logsEndpoint";
 export * from "./bansEndpoint";
 export * from "./loginEndpoint";
 export * from "./sendEmailEndpoint";

src/components/Admin/Api/logsEndpoint.ts

@@ -0,0 +1,17 @@
+import { getLogEntries } from '../../Logging';
+import { Handler } from '../../Request';
+import { res, res_400 } from '../../Response';
+
+export const searchLogsEndpoint: Handler = async (params) => {
+  const { request } = params;
+  const url = new URL(request.url);
+  const search = new URLSearchParams(url.search);
+  const logId = search.get("logId") || "";
+
+  if(!logId){
+    return res_400();
+  }
+
+  const entries = await getLogEntries(logId, 100);
+  return res({ entries });
+}

src/components/Admin/Api/updateUserEndpoint.ts

@@ -44,12 +44,18 @@ export const updateUserEndpoint: Handler = async ({ state, body, request }) => {
   }
 
   /** Do not allow user update of admin, unless same user */
-  if(request.method === "PUT" || request.method === "DELETE"){
+  if(request.method === "PUT"){
     if(user?.email !== userEmail && user?.role === "admin"){
       return res_401();
     }
   }
 
+  if(request.method === "DELETE"){
+    if(user?.role === "admin"){
+      return res_401();
+    }
+  }
+
   let updatedFields: { email?: string } = {};
   if(request.method === "PUT"){
     const { email } = body?.updatedUser ? JSON.parse(body.updatedUser) : {} as User;

src/components/Admin/Panel.tsx

@@ -19,6 +19,7 @@ import { SearchBans } from "./Actions/SearchBans";
 import { SendEmail } from "./Actions/SendEmail";
 import { UpdateUser } from "./Actions/UpdateUser";
 import { DeleteUser } from "./Actions/DeleteUser";
+import { ListLogs } from "./Actions/ListLogs";
 
 export const adminPanelPage: Handler = async ({ state }) => {
     const pageName = "AdminPanelPage";
@@ -40,6 +41,7 @@ const actionsComponent = {
     banUser: BanUser,
     unbanUser: UnbanUser,
     searchBans: SearchBans,
+    listLogs: ListLogs,
     sendEmail: SendEmail,
     updateUser: UpdateUser,
     deleteUser: DeleteUser
@@ -52,6 +54,8 @@ export const AdminPanelPage: React.FC<AdminPanelPageProps> = (props) => {
 
     if(isAdminLoggedIn){
         actions = authActions;
+    } else {
+        actions = defaultActions;
     }
 
     const onDropdownItemClick = (action: Action) => {

src/components/Admin/constants.ts

@@ -22,6 +22,10 @@ export const authActions: Actions = [
         id: "searchBans",
         displayName: "Search Bans"
     },
+    {
+        id: "listLogs",
+        displayName: "List Logs"
+    },
     {
         id: "sendEmail",
         displayName: "Send Email"

src/components/Admin/interfaces.ts

@@ -50,6 +50,7 @@ export interface LoginPageProps extends AdminPanelPageProps {}
 export interface BanUserPageProps extends AdminPanelPageProps {}
 export interface UnbanUserPageProps extends AdminPanelPageProps {}
 export interface SearchBansPageProps extends AdminPanelPageProps {}
+export interface ListLogsPageProps extends AdminPanelPageProps {}
 export interface SendEmailPageProps extends AdminPanelPageProps {}
 export interface UpdateUserPageProps extends AdminPanelPageProps {}
 export interface DeleteUserPageProps extends AdminPanelPageProps {}