From cc85b6d183b94b52b39a356ada8b1c9582e04230 Mon Sep 17 00:00:00 2001
From: Monika Radaviciute <monika.radaviciute@csc.fi>
Date: Thu, 16 Mar 2023 17:45:46 +0200
Subject: [PATCH 01/13] Token modal sketch

---
 swift_browser_ui_frontend/src/common/lang.js  |   8 +-
 .../src/common/router.js                      |   8 +-
 swift_browser_ui_frontend/src/common/store.js |   4 +
 .../src/components/TokenModal.vue             | 154 ++++++++++++++++++
 swift_browser_ui_frontend/src/entries/main.js |  20 ++-
 .../src/pages/BrowserPage.vue                 |   6 +
 6 files changed, 183 insertions(+), 17 deletions(-)
 create mode 100644 swift_browser_ui_frontend/src/components/TokenModal.vue

diff --git a/swift_browser_ui_frontend/src/common/lang.js b/swift_browser_ui_frontend/src/common/lang.js
index 3b62798c0..bbaf2a996 100644
--- a/swift_browser_ui_frontend/src/common/lang.js
+++ b/swift_browser_ui_frontend/src/common/lang.js
@@ -197,6 +197,7 @@ let default_translations = {
         complete: "Uploading completed",
         cancelled: "Uploading cancelled",
       },
+      close: "Close",
       copy: " Copy",
       copied: "Share ID copied to clipboard",
       copy_failed: "Copying failed",
