From acea015680db3e57d3e4797fe4b8d904858be26c Mon Sep 17 00:00:00 2001
From: Victor Bustamante <victor@systeminit.com>
Date: Mon, 6 Jan 2025 16:30:13 -0300
Subject: [PATCH] Feat: Automation token UI update

Signed-off-by: Victor Bustamante <victor@systeminit.com>
---
 .../src/components/AuthTokenListItem.vue      |  39 +++--
 .../src/pages/WorkspaceAuthTokensPage.vue     | 134 +++++++++++-------
 .../src/design-system/forms/VormInput.vue     |  56 ++++----
 .../design-system/general/ErrorMessage.vue    |   4 +-
 4 files changed, 144 insertions(+), 89 deletions(-)

diff --git a/app/auth-portal/src/components/AuthTokenListItem.vue b/app/auth-portal/src/components/AuthTokenListItem.vue
index 3e9b40608e..6585c52f27 100644
--- a/app/auth-portal/src/components/AuthTokenListItem.vue
+++ b/app/auth-portal/src/components/AuthTokenListItem.vue
@@ -1,8 +1,16 @@
 <template>
   <tr
-    class="children:px-md children:py-sm children:truncate text-sm font-medium text-gray-800 dark:text-gray-200"
+    :class="
+      clsx(
+        themeClasses(
+          'odd:bg-neutral-200 even:bg-neutral-100',
+          'odd:bg-neutral-700 even:bg-neutral-800',
+        ),
+      )
+    "
+    class="children:px-sm children:py-xs children:truncate text-sm font-medium text-gray-800 dark:text-gray-200"
   >
-    <td class="">
+    <td>
       <div
         class="xl:max-w-[800px] lg:max-w-[60vw] md:max-w-[50vw] sm:max-w-[40vw] max-w-[150px] truncate"
       >
@@ -10,15 +18,18 @@
       </div>
     </td>
     <!-- TODO show user of token if it's not current user--right now only owner can create -->
-    <td class="normal-case">{{ authToken.createdAt }}</td>
-    <td class="normal-case">{{ authToken.expiresAt }}</td>
-    <td class="normal-case">
+    <td>{{ createdAt }}</td>
+    <td>{{ expiresAt }}</td>
+    <td class="text-center">
       <ErrorMessage :asyncState="revoke" />
       <VButton
         v-if="workspace.role === 'OWNER'"
-        icon="trash"
         :loading="revoke.isLoading.value"
-        class="cursor-pointer hover:text-destructive-500"
+        class="cursor-pointer"
+        icon="trash"
+        loadingText=""
+        size="2xs"
+        variant="transparent"
         @click="revoke.execute()"
       />
     </td>
@@ -26,9 +37,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ErrorMessage, VButton } from "@si/vue-lib/design-system";
+import clsx from "clsx";
+import { ErrorMessage, themeClasses, VButton } from "@si/vue-lib/design-system";
 import { apiData } from "@si/vue-lib/pinia";
 import { useAsyncState } from "@vueuse/core";
+import { computed } from "vue";
 import { Workspace } from "@/store/workspaces.store";
 import { AuthToken, useAuthTokensApi } from "@/store/authTokens.store";
 
@@ -55,6 +68,16 @@ const revoke = useAsyncState(
   { immediate: false },
 );
 
+const createdAt = computed(() =>
+  new Date(props.authToken.createdAt).toLocaleString(),
+);
+
+const expiresAt = computed(() =>
+  props.authToken.expiresAt
+    ? new Date(props.authToken.expiresAt).toLocaleString()
+    : undefined,
+);
+
 // /** Action to rename token */
 // const rename = useAsyncState(
 //   async () => {
diff --git a/app/auth-portal/src/pages/WorkspaceAuthTokensPage.vue b/app/auth-portal/src/pages/WorkspaceAuthTokensPage.vue
index de0d1eeea2..af43ab79f6 100644
--- a/app/auth-portal/src/pages/WorkspaceAuthTokensPage.vue
+++ b/app/auth-portal/src/pages/WorkspaceAuthTokensPage.vue
@@ -13,96 +13,65 @@
             :to="{ name: 'workspace-settings', params: { workspaceId } }"
           >
             <Icon
+              class="flex-none"
+              iconBgActiveTone="action"
+              iconIdleTone="shade"
+              iconTone="warning"
               name="settings"
+              size="lg"
               tooltip="Settings"
               tooltipPlacement="top"
