From d1abdcd1f8c0cb7cca99f964f49334f09ce8ef8b Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 10 Aug 2023 16:36:38 +0200
Subject: [PATCH 01/16] Allow disabling confirm delete button

---
 .../generic/form/buttons/BtnDelete.vue        | 32 +++++++++++++++++--
 src/styles/_tooltip.scss                      |  1 +
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/components/generic/form/buttons/BtnDelete.vue b/src/components/generic/form/buttons/BtnDelete.vue
index 835333d9a..86ef92f6e 100644
--- a/src/components/generic/form/buttons/BtnDelete.vue
+++ b/src/components/generic/form/buttons/BtnDelete.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-popover offset="0" placement="top">
+  <v-popover ref="popover" offset="0" placement="top" :disabled="disabled">
     <pkt-button
       type="button"
       skin="tertiary"
@@ -10,8 +10,17 @@
       :disabled="disabled"
     />
 
-    <template slot="popover">
-      <pkt-button type="button" :text="confirmLabel" @onClick="$emit('click', $event)" />
+    <template v-if="!disabled" slot="popover">
+      <div data-mode="dark">
+        <p v-if="confirmText" class="mb-size-16">{{ confirmText }}</p>
+        <pkt-button
+          type="button"
+          skin="secondary"
+          :text="confirmLabel"
+          :size="size"
+          @onClick="confirm"
+        />
+      </div>
     </template>
   </v-popover>
 </template>
@@ -45,6 +54,11 @@ export default {
         return this.$t('btn.confirmDelete');
       },
     },
+    confirmText: {
+      type: String,
+      required: false,
+      default: null,
+    },
     size: {
       type: String,
       required: false,
@@ -60,6 +74,18 @@ export default {
       required: false,
       default: 'trash-can',
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  methods: {
+    confirm(e) {
+      this.$emit('click', e);
+      this.$refs.popover.hide();
+    },
   },
 };
 </script>
diff --git a/src/styles/_tooltip.scss b/src/styles/_tooltip.scss
index caeb07ed1..ff47d02f0 100644
--- a/src/styles/_tooltip.scss
+++ b/src/styles/_tooltip.scss
@@ -100,6 +100,7 @@
 
   .tooltip-inner {
     font-size: 1rem !important;
+    text-align: center;
   }
 }
 

From 07e3487e9187d9efef3f47df34aad6439839852c Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 10 Aug 2023 16:49:00 +0200
Subject: [PATCH 02/16] Add functionality for creating API clients

---
 firestore.rules                               |  28 +-
 src/components/ApiClientCard.vue              | 308 ++++++++++++++++++
 src/components/ApiClientTag.vue               | 107 ++++++
 src/components/modals/ApiClientModal.vue      |  81 +++++
 src/db/ApiClient/ApiClient.js                 |  92 ++++++
 src/db/ApiClient/index.js                     |   3 +
 src/db/ApiClient/props.js                     |  18 +
 src/locale/locales/en-US.json                 |  49 ++-
 src/locale/locales/nb-NO.json                 |  49 ++-
 .../ItemAdmin/ItemAdminApiIntegrations.vue    | 222 +++++++++++++
 10 files changed, 950 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ApiClientCard.vue
 create mode 100644 src/components/ApiClientTag.vue
 create mode 100644 src/components/modals/ApiClientModal.vue
 create mode 100644 src/db/ApiClient/ApiClient.js
 create mode 100644 src/db/ApiClient/index.js
 create mode 100644 src/db/ApiClient/props.js
 create mode 100644 src/views/ItemAdmin/ItemAdminApiIntegrations.vue

