case 4688 - user form: hide login fields for agent users; copy button for a new agent token; token box only once saved

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sockeye",
-  "version": "8.1.4",
+  "version": "8.2.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/App.vue

@@ -97,7 +97,9 @@
                       </v-list-item-action>
                       <v-list-item-content>
                         <v-list-item-title>{{
-                          $sock.t(subitem.title)
+                          subitem.notrans
+                            ? subitem.title
+                            : $sock.t(subitem.title)
                         }}</v-list-item-title>
                       </v-list-item-content>
                     </v-list-item>

src/api/initialize.js

@@ -485,6 +485,17 @@ ServiceContractor = 5 */
     });
   }
 
+  //case 4738 (Sockeye-only, plain English title)
+  if (window.$gz.role.canOpen(window.$gz.type.GlobalOps)) {
+    sub.push({
+      title: "Security advisories",
+      notrans: true,
+      icon: "$sockiShieldAlt",
+      route: "/ops-security-advisories",
+      key: key++
+    });
+  }
+
   if (window.$gz.role.canOpen(window.$gz.type.OpsNotificationSettings)) {
     sub.push({
       title: "NotificationDeliveryLog",

src/api/passkey.js

@@ -0,0 +1,76 @@
+// case 4678: passkeys (WebAuthn). The server sends the options as JSON with binary fields in base64url;
+// the browser API wants ArrayBuffers, and its answer goes back the same way
+
+function toBuffer(b64url) {
+  const b64 = b64url.replace(/-/g, "+").replace(/_/g, "/");
+  const bin = atob(b64 + "===".slice((b64.length + 3) % 4));
+  const bytes = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) {
+    bytes[i] = bin.charCodeAt(i);
+  }
+  return bytes.buffer;
+}
+
+function toB64Url(buffer) {
+  if (!buffer) {
+    return null;
+  }
+  const bytes = new Uint8Array(buffer);
+  let bin = "";
+  for (let i = 0; i < bytes.length; i++) {
+    bin += String.fromCharCode(bytes[i]);
+  }
+  return btoa(bin)
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=+$/, "");
+}
+
+function credentialJson(cred, response) {
+  return {
+    id: cred.id,
+    rawId: toB64Url(cred.rawId),
+    type: cred.type,
+    response: response,
+    clientExtensionResults: cred.getClientExtensionResults
+      ? cred.getClientExtensionResults()
+      : {}
+  };
+}
+
+export default {
+  // passkeys need a browser that has them and a secure page (HTTPS, or localhost)
+  supported() {
+    return !!(window.PublicKeyCredential && window.isSecureContext);
+  },
+
+  // run navigator.credentials.create() with the server's register-options; returns the JSON to send back
+  async create(options) {
+    const o = JSON.parse(JSON.stringify(options));
+    o.challenge = toBuffer(o.challenge);
+    o.user.id = toBuffer(o.user.id);
+    (o.excludeCredentials || []).forEach(c => (c.id = toBuffer(c.id)));
+    const cred = await navigator.credentials.create({ publicKey: o });
+    return credentialJson(cred, {
+      clientDataJSON: toB64Url(cred.response.clientDataJSON),
+      attestationObject: toB64Url(cred.response.attestationObject),
+      transports: cred.response.getTransports
+        ? cred.response.getTransports()
+        : []
+    });
+  },
+
+  // run navigator.credentials.get() with the server's login-options; returns the JSON to send back
+  async get(options) {
+    const o = JSON.parse(JSON.stringify(options));
+    o.challenge = toBuffer(o.challenge);
+    (o.allowCredentials || []).forEach(c => (c.id = toBuffer(c.id)));
+    const cred = await navigator.credentials.get({ publicKey: o });
+    return credentialJson(cred, {
+      clientDataJSON: toB64Url(cred.response.clientDataJSON),
+      authenticatorData: toB64Url(cred.response.authenticatorData),
+      signature: toB64Url(cred.response.signature),
+      userHandle: toB64Url(cred.response.userHandle)
+    });
+  }
+};

src/api/sockeye-version.js

@@ -1,5 +1,5 @@
 export default {
-  version: "8.1.4",
+  version: "8.2.0",
   //case 4630: the year is set when the client is built (vue.config.js)
   copyright: `© ${process.env.VUE_APP_BUILD_YEAR}, Ground Zero Tech-Works Inc.`
 };

src/plugins/vuetify.js

@@ -193,6 +193,8 @@ import {
   faSeedling,
   faServer,
   faShare,
+  faFingerprint,
+  faShieldAlt,
   faShippingFast,
   faShoppingCart,
   faSignInAlt,
@@ -390,6 +392,8 @@ library.add(
   faSeedling,
   faServer,
   faShare,
+  faFingerprint,
+  faShieldAlt,
   faShippingFast,
   faShoppingCart,
   faSignInAlt,
@@ -1279,6 +1283,18 @@ const CUSTOM_ICONS = {
       icon: ["fas", "shipping-fast"]
     }
   },
+  sockiFingerprint: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "fingerprint"]
+    }
+  },
+  sockiShieldAlt: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "shield-alt"]
+    }
+  },
   sockiShoppingCart: {
     component: FontAwesomeIcon,
     props: {

src/router.js

@@ -577,6 +577,14 @@ export default new Router({
           /* webpackChunkName: "ops" */ "./views/ops-notification-settings.vue"
         )
     },
+    {
+      path: "/ops-security-advisories",
+      name: "ops-security-advisories",
+      component: () =>
+        import(
+          /* webpackChunkName: "ops" */ "./views/ops-security-advisories.vue"
+        )
+    },
     {
       path: "/ops-notify-log",
       name: "ops-notify-log",

src/views/adm-user.vue

@@ -102,7 +102,121 @@
                     @change="fieldValueChanged('allowLogin')"
                   ></v-checkbox>
                 </v-col>
-                <v-col v-if="obj.allowLogin" cols="12" sm="6" lg="4" xl="3">
+                <!-- case 4688: AI agent: no login page sign-in, connects to /mcp with an agent token -->
+                <v-col cols="12" sm="6" lg="4" xl="3">
+                  <v-checkbox
+                    ref="agent"
+                    v-model="obj.agent"
+                    dense
+                    :readonly="formState.readOnly"
+                    :disabled="obj.id === 1"
+                    :label="$sock.t('UserAgent')"
+                    :hint="$sock.t('UserAgentHint')"
+                    persistent-hint
+                    data-cy="agent"
+                    :error-messages="form().serverErrors(this, 'agent')"
+                    @change="fieldValueChanged('agent')"
+                  ></v-checkbox>
+                </v-col>
+                <v-col
+                  v-if="obj.agent && obj.id != 0 && !formState.dirty"
+                  cols="12"
+                >
+                  <v-card outlined class="pa-3" data-cy="agentTokens">
+                    <div class="text-subtitle-1">
+                      {{ $sock.t("AgentTokens") }}
+                    </div>
+                    <v-alert
+                      v-if="newAgentToken"
+                      type="warning"
+                      dense
+                      class="mt-2"
+                    >
+                      {{ $sock.t("AgentTokenShowOnce") }}
+                      <div
+                        class="text-body-2 mt-2"
+                        style="word-break: break-all"
+                      >
+                        <code>{{ newAgentToken }}</code>
+                      </div>
+                      <v-btn
+                        small
+                        class="mt-2"
+                        data-cy="copyAgentToken"
+                        @click="copyAgentToken()"
+                      >
+                        <v-icon small left>$sockiCopy</v-icon>
+                        {{ $sock.t("CopyToClipboard") }}
+                      </v-btn>
+                    </v-alert>
+                    <v-simple-table v-if="agentTokens.length > 0" dense>
+                      <tbody>
+                        <tr v-for="t in agentTokens" :key="t.id">
+                          <td>{{ t.name }}</td>
+                          <td class="text-caption">
+                            {{ $sock.t("AgentTokenExpires") }}:
+                            {{
+                              t.expires
+                                ? tokenDate(t.expires)
+                                : $sock.t("AgentTokenNever")
+                            }}
+                            <br />
+                            {{ $sock.t("AgentTokenLastUsed") }}:
+                            {{ tokenDate(t.lastUsed) }}
+                          </td>
+                          <td>
+                            <span v-if="t.revoked" class="text-caption">
+                              {{ $sock.t("AgentTokenRevoked") }}
+                              {{ tokenDate(t.revoked) }}
+                            </span>
+                            <v-btn
+                              v-else-if="rights.change"
+                              small
+                              @click="revokeAgentToken(t)"
+                              >{{ $sock.t("AgentTokenRevoke") }}</v-btn
+                            >
+                          </td>
+                        </tr>
+                      </tbody>
+                    </v-simple-table>
+                    <div v-else class="text-caption my-2">
+                      {{ $sock.t("AgentTokenNone") }}
+                    </div>
+                    <v-row v-if="rights.change" dense align="center">
+                      <v-col cols="12" sm="6">
+                        <v-text-field
+                          v-model="newAgentTokenName"
+                          dense
+                          :label="$sock.t('AgentTokenName')"
+                        ></v-text-field>
+                      </v-col>
+                      <v-col cols="6" sm="3">
+                        <v-text-field
+                          v-model.number="newAgentTokenDays"
+                          dense
+                          type="number"
+                          min="0"
+                          :label="$sock.t('AgentTokenExpiresDays')"
+                        ></v-text-field>
+                      </v-col>
+                      <v-col cols="6" sm="3">
+                        <v-btn
+                          small
+                          color="primary"
+                          @click="createAgentToken()"
+                          >{{ $sock.t("AgentTokenCreate") }}</v-btn
+                        >
+                      </v-col>
+                    </v-row>
+                  </v-card>
+                </v-col>
+                <v-col
+                  v-if="obj.allowLogin && !obj.agent"
+                  cols="12"
+                  sm="6"
+                  lg="4"
+                  xl="3"
+                >
                   <v-text-field
                     id="username"
                     ref="login"
@@ -121,7 +235,13 @@
                   ></v-text-field>
                 </v-col>
 
-                <v-col v-if="obj.allowLogin" cols="12" sm="6" lg="4" xl="3">
+                <v-col
+                  v-if="obj.allowLogin && !obj.agent"
+                  cols="12"
+                  sm="6"
+                  lg="4"
+                  xl="3"
+                >
                   <v-text-field
                     id="password"
                     ref="password"
@@ -446,6 +566,7 @@ export default {
         concurrency: 0,
         active: true,
         allowLogin: true,
+        agent: false,
         name: null,
         roles: null,
         userType: 2,
@@ -460,6 +581,10 @@ export default {
         lastLogin: null
       },
 
+      agentTokens: [],
+      newAgentToken: null,
+      newAgentTokenName: null,
+      newAgentTokenDays: 90,
       optionsObj: {
         id: 0,
         concurrency: 0,
@@ -641,6 +766,7 @@ export default {
           vm.formState.loading = false;
         } else {
           vm.obj = res.data;
+          await vm.getAgentTokens();
           generateMenu(vm);
           window.$gz.form.setFormState({
             vm: vm,
@@ -824,6 +950,97 @@ export default {
         window.$gz.errorHandler.handleFormError(error, vm);
       }
     },
+    //case 4678: for a user who lost their passkeys
+    async removePasskeys() {
+      const vm = this;
+      if ((await window.$gz.dialog.confirmDelete()) != true) {
+        return;
+      }
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
+      try {
+        const res = await window.$gz.api.remove(
+          `auth/passkey/user/${vm.obj.id}`
+        );
+        if (res.error) {
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+        } else {
+          window.$gz.eventBus.$emit(
+            "notify-success",
+            vm.$sock.t("PasskeyRemoveAll")
+          );
+        }
+      } catch (error) {
+        window.$gz.errorHandler.handleFormError(error, vm);
+      }
+    },
+    //case 4688: agent tokens
+    tokenDate(d) {
+      if (!d) {
+        return "-";
+      }
+      return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+        d,
+        window.$gz.locale.getResolvedTimeZoneName(),
+        window.$gz.locale.getResolvedLanguage(),
+        window.$gz.locale.getHour12()
+      );
+    },
+    copyAgentToken() {
+      window.$gz.util.copyToClipboard(this.newAgentToken);
+      window.$gz.eventBus.$emit(
+        "notify-success",
+        this.$sock.t("CopyToClipboard")
+      );
+    },
+    async getAgentTokens() {
+      const vm = this;
+      vm.newAgentToken = null;
+      if (!vm.obj.agent || !vm.obj.id) {
+        vm.agentTokens = [];
+        return;
+      }
+      const res = await window.$gz.api.get(`agent-token/${vm.obj.id}`);
+      if (!res.error) {
+        vm.agentTokens = res.data;
+      }
+    },
+    async createAgentToken() {
+      const vm = this;
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
+      const days =
+        vm.newAgentTokenDays === "" || vm.newAgentTokenDays == null
+          ? null
+          : vm.newAgentTokenDays;
+      const res = await window.$gz.api.post("agent-token", {
+        userId: vm.obj.id,
+        name: vm.newAgentTokenName,
+        expiresDays: days
+      });
+      if (res.error) {
+        vm.formState.serverError = res.error;
+        window.$gz.form.setErrorBoxErrors(vm);
+        return;
+      }
+      await vm.getAgentTokens();
+      vm.newAgentToken = res.data.token;
+      vm.newAgentTokenName = null;
+    },
+    async revokeAgentToken(t) {
+      const vm = this;
+      if (
+        (await window.$gz.dialog.confirmGeneric("AgentTokenRevoke")) != true
+      ) {
+        return;
+      }
+      const res = await window.$gz.api.remove(`agent-token/${t.id}`);
+      if (res.error) {
+        vm.formState.serverError = res.error;
+        window.$gz.form.setErrorBoxErrors(vm);
+      } else {
+        await vm.getAgentTokens();
+      }
+    },
     async disableTfa() {
       const vm = this;
 
@@ -907,6 +1124,9 @@ async function clickHandler(menuItem) {
       case "disable2fa":
         m.vm.disableTfa();
         break;
+      case "removepasskeys":
+        m.vm.removePasskeys();
+        break;
       case "WorkOrderItemScheduledUserList":
         m.vm.$router.push({
           name: "svc-workorder-item-scheduled-users",
@@ -1021,6 +1241,12 @@ function generateMenu(vm) {
         key: FORM_KEY + ":sendreset",
         vm: vm
       });
+      menuOptions.menuItems.push({
+        title: "PasskeyRemoveAll",
+        icon: "$sockiFingerprint",
+        key: FORM_KEY + ":removepasskeys",
+        vm: vm
+      });
       if (vm.obj.twoFactorEnabled) {
         menuOptions.menuItems.push({
           title: "AuthDisableTwoFactor",
@@ -1067,6 +1293,21 @@ async function initForm(vm) {
 //
 async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
+    "PasskeyRemoveAll",
+    "UserAgent",
+    "UserAgentHint",
+    "AgentTokens",
+    "AgentTokenCreate",
+    "AgentTokenName",
+    "AgentTokenExpiresDays",
+    "AgentTokenShowOnce",
+    "AgentTokenExpires",
+    "AgentTokenNever",
+    "AgentTokenLastUsed",
+    "AgentTokenRevoke",
+    "AgentTokenRevoked",
+    "AgentTokenNone",
+    "CopyToClipboard",
     "Vendor",
     "User",
     "UserSettings",

src/views/home-security.vue

@@ -65,12 +65,59 @@
               </v-card>
             </v-col>
           </template>
+          <!-- case 4678: passkeys -->
+          <v-col cols="12">
+            <v-card data-cy="passkeys" class="mx-auto my-6" max-width="600">
+              <v-card-title>{{ $sock.t("Passkeys") }}</v-card-title>
+              <v-card-subtitle>{{ $sock.t("PasskeyIntro") }}</v-card-subtitle>
+              <v-card-text>
+                <div v-if="!passkeySupported" class="warning--text mb-4">
+                  {{ $sock.t("PasskeyNotSupported") }}
+                </div>
+                <v-simple-table v-if="passkeys.length > 0" dense>
+                  <tbody>
+                    <tr v-for="k in passkeys" :key="k.id">
+                      <td>{{ k.name }}</td>
+                      <td class="text-caption">
+                        {{ $sock.t("PasskeyCreated") }}: {{ date(k.created) }}
+                        <br />
+                        {{ $sock.t("PasskeyLastUsed") }}: {{ date(k.lastUsed) }}
+                      </td>
+                      <td>
+                        <v-btn
+                          icon
+                          :title="$sock.t('PasskeyRemove')"
+                          @click="removePasskey(k)"
+                        >
+                          <v-icon small>$sockiTrashAlt</v-icon>
+                        </v-btn>
+                      </td>
+                    </tr>
+                  </tbody>
+                </v-simple-table>
+                <div v-else class="mb-2">{{ $sock.t("PasskeyNone") }}</div>
+                <template v-if="passkeySupported">
+                  <v-text-field
+                    v-model="passkeyName"
+                    dense
+                    class="mt-6"
+                    :label="$sock.t('PasskeyName')"
+                    data-cy="passkeyName"
+                  ></v-text-field>
+                  <v-btn color="primary" @click="addPasskey()">{{
+                    $sock.t("PasskeyAdd")
+                  }}</v-btn>
+                </template>
+              </v-card-text>
+            </v-card>
+          </v-col>
         </v-row>
       </v-form>
     </v-col>
   </v-row>
 </template>
 <script>
+import passkey from "../api/passkey";
 const FORM_KEY = "security";
 
 export default {
@@ -83,6 +130,9 @@ export default {
       },
       pin: null,
       tfaEnabled: window.$gz.store.state.tfaEnabled,
+      passkeys: [],
+      passkeyName: null,
+      passkeySupported: passkey.supported(),
       formState: {
         ready: false,
         dirty: false,
@@ -116,6 +166,7 @@ export default {
         readOnly: false
       });
       window.$gz.eventBus.$on("menu-click", clickHandler);
+      await vm.getPasskeys();
       //fetch tfa secret and display here if tfa not enabled currently
       if (!this.tfaEnabled) {
         const res = await window.$gz.api.get("auth/totp");
@@ -135,6 +186,71 @@ export default {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
   methods: {
+    //case 4678
+    date(d) {
+      if (!d) {
+        return "-";
+      }
+      return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+        d,
+        window.$gz.locale.getResolvedTimeZoneName(),
+        window.$gz.locale.getResolvedLanguage(),
+        window.$gz.locale.getHour12()
+      );
+    },
+    async getPasskeys() {
+      const res = await window.$gz.api.get("auth/passkey");
+      if (!res.error) {
+        this.passkeys = res.data;
+      }
+    },
+    async addPasskey() {
+      const vm = this;
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
+      try {
+        let res = await window.$gz.api.post(
+          "auth/passkey/register-options",
+          {}
+        );
+        if (res.error) {
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+          return;
+        }
+        const answer = await passkey.create(res.data.options);
+        res = await window.$gz.api.post("auth/passkey/register", {
+          id: res.data.id,
+          name: vm.passkeyName,
+          response: answer
+        });
+        if (res.error) {
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+          return;
+        }
+        vm.passkeyName = null;
+        await vm.getPasskeys();
+      } catch (error) {
+        //the user closed the browser's passkey prompt
+        if (error.name == "NotAllowedError" || error.name == "AbortError") {
+          return;
+        }
+        window.$gz.errorHandler.handleFormError(error, vm);
+      }
+    },
+    async removePasskey(k) {
+      const vm = this;
+      if ((await window.$gz.dialog.confirmDelete()) != true) {
+        return;
+      }
+      const res = await window.$gz.api.remove(`auth/passkey/${k.id}`);
+      if (res.error) {
+        vm.formState.serverError = res.error;
+        window.$gz.form.setErrorBoxErrors(vm);
+      } else {
+        await vm.getPasskeys();
+      }
+    },
     form() {
       return window.$gz.form;
     },
@@ -260,6 +376,15 @@ async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "AuthConnectAppTitle",
     "AuthConnectAppSubTitle",
+    "Passkeys",
+    "PasskeyIntro",
+    "PasskeyAdd",
+    "PasskeyName",
+    "PasskeyCreated",
+    "PasskeyLastUsed",
+    "PasskeyNone",
+    "PasskeyRemove",
+    "PasskeyNotSupported",
     "AuthConnectAppManualEntry",
     "AuthEnterPin",
     "AuthTwoFactor",

src/views/login.vue

@@ -126,6 +126,16 @@
                 >
                   <v-icon>$sockiSignIn</v-icon>
                 </v-btn>
+                <!-- case 4678: passkey sign-in, offered where the browser and page allow it -->
+                <v-btn
+                  v-if="passkeySupported"
+                  class="ml-4"
+                  aria-label="Passkey"
+                  data-cy="passkeybutton"
+                  @click="passkeyLogin()"
+                >
+                  <v-icon>$sockiFingerprint</v-icon>
+                </v-btn>
               </v-col>
             </v-row>
           </form>
@@ -183,6 +193,7 @@
 </template>
 <script>
 import { processLogin, processLogout } from "../api/authutil";
+import passkey from "../api/passkey";
 import sockeyeVersion from "../api/sockeye-version";
 export default {
   data() {
@@ -201,6 +212,7 @@ export default {
       tt: null,
       pinError: null,
       loggedInWithKnownPassword: false,
+      passkeySupported: passkey.supported(),
       hasSmallLogo: false,
       hasMediumLogo: false,
       hasLargeLogo: false,
@@ -380,6 +392,45 @@ export default {
       //move focus to password
       document.getElementsByName("password")[0].focus();
     },
+    //case 4678
+    async passkeyLogin() {
+      const vm = this;
+      vm.errorBadCreds = false;
+      vm.formState.errorBoxMessage = null;
+      try {
+        let res = await window.$gz.api.upsert(
+          "auth/passkey/login-options",
+          {},
+          true
+        );
+        if (res.error) {
+          throw new Error(window.$gz.errorHandler.errorToString(res, vm));
+        }
+        const answer = await passkey.get(res.data.options);
+        res = await window.$gz.api.upsert(
+          "auth/passkey/login",
+          { id: res.data.id, response: answer },
+          true
+        );
+        if (res.error) {
+          throw new Error(window.$gz.errorHandler.errorToString(res, vm));
+        }
+        await this.step2(res);
+      } catch (error) {
+        //the user closed the browser's passkey prompt
+        if (error.name == "NotAllowedError" || error.name == "AbortError") {
+          return;
+        }
+        if (
+          error.message &&
+          error.message.includes("ErrorUserNotAuthenticated")
+        ) {
+          vm.errorBadCreds = true;
+          return;
+        }
+        vm.formState.errorBoxMessage = error.message;
+      }
+    },
     async login() {
       const vm = this;
 

src/views/ops-security-advisories.vue

@@ -0,0 +1,435 @@
+<template>
+  <!-- case 4738: security advisory monitor. Sockeye-only, so plain English text (no translation keys) -->
+  <v-row v-if="formState.ready" dense>
+    <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
+
+    <v-col cols="12">
+      <div class="text-h6">Sources</div>
+      <v-data-table
+        dense
+        :headers="sourceHeaders"
+        :items="sources"
+        class="elevation-1"
+        hide-default-footer
+        disable-pagination
+        no-data-text="Not run yet"
+        data-cy="sourcesTable"
+      ></v-data-table>
+    </v-col>
+
+    <v-col cols="12" class="mt-4">
+      <div class="text-h6">
+        Watched assets
+        <v-btn small class="ml-4" :disabled="!rights.change" @click="addAsset"
+          >Add asset</v-btn
+        >
+      </div>
+      <div class="text-caption mb-2">
+        For an Ubuntu release, paste the output of
+        <code>dpkg-query -W -f='${source:Package}\n' | sort -u</code> from one
+        of its droplets. For PostgreSQL, list the major versions in use (e.g.
+        15).
+      </div>
+      <v-card
+        v-for="(a, index) in assets"
+        :key="a.key"
+        class="mb-4 pa-3"
+        outlined
+        :data-cy="'asset' + index"
+      >
+        <v-row dense>
+          <v-col cols="12" sm="6" lg="3">
+            <v-text-field
+              v-model="a.name"
+              label="Name"
+              :readonly="!rights.change"
+            ></v-text-field>
+          </v-col>
+          <v-col cols="12" sm="6" lg="3">
+            <v-select
+              v-model="a.platform"
+              :items="platforms"
+              label="Platform"
+              :readonly="!rights.change"
+            ></v-select>
+          </v-col>
+          <v-col cols="6" lg="2">
+            <v-select
+              v-model="a.alertAt"
+              :items="severities"
+              label="Alert at once from"
+              :readonly="!rights.change"
+            ></v-select>
+          </v-col>
+          <v-col cols="6" lg="2">
+            <v-select
+              v-model="a.digestAt"
+              :items="severities"
+              label="Wednesday digest from"
+              :readonly="!rights.change"
+            ></v-select>
+          </v-col>
+          <v-col cols="12" lg="2">
+            <v-checkbox
+              v-model="a.active"
+              label="Active"
+              :readonly="!rights.change"
+            ></v-checkbox>
+          </v-col>
+          <v-col cols="12">
+            <v-textarea
+              v-model="a.componentsText"
+              :label="`Components (${countComponents(a)})`"
+              rows="6"
+              no-resize
+              outlined
+              :readonly="!rights.change"
+            ></v-textarea>
+          </v-col>
+          <v-col cols="12">
+            <v-btn
+              small
+              color="primary"
+              :disabled="!rights.change"
+              @click="saveAsset(a)"
+              >Save</v-btn
+            >
+            <v-btn
+              small
+              class="ml-4"
+              :disabled="!rights.change"
+              @click="deleteAsset(a)"
+              >Delete</v-btn
+            >
+          </v-col>
+        </v-row>
+      </v-card>
+    </v-col>
+
+    <v-col cols="12" class="mt-4">
+      <div class="text-h6">Dry run</div>
+      <div class="text-caption mb-2">
+        What the advisories of the last days would have done with the assets as
+        saved. Sends nothing and records nothing. Looking up Ubuntu's CVE
+        priorities can take a few minutes the first time.
+      </div>
+      <v-row dense align="center">
+        <v-col cols="4" sm="2">
+          <v-text-field
+            v-model.number="dryRunDays"
+            type="number"
+            label="Days"
+            min="1"
+            max="90"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="8" sm="10">
+          <v-btn
+            small
+            :disabled="!rights.change || dryRun.running"
+            :loading="dryRun.running"
+            @click="startDryRun"
+            >Run</v-btn
+          >
+          <span v-if="dryRun.error" class="error--text ml-4">{{
+            dryRun.error
+          }}</span>
+        </v-col>
+      </v-row>
+      <v-data-table
+        v-if="dryRunRows.length > 0"
+        dense
+        :headers="
+          advisoryHeaders.concat([
+            { text: 'Already processed', value: 'alreadyProcessed' }
+          ])
+        "
+        :items="dryRunRows"
+        class="elevation-1"
+        :items-per-page="50"
+        data-cy="dryRunTable"
+      >
+        <template v-slot:[`item.sourceId`]="{ item }">
+          <a :href="item.url" target="_blank">{{ item.sourceId }}</a>
+        </template>
+      </v-data-table>
+    </v-col>
+
+    <v-col cols="12" class="mt-4">
+      <div class="text-h6">
+        Matched advisories, last 60 days ({{ processed }} processed)
+        <v-btn small class="ml-4" @click="getDataFromApi">
+          <v-icon small>$sockiSync</v-icon>
+        </v-btn>
+      </div>
+      <v-data-table
+        dense
+        :headers="advisoryHeaders"
+        :items="advisories"
+        class="elevation-1"
+        :items-per-page="50"
+        no-data-text="None"
+        data-cy="advisoriesTable"
+      >
+        <template v-slot:[`item.sourceId`]="{ item }">
+          <a :href="item.url" target="_blank">{{ item.sourceId }}</a>
+        </template>
+      </v-data-table>
+    </v-col>
+  </v-row>
+</template>
+<script>
+const SEVERITIES = [
+  { text: "Critical", value: 5 },
+  { text: "High", value: 4 },
+  { text: "Medium", value: 3 },
+  { text: "Low", value: 2 },
+  { text: "Negligible", value: 1 }
+];
+const OUTCOMES = ["No match", "Ignored", "Digest", "Alerted"];
+let assetKey = 0;
+let pollTimer = null;
+
+export default {
+  data() {
+    return {
+      sources: [],
+      assets: [],
+      advisories: [],
+      processed: 0,
+      dryRun: { running: false, error: null, report: null },
+      dryRunDays: 30,
+      platforms: [
+        { text: "Ubuntu 24.04 (noble)", value: "ubuntu:noble" },
+        { text: "Ubuntu 26.04 (resolute)", value: "ubuntu:resolute" },
+        { text: "PostgreSQL (PGDG)", value: "postgresql" }
+      ],
+      severities: SEVERITIES,
+      sourceHeaders: [
+        { text: "Source", value: "id" },
+        { text: "Last success", value: "lastSuccess" },
+        { text: "Last attempt", value: "lastAttempt" },
+        { text: "Last error", value: "lastError" }
+      ],
+      advisoryHeaders: [
+        { text: "Published", value: "published" },
+        { text: "Outcome", value: "outcome" },
+        { text: "Advisory", value: "sourceId" },
+        { text: "Severity", value: "severity" },
+        { text: "Known exploited", value: "knownExploited" },
+        { text: "Title", value: "title" },
+        { text: "Affects", value: "matched" }
+      ],
+      formState: {
+        ready: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject(),
+      timeZoneName: window.$gz.locale.getResolvedTimeZoneName(),
+      languageName: window.$gz.locale.getResolvedLanguage(),
+      hour12: window.$gz.locale.getHour12()
+    };
+  },
+  computed: {
+    dryRunRows() {
+      if (!this.dryRun.report) {
+        return [];
+      }
+      return this.dryRun.report
+        .filter(z => !z.error && z.outcome != "NoMatch")
+        .map(z => this.advisoryRow(z));
+    }
+  },
+  async created() {
+    const vm = this;
+    try {
+      vm.rights = window.$gz.role.getRights(window.$gz.type.GlobalOps);
+      vm.formState.readOnly = !vm.rights.change;
+      vm.formState.ready = true;
+      generateMenu(vm);
+      await vm.getDataFromApi();
+      await vm.getDryRun();
+    } catch (err) {
+      vm.formState.ready = true;
+      window.$gz.errorHandler.handleFormError(err, vm);
+    }
+  },
+  beforeDestroy() {
+    clearTimeout(pollTimer);
+  },
+  methods: {
+    date(d) {
+      if (!d) {
+        return "";
+      }
+      return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+        d,
+        this.timeZoneName,
+        this.languageName,
+        this.hour12
+      );
+    },
+    advisoryRow(z) {
+      return {
+        published: this.date(z.published),
+        outcome: typeof z.outcome == "number" ? OUTCOMES[z.outcome] : z.outcome,
+        sourceId: z.sourceId,
+        url: z.url,
+        severity:
+          z.rawSeverity ||
+          (typeof z.severity == "number"
+            ? (SEVERITIES.find(s => s.value == z.severity) || {}).text ||
+              "Unknown"
+            : z.severity),
+        knownExploited: z.knownExploited ? "YES" : "",
+        title: z.title,
+        matched: z.matched,
+        alreadyProcessed: z.alreadyProcessed ? "yes" : ""
+      };
+    },
+    countComponents(a) {
+      return (a.componentsText || "").split(/[\s,]+/).filter(z => z).length;
+    },
+    addAsset() {
+      this.assets.push({
+        key: assetKey++,
+        id: 0,
+        name: "",
+        platform: "ubuntu:resolute",
+        componentsText: "",
+        active: true,
+        alertAt: 4,
+        digestAt: 3
+      });
+    },
+    async saveAsset(a) {
+      const vm = this;
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
+      try {
+        const res = await window.$gz.api.post("security-advisory/asset", {
+          id: a.id,
+          name: a.name,
+          platform: a.platform,
+          components: [a.componentsText || ""],
+          active: a.active,
+          alertAt: a.alertAt,
+          digestAt: a.digestAt
+        });
+        if (res.error) {
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+        } else {
+          await vm.getDataFromApi();
+        }
+      } catch (ex) {
+        window.$gz.errorHandler.handleFormError(ex, vm);
+      }
+    },
+    async deleteAsset(a) {
+      const vm = this;
+      if (a.id == 0) {
+        vm.assets = vm.assets.filter(z => z.key != a.key);
+        return;
+      }
+      if ((await window.$gz.dialog.confirmDelete()) != true) {
+        return;
+      }
+      const res = await window.$gz.api.remove(
+        `security-advisory/asset/${a.id}`
+      );
+      if (res.error) {
+        vm.formState.serverError = res.error;
+        window.$gz.form.setErrorBoxErrors(vm);
+      } else {
+        await vm.getDataFromApi();
+      }
+    },
+    async startDryRun() {
+      const vm = this;
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
+      const res = await window.$gz.api.post(
+        `security-advisory/dry-run?days=${vm.dryRunDays || 30}`,
+        {}
+      );
+      if (res.error) {
+        vm.formState.serverError = res.error;
+        window.$gz.form.setErrorBoxErrors(vm);
+        return;
+      }
+      vm.dryRun = res.data;
+      vm.pollDryRun();
+    },
+    pollDryRun() {
+      const vm = this;
+      clearTimeout(pollTimer);
+      pollTimer = setTimeout(async () => {
+        await vm.getDryRun();
+        if (vm.dryRun.running) {
+          vm.pollDryRun();
+        }
+      }, 4000);
+    },
+    async getDryRun() {
+      const res = await window.$gz.api.get("security-advisory/dry-run");
+      if (!res.error) {
+        this.dryRun = res.data;
+        if (this.dryRun.running) {
+          this.pollDryRun();
+        }
+      }
+    },
+    async getDataFromApi() {
+      const vm = this;
+      vm.formState.loading = true;
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
+      try {
+        const assets = await window.$gz.api.get("security-advisory/asset");
+        const status = await window.$gz.api.get("security-advisory/status");
+        if (assets.error || status.error) {
+          vm.formState.serverError = assets.error || status.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+          return;
+        }
+        vm.assets = assets.data.map(a => ({
+          key: assetKey++,
+          id: a.id,
+          name: a.name,
+          platform: a.platform,
+          componentsText: (a.components || []).join("\n"),
+          active: a.active,
+          alertAt: a.alertAt,
+          digestAt: a.digestAt
+        }));
+        vm.sources = status.data.sources.map(s => ({
+          id: s.id,
+          lastSuccess: vm.date(s.lastSuccess),
+          lastAttempt: vm.date(s.lastAttempt),
+          lastError: s.lastError
+        }));
+        vm.advisories = status.data.advisories.map(z => vm.advisoryRow(z));
+        vm.processed = status.data.processed;
+      } catch (error) {
+        window.$gz.errorHandler.handleFormError(error, vm);
+      } finally {
+        vm.formState.loading = false;
+      }
+    }
+  }
+};
+
+function generateMenu(vm) {
+  window.$gz.eventBus.$emit("menu-change", {
+    isMain: true,
+    readOnly: vm.formState.readOnly,
+    icon: "$sockiShieldAlt",
+    formData: {
+      sockType: window.$gz.type.GlobalOps,
+      recordName: "Security advisories"
+    },
+    menuItems: []
+  });
+}
+</script>