public/admin/src/components/Configuration.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <h2>Configuration</h2>
+    <form @submit.prevent="saveConfig">
+      <div>
+        <label for="serverName">Server Name:</label>
+        <input type="text" id="serverName" v-model="config.serverName" required>
+      </div>
+      <div>
+        <label for="port">Port:</label>
+        <input type="number" id="port" v-model="config.port" required>
+      </div>
+      <div>
+        <label for="host">Host:</label>
+        <input type="text" id="host" v-model="config.host" required>
+      </div>
+      <button type="submit">Save</button>
+    </form>
+    <p v-if="message">{{ message }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      config: {
+        serverName: '',
+        port: 8080,
+        host: 'localhost'
+      },
+      message: ''
+    }
+  },
+  methods: {
+    async saveConfig() {
+      try {
+        const response = await fetch('/api/config', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(this.config)
+        })
+        if (response.ok) {
+          this.message = 'Configuration saved successfully'
+        } else {
+          this.message = 'Failed to save configuration'
+        }
+      } catch (err) {
+        this.message = 'Failed to save configuration'
+      }
+    }
+  }
+}
+</script>

public/admin/src/components/Login.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <h2>Login</h2>
+    <form @submit.prevent="login">
+      <div>
+        <label for="username">Username:</label>
+        <input type="text" id="username" v-model="username" required>
+      </div>
+      <div>
+        <label for="password">Password:</label>
+        <input type="password" id="password" v-model="password" required>
+      </div>
+      <button type="submit">Login</button>
+    </form>
+    <p v-if="error" class="error">{{ error }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      username: '',
+      password: '',
+      error: ''
+    }
+  },
+  methods: {
+    async login() {
+      try {
+        const response = await fetch('/api/login', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            username: this.username,
+            password: this.password
+          })
+        })
+        if (response.ok) {
+          this.$router.push('/status')
+        } else {
+          this.error = 'Invalid username or password'
+        }
+      } catch (err) {
+        this.error = 'Login failed'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.error {
+  color: red;
+}
+</style>

public/admin/src/components/ServerStatus.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <h2>Server Status</h2>
+    <p>Server is running</p>
+    <button @click="refreshStatus">Refresh Status</button>
+    <p v-if="status">{{ status }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      status: ''
+    }
+  },
+  methods: {
+    async refreshStatus() {
+      try {
+        const response = await fetch('/api/status')
+        if (response.ok) {
+          const data = await response.json()
+          this.status = data.status
+        } else {
+          this.status = 'Failed to fetch status'
+        }
+      } catch (err) {
+        this.status = 'Failed to fetch status'
+      }
+    }
+  }
+}
+</script>

public/admin/src/router/index.js

@@ -0,0 +1,31 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Login from '@/components/Login.vue'
+import ServerStatus from '@/components/ServerStatus.vue'
+import Configuration from '@/components/Configuration.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/login',
+      name: 'Login',
+      component: Login
+    },
+    {
+      path: '/status',
+      name: 'ServerStatus',
+      component: ServerStatus
+    },
+    {
+      path: '/config',
+      name: 'Configuration',
+      component: Configuration
+    },
+    {
+      path: '/',
+      redirect: '/login'
+    }
+  ]
+})