@@ -244,8 +245,7 @@ let default_translations = {
         empty: "No API tokens created for the project",
         identifier: "Identifier",
         revoke: "Revoke",
-        identLabel: "New token identifier",
-        identMessage: "Insert new token identifier here",
+        identLabel: "Insert new token identifier",
         createToken: "Create token",
         latestToken: "Latest token: ",
         copyToken:
@@ -557,6 +557,7 @@ let default_translations = {
         complete: "Lähetys on valmis",
         cancelled: "Lähetys peruutettu",
       },
+      close: "Sulje",
       copy: " Kopioi",
       copied: "Jakamistunnus kopioitu leikepöydälle.",
       copy_failed: "Kopiointi epäonnistui.",
@@ -601,8 +602,7 @@ let default_translations = {
         empty: "Projektille ei ole luotu API-avaimia",
         identifier: "Tunniste",
         revoke: "Mitätöi",
-        identLabel: "Uuden avaimen tunniste",
-        identMessage: "Syötä tunniste uudelle API-avaimelle",
+        identLabel: "Syötä tunniste uudelle API-avaimelle",
         createToken: "Luo avain",
         latestToken: "Viimeisin avain: ",
         back: "Palaa päänäkymään",
diff --git a/swift_browser_ui_frontend/src/common/router.js b/swift_browser_ui_frontend/src/common/router.js
index 8e3c08ae7..f25c9f260 100644
--- a/swift_browser_ui_frontend/src/common/router.js
+++ b/swift_browser_ui_frontend/src/common/router.js
@@ -1,8 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import FoldersView from "@/views/Folders.vue";
 import ObjectsView from "@/views/Objects.vue";
-import SharedObjects from "@/views/SharedObjects.vue";
-import TokensView from "@/views/Tokens.vue";
+import SharedObjects from "@/views/SharedObjects";
 
 export default createRouter({
   history: createWebHistory(),
@@ -12,11 +11,6 @@ export default createRouter({
       name: "AllFolders",
       component: FoldersView,
     },
-    {
-      path: "/browse/:user/:project/tokens",
-      name: "TokensView",
-      component: TokensView,
-    },
     {
       path: "/browse/:user/:project/:container/shared/:owner",
       name: "SharedObjects",
diff --git a/swift_browser_ui_frontend/src/common/store.js b/swift_browser_ui_frontend/src/common/store.js
index 4b3825d20..ac3a9c117 100644
--- a/swift_browser_ui_frontend/src/common/store.js
+++ b/swift_browser_ui_frontend/src/common/store.js
@@ -51,6 +51,7 @@ const store = createStore({
     selectedObjectName: "",
     openCopyFolderModal: false,
     openDeleteModal: false,
+    openTokenModal: false,
     deletableObjects: [],
     isFolderCopied: false,
     sourceProjectId: "",
@@ -231,6 +232,9 @@ const store = createStore({
     toggleDeleteModal(state, payload) {
       state.openDeleteModal = payload;
     },
+    toggleTokenModal(state, payload) {
+      state.openTokenModal = payload;
+    },
     setDeletableObjects(state, payload) {
       state.deletableObjects = payload;
     },
diff --git a/swift_browser_ui_frontend/src/components/TokenModal.vue b/swift_browser_ui_frontend/src/components/TokenModal.vue
new file mode 100644
index 000000000..1b677f070
--- /dev/null
+++ b/swift_browser_ui_frontend/src/components/TokenModal.vue
@@ -0,0 +1,154 @@
+<template>
+  <c-card class="token-card">
+    <c-card-actions
+      justify="space-between"
+      align="center"
+    >
+      <h2 class="title is-4 has-text-dark">
+        Create API-tokens
+      </h2>
+      <c-button
+        text
+        @click="closeTokenModal"
+        @keyup.enter="closeTokenModal"
+      >
+        <c-icon
+          :path="mdiClose"
+          alt=""
+          aria-hidden="true"
+        />
+        {{ $t("message.share.close") }} <!--add to lg-->
+      </c-button>
+    </c-card-actions>
+    <c-card-content id="create-token">
+      <c-text-field
+        v-csc-model="newIdentifier"
+        name="newIdentifier"
+        :label="$t('message.tokens.identLabel')"
+      />
+      <c-button
+        :disabled="tokenExists(newIdentifier)"
+        @click="addToken(newIdentifier)"
+        @keyup.enter="addToken(newIdentifier)"
+      >
+        {{ $t('message.tokens.createToken') }}
+      </c-button> 
+      <c-container v-show="latest">
+        <c-row
+          align="center"
+          justify="space-around"
+          gap="10"
+        >
+          <h3>{{ $t('message.tokens.latestToken') }}</h3>
+          <p>{{ latest }}</p>
+          <c-button
+            size="small"
+            @click="copyLatestToken"
+            @keyup.enter="copyLatestToken"
+          >
+            <i
+              slot="icon"
+              class="mdi mdi-content-copy"
+            />
+            Copy token
+          </c-button>
+        </c-row>
+      </c-container>
+    </c-card-content>
+  </c-card>
+</template>
+
+<script>
+import { mdiClose } from "@mdi/js";
+import {
+  createExtToken,
+  listTokens,
+} from "@/common/api";
+export default {
+  name: "TokenModal",
+  data() {
+    return {
+      tokens: [],
+      selected: undefined,
+      newIdentifier: "",
+      latest: ".................................",
+      copied: false,
+      mdiClose,
+    };
+  },
+  computed: {
+    active() {
+      return this.$store.state.active;
+    },
+  },
+  methods: {
+    closeTokenModal: function () {
+      this.$store.commit("toggleTokenModal", false);
+      this.newIdentifier = "";
+      this.tokens = [];
+      this.selected = undefined;
+      //this.latest = undefined;
+      this.copied = false;
+    },
+    getTokens: function () {
+      listTokens(this.active).then((ret) => {this.tokens = ret;});
+    },
+    addToken: function (identifier) {
+      createExtToken(
+        this.active,
+        identifier,
+      ).then((ret) => {
+        this.latest = ret;
+        /*document.querySelector("#add-token-toasts").addToast(
+          {
+            duration: 3600000,
+            type: "success",
+            progress: false,
+            message: this.$t("message.tokens.copyToken"),
+          },
+        );*/
+        this.getTokens();
+      });
+    },
+    tokenExists: function (identifier) {
+      return this.tokens.includes(identifier) ? true : false;
+    },
+    copyLatestToken: function () {
+      if (!this.copied) {
+        navigator.clipboard.writeText(
+          this.latest,
+        ).then(() => {
+          this.copied = true;
+          /*document.querySelector("#copy-token-toasts").addToast(
+            {
+              duration: 6000,
+              type: "success",
+              progress: false,
+              message: this.$t("message.tokens.tokenCopied"),
+            },
+          );
+          //like with ShareID copy button:
+          //avoid overlapping toasts
+          setTimeout(() => { this.copied = false; }, 6000);*/
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/css/prod.scss";
+
+.token-card {
+  padding: 3rem 2rem 3rem 2rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+#create-token >* {
+    margin-top: -2rem;
+}
+</style>
\ No newline at end of file
diff --git a/swift_browser_ui_frontend/src/entries/main.js b/swift_browser_ui_frontend/src/entries/main.js
index 8836376b7..32eb83fea 100644
--- a/swift_browser_ui_frontend/src/entries/main.js
+++ b/swift_browser_ui_frontend/src/entries/main.js
@@ -6,12 +6,13 @@ import router from "@/common/router";
 // Project Vue components
 import BrowserMainNavbar from "@/components/BrowserMainNavbar.vue";
 import BrowserSecondaryNavbar from "@/components/BrowserSecondaryNavbar.vue";
-import CreateFolderModal from "@/components/CreateFolderModal.vue";
-import UploadModal from "@/components/UploadModal.vue";
-import EditTagsModal from "@/components/EditTagsModal.vue";
-import ShareModal from "@/components/ShareModal.vue";
-import CopyFolderModal from "@/components/CopyFolderModal.vue";
-import DeleteModal from "@/components/DeleteModal.vue";
+import CreateFolderModal from "@/components/CreateFolderModal";
+import UploadModal from "@/components/UploadModal";
+import EditTagsModal from "@/components/EditTagsModal";
+import ShareModal from "@/components/ShareModal";
+import CopyFolderModal from "@/components/CopyFolderModal";
+import DeleteModal from "@/components/DeleteModal";
+import TokenModal from "@/components/TokenModal";
 
 // CSC UI things
 import { applyPolyfills, defineCustomElements } from "csc-ui/dist/loader";
@@ -110,6 +111,7 @@ const app = createApp({
     ShareModal,
     CopyFolderModal,
     DeleteModal,
+    TokenModal,
   },
   data: function () {
     return {
@@ -202,6 +204,12 @@ const app = createApp({
       },
       set() { },
     },
+    openTokenModal: {
+      get() {
+        return this.$store.state.openTokenModal;
+      },
+      set() { },
+    },
   },
   watch: {
     openCreateFolderModal: function () {
diff --git a/swift_browser_ui_frontend/src/pages/BrowserPage.vue b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
index 39e130393..a5383782d 100644
--- a/swift_browser_ui_frontend/src/pages/BrowserPage.vue
+++ b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
@@ -56,6 +56,12 @@
       >
         <DeleteModal />
       </c-modal>
+      <c-modal
+        v-csc-model="openTokenModal"
+        width="60vw"
+      >
+        <TokenModal />
+      </c-modal>
       <router-view class="content-wrapper" />
       <c-toasts id="toasts" />
       <c-toasts

From b1f81ebe7860eee677e9ee726f40c8954742d4cc Mon Sep 17 00:00:00 2001
From: Monika Radaviciute <monika.radaviciute@csc.fi>
Date: Fri, 17 Mar 2023 14:25:50 +0200
Subject: [PATCH 02/13] Adding functionality to modal

---
 swift_browser_ui_frontend/src/common/lang.js  |  11 +-
 .../src/components/TokenModal.vue             | 121 ++++++++++++++----
 2 files changed, 98 insertions(+), 34 deletions(-)

diff --git a/swift_browser_ui_frontend/src/common/lang.js b/swift_browser_ui_frontend/src/common/lang.js
index bbaf2a996..030d93e5a 100644
--- a/swift_browser_ui_frontend/src/common/lang.js
+++ b/swift_browser_ui_frontend/src/common/lang.js
@@ -244,16 +244,14 @@ let default_translations = {
       tokens: {
         empty: "No API tokens created for the project",
         identifier: "Identifier",
-        revoke: "Revoke",
         identLabel: "Insert new token identifier",
         createToken: "Create token",
         latestToken: "Latest token: ",
         copyToken:
-          "The token will be displayed just this once after its " +
-          "creation, and recovering it will not be possible " +
-          "afterwards. Please make sure that you have stored " +
-          "the token somewhere before navigating away from the " +
-          "token page.",
+          "Token will be displayed just this once " +
+          "and recovering it is not be possible. " +
+          "Please store the token somewhere " +
+          "safe before closing this modal.",
         tokenCopied: "Token copied.",
         back: "Back to all folders",
       },
@@ -601,7 +599,6 @@ let default_translations = {
       tokens: {
         empty: "Projektille ei ole luotu API-avaimia",
         identifier: "Tunniste",
-        revoke: "Mitätöi",
         identLabel: "Syötä tunniste uudelle API-avaimelle",
         createToken: "Luo avain",
         latestToken: "Viimeisin avain: ",
diff --git a/swift_browser_ui_frontend/src/components/TokenModal.vue b/swift_browser_ui_frontend/src/components/TokenModal.vue
index 1b677f070..090a96acb 100644
--- a/swift_browser_ui_frontend/src/components/TokenModal.vue
+++ b/swift_browser_ui_frontend/src/components/TokenModal.vue
@@ -5,7 +5,7 @@
       align="center"
     >
       <h2 class="title is-4 has-text-dark">
-        Create API-tokens
+        Create API-tokens <!--add to lang-->
       </h2>
       <c-button
         text
@@ -32,14 +32,15 @@
         @keyup.enter="addToken(newIdentifier)"
       >
         {{ $t('message.tokens.createToken') }}
-      </c-button> 
-      <c-container v-show="latest">
+      </c-button>
+      <div v-show="latest">
         <c-row
           align="center"
-          justify="space-around"
-          gap="10"
+          justify="space-between"
         >
-          <h3>{{ $t('message.tokens.latestToken') }}</h3>
+          <p>
+            <strong>{{ $t('message.tokens.latestToken') }}</strong>
+          </p>
           <p>{{ latest }}</p>
           <c-button
             size="small"
@@ -53,16 +54,33 @@
             Copy token
           </c-button>
         </c-row>
-      </c-container>
+        <c-alert type="warning">
+          <p>{{ $t('message.tokens.copyToken') }}</p> <!--edit Finnish text-->
+        </c-alert>
+      </div>
+      <c-data-table
+        v-show="tokens.length > 0"
+        class="tokenContents"
+        sort-by="identifier"
+        sort-direction="asc"
+        :data.prop="tableTokens"
+        :headers.prop="headers"
+        hide-footer
+      />
+      <c-toasts
+        id="copy-token-toasts"
+        data-testid="copy-token-toasts"
+      />
     </c-card-content>
   </c-card>
 </template>
 
 <script>
-import { mdiClose } from "@mdi/js";
+import { mdiClose, mdiDelete } from "@mdi/js";
 import {
   createExtToken,
   listTokens,
+  removeToken,
 } from "@/common/api";
 export default {
   name: "TokenModal",
@@ -71,42 +89,80 @@ export default {
       tokens: [],
       selected: undefined,
       newIdentifier: "",
-      latest: ".................................",
+      latest: undefined,
       copied: false,
       mdiClose,
+      mdiDelete,
     };
   },
   computed: {
-    active() {
-      return this.$store.state.active;
+    activeId() {
+      return this.$store.state.active.id;
+    },
+    headers () {
+      return [
+        {
+          key: "identifier",
+          value: this.$t("message.tokens.identifier"),
+          sortable: this.tokens.length > 1,
+        },
+        {
+          key: "controls",
+          width: "10%",
+          value: null,
+          sortable: false,
+          children: [
+            {
+              value: this.$t("message.remove"),
+              component: {
+                tag: "c-button",
+                params: {
+                  text: true,
+                  size: "small",
+                  title: this.$t("message.remove"),
+                  type: "error",
+                  path: mdiDelete,
+                  onClick: ({ data: { identifier } }) =>
+                    this.deleteToken(identifier.value),
+                },
+              },
+            },
+          ],
+        },
+      ];
+    },
+    tableTokens () {
+      return this.tokens.map(token => {
+        return {
+          identifier: {
+            value: token,
+          },
+        };
+      });
+    },
+  },
+  watch: {
+    activeId () {
+      this.getTokens(this.activeId);
     },
   },
   methods: {
     closeTokenModal: function () {
       this.$store.commit("toggleTokenModal", false);
       this.newIdentifier = "";
-      this.tokens = [];
       this.selected = undefined;
-      //this.latest = undefined;
+      this.latest = undefined;
       this.copied = false;
     },
     getTokens: function () {
-      listTokens(this.active).then((ret) => {this.tokens = ret;});
+      listTokens(this.activeId).then((ret) => {this.tokens = ret;});
     },
     addToken: function (identifier) {
       createExtToken(
-        this.active,
+        this.activeId,
         identifier,
       ).then((ret) => {
         this.latest = ret;
-        /*document.querySelector("#add-token-toasts").addToast(
-          {
-            duration: 3600000,
-            type: "success",
-            progress: false,
-            message: this.$t("message.tokens.copyToken"),
-          },
-        );*/
         this.getTokens();
       });
     },
@@ -119,7 +175,7 @@ export default {
           this.latest,
         ).then(() => {
           this.copied = true;
-          /*document.querySelector("#copy-token-toasts").addToast(
+          document.querySelector("#copy-token-toasts").addToast(
             {
               duration: 6000,
               type: "success",
@@ -129,10 +185,16 @@ export default {
           );
           //like with ShareID copy button:
           //avoid overlapping toasts
-          setTimeout(() => { this.copied = false; }, 6000);*/
+          setTimeout(() => { this.copied = false; }, 6000);
         });
       }
     },
+    deleteToken: function (identifier) {
+      removeToken(
+        this.activeId,
+        identifier,
+      ).then(() => {this.getTokens();});
+    },
   },
 };
 </script>
@@ -148,7 +210,12 @@ export default {
   right: 0;
 }
 
-#create-token >* {
-    margin-top: -2rem;
+#create-token > c-button {
+  margin-top: -2rem;
+}
+
+c-text-field {
+  margin-top: -1rem;
 }
+
 </style>
\ No newline at end of file

From be368034d51b8c4276f1ce1bb1dd53cc249af45a Mon Sep 17 00:00:00 2001
From: Monika Radaviciute <monika.radaviciute@csc.fi>
Date: Mon, 20 Mar 2023 16:55:42 +0200
Subject: [PATCH 03/13] Working token modal

---
 swift_browser_ui_frontend/src/common/lang.js  |  28 +--
 .../src/components/BrowserMainNavbar.vue      |   6 +-
 .../src/components/TokenModal.vue             | 160 +++++++++++++-----
 .../src/pages/BrowserPage.vue                 |   2 +-
 4 files changed, 134 insertions(+), 62 deletions(-)

diff --git a/swift_browser_ui_frontend/src/common/lang.js b/swift_browser_ui_frontend/src/common/lang.js
index 030d93e5a..1a3e0cee5 100644
--- a/swift_browser_ui_frontend/src/common/lang.js
+++ b/swift_browser_ui_frontend/src/common/lang.js
@@ -243,17 +243,21 @@ let default_translations = {
       },
       tokens: {
         empty: "No API tokens created for the project",
-        identifier: "Identifier",
+        title: "Create API-tokens",
+        identifier: "Token identifier",
         identLabel: "Insert new token identifier",
         createToken: "Create token",
         latestToken: "Latest token: ",
-        copyToken:
+        copy: "Copy token",
+        copyWarning:
           "Token will be displayed just this once " +
           "and recovering it is not be possible. " +
           "Please store the token somewhere " +
           "safe before closing this modal.",
         tokenCopied: "Token copied.",
-        back: "Back to all folders",
+        tokenRemoved: "Token removed.",
+        inUse: "Token identifier already in use.",
+        creationFailed: "Token creation failed.",
       },
       encrypt: {
         uploadFiles: "Upload files",
@@ -598,17 +602,21 @@ let default_translations = {
       },
       tokens: {
         empty: "Projektille ei ole luotu API-avaimia",
-        identifier: "Tunniste",
+        title: "Luo API-avaimet",
+        identifier: "Avainten tunnisteet",
         identLabel: "Syötä tunniste uudelle API-avaimelle",
         createToken: "Luo avain",
         latestToken: "Viimeisin avain: ",
-        back: "Palaa päänäkymään",
-        copyToken:
-          "Avain näytetään vain kerran luonnin jälkeen, eikä sen " +
-          "kopiointi tai palautus jälkeenpäin ole mahdollista. " +
-          "Kopioi avain talteen ennen kuin " +
-          "poistut tältä sivulta.",
+        copy: "Kopioi avain",
+        copyWarning:
+          "Avain näytetään vain tämän kerran, " +
+          "eikä sen kopiointi tai palautus ole mahdollista jälkeenpäin. " +
+          "Tallenna avain turvalliseen paikkaan " +
+          "ennen kuin suljet tämän ikkunan.",
         tokenCopied: "Avain kopioitu.",
+        tokenRemoved: "Avain poistettu.",
+        creationFailed: "Avaimen luonti epäonnistui.",
+        inUse: "Avaimen tunniste on jo käytössä.",
       },
       encrypt: {
         uploadFiles: "Lataa tiedostoja",
diff --git a/swift_browser_ui_frontend/src/components/BrowserMainNavbar.vue b/swift_browser_ui_frontend/src/components/BrowserMainNavbar.vue
index 13e5f2da3..e1e32a828 100644
--- a/swift_browser_ui_frontend/src/components/BrowserMainNavbar.vue
+++ b/swift_browser_ui_frontend/src/components/BrowserMainNavbar.vue
@@ -157,10 +157,8 @@ export default {
               href: this.$t("message.supportMenu.itemLink2"),
             },
             {
-              title: this.$t("message.supportMenu.item3"),
-              route: {name: "TokensView", params: {
-                user: this.uname,
-                project: this.active.id}},
+              title: this.$t("message.supportMenu.sharing"),
+              action: () => this.$store.commit("toggleTokenModal", true),
             },
             {
               title: this.$t("message.supportMenu.item4"),
diff --git a/swift_browser_ui_frontend/src/components/TokenModal.vue b/swift_browser_ui_frontend/src/components/TokenModal.vue
index 090a96acb..6370ee35a 100644
--- a/swift_browser_ui_frontend/src/components/TokenModal.vue
+++ b/swift_browser_ui_frontend/src/components/TokenModal.vue
@@ -5,7 +5,7 @@
       align="center"
     >
       <h2 class="title is-4 has-text-dark">
-        Create API-tokens <!--add to lang-->
+        {{ $t("message.tokens.title") }}
       </h2>
       <c-button
         text
@@ -17,47 +17,51 @@
           alt=""
           aria-hidden="true"
         />
-        {{ $t("message.share.close") }} <!--add to lg-->
+        {{ $t("message.close") }}
       </c-button>
     </c-card-actions>
-    <c-card-content id="create-token">
+    <c-card-content>
       <c-text-field
         v-csc-model="newIdentifier"
         name="newIdentifier"
         :label="$t('message.tokens.identLabel')"
       />
       <c-button
-        :disabled="tokenExists(newIdentifier)"
+        id="create-button"
         @click="addToken(newIdentifier)"
         @keyup.enter="addToken(newIdentifier)"
       >
         {{ $t('message.tokens.createToken') }}
       </c-button>
-      <div v-show="latest">
-        <c-row
-          align="center"
-          justify="space-between"
-        >
-          <p>
-            <strong>{{ $t('message.tokens.latestToken') }}</strong>
-          </p>
+      <c-row
+        v-show="latest"
+        align="start"
+        justify="space-between"
+      >
+        <p>
+          <strong>{{ $t('message.tokens.latestToken') }}</strong>
+        </p>
+        <div id="token">
           <p>{{ latest }}</p>
-          <c-button
-            size="small"
-            @click="copyLatestToken"
-            @keyup.enter="copyLatestToken"
-          >
-            <i
-              slot="icon"
-              class="mdi mdi-content-copy"
-            />
-            Copy token
-          </c-button>
-        </c-row>
-        <c-alert type="warning">
-          <p>{{ $t('message.tokens.copyToken') }}</p> <!--edit Finnish text-->
-        </c-alert>
-      </div>
+        </div>
+        <c-button
+          size="small"
+          @click="copyLatestToken"
+          @keyup.enter="copyLatestToken"
+        >
+          <i
+            slot="icon"
+            class="mdi mdi-content-copy"
+          />
+          {{ $t('message.tokens.copy') }}
+        </c-button>
+      </c-row>
+      <c-alert
+        v-show="latest"
+        type="warning"
+      >
+        <p>{{ $t('message.tokens.copyWarning') }}</p>
+      </c-alert>
       <c-data-table
         v-show="tokens.length > 0"
         class="tokenContents"
@@ -65,11 +69,13 @@
         sort-direction="asc"
         :data.prop="tableTokens"
         :headers.prop="headers"
-        hide-footer
+        :pagination.prop="tokenPagination"
+        :footer-options.prop="footer"
+        :hide-footer="tokens.length <= tokensPerPage"
       />
       <c-toasts
-        id="copy-token-toasts"
-        data-testid="copy-token-toasts"
+        id="token-toasts"
+        data-testid="token-toasts"
       />
     </c-card-content>
   </c-card>
@@ -87,10 +93,10 @@ export default {
   data() {
     return {
       tokens: [],
-      selected: undefined,
       newIdentifier: "",
       latest: undefined,
       copied: false,
+      tokensPerPage: 5,
       mdiClose,
       mdiDelete,
     };
@@ -140,6 +146,18 @@ export default {
         };
       });
     },
+    tokenPagination() {
+      return {
+        itemCount: this.tokens.length,
+        itemsPerPage: this.tokensPerPage,
+        currentPage: 1,
+      };
+    },
+    footer() {
+      return {
+        hideDetails: true,
+      };
+    },
   },
   watch: {
     activeId () {
@@ -150,7 +168,6 @@ export default {
     closeTokenModal: function () {
       this.$store.commit("toggleTokenModal", false);
       this.newIdentifier = "";
-      this.selected = undefined;
       this.latest = undefined;
       this.copied = false;
     },
@@ -158,13 +175,32 @@ export default {
       listTokens(this.activeId).then((ret) => {this.tokens = ret;});
     },
     addToken: function (identifier) {
-      createExtToken(
-        this.activeId,
-        identifier,
-      ).then((ret) => {
-        this.latest = ret;
-        this.getTokens();
-      });
+      if (!this.tokenExists(identifier)) {
+        createExtToken(
+          this.activeId,
+          identifier,
+        ).then((ret) => {
+          this.latest = ret;
+          this.getTokens();
+        }).catch(() => {
+          document.querySelector("#token-toasts").addToast(
+            {
+              type: "error",
+              progress: false,
+              message: this.$t("message.tokens.creationFailed"),
+            },
+          );
+        });
+      }
+      else {
+        document.querySelector("#token-toasts").addToast(
+          {
+            type: "error",
+            progress: false,
+            message: this.$t("message.tokens.inUse"),
+          },
+        );
+      }
     },
     tokenExists: function (identifier) {
       return this.tokens.includes(identifier) ? true : false;
@@ -175,9 +211,8 @@ export default {
           this.latest,
         ).then(() => {
           this.copied = true;
-          document.querySelector("#copy-token-toasts").addToast(
+          document.querySelector("#token-toasts").addToast(
             {
-              duration: 6000,
               type: "success",
               progress: false,
               message: this.$t("message.tokens.tokenCopied"),
@@ -193,7 +228,16 @@ export default {
       removeToken(
         this.activeId,
         identifier,
-      ).then(() => {this.getTokens();});
+      ).then(() => {
+        document.querySelector("#token-toasts").addToast(
+          {
+            type: "success",
+            progress: false,
+            message: this.$t("message.tokens.tokenRemoved"),
+          },
+        );
+        this.getTokens();
+      });
     },
   },
 };
@@ -203,19 +247,41 @@ export default {
 @import "@/css/prod.scss";
 
 .token-card {
-  padding: 3rem 2rem 3rem 2rem;
+  padding: 3rem 2rem;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
+  max-height: 75vh;
+  overflow-y: scroll;
 }
 
-#create-token > c-button {
+#create-button {
   margin-top: -2rem;
 }
 
-c-text-field {
-  margin-top: -1rem;
+#token {
+  width: 70%;
+  padding: 0rem 0.5rem;
+  overflow-wrap: anywhere;
+}
+
+@media screen and (max-width: 1366px) {
+  #token {
+    width: 100%;
+    padding: 0.5rem 0;
+  }
 }
 
+@media screen and (max-width: 992px) {
+  .token-card {
+    max-height: 60vh;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .token-card {
+    padding: 1.5rem 1rem;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/swift_browser_ui_frontend/src/pages/BrowserPage.vue b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
index a5383782d..1207add60 100644
--- a/swift_browser_ui_frontend/src/pages/BrowserPage.vue
+++ b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
@@ -58,7 +58,7 @@
       </c-modal>
       <c-modal
         v-csc-model="openTokenModal"
-        width="60vw"
+        width="64vw"
       >
         <TokenModal />
       </c-modal>

From 0f94536cdce937bf40ef8878db483ce4dd384881 Mon Sep 17 00:00:00 2001
From: Monika Radaviciute <monika.radaviciute@csc.fi>
Date: Tue, 21 Mar 2023 13:22:07 +0200
Subject: [PATCH 04/13] added .vue that got away

---
 swift_browser_ui_frontend/src/common/router.js |  2 +-
 swift_browser_ui_frontend/src/entries/main.js  | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/swift_browser_ui_frontend/src/common/router.js b/swift_browser_ui_frontend/src/common/router.js
index f25c9f260..989cd45a2 100644
--- a/swift_browser_ui_frontend/src/common/router.js
+++ b/swift_browser_ui_frontend/src/common/router.js
@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import FoldersView from "@/views/Folders.vue";
 import ObjectsView from "@/views/Objects.vue";
-import SharedObjects from "@/views/SharedObjects";
+import SharedObjects from "@/views/SharedObjects.vue";
 
 export default createRouter({
   history: createWebHistory(),
diff --git a/swift_browser_ui_frontend/src/entries/main.js b/swift_browser_ui_frontend/src/entries/main.js
index 32eb83fea..18488dcc4 100644
--- a/swift_browser_ui_frontend/src/entries/main.js
+++ b/swift_browser_ui_frontend/src/entries/main.js
@@ -6,13 +6,13 @@ import router from "@/common/router";
 // Project Vue components
 import BrowserMainNavbar from "@/components/BrowserMainNavbar.vue";
 import BrowserSecondaryNavbar from "@/components/BrowserSecondaryNavbar.vue";
-import CreateFolderModal from "@/components/CreateFolderModal";
-import UploadModal from "@/components/UploadModal";
-import EditTagsModal from "@/components/EditTagsModal";
-import ShareModal from "@/components/ShareModal";
-import CopyFolderModal from "@/components/CopyFolderModal";
-import DeleteModal from "@/components/DeleteModal";
-import TokenModal from "@/components/TokenModal";
+import CreateFolderModal from "@/components/CreateFolderModal.vue";
+import UploadModal from "@/components/UploadModal.vue";
+import EditTagsModal from "@/components/EditTagsModal.vue";
+import ShareModal from "@/components/ShareModal.vue";
+import CopyFolderModal from "@/components/CopyFolderModal.vue";
+import DeleteModal from "@/components/DeleteModal.vue";
+import TokenModal from "@/components/TokenModal.vue";
 
 // CSC UI things
 import { applyPolyfills, defineCustomElements } from "csc-ui/dist/loader";

From 4b4faa1ee0a3eb1bfb3f8931e6a26063ce4f3083 Mon Sep 17 00:00:00 2001
From: Monika Radaviciute <monika.radaviciute@csc.fi>
Date: Tue, 21 Mar 2023 13:36:42 +0200
Subject: [PATCH 05/13] remove token view

---
 .../src/views/Tokens.vue                      | 233 ------------------
 1 file changed, 233 deletions(-)
 delete mode 100644 swift_browser_ui_frontend/src/views/Tokens.vue

diff --git a/swift_browser_ui_frontend/src/views/Tokens.vue b/swift_browser_ui_frontend/src/views/Tokens.vue
deleted file mode 100644
index b4ba54123..000000000
--- a/swift_browser_ui_frontend/src/views/Tokens.vue
+++ /dev/null
@@ -1,233 +0,0 @@
-<template>
-  <div class="contents">
-    <div class="tokenContents">
-      <section class="section">
-        <router-link
-          class="back-link"
-          :to="{
-            name: 'AllFolders',
-          }"
-        >
-          <i class="mdi mdi-chevron-left" />
-          {{ $t('message.tokens.back') }}
-        </router-link>
-      </section>
-      <c-row gap="8">
-        <c-text-field
-          v-model="newIdentifier"
-          v-csc-control
-          name="newIdentifier"
-          :label="$t('message.tokens.identLabel')"
-          :hint="$t('message.tokens.identMessage')"
-          fit
-        />
-        <c-button
-          :disabled="tokenExists(newIdentifier)"
-          @click="addToken(newIdentifier)"
-        >
-          {{ $t('message.tokens.createToken') }}
-        </c-button>
-      </c-row>
-    </div>
-    <div
-      v-if="latest"
-      class="tokenContents"
-    >
-      <div class="latestTokenRow">
-        <span>
-          <b>{{ $t('message.tokens.latestToken') }}</b>&nbsp;{{ latest }}&nbsp;
-        </span>
-        <c-button
-          class="copyButton"
-          outlined
-          @click="copyTokenHex()"
-        >
-          <i
-            slot="icon"
-            class="mdi mdi-content-copy"
-          />
-          {{ $t('message.copy') }}
-        </c-button>
-      </div>
-    </div>
-    <c-data-table
-      class="tokenContents"
-      sort-by="identifier"
-      sort-direction="asc"
-      :data.prop="tableTokens"
-      :headers.prop="headers"
-      :no-data-text="$t('message.tokens.empty')"
-      hide-footer
-    />
-    <c-toasts
-      id="add-token-toasts"
-      data-testid="add-token-toasts"
-      vertical="top"
-      horizontal="right"
-    />
-    <c-toasts
-      id="copy-token-toasts"
-      data-testid="copy-token-toasts"
-    />
-  </div>
-</template>
-
-<script>
-import {
-  createExtToken,
-  listTokens,
-  removeToken,
-} from "@/common/api";
-import {
-  mdiDelete,
-} from "@mdi/js";
-
-export default {
-  name: "TokensView",
-  data () {
-    return {
-      tokens: [],
-      selected: undefined,
-      newIdentifier: "",
-      latest: undefined,
-      copied: false,
-    };
-  },
-  computed: {
-    active () {
-      return this.$route.params.project;
-    },
-    headers () {
-      return [
-        {
-          key: "identifier",
-          value: this.$t("message.tokens.identifier"),
-          sortable: true,
-        },
-        {
-          key: "controls",
-          value: null,
-          sortable: false,
-          children: [
-            {
-              value: this.$t("message.tokens.revoke"),
-              component: {
-                tag: "c-button",
-                params: {
-                  text: true,
-                  size: "small",
-                  title: this.$t("message.tokens.revoke"),
-                  type: "error",
-                  path: mdiDelete,
-                  onClick: ({ data: { identifier } }) =>
-                    this.deleteToken(identifier.value),
-                },
-              },
-            },
-          ],
-        },
-      ];
-    },
-    tableTokens () {
-      return this.tokens.map(token => {
-        return {
-          identifier: {
-            value: token,
-          },
-        };
-      });
-    },
-  },
-  beforeMount () {
-    this.getTokens();
-  },
-  methods: {
-    getTokens: function () {
-      listTokens(this.active).then((ret) => {this.tokens = ret;});
-    },
-    deleteToken: function (identifier) {
-      removeToken(
-        this.active,
-        identifier,
-      ).then(() => {this.getTokens();});
-    },
-    addToken: function (identifier) {
-      createExtToken(
-        this.active,
-        identifier,
-      ).then((ret) => {
-        this.latest = ret;
-        document.querySelector("#add-token-toasts").addToast(
-          {
-            duration: 3600000,
-            type: "success",
-            progress: false,
-            message: this.$t("message.tokens.copyToken"),
-          },
-        );
-        this.getTokens();
-      });
-    },
-    tokenExists: function (identifier) {
-      return this.tokens.includes(identifier) ? true : false;
-    },
-    copyTokenHex: function () {
-      if (!this.copied) {
-        navigator.clipboard.writeText(
-          this.latest,
-        ).then(() => {
-          this.copied = true;
-          document.querySelector("#copy-token-toasts").addToast(
-            {
-              duration: 6000,
-              type: "success",
-              progress: false,
-              message: this.$t("message.tokens.tokenCopied"),
-            },
-          );
-          //like with ShareID copy button:
-          //avoid overlapping toasts
-          setTimeout(() => { this.copied = false; }, 6000);
-        });
-      }
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-
-.contents{
-  font-family: var(--csc-font-family);
-}
-.tokenContents {
-  width: 90%;
-  margin-left: 5%;
-  margin-right: 5%;
-}
-.emptyContents {
-  width: 100%;
-  text-align: center;
-  margin-top: 5%;
-  margin-bottom: 5%;
-}
-.latestTokenRow {
-  display: flex;
-  align-items: center;
-  justify-content: left;
-}
-.copyButton {
-  margin-left: 1%;
-}
-.back-link {
-  display: flex;
-  padding-bottom: .5rem;
-  color: $csc-primary;
-  font-weight: 600;
-  align-items: center;
-
-  & .mdi {
-    font-size: 2rem;
-  }
-}
-</style>

From 10d0f09b7e85b58c5c172e689da245a6c4bb0e0e Mon Sep 17 00:00:00 2001
From: Monika Radaviciute <monika.radaviciute@csc.fi>
Date: Tue, 21 Mar 2023 14:15:07 +0200
Subject: [PATCH 06/13] Update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 13647359e..986bf2025 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -55,6 +55,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (GH #989) Make selected Display Options consistent when browsing between pages
 - (GH #944) Create new Taginput component to replace Buefy's taginput component
 - (GL #944) Replace buefy upload button with a new component: `CUploadButton`
+- (GL #940) Added TokenModal to replace token page
 
 ### Changed
 

From 14bfe39382a3411e55df8e5b77a6318f0625ca94 Mon Sep 17 00:00:00 2001
From: Monika Radaviciute <monika.radaviciute@csc.fi>
Date: Tue, 21 Mar 2023 14:39:48 +0200
Subject: [PATCH 07/13] Added FIN words for spellcheck

---
 .github/config/.finnishwords.txt | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/.github/config/.finnishwords.txt b/.github/config/.finnishwords.txt
index 07f9255bb..e563a404f 100644
--- a/.github/config/.finnishwords.txt
+++ b/.github/config/.finnishwords.txt
@@ -64,6 +64,7 @@ hinnoittelulaskuri
 hyväksy
 hyväksyä
 hyväksyäksesi
+ikkunan
 ilman
 ja
 jaa
@@ -173,7 +174,10 @@ kopiointi
 kopioitu
 koskevia
 kuin
+<<<<<<< HEAD
 kuinka
+=======
+>>>>>>> 71f27bd9 (Added FIN words for spellcheck)
 kulutuksesta
 kulutus
 kun
@@ -338,6 +342,9 @@ ota
 ottaneesi
 ovat
 oy
+päänäkymään
+pääsy
+paikkaan
 paina
 painikkeella
 painikkeesta
@@ -464,6 +471,7 @@ sivupyynnössä
 sivutus
 sopimus
 sulje
+suljet
 suodata
 suositellut
 suuren
@@ -549,6 +557,8 @@ tunnus
 tunti
 tuo
 tuottaa
+turvalliseen
+tyhjä
 tyhjennä
 tyhjä
 tyyppi

From dd619565b424b298a54feaaa6e71f300d131db57 Mon Sep 17 00:00:00 2001
From: Monika Radaviciute <monika.radaviciute@csc.fi>
Date: Thu, 23 Mar 2023 15:46:11 +0200
Subject: [PATCH 08/13] Clear input after creation. Fixed button

---
 swift_browser_ui_frontend/src/common/lang.js            | 2 +-
 swift_browser_ui_frontend/src/components/TokenModal.vue | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/swift_browser_ui_frontend/src/common/lang.js b/swift_browser_ui_frontend/src/common/lang.js
index 1a3e0cee5..86d0ff57c 100644
--- a/swift_browser_ui_frontend/src/common/lang.js
+++ b/swift_browser_ui_frontend/src/common/lang.js
@@ -601,7 +601,7 @@ let default_translations = {
         name_newFolder: "Nimeä uusi kansio",
       },
       tokens: {
-        empty: "Projektille ei ole luotu API-avaimia",
+        empty: "Tälle projektille ei ole luotu API-avaimia",
         title: "Luo API-avaimet",
         identifier: "Avainten tunnisteet",
         identLabel: "Syötä tunniste uudelle API-avaimelle",
diff --git a/swift_browser_ui_frontend/src/components/TokenModal.vue b/swift_browser_ui_frontend/src/components/TokenModal.vue
index 6370ee35a..64d65d7b6 100644
--- a/swift_browser_ui_frontend/src/components/TokenModal.vue
+++ b/swift_browser_ui_frontend/src/components/TokenModal.vue
@@ -63,10 +63,10 @@
         <p>{{ $t('message.tokens.copyWarning') }}</p>
       </c-alert>
       <c-data-table
-        v-show="tokens.length > 0"
         class="tokenContents"
         sort-by="identifier"
         sort-direction="asc"
+        :no-data-text="$t('message.tokens.empty')"
         :data.prop="tableTokens"
         :headers.prop="headers"
         :pagination.prop="tokenPagination"
@@ -88,6 +88,7 @@ import {
   listTokens,
   removeToken,
 } from "@/common/api";
+
 export default {
   name: "TokenModal",
   data() {
@@ -181,6 +182,7 @@ export default {
           identifier,
         ).then((ret) => {
           this.latest = ret;
+          this.newIdentifier = "";
           this.getTokens();
         }).catch(() => {
           document.querySelector("#token-toasts").addToast(
@@ -257,6 +259,7 @@ export default {
 }
 
 #create-button {
+  width: max-content;
   margin-top: -2rem;
 }
 

From ed0e81475150646e73d91ae454d5d686a2d6933c Mon Sep 17 00:00:00 2001
From: Monika Radaviciute <monika.radaviciute@csc.fi>
Date: Thu, 23 Mar 2023 15:53:02 +0200
Subject: [PATCH 09/13] Add to vocabulary

---
 .github/config/.finnishwords.txt | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/config/.finnishwords.txt b/.github/config/.finnishwords.txt
index e563a404f..3e2f6419c 100644
--- a/.github/config/.finnishwords.txt
+++ b/.github/config/.finnishwords.txt
@@ -495,6 +495,8 @@ säiliöön
 säilön
 tai
 takaisin
+tällä
+tälle
 tallenna
 tallennettujen
 tallennustilaan

From ed0866c7b680d5edc28ec10ce94b81ca47fb7cea Mon Sep 17 00:00:00 2001
From: Monika Radaviciute <monika.radaviciute@csc.fi>
Date: Fri, 24 Mar 2023 13:35:02 +0200
Subject: [PATCH 10/13] Remove toasts on closing modal

---
 swift_browser_ui_frontend/src/components/TokenModal.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/swift_browser_ui_frontend/src/components/TokenModal.vue b/swift_browser_ui_frontend/src/components/TokenModal.vue
index 64d65d7b6..fe68d559e 100644
--- a/swift_browser_ui_frontend/src/components/TokenModal.vue
+++ b/swift_browser_ui_frontend/src/components/TokenModal.vue
@@ -171,6 +171,10 @@ export default {
       this.newIdentifier = "";
       this.latest = undefined;
       this.copied = false;
+      document.querySelector("#token-toasts").removeToast("error-failed");
+      document.querySelector("#token-toasts").removeToast("error-in-use");
+      document.querySelector("#token-toasts").removeToast("success-copied");
+      document.querySelector("#token-toasts").removeToast("success-removed");
     },
     getTokens: function () {
       listTokens(this.activeId).then((ret) => {this.tokens = ret;});
@@ -187,6 +191,7 @@ export default {
         }).catch(() => {
           document.querySelector("#token-toasts").addToast(
             {
+              id: "error-failed",
               type: "error",
               progress: false,
               message: this.$t("message.tokens.creationFailed"),
@@ -197,6 +202,7 @@ export default {
       else {
         document.querySelector("#token-toasts").addToast(
           {
+            id: "error-in-use",
             type: "error",
             progress: false,
             message: this.$t("message.tokens.inUse"),
@@ -215,6 +221,7 @@ export default {
           this.copied = true;
           document.querySelector("#token-toasts").addToast(
             {
+              id: "success-copied",
               type: "success",
               progress: false,
               message: this.$t("message.tokens.tokenCopied"),
@@ -233,6 +240,7 @@ export default {
       ).then(() => {
         document.querySelector("#token-toasts").addToast(
           {
+            id: "success-removed",
             type: "success",
             progress: false,
             message: this.$t("message.tokens.tokenRemoved"),

From 6fa3835834d61d5c0937ae3accc9820dcc027c45 Mon Sep 17 00:00:00 2001
From: Monika Radaviciute <monika.radaviciute@csc.fi>
Date: Wed, 29 Mar 2023 10:46:30 +0300
Subject: [PATCH 11/13] Fix pre-commit err

---
 .github/config/.finnishwords.txt                        | 6 +-----
 swift_browser_ui_frontend/src/components/TokenModal.vue | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/.github/config/.finnishwords.txt b/.github/config/.finnishwords.txt
index 3e2f6419c..77e2c659d 100644
--- a/.github/config/.finnishwords.txt
+++ b/.github/config/.finnishwords.txt
@@ -342,8 +342,6 @@ ota
 ottaneesi
 ovat
 oy
-päänäkymään
-pääsy
 paikkaan
 paina
 painikkeella
@@ -495,8 +493,6 @@ säiliöön
 säilön
 tai
 takaisin
-tällä
-tälle
 tallenna
 tallennettujen
 tallennustilaan
@@ -560,7 +556,6 @@ tunti
 tuo
 tuottaa
 turvalliseen
-tyhjä
 tyhjennä
 tyhjä
 tyyppi
@@ -569,6 +564,7 @@ tägejä
 tägillä
 tägit
 tähän
+tälle
 tällä
 tältä
 tämä
diff --git a/swift_browser_ui_frontend/src/components/TokenModal.vue b/swift_browser_ui_frontend/src/components/TokenModal.vue
index fe68d559e..cca69a253 100644
--- a/swift_browser_ui_frontend/src/components/TokenModal.vue
+++ b/swift_browser_ui_frontend/src/components/TokenModal.vue
@@ -295,4 +295,4 @@ export default {
     padding: 1.5rem 1rem;
   }
 }
-</style>
\ No newline at end of file
+</style>

From 96f0e5dc2a0ed99a762d8e642da98ae3327e5153 Mon Sep 17 00:00:00 2001
From: Monika Radaviciute <monika.radaviciute@csc.fi>
Date: Wed, 29 Mar 2023 16:57:08 +0300
Subject: [PATCH 12/13] removed v-csc-model

---
 swift_browser_ui_frontend/src/components/TokenModal.vue | 3 ++-
 swift_browser_ui_frontend/src/pages/BrowserPage.vue     | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/swift_browser_ui_frontend/src/components/TokenModal.vue b/swift_browser_ui_frontend/src/components/TokenModal.vue
index cca69a253..13bfecb17 100644
--- a/swift_browser_ui_frontend/src/components/TokenModal.vue
+++ b/swift_browser_ui_frontend/src/components/TokenModal.vue
@@ -22,7 +22,8 @@
     </c-card-actions>
     <c-card-content>
       <c-text-field
-        v-csc-model="newIdentifier"
+        v-model="newIdentifier"
+        v-csc-control
         name="newIdentifier"
         :label="$t('message.tokens.identLabel')"
       />
diff --git a/swift_browser_ui_frontend/src/pages/BrowserPage.vue b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
index 1207add60..d1803d022 100644
--- a/swift_browser_ui_frontend/src/pages/BrowserPage.vue
+++ b/swift_browser_ui_frontend/src/pages/BrowserPage.vue
@@ -57,7 +57,8 @@
         <DeleteModal />
       </c-modal>
       <c-modal
-        v-csc-model="openTokenModal"
+        v-model="openTokenModal"
+        v-csc-control
         width="64vw"
       >
         <TokenModal />

From 2e2e308ff15a8891eec6e56f3aecb65e085cefb1 Mon Sep 17 00:00:00 2001
From: Monika Radaviciute <monika.radaviciute@csc.fi>
Date: Thu, 30 Mar 2023 16:16:27 +0300
Subject: [PATCH 13/13] vocabulary fix

---
 .github/config/.finnishwords.txt | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/.github/config/.finnishwords.txt b/.github/config/.finnishwords.txt
index 77e2c659d..98b2ffbe0 100644
--- a/.github/config/.finnishwords.txt
+++ b/.github/config/.finnishwords.txt
@@ -174,10 +174,7 @@ kopiointi
 kopioitu
 koskevia
 kuin
-<<<<<<< HEAD
 kuinka
-=======
->>>>>>> 71f27bd9 (Added FIN words for spellcheck)
 kulutuksesta
 kulutus
 kun