-              size="lg"
-              class="flex-none"
-              iconTone="warning"
-              iconIdleTone="shade"
-              iconBgActiveTone="action"
             />
           </RouterLink>
         </WorkspacePageHeader>
 
         <Stack>
           <ErrorMessage :asyncState="createAuthToken" />
-          <div class="flex flex-row flex-wrap items-end gap-xs">
+          <div
+            v-if="workspace.role === 'OWNER'"
+            class="flex flex-row flex-wrap items-end gap-md"
+          >
             <VormInput
               v-model="createAuthTokenName"
-              :disabled="workspace.role !== 'OWNER'"
-              required
-              label="Token Name"
-              defaultValue="My API Token"
+              inlineLabel
+              label="Token Name*"
+              @keydown.enter.prevent="createAuthToken.execute()"
             />
             <VButton
-              :disabled="workspace.role !== 'OWNER'"
+              :disabled="!(createAuthTokenName?.length > 0)"
               :loading="createAuthToken.isLoading.value"
               loadingText="Creating ..."
-              iconRight="chevron--down"
               tone="action"
               variant="solid"
               @click="createAuthToken.execute()"
             >
-              Create Automation Token
+              Generate Automation Token
             </VButton>
           </div>
-          <Stack
-            v-if="createAuthToken.state.value"
-            class="border-2 outline-2 rounded p-8"
-          >
-            <div>Token successfully created!</div>
-            <div class="text-lg font-bold">
-              This is the last time you will ever see this token value.
-            </div>
-            <VormInput
-              :modelValue="createAuthToken.state.value"
-              type="textarea"
-              label="Your API Token"
-              disabled
-            />
-            <div>
-              Click the button below to copy it before navigating away or doing
-              anything else!
-            </div>
-            <VButton
-              icon="clipboard-copy"
-              tone="action"
-              label="Copy API Token To Clipboard"
-              class="mt-xs"
-              clickSuccess
-              successText="Copied to clipboard!"
-              @click="copyToken"
-            />
-          </Stack>
           <ErrorMessage :asyncState="authTokens" />
           <div v-if="authTokens.state.value" class="relative">
             <Stack>
-              <table
-                class="w-full divide-y divide-neutral-400 dark:divide-neutral-600 border-b border-neutral-400 dark:border-neutral-600"
-              >
+              <table class="w-full">
                 <thead>
                   <tr
-                    class="children:pb-xs children:px-md children:font-bold text-left text-xs uppercase"
+                    class="children:py-xs children:px-sm children:font-bold text-left text-xs uppercase bg-black"
                   >
                     <th scope="col">Name</th>
                     <th scope="col">Created</th>
                     <th scope="col">Expires</th>
-                    <th scope="col">Revoke</th>
+                    <th class="text-center" scope="col">Revoke</th>
                   </tr>
                 </thead>
                 <tbody
                   class="divide-y divide-neutral-300 dark:divide-neutral-700"
                 >
                   <AuthTokenListItem
-                    v-for="authToken of Object.values(
-                      authTokens.state.value,
-                    ).reverse()"
+                    v-for="authToken of listedTokens"
                     :key="authToken.id"
                     :authToken="authToken"
                     :workspace="workspace"
-                    @revoked="delete authTokens.state.value[authToken.id]"
                     @renamed="(newName) => (authToken.name = newName)"
+                    @revoked="delete authTokens.state.value[authToken.id]"
                   />
                 </tbody>
               </table>
@@ -110,6 +79,45 @@
           </div>
         </Stack>
       </div>
+      <Modal ref="tokenDisplayModalRef" size="lg" title="Token Generated">
+        <ErrorMessage
+          v-if="tokenCopied"
+          class="rounded-md text-md px-xs py-xs"
+          icon="check-circle"
+          tone="success"
+          variant="block"
+        >
+          <b>Token copied!</b>
+          We are only showing you the value of this token once. Store it
+          somewhere secure, please.
+        </ErrorMessage>
+        <ErrorMessage
+          v-else
+          class="rounded-md text-md px-xs py-xs"
+          icon="alert-circle"
+          tone="info"
+          variant="block"
+        >
+          We are only showing you the value of this token once. Store it
+          somewhere secure, please.
+        </ErrorMessage>
+        <div class="flex mt-sm gap-xs">
+          <VormInput
+            :modelValue="createAuthToken.state.value"
+            class="flex-grow text-sm"
+            disabled
+            noLabel
+            type="text"
+          />
+          <IconButton
+            class="flex-shrink-0"
+            icon="clipboard-copy"
+            tooltip="Copy token to clipboard"
+            tooltipPlacement="right"
+            @click="copyToken"
+          />
+        </div>
+      </Modal>
     </template>
   </LoadStatus>
 </template>
