Merge pull request #19 from hack3r-0m/adminPortal

admin page added

backend/server.js

@@ -2,7 +2,7 @@ require("dotenv").config();
 const express = require("express");
 const cors = require("cors");
 const Web3 = require("web3");
-const MongoClient = require("mongodb").MongoClient;
+const { MongoClient, ObjectId } = require('mongodb');
 const { nanoid } = require("nanoid");
 const cookieParser = require("cookie-parser");
 const ERC721ABI = require("./config/erc721.json");
@@ -52,19 +52,18 @@ async function run() {
 run();
 
 var app = express();
+app.use(express.json());
 app.use(cookieParser());
+app.use(express.urlencoded({ extended: true }));
+
 const corsConfig = {
   credentials: true,
   origin: true,
 };
 app.use(cors(corsConfig));
-app.use(express.urlencoded({ extended: true }));
-app.use(express.json());
-
-app.use(express.static("admin-frontend"));
 
 app.get("/", async function (req, res) {
-  res.sendFile("index.html");
+  res.send("NFT Minter Admin API");
 });
 
 app.get("/nonce", async function (req, res) {
@@ -113,7 +112,8 @@ app.post("/authenticate", async function (req, res) {
       sameSite: true,
       httpOnly: false,
     });
-    res.sendStatus(200);
+    // res.sendStatus(200);
+    res.send(token);
   } catch (e) {
     console.log(e);
     res.sendStatus(400);
@@ -122,7 +122,7 @@ app.post("/authenticate", async function (req, res) {
 
 app.post("/logout", auth, async function (req, res) {
   try {
-    const result = await addresses.updateOne({ "address": req.cookies.address },
+    const result = await addresses.updateOne({ "address": req.headers.address },
       { $unset: { nonce: "", token: "", expires: "" } });
     res.clearCookie("address");
     res.clearCookie("token");
@@ -208,7 +208,7 @@ app.get("/all/:page(\\d+)", auth, async function (req, res) {
 app.post("/approve", auth, async function (req, res) {
   try {
     const { id } = req.body;
-    const item = await collection.findOne({ _id: id });
+    const item = await collection.findOne({ _id: ObjectId(id) });
     let status;
     if (item.type === "ERC721")
       status = await ERC721.methods
@@ -231,7 +231,7 @@ app.post("/decline", auth, async function (req, res) {
   try {
     const { id } = req.body;
     // unpin from IPFS
-    const result = await collection.deleteOne({ _id: id });
+    const result = await collection.deleteOne({ _id: ObjectId(id) });
     console.log(result);
     res.send(result);
   } catch (e) {
@@ -242,14 +242,14 @@ app.post("/decline", auth, async function (req, res) {
 
 async function auth(req, res, next) {
   const result = await addresses.findOne(
-    { address: req.cookies.address, token: req.cookies.token },
+    { address: req.headers.address, token: req.headers.token },
     { _id: 0 }
   );
   if (result === null) {
     res.sendStatus(401);
     return;
   } else if (result.expires < Date.now() || result.expires === undefined) {
-    res.status(401).send(await generate_nonce(req.cookies.address));
+    res.status(401).send(await generate_nonce(req.headers.address));
     return;
   }
   next();

client/components/Admin.jsx

@@ -0,0 +1,99 @@
+import React, { useState } from 'react'
+import axios from 'axios';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const Admin = ({ item, token, signerAddress }) => {
+  const [approved, setApproved] = useState(false);
+  const [declined, setDeclined] = useState(false);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const approve = async (e, _id) => {
+    try {
+      setLoading(true);
+      console.log("Approving id", _id)
+      const res = await axios.post("http://127.0.0.1:8080/approve", {
+        id: _id,
+        withCredentials: true,
+        credentials: "include",
+      }, {
+        headers: {
+          address: signerAddress,
+          token: token
+        }
+      });
+      console.log(res.data)
+      setApproved(true);
+      setLoading(false);
+    } catch (e) {
+      setLoading(false);
+      console.error(e);
+      setError('Something went wrong...');
+    }
+  }
+  const decline = async (e, _id) => {
+    try {
+      setLoading(true);
+      const res = await axios.post("http://127.0.0.1:8080/decline", {
+        id: _id,
+        withCredentials: true,
+        credentials: "include",
+      }, {
+        headers: {
+          address: signerAddress,
+          token: token
+        }
+      });
+      console.log(res.data)
+      setDeclined(true);
+      setLoading(false);
+    } catch (e) {
+      setLoading(false);
+      console.error(e);
+      setError('Something went wrong...');
+    }
+  }
+
+  if (loading) {
+    return (
+      <CircularProgress color="secondary" />
+    )
+  }
+  if (error) {
+    return (
+      <div style={{ width: 'max-content', border: '2px dashed black', margin: '5px 0' }}>
+        <p>{error}</p>
+      </div>
+    )
+  }
+  if (approved) {
+    return (
+      <div style={{ width: 'max-content', border: '2px dashed black', margin: '5px 0' }}>
+        <p>Approved Successfully!</p>
+      </div>
+    )
+  }
+
+  if (declined) {
+    return (
+      <div style={{ width: 'max-content', border: '2px dashed black', margin: '5px 0' }}>
+        <p>Declined Successfully!</p>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ width: 'max-content', border: '2px dashed black', margin: '5px 0' }}>
+      <p>ObjectId: {item._id}</p>
+      <p>Name: {item.name}</p>
+      <p>Description: {item.description}</p>
+      <p>Image URL: ${item.image}</p>
+      <p>External URL: ${item.externam_url}</p>
+      <p>Timestamp: ${item.timestamp}</p>
+      <button value={item._id} onClick={(e) => approve(e, item._id)}>Approve</button>
+      <button value={item._id} onClick={(e) => decline(e, item._id)}>Decline</button>
+    </div>
+  )
+}
+
+export default Admin;