API - CRUD for peers, interfaces and users (#340)

Public REST API implementation to handle peers, interfaces and users. It also includes some simple provisioning endpoints.

The Swagger API documentation is available under /api/v1/doc.html

frontend/src/App.vue

@@ -90,6 +90,7 @@ const currentYear = ref(new Date().getFullYear())
               href="#" role="button">{{ auth.User.Firstname }} {{ auth.User.Lastname }}</a>
             <div class="dropdown-menu">
               <RouterLink :to="{ name: 'profile' }" class="dropdown-item"><i class="fas fa-user"></i> {{ $t('menu.profile') }}</RouterLink>
+              <RouterLink :to="{ name: 'settings' }" class="dropdown-item" v-if="auth.IsAdmin || !settings.Setting('ApiAdminOnly')"><i class="fas fa-gears"></i> {{ $t('menu.settings') }}</RouterLink>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" href="#" @click.prevent="auth.Logout"><i class="fas fa-sign-out-alt"></i> {{ $t('menu.logout') }}</a>
             </div>

frontend/src/components/UserViewModal.vue

@@ -88,6 +88,10 @@ function close() {
                   <td>{{ $t('modals.user-view.department') }}:</td>
                   <td>{{selectedUser.Department}}</td>
                 </tr>
+                <tr>
+                  <td>{{ $t('modals.user-view.api-enabled') }}:</td>
+                  <td>{{selectedUser.ApiEnabled}}</td>
+                </tr>
                 <tr v-if="selectedUser.Disabled">
                   <td>{{ $t('modals.user-view.disabled') }}:</td>
                   <td>{{selectedUser.DisabledReason}}</td>

frontend/src/helpers/models.js

@@ -146,6 +146,8 @@ export function freshUser() {
     Locked: false,
     LockedReason: "",
 
+    ApiEnabled: false,
+
     PeerCount: 0
   }
 }

frontend/src/lang/translations/de.json

@@ -37,6 +37,7 @@
     "users": "Benutzer",
     "lang": "Sprache ändern",
     "profile": "Mein Profil",
+    "settings": "Einstellungen",
     "login": "Anmelden",
     "logout": "Abmelden"
   },
@@ -167,6 +168,26 @@
     "button-show-peer": "Show Peer",
     "button-edit-peer": "Edit Peer"
   },
+  "settings": {
+    "headline": "Einstellungen",
+    "abstract": "Hier finden Sie persönliche Einstellungen für WireGuard Portal.",
+    "api": {
+      "headline": "API Einstellungen",
+      "abstract": "Hier können Sie die  RESTful API verwalten.",
+      "active-description": "Die API ist derzeit für Ihr Benutzerkonto aktiv. Alle API-Anfragen werden mit Basic Auth authentifiziert. Verwenden Sie zur Authentifizierung die folgenden Anmeldeinformationen.",
+      "inactive-description": "Die API ist derzeit inaktiv. Klicken Sie auf die Schaltfläche unten, um sie zu aktivieren.",
+      "user-label": "API Benutzername:",
+      "user-placeholder": "API Benutzer",
+      "token-label": "API Passwort:",
+      "token-placeholder": "API Token",
+      "token-created-label": "API-Zugriff gewährt seit: ",
+      "button-disable-title": "Deaktivieren Sie die API. Dadurch wird der aktuelle Token ungültig.",
+      "button-disable-text": "API deaktivieren",
+      "button-enable-title": "Aktivieren Sie die API, dadurch wird ein neuer Token generiert.",
+      "button-enable-text": "API aktivieren",
+      "api-link": "API Dokumentation"
+    }
+  },
   "modals": {
     "user-view": {
       "headline": "User Account:",

frontend/src/lang/translations/en.json

@@ -37,6 +37,7 @@
     "users": "Users",
     "lang": "Toggle Language",
     "profile": "My Profile",
+    "settings": "Settings",
     "login": "Login",
     "logout": "Logout"
   },
@@ -167,6 +168,26 @@
     "button-show-peer": "Show Peer",
     "button-edit-peer": "Edit Peer"
   },
