Next

adminforth/documentation/docs/tutorial/03-Customization/02-customFieldRendering.md

@@ -605,7 +605,7 @@ For fields containing sensitive data (like passwords, API keys, tokens, or other
 
 The renderer wraps the standard value output and adds a click-to-reveal blur effect. Clicking again hides the value.
 
-For long values (like API keys) you can enable compact mode by passing `compact: true` via `meta`. When set, the value is shortened the same way as the `CompactUUID` renderer (first 4 + `...` + last 4 characters). In compact mode you can additionally pass `copy: true` to render a copy-to-clipboard button next to the value:
+For long values (like API keys) you can enable compact mode by passing `compact: true` via `meta`. When set, the value is shortened the same way as the `CompactUUID` renderer (first 4 + `...` + last 4 characters). In compact mode you can additionally pass `copy: true` to render a copy-to-clipboard button next to the value. The copy button is only shown once the value is revealed (blur removed):
 
 ```ts title='./resources/anyResource.ts'
   columns: [

adminforth/spa/src/renderers/SensitiveBlurCell.vue

@@ -22,11 +22,13 @@
       </template>
     </Tooltip>
 
-    <IconFileCopyAltSolid
-      v-if="showCopy && rawValue"
-      @click.stop="copyToCB"
-      class="shrink-0 min-w-5 min-h-5 cursor-pointer text-lightPrimary dark:text-darkPrimary"
-    />
+    <span v-if="showCopy && rawValue" class="shrink-0 w-5 h-5">
+      <IconFileCopyAltSolid
+        v-if="show"
+        @click.stop="copyToCB"
+        class="w-5 h-5 cursor-pointer text-lightPrimary dark:text-darkPrimary"
+      />
+    </span>
   </div>
 </template>
 

adminforth/spa/src/stores/toast.ts

@@ -1,6 +1,7 @@
 import { ref, watch, type Ref } from 'vue'
 import { defineStore } from 'pinia'
 import { useRoute } from 'vue-router';
+import { randomBrowserUUID } from '@/utils/browserUuid';
 
 
 
@@ -22,7 +23,7 @@ export const useToastStore = defineStore('toast', () => {
         buttons?: { value: any; label: string }[];
         onResolve?: (value?: any) => void;
     }): string => {
-        const toastId = crypto.randomUUID();
+        const toastId = randomBrowserUUID();
         toasts.value.push({
             ...toast,
             id: toastId,
@@ -45,4 +46,4 @@ export const useToastStore = defineStore('toast', () => {
     };
 
     return { toasts, addToast, removeToast, resolveToast };
-});
+});

adminforth/spa/src/utils/browserUuid.ts

@@ -0,0 +1,42 @@
+const UUID_BYTE_LENGTH = 16;
+
+const UUID_HEX = Array.from(
+  { length: 256 },
+  (_, index) => index.toString(16).padStart(2, '0'),
+);
+
+export function randomBrowserUUID(): string {
+  if (typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+
+  const bytes = crypto.getRandomValues(
+    new Uint8Array(UUID_BYTE_LENGTH),
+  );
+
+  bytes[6] = (bytes[6] & 0x0f) | 0x40;
+  bytes[8] = (bytes[8] & 0x3f) | 0x80;
+
+  return [
+    UUID_HEX[bytes[0]],
+    UUID_HEX[bytes[1]],
+    UUID_HEX[bytes[2]],
+    UUID_HEX[bytes[3]],
+    '-',
+    UUID_HEX[bytes[4]],
+    UUID_HEX[bytes[5]],
+    '-',
+    UUID_HEX[bytes[6]],
+    UUID_HEX[bytes[7]],
+    '-',
+    UUID_HEX[bytes[8]],
+    UUID_HEX[bytes[9]],
+    '-',
+    UUID_HEX[bytes[10]],
+    UUID_HEX[bytes[11]],
+    UUID_HEX[bytes[12]],
+    UUID_HEX[bytes[13]],
+    UUID_HEX[bytes[14]],
+    UUID_HEX[bytes[15]],
+  ].join('');
+}

adminforth/spa/src/utils/clientId.ts

@@ -1,3 +1,5 @@
+import { randomBrowserUUID } from './browserUuid';
+
 const ADMINFORTH_CLIENT_ID_STORAGE_KEY = 'adminforthClientId';
 
 export const ADMINFORTH_CLIENT_ID_HEADER = 'x-adminforth-client-id';
@@ -8,7 +10,7 @@ export function getAdminForthClientId(): string {
     return existingClientId;
   }
 
-  const clientId = crypto.randomUUID();
+  const clientId = randomBrowserUUID();
   sessionStorage.setItem(ADMINFORTH_CLIENT_ID_STORAGE_KEY, clientId);
   return clientId;
 }