feat: human-readable rate limit errors

src/i18n/en.ts

@@ -1,8 +1,8 @@
-
 export default {
   common: {
     allow: 'Allow',
     continue: 'Continue',
+    days: 'days',
     edit: 'Edit',
     field: 'Field',
     fields: {
@@ -15,10 +15,14 @@ export default {
       username: 'Username'
     },
     hide: 'Hide',
+    hours: 'hours',
+    minutes: 'minutes',
     reject: 'Reject',
+    seconds: 'seconds',
     show: 'Show',
     submit: 'Submit',
-    verify: 'Verify'
+    verify: 'Verify',
+    years: 'years'
   },
   verifyEmail: {
     checkText: "We\'ve sent an email to <strong>{email}</strong>, please click the link included" +
@@ -83,7 +87,7 @@ export default {
     passwords_not_match: "Passwords doesn't match",
     user_not_found: 'User not found',
     weak_password: 'Password is too weak',
-    too_many_requests: 'You have ben trying too fast. Try again in {retry} seconds.',
+    too_many_requests: 'You have ben trying too fast. Try again in {retry}.',
     account_blocked: 'Your account is blocked. Please check your email for further instructions.',
   },
   fillMissing: {

src/ui/utils/form_generics.ts

@@ -10,6 +10,7 @@ import type {
   IWidgetSettings, WidgetModes
 } from '../interfaces';
 
+import { secondsToReadable } from './helpers.ts';
 import { deepToRaw, toReactive } from './to_reactive';
 import type { Translator } from './translator';
 import { translatorKey } from './translator';
@@ -133,7 +134,7 @@ export function useGenericForm(
               form.value.toggleAlert({
                 path: `errors.${e.error}`,
                 args: {
-                  retry: retryAfter
+                  retry: secondsToReadable(retryAfter, translator),
                 }
               })
             } else {

src/ui/utils/helpers.ts

@@ -1,5 +1,7 @@
 import type { PropType } from 'vue';
 
+import type { Translator } from './translator.ts';
+
 export type EventProp<T extends any[] = any[], F = (...args: T) => void> = F
 export const EventProp = <T extends any[] = any[]>() => [Function, Array] as PropType<EventProp<T>>
 
@@ -37,3 +39,27 @@ export function isEmpty(obj: any){
     return true
   }
 }
+
+/**
+ * https://stackoverflow.com/a/34270811
+ *
+ * Translates seconds into human-readable format of seconds, minutes, hours, days, and years
+ *
+ */
+export function secondsToReadable( seconds: number, translator: Translator ): string {
+  const levels = [
+    [Math.floor(seconds / 31536000), translator.t('common.years')],
+    [Math.floor(seconds % 31536000 / 86400), translator.t('common.days')],
+    [Math.floor(seconds % 31536000 % 86400 / 3600), translator.t('common.hours')],
+    [Math.floor(seconds % 31536000 % 86400 % 3600 / 60), translator.t('common.minutes')],
+    [seconds % 31536000 % 86400 % 3600 % 60, translator.t('common.seconds')],
+  ] as [number ,string][];
+
+  let returnText = '';
+
+  for (let i = 0, max = levels.length; i < max; i++) {
+    if ( levels[i][0] === 0 ) continue;
+    returnText += ` ${  levels[i][0]  } ${  levels[i][0] === 1 ? levels[i][1].substring(0, levels[i][1].length-1): levels[i][1]}`;
+  }
+  return returnText.trim();
+}