From 6558eca8d9400fcca444694afe0df96863b67c28 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Thu, 19 Nov 2020 14:07:31 +0100
Subject: [PATCH] Set FormToggle component as a fully reactive form field

---
 resources/js/components/FormToggle.vue     | 15 ++++-----------
 resources/js/views/twofaccounts/Create.vue | 20 +++++++++++++++++---
 resources/js/views/twofaccounts/Edit.vue   | 20 +++++++++++++++++---
 3 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/resources/js/components/FormToggle.vue b/resources/js/components/FormToggle.vue
index dfa0709c..5a4a43a4 100644
--- a/resources/js/components/FormToggle.vue
+++ b/resources/js/components/FormToggle.vue
@@ -2,7 +2,10 @@
     <div class="field" :class="{ 'with-offset' : hasOffset }">
         <label class="label" v-html="label"></label>
         <div class="is-toggle buttons">
-            <a class="button is-dark" :disabled="isDisabled" v-for="choice in choices" :class="{ 'is-link' : form[fieldName] === choice }" @click="setField(choice)">{{ choice }}</a>
+            <label class="button is-dark" :disabled="isDisabled" v-for="choice in choices" :class="{ 'is-link' : form[fieldName] === choice.value }">
+                <input type="radio" class="is-hidden" :checked="form[fieldName] === choice.value" :value="choice.value" v-model="form[fieldName]" :disabled="isDisabled" />
+                <font-awesome-icon :icon="['fas', choice.icon]" v-if="choice.icon" class="mr-3" /> {{ choice.text }}
+            </label>
         </div>
         <field-error :form="form" :field="fieldName" />
         <p class="help" v-html="help" v-if="help"></p>
@@ -55,16 +58,6 @@
                 type: Boolean,
                 default: false
             }
-        },
-
-        methods: {
-
-            setField(value) {
-                if( !this.isDisabled ) {
-                    this.form[this.fieldName] = value
-                }
-            }
-
         }
     }
 </script>
\ No newline at end of file
diff --git a/resources/js/views/twofaccounts/Create.vue b/resources/js/views/twofaccounts/Create.vue
index a16d208a..5e0adbe0 100644
--- a/resources/js/views/twofaccounts/Create.vue
+++ b/resources/js/views/twofaccounts/Create.vue
@@ -159,13 +159,27 @@
                     imageLink: '',
                     qrcode: null,
                 }),
-                otpTypes: ['totp', 'hotp'],
-                digitsChoices: [6,7,8,9,10],
+                otpTypes: [
+                    { text: 'TOTP', value: 'totp' },
+                    { text: 'HOTP', value: 'hotp' },
+                ],
+                digitsChoices: [
+                    { text: 6, value: 6 },
+                    { text: 7, value: 7 },
+                    { text: 8, value: 8 },
+                    { text: 9, value: 9 },
+                    { text: 10, value: 10 },
+                ],
                 secretFormats: [
                     { text: this.$t('twofaccounts.forms.plain_text'), value: 0 },
                     { text: 'Base32', value: 1 }
                 ],
-                algorithms: ['sha1', 'sha256', 'sha512', 'md5'],
+                algorithms: [
+                    { text: 'sha1', value: 'sha1' },
+                    { text: 'sha256', value: 'sha256' },
+                    { text: 'sha512', value: 'sha512' },
+                    { text: 'md5', value: 'md5' },
+                ],
             }
         },
 
diff --git a/resources/js/views/twofaccounts/Edit.vue b/resources/js/views/twofaccounts/Edit.vue
index 76708b1b..db480885 100644
--- a/resources/js/views/twofaccounts/Edit.vue
+++ b/resources/js/views/twofaccounts/Edit.vue
@@ -132,13 +132,27 @@
                     totpPeriod: null,
                     imageLink: '',
                 }),
-                otpTypes: ['totp', 'hotp'],
-                digitsChoices: [6,7,8,9,10],
+                otpTypes: [
+                    { text: 'TOTP', value: 'totp' },
+                    { text: 'HOTP', value: 'hotp' },
+                ],
+                digitsChoices: [
+                    { text: 6, value: 6 },
+                    { text: 7, value: 7 },
+                    { text: 8, value: 8 },
+                    { text: 9, value: 9 },
+                    { text: 10, value: 10 },
+                ],
                 secretFormats: [
                     { text: this.$t('twofaccounts.forms.plain_text'), value: 0 },
                     { text: 'Base32', value: 1 }
                 ],
-                algorithms: ['sha1', 'sha256', 'sha512', 'md5'],
+                algorithms: [
+                    { text: 'sha1', value: 'sha1' },
+                    { text: 'sha256', value: 'sha256' },
+                    { text: 'sha512', value: 'sha512' },
+                    { text: 'md5', value: 'md5' },
+                ],
             }
         },