.gitlab-ci.yml

@@ -8,7 +8,7 @@ variables:
   ANSIBLE_PYTHON_INTERPRETER: auto_silent
   ANSIBLE_STDOUT_CALLBACK: debug
 
-docker-build-main:
+docker-build-master:
   # Official docker image.
   image: docker:latest
   stage: build
@@ -22,7 +22,7 @@ docker-build-main:
     - docker build --pull -t "$CI_REGISTRY_IMAGE" .
     - docker push "$CI_REGISTRY_IMAGE"
   only:
-    - main
+    - master
 
 docker-build:
   # Official docker image.
@@ -40,7 +40,7 @@ docker-build:
   except:
     - main
 
-deploy-main:
+deploy-master:
   #when: manual
   stage: deploy
   image:

Dockerfile

@@ -7,7 +7,6 @@ RUN npm run build
 
 # production stage
 FROM nginx:stable-alpine as production-stage
-COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
 COPY --from=build-stage /app/dist /usr/share/nginx/html
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

nginx/default.conf

@@ -1,46 +0,0 @@
-server {
-    listen       80;
-    listen  [::]:80;
-    server_name  localhost;
-
-    #charset koi8-r;
-    #access_log  /var/log/nginx/host.access.log  main;
-
-    location / {
-        root   /usr/share/nginx/html;
-        index  index.html index.htm;
-        try_files $uri $uri/ /index.html;
-    }
-
-    #error_page  404              /404.html;
-
-    # redirect server error pages to the static page /50x.html
-    #
-    error_page   500 502 503 504  /50x.html;
-    location = /50x.html {
-        root   /usr/share/nginx/html;
-    }
-
-    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
-    #
-    #location ~ \.php$ {
-    #    proxy_pass   http://127.0.0.1;
-    #}
-
-    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
-    #
-    #location ~ \.php$ {
-    #    root           html;
-    #    fastcgi_pass   127.0.0.1:9000;
-    #    fastcgi_index  index.php;
-    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
-    #    include        fastcgi_params;
-    #}
-
-    # deny access to .htaccess files, if Apache's document root
-    # concurs with nginx's one
-    #
-    #location ~ /\.ht {
-    #    deny  all;
-    #}
-}

package-lock.json

