Adding a click to copy feature in SystemInfo

src/components/system-info/SystemInfo.module.css

@@ -0,0 +1,3 @@
+.clickPrompt {
+  font-style: italic;
+}

src/components/system-info/SystemInfo.tsx

@@ -4,10 +4,19 @@ import {
   ListItemIcon,
   ListItemText,
 } from '@suid/material';
-import { Component, createEffect, createSignal, For, Show } from 'solid-js';
+import {
+  Component,
+  createEffect,
+  createSignal,
+  For,
+  onMount,
+  Show,
+} from 'solid-js';
 import SystemSecurityUpdateWarningIcon from '@suid/icons-material/SystemSecurityUpdateWarning';
 import Dialog from '../dialog';
 import dispatch from '../../workers/dispatcher-main';
+import { sleep } from '../../lib/async-wait';
+import style from './SystemInfo.module.css';
 
 const [error, setError] = createSignal<any[]>([]);
 
@@ -63,6 +72,35 @@ const SystemInfo: Component<Props> = (props) => {
     }
   };
 
+  let content: any;
+
+  onMount(() => {
+    if (!!content) {
+      content.onclick = function () {
+        document.execCommand('copy');
+      };
+
+      content.addEventListener('copy', function (event: any) {
+        event.preventDefault();
+        if (event.clipboardData) {
+          event.clipboardData.setData('text/plain', content.textContent);
+          console.log(event.clipboardData.getData('text'));
+        }
+      });
+    }
+  });
+
+  const clickHandler = async (event: any) => {
+    const range = document.createRange();
+    range.selectNode(content);
+    window.getSelection()?.removeAllRanges();
+    window.getSelection()?.addRange(range);
+    document.execCommand('copy');
+    await sleep(300);
+    window.getSelection()?.removeAllRanges();
+    console.log({ caller: 'SystemInfo / clickHandler', event, range });
+  };
+
   return (
     <>
       <ListItem>
@@ -79,23 +117,26 @@ const SystemInfo: Component<Props> = (props) => {
           closeHandler={() => setOpen(false)}
           title='System info'
         >
-          <div>
-            <p>Platform: {window.Capacitor.platform}</p>
-            <p>User agent: {navigator.userAgent}</p>
-            <p>App release: {import.meta.env.VITE_GIT_COMMIT_HASH}</p>
-            <p>Account id: {settings()?.currentAccountId}</p>
-            <p>Account name: {account()?.name}</p>
-            <p>Remote DB user: {account()?.remoteDbUser}</p>
-            <p>Remote DB server: {account()?.remoteDbServer}</p>
-          </div>
-          <Show when={error().length > 0}>
-            <div>
-              <p>Errors:</p>
-              <ul>
-                <For each={error()}>{(item) => <li>{item.message}</li>}</For>
-              </ul>
+          <div onclick={clickHandler}>
+            <div class={style.clickPrompt}>Click to copy to clipboard</div>
+            <div ref={content}>
+              <p>Platform: {window.Capacitor.platform}</p>
+              <p>User agent: {navigator.userAgent}</p>
+              <p>App release: {import.meta.env.VITE_GIT_COMMIT_HASH}</p>
+              <p>Account id: {settings()?.currentAccountId}</p>
+              <p>Account name: {account()?.name}</p>
+              <p>Remote DB user: {account()?.remoteDbUser}</p>
+              <p>Remote DB server: {account()?.remoteDbServer}</p>
             </div>
-          </Show>
+            <Show when={error().length > 0}>
+              <div>
+                <p>Errors:</p>
+                <ul>
+                  <For each={error()}>{(item) => <li>{item.message}</li>}</For>
+                </ul>
+              </div>
+            </Show>
+          </div>
         </Dialog>
       </Show>
     </>