Initial commit of admin panel

UT4MasterServer.Web/package.json

@@ -12,8 +12,10 @@
   "dependencies": {
     "@types/crypto-js": "^4.1.1",
     "@types/vue-router": "^2.0.0",
+    "@vueform/multiselect": "^2.5.8",
     "crypto-js": "^4.1.1",
     "sass": "^1.57.1",
+    "ts-md5": "^1.3.1",
     "vue": "^3.2.45",
     "vue-recaptcha": "^2.0.3"
   },

UT4MasterServer.Web/src/components/CrudPage.vue

@@ -0,0 +1,58 @@
+<template>
+    <h1>{{ title }}</h1>
+
+    <transition mode="out-in" name="cross-fade">
+        <div v-if="adding && $slots.add">
+            <slot name="add" :cancel="cancelAdd" />
+        </div>
+        <div v-else>
+            <div class="header">
+                <div class="filters">
+                    <slot name="filters" />
+                </div>
+                <div class="action-buttons">
+                    <slot name="action-buttons" />
+                    <button v-if="$slots.add" class="btn btn-sm btn-primary" @click="adding = true;">Add</button>
+                </div>
+            </div>
+            <slot />
+        </div>
+    </transition>
+</template>
+
+<style lang="scss" scoped>
+.header {
+    width: 100%;
+    padding: 1rem 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .action-buttons {
+        justify-content: flex-end;
+
+        button {
+            margin-left: 0.5rem;
+        }
+    }
+}
+</style>
+
+<script lang="ts" setup>
+import { shallowRef } from 'vue';
+
+
+defineProps({
+    title: {
+        type: String,
+        required: true
+    }
+});
+
+const adding = shallowRef(false);
+
+function cancelAdd() {
+    adding.value = false;
+}
+
+</script>

UT4MasterServer.Web/src/components/Footer.vue

@@ -33,7 +33,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, shallowRef } from 'vue';
-import { ServerStore } from '../stores/server-store';
+import { ServerStore } from '@/stores/server-store';
 
 const pollTime = 30000;
 const timer = shallowRef<NodeJS.Timer | undefined>(undefined);

UT4MasterServer.Web/src/components/Header.vue

@@ -27,6 +27,14 @@
           <template v-else>
             <HeaderLink text="Stats" path="/Stats" />
           </template>
+          <li class="nav-item dropdown pull-right" v-if="AccountStore.isAdmin">
+            <a class="nav-link dropdown-toggle" href="#" role="button" aria-haspopup="true" aria-expanded="false"
+              @click.stop="showAdminDropdown = !showAdminDropdown">Admin</a>
+            <div class="dropdown-menu" :class="{ 'show': showAdminDropdown }">
+              <HeaderLink text="Accounts" path="/Admin/Accounts" dropdown />
+              <HeaderLink text="Trusted Servers" path="/Admin/TrustedServers" dropdown />
+            </div>
+          </li>
           <li class="nav-item dropdown pull-right" v-if="SessionStore.isAuthenticated">
             <a class="nav-link dropdown-toggle" href="#" role="button" aria-haspopup="true" aria-expanded="false"
               @click.stop="showProfileDropdown = !showProfileDropdown">Profile</a>
@@ -53,13 +61,12 @@
   justify-content: flex-end;
 
   .nav-link.router-link-active,