@@ -7,7 +7,6 @@
     "": {
       "version": "0.0.0",
       "dependencies": {
-        "@vueuse/core": "^4.7.0",
         "idb-keyval": "^5.0.4",
         "vue": "^3.0.5",
         "vue-router": "^4.0.5"
@@ -215,73 +214,6 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.11.tgz",
       "integrity": "sha512-b+zB8A2so8eCE0JsxjL24J7vdGl8rzPQ09hZNhystm+KqSbKcAej1A+Hbva1rCMmTTqA+hFnUSDc5kouEo0JzA=="
     },
-    "node_modules/@vueuse/core": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-4.7.0.tgz",
-      "integrity": "sha512-0Kmo+Gqn47aCg6HHFUvXabD/T5haWyC5pk2PEzaGay9dGE7D+sc05Y1h2MylzcFzRX/2G4anOxSuDqmvQ/GunQ==",
-      "dependencies": {
-        "@vueuse/shared": "4.7.0",
-        "vue-demi": "latest"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.7.4.tgz",
-      "integrity": "sha512-PT0qzI9Rp8R8eUAsTPXADC+KAZdrMufmbZqEMMqvaiesWyjCpgyuuvS5Su8cvBjK9RevLT/YfFiKWxc8YB9/8g==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-beta.1",
-        "vue": "^2.6.0 || >=3.0.0-rc.1"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@vueuse/shared": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-4.7.0.tgz",
-      "integrity": "sha512-a9wmH6g+dh6ALeOejIL53s1HkASyOldbHunwEUEtRdgQyUCnU+RRiYTZlNLEyt1r79kPtnBjp5fHq0X36H96MA==",
-      "dependencies": {
-        "vue-demi": "latest"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.7.4.tgz",
-      "integrity": "sha512-PT0qzI9Rp8R8eUAsTPXADC+KAZdrMufmbZqEMMqvaiesWyjCpgyuuvS5Su8cvBjK9RevLT/YfFiKWxc8YB9/8g==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-beta.1",
-        "vue": "^2.6.0 || >=3.0.0-rc.1"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@@ -2405,39 +2337,6 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.11.tgz",
       "integrity": "sha512-b+zB8A2so8eCE0JsxjL24J7vdGl8rzPQ09hZNhystm+KqSbKcAej1A+Hbva1rCMmTTqA+hFnUSDc5kouEo0JzA=="
     },
-    "@vueuse/core": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-4.7.0.tgz",
-      "integrity": "sha512-0Kmo+Gqn47aCg6HHFUvXabD/T5haWyC5pk2PEzaGay9dGE7D+sc05Y1h2MylzcFzRX/2G4anOxSuDqmvQ/GunQ==",
-      "requires": {
-        "@vueuse/shared": "4.7.0",
-        "vue-demi": "latest"
-      },
-      "dependencies": {
-        "vue-demi": {
-          "version": "0.7.4",
-          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.7.4.tgz",
-          "integrity": "sha512-PT0qzI9Rp8R8eUAsTPXADC+KAZdrMufmbZqEMMqvaiesWyjCpgyuuvS5Su8cvBjK9RevLT/YfFiKWxc8YB9/8g==",
-          "requires": {}
-        }
-      }
-    },
-    "@vueuse/shared": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-4.7.0.tgz",
-      "integrity": "sha512-a9wmH6g+dh6ALeOejIL53s1HkASyOldbHunwEUEtRdgQyUCnU+RRiYTZlNLEyt1r79kPtnBjp5fHq0X36H96MA==",
-      "requires": {
-        "vue-demi": "latest"
-      },
-      "dependencies": {
-        "vue-demi": {
-          "version": "0.7.4",
-          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.7.4.tgz",
-          "integrity": "sha512-PT0qzI9Rp8R8eUAsTPXADC+KAZdrMufmbZqEMMqvaiesWyjCpgyuuvS5Su8cvBjK9RevLT/YfFiKWxc8YB9/8g==",
-          "requires": {}
-        }
-      }
-    },
     "acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",

package.json

