added suspend reason

public/index.html

@@ -61,12 +61,12 @@
 
 <script async>
   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.", "background: black; color: white; font-weight: bold;");
-  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.", "background: black; color: white; font-weight: bold;");
-  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.", "background: black; color: white; font-weight: bold;");
-  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.", "background: black; color: white; font-weight: bold;");
-  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.", "background: black; color: white; font-weight: bold;");
-  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.", "background: black; color: white; font-weight: bold;");
 </script>
 
 </head>

src/components/app/Popouts/Popouts/AddServer.vue

@@ -180,9 +180,13 @@ export default {
       }
       event.target.classList.add("button-clicked");
 
-      const { ok, error, result } = await ServerService.getInviteDetail(
+      let code;
-        inviteCode
+      if (inviteCode.split("/").length >= 2) {
-      );
+        code = inviteCode.split("/").pop();
+      } else {
+        code = inviteCode;
+      }
+      const { ok, error, result } = await ServerService.getInviteDetail(code);
 
       if (!ok) {
         event.target.classList.remove("button-clicked");

src/components/app/Popouts/Popouts/ServerInvitePopout.vue

@@ -20,7 +20,8 @@
             :key="invite"
             class="invite"
           >
-            {{ invite }}
+            <span class="link">https://nertivia.tk/invites/</span>{{ invite }}
+            <div class="copy-button" @click="copy(invite)">Copy</div>
           </div>
         </div>
       </div>
@@ -71,6 +72,9 @@ export default {
       if (ok) {
         this.invites.push(result.data.invite_code);
       }
+    },
+    copy(invite) {
+      this.$clipboard("https://nertivia.tk/invites/" + invite);
     }
   },
   computed: {
@@ -154,4 +158,20 @@ export default {
   margin-right: 0;
   padding: 10px;
 }
+.link {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.copy-button {
+  display: flex;
+  margin: auto;
+  margin-right: 0;
+  flex-shrink: 0;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: 0.2s;
+}
+.copy-button:hover {
+  opacity: 1;
+}
 </style>

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

@@ -1,12 +1,16 @@
 <template>
   <div class="dark-background admin-editor-popout" @mousedown="backgroundClick">
     <div class="inner">
+      <div>{{ popoutDetails.user.username }}</div>
+      <div>{{ popoutDetails.user.email }}</div>
+      <div>{{ popoutDetails.user.ip }}</div>
       <input
         type="password"
         autocomplete="new-password"
         v-model="password"
         placeholder="Confirm Password"
       />
+      <textarea v-model="reason" placeholder="Suspend Reason"></textarea>
       <div class="button" v-if="!confirmSuspend" @click="suspendUserButton">
         Suspend User
       </div>
@@ -22,7 +26,8 @@ export default {
   data() {
     return {
       confirmSuspend: false,
-      password: ""
+      password: "",
+      reason: ""
     };
   },
   methods: {
@@ -43,10 +48,14 @@ export default {
         this.confirmSuspend = true;
         return;
       }
-      await AdminService.suspendUser(
+      const { ok } = await AdminService.suspendUser(
-        this.popoutDetails.uniqueID,
+        this.popoutDetails.user.uniqueID,
-        this.password
+        this.password,
+        this.reason
       );
+      if (ok) {
+        this.closeMenu();
+      }
     }
   },
   async mounted() {},

src/components/app/Popouts/Popouts/userInformationPopout.vue

@@ -97,7 +97,11 @@
               <div
                 class="about-item"
                 v-if="aboutMe"
-                :class="{ infoAboutMe: aboutItem.key === 'About me' }"
+                :class="{
+                  infoAboutMe:
+                    aboutItem.key === 'About me' ||
+                    aboutItem.key === 'Suspend Reason'
+                }"
               >
                 <div class="key">{{ aboutItem.key }}:</div>
                 <div

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

@@ -11,7 +11,9 @@
       </div>
       <div class="date" v-if="!presence">{{ date }}</div>
       <div class="presence" v-if="presence">{{ presence }}</div>
+      <div class="suspended" v-if="user.banned">Suspended</div>
     </div>
+
   </div>
 </template>
 
@@ -41,7 +43,7 @@ export default {
       this.$store.dispatch("setAllPopout", {
         show: true,
         type: "ADMIN_MANAGE_USER",
-        uniqueID: this.user.uniqueID
+        user: this.user
       });
     } 
   }
@@ -61,6 +63,12 @@ export default {
     background: rgba(0, 0, 0, 0.2);
   }
 }