-  .navbar-nav .show > .nav-link {
+  .navbar-nav .show>.nav-link {
     color: var(--bs-navbar-active-color);
   }
 
   .nav-item.pull-right {
     margin-right: 0;
-    margin-left: 1rem;
   }
 
   .router-link-active {
@@ -85,12 +92,14 @@ import { onMounted, onUnmounted, shallowRef } from 'vue';
 import HeaderLink from './HeaderLink.vue';
 import { useRouter } from 'vue-router';
 import UserInfo from './UserInfo.vue';
-import AuthenticationService from '../services/authentication.service';
-import { SessionStore } from '../stores/session-store';
+import AuthenticationService from '@/services/authentication.service';
+import { SessionStore } from '@/stores/session-store';
+import { AccountStore } from '@/stores/account-store';
 
 const router = useRouter();
 const showProfileDropdown = shallowRef(false);
 const showInstructionsDropdown = shallowRef(false);
+const showAdminDropdown = shallowRef(false);
 const authenticationService = new AuthenticationService();
 const menuExpanded = shallowRef(false);
 
@@ -102,6 +111,7 @@ async function logOut() {
 function closeNav() {
   showProfileDropdown.value = false;
   showInstructionsDropdown.value = false;
+  showAdminDropdown.value = false;
 }
 
 onMounted(() => {

UT4MasterServer.Web/src/components/Hub.vue

@@ -37,7 +37,7 @@
 </style>
 
 <script setup lang="ts">
-import { IGameHub } from '../types/game-server';
+import { IGameHub } from '@/types/game-server';
 import { PropType } from 'vue';
 
 defineProps({

UT4MasterServer.Web/src/components/LoadingPanel.vue

@@ -41,13 +41,23 @@
 </style>
 
 <script setup lang="ts">
-import { PropType, ref, watch, onUnmounted } from 'vue';
-import { AsyncStatus } from '../types/async-status';
+import { PropType, ref, watch, onUnmounted, onMounted } from 'vue';
+import { AsyncStatus } from '@/types/async-status';
 
 const props = defineProps({
   status: Number as PropType<AsyncStatus>,
-  error: String
-})
+  error: String,
+  onLoad: {
+    type: Function,
+    default: undefined
+  },
+  autoLoad: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['load']);
 
 const asyncStatus = ref(props.status);
 
@@ -59,5 +69,11 @@ function dismissError() {
   asyncStatus.value = AsyncStatus.OK;
 }
 
+onMounted(() => {
+  if (props.autoLoad) {
+    emit('load');
+  }
+});
+
 onUnmounted(destroyWatch);
 </script>

UT4MasterServer.Web/src/components/Match.vue

@@ -43,9 +43,9 @@ div {
 </style>
 
 <script setup lang="ts">
-import { IGameServer } from '../types/game-server';
+import { IGameServer } from '@/types/game-server';
 import { PropType, shallowRef } from 'vue';
-import { AccountStore } from '../stores/account-store';
+import { AccountStore } from '@/stores/account-store';
 
 defineProps({
     match: {
@@ -61,8 +61,8 @@ function toggleShowPlayers() {
 }
 
 function getPlayerName(id: string) {
-    const player = AccountStore.accounts?.find((a) => a.id === id);
-    return player?.displayName;
+    const player = AccountStore.accounts?.find((a) => a.ID === id);
+    return player?.Username;
 }
 </script>
 

UT4MasterServer.Web/src/components/MatchList.vue

@@ -25,7 +25,7 @@ div {
 </style>
 
 <script setup lang="ts">
-import { IGameHub } from '../types/game-server';
+import { IGameHub } from '@/types/game-server';
 import { PropType } from 'vue';
 import Match from './Match.vue';
 

UT4MasterServer.Web/src/components/StatCard.vue

@@ -41,11 +41,11 @@
 </style>
 
 <script setup lang="ts">
-import { IStatisticCard } from '../types/statistic-config';
-import { IStatisticData } from '../types/statistic-data';
+import { IStatisticCard } from '@/types/statistic-config';
+import { IStatisticData } from '@/types/statistic-data';
 import { PropType } from 'vue';
-import { Statistic } from '../enums/statistic';
-import { StatisticDisplay } from '../enums/statistic-display';
+import { Statistic } from '@/enums/statistic';
+import { StatisticDisplay } from '@/enums/statistic-display';
 
 const props = defineProps({
     card: {
@@ -58,7 +58,7 @@ const props = defineProps({
     }
 });
 
-const imgIconUrl = new URL(`../assets/weapons/${props.card.headingIcon}`, import.meta.url).href;
+const imgIconUrl = new URL(`@/assets/weapons/${props.card.headingIcon}`, import.meta.url).href;
 
 function getAccuracy(): string {
     const shots = props.card.stats.find((s) => s.includes('Shots'));

UT4MasterServer.Web/src/components/StatSection.vue

@@ -16,8 +16,8 @@
 </style>
 
 <script setup lang="ts">
-import { IStatisticSection } from '../types/statistic-config';
-import { IStatisticData } from '../types/statistic-data';
+import { IStatisticSection } from '@/types/statistic-config';
+import { IStatisticData } from '@/types/statistic-data';
 import { PropType } from 'vue';
 import StatCard from './StatCard.vue';
 

UT4MasterServer.Web/src/components/UserInfo.vue

@@ -2,7 +2,7 @@
   <div class="navbar navbar-primary bg-light user-info">
     <div class="container">
       <div>
-        <label><RouterLink to="/Profile/PlayerCard">Username:</RouterLink></label> {{ AccountStore.account?.displayName ?? SessionStore.username }}
+        <label><RouterLink to="/Profile/PlayerCard">Username:</RouterLink></label> {{ AccountStore.account?.Username ?? SessionStore.username }}
       </div>
       <div>
         <LoadingPanel :status="status">
@@ -41,11 +41,11 @@
 
 <script setup lang="ts">
 import { shallowRef, onMounted } from 'vue';
-import AuthenticationService from '../services/authentication.service';
-import { AsyncStatus } from '../types/async-status';
+import AuthenticationService from '@/services/authentication.service';
+import { AsyncStatus } from '@/types/async-status';
 import LoadingPanel from './LoadingPanel.vue';
-import { AccountStore } from '../stores/account-store';
-import { SessionStore } from '../stores/session-store';
+import { AccountStore } from '@/stores/account-store';
+import { SessionStore } from '@/stores/session-store';
 import CopyButton from './CopyButton.vue';
 
 const service = new AuthenticationService();

UT4MasterServer.Web/src/enums/account-flag.ts

@@ -0,0 +1,8 @@
+export enum AccountFlag {
+    None = 'None',
+    Admin = 'Admin',
+    Moderator = 'Moderator',
+    Developer = 'Developer',
+    ContentCreator = 'ContentCreator',
+    HubOwner = 'HubOwner'
+}

UT4MasterServer.Web/src/enums/game-server-trust.ts

@@ -0,0 +1,5 @@
+export enum GameServerTrust {
+    Epic = 0,
+    Trusted = 1,
+    Untrusted = 2
+}