Set up Always On OTPs on the main view

resources/js_vue3/components/Dots.vue

@@ -8,6 +8,10 @@
             type: Number,
             default: null
         },
+        period: { // Used only to identify the dots component in Accounts.vue
+            type: Number,
+            default: null
+        },
     })
 
     const activeDot = ref(0)
@@ -37,7 +41,8 @@
 
     defineExpose({
         turnOn,
-        turnOff
+        turnOff,
+        props
     })
 
 </script>

resources/js_vue3/components/TotpLooper.vue

@@ -58,9 +58,9 @@
     /**
      * Starts looping
      */
-    const startLoop = () => {
+    const startLoop = (generated_at = null) => {
         clearLooper()
-        generatedAt.value = props.generated_at
+        generatedAt.value = generated_at != null ? generated_at : props.generated_at
 
         emit('loop-started', initialStepIndex.value)
 
@@ -110,7 +110,8 @@
 
     defineExpose({
         startLoop,
-        clearLooper
+        clearLooper,
+        props
     })
 
 </script>