improve(home): throttle email resending

Author: gustavotoyota

apps/client/src/pages/home/FinishRegistration.vue

@@ -14,10 +14,13 @@
         <Gap style="height: 24px" />
 
         <DeepBtn
-          label="Resend verification email"
+          :label="`Resend verification email${
+            secondsRemaining > 0 ? ` (${secondsRemaining}s)` : ''
+          }`"
           color="primary"
           style="font-size: 16px; padding: 10px 22px"
           @click="resendVerificationEmail()"
+          :disabled="secondsRemaining > 0"
         />
 
         <Gap style="height: 64px" />
@@ -34,22 +37,31 @@
 </template>
 
 <script setup lang="ts">
+import { useIntervalFn } from '@vueuse/core';
 import { handleError } from 'src/code/utils/misc';
 
 useMeta(() => ({
   title: 'Finish registration - DeepNotes',
 }));
 
+const secondsRemaining = ref(60);
+
+useIntervalFn(() => {
+  secondsRemaining.value--;
+}, 1000);
+
 async function resendVerificationEmail() {
   try {
     await trpcClient.users.account.resendVerificationEmail.mutate({
-      email: internals.sessionStorage?.getItem('email'),
+      email: internals.sessionStorage?.getItem('email')!,
     });
 
     $quasar().notify({
       message: 'Verification email resent.',
       type: 'positive',
     });
+
+    secondsRemaining.value = 60;
   } catch (error) {
     handleError(error);
   }