From 983d50de9e5471ae9eea1d5331b282026e0c3f29 Mon Sep 17 00:00:00 2001
From: Monika Radaviciute <monika.radaviciute@csc.fi>
Date: Thu, 31 Aug 2023 09:57:36 +0300
Subject: [PATCH] Restore TokenModal

---
 .../src/components/TokenModal.vue             | 136 +++++++++---------
 1 file changed, 65 insertions(+), 71 deletions(-)

diff --git a/swift_browser_ui_frontend/src/components/TokenModal.vue b/swift_browser_ui_frontend/src/components/TokenModal.vue
index aaf350a89..5cb63f5a1 100644
--- a/swift_browser_ui_frontend/src/components/TokenModal.vue
+++ b/swift_browser_ui_frontend/src/components/TokenModal.vue
@@ -4,79 +4,74 @@
     class="token-card"
     @keydown="handleKeyDown"
   >
-    <c-card
-      ref="tokenContainer"
-      class="token-card"
-      @keydown="handleKeyDown"
+    <c-card-actions
+      justify="space-between"
+      align="center"
     >
-      <c-card-actions
+      <h2 class="title is-4">
+        {{ $t("message.tokens.title") }}
+      </h2>
+      <c-button
+        id="close-token-modal-btn"
+        text
+        @click="closeTokenModal"
+        @keyup.enter="closeTokenModal"
+      >
+        <c-icon
+          :path="mdiClose"
+          alt=""
+          aria-hidden="true"
+        />
+        {{ $t("message.close") }}
+      </c-button>
+    </c-card-actions>
+    <c-card-content>
+      <c-text-field
+        id="token-input"
+        v-model="newIdentifier"
+        v-csc-control
+        name="newIdentifier"
+        :label="$t('message.tokens.identLabel')"
+      />
+      <c-button
+        id="create-token-button"
+        @click="addToken(newIdentifier)"
+        @keyup.enter="addToken(newIdentifier)"
+      >
+        {{ $t('message.tokens.createToken') }}
+      </c-button>
+      <c-row
+        v-show="latest.token"
+        align="start"
         justify="space-between"
-        align="center"
       >
-        <h2 class="title is-4">
-          {{ $t("message.tokens.title") }}
-        </h2>
+        <p>
+          <strong>{{ $t('message.tokens.latestToken') }}</strong>
+        </p>
+        <div id="token">
+          <p>{{ latest.token }}</p>
+        </div>
         <c-button
-          id="close-token-modal-btn"
-          text
-          @click="closeTokenModal"
-          @keyup.enter="closeTokenModal"
+          size="small"
+          @click="copyLatestToken"
+          @keyup.enter="copyLatestToken"
         >
-          <c-icon
-            :path="mdiClose"
-            alt=""
-            aria-hidden="true"
+          <i
+            slot="icon"
+            class="mdi mdi-content-copy"
           />
-          {{ $t("message.close") }}
+          {{ $t('message.tokens.copy') }}
         </c-button>
-      </c-card-actions>
-      <c-card-content>
-        <c-text-field
-          id="token-input"
-          v-model="newIdentifier"
-          v-csc-control
-          name="newIdentifier"
-          :label="$t('message.tokens.identLabel')"
-        />
-        <c-button
-          id="create-token-button"
-          @click="addToken(newIdentifier)"
-          @keyup.enter="addToken(newIdentifier)"
-        >
-          {{ $t('message.tokens.createToken') }}
-        </c-button>
-        <c-row
-          v-show="latest.token"
-          align="start"
-          justify="space-between"
-        >
-          <p>
-            <strong>{{ $t('message.tokens.latestToken') }}</strong>
-          </p>
-          <div id="token">
-            <p>{{ latest.token }}</p>
-          </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.token"
-          type="warning"
-        >
-          <p>{{ $t('message.tokens.copyWarning') }}</p>
-        </c-alert>
-        <!-- Footer options needs to be in CamelCase,
+      </c-row>
+      <c-alert
+        v-show="latest.token"
+        type="warning"
+      >
+        <p>{{ $t('message.tokens.copyWarning') }}</p>
+      </c-alert>
+      <!-- Footer options needs to be in CamelCase,
       because csc-ui wont recognise it otherwise. -->
-        <!-- eslint-disable-->
+      <!-- eslint-disable-->
       <c-data-table
         sort-by="identifier"
         sort-direction="asc"
@@ -89,12 +84,11 @@
         @click="checkPage"
       />
       <!-- eslint-enable-->
-        <c-toasts
-          id="token-toasts"
-          data-testid="token-toasts"
-        />
-      </c-card-content>
-    </c-card>
+      <c-toasts
+        id="token-toasts"
+        data-testid="token-toasts"
+      />
+    </c-card-content>
   </c-card>
 </template>