Set OTPs formatting as a user option with multiple available formats

This commit is contained in:
Bubka 2023-02-08 16:03:11 +01:00
parent ef7ccac88e
commit d3bc99f328
4 changed files with 29 additions and 3 deletions

View File

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

View File

@ -60,11 +60,15 @@
},
computed: {
displayedOtp() {
let pwd = this.internal_password
if (this.internal_otp_type !== 'steamtotp') {
const spacePosition = Math.ceil(this.internal_password.length / 2)
pwd = this.internal_password.substr(0, spacePosition) + " " + this.internal_password.substr(spacePosition)
if (this.$root.appSettings.formatPassword && pwd.length > 0) {
const x = Math.ceil(this.$root.appSettings.formatPasswordBy < 1 ? pwd.length * this.$root.appSettings.formatPasswordBy : this.$root.appSettings.formatPasswordBy)
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
},

View File

@ -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' },

View File

@ -68,6 +68,16 @@
'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' => [