+.suspended {
+  background: rgb(255, 45, 45);
+  border-radius: 4px;
+  padding: 3px;
+  display: flex;
+}
 .profile-picture {
   width: 40px;
   height: 40px;
@@ -72,6 +80,11 @@ export default {
   background-size: cover;
   background-repeat: no-repeat;
 }
+.details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
 .date {
   font-size: 14px;
   opacity: 0.6;

src/services/AuthenticationService.js

@@ -1,21 +1,26 @@
 import { instance, wrapper } from "./Api";
 
-const config = require('../config.js');
+const config = require("../config.js");
 
 let domain = "";
-if (config.serverURL) domain = config.serverURL+"/"
+if (config.serverURL) domain = config.serverURL + "/";
 
 export default {
   register(credentials) {
-    return wrapper(instance().post(domain+"user/register", credentials));
+    return wrapper(instance().post(domain + "user/register", credentials));
+  },
+  confirmEmail(email, code) {
+    return wrapper(
+      instance().post(domain + "user/register/confirm", { email, code })
+    );
   },
   login(credentials) {
-    return wrapper(instance().post(domain+"user/login", credentials));
+    return wrapper(instance().post(domain + "user/login", credentials));
   },
   logout() {
-    return wrapper(instance().delete(domain+"user/logout"));
+    return wrapper(instance().delete(domain + "user/logout"));
   },
   user() {
-    return wrapper(instance().get(domain+"user"));
+    return wrapper(instance().get(domain + "user"));
   }
 };

src/services/adminService.js

@@ -19,9 +19,11 @@ export default {
   approveTheme(id) {
     return wrapper(instance().patch(`admin/themes/${id}/approve`));
   },
-  suspendUser(uniqueID, password) {
+  suspendUser(uniqueID, password, reason) {
     return wrapper(
-      instance().delete(`admin/users/${uniqueID}`, { data: { password } })
+      instance().delete(`admin/users/${uniqueID}`, {
+        data: { password, reason }
+      })
     );
   }
 };

src/views/LoginPage.vue

@@ -12,7 +12,7 @@
             </div>
             <div class="info">Login to access Nertivia</div>
             <form
-              v-if="!showCaptcha"
+              v-if="currentPage === 0"
               action="#"
               @submit.prevent="submitForm"
               @keydown="keyDownEvent"
@@ -62,7 +62,7 @@
                 </button>
               </div>
             </form>
-            <div v-if="showCaptcha" class="captcha-box">
+            <div v-if="currentPage === 1" class="captcha-box">
               <div class="input captcha-input">
                 <div class="input-text">
                   Beep Boop
@@ -75,6 +75,23 @@
                 </div>
               </div>
             </div>
+            <div v-if="currentPage === 2" class="form">
+              <div class="input">
+                <div class="input-text">
+                  Check your email:
+                  <span v-if="confirm_code.alert" class="error"
+                    >- {{ confirm_code.alert }}</span
+                  >
+                </div>
+                <input
+                  @input="confirmCodeInput"
+                  v-model="confirm_code.value"
+                  type="text"
+                  placeholder="Code"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
           </div>
         </transition>
       </div>
@@ -96,10 +113,11 @@ export default {
     return {
       isElectron: window && window.process && window.process.type,
 
-      showCaptcha: false,
+      currentPage: 0,
       visible: true,
       email: { value: "", alert: "" },
       password: { value: "", alert: "" },
+      confirm_code: { value: "", alert: "" },
       reCaptcha: { alert: "" },
       otherError: "",
 
@@ -121,7 +139,7 @@ export default {
       this.login();
     },
     submitForm() {
-      this.showCaptcha = true;
+      this.currentPage = 1;
     },
     keyDownEvent(event) {
       if (event.keyCode === 13) {
@@ -155,7 +173,7 @@ export default {
           window.location.href = "/app";
         }, 1000);
       } else {
-        this.showCaptcha = false;
+        this.currentPage = 0;
         this.deactive = false;
         this.captchaToken = null;
         this.$refs.recaptcha.resetRecaptcha();
@@ -163,6 +181,10 @@ export default {
           this.otherError = "Can't connect to server.";
           return;
         }
+        if (error.response.data.code === "CONFIRM_EMAIL") {
+          this.currentPage = 2;
+          return;
+        }
         const errors = error.response.data.errors;
         for (let index in errors) {
           const message = errors[index].msg;
@@ -177,6 +199,29 @@ export default {
     },
     registerButton() {
       this.$router.push("/register");
+    },
+    async confirmCodeInput(event) {
+      const value = event.target.value;
+      if (value.length === 10) {
+        const { ok, result, error } = await AuthenticationService.confirmEmail(
+          this.email.value,
+          value
+        );
+        if (!ok) {
+          if (error.response === undefined) {
+            this.otherError = "Can't connect to server.";
+            return;
+          }
+          this.confirm_code.alert =
+            error.response.data.error || "Something went wrong.";
+        } else {
+          this.visible = false;
+          this.$store.dispatch("token", result.data.token);
+          setTimeout(() => {
+            window.location.href = "/app";
+          }, 1000);
+        }
+      }
     }
   }
 };
@@ -268,7 +313,8 @@ body {
   text-align: center;
   margin-bottom: 10px;
 }
-form {
+form,
+.form {
   display: flex;
   flex-direction: column;
   width: 100%;

src/views/RegisterPage.vue

@@ -14,7 +14,7 @@
               Welcome, new user! I Hope you enjoy Nertivia!
             </div>
             <form
-              v-if="!showCaptcha"
+              v-if="currentPage === 0"
               action="#"
               @submit.prevent="formSubmit"
               @keydown="keyDownEvent"
@@ -84,7 +84,7 @@
                 </button>
               </div>
             </form>
-            <div v-if="showCaptcha" class="captcha-box">
+            <div v-if="currentPage === 1" class="captcha-box">
               <div class="input captcha-input">
                 <div class="input-text">Beep Boop</div>
                 <div class="captcha">
@@ -92,6 +92,23 @@
                 </div>
               </div>
             </div>
+            <div v-if="currentPage === 2" class="form">
+              <div class="input">
+                <div class="input-text">
+                  Check your email:
+                  <span v-if="confirm_code.alert" class="error"
+                    >- {{ confirm_code.alert }}</span
+                  >
+                </div>
+                <input
+                  @input="confirmCodeInput"
+                  v-model="confirm_code.value"
+                  type="text"
+                  placeholder="Code"
+                  autocomplete="off"
+                />
+              </div>
+            </div>
           </div>
         </transition>
       </div>
@@ -113,8 +130,9 @@ export default {
     return {
       isElectron: window && window.process && window.process.type,
 
-      showCaptcha: false,
+      currentPage: 0,
       visible: true,
+      confirm_code: { value: "", alert: "" },
       email: { value: "", alert: "" },
       username: { value: "", alert: "" },
       password: { value: "", alert: "" },
@@ -137,7 +155,7 @@ export default {
       this.register();
     },
     formSubmit() {
-      this.showCaptcha = true;
+      this.currentPage = 1;
     },
     keyDownEvent(event) {
       if (event.keyCode === 13) {
@@ -151,20 +169,16 @@ export default {
       const username = this.username.value.trim();
       const password = this.password.value.trim();
 
-      const { ok, error, result } = await AuthenticationService.register({
+      const { ok, error } = await AuthenticationService.register({
         email,
         username,
         password,
         token: this.captchaToken
       });
       if (ok) {
-        this.visible = false;
+        this.currentPage = 2;
-        this.$store.dispatch("token", result.data.token);
-        setTimeout(() => {
-          window.location.href = "/app";
-        }, 1000);
       } else {
-        this.showCaptcha = false;
+        this.currentPage = 0;
         this.deactive = false;
         this.captchaToken = null;
         this.$refs.recaptcha.resetRecaptcha();
@@ -186,6 +200,29 @@ export default {
     },
     loginButton() {
       this.$router.push("/login");
+    },
+    async confirmCodeInput(event) {
+      const value = event.target.value;
+      if (value.length === 10) {
+        const { ok, result, error } = await AuthenticationService.confirmEmail(
+          this.email.value,
+          value
+        );
+        if (!ok) {
+          if (error.response === undefined) {
+            this.otherError = "Can't connect to server.";
+            return;
+          }
+          this.confirm_code.alert =
+            error.response.data.error || "Something went wrong.";
+        } else {
+          this.visible = false;
+          this.$store.dispatch("token", result.data.token);
+          setTimeout(() => {
+            window.location.href = "/app";
+          }, 1000);
+        }
+      }
     }
   }
 };
@@ -276,7 +313,7 @@ body {
   text-align: center;
   margin-bottom: 10px;
 }
-form {
+form, .form {
   display: flex;
   flex-direction: column;
   width: 100%;