@@ -124,14 +132,19 @@ import {
   VButton,
   LoadStatus,
   ErrorMessage,
+  Modal,
+  IconButton,
 } from "@si/vue-lib/design-system";
 import { useAsyncState } from "@vueuse/core";
 import { apiData } from "@si/vue-lib/pinia";
+import { useHead } from "@vueuse/head";
 import { useWorkspacesStore, WorkspaceId } from "@/store/workspaces.store";
 import WorkspacePageHeader from "@/components/WorkspacePageHeader.vue";
 import { useAuthTokensApi } from "@/store/authTokens.store";
 import AuthTokenListItem from "@/components/AuthTokenListItem.vue";
 
+useHead({ title: "Automation Tokens" });
+
 const workspacesStore = useWorkspacesStore();
 const api = useAuthTokensApi();
 
@@ -157,15 +170,26 @@ const authTokens = useAsyncState(
   { shallow: false },
 );
 
+const listedTokens = computed(() =>
+  _.reverse(_.sortBy(_.values(authTokens.state.value), "createdAt")),
+);
+
 /** Action to create auth token. Sets .state when done. */
 const createAuthToken = useAsyncState(
   async () => {
+    if (_.isEmpty(createAuthTokenName.value)) return;
+
     const { authToken, token } = await apiData(
       api.CREATE_AUTH_TOKEN(props.workspaceId, createAuthTokenName.value),
     );
     if (authTokens.state.value) {
       authTokens.state.value[authToken.id] = authToken;
     }
+
+    tokenCopied.value = false;
+    createAuthTokenName.value = "";
+    tokenDisplayModalRef.value?.open();
+
     return token;
   },
   undefined,
@@ -175,8 +199,14 @@ const createAuthToken = useAsyncState(
 /** Name of token to create */
 const createAuthTokenName = ref("");
 
+/** Token modal */
+const tokenDisplayModalRef = ref<InstanceType<typeof Modal> | null>(null);
+
+const tokenCopied = ref(false);
 async function copyToken() {
-  if (createAuthToken.state.value)
-    await navigator.clipboard.writeText(createAuthToken.state.value);
+  if (createAuthToken.state.value) {
+    await navigator.clipboard?.writeText(createAuthToken.state.value);
+  }
+  tokenCopied.value = true;
 }
 </script>
diff --git a/lib/vue-lib/src/design-system/forms/VormInput.vue b/lib/vue-lib/src/design-system/forms/VormInput.vue
index 506d9090f4..4d3f477e79 100644
--- a/lib/vue-lib/src/design-system/forms/VormInput.vue
+++ b/lib/vue-lib/src/design-system/forms/VormInput.vue
@@ -13,7 +13,6 @@ you can pass in options as props too */
   <div
     :key="formInputId"
     ref="wrapperRef"
-    class="vorm-input"
     :class="
       clsx(
         computedClasses,
@@ -21,6 +20,7 @@ you can pass in options as props too */
         compact ? 'vorm-input-compact' : 'vorm-input-standard',
       )
     "
+    class="vorm-input"
   >
     <label
       v-if="!noLabel"
@@ -42,8 +42,8 @@ you can pass in options as props too */
     <Icon
       v-if="iconRight"
       :class="clsx('vorm-input__right-icon')"
-      :rotate="iconRightRotate"
       :name="iconRight"
+      :rotate="iconRightRotate"
     />
     <div
       :class="
@@ -110,15 +110,15 @@ you can pass in options as props too */
             ]"
             :disabled="disabledBySelfOrParent"
             :value="valueForSelectField"
-            @focus="onFocus"
             @blur="onBlur"
             @change="onSelectChange"
+            @focus="onFocus"
           >
             <VormInputOption
               v-if="placeholder"
-              :value="null"
-              :hidden="!placeholderSelectable"
               :disabled="!placeholderSelectable"
+              :hidden="!placeholderSelectable"
+              :value="null"
             >
               {{ placeholder }}
             </VormInputOption>
@@ -159,9 +159,9 @@ you can pass in options as props too */
             ]"
             :disabled="disabledBySelfOrParent"
             :value="valueForSelectField"
-            @focus="onFocus"
             @blur="onBlur"
             @change="onSelectChange"
+            @focus="onFocus"
           >
             <optgroup
               v-for="(inner, innerLabel) in objectOptionsFromProps"