@@ -8,7 +8,6 @@
     "format": "npx prettier --write ."
   },
   "dependencies": {
-    "@vueuse/core": "^4.7.0",
     "idb-keyval": "^5.0.4",
     "vue": "^3.0.5",
     "vue-router": "^4.0.5"

src/api/index.ts

@@ -3,9 +3,7 @@ import {
   AccessPointCreateResponse,
   cSite,
   LoginResponse,
-  RegisterAccessPointResponse,
   Site,
-  StateOfTask,
   token,
 } from "./types";
 import { get as idbGet, set as idbSet, del as idbDel } from "idb-keyval";
@@ -107,10 +105,6 @@ export async function getSites(): Promise<Site[]> {
   return request<Site[]>("/sites", { auth: true, method: HTTPMethod.GET });
 }
 
-export async function getSite(id: number): Promise<Site> {
-  return request<Site>(`/sites/${id}`, { auth: true, method: HTTPMethod.GET });
-}
-
 export async function createSite(site: Site) {
   return request<cSite>(
     "/sites",
@@ -140,38 +134,8 @@ export async function createAccessPoint(
   ap: AccessPoint
 ): Promise<AccessPointCreateResponse> {
   return request<AccessPointCreateResponse>(
-    `/aps${ap.id ? "/" + ap.id : ""}`,
+    "/aps",
-    { auth: true, method: ap.id ? HTTPMethod.PATCH : HTTPMethod.POST },
+    { auth: true, method: HTTPMethod.POST },
-    Object.fromEntries(
+    ap
-      Object.entries(ap).filter(([k, v]) =>
-        [
-          "ap_name",
-          "site_id",
-          "mac_address",
-          "serialnumber",
-          "location",
-          "model",
-          "group",
-          "appointment",
-          "comment",
-        ].includes(k)
-      )
-    )
   );
 }
-
-export async function registerAccessPoint(
-  apName: string
-): Promise<RegisterAccessPointResponse> {
-  return request<RegisterAccessPointResponse>(
-    `/${import.meta.env.DEV ? "test" : "register-ap"}/${apName}`,
-    { auth: true, method: HTTPMethod.POST }
-  );
-}
-
-export async function getStateOfTask(id: string): Promise<StateOfTask> {
-  return request<StateOfTask>(`/tasks/${id}`, {
-    auth: true,
-    method: HTTPMethod.GET,
-  });
-}

src/api/types.ts

@@ -21,8 +21,8 @@ export interface cSite {
 }
 
 export interface AccessPoint {
-  id?: number;
+  id: number;
-  site_id?: number;
+  site_id: number;
   ap_name: string;
   serialnumber: string;
   comment: string;
@@ -30,7 +30,7 @@ export interface AccessPoint {
   location: string;
   mac_address: string;
   model: string;
-  appointment?: Date;
+  appointment: Date;
   new_switchport_id?: any;
   new_userport_id?: any;
   old_switchport_id?: any;
@@ -42,23 +42,3 @@ export interface AccessPoint {
 export interface AccessPointCreateResponse {
   "ap-id": number;
 }
-
-export interface RegisterAccessPointResponse {
-  status: string;
-  "task-id": string;
-}
-
-export interface StateOfTask {
-  state: string;
-  current: string;
-  total: number;
-  status: string;
-  result?: TaskResult;
-}
-
-export interface TaskResult {
-  switchportid: number;
-  switchportid_new: number;
-  userportid: number;
-  userportid_new: number;
-}

src/components/VNav.vue

@@ -150,14 +150,6 @@ export default {
         name: "AccessPoints",
         to: "AccessPoints",
       },
-      {
-        name: "Create AccessPoint",
-        to: "CreateAccessPoint",
-      },
-      {
-        name: "Register AccessPoint",
-        to: "RegisterAccessPoint",
-      },
     ]);
     const route = useRoute();
     const activeRoute = computed(() => route.name);

src/components/VTaskState.vue

@@ -1,70 +0,0 @@
-<template>
-  <div
-    class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg text-left"
-  >
-    <span class="block w-full">{{ apName }}</span>
-    <div v-if="state.result === undefined">
-      <span class="block w-full">{{ state.state }}</span>
-      <progress
-        class="block w-full"
-        :max="state.total"
-        :value="state.current"
-      ></progress>
-      <span class="block w-full">{{ state.status }}</span>
-    </div>
-    <div v-else class="w-full flex">
-      <span class="flex-1 mr-2"
-        >SwitchPortID {{ state.result.switchportid }}</span
-      >
-      <span class="flex-1 mr-2"
-        >New SwitchPortID {{ state.result.switchportid_new }}</span
-      >
-      <span class="flex-1 mr-2">UserPortID {{ state.result.userportid }}</span>
-      <span class="flex-1 mr-2"
-        >SwitchPortID {{ state.result.userportid_new }}</span
-      >
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs } from "vue";
-import { useIntervalFn } from "@vueuse/core";
-import { getStateOfTask, StateOfTask } from "../api";
-
-export default {
-  name: "VTaskState",
-  emits: ["finished"],
-  props: {
-    taskID: {
-      type: String,
-      required: true,
-    },
-    apName: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props: { taskID: string }) {
-    const { taskID } = toRefs(props);
-
-    const state = reactive<StateOfTask>({
-      state: "",
-      current: "",
-      total: undefined,
-      result: undefined,
-      status: null,
-    });
-
-    const { pause, resume } = useIntervalFn(async () => {
-      const s = await getStateOfTask(taskID.value);
-      Object.assign(state, s);
-      if (s.result !== undefined) pause();
-    }, 300);
-
-    return { state };
-  },
-};
-</script>
-
-<style scoped></style>

src/router/index.ts

@@ -4,8 +4,6 @@ const Settings = () => import("../views/Settings.vue");
 const Login = () => import("../views/Login.vue");
 const Sites = () => import("../views/Sites.vue");
 const AccessPoints = () => import("../views/AccessPoints.vue");
-const CreateAccessPoint = () => import("../views/CreateAccessPoint.vue");
-const RegisterAccessPoint = () => import("../views/RegisterAccessPoint.vue");
 import { isLoggedIn } from "../api";
 
 const routes: RouteRecordRaw[] = [
@@ -34,28 +32,7 @@ const routes: RouteRecordRaw[] = [
     path: "/aps",
     name: "AccessPoints",
     component: AccessPoints,
-    props: (route) => ({ siteID: Number(route.query["site-id"]).valueOf() }),
+    props: (route) => ({ site: Number(route.query["site-id"]).valueOf() }),
-  },
-  {
-    path: "/createAccessPoint",
-    name: "CreateAccessPoint",
-    component: CreateAccessPoint,
-    props: (route) => ({ siteID: Number(route.query["site-id"]).valueOf() }),
-  },
-  {
-    path: "/editAccessPoint",
-    name: "EditAccessPoint",
-    component: CreateAccessPoint,
-    props: (route) => ({
-      apID: Number(route.query["ap-id"]).valueOf(),
-      edit: true,
-    }),
-  },
-  {
-    path: "/registerAccessPoint",
-    name: "RegisterAccessPoint",
-    component: RegisterAccessPoint,
-    props: (route) => ({ apID: Number(route.query["ap-id"]).valueOf() }),
   },
 ];
 

src/views/AccessPoints.vue

@@ -26,18 +26,11 @@
           <td class="border px-8 py-4">{{ ap.model }}</td>
           <td class="border px-8 py-4">{{ ap.comment }}</td>
           <td>
-            <router-link
+            <!--router-link
-              :to="{ name: 'EditAccessPoint', query: { 'ap-id': ap.id } }"
+            :to="{ name: 'AccessPoints', query: { 'site-id': site.id } }"
-              class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
+            class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
-              >Edit</router-link
+          >Show APs</router-link
-            >
+          --></td>
-            <router-link
-              v-if="ap.registered_user_id == null"
-              :to="{ name: 'RegisterAccessPoint', query: { 'ap-id': ap.id } }"
-              class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
-              >Register</router-link
-            >
-          </td>
         </tr>
       </tbody>
     </table>
@@ -45,28 +38,24 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs } from "vue";
+import { ref, toRefs } from "vue";
 import { getAccessPointDetails, AccessPoint } from "../api";
 
 export default {
   name: "AccessPoints",
   props: {
-    siteID: {
+    site: {
       type: Number,
       required: false,
     },
   },
-  async setup(props: { siteID?: number }) {
+  async setup(props: { site?: number }) {
-    const { siteID } = toRefs(props);
+    const { site } = toRefs(props);
-    const aps = reactive<AccessPoint[]>([]);
+    const aps = ref<AccessPoint[]>([]);
     async function getAccessPoints() {
-      try {
+      await getAccessPointDetails(site?.value).then(
-        await getAccessPointDetails(siteID?.value).then(
+        (a) => void (aps.value = a)
-          (a) => void Object.assign(aps, a)
+      );
-        );
-      } catch (e) {
-        console.error(e);
-      }
     }
     await getAccessPoints();
 

src/views/CreateAccessPoint.vue

@@ -1,189 +0,0 @@
-<template>
-  <div class="sm:w-3/4 md:w-1/3 w-full dark:text-white">
-    <h1 class="font-hairline mb-6 text-center">
-      {{ isEdit ? "Edit" : "Create" }} Access Point
-    </h1>
-    <form
-      class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg"
-      @submit.prevent="createAccessPoint"
-    >
-      <div class="mb-4">
-        <label class="font-bold text-gray-800 block mb-2"
-          >AccessPoint Name aruba-ap-<input
-            type="text"
-            class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
-            v-model.trim="ap.ap_name"
-            placeholder="c01"
-          />
-        </label>
-      </div>
-      <div class="mb-4">
-        <label class="font-bold text-gray-800 block mb-2"
-          >MAC
-          <input
-            type="text"
-            class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
-            v-model.trim="ap.mac_address"
-            placeholder="a1b2c3d4e5f6"
-          />
-        </label>
-      </div>
-      <div class="mb-4">
-        <label class="font-bold text-gray-800 block mb-2"
-          >S/N
-          <input
-            type="text"
-            class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
-            v-model.trim="ap.serialnumber"
-            placeholder="12345678"
-          />
-        </label>
-      </div>
-      <div class="mb-4">
-        <label class="font-bold text-gray-800 block mb-2"
-          >Location
-          <input
-            type="text"
-            class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
-            v-model.trim="ap.location"
-            placeholder="02-02-02"
-          />
-        </label>
-      </div>
-      <div class="mb-4">
-        <label class="font-bold text-gray-800 block mb-2"
-          >Model
-          <input
-            type="text"
-            class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
-            v-model.trim="ap.model"
-            placeholder="ap-205h"
-          />
-        </label>
-      </div>
-      <div class="mb-4">
-        <label class="font-bold text-gray-800 block mb-2"
-          >Appointment
-          <input
-            type="text"
-            disabled
-            class="text-gray-800 block appearance-none w-full bg-white border border-gray-300 px-2 py-2 rounded shadow"
-            v-model.trim="ap.appointment"
-            placeholder=""
-          />
-        </label>
-      </div>
-      <div class="mb-4">
-        <label class="font-bold text-gray-800 block mb-2"
-          >Comment
-          <input
-            type="text"
-            class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
-            v-model.trim="ap.comment"
-            placeholder=""
-          />
-        </label>
-      </div>
-
-      <div class="flex items-center justify-between">
-        <button
-          class="bg-green-600 hover:bg-green-400 text-white font-bold py-2 px-4 rounded"
-          type="submit"
-        >
-          {{ isEdit ? "Edit" : "Create" }}!
-        </button>
-      </div>
-    </form>
-  </div>
-</template>
-
-<script lang="ts">
-import { ref, toRefs, reactive } from "vue";
-import {
-  AccessPoint,
-  getAccessPointByID,
-  Site,
-  getSite as apiGetSite,
-  getSites as apiGetSites,
-  createAccessPoint as apiCreateAccessPoint,
-} from "../api";
-import AccessPoints from "./AccessPoints.vue";
-import router from "../router";
-
-export default {
-  name: "CreateAccessPoint",
-  props: {
-    siteID: {
-      type: Number,
-      required: false,
-    },
-    apID: {
-      type: Number,
-      required: false,
-    },
-    edit: {
-      type: Boolean,
-      required: false,
-    },
-  },
-  async setup(props: { siteID?: number; apID?: number; edit?: boolean }) {
-    const { siteID, apID, edit } = toRefs(props);
-    const isEdit = ref<boolean>(false);
-    if (edit?.value === true) isEdit.value = true;
-
-    const ap = reactive<AccessPoint>({
-      ap_name: "",
-      site_id: siteID?.value,
-      mac_address: "",
-      serialnumber: "",
-      location: "",
-      model: "",
-      group: "fem-ap-group",
-      appointment: undefined,
-      comment: "",
-    });
-    async function getAccessPointSettings(id: number) {
-      try {
-        await getAccessPointByID(id).then((a) => Object.assign(ap, a));
-      } catch (e) {
-        console.error(e);
-      }
-    }
-    if (apID?.value !== undefined) getAccessPointSettings(apID.value);
-
-    const sites = reactive<Site[]>([]);
-    async function getSite(id: number) {
-      try {
-        await apiGetSite(id).then((s) => Object.assign(sites, [s]));
-      } catch (e) {
-        console.error(e);
-      }
-    }
-    async function getSites() {
-      try {
-        await apiGetSites().then((s) => Object.assign(sites, s));
-      } catch (e) {
-        console.error(e);
-      }
-    }
-    if (siteID?.value !== undefined) {
-      getSite(siteID.value);
-    } else {
-      getSites();
-    }
-
-    async function createAccessPoint() {
-      try {
-        await apiCreateAccessPoint(ap);
-        router.push({ name: "AccessPoints" });
-      } catch (e) {
-        console.error(e);
-      }
-    }
-
-    return { isEdit, ap, sites, getSites, createAccessPoint };
-  },
-};
-</script>
-
-<style scoped></style>

src/views/RegisterAccessPoint.vue

@@ -1,83 +0,0 @@
-<template>
-  <div class="sm:w-3/4 md:w-1/3 w-full dark:text-white">
-    <h1 class="font-hairline mb-6 text-center">Register Access Point</h1>
-    <form
-      class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg"
-      @submit.prevent="registerAccessPoint"
-    >
-      <div class="mb-4">
-        <label class="font-bold text-gray-800 block mb-2"
-          >AccessPoint Name aruba-ap-<input
-            type="text"
-            class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
-            v-model.trim="apName"
-            placeholder="c01"
-          />
-        </label>
-      </div>
-      <div class="flex items-center justify-between">
-        <button
-          class="bg-green-600 hover:bg-green-400 text-white font-bold py-2 px-4 rounded"
-          type="submit"
-        >
-          Register!
-        </button>
-      </div>
-    </form>
-  </div>
-  <VTaskState
-    v-for="task in tasks"
-    :ap-name="task.apName"
-    :task-i-d="task.taskID"
-  ></VTaskState>
-</template>
-
-<script lang="ts">
-import { reactive, ref, toRefs } from "vue";
-import {
-  getAccessPointByID,
-  registerAccessPoint as apiRegisterAccessPoint,
-} from "../api";
-import VTaskState from "../components/VTaskState.vue";
-
-export default {
-  name: "RegisterAccessPoint",
-  components: { VTaskState },
-  props: {
-    apID: {
-      type: Number,
-      required: false,
-    },
-  },
-  setup(props: { apID?: number }) {
-    const { apID } = toRefs(props);
-    const apName = ref("");
-    const tasks = reactive<{ apName: string; taskID: string }[]>([]);
-    const finishedTasks = reactive<{ apName: string; taskID: string }[]>([]);
-
-    async function getAccessPointSettings(id: number) {
-      try {
-        await getAccessPointByID(id).then((a) => (apName.value = a.ap_name));
-      } catch (e) {
-        console.error(e);
-      }
-    }
-    if (!isNaN(apID?.value)) {
-      getAccessPointSettings(apID.value);
-    }
-
-    async function registerAccessPoint() {
-      try {
-        const r = await apiRegisterAccessPoint(apName.value);
-        tasks.push({ apName: apName.value, taskID: r["task-id"] });
-      } catch (e) {
-        console.error(e);
-      }
-    }
-
-    return { apName, registerAccessPoint, tasks, finishedTasks };
-  },
-};
-</script>
-
-<style scoped></style>

src/views/Sites.vue

@@ -25,11 +25,11 @@
           <td class="border px-8 py-4">{{ site.id }}</td>
           <td class="border px-8 py-4">{{ site.default_prefix }}</td>
           <td>
-            <router-link
+            <!--router-link
-              :to="{ name: 'CreateAccessPoint', query: { 'site-id': site.id } }"
+              :to="{ name: 'Login', query: { 'site-id': site.id } }"
               class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
               >Create AP</router-link
-            >
+            -->
             <router-link
               :to="{ name: 'AccessPoints', query: { 'site-id': site.id } }"
               class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
@@ -79,14 +79,14 @@ import {
   Site,
   createSite as apiCreateSite,
 } from "../api";
-import { reactive, ref } from "vue";
+import { ref } from "vue";
 
 export default {
   name: "Sites",
   async setup() {
-    const sites = reactive<Site[]>([]);
+    const sites = ref<Site[]>([]);
     async function getSites() {
-      await apiGetSites().then((s) => void Object.assign(sites, s));
+      await apiGetSites().then((s) => void (sites.value = s));
     }
     await getSites();