+  "settings": {
+    "headline": "Settings",
+    "abstract": "Here you can change your personal settings.",
+    "api": {
+      "headline": "API Settings",
+      "abstract": "Here you can configure the RESTful API settings.",
+      "active-description": "The API is currently active for your user account. All API requests are authenticated with Basic Auth. Use the following credentials for authentication.",
+      "inactive-description": "The API is currently inactive. Press the button below to activate it.",
+      "user-label": "API Username:",
+      "user-placeholder": "The API user",
+      "token-label": "API Password:",
+      "token-placeholder": "The API token",
+      "token-created-label": "API access granted at: ",
+      "button-disable-title": "Disable API, this will invalidate the current token.",
+      "button-disable-text": "Disable API",
+      "button-enable-title": "Enable API, this will generate a new token.",
+      "button-enable-text": "Enable API",
+      "api-link": "API Documentation"
+    }
+  },
   "modals": {
     "user-view": {
       "headline": "User Account:",
@@ -177,8 +198,9 @@
       "email": "E-Mail",
       "firstname": "Firstname",
       "lastname": "Lastname",
-      "phone": "Phone number",
+      "phone": "Phone Number",
       "department": "Department",
+      "api-enabled": "API Access",
       "disabled": "Account Disabled",
       "locked": "Account Locked",
       "no-peers": "User has no associated peers.",

frontend/src/router/index.js

@@ -47,6 +47,14 @@ const router = createRouter({
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/ProfileView.vue')
+    },
+    {
+      path: '/settings',
+      name: 'settings',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/SettingsView.vue')
     }
   ],
   linkActiveClass: "active",

frontend/src/stores/profile.js

@@ -116,6 +116,34 @@ export const profileStore = defineStore({
       this.stats = statsResponse.Stats
       this.statsEnabled = statsResponse.Enabled
     },
+    async enableApi() {
+      this.fetching = true
+      let currentUser = authStore().user.Identifier
+      return apiWrapper.post(`${baseUrl}/${base64_url_encode(currentUser)}/api/enable`)
+          .then(this.setUser)
+          .catch(error => {
+            this.setPeers([])
+            console.log("Failed to activate API for ", currentUser, ": ", error)
+            notify({
+              title: "Backend Connection Failure",
+              text: "Failed to activate API!",
+            })
+          })
+    },
+    async disableApi() {
+      this.fetching = true
+      let currentUser = authStore().user.Identifier
+      return apiWrapper.post(`${baseUrl}/${base64_url_encode(currentUser)}/api/disable`)
+          .then(this.setUser)
+          .catch(error => {
+            this.setPeers([])
+            console.log("Failed to deactivate API for ", currentUser, ": ", error)
+            notify({
+              title: "Backend Connection Failure",
+              text: "Failed to deactivate API!",
+            })
+          })
+    },
     async LoadPeers() {
       this.fetching = true
       let currentUser = authStore().user.Identifier

frontend/src/views/SettingsView.vue

@@ -0,0 +1,77 @@
+<script setup>
+import PeerViewModal from "../components/PeerViewModal.vue";
+
+import { onMounted, ref } from "vue";
+import { profileStore } from "@/stores/profile";
+import PeerEditModal from "@/components/PeerEditModal.vue";
+import { settingsStore } from "@/stores/settings";
+import { humanFileSize } from "@/helpers/utils";
+import {RouterLink} from "vue-router";
+import {authStore} from "../stores/auth";
+
+const profile = profileStore()
+const settings = settingsStore()
+const auth = authStore()
+
+onMounted(async () => {
+  await profile.LoadUser()
+})
+
+</script>
+
+<template>
+  <div class="page-header">
+    <h1>{{ $t('settings.headline') }}</h1>
+  </div>
+
+  <p class="lead">{{ $t('settings.abstract') }}</p>
+
+  <div v-if="auth.IsAdmin || !settings.Setting('ApiAdminOnly')">
+    <div class="bg-light p-5" v-if="profile.user.ApiToken">
+      <h2 class="display-7">{{ $t('settings.api.headline') }}</h2>
+      <p class="lead">{{ $t('settings.api.abstract') }}</p>
+      <hr class="my-4">
+      <p>{{ $t('settings.api.active-description') }}</p>
+      <div class="row">
+        <div class="col-6">
+          <div class="form-group">
+            <label class="form-label mt-4">{{ $t('settings.api.user-label') }}</label>
+            <input v-model="profile.user.Identifier" class="form-control" :placeholder="$t('settings.api.user-placeholder')" type="text" readonly>
+          </div>
+        </div>
+        <div class="col-6">
+          <div class="form-group">
+            <label class="form-label mt-4">{{ $t('settings.api.token-label') }}</label>
+            <input v-model="profile.user.ApiToken" class="form-control" :placeholder="$t('settings.api.token-placeholder')" type="text" readonly>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12">
+          <div class="form-group">
+            <p class="form-label mt-4">{{ $t('settings.api.token-created-label') }} {{profile.user.ApiTokenCreated}}</p>
+          </div>
+        </div>
+      </div>
+      <div class="row mt-5">
+        <div class="col-6">
+          <button class="input-group-text btn btn-primary" :title="$t('settings.api.button-disable-title')" @click.prevent="profile.disableApi()" :disabled="profile.isFetching">
+            <i class="fa-solid fa-minus-circle"></i> {{ $t('settings.api.button-disable-text') }}
+          </button>
+        </div>
+        <div class="col-6">
+          <a href="/api/v1/doc.html" target="_blank" :alt="$t('settings.api.api-link')">{{ $t('settings.api.api-link') }}</a>
+        </div>
+      </div>
+    </div>
+    <div class="bg-light p-5" v-else>
+      <h2 class="display-7">{{ $t('settings.api.headline') }}</h2>
+      <p class="lead">{{ $t('settings.api.abstract') }}</p>
+      <hr class="my-4">
+      <p>{{ $t('settings.api.inactive-description') }}</p>
+      <button class="input-group-text btn btn-primary" :title="$t('settings.api.button-enable-title')" @click.prevent="profile.enableApi()" :disabled="profile.isFetching">
+        <i class="fa-solid fa-plus-circle"></i> {{ $t('settings.api.button-enable-text') }}
+      </button>
+    </div>
+  </div>
+</template>