diff --git a/firestore.rules b/firestore.rules
index 8d391cf01..92186b0c8 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -31,7 +31,7 @@ service cloud.firestore {
 
       // Check if the document the user tries to access has an organization - this means that is is a product or department
       let hasOrgProperty = 'organization' in request.resource.data;
-      let isAdminFromOrgOfProdOrDep = userIsAdmin && hasOrgProperty && getAfter(request.resource.data.organization).data.id in userDoc.data.admin;
+      let isAdminFromOrgOfProdOrDep = userIsAdmin && hasOrgProperty && getAfter(request.resource.data.organization).id in userDoc.data.admin;
 
       // Check if the user has access to the document which is an organization (given that the first check is false)
       let isAdminOfOrg = userIsAdmin && request.resource.data.id in userDoc.data.admin;
@@ -216,6 +216,32 @@ service cloud.firestore {
       allow delete: if isSuperAdmin() || isMemberOfParent(document, 'kpis') || isAdminOfParent(document, 'kpis');
     }
 
+    match /apiClients/{document} {
+      function isAdminOfQueriedParent() {
+        let userDoc = getUserDoc();
+        let userIsAdmin = isAdmin();
+        let parentDoc = getAfter(resource.data.parent);
+        let hasOrgDocumentInParent = 'organization' in parentDoc.data;
+        let isAdminFromOrgOfProdOrDep = userIsAdmin && hasOrgDocumentInParent && getAfter(parentDoc.data.organization).id in userDoc.data.admin;
+        let isAdminOfParent = userIsAdmin && !isAdminFromOrgOfProdOrDep && parentDoc.data.id in userDoc.data.admin;
+        return isSignedIn() && (isAdminFromOrgOfProdOrDep || isAdminOfParent);
+      }
+      function isMemberOfQueriedParent() {
+        let userRef = /databases/$(database)/documents/users/$(request.auth.token.email);
+        let parentDoc = getAfter(resource.data.parent);
+        let userIsMemberOfParent = userRef in parentDoc.data.team;
+        return isSignedIn() && userIsMemberOfParent;
+      }
+
+      allow read: if isSuperAdmin() || isMemberOfQueriedParent() || isAdminOfQueriedParent();
+      allow write: if isSuperAdmin() || isMemberOfParent(document, 'apiClients') || isAdminOfParent(document, 'apiClients');
+
+      match /secrets/{key} {
+        allow read: if false;
+        allow write: if isSuperAdmin() || isMemberOfParent(document, 'apiClients') || isAdminOfParent(document, 'apiClients');
+      }
+    }
+
     match /slugs/{document} {
       allow read: if true;
       allow write: if false;
diff --git a/src/components/ApiClientCard.vue b/src/components/ApiClientCard.vue
new file mode 100644
index 000000000..47bb2aeb6
--- /dev/null
+++ b/src/components/ApiClientCard.vue
@@ -0,0 +1,308 @@
+<template>
+  <div class="api-client-card">
+    <pkt-icon name="crane" class="api-client-card__icon pkt-show-tablet-up" />
+
+    <div class="api-client-card__content">
+      <div class="api-client-card__title">
+        <span class="pkt-txt-18-medium">{{ client.name }}</span>
+        <div class="api-client-card__actions">
+          <pkt-button
+            v-tooltip="{
+              hideOnTargetClick: true,
+              content: $t('integration.action.edit'),
+            }"
+            size="small"
+            skin="tertiary"
+            variant="icon-only"
+            icon-name="edit"
+            :disabled="loading"
+            @onClick="$emit('edit', client)"
+          />
+          <btn-delete
+            v-tooltip="{
+              hideOnTargetClick: true,
+              content: $t('integration.action.delete'),
+            }"
+            size="small"
+            :confirm-text="$t('integration.warning.delete')"
+            variant="icon-only"
+            :disabled="loading"
+            @click="$emit('delete', client)"
+          />
+        </div>
+      </div>
+
+      <div class="api-client-card__body">
+        <div class="api-client-card__credentials">
+          <div class="api-client-card__credential">
+            <label :for="`${client.id}_clientId`">
+              <pkt-icon name="cogwheel" /> {{ $t('integration.clientId') }}
+            </label>
+            <div>
+              <input
+                :id="`${client.id}_clientId`"
+                type="text"
+                :value="client.clientId"
+                :readonly="true"
+              />
+              <pkt-button
+                v-tooltip="{
+                  hideOnTargetClick: true,
+                  content: $t('tooltip.copyToClipboard'),
+                }"
+                size="small"
+                skin="tertiary"
+                variant="icon-only"
+                icon-name="copy"
+                @onClick="copyCredential(`${client.id}_clientId`)"
+              />
+            </div>
+          </div>
+
+          <div
+            :class="[
+              'api-client-card__credential',
+              {
+                'api-client-card__credential--new': visibleSecret,
+              },
+            ]"
+          >
+            <label :for="`${client.id}_clientSecret`">
+              <pkt-icon name="lock-locked" /> {{ $t('integration.clientSecret') }}
+            </label>
+            <div>
+              <input
+                :id="`${client.id}_clientSecret`"
+                type="text"
+                :value="visibleSecret || '∗'.repeat(36)"
+                :readonly="true"
+                :disabled="!visibleSecret"
+              />
+              <pkt-button
+                v-if="visibleSecret"
+                v-tooltip="{
+                  hideOnTargetClick: true,
+                  content: $t('tooltip.copyToClipboard'),
+                }"
+                size="small"
+                skin="tertiary"
+                variant="icon-only"
+                icon-name="copy"
+                @onClick="copyCredential(`${client.id}_clientSecret`)"
+              />
+              <btn-delete
+                v-else
+                v-tooltip="{
+                  hideOnTargetClick: true,
+                  content: $t('integration.action.rotate'),
+                }"
+                size="small"
+                :confirm-label="$t('integration.action.confirmRotate')"
+                :confirm-text="$t('integration.warning.rotate')"
+                variant="icon-only"
+                icon="arrow-circle"
+                :disabled="loading"
+                @click="$emit('rotate', client)"
+              />
+            </div>
+          </div>
+        </div>
+
+        <pkt-alert v-if="visibleSecret" skin="warning">
+          <i18n path="integration.warning.secret" tag="p">
+            <template #closeLink>
+              <a href="#" @click="$emit('hide-secret')">
+                {{ $t('integration.warning.secretCloseText') }}
+              </a>
+            </template>
+          </i18n>
+        </pkt-alert>
+
+        <div v-if="client.description" class="api-client-card__description">
+          {{ client.description }}
+        </div>
+
+        <div class="api-client-card__tags">
+          <api-client-tag
+            icon="edit"
+            :i18n-key="`integration.tag.${client.edited ? 'edited' : 'created'}`"
+            :timestamp="client.edited ? client.edited : client.created"
+            :user="client.edited ? client.editedBy : client.createdBy"
+          />
+          <api-client-tag
+            v-if="client.rotated"
+            icon="arrow-circle"
+            i18n-key="integration.tag.lastRotated"
+            :timestamp="client.rotated"
+            :user="client.rotatedBy"
+            time-as-distance
+          />
+          <api-client-tag
+            icon="heart"
+            :i18n-key="`integration.tag.${client.used ? 'lastActivity' : 'noActivity'}`"
+            :timestamp="client.used"
+            time-as-distance
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { PktAlert, PktButton } from '@oslokommune/punkt-vue2';
+import { BtnDelete } from '@/components/generic/form';
+import ApiClientTag from '@/components/ApiClientTag.vue';
+
+export default {
+  name: 'ApiClientCard',
+
+  components: {
+    PktAlert,
+    PktButton,
+    BtnDelete,
+    ApiClientTag,
+  },
+
+  props: {
+    client: {
+      type: Object,
+      required: true,
+    },
+    visibleSecret: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  methods: {
+    copyCredential(elementId) {
+      const inputElement = document.getElementById(elementId);
+      if (inputElement) {
+        navigator.clipboard.writeText(inputElement.value).then(() => {
+          this.$toasted.show(this.$t('toaster.action.copiedToClipboard'));
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints' as *;
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
+.api-client-card {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  padding: 1rem;
+  border: 4px solid var(--color-gray);
+
+  &__icon {
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    margin-top: 0.5rem;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+  }
+
+  &__title {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+
+    > :first-child {
+      flex-grow: 1;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    overflow: auto;
+
+    @include bp('tablet-up') {
+      padding-right: 2.5rem;
+    }
+  }
+
+  &__credentials {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__credential {
+    width: 100%;
+    margin-right: auto;
+    padding: 1rem;
+    background-color: var(--color-gray);
+
+    &--new {
+      background-color: var(--color-green-light);
+    }
+
+    @include bp('tablet-up') {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+
+    label {
+      display: flex;
+      flex-grow: 1;
+      gap: 0.5rem;
+      align-items: center;
+    }
+
+    > div {
+      display: flex;
+    }
+
+    input {
+      box-sizing: content-box;
+      min-width: 36ch;
+      font-family: monospace;
+      background-color: transparent;
+      border: 0;
+      outline: 0;
+      @include get-text('pkt-txt-18-medium');
+    }
+
+    button:hover {
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  &__description {
+    margin-top: 0.5rem;
+  }
+
+  &__tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-top: 0.5rem;
+  }
+}
+</style>
diff --git a/src/components/ApiClientTag.vue b/src/components/ApiClientTag.vue
new file mode 100644
index 000000000..a7e4c70b3
--- /dev/null
+++ b/src/components/ApiClientTag.vue
@@ -0,0 +1,107 @@
+<template>
+  <span v-tooltip="tooltip" class="api-client-tag">
+    <pkt-icon v-if="icon" :name="icon" />
+    <span>{{ formattedTagText }}</span>
+  </span>
+</template>
+
+<script>
+import { format, formatDistanceStrict } from 'date-fns';
+import { dateTimeShort } from '@/util';
+
+export default {
+  name: 'ApiClientTag',
+
+  props: {
+    icon: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    i18nKey: {
+      type: String,
+      required: true,
+    },
+    timestamp: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    user: {
+      type: [Object, String],
+      required: false,
+      default: null,
+    },
+    timeAsDistance: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  data: () => ({
+    timerId: null,
+    now: null,
+  }),
+
+  computed: {
+    formattedTagText() {
+      return this.$t(this.i18nKey, {
+        when: this.datetime,
+        name: this.userName,
+      });
+    },
+    datetime() {
+      if (!this.timestamp) {
+        return this.$t('general.unknown');
+      }
+      if (this.timeAsDistance && this.now) {
+        return formatDistanceStrict(this.timestamp.toDate(), this.now, {
+          addSuffix: true,
+        });
+      }
+      return dateTimeShort(this.timestamp.toDate());
+    },
+    userName() {
+      return this.user?.displayName || this.user?.id || this.$t('general.unknown');
+    },
+    tooltip() {
+      return this.timestamp && this.timeAsDistance
+        ? format(this.timestamp.toDate(), 'P - ppp')
+        : false;
+    },
+  },
+
+  mounted() {
+    if (this.timeAsDistance) {
+      this.now = new Date();
+      this.timerId = setInterval(() => {
+        this.now = new Date();
+      }, 1000);
+    }
+  },
+
+  beforeDestroy() {
+    clearInterval(this.timerId);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
+.api-client-tag {
+  display: flex;
+  gap: 0.25em;
+  align-items: center;
+  color: var(--color-grayscale-60);
+  @include get-text('pkt-txt-14');
+
+  .pkt-icon {
+    --fg-color: var(--color-grayscale-60);
+    min-width: 1em;
+    min-height: 1em;
+    margin-top: -0.1rem;
+  }
+}
+</style>
diff --git a/src/components/modals/ApiClientModal.vue b/src/components/modals/ApiClientModal.vue
new file mode 100644
index 000000000..2926901dd
--- /dev/null
+++ b/src/components/modals/ApiClientModal.vue
@@ -0,0 +1,81 @@
+<template>
+  <modal-wrapper @close="close">
+    <template #header>
+      {{ $t('integration.action.edit') }}
+    </template>
+
+    <form-section :hide-errors="true">
+      <form-component
+        v-model="name"
+        input-type="input"
+        name="name"
+        :label="$t('fields.name')"
+        type="text"
+        rules="required"
+      />
+
+      <form-component
+        v-model="description"
+        input-type="textarea"
+        name="description"
+        :rows="2"
+        :label="$t('fields.description')"
+      />
+
+      <template #actions="{ handleSubmit, submitDisabled }">
+        <btn-save :disabled="submitDisabled" @click="handleSubmit(save)" />
+      </template>
+    </form-section>
+  </modal-wrapper>
+</template>
+
+<script>
+import { FormSection, BtnSave } from '@/components/generic/form';
+import ModalWrapper from './ModalWrapper.vue';
+
+export default {
+  name: 'ApiClientModal',
+
+  components: {
+    ModalWrapper,
+    FormSection,
+    BtnSave,
+  },
+
+  props: {
+    client: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data: () => ({
+    name: null,
+    description: null,
+  }),
+
+  watch: {
+    client: {
+      immediate: true,
+      async handler(client) {
+        this.name = client.name;
+        this.description = client.description;
+      },
+    },
+  },
+
+  methods: {
+    save() {
+      this.$emit('save', this.client, {
+        name: this.name,
+        description: this.description,
+      });
+      this.close();
+    },
+
+    close() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
diff --git a/src/db/ApiClient/ApiClient.js b/src/db/ApiClient/ApiClient.js
new file mode 100644
index 000000000..4a1aa4229
--- /dev/null
+++ b/src/db/ApiClient/ApiClient.js
@@ -0,0 +1,92 @@
+import { db, auth, serverTimestamp } from '@/config/firebaseConfig';
+import props from './props';
+import {
+  validateCreateProps,
+  validateUpdateProps,
+  createDocument,
+  updateDocument,
+} from '../common';
+
+const collection = db.collection('apiClients');
+
+const create = async (data) => {
+  data = {
+    ...data,
+    clientId: crypto.randomUUID(),
+  };
+  if (!validateCreateProps(props, data)) {
+    throw new Error('Invalid data');
+  }
+  return createDocument(collection, data);
+};
+
+const update = async (clientRef, data) => {
+  if (!clientRef) {
+    throw new Error('Missing client reference');
+  }
+  data.description = data.description || '';
+  validateUpdateProps(props, data);
+  return updateDocument(clientRef, data);
+};
+
+const archive = async (clientRef) => {
+  if (!clientRef) {
+    throw new Error('Missing client reference');
+  }
+  try {
+    return updateDocument(clientRef, { archived: true });
+  } catch (error) {
+    throw new Error(`Could not archive client ${clientRef.id}`);
+  }
+};
+
+const remove = async (clientRef) => {
+  if (!clientRef) {
+    throw new Error('Missing client reference');
+  }
+  try {
+    return clientRef.delete();
+  } catch (error) {
+    throw new Error(`Could not delete client ${clientRef.id}`);
+  }
+};
+
+const createSecret = async (clientRef) => {
+  if (!clientRef) {
+    throw new Error('Missing client reference');
+  }
+  try {
+    const secret = crypto.randomUUID();
+    await createDocument(clientRef.collection('secrets'), { secret });
+    return secret;
+  } catch (error) {
+    throw new Error(`Could not create secret for client ${clientRef.id}`);
+  }
+};
+
+const rotateSecret = async (clientRef) => {
+  if (!clientRef) {
+    throw new Error('Missing client reference');
+  }
+  try {
+    const secret = await createSecret(clientRef);
+    await clientRef.update({
+      rotated: serverTimestamp(),
+      rotatedBy: db.collection('users').doc(auth.currentUser.email),
+    });
+    return secret;
+  } catch (error) {
+    console.log(error);
+    throw new Error(`Could not rotate secret for client ${clientRef.id}`);
+  }
+};
+
+export default {
+  collection,
+  create,
+  update,
+  archive,
+  remove,
+  createSecret,
+  rotateSecret,
+};
diff --git a/src/db/ApiClient/index.js b/src/db/ApiClient/index.js
new file mode 100644
index 000000000..3c88cdba1
--- /dev/null
+++ b/src/db/ApiClient/index.js
@@ -0,0 +1,3 @@
+import ApiClient from './ApiClient';
+
+export default ApiClient;
diff --git a/src/db/ApiClient/props.js b/src/db/ApiClient/props.js
new file mode 100644
index 000000000..ca5e68dc6
--- /dev/null
+++ b/src/db/ApiClient/props.js
@@ -0,0 +1,18 @@
+export default {
+  parent: {
+    type: 'reference',
+    required: true,
+  },
+  clientId: {
+    type: 'string',
+    required: true,
+  },
+  name: {
+    type: 'string',
+    required: true,
+  },
+  description: {
+    type: 'string',
+    required: false,
+  },
+};
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index c2fc94be1..27bf190dc 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -121,7 +121,6 @@
     "organization": "Organization",
     "date": "Date",
     "password": "Password",
-    "secret": "API Secret",
     "comment": "Comment",
     "format": "Display",
     "timestamp": "Timestamp",
@@ -197,6 +196,7 @@
     "signIn": "Please sign in",
     "orgs": "Organizations",
     "api": "API",
+    "integrations": "Integrations",
     "resultIndicator": "Result indicator",
     "keyFigures": "Key figures",
     "otherMeasurements": "Other measurements",
@@ -212,7 +212,7 @@
     "step": "Step {step} of {steps}",
     "or": "or",
     "shortcuts": "Shortcuts",
-    "error": "Error"
+    "unknown": "unknown"
   },
   "home": {
     "welcome": "Welcome to {appName}!",
@@ -450,7 +450,6 @@
       "delete": "Delete measurement"
     },
     "apiSecret": "If you are using the API to update key results and/or measurements, you need to write an API Secret UUID here for the API call header (okr-team-secret)",
-    "apiDocs": "API documentation",
     "department": {
       "picture": "Image",
       "create": "Create new department",
@@ -667,6 +666,50 @@
       "csv": "Download raw data (.csv)"
     }
   },
+  "integration": {
+    "info": "Our API offers endpoints to automate updating of key results and measurements. In order to make use of the API, an API client must be created. For each client, an unique ID and secret is generated which must be added as request headers ({clientIdHeader}, {clientSecretHeader}) to each API call. This in addition to a separate API key ({apiKeyHeader}). It is recommended to create a separate client for each application that integrates with the API. This makes it easier to keep track of each application and secrets in use.",
+    "placeholderTitle": "New client",
+    "clientId": "Client ID",
+    "clientSecret": "Secret",
+    "action": {
+      "add": "Create new client",
+      "edit": "Edit client",
+      "delete": "Delete client",
+      "rotate": "Rotate secret",
+      "confirmRotate": "Confirm rotate"
+    },
+    "tag": {
+      "created": "Created {when} by {name}",
+      "edited": "Last edited {when} by {name}",
+      "lastRotated": "Last rotated {when}",
+      "lastActivity": "Last active {when}",
+      "noActivity": "No activity seen yet"
+    },
+    "empty": {
+      "heading": "No clients",
+      "body": "Add one or more clients here in order to make use of our API. This makes it easy to automate updating of key results and/or measurements."
+    },
+    "toast": {
+      "add": "New client created",
+      "addError": "Could not create new client",
+      "update": "The client was updated",
+      "updateError": "Could not update the client",
+      "delete": "The client was deleted",
+      "deleteError": "Could not delete the client",
+      "rotate": "The secret was rotated",
+      "rotateError": "Could not rotate the secret"
+    },
+    "warning": {
+      "secret": "The secret above must be copied and stored in a safe location. It's only shown this one time. It's OK, {closeLink}!",
+      "secretCloseText": "I'm done",
+      "delete": "When deleting, all running applications which uses this client will stop working.",
+      "rotate": "When rotating, all running applications which uses the old secret will stop working.",
+      "deprecation": "It is no longer possible to add/edit the API secret here. Please visit the 'integrations' tab in order to create a new API client. The old secret wil still work for the time being:"
+    },
+    "error": {
+      "loading": "Could not fetch clients: {error}."
+    }
+  },
   "languages": {
     "en-US": "English",
     "nb-NO": "Norwegian"
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 56eb6319c..0670e98ab 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -121,7 +121,6 @@
     "organization": "Organisasjon",
     "date": "Dato",
     "password": "Passord",
-    "secret": "API Hemmelighet",
     "comment": "Kommentar",
     "format": "Visning",
     "timestamp": "Timestamp",
@@ -197,6 +196,7 @@
     "signIn": "Vennligst logg inn",
     "orgs": "Virksomheter",
     "api": "API",
+    "integrations": "Integrasjoner",
     "resultIndicator": "Resultatindikator",
     "keyFigures": "Nøkkeltall",
     "otherMeasurements": "Andre målinger",
@@ -212,7 +212,7 @@
     "step": "Steg {step} av {steps}",
     "or": "eller",
     "shortcuts": "Snarveier",
-    "error": "Feil"
+    "unknown": "ukjent"
   },
   "home": {
     "welcome": "Velkommen til {appName}!",
@@ -450,7 +450,6 @@
       "delete": "Slett måling"
     },
     "apiSecret": "Hvis du har tenkt til å bruke API-et for å oppdatere nøkkelresultater og/eller målinger, så trenger du å skrive inn en streng her som legges inn i headeren til kallet (okr-team-secret)",
-    "apiDocs": "API-dokumentasjon",
     "department": {
       "picture": "Bilde",
       "create": "Opprett nytt produktområde",
@@ -667,6 +666,50 @@
       "csv": "Last ned rådata (.csv)"
     }
   },
+  "integration": {
+    "info": "Vårt API tilbyr funksjonalitet for blant annet å oppdatere nøkkelresultater og/eller målinger maskinelt. For å ta i bruk API-et må man opprette en klient. For hver klient genereres en klient-ID og en hemmelighet som legges inn i headeren til kallet ({clientIdHeader}, {clientSecretHeader}). Dette kommer i tillegg til en egen API-nøkkel ({apiKeyHeader}). Det anbefales å opprette en separat klient for hver enkelt applikasjon man kobler på API-et. Dette gjør det blant annet enklere å holde styr på hvilke hemmeligheter som er i bruk.",
+    "placeholderTitle": "Ny klient",
+    "clientId": "Klient ID",
+    "clientSecret": "Hemmelighet",
+    "action": {
+      "add": "Legg til klient",
+      "edit": "Rediger klient",
+      "delete": "Slett klient",
+      "rotate": "Roter hemmelighet",
+      "confirmRotate": "Bekreft rotering"
+    },
+    "tag": {
+      "created": "Opprettet {when} av {name}",
+      "edited": "Sist endret {when} av {name}",
+      "lastRotated": "Sist rotert {when}",
+      "lastActivity": "Sist aktiv {when}",
+      "noActivity": "Ingen aktivitet registrert enda"
+    },
+    "empty": {
+      "heading": "Ingen klienter",
+      "body": "Legg til en eller flere klienter her for å ta i bruk API-et. Dette gjør det enkelt å oppdatere nøkkelresultater og/eller målinger maskinelt."
+    },
+    "toast": {
+      "add": "Opprettet ny klient",
+      "addError": "Kunne ikke opprette ny klient",
+      "update": "Klienten ble endret",
+      "updateError": "Kunne ikke endre klienten",
+      "delete": "Klienten ble slettet",
+      "deleteError": "Kunne ikke slette klient",
+      "rotate": "Hemmeligheten ble rotert",
+      "rotateError": "Kunne ikke rotere hemmelighet"
+    },
+    "warning": {
+      "secret": "Hemmeligheten over må kopieres og oppbevares et trygt sted. Den vises kun denne ene gangen. Den er grei, {closeLink}!",
+      "secretCloseText": "jeg er ferdig",
+      "delete": "Ved sletting vil alle kjørende applikasjoner som benytter denne klienten slutte å fungere.",
+      "rotate": "Ved rotering vil alle kjørende applikasjoner som benytter gammel hemmelighet slutte å fungere.",
+      "deprecation": "Det er ikke lenger mulig å legge til eller endre API-hemmelighet her. Besøk adminfanen 'integrasjoner' for å opprette en API-klient. Den gamle hemmeligheten fungerer enn så lenge:"
+    },
+    "error": {
+      "loading": "Kunne ikke hente ut klienter: {error}."
+    }
+  },
   "languages": {
     "en-US": "Engelsk",
     "nb-NO": "Norsk"
diff --git a/src/views/ItemAdmin/ItemAdminApiIntegrations.vue b/src/views/ItemAdmin/ItemAdminApiIntegrations.vue
new file mode 100644
index 000000000..2940caf48
--- /dev/null
+++ b/src/views/ItemAdmin/ItemAdminApiIntegrations.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="integrations">
+    <h1 class="pkt-txt-24-medium">{{ $t('general.integrations') }}</h1>
+    <i18n path="integration.info" tag="p">
+      <template #clientIdHeader>
+        <code>okr-client-id</code>
+      </template>
+      <template #clientSecretHeader>
+        <code>okr-client-secret</code>
+      </template>
+      <template #apiKeyHeader>
+        <code>x-api-key</code>
+      </template>
+    </i18n>
+
+    <div v-if="dataLoading"><loading-small /> {{ $t('general.loading') }}</div>
+
+    <pkt-alert v-if="dataLoadingError" skin="error">
+      {{ $t('integration.error.loading', { error: dataLoadingError }) }}
+    </pkt-alert>
+
+    <template v-else-if="apiClients.length">
+      <div>
+        <pkt-button skin="secondary" :disabled="loading" @onClick="create">
+          {{ $t('integration.action.add') }}
+        </pkt-button>
+      </div>
+
+      <api-client-card
+        v-for="client in apiClients"
+        :key="client.id"
+        :client="client"
+        :loading="loading"
+        :visible-secret="client.id === updatedClientId ? updatedClientSecret : null"
+        @hide-secret="hideSecret"
+        @edit="openClientModal"
+        @rotate="rotate"
+        @delete="archive"
+      />
+
+      <api-client-modal
+        v-if="showClientModal && chosenClient"
+        :client="chosenClient"
+        @save="update"
+        @close="closeClientModal"
+      />
+    </template>
+
+    <empty-state
+      v-else
+      :heading="$t('integration.empty.heading')"
+      :body="$t('integration.empty.body')"
+    >
+      <div data-mode="dark">
+        <pkt-button
+          skin="primary"
+          variant="icon-left"
+          icon-name="plus-sign"
+          @onClick="create"
+        >
+          {{ $t('integration.action.add') }}
+        </pkt-button>
+      </div>
+    </empty-state>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from 'vuex';
+import { db } from '@/config/firebaseConfig';
+import { PktButton } from '@oslokommune/punkt-vue2';
+import ApiClient from '@/db/ApiClient';
+
+export default {
+  name: 'ItemAdminApiIntegrations',
+
+  components: {
+    PktAlert: () => import('@oslokommune/punkt-vue2').then(({ PktAlert }) => PktAlert),
+    EmptyState: () => import('@/components/EmptyState.vue'),
+    LoadingSmall: () => import('@/components/LoadingSmall.vue'),
+    ApiClientCard: () => import('@/components/ApiClientCard.vue'),
+    ApiClientModal: () => import('@/components/modals/ApiClientModal.vue'),
+    PktButton,
+  },
+
+  data: () => ({
+    apiClients: [],
+    dataLoading: false,
+    dataLoadingError: null,
+    loading: false,
+    showClientModal: false,
+    chosenClient: null,
+    updatedClientId: null,
+    updatedClientSecret: null,
+  }),
+
+  computed: {
+    ...mapState(['activeItemRef']),
+    ...mapGetters(['isAdmin', 'hasEditRights']),
+  },
+
+  watch: {
+    activeItemRef: {
+      immediate: true,
+      async handler(activeItemRef) {
+        this.dataLoading = true;
+        this.dataLoadingError = null;
+        await this.$bind(
+          'apiClients',
+          db
+            .collection('apiClients')
+            .where('parent', '==', activeItemRef)
+            .where('archived', '==', false)
+            .orderBy('created', 'desc')
+        ).catch((error) => {
+          this.dataLoadingError = error.code ? error.code : error;
+        });
+        this.dataLoading = false;
+      },
+    },
+  },
+
+  methods: {
+    async create() {
+      try {
+        this.loading = true;
+
+        const clientRef = await ApiClient.create({
+          parent: this.activeItemRef,
+          name: this.$t('integration.placeholderTitle'),
+        });
+
+        try {
+          const secret = await ApiClient.createSecret(clientRef);
+          this.updatedClientId = clientRef.id;
+          this.updatedClientSecret = secret;
+        } catch (error) {
+          await ApiClient.remove(clientRef);
+          throw error;
+        }
+
+        this.$toasted.show(this.$t('integration.toast.add'));
+      } catch (error) {
+        console.log(error);
+        this.$toasted.error(this.$t('integration.toast.addError'));
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async update(client, data) {
+      try {
+        this.loading = true;
+        const clientRef = ApiClient.collection.doc(client.id);
+        await ApiClient.update(clientRef, data);
+        this.$toasted.show(this.$t('integration.toast.update'));
+      } catch (error) {
+        console.log(error);
+        this.$toasted.error(this.$t('integration.toast.updateError'));
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async archive(client) {
+      try {
+        this.loading = true;
+        const clientRef = ApiClient.collection.doc(client.id);
+        await ApiClient.archive(clientRef);
+        this.$toasted.show(this.$t('integration.toast.delete'));
+      } catch (error) {
+        console.log(error);
+        this.$toasted.error(this.$t('integration.toast.deleteError'));
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    async rotate(client) {
+      try {
+        this.loading = true;
+        const clientRef = ApiClient.collection.doc(client.id);
+        const secret = await ApiClient.rotateSecret(clientRef);
+        this.updatedClientId = clientRef.id;
+        this.updatedClientSecret = secret;
+        this.$toasted.show(this.$t('integration.toast.rotate'));
+      } catch (error) {
+        console.log(error);
+        this.$toasted.error(this.$t('integration.toast.rotateError'));
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    hideSecret() {
+      this.updatedClientId = null;
+      this.updatedClientSecret = null;
+    },
+
+    openClientModal(client) {
+      this.showClientModal = true;
+      this.chosenClient = client;
+    },
+
+    closeClientModal() {
+      this.showClientModal = false;
+      this.chosenClient = null;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
+
+.integrations {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding-bottom: 3rem;
+}
+</style>

From 3da115fcca23a3a2c6adb5818020c5024f247008 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 11 Aug 2023 09:42:10 +0200
Subject: [PATCH 03/16] Support new auth method when updating KPIs and key
 results using the API

---
 functions/api/helpers.js       | 77 ++++++++++++++++++++++++++++
 functions/api/routes/keyres.js | 37 ++++----------
 functions/api/routes/kpi.js    | 91 ++++++----------------------------
 functions/api/validateRules.js | 17 +++++++
 functions/api/validators.js    | 30 +++++++++--
 functions/package-lock.json    | 30 +++++------
 functions/package.json         |  2 +-
 7 files changed, 160 insertions(+), 124 deletions(-)
 create mode 100644 functions/api/validateRules.js

diff --git a/functions/api/helpers.js b/functions/api/helpers.js
index 5807213b3..abe8b4312 100644
--- a/functions/api/helpers.js
+++ b/functions/api/helpers.js
@@ -209,3 +209,80 @@ function isKPIStale(updateFrequency, progressRecord) {
     return null;
   }
 }
+
+/**
+ * Return true if the client is authorized to perform the requested API
+ * operation. Set response data and return false in case the client is not
+ * authorized based on provided request parameters.
+ *
+ * `parentRef` is the item to check API authorization against.
+ * `req` is the HTTP request object.
+ * `res` is the HTTP response object.
+ */
+export async function checkApiAuth(parentRef, req, res) {
+  const parentData = await parentRef.get().then((snapshot) => snapshot.data());
+
+  const {
+    'okr-client-id': clientId,
+    'okr-client-secret': clientSecret,
+    'okr-team-secret': teamSecret,
+  } = req.matchedData;
+
+  if (clientId && clientSecret) {
+    const db = getFirestore();
+    const apiClientRef = await db
+      .collection('apiClients')
+      .where('parent', '==', parentRef)
+      .where('clientId', '==', clientId)
+      .where('archived', '==', false)
+      .limit(1)
+      .get()
+      .then((snapshot) => (!snapshot.empty ? snapshot.docs[0].ref : null));
+
+    if (!apiClientRef) {
+      const { name: parentName } = parentData;
+      res.status(401).json({
+        message:
+          `No API client \`${clientId}\` exists for '${parentName}'. Please ` +
+          'create one using the OKR Tracker admin interface.',
+      });
+      return false;
+    }
+
+    const apiClientSecret = await apiClientRef
+      .collection('secrets')
+      .where('archived', '==', false)
+      .orderBy('created', 'desc')
+      .limit(1)
+      .get()
+      .then((snapshot) => (!snapshot.empty ? snapshot.docs[0].data() : null));
+
+    if (!apiClientSecret || apiClientSecret.secret !== clientSecret) {
+      res.status(401).json({
+        message:
+          `Invalid client secret provided for API client \`${clientId}\`. ` +
+          'Check the OKR Tracker admin interface for how to rotate the secret.',
+      });
+      return false;
+    }
+
+    await apiClientRef.update({ used: FieldValue.serverTimestamp() });
+    return true;
+  }
+
+  if (!parentData.secret) {
+    res.status(401).json({
+      message:
+        `'${parentData.name}' is not set up for API usage. Please set ` +
+        'a secret using the OKR Tracker admin interface.',
+    });
+    return false;
+  }
+
+  if (parentData.secret !== teamSecret) {
+    res.status(401).json({ message: 'Wrong `okr-team-secret`' });
+    return false;
+  }
+
+  return true;
+}
diff --git a/functions/api/routes/keyres.js b/functions/api/routes/keyres.js
index 83b552598..f5260bd01 100644
--- a/functions/api/routes/keyres.js
+++ b/functions/api/routes/keyres.js
@@ -2,37 +2,30 @@ import express from 'express';
 import validator from 'express-validator';
 
 import { getFirestore } from 'firebase-admin/firestore';
+import { checkApiAuth } from '../helpers.js';
 import {
   commentValidator,
   idValidator,
   progressValidator,
-  teamSecretValidator,
+  clientSecretValidator,
 } from '../validators.js';
+import validateRules from '../validateRules.js';
 
-const { param, matchedData, validationResult } = validator;
+const { param, matchedData } = validator;
 const router = express.Router();
 
 router.post(
   '/:id',
-  teamSecretValidator,
+  clientSecretValidator,
   idValidator,
   progressValidator,
   commentValidator,
+  validateRules,
   async (req, res) => {
-    const result = validationResult(req);
-
-    if (!result.isEmpty()) {
-      res.status(400).json({
-        message: 'Invalid request data',
-        errors: result.mapped(),
-      });
-      return;
-    }
-
-    const { 'okr-team-secret': teamSecret, id, progress, comment } = matchedData(req);
+    const { id, progress, comment } = req.matchedData;
 
     const db = getFirestore();
-    const collection = await db.collection('keyResults');
+    const collection = db.collection('keyResults');
     let keyRes;
 
     try {
@@ -47,19 +40,7 @@ router.post(
 
       const { parent } = keyRes.data();
 
-      const parentData = await parent.get().then((snapshot) => snapshot.data());
-
-      if (!parentData.secret) {
-        res
-          .status(401)
-          .send(
-            `'${parentData.name}' is not set up for API usage. Please set ` +
-              'a secret using the OKR Tracker admin interface.'
-          );
-        return;
-      }
-      if (parentData.secret !== teamSecret) {
-        res.status(401).send('Wrong okr-team-secret');
+      if (!(await checkApiAuth(parent, req, res))) {
         return;
       }
 
diff --git a/functions/api/routes/kpi.js b/functions/api/routes/kpi.js
index 5784e879a..24dfa589b 100644
--- a/functions/api/routes/kpi.js
+++ b/functions/api/routes/kpi.js
@@ -8,38 +8,30 @@ import {
   isArchived,
   refreshKPILatestValue,
   updateKPIProgressionValue,
+  checkApiAuth,
 } from '../helpers.js';
 import {
   commentValidator,
   dateValidator,
   idValidator,
   progressValidator,
-  teamSecretValidator,
+  clientSecretValidator,
   valueValidator,
 } from '../validators.js';
+import validateRules from '../validateRules.js';
 
-const { matchedData, validationResult } = validator;
+const { matchedData } = validator;
 const router = express.Router();
 
 router.post(
   '/:id',
-  teamSecretValidator,
+  clientSecretValidator,
   idValidator,
   progressValidator,
   commentValidator,
+  validateRules,
   async (req, res) => {
-    const result = validationResult(req);
-
-    if (!result.isEmpty()) {
-      res.status(400).json({
-        message: 'Invalid request data',
-        errors: result.mapped(),
-      });
-      return;
-    }
-
-    const { 'okr-team-secret': teamSecret, id, progress, comment } = matchedData(req);
-
+    const { id, progress, comment } = req.matchedData;
     const db = getFirestore();
 
     try {
@@ -54,19 +46,7 @@ router.post(
 
       const { parent } = kpi.data();
 
-      const parentData = await parent.get().then((snapshot) => snapshot.data());
-
-      if (!parentData.secret) {
-        res
-          .status(401)
-          .send(
-            `'${parentData.name}' is not set up for API usage. Please set ` +
-              'a secret using the OKR Tracker admin interface.'
-          );
-        return;
-      }
-      if (parentData.secret !== teamSecret) {
-        res.status(401).send('Wrong okr-team-secret');
+      if (!(await checkApiAuth(parent, req, res))) {
         return;
       }
 
@@ -188,25 +168,15 @@ router.get('/:id/values', idValidator, async (req, res) => {
 
 router.put(
   '/:id/values/:date',
-  teamSecretValidator,
+  clientSecretValidator,
   idValidator,
   dateValidator,
   valueValidator,
   commentValidator,
+  validateRules,
   async (req, res) => {
-    const result = validationResult(req);
-
-    if (!result.isEmpty()) {
-      res.status(400).json({
-        message: 'Invalid request data',
-        errors: result.mapped(),
-      });
-      return;
-    }
-
-    const { 'okr-team-secret': teamSecret, id, date, value, comment } = matchedData(req);
+    const { id, date, value, comment } = req.matchedData;
     const formattedDate = format(date, 'yyyy-MM-dd');
-
     const db = getFirestore();
 
     try {
@@ -220,18 +190,8 @@ router.put(
       }
 
       const { parent } = kpi.data();
-      const parentData = await parent.get().then((snapshot) => snapshot.data());
 
-      if (!parentData.secret) {
-        res.status(401).json({
-          message:
-            `'${parentData.name}' is not set up for API usage. Please set ` +
-            'a secret using the OKR Tracker admin interface.',
-        });
-        return;
-      }
-      if (parentData.secret !== teamSecret) {
-        res.status(401).json({ message: 'Wrong okr-team-secret' });
+      if (!(await checkApiAuth(parent, req, res))) {
         return;
       }
 
@@ -250,21 +210,12 @@ router.put(
 
 router.delete(
   '/:id/values/:date',
-  teamSecretValidator,
+  clientSecretValidator,
   idValidator,
   dateValidator,
+  validateRules,
   async (req, res) => {
-    const result = validationResult(req);
-
-    if (!result.isEmpty()) {
-      res.status(400).json({
-        message: 'Invalid request data',
-        errors: result.mapped(),
-      });
-      return;
-    }
-
-    const { 'okr-team-secret': teamSecret, id, date } = matchedData(req);
+    const { id, date } = req.matchedData;
     const formattedDate = format(date, 'yyyy-MM-dd');
 
     const db = getFirestore();
@@ -280,18 +231,8 @@ router.delete(
       }
 
       const { parent } = kpi.data();
-      const parentData = await parent.get().then((snapshot) => snapshot.data());
 
-      if (!parentData.secret) {
-        res.status(401).json({
-          message:
-            `'${parentData.name}' is not set up for API usage. Please set ` +
-            'a secret using the OKR Tracker admin interface.',
-        });
-        return;
-      }
-      if (parentData.secret !== teamSecret) {
-        res.status(401).json({ message: 'Wrong okr-team-secret' });
+      if (!(await checkApiAuth(parent, req, res))) {
         return;
       }
 
diff --git a/functions/api/validateRules.js b/functions/api/validateRules.js
new file mode 100644
index 000000000..9c0599d85
--- /dev/null
+++ b/functions/api/validateRules.js
@@ -0,0 +1,17 @@
+import { matchedData, validationResult } from 'express-validator';
+
+const validateRules = (req, res, next) => {
+  const errors = validationResult(req);
+
+  if (errors.isEmpty()) {
+    req.matchedData = matchedData(req);
+    return next();
+  }
+
+  return res.status(400).json({
+    message: 'Invalid request data',
+    errors: errors.mapped(),
+  });
+};
+
+export default validateRules;
diff --git a/functions/api/validators.js b/functions/api/validators.js
index de9ccff7c..29edc886c 100644
--- a/functions/api/validators.js
+++ b/functions/api/validators.js
@@ -1,11 +1,31 @@
 import validator from 'express-validator';
 
-const { body, header, param } = validator;
+const { body, header, param, oneOf } = validator;
 
-export const teamSecretValidator = header('okr-team-secret')
-  .not()
-  .isEmpty()
-  .withMessage('The `okr-team-secret` header is required');
+// Allow usage of the `okr-team-secret` header for now, until
+// all existing clients are migrated.
+export const clientSecretValidator = oneOf(
+  [
+    header('okr-team-secret')
+      .not()
+      .isEmpty()
+      .withMessage('The `okr-team-secret` header is required'),
+    [
+      header('okr-client-id')
+        .not()
+        .isEmpty()
+        .withMessage('The `okr-client-id` header is required'),
+      header('okr-client-secret')
+        .not()
+        .isEmpty()
+        .withMessage('The `okr-client-secret` header is required'),
+    ],
+  ],
+  {
+    message:
+      'A pair of `okr-client-id`/`okr-client-secret` headers or an `okr-team-secret` header is required',
+  }
+);
 
 export const adminSecretValidator = header('okr-admin-secret')
   .not()
diff --git a/functions/package-lock.json b/functions/package-lock.json
index 42d6a4f08..8e68077c1 100644
--- a/functions/package-lock.json
+++ b/functions/package-lock.json
@@ -14,7 +14,7 @@
         "date-fns": "^2.27.0",
         "express": "^4.18.2",
         "express-rate-limit": "^6.4.0",
-        "express-validator": "^6.14.0",
+        "express-validator": "^7.0.1",
         "firebase-admin": "^11.4.1",
         "firebase-functions": "^3.24.1",
         "google-auth-library": "^7.11.0",
@@ -1406,12 +1406,12 @@
       }
     },
     "node_modules/express-validator": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/express-validator/-/express-validator-6.14.0.tgz",
-      "integrity": "sha512-ZWHJfnRgePp3FKRSKMtnZVnD1s8ZchWD+jSl7UMseGIqhweCo1Z9916/xXBbJAa6PrA3pUZfkOvIsHZG4ZtIMw==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/express-validator/-/express-validator-7.0.1.tgz",
+      "integrity": "sha512-oB+z9QOzQIE8FnlINqyIFA8eIckahC6qc8KtqLdLJcU3/phVyuhXH3bA4qzcrhme+1RYaCSwrq+TlZ/kAKIARA==",
       "dependencies": {
         "lodash": "^4.17.21",
-        "validator": "^13.7.0"
+        "validator": "^13.9.0"
       },
       "engines": {
         "node": ">= 8.0.0"
@@ -3307,9 +3307,9 @@
       }
     },
     "node_modules/validator": {
-      "version": "13.7.0",
-      "resolved": "https://registry.npmjs.org/validator/-/validator-13.7.0.tgz",
-      "integrity": "sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw==",
+      "version": "13.11.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.11.0.tgz",
+      "integrity": "sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ==",
       "engines": {
         "node": ">= 0.10"
       }
@@ -4562,12 +4562,12 @@
       "requires": {}
     },
     "express-validator": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/express-validator/-/express-validator-6.14.0.tgz",
-      "integrity": "sha512-ZWHJfnRgePp3FKRSKMtnZVnD1s8ZchWD+jSl7UMseGIqhweCo1Z9916/xXBbJAa6PrA3pUZfkOvIsHZG4ZtIMw==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/express-validator/-/express-validator-7.0.1.tgz",
+      "integrity": "sha512-oB+z9QOzQIE8FnlINqyIFA8eIckahC6qc8KtqLdLJcU3/phVyuhXH3bA4qzcrhme+1RYaCSwrq+TlZ/kAKIARA==",
       "requires": {
         "lodash": "^4.17.21",
-        "validator": "^13.7.0"
+        "validator": "^13.9.0"
       }
     },
     "extend": {
@@ -5999,9 +5999,9 @@
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
     "validator": {
-      "version": "13.7.0",
-      "resolved": "https://registry.npmjs.org/validator/-/validator-13.7.0.tgz",
-      "integrity": "sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw=="
+      "version": "13.11.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.11.0.tgz",
+      "integrity": "sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ=="
     },
     "vary": {
       "version": "1.1.2",
diff --git a/functions/package.json b/functions/package.json
index 599b74454..50e407d82 100644
--- a/functions/package.json
+++ b/functions/package.json
@@ -22,7 +22,7 @@
     "date-fns": "^2.27.0",
     "express": "^4.18.2",
     "express-rate-limit": "^6.4.0",
-    "express-validator": "^6.14.0",
+    "express-validator": "^7.0.1",
     "firebase-admin": "^11.4.1",
     "firebase-functions": "^3.24.1",
     "google-auth-library": "^7.11.0",

From bf7b4fe30f837f1bb89fde89cd3dace672f6e2d8 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 11 Aug 2023 10:49:37 +0200
Subject: [PATCH 04/16] Update API specification with new auth mechanism

---
 public/openapi.yaml | 57 ++++++++++++++++++++++++++++-----------------
 1 file changed, 35 insertions(+), 22 deletions(-)

diff --git a/public/openapi.yaml b/public/openapi.yaml
index 4d42731f6..ccf7d7606 100644
--- a/public/openapi.yaml
+++ b/public/openapi.yaml
@@ -21,7 +21,7 @@ x-google-backend:
   path_translation: APPEND_PATH_TO_ADDRESS
   protocol: h2
 security:
-  - api_key: []
+  - apiKey: []
 
 paths:
   /kpi:
@@ -60,7 +60,9 @@ paths:
       summary: Post KPI progression.
       operationId: postKPI
       security:
-        - api_key: []
+        - apiKey: []
+          apiClientId: []
+          apiClientSecret: []
       parameters:
         - name: id
           in: path
@@ -81,10 +83,6 @@ paths:
             example:
               progress: 123
               comment: A fine measurement
-        - name: okr-team-secret
-          in: header
-          description: Identify yourself with the secret you chose in your Team's settings
-          type: string
       responses:
         '200':
           description: A successful response
@@ -131,13 +129,13 @@ paths:
         required: true
         type: string
         format: date
-      - name: okr-team-secret
-        in: header
-        description: Identify yourself with the secret you chose in your Team's settings
-        type: string
     put:
       summary: Create or update KPI progression value.
       operationId: updateKPIProgressionValue
+      security:
+        - apiKey: []
+          apiClientId: []
+          apiClientSecret: []
       parameters:
         - name: value
           in: body
@@ -170,6 +168,10 @@ paths:
     delete:
       summary: Delete KPI progression value.
       operationId: deleteKPIProgressionValue
+      security:
+        - apiKey: []
+          apiClientId: []
+          apiClientSecret: []
       responses:
         200:
           description: A successful response
@@ -188,8 +190,6 @@ paths:
     get:
       summary: Get key result.
       operationId: getKeyRes
-      security:
-        - api_key: []
       parameters:
         - name: id
           in: path
@@ -209,7 +209,9 @@ paths:
       summary: Post key result progression.
       operationId: postKeyRes
       security:
-        - api_key: []
+        - apiKey: []
+          apiClientId: []
+          apiClientSecret: []
       parameters:
         - name: id
           in: path
@@ -262,7 +264,8 @@ paths:
       summary: Update user details.
       operationId: patchUser
       security:
-        - api_key: []
+        - apiKey: []
+          okrAdminSecret: []
       parameters:
         - name: id
           in: path
@@ -283,10 +286,6 @@ paths:
             example:
               displayName: Foo Bar
               position: director
-        - name: okr-admin-secret
-          in: header
-          description: OKR Tracker admin secret value
-          type: string
       responses:
         '200':
           description: A successful response
@@ -303,10 +302,24 @@ paths:
           $ref: '#/responses/Unavailable'
 
 securityDefinitions:
-  api_key:
-    type: "apiKey"
-    name: "x-api-key"
-    in: "header"
+  apiKey:
+    type: apiKey
+    name: x-api-key
+    in: header
+  apiClientId:
+    type: apiKey
+    name: okr-client-id
+    in: header
+    description: Identify yourself with the identifier of your API client
+  apiClientSecret:
+    type: apiKey
+    name: okr-client-secret
+    in: header
+    description: Identify yourself with the secret of your API client
+  okrAdminSecret:
+    type: apiKey
+    name: okr-admin-secret
+    in: header
 
 definitions:
   Keyres:

From e60f508570a59b057a46020ca92ce97ee51a38f6 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 11 Aug 2023 10:52:17 +0200
Subject: [PATCH 05/16] Add initial unit tests for Firestore rules

---
 tests/firebase/firestore.test.js | 86 ++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)

diff --git a/tests/firebase/firestore.test.js b/tests/firebase/firestore.test.js
index 6efe0880b..b3633f7fd 100644
--- a/tests/firebase/firestore.test.js
+++ b/tests/firebase/firestore.test.js
@@ -30,6 +30,7 @@ describe('Test Firestore rules', () => {
       const db = context.firestore();
       const users = db.collection('users');
       const organizations = db.collection('organizations');
+      const apiClients = db.collection('apiClients');
 
       await users
         .doc('superadmin@example.com')
@@ -40,6 +41,14 @@ describe('Test Firestore rules', () => {
       await organizations
         .doc('organization')
         .set({ name: 'Organization', team: [users.doc('user@example.com')] });
+
+      await apiClients
+        .doc('organization-api-client')
+        .set({ parent: organizations.doc('organization'), clientId: 'foo' });
+      await apiClients
+        .doc('organization-api-client')
+        .collection('secrets')
+        .add({ secret: 'bar' });
     });
   });
 
@@ -105,6 +114,83 @@ describe('Test Firestore rules', () => {
       await expectPermissionDenied(organizations.add({ foo: 'bar' }));
     });
   });
+
+  test('anonymous users cannot read api clients', async () => {
+    await withUnauthenticatedUser(testEnv, async (db) => {
+      const clients = db.collection('apiClients');
+      await expectPermissionDenied(clients.get());
+    });
+  });
+
+  test('users cannot read any random api client', async () => {
+    await withAuthenticatedUser(testEnv, 'user@example.com', async (db) => {
+      const clients = db.collection('apiClients');
+      await expectPermissionDenied(clients.get());
+    });
+  });
+
+  test('members can read own api clients', async () => {
+    await withAuthenticatedUser(testEnv, 'user@example.com', async (db) => {
+      const orgRef = db.collection('organizations').doc('organization');
+      const clients = db.collection('apiClients').where('parent', '==', orgRef);
+      const result = await clients.get();
+      expectGetSucceeds(result);
+      expect(result).toHaveProperty('size', 1);
+    });
+
+    await withAuthenticatedUser(testEnv, 'user2@example.com', async (db) => {
+      const orgRef = db.collection('organizations').doc('organization');
+      const clients = db.collection('apiClients').where('parent', '==', orgRef);
+      await expectPermissionDenied(clients.get());
+    });
+  });
+
+  test('members can write own api clients and secrets', async () => {
+    await withAuthenticatedUser(testEnv, 'user@example.com', async (db) => {
+      const apiClientRef = db.collection('apiClients').doc('organization-api-client');
+      await expectUpdateSucceeds(apiClientRef.update({ name: 'foo' }));
+      const apiClientSnap = await apiClientRef.get();
+      expect(apiClientSnap.data().name).toBe('foo');
+      const secrets = apiClientRef.collection('secrets');
+      await expectUpdateSucceeds(secrets.doc('foo').set({ foo: 'bar' }));
+    });
+
+    await withAuthenticatedUser(testEnv, 'user2@example.com', async (db) => {
+      const apiClientRef = db.collection('apiClients').doc('organization-api-client');
+      await expectPermissionDenied(apiClientRef.update({ name: 'foo' }));
+    });
+  });
+
+  test('super admin can read any api client', async () => {
+    await withAuthenticatedUser(testEnv, 'superadmin@example.com', async (db) => {
+      const clients = db.collection('apiClients');
+      const result = await clients.get();
+      expectGetSucceeds(result);
+      expect(result).toHaveProperty('size', 1);
+    });
+  });
+
+  test('super admin can write any api client', async () => {
+    await withAuthenticatedUser(testEnv, 'superadmin@example.com', async (db) => {
+      const clients = db.collection('apiClients');
+      const apiClientRef = clients.doc('organization-api-client');
+      await expectUpdateSucceeds(apiClientRef.update({ name: 'foo' }));
+      const secrets = apiClientRef.collection('secrets');
+      await expectUpdateSucceeds(secrets.doc('foo').set({ foo: 'bar' }));
+    });
+  });
+
+  test('no one can read api client secrets', async () => {
+    async function readApiClientSecrets(db) {
+      const apiClientRef = db.collection('apiClients').doc('organization-api-client');
+      const apiClientSecrets = apiClientRef.collection('secrets');
+      await expectPermissionDenied(apiClientSecrets.get());
+    }
+
+    await withUnauthenticatedUser(testEnv, readApiClientSecrets);
+    await withAuthenticatedUser(testEnv, 'user@example.com', readApiClientSecrets);
+    await withAuthenticatedUser(testEnv, 'superadmin@example.com', readApiClientSecrets);
+  });
 });
 
 afterAll(async () => {

From c0970dfbaa3600a07c9d1cbb0c5d59a95498ab9e Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 11 Aug 2023 11:04:45 +0200
Subject: [PATCH 06/16] Update changelog

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9be2dffdf..8af7acf7d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,11 @@ All notable changes to this project will be documented in this file. The format
 
 - New key results are now given a start value of 0, a target value of 100, and
   percentage as unit of measurement by default.
+- The API authorization mechanism has been reworked. The API now accepts a pair
+  of `okr-client-id` and `okr-client-secret` headers to authorize clients.
+  Clients can be created using the admin interface. The existing
+  `okr-team-secret` header is considered deprecated and will continue to work
+  for existing clients until migrated.
 
 ### Fixed
 

From 52ca3154ffc28d73155e29fe237fb8f5a5595600 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 22 Sep 2023 09:26:49 +0200
Subject: [PATCH 07/16] Add integrations tab to main item navbar

---
 src/components/Navigation/SiteHeader.vue      | 42 +++++++++++++++----
 .../Navigation/UserMenuDropdown.vue           | 11 ++---
 src/components/drawers/EditItemDrawer.vue     | 21 +++++-----
 src/locale/locales/en-US.json                 |  5 +--
 src/locale/locales/nb-NO.json                 |  5 +--
 src/router/index.js                           |  6 +++
 src/router/router-guards/index.js             |  1 +
 src/router/router-guards/itemIntegrations.js  | 27 ++++++++++++
 .../ItemIntegrations.vue}                     | 27 ++++--------
 9 files changed, 98 insertions(+), 47 deletions(-)
 create mode 100644 src/router/router-guards/itemIntegrations.js
 rename src/views/{ItemAdmin/ItemAdminApiIntegrations.vue => Item/ItemIntegrations.vue} (92%)

diff --git a/src/components/Navigation/SiteHeader.vue b/src/components/Navigation/SiteHeader.vue
index 49734fe15..b38643d61 100644
--- a/src/components/Navigation/SiteHeader.vue
+++ b/src/components/Navigation/SiteHeader.vue
@@ -15,18 +15,27 @@
       </nav-menu>
 
       <!-- Item tabs -->
-      <nav-menu v-if="activeItem && $route.params?.slug" tabs>
+      <nav-menu v-if="activeItem && $route.params?.slug" class="item-menu" tabs>
         <nav-menu-item
           v-for="(itemMenuTab, index) in itemTabs"
           :key="`item_tabs_${index}`"
+          v-tooltip.bottom="itemMenuTab.tooltip"
+          :class="['item-menu__item', `item-menu__item--${itemMenuTab.pull || 'left'}`]"
           :route="itemMenuTab.route"
           :active="itemMenuTab.active"
         >
           <template #text>
-            <span class="pkt-show-tablet-big-up">{{ itemMenuTab.label }}</span>
-            <span class="pkt-hide-tablet-big-up">
-              {{ itemMenuTab.shortLabel || itemMenuTab.label }}
-            </span>
+            <pkt-icon
+              v-if="itemMenuTab.icon"
+              class="nav-menu-item__icon"
+              :name="itemMenuTab.icon"
+            />
+            <template v-if="itemMenuTab.label">
+              <span class="pkt-show-tablet-big-up">{{ itemMenuTab.label }}</span>
+              <span class="pkt-hide-tablet-big-up">
+                {{ itemMenuTab.shortLabel || itemMenuTab.label }}
+              </span>
+            </template>
           </template>
         </nav-menu-item>
       </nav-menu>
@@ -47,7 +56,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import i18n from '@/locale/i18n';
 import SiteMenuDropdown from '@/components/Navigation/SiteMenuDropdown.vue';
 import getActiveItemType from '@/util/getActiveItemType';
@@ -70,6 +79,7 @@ export default {
   },
 
   computed: {
+    ...mapGetters(['hasEditRights']),
     ...mapState(['activeItem', 'activeKeyResult', 'activeObjective', 'user']),
 
     siteMenuLabel() {
@@ -88,6 +98,7 @@ export default {
         (parts.includes('ItemHome') ||
           parts.includes('ItemMeasurements') ||
           parts.includes('ItemAbout') ||
+          parts.includes('ItemIntegrations') ||
           parts.includes('KeyResultHome') ||
           parts.includes('ObjectiveHome')) &&
         this.activeItem
@@ -99,7 +110,7 @@ export default {
     },
 
     itemTabs() {
-      return [
+      const items = [
         {
           route: { name: 'ItemHome' },
           label: this.$t('general.OKRsLong'),
@@ -116,6 +127,15 @@ export default {
           shortLabel: this.$t('about.about'),
         },
       ];
+      if (this.hasEditRights) {
+        items.push({
+          route: { name: 'ItemIntegrations' },
+          icon: 'crane',
+          tooltip: this.$t('general.integrations'),
+          pull: 'right',
+        });
+      }
+      return items;
     },
 
     aboutLabel() {
@@ -171,6 +191,14 @@ export default {
   }
 }
 
+.item-menu {
+  flex: 1;
+
+  &__item--right {
+    margin-left: auto;
+  }
+}
+
 .user-menu {
   margin-left: auto;
 
diff --git a/src/components/Navigation/UserMenuDropdown.vue b/src/components/Navigation/UserMenuDropdown.vue
index 56a87d645..4e01f49c2 100644
--- a/src/components/Navigation/UserMenuDropdown.vue
+++ b/src/components/Navigation/UserMenuDropdown.vue
@@ -64,7 +64,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 import { db, auth } from '@/config/firebaseConfig';
 import User from '@/db/User';
 import { PktButton } from '@oslokommune/punkt-vue2';
@@ -104,6 +104,8 @@ export default {
   }),
 
   computed: {
+    ...mapState(['activeItem']),
+
     me() {
       return this.$store.state.user?.id === this.user?.id;
     },
@@ -120,7 +122,7 @@ export default {
         {
           key: 'api',
           text: this.$t('general.api'),
-          icon: 'crane',
+          icon: 'document-code',
           route: { name: 'Api' },
         },
         {
@@ -250,12 +252,11 @@ $-dropdown-max-height: calc(100vh - 3.5rem);
   &__footer {
     display: flex;
     gap: 1rem;
-    justify-content: flex-end;
     padding: 1rem;
     border-top: 1px solid var(--color-grayscale-20);
 
-    button[name='admin'] {
-      margin-right: auto;
+    button:nth-last-child(2) {
+      margin-left: auto;
     }
   }
 }
diff --git a/src/components/drawers/EditItemDrawer.vue b/src/components/drawers/EditItemDrawer.vue
index dbb7612e0..d5c0f4ae6 100644
--- a/src/components/drawers/EditItemDrawer.vue
+++ b/src/components/drawers/EditItemDrawer.vue
@@ -91,15 +91,15 @@
             </v-select>
           </div>
 
-          <form-component
-            v-model="thisItem.secret"
-            input-type="input"
-            name="secret"
-            :disabled="thisItem?.archived"
-            :label="$t('fields.secret')"
-          >
-            <template #help><span v-html="$t('admin.apiSecret')" /></template>
-          </form-component>
+          <pkt-alert v-if="thisItem.secret" skin="warning" class="mb-size-32">
+            {{ $t('integration.warning.deprecation') }}
+            <input
+              class="pkt-form-input mt-size-16"
+              :value="thisItem.secret"
+              :disabled="true"
+              :readonly="true"
+            />
+          </pkt-alert>
         </template>
 
         <template v-if="!thisItem?.archived" #actions="{ handleSubmit, submitDisabled }">
@@ -259,7 +259,7 @@ export default {
 
         try {
           const { id: itemId } = this.item;
-          const { name, missionStatement, targetAudience, secret } = this.thisItem;
+          const { name, missionStatement, targetAudience } = this.thisItem;
 
           const team = this.thisItem.team.map((user) =>
             db.collection('users').doc(user.id)
@@ -270,7 +270,6 @@ export default {
             team,
             missionStatement,
             targetAudience: targetAudience === undefined ? '' : targetAudience,
-            secret: secret === undefined ? '' : secret,
           };
 
           if (this.type === 'organization') {
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index 27bf190dc..a545f4831 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -195,7 +195,7 @@
     "frontPage": "Front page",
     "signIn": "Please sign in",
     "orgs": "Organizations",
-    "api": "API",
+    "api": "API documentation",
     "integrations": "Integrations",
     "resultIndicator": "Result indicator",
     "keyFigures": "Key figures",
@@ -449,7 +449,6 @@
       "change": "Edit measurement",
       "delete": "Delete measurement"
     },
-    "apiSecret": "If you are using the API to update key results and/or measurements, you need to write an API Secret UUID here for the API call header (okr-team-secret)",
     "department": {
       "picture": "Image",
       "create": "Create new department",
@@ -704,7 +703,7 @@
       "secretCloseText": "I'm done",
       "delete": "When deleting, all running applications which uses this client will stop working.",
       "rotate": "When rotating, all running applications which uses the old secret will stop working.",
-      "deprecation": "It is no longer possible to add/edit the API secret here. Please visit the 'integrations' tab in order to create a new API client. The old secret wil still work for the time being:"
+      "deprecation": "It is no longer possible to add/edit the API secret here. Please visit the 'integrations' tab in the menu to create a new API client. The old secret wil still work for the time being:"
     },
     "error": {
       "loading": "Could not fetch clients: {error}."
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 0670e98ab..114bf9bd2 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -195,7 +195,7 @@
     "frontPage": "Forside",
     "signIn": "Vennligst logg inn",
     "orgs": "Virksomheter",
-    "api": "API",
+    "api": "API-dokumentasjon",
     "integrations": "Integrasjoner",
     "resultIndicator": "Resultatindikator",
     "keyFigures": "Nøkkeltall",
@@ -449,7 +449,6 @@
       "change": "Rediger måling",
       "delete": "Slett måling"
     },
-    "apiSecret": "Hvis du har tenkt til å bruke API-et for å oppdatere nøkkelresultater og/eller målinger, så trenger du å skrive inn en streng her som legges inn i headeren til kallet (okr-team-secret)",
     "department": {
       "picture": "Bilde",
       "create": "Opprett nytt produktområde",
@@ -704,7 +703,7 @@
       "secretCloseText": "jeg er ferdig",
       "delete": "Ved sletting vil alle kjørende applikasjoner som benytter denne klienten slutte å fungere.",
       "rotate": "Ved rotering vil alle kjørende applikasjoner som benytter gammel hemmelighet slutte å fungere.",
-      "deprecation": "Det er ikke lenger mulig å legge til eller endre API-hemmelighet her. Besøk adminfanen 'integrasjoner' for å opprette en API-klient. Den gamle hemmeligheten fungerer enn så lenge:"
+      "deprecation": "Det er ikke lenger mulig å legge til eller endre API-hemmelighet her. Besøk fanen 'integrasjoner' i toppmenyen for å opprette en API-klient. Den gamle hemmeligheten fungerer enn så lenge:"
     },
     "error": {
       "loading": "Kunne ikke hente ut klienter: {error}."
diff --git a/src/router/index.js b/src/router/index.js
index 44af5eddb..2968c6260 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -111,6 +111,12 @@ const routes = [
         name: 'ItemAbout',
         component: ItemAbout,
       },
+      {
+        path: 'integrations',
+        name: 'ItemIntegrations',
+        component: () => import('@/views/Item/ItemIntegrations.vue'),
+        beforeEnter: routerGuards.itemIntegrations,
+      },
       {
         path: 'k/:keyResultId',
         name: 'KeyResultHome',
diff --git a/src/router/router-guards/index.js b/src/router/router-guards/index.js
index 3737abbdb..733dbdf55 100644
--- a/src/router/router-guards/index.js
+++ b/src/router/router-guards/index.js
@@ -3,6 +3,7 @@ export { default as home } from './home';
 export { default as itemCommon } from './itemCommon';
 export { default as itemMeasurements } from './itemMeasurements';
 export { default as itemOKRs } from './itemOKRs';
+export { default as itemIntegrations } from './itemIntegrations';
 export { default as keyResultHome } from './keyResultHome';
 export { default as login } from './login';
 export { default as objectiveHome } from './objectiveHome';
diff --git a/src/router/router-guards/itemIntegrations.js b/src/router/router-guards/itemIntegrations.js
new file mode 100644
index 000000000..223faac5a
--- /dev/null
+++ b/src/router/router-guards/itemIntegrations.js
@@ -0,0 +1,27 @@
+import store from '@/store';
+
+/**
+ * Router guard for the API integration admin. Checks if the user is an admin or
+ * a member of the team before allowing access to the page.
+ */
+export default async function itemAdmin(to, from, next) {
+  const {
+    state: {
+      activeItem: { team, organization, id: activeItemId },
+      user: { id: userId, superAdmin, admin },
+    },
+  } = store;
+
+  const isAdminOfOrganization = organization
+    ? admin && admin.includes(organization.id)
+    : admin && admin.includes(activeItemId);
+
+  const isMemberOfTeam = team && team.map(({ id }) => id).includes(userId);
+
+  if (isMemberOfTeam || superAdmin || isAdminOfOrganization) {
+    next();
+  } else {
+    console.error('Access denied');
+    next({ name: 'Forbidden' });
+  }
+}
diff --git a/src/views/ItemAdmin/ItemAdminApiIntegrations.vue b/src/views/Item/ItemIntegrations.vue
similarity index 92%
rename from src/views/ItemAdmin/ItemAdminApiIntegrations.vue
rename to src/views/Item/ItemIntegrations.vue
index 2940caf48..4d7d0c1ba 100644
--- a/src/views/ItemAdmin/ItemAdminApiIntegrations.vue
+++ b/src/views/Item/ItemIntegrations.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="integrations">
-    <h1 class="pkt-txt-24-medium">{{ $t('general.integrations') }}</h1>
-    <i18n path="integration.info" tag="p">
+  <page-layout breakpoint="tablet-big" class="integrations">
+    <h1 class="pkt-txt-24-medium mb-size-24">{{ $t('general.integrations') }}</h1>
+
+    <i18n path="integration.info" tag="p" class="mb-size-24">
       <template #clientIdHeader>
         <code>okr-client-id</code>
       </template>
@@ -20,7 +21,7 @@
     </pkt-alert>
 
     <template v-else-if="apiClients.length">
-      <div>
+      <div class="mb-size-32">
         <pkt-button skin="secondary" :disabled="loading" @onClick="create">
           {{ $t('integration.action.add') }}
         </pkt-button>
@@ -29,6 +30,7 @@
       <api-client-card
         v-for="client in apiClients"
         :key="client.id"
+        class="mb-size-24"
         :client="client"
         :loading="loading"
         :visible-secret="client.id === updatedClientId ? updatedClientSecret : null"
@@ -62,7 +64,7 @@
         </pkt-button>
       </div>
     </empty-state>
-  </div>
+  </page-layout>
 </template>
 
 <script>
@@ -72,7 +74,7 @@ import { PktButton } from '@oslokommune/punkt-vue2';
 import ApiClient from '@/db/ApiClient';
 
 export default {
-  name: 'ItemAdminApiIntegrations',
+  name: 'ItemIntegrations',
 
   components: {
     PktAlert: () => import('@oslokommune/punkt-vue2').then(({ PktAlert }) => PktAlert),
@@ -95,7 +97,7 @@ export default {
   }),
 
   computed: {
-    ...mapState(['activeItemRef']),
+    ...mapState(['activeItem', 'activeItemRef']),
     ...mapGetters(['isAdmin', 'hasEditRights']),
   },
 
@@ -209,14 +211,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography' as *;
-
-.integrations {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  padding-bottom: 3rem;
-}
-</style>

From fa5617467c542189fc0bef642c9ec433bcef6112 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 20 Oct 2023 15:04:36 +0200
Subject: [PATCH 08/16] Add API documentation link

---
 src/views/Item/ItemIntegrations.vue | 35 ++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/views/Item/ItemIntegrations.vue b/src/views/Item/ItemIntegrations.vue
index 4d7d0c1ba..8efd9e475 100644
--- a/src/views/Item/ItemIntegrations.vue
+++ b/src/views/Item/ItemIntegrations.vue
@@ -1,6 +1,12 @@
 <template>
-  <page-layout breakpoint="tablet-big" class="integrations">
-    <h1 class="pkt-txt-24-medium mb-size-24">{{ $t('general.integrations') }}</h1>
+  <page-layout breakpoint="tablet-big" class="integrations-page">
+    <header class="integrations-page__header mb-size-24">
+      <h1 class="pkt-txt-24-medium">{{ $t('general.integrations') }}</h1>
+      <router-link :to="{ name: 'Api' }">
+        {{ $t('general.api') }}
+        <pkt-icon name="chevron-right" />
+      </router-link>
+    </header>
 
     <i18n path="integration.info" tag="p" class="mb-size-24">
       <template #clientIdHeader>
@@ -22,7 +28,14 @@
 
     <template v-else-if="apiClients.length">
       <div class="mb-size-32">
-        <pkt-button skin="secondary" :disabled="loading" @onClick="create">
+        <pkt-button
+          skin="primary"
+          size="small"
+          variant="icon-left"
+          icon-name="plus-sign"
+          :disabled="loading"
+          @onClick="create"
+        >
           {{ $t('integration.action.add') }}
         </pkt-button>
       </div>
@@ -211,3 +224,19 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.integrations-page {
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    a {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+    }
+  }
+}
+</style>

From 079c0fdc1b030854ec6c15224fdd9d75a335d805 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 20 Oct 2023 15:40:01 +0200
Subject: [PATCH 09/16] Show details modal before creating new client

---
 src/components/modals/ApiClientModal.vue | 14 ++++++++---
 src/views/Item/ItemIntegrations.vue      | 31 +++++++++++++++---------
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/components/modals/ApiClientModal.vue b/src/components/modals/ApiClientModal.vue
index 2926901dd..b10c504da 100644
--- a/src/components/modals/ApiClientModal.vue
+++ b/src/components/modals/ApiClientModal.vue
@@ -1,7 +1,7 @@
 <template>
   <modal-wrapper @close="close">
     <template #header>
-      {{ $t('integration.action.edit') }}
+      {{ $t(`integration.action.${client ? 'edit' : 'add'}`) }}
     </template>
 
     <form-section :hide-errors="true">
@@ -45,7 +45,8 @@ export default {
   props: {
     client: {
       type: Object,
-      required: true,
+      required: false,
+      default: null,
     },
   },
 
@@ -58,8 +59,13 @@ export default {
     client: {
       immediate: true,
       async handler(client) {
-        this.name = client.name;
-        this.description = client.description;
+        if (client) {
+          this.name = client.name;
+          this.description = client.description;
+        } else {
+          this.name = this.$t('integration.placeholderTitle');
+          this.description = '';
+        }
       },
     },
   },
diff --git a/src/views/Item/ItemIntegrations.vue b/src/views/Item/ItemIntegrations.vue
index 8efd9e475..de55aaa19 100644
--- a/src/views/Item/ItemIntegrations.vue
+++ b/src/views/Item/ItemIntegrations.vue
@@ -34,7 +34,7 @@
           variant="icon-left"
           icon-name="plus-sign"
           :disabled="loading"
-          @onClick="create"
+          @onClick="openClientModal(null)"
         >
           {{ $t('integration.action.add') }}
         </pkt-button>
@@ -52,13 +52,6 @@
         @rotate="rotate"
         @delete="archive"
       />
-
-      <api-client-modal
-        v-if="showClientModal && chosenClient"
-        :client="chosenClient"
-        @save="update"
-        @close="closeClientModal"
-      />
     </template>
 
     <empty-state
@@ -71,12 +64,19 @@
           skin="primary"
           variant="icon-left"
           icon-name="plus-sign"
-          @onClick="create"
+          @onClick="openClientModal(null)"
         >
           {{ $t('integration.action.add') }}
         </pkt-button>
       </div>
     </empty-state>
+
+    <api-client-modal
+      v-if="showClientModal"
+      :client="chosenClient"
+      @save="saveClientMetadata"
+      @close="closeClientModal"
+    />
   </page-layout>
 </template>
 
@@ -136,13 +136,22 @@ export default {
   },
 
   methods: {
-    async create() {
+    async saveClientMetadata(client, data) {
+      if (client) {
+        await this.update(client, data);
+      } else {
+        await this.create(data);
+      }
+    },
+
+    async create({ name, description }) {
       try {
         this.loading = true;
 
         const clientRef = await ApiClient.create({
           parent: this.activeItemRef,
-          name: this.$t('integration.placeholderTitle'),
+          name,
+          description,
         });
 
         try {

From 528dc8b3ad82fb233aa4081d39b0e8e61c6f0781 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 26 Oct 2023 09:01:03 +0200
Subject: [PATCH 10/16] Hash client secrets before storing

---
 functions/api/helpers.js      |  5 ++++-
 src/db/ApiClient/ApiClient.js | 11 ++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/functions/api/helpers.js b/functions/api/helpers.js
index abe8b4312..ff8d1087f 100644
--- a/functions/api/helpers.js
+++ b/functions/api/helpers.js
@@ -1,3 +1,4 @@
+import crypto from 'crypto';
 import { FieldValue, getFirestore } from 'firebase-admin/firestore';
 import { endOfDay, startOfDay, setHours, isWithinInterval, sub } from 'date-fns';
 
@@ -257,7 +258,9 @@ export async function checkApiAuth(parentRef, req, res) {
       .get()
       .then((snapshot) => (!snapshot.empty ? snapshot.docs[0].data() : null));
 
-    if (!apiClientSecret || apiClientSecret.secret !== clientSecret) {
+    const hashedSecret = crypto.createHash('sha256').update(clientSecret).digest('hex');
+
+    if (!apiClientSecret || apiClientSecret.secret !== hashedSecret) {
       res.status(401).json({
         message:
           `Invalid client secret provided for API client \`${clientId}\`. ` +
diff --git a/src/db/ApiClient/ApiClient.js b/src/db/ApiClient/ApiClient.js
index 4a1aa4229..679915c63 100644
--- a/src/db/ApiClient/ApiClient.js
+++ b/src/db/ApiClient/ApiClient.js
@@ -57,7 +57,16 @@ const createSecret = async (clientRef) => {
   }
   try {
     const secret = crypto.randomUUID();
-    await createDocument(clientRef.collection('secrets'), { secret });
+    const encoder = new TextEncoder();
+    const dataBuffer = encoder.encode(secret);
+    const hashBuffer = await crypto.subtle.digest('SHA-256', dataBuffer);
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    const hashedSecret = hashArray
+      .map((byte) => byte.toString(16).padStart(2, '0'))
+      .join('');
+    await createDocument(clientRef.collection('secrets'), {
+      secret: hashedSecret,
+    });
     return secret;
   } catch (error) {
     throw new Error(`Could not create secret for client ${clientRef.id}`);

From 7f7de271c8a2064d0c9506ed45be49b83984d666 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 27 Oct 2023 09:35:30 +0200
Subject: [PATCH 11/16] Fix popover positioning

---
 src/components/ApiClientCard.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/ApiClientCard.vue b/src/components/ApiClientCard.vue
index 47bb2aeb6..37beaab67 100644
--- a/src/components/ApiClientCard.vue
+++ b/src/components/ApiClientCard.vue
@@ -33,7 +33,7 @@
       </div>
 
       <div class="api-client-card__body">
-        <div class="api-client-card__credentials">
+        <div class="api-client-card__credentials mb-size-16">
           <div class="api-client-card__credential">
             <label :for="`${client.id}_clientId`">
               <pkt-icon name="cogwheel" /> {{ $t('integration.clientId') }}
@@ -108,7 +108,7 @@
           </div>
         </div>
 
-        <pkt-alert v-if="visibleSecret" skin="warning">
+        <pkt-alert v-if="visibleSecret" skin="warning" class="mb-size-16">
           <i18n path="integration.warning.secret" tag="p">
             <template #closeLink>
               <a href="#" @click="$emit('hide-secret')">
@@ -234,11 +234,6 @@ export default {
   }
 
   &__body {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    overflow: auto;
-
     @include bp('tablet-up') {
       padding-right: 2.5rem;
     }
@@ -285,7 +280,15 @@ export default {
       background-color: transparent;
       border: 0;
       outline: 0;
-      @include get-text('pkt-txt-18-medium');
+      @include get-text('pkt-txt-14-medium');
+
+      @include bp('phablet-up') {
+        @include get-text('pkt-txt-16-medium');
+      }
+
+      @include bp('tablet-up') {
+        @include get-text('pkt-txt-18-medium');
+      }
     }
 
     button:hover {
@@ -295,7 +298,7 @@ export default {
   }
 
   &__description {
-    margin-top: 0.5rem;
+    margin: 0.5rem 0 1rem 0;
   }
 
   &__tags {

From 90525e4cb2787533a821db20213c9fc87bb1013a Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 27 Oct 2023 10:10:21 +0200
Subject: [PATCH 12/16] Fix typos

---
 src/components/ApiClientCard.vue | 6 +++---
 src/locale/locales/en-US.json    | 4 ++--
 src/locale/locales/nb-NO.json    | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/ApiClientCard.vue b/src/components/ApiClientCard.vue
index 37beaab67..a23779fe5 100644
--- a/src/components/ApiClientCard.vue
+++ b/src/components/ApiClientCard.vue
@@ -111,9 +111,9 @@
         <pkt-alert v-if="visibleSecret" skin="warning" class="mb-size-16">
           <i18n path="integration.warning.secret" tag="p">
             <template #closeLink>
-              <a href="#" @click="$emit('hide-secret')">
-                {{ $t('integration.warning.secretCloseText') }}
-              </a>
+              <a href="#" @click="$emit('hide-secret')">{{
+                $t('integration.warning.secretCloseText')
+              }}</a>
             </template>
           </i18n>
         </pkt-alert>
diff --git a/src/locale/locales/en-US.json b/src/locale/locales/en-US.json
index a545f4831..b84f3e119 100644
--- a/src/locale/locales/en-US.json
+++ b/src/locale/locales/en-US.json
@@ -666,7 +666,7 @@
     }
   },
   "integration": {
-    "info": "Our API offers endpoints to automate updating of key results and measurements. In order to make use of the API, an API client must be created. For each client, an unique ID and secret is generated which must be added as request headers ({clientIdHeader}, {clientSecretHeader}) to each API call. This in addition to a separate API key ({apiKeyHeader}). It is recommended to create a separate client for each application that integrates with the API. This makes it easier to keep track of each application and secrets in use.",
+    "info": "Our API offers endpoints to automate updating of key results and measurements. In order to make use of the API, an API client must be created. For each client, a unique ID and secret is generated which must be added as request headers ({clientIdHeader}, {clientSecretHeader}) to each API call. This in addition to a separate API key ({apiKeyHeader}). It is recommended to create a separate client for each application that integrates with the API. This makes it easier to keep track of each application and secrets in use.",
     "placeholderTitle": "New client",
     "clientId": "Client ID",
     "clientSecret": "Secret",
@@ -703,7 +703,7 @@
       "secretCloseText": "I'm done",
       "delete": "When deleting, all running applications which uses this client will stop working.",
       "rotate": "When rotating, all running applications which uses the old secret will stop working.",
-      "deprecation": "It is no longer possible to add/edit the API secret here. Please visit the 'integrations' tab in the menu to create a new API client. The old secret wil still work for the time being:"
+      "deprecation": "It is no longer possible to add/edit the API secret here. Please visit the 'integrations' tab in the menu to create a new API client. The old secret will still work for the time being:"
     },
     "error": {
       "loading": "Could not fetch clients: {error}."
diff --git a/src/locale/locales/nb-NO.json b/src/locale/locales/nb-NO.json
index 114bf9bd2..1553147d8 100644
--- a/src/locale/locales/nb-NO.json
+++ b/src/locale/locales/nb-NO.json
@@ -680,8 +680,8 @@
     "tag": {
       "created": "Opprettet {when} av {name}",
       "edited": "Sist endret {when} av {name}",
-      "lastRotated": "Sist rotert {when}",
-      "lastActivity": "Sist aktiv {when}",
+      "lastRotated": "Sist rotert for {when}",
+      "lastActivity": "Sist aktiv for {when}",
       "noActivity": "Ingen aktivitet registrert enda"
     },
     "empty": {

From e97ff5d4dd20962af813f0b755d220196fb5e943 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Fri, 27 Oct 2023 12:46:17 +0200
Subject: [PATCH 13/16] Configure rate limits for api endpoints

---
 functions/api/index.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/functions/api/index.js b/functions/api/index.js
index 3ebe920b9..ed0b9985b 100644
--- a/functions/api/index.js
+++ b/functions/api/index.js
@@ -1,6 +1,7 @@
 import functions from 'firebase-functions';
 
 import express from 'express';
+import rateLimit from 'express-rate-limit';
 import cors from 'cors';
 import morgan from 'morgan';
 
@@ -12,9 +13,16 @@ import kpiRoutes from './routes/kpi.js';
 import statusRoutes from './routes/status.js';
 import userRoutes from './routes/user.js';
 
+const apiLimiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 100, // max 100 requests per window
+  message: 'Too many requests, please try again later.',
+});
+
 const app = express();
 
 app.use(cors());
+app.use(apiLimiter);
 app.use(express.json());
 app.use(morgan('combined'));
 

From 9b12e5346b7268ace40820cb16e981b3eaeca7c5 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Mon, 30 Oct 2023 09:09:29 +0100
Subject: [PATCH 14/16] Use semantic header tag

---
 src/components/ApiClientCard.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ApiClientCard.vue b/src/components/ApiClientCard.vue
index a23779fe5..d7507bd7e 100644
--- a/src/components/ApiClientCard.vue
+++ b/src/components/ApiClientCard.vue
@@ -3,7 +3,7 @@
     <pkt-icon name="crane" class="api-client-card__icon pkt-show-tablet-up" />
 
     <div class="api-client-card__content">
-      <div class="api-client-card__title">
+      <header class="api-client-card__title">
         <span class="pkt-txt-18-medium">{{ client.name }}</span>
         <div class="api-client-card__actions">
           <pkt-button
@@ -30,7 +30,7 @@
             @click="$emit('delete', client)"
           />
         </div>
-      </div>
+      </header>
 
       <div class="api-client-card__body">
         <div class="api-client-card__credentials mb-size-16">

From 8986fbcacc266ce92aa97d3f76054fc49ff4dcee Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Tue, 31 Oct 2023 15:24:43 +0100
Subject: [PATCH 15/16] Update wording for changelog and error messages

---
 CHANGELOG.md             | 6 +++---
 functions/api/helpers.js | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8af7acf7d..0875f8a52 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,9 +15,9 @@ All notable changes to this project will be documented in this file. The format
   percentage as unit of measurement by default.
 - The API authorization mechanism has been reworked. The API now accepts a pair
   of `okr-client-id` and `okr-client-secret` headers to authorize clients.
-  Clients can be created using the admin interface. The existing
-  `okr-team-secret` header is considered deprecated and will continue to work
-  for existing clients until migrated.
+  The interface for managing client credentials can be found in the item
+  navigation bar. The existing `okr-team-secret` header is considered deprecated
+  and will continue to work for existing clients until migrated.
 
 ### Fixed
 
diff --git a/functions/api/helpers.js b/functions/api/helpers.js
index ff8d1087f..36465b6a6 100644
--- a/functions/api/helpers.js
+++ b/functions/api/helpers.js
@@ -245,7 +245,7 @@ export async function checkApiAuth(parentRef, req, res) {
       res.status(401).json({
         message:
           `No API client \`${clientId}\` exists for '${parentName}'. Please ` +
-          'create one using the OKR Tracker admin interface.',
+          'create one in the OKR Tracker integrations admin.',
       });
       return false;
     }
@@ -264,7 +264,7 @@ export async function checkApiAuth(parentRef, req, res) {
       res.status(401).json({
         message:
           `Invalid client secret provided for API client \`${clientId}\`. ` +
-          'Check the OKR Tracker admin interface for how to rotate the secret.',
+          'Check the OKR Tracker integrations admin for how to rotate the secret.',
       });
       return false;
     }
@@ -277,7 +277,7 @@ export async function checkApiAuth(parentRef, req, res) {
     res.status(401).json({
       message:
         `'${parentData.name}' is not set up for API usage. Please set ` +
-        'a secret using the OKR Tracker admin interface.',
+        'a secret through the OKR Tracker integrations admin.',
     });
     return false;
   }

From e180685776ad0046e356c5af075f5dd56eb64642 Mon Sep 17 00:00:00 2001
From: "Petter H. Juliussen" <petter.juliussen@origo.oslo.kommune.no>
Date: Thu, 2 Nov 2023 13:13:08 +0100
Subject: [PATCH 16/16] Simplify rules for reading api clients

---
 firestore.rules                  | 18 +-------------
 tests/firebase/firestore.test.js | 42 ++++++++++++--------------------
 tests/firebase/utils.js          |  4 ++-
 3 files changed, 19 insertions(+), 45 deletions(-)

diff --git a/firestore.rules b/firestore.rules
index 92186b0c8..c9ac22e9c 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -217,23 +217,7 @@ service cloud.firestore {
     }
 
     match /apiClients/{document} {
-      function isAdminOfQueriedParent() {
-        let userDoc = getUserDoc();
-        let userIsAdmin = isAdmin();
-        let parentDoc = getAfter(resource.data.parent);
-        let hasOrgDocumentInParent = 'organization' in parentDoc.data;
-        let isAdminFromOrgOfProdOrDep = userIsAdmin && hasOrgDocumentInParent && getAfter(parentDoc.data.organization).id in userDoc.data.admin;
-        let isAdminOfParent = userIsAdmin && !isAdminFromOrgOfProdOrDep && parentDoc.data.id in userDoc.data.admin;
-        return isSignedIn() && (isAdminFromOrgOfProdOrDep || isAdminOfParent);
-      }
-      function isMemberOfQueriedParent() {
-        let userRef = /databases/$(database)/documents/users/$(request.auth.token.email);
-        let parentDoc = getAfter(resource.data.parent);
-        let userIsMemberOfParent = userRef in parentDoc.data.team;
-        return isSignedIn() && userIsMemberOfParent;
-      }
-
-      allow read: if isSuperAdmin() || isMemberOfQueriedParent() || isAdminOfQueriedParent();
+      allow read: if isSignedIn();
       allow write: if isSuperAdmin() || isMemberOfParent(document, 'apiClients') || isAdminOfParent(document, 'apiClients');
 
       match /secrets/{key} {
diff --git a/tests/firebase/firestore.test.js b/tests/firebase/firestore.test.js
index b3633f7fd..e4ffdaca0 100644
--- a/tests/firebase/firestore.test.js
+++ b/tests/firebase/firestore.test.js
@@ -48,7 +48,8 @@ describe('Test Firestore rules', () => {
       await apiClients
         .doc('organization-api-client')
         .collection('secrets')
-        .add({ secret: 'bar' });
+        .doc('organization-api-client-secret')
+        .set({ secret: 'bar' });
     });
   });
 
@@ -62,8 +63,7 @@ describe('Test Firestore rules', () => {
   test('users can read user other profiles', async () => {
     await withAuthenticatedUser(testEnv, 'user@example.com', async (db) => {
       const user = db.collection('users').doc('user2@example.com');
-      const result = await user.get();
-      expectGetSucceeds(result);
+      const result = await expectGetSucceeds(user.get());
       expect(result.data().name).toBe('User 2');
     });
   });
@@ -120,29 +120,20 @@ describe('Test Firestore rules', () => {
       const clients = db.collection('apiClients');
       await expectPermissionDenied(clients.get());
     });
-  });
 
-  test('users cannot read any random api client', async () => {
-    await withAuthenticatedUser(testEnv, 'user@example.com', async (db) => {
-      const clients = db.collection('apiClients');
-      await expectPermissionDenied(clients.get());
+    await withUnauthenticatedUser(testEnv, async (db) => {
+      const client = db.collection('apiClients').doc('organization-api-client');
+      await expectPermissionDenied(client.get());
     });
   });
 
-  test('members can read own api clients', async () => {
+  test('signed in users can read api clients', async () => {
     await withAuthenticatedUser(testEnv, 'user@example.com', async (db) => {
       const orgRef = db.collection('organizations').doc('organization');
       const clients = db.collection('apiClients').where('parent', '==', orgRef);
-      const result = await clients.get();
-      expectGetSucceeds(result);
+      const result = await expectGetSucceeds(clients.get());
       expect(result).toHaveProperty('size', 1);
     });
-
-    await withAuthenticatedUser(testEnv, 'user2@example.com', async (db) => {
-      const orgRef = db.collection('organizations').doc('organization');
-      const clients = db.collection('apiClients').where('parent', '==', orgRef);
-      await expectPermissionDenied(clients.get());
-    });
   });
 
   test('members can write own api clients and secrets', async () => {
@@ -161,15 +152,6 @@ describe('Test Firestore rules', () => {
     });
   });
 
-  test('super admin can read any api client', async () => {
-    await withAuthenticatedUser(testEnv, 'superadmin@example.com', async (db) => {
-      const clients = db.collection('apiClients');
-      const result = await clients.get();
-      expectGetSucceeds(result);
-      expect(result).toHaveProperty('size', 1);
-    });
-  });
-
   test('super admin can write any api client', async () => {
     await withAuthenticatedUser(testEnv, 'superadmin@example.com', async (db) => {
       const clients = db.collection('apiClients');
@@ -182,9 +164,15 @@ describe('Test Firestore rules', () => {
 
   test('no one can read api client secrets', async () => {
     async function readApiClientSecrets(db) {
-      const apiClientRef = db.collection('apiClients').doc('organization-api-client');
+      const apiClients = db.collection('apiClients');
+      const apiClientRef = apiClients.doc('organization-api-client');
       const apiClientSecrets = apiClientRef.collection('secrets');
       await expectPermissionDenied(apiClientSecrets.get());
+
+      const apiClientSecretRef = apiClientRef
+        .collection('secrets')
+        .doc('organization-api-client-secret');
+      await expectPermissionDenied(apiClientSecretRef.get());
     }
 
     await withUnauthenticatedUser(testEnv, readApiClientSecrets);
diff --git a/tests/firebase/utils.js b/tests/firebase/utils.js
index de92018c9..d06d63c43 100644
--- a/tests/firebase/utils.js
+++ b/tests/firebase/utils.js
@@ -21,5 +21,7 @@ export async function expectUpdateSucceeds(promise) {
 }
 
 export async function expectGetSucceeds(promise) {
-  expect(assertSucceeds(promise)).not.toBeUndefined();
+  const successResult = await assertSucceeds(promise);
+  expect(successResult).not.toBeUndefined();
+  return successResult;
 }