From 5281824b5d7168535a26249cfede7c1705b3c618 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Fri, 31 Mar 2023 00:49:45 +0200
Subject: [PATCH] fix(otp-generator): better computation of token

---
 src/composable/computedRefreshable.ts         | 10 +++--
 .../otp-code-generator-and-validator.vue      | 37 +++++++------------
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/src/composable/computedRefreshable.ts b/src/composable/computedRefreshable.ts
index e89b79b3..89ab7348 100644
--- a/src/composable/computedRefreshable.ts
+++ b/src/composable/computedRefreshable.ts
@@ -1,15 +1,19 @@
-import { computedAsync } from '@vueuse/core';
+import { computedAsync, watchThrottled } from '@vueuse/core';
 import { computed, ref, watch } from 'vue';
 
 export { computedRefreshable, computedRefreshableAsync };
 
-function computedRefreshable<T>(getter: () => T) {
+function computedRefreshable<T>(getter: () => T, { throttle }: { throttle?: number } = {}) {
   const dirty = ref(true);
   let value: T;
 
   const update = () => (dirty.value = true);
 
-  watch(getter, update);
+  if (throttle) {
+    watchThrottled(getter, update, { throttle });
+  } else {
+    watch(getter, update);
+  }
 
   const computedValue = computed(() => {
     if (dirty.value) {
diff --git a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
index d7a35cc2..c435a335 100644
--- a/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
+++ b/src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue
@@ -65,11 +65,12 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { Refresh } from '@vicons/tabler';
-import { useTimestamp, whenever } from '@vueuse/core';
+import { useTimestamp, useWindowFocus, whenever } from '@vueuse/core';
 import { useThemeVars } from 'naive-ui';
 import { useStyleStore } from '@/stores/style.store';
 import InputCopyable from '@/components/InputCopyable.vue';
 import { useValidation } from '@/composable/validation';
+import { computedRefreshable } from '@/composable/computedRefreshable';
 import { generateTOTP, buildKeyUri, generateSecret, base32toHex, getCounterFromTime } from './otp.service';
 import { useQRCode } from '../qr-code-generator/useQRCode';
 import TokenDisplay from './token-display.vue';
@@ -78,8 +79,18 @@ const now = useTimestamp();
 const interval = computed(() => (now.value / 1000) % 30);
 const theme = useThemeVars();
 const styleStore = useStyleStore();
-const secret = ref(generateSecret());
-const tokens = ref(buildTokens());
+
+const [secret, refreshSecret] = computedRefreshable(generateSecret);
+
+const [tokens] = computedRefreshable(
+  () => ({
+    previous: generateTOTP({ key: secret.value, now: now.value - 30000 }),
+    current: generateTOTP({ key: secret.value, now: now.value }),
+    next: generateTOTP({ key: secret.value, now: now.value + 30000 }),
+  }),
+  { throttle: 500 },
+);
+
 const keyUri = computed(() => buildKeyUri({ secret: secret.value }));
 
 const { qrcode } = useQRCode({
@@ -104,26 +115,6 @@ const { attrs: secretValidationAttrs } = useValidation({
     },
   ],
 });
-
-// watch + whenever to prevent token to be refresh every raf
-watch([secret], refreshToken);
-whenever(() => Math.floor(interval.value) === 0, refreshToken);
-
-function refreshSecret() {
-  secret.value = generateSecret();
-}
-
-function refreshToken() {
-  tokens.value = buildTokens();
-}
-
-function buildTokens() {
-  return {
-    previous: generateTOTP({ key: secret.value, now: now.value - 30000 }),
-    current: generateTOTP({ key: secret.value, now: now.value }),
-    next: generateTOTP({ key: secret.value, now: now.value + 30000 }),
-  };
-}
 </script>
 
 <style lang="less" scoped>