Add ShowTokenAsDot setting

resources/js/components/TwofaccountShow.vue

@@ -5,7 +5,7 @@
         </figure>
         <p class="is-size-4 has-text-grey-light has-ellipsis">{{ internal_service }}</p>
         <p class="is-size-6 has-text-grey has-ellipsis">{{ internal_account }}</p>
-        <p id="otp" class="is-size-1 has-text-white" :title="$t('commons.copy_to_clipboard')" v-clipboard="() => otp.replace(/ /g, '')" v-clipboard:success="clipboardSuccessHandler">{{ otp }}</p>
+        <p id="otp" class="is-size-1 has-text-white" :title="$t('commons.copy_to_clipboard')" v-clipboard="() => otp.replace(/ /g, '')" v-clipboard:success="clipboardSuccessHandler">{{ displayedOtp }}</p>
         <ul class="dots" v-if="type === 'totp'">
             <li v-for="n in 30"></li>
         </ul>
@@ -40,6 +40,12 @@
             icon: ''
         },
 
+        computed: {
+            displayedOtp() {
+                return Boolean(Number(appSettings.showTokenAsDot)) ? this.otp.replace(/[0-9]/g, '●') : this.otp
+            }
+        },
+
         mounted: function() {
             this.showAccount()
         },

resources/js/langs/locales.js

@@ -73,11 +73,18 @@ export default {
             "settings": "Settings",
             "account": "Account",
             "password": "Password",
-            "language": "Language",
             "confirm": [],
             "forms": {
                 "edit_settings": "Edit settings",
-                "setting_saved": "Settings saved"
+                "setting_saved": "Settings saved",
+                "language": {
+                    "label": "Language",
+                    "help": "Change the language used to translate the app interface."
+                },
+                "show_token_as_dot": {
+                    "label": "Show generated tokens as dot",
+                    "help": "Replace generated token caracters with *** to ensure confidentiality. Do not affect the copy/paste feature."
+                }
             }
         },
         "twofaccounts": {
@@ -321,11 +328,18 @@ export default {
             "settings": "Réglages",
             "account": "Compte",
             "password": "Mot de passe",
-            "language": "Langue",
             "confirm": [],
             "forms": {
                 "edit_settings": "Modifier les réglages",
-                "setting_saved": "Réglages sauvegardés"
+                "setting_saved": "Réglages sauvegardés",
+                "language": {
+                    "label": "Langue",
+                    "help": "Traduit l'application dans la langue choisie"
+                },
+                "show_token_as_dot": {
+                    "label": "Masquer les codes générés",
+                    "help": "Remplace les caractères des codes générés par des *** pour garantir leur confidentialité. N'affecte pas la fonction copier/coller qui reste utilisable."
+                }
             }
         },
         "twofaccounts": {

resources/js/views/profile/Settings.vue

@@ -1,7 +1,8 @@
 <template>
     <form-wrapper :fail="fail" :success="success">
         <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
-            <form-select :options="options" :form="form" fieldName="lang" :label="$t('settings.language')" />
+            <form-select :options="options" :form="form" fieldName="lang" :label="$t('settings.forms.language.label')"  :help="$t('settings.forms.language.help')" />
+            <form-switch :form="form" fieldName="showTokenAsDot" :label="$t('settings.forms.show_token_as_dot.label')" :help="$t('settings.forms.show_token_as_dot.help')" />
             <form-buttons :isBusy="form.isBusy" :caption="$t('commons.save')" />
         </form>
     </form-wrapper>
@@ -17,7 +18,8 @@
                 success: '',
                 fail: '',
                 form: new Form({
-                    lang: ''
+                    lang: appSettings.lang,
+                    showTokenAsDot: Boolean(Number(appSettings.showTokenAsDot)),
                 }),
                 options: [
                     { text: this.$t('languages.en'), value: 'en' },
@@ -26,15 +28,6 @@
             }
         },
 
-        async mounted() {
-
-            const { data } = await this.axios.get('/api/settings')
-
-            data.settings.forEach((setting) => {
-                this.form[setting.key] = setting.value
-            })
-        },
-
         methods : {
             handleSubmit(e) {
                 e.preventDefault()

resources/lang/en/settings.php

@@ -16,13 +16,20 @@ return [
     'settings' => 'Settings',
     'account' => 'Account',
     'password' => 'Password',
-    'language' => 'Language',
     'confirm' => [
 
     ],
     'forms' => [
         'edit_settings' => 'Edit settings',
         'setting_saved' => 'Settings saved',
+        'language' => [
+            'label' => 'Language',
+            'help' => 'Change the language used to translate the app interface.'
+        ],
+        'show_token_as_dot' => [
+            'label' => 'Show generated tokens as dot',
+            'help' => 'Replace generated token caracters with *** to ensure confidentiality. Do not affect the copy/paste feature.'
+        ],
     ],
     
 

resources/lang/fr/settings.php

@@ -16,13 +16,20 @@ return [
     'settings' => 'Réglages',
     'account' => 'Compte',
     'password' => 'Mot de passe',
-    'language' => 'Langue',
     'confirm' => [
 
     ],
     'forms' => [
         'edit_settings' => 'Modifier les réglages',
         'setting_saved' => 'Réglages sauvegardés',
+        'language' => [
+            'label' => 'Langue',
+            'help' => 'Traduit l\'application dans la langue choisie'
+        ],
+        'show_token_as_dot' => [
+            'label' => 'Masquer les codes générés',
+            'help' => 'Remplace les caractères des codes générés par des *** pour garantir leur confidentialité. N\'affecte pas la fonction copier/coller qui reste utilisable.'
+        ]
     ],
     
 

resources/views/landing.blade.php

@@ -22,6 +22,9 @@
     <div id="app">
         <app></app>
     </div>
+    <script type="text/javascript">
+        var appSettings = @json(\Illuminate\Support\Facades\DB::table('options')->pluck('value', 'key')->toArray(), JSON_PRETTY_PRINT)
+    </script>
     <script src="{{ mix('js/app.js') }}"></script>
     <script src="{{ mix('js/locales.js') }}"></script>
 </body>