Fdcde undo/redo upgrade (#475)

* fix password reset bug

* implement popover and keyboard shortcuts

client/components/open/editors/UndoRedo.vue

@@ -3,6 +3,7 @@
     size="sm"
     orientation="horizontal"
   >
+    <UTooltip text="Undo" :shortcuts="undoShortcut" :popper="{ placement: 'left' }">
       <UButton
         :disabled="!canUndo"
         color="white"
@@ -10,6 +11,8 @@
         class="disabled:text-gray-500"
         @click="undo"
       />
+    </UTooltip>
+    <UTooltip text="Redo" :shortcuts="redoShortcut" :popper="{ placement: 'right' }">
       <UButton
         :disabled="!canRedo"
         icon="i-material-symbols-redo"
@@ -17,6 +20,7 @@
         class="disabled:text-gray-500"
         @click="redo"
       />
+    </UTooltip>
   </UButtonGroup>
 </template>
 
@@ -26,7 +30,44 @@ const workingFormStore = useWorkingFormStore()
 const { undo, redo, clearHistory } = workingFormStore
 const { canUndo, canRedo } = storeToRefs(workingFormStore)
 
+defineShortcuts({
+  meta_z: {
+    whenever: [canUndo],
+    handler: () => {
+      undo()
+    }
+  },
+  meta_shift_z: {
+    whenever: [canRedo],
+    handler: () => {
+      redo()
+    }
+  }
+})
+
+const undoShortcut = computed(() => {
+  return getOS() == 'macOS' ? ['⌘', 'Z'] : ['Ctrl', 'Z']
+})
+
+const redoShortcut = computed(() => {
+  return getOS() == 'macOS' ? ['⌘', 'Shift', 'Z'] : ['Ctrl', 'Shift', 'Z']
+})
+
 onMounted(() => {
   setTimeout(() => { clearHistory() }, 500)
 })
+
+const  getOS = ()=> {
+  if (navigator.userAgentData) {
+    // Modern method
+    return navigator.userAgentData.platform;
+  } else {
+    // Fallback for older browsers
+    const userAgent = navigator.userAgent.toLowerCase();
+    if (userAgent.indexOf("mac") > -1) return "macOS";
+    if (userAgent.indexOf("win") > -1) return "Windows";
+    if (userAgent.indexOf("linux") > -1) return "Linux";
+    return "Unknown";
+  }
+}
 </script>