admin suspend button 👀

public/index.html

@@ -60,11 +60,6 @@
   </script>
 
 <script async>
-  let devtools = function(){};
-  devtools.toString = function() {
-    this.opened = true;
-  }
-
   console.log("%cIMPORTANT:", "background: red; color: yellow; font-size: x-large");
   console.log("%cPasting code is dangerous and could cause your account to be hacked.", "color: white; font-weight: bold;");
   console.log("%cPasting code is dangerous and could cause your account to be hacked.", "color: white; font-weight: bold;");

src/components/app/Popouts/Popouts.vue

@@ -35,6 +35,10 @@
         key="ace"
         v-if="popouts.allPopout.type === 'ADMIN_CSS_EDITOR'"
       />
+      <admin-manage-user
+        key="amu"
+        v-if="popouts.allPopout.type === 'ADMIN_MANAGE_USER'"
+      />
       <DeleteConfirm
         key="delete-confirm"
         v-if="popouts.allPopout.type === 'DELETE_CONFIRM'"
@@ -66,6 +70,7 @@ const ServerInvitePopout = () => import("./Popouts/ServerInvitePopout.vue");
 const ServerSettings = () =>
   import("./Popouts/ServerSettingsPanels/ServerSettings.vue");
 const AdminCssEditor = () => import("./Popouts/AdminEditorPopout");
+const AdminManageUser = () => import("./Popouts/adminManageUserPopout");
 const GenericPopout = () => import("./Popouts/GenericPopout");
 const DeleteConfirm = () => import("./Popouts/DeleteConfirm");
 
@@ -87,6 +92,7 @@ export default {
     ServerContext,
     AddFriend,
     AdminCssEditor,
+    AdminManageUser,
     DeleteConfirm
   },
   data() {

src/components/app/Popouts/Popouts/adminManageUserPopout.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="dark-background admin-editor-popout" @mousedown="backgroundClick">
+    <div class="inner">
+      <input
+        type="password"
+        autocomplete="new-password"
+        v-model="password"
+        placeholder="Confirm Password"
+      />
+      <div class="button" v-if="!confirmSuspend" @click="suspendUserButton">
+        Suspend User
+      </div>
+      <div class="button" v-else @click="suspendUserButton">Are you sure?</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import AdminService from "@/services/adminService";
+
+export default {
+  data() {
+    return {
+      confirmSuspend: false,
+      password: ""
+    };
+  },
+  methods: {
+    closeMenu() {
+      this.$store.dispatch("setAllPopout", {
+        show: false,
+        type: null,
+        uniqueID: null
+      });
+    },
+    backgroundClick(e) {
+      if (e.target.classList.contains("dark-background")) {
+        this.closeMenu();
+      }
+    },
+    async suspendUserButton() {
+      if (!this.confirmSuspend) {
+        this.confirmSuspend = true;
+        return;
+      }
+      await AdminService.suspendUser(
+        this.popoutDetails.uniqueID,
+        this.password
+      );
+    }
+  },
+  async mounted() {},
+  computed: {
+    popoutDetails() {
+      return this.$store.getters.popouts.allPopout;
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.dark-background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.541);
+  z-index: 111111;
+  display: flex;
+}
+.inner {
+  margin: auto;
+  // max-height: 460px;
+  // height: 100%;
+  // width: 500px;
+  padding: 50px;
+  display: flex;
+  flex-direction: column;
+  color: white;
+  box-shadow: 0px 0px 20px 5px #151515bd;
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 87, 153, 0.8) 0,
+    rgba(0, 118, 209, 0.8)
+  );
+  border-radius: 4px;
+  backdrop-filter: blur(5px);
+  overflow: hidden;
+  align-items: center;
+}
+.button {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  padding: 5px;
+  cursor: pointer;
+}
+input {
+  width: initial;
+}
+</style>

src/components/app/Tabs/AdminPanel.vue

@@ -8,7 +8,6 @@
 
 <script>
 import { bus } from "@/main";
-
 import UsersPanel from "./AdminPanel/UsersPanel";
 import OnlineUsersPanel from "./AdminPanel/OnlineUsersPanel";
 import ThemesPanel from "./AdminPanel/ThemesPanel";

src/components/app/Tabs/AdminPanel/UserTemplate.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="user" @click="openUserInformation">
+  <div class="user">
     <div
+      @click="openUserInformation"
       class="profile-picture"
       :style="{ backgroundImage: `url(${avatar})` }"
     ></div>
-    <div class="details">
+    <div class="details" @click="openManageUser">
       <div class="username-tag">
         {{ user.username }}<span class="tag">@{{ user.tag }}</span>
       </div>
@@ -35,7 +36,14 @@ export default {
   methods: {
     openUserInformation() {
       this.$store.dispatch("setUserInformationPopout", this.user.uniqueID);
-    }
+    },
+    openManageUser() {
+      this.$store.dispatch("setAllPopout", {
+        show: true,
+        type: "ADMIN_MANAGE_USER",
+        uniqueID: this.user.uniqueID
+      });
+    } 
   }
 };
 </script>

src/components/app/Tabs/AdminPanel/UsersPanel.vue

@@ -1,8 +1,19 @@
 <template>
   <div class="users-panel">
-    <div class="title">Recently Created Accounts</div>
+    <div class="title">Manage Accounts</div>
+    <input
+      class="search"
+      autocomplete="off"
+      type="text"
+      placeholder="Search for user:tag | user id"
+      @input="inputEvent"
+    />
     <div class="list">
-      <user-template v-for="user in users" :key="user.uniqueID" :user="user" />
+      <user-template
+        v-for="user in searchedUsers || users"
+        :key="user.uniqueID"
+        :user="user"
+      />
     </div>
   </div>
 </template>
@@ -15,14 +26,32 @@ export default {
   components: { UserTemplate },
   data() {
     return {
-      users: null
+      users: null,
+      searchedUsers: null
     };
   },
-  async mounted() {
-    const { ok, result } = await adminService.fetchRecentCreatedUsers();
-    if (ok) {
-      this.users = result.data;
+  methods: {
+    async recentUsers() {
+      const { ok, result } = await adminService.fetchRecentCreatedUsers();
+      if (ok) {
+        this.users = result.data;
+      }
+    },
+    async inputEvent(event) {
+      const value = event.target.value;
+      if (value.trim() == "") {
+        this.searchedUsers = null;
+        await this.recentUsers();
+        return;
+      }
+      const { ok, result } = await adminService.fetchSearchUsers(value);
+      if (ok) {
+        this.searchedUsers = result.data;
+      }
     }
+  },
+  async mounted() {
+    await this.recentUsers();
   }
 };
 </script>
@@ -45,4 +74,9 @@ export default {
 .list {
   overflow: auto;
 }
+.search {
+  width: initial;
+  margin: 0;
+  height: 10px;
+}
 </style>

src/services/adminService.js

@@ -4,6 +4,9 @@ export default {
   fetchRecentCreatedUsers() {
     return wrapper(instance().get(`admin/users/recent`));
   },
+  fetchSearchUsers(search) {
+    return wrapper(instance().get(`admin/users/search/${search}`));
+  },
   fetchOnlineUsers() {
     return wrapper(instance().get(`admin/users/online`));
   },
@@ -15,5 +18,10 @@ export default {
   },
   approveTheme(id) {
     return wrapper(instance().patch(`admin/themes/${id}/approve`));
+  },
+  suspendUser(uniqueID, password) {
+    return wrapper(
+      instance().delete(`admin/users/${uniqueID}`, { data: { password } })
+    );
   }
 };