Set OTPs formatting as a user option with multiple available formats

config/2fauth.php

@@ -72,6 +72,8 @@ return [
         'lastRadarScan' => 0,
         'latestRelease' => false,
         'theme' => 'dark',
+        'formatPassword' => true,
+        'formatPasswordBy' => 0.5,
     ],
 
 ];

resources/js/components/OtpDisplayer.vue

@@ -60,11 +60,15 @@
         },
 
         computed: {
+
             displayedOtp() {
                 let pwd = this.internal_password
-                if (this.internal_otp_type !== 'steamtotp') {
+                if (this.$root.appSettings.formatPassword && pwd.length > 0) {
-                    const spacePosition = Math.ceil(this.internal_password.length / 2)
+                    const x = Math.ceil(this.$root.appSettings.formatPasswordBy < 1 ? pwd.length * this.$root.appSettings.formatPasswordBy : this.$root.appSettings.formatPasswordBy)
-                    pwd = this.internal_password.substr(0, spacePosition) + " " + this.internal_password.substr(spacePosition)
+                    const chunks = pwd.match(new RegExp(`.{1,${x}}`, 'g'));
+                    if (chunks) {
+                        pwd = chunks.join(' ')
+                    }
                 }
                 return this.$root.appSettings.showOtpAsDot ? pwd.replace(/[0-9]/g, '●') : pwd
             },

resources/js/views/settings/Options.vue

@@ -26,6 +26,9 @@
                     <form-checkbox v-on:showAccountsIcons="saveSetting('showAccountsIcons', $event)" :form="form" fieldName="showAccountsIcons" :label="$t('settings.forms.show_accounts_icons.label')" :help="$t('settings.forms.show_accounts_icons.help')" />
                     <!-- Official icons -->
                     <form-checkbox v-on:getOfficialIcons="saveSetting('getOfficialIcons', $event)" :form="form" fieldName="getOfficialIcons" :label="$t('settings.forms.get_official_icons.label')" :help="$t('settings.forms.get_official_icons.help')" />
+                    <!-- password format -->
+                    <form-checkbox v-on:formatPassword="saveSetting('formatPassword', $event)" :form="form" fieldName="formatPassword" :label="$t('settings.forms.password_format.label')" :help="$t('settings.forms.password_format.help')" />
+                    <form-toggle v-if="form.formatPassword" v-on:formatPasswordBy="saveSetting('formatPasswordBy', $event)" :choices="passwordFormats" :form="form" fieldName="formatPasswordBy" />
 
                     <h4 class="title is-4 pt-4 has-text-grey-light">{{ $t('groups.groups') }}</h4>
                     <!-- default group -->
@@ -107,6 +110,8 @@
                     getOfficialIcons: null,
                     checkForUpdate: null,
                     theme: 'dark',
+                    formatPassword: null,
+                    formatPasswordBy: '',
                 }),
                 layouts: [
                     { text: this.$t('settings.forms.grid'), value: 'grid', icon: 'th' },
@@ -117,6 +122,11 @@
                     { text: this.$t('settings.forms.dark'), value: 'dark', icon: 'moon' },
                     { text: this.$t('settings.forms.automatic'), value: 'system', icon: 'desktop' },
                 ],
+                passwordFormats: [
+                    { text: '12 34 56', value: 2, legend: this.$t('settings.forms.pair'), title: this.$t('settings.forms.pair_legend') },
+                    { text: '123 456', value: 3, legend: this.$t('settings.forms.trio'), title: this.$t('settings.forms.trio_legend') },
+                    { text: '1234 5678', value: 0.5, legend: this.$t('settings.forms.half'), title: this.$t('settings.forms.half_legend') },
+                ],
                 kickUserAfters: [
                     { text: this.$t('settings.forms.never'), value: '0' },
                     { text: this.$t('settings.forms.on_otp_copy'), value: '-1' },

resources/lang/en/settings.php

@@ -68,6 +68,16 @@ return [
             'label' => 'Display mode',
             'help' => 'Choose whether you want accounts to be displayed as a list or as a grid'
         ],
+        'password_format' => [
+            'label' => 'Password formatting',
+            'help' => 'Change how the passwords are displayed by grouping digits to ease readability and memorization'
+        ],
+        'pair' => 'by Pair',
+        'pair_legend' => 'Group digits two by two',
+        'trio_legend' => 'Group digits three by three',
+        'half_legend' => 'Split digits into two equals groups',
+        'trio' => 'by Trio',
+        'half' => 'by Half',
         'grid' => 'Grid',
         'list' => 'List',
         'theme' => [