@@ -207,13 +207,13 @@ you can pass in options as props too */
           <input
             :id="formInputId"
             ref="inputRef"
-            :class="compact ? 'vorm-input-compact__input' : 'vorm-input__input'"
             :checked="modelValue === checkedValue"
-            type="checkbox"
+            :class="compact ? 'vorm-input-compact__input' : 'vorm-input__input'"
             :disabled="disabledBySelfOrParent"
+            type="checkbox"
             @input="onCheckboxChange"
           />
-          <label class="vorm-input__checkbox-text" :for="formInputId">
+          <label :for="formInputId" class="vorm-input__checkbox-text">
             <slot />
           </label>
         </template>
@@ -222,13 +222,13 @@ you can pass in options as props too */
           <textarea
             :id="formInputId"
             ref="inputRef"
-            :value="modelValueForTextArea"
             :class="compact ? 'vorm-input-compact__input' : 'vorm-input__input'"
-            :placeholder="computedPlaceholder"
             :disabled="disabledBySelfOrParent"
             :maxlength="maxLength"
-            @focus="onFocus"
+            :placeholder="computedPlaceholder"
+            :value="modelValueForTextArea"
             @blur="onBlur"
+            @focus="onFocus"
             @input="onChange"
           />
         </template>
@@ -236,21 +236,32 @@ you can pass in options as props too */
         <template v-else>
           <Icon
             v-if="type === 'password' && allowShowPassword"
-            class="vorm-input__pass-show-hide-toggle"
             :name="isPasswordMasked ? 'show' : 'hide'"
             allow-pointer-events
+            class="vorm-input__pass-show-hide-toggle"
             @click="isPasswordMasked = !isPasswordMasked"
           />
           <input
             :id="formInputId"
             ref="inputRef"
-            :value="modelValue"
+            :autocomplete="autocomplete"
             :class="
               clsx(
                 compact ? 'vorm-input-compact__input' : 'vorm-input__input',
                 compact && rename && 'vorm-input-compact__input__rename',
               )
             "
+            :disabled="disabledBySelfOrParent"
+            :maxlength="maxLength"
+            :minlength="minLength"
+            :name="name"
+            :passwordrules="
+              type === 'password'
+                ? `minlength: ${minLength}; maxlength: ${maxLength}; required: lower; required: upper; required: digit; required: special;`
+                : undefined
+            "
+            :placeholder="computedPlaceholder"
+            :step.prop="nativeInputNumberStepProp"
             :style="
               compact && rename
                 ? `font-size: ${
@@ -258,23 +269,12 @@ you can pass in options as props too */
                   }px; height: ${renameZoom > 1 ? 26 * renameZoom : 26}px;`
                 : ''
             "
-            :autocomplete="autocomplete"
-            :name="name"
             :type="nativeInputTagTypeProp"
-            :placeholder="computedPlaceholder"
-            :disabled="disabledBySelfOrParent"
-            :step.prop="nativeInputNumberStepProp"
-            :minlength="minLength"
-            :maxlength="maxLength"
-            :passwordrules="
-              type === 'password'
-                ? `minlength: ${minLength}; maxlength: ${maxLength}; required: lower; required: upper; required: digit; required: special;`
-                : undefined
-            "
-            @keydown="onKeyboardEvent"
-            @focus="onFocus"
+            :value="modelValue"
             @blur="onBlur"
+            @focus="onFocus"
             @input="onChange"
+            @keydown="onKeyboardEvent"
           />
         </template>
       </div>
diff --git a/lib/vue-lib/src/design-system/general/ErrorMessage.vue b/lib/vue-lib/src/design-system/general/ErrorMessage.vue
index 40d72666ad..4ccac6e58e 100644
--- a/lib/vue-lib/src/design-system/general/ErrorMessage.vue
+++ b/lib/vue-lib/src/design-system/general/ErrorMessage.vue
@@ -10,6 +10,7 @@
           tone === 'destructive' &&
             'border-destructive-500 text-destructive-400',
           tone === 'warning' && 'border-warning-500 text-warning-400',
+          tone === 'info' && 'border-action-900 text-action-200',
         ],
         variant === 'block' && [
           'p-2xs text-xs',
@@ -20,7 +21,8 @@
             ),
           tone === 'destructive' &&
             'bg-destructive-300 text-destructive-900 dark:bg-destructive-900 dark:text-destructive-200',
-          tone === 'success' && 'bg-success-200 text-success-900',
+          tone === 'success' && 'text-success-200 bg-success-900',
+          tone === 'info' && 'bg-action-900 text-action-200',
         ],
       )
     "