From 7bdd286fb25a9a816e1d73d9bebc5d61d45e18be Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Mon, 16 Nov 2020 14:45:24 +0100
Subject: [PATCH] Update Edit form to match with the new TwoFAccount model

---
 .../Controllers/TwoFAccountController.php     |  43 ++---
 resources/js/views/twofaccounts/Edit.vue      | 165 ++++++++++++++----
 resources/lang/en/twofaccounts.php            |   4 +-
 3 files changed, 145 insertions(+), 67 deletions(-)

diff --git a/app/Http/Controllers/TwoFAccountController.php b/app/Http/Controllers/TwoFAccountController.php
index 1b9090e3..3095748b 100644
--- a/app/Http/Controllers/TwoFAccountController.php
+++ b/app/Http/Controllers/TwoFAccountController.php
@@ -40,7 +40,7 @@ class TwoFAccountController extends Controller
             'account' => 'required_without:uri|nullable|string|regex:/^[^:]+$/i',
             'icon' => 'nullable|string',
             'uri' => 'nullable|string|regex:/^otpauth:\/\/[h,t]otp\//i',
-            'otpType' => 'required_without:uri|in:totp,hotp,TOTP,HOTP',
+            'otpType' => 'required_without:uri|in:totp,hotp',
             'secret' => 'required_without:uri|string',
             'digits' => 'nullable|integer|between:6,10',
             'algorithm' => 'nullable|in:sha1,sha256,sha512,md5',
@@ -176,10 +176,19 @@ class TwoFAccountController extends Controller
     {
 
         $this->validate($request, [
-            'service' => 'required',
+            'service' => 'required|string',
+            'account' => 'required_without:uri|nullable|string|regex:/^[^:]+$/i',
+            'icon' => 'nullable|string',
+            'uri' => 'nullable|string|regex:/^otpauth:\/\/[h,t]otp\//i',
+            'otpType' => 'required_without:uri|in:totp,hotp',
+            'secret' => 'required_without:uri|string',
+            'digits' => 'nullable|integer|between:6,10',
+            'algorithm' => 'nullable|in:sha1,sha256,sha512,md5',
+            'totpPeriod' => 'required_if:otpType,totp|nullable|integer|min:1',
+            'hotpCounter' => 'required_if:otpType,hotp|nullable|integer|min:0',
+            'imageLink' => 'nullable|url',
         ]);
 
-
         // Here we catch a possible missing model exception in order to
         // delete orphan submited icon
         try {
@@ -194,33 +203,9 @@ class TwoFAccountController extends Controller
             
             throw $e;
         }
-        
-        if( $twofaccount->otpType === 'hotp' ) {
 
-            // HOTP can be desynchronized from the verification
-            // server so we let the user the possibility to force
-            // the counter.
-
-            $this->validate($request, [
-                'counter' => 'required|integer',
-            ]);
-
-            // we set an OTP object to get the its current counter
-            // and we update it if a new one has been submited
-            $otp = OTP::get($twofaccount->uri);
-
-            if( $otp->getCounter() !== $request->counter ) {
-                $otp->setParameter( 'counter', $request->counter );
-                $twofaccount->uri = $otp->getProvisioningUri();
-            }
-        }
-
-        $twofaccount->update([
-            'service' => $request->service,
-            'account' => $request->account,
-            'icon' => $request->icon,
-            'uri' => $twofaccount->uri,
-        ]);
+        $twofaccount->populate($request->all());
+        $twofaccount->save();
 
         return response()->json($twofaccount, 200);
 
diff --git a/resources/js/views/twofaccounts/Edit.vue b/resources/js/views/twofaccounts/Edit.vue
index 3e580155..2b448a1b 100644
--- a/resources/js/views/twofaccounts/Edit.vue
+++ b/resources/js/views/twofaccounts/Edit.vue
@@ -1,33 +1,11 @@
 <template>
     <form-wrapper :title="$t('twofaccounts.forms.edit_account')">
         <form @submit.prevent="updateAccount" @keydown="form.onKeydown($event)">
+            <!-- service -->
             <form-field :form="form" fieldName="service" inputType="text" :label="$t('twofaccounts.service')" :placeholder="$t('twofaccounts.forms.service.placeholder')" autofocus />
+            <!-- account -->
             <form-field :form="form" fieldName="account" inputType="text" :label="$t('twofaccounts.account')" :placeholder="$t('twofaccounts.forms.account.placeholder')" />
-            <div v-if="form.type === 'hotp'">
-                <div class="field" style="margin-bottom: 0.5rem;">
-                    <label class="label">{{ $t('twofaccounts.forms.hotp_counter') }}</label>
-                </div>
-                <div class="field has-addons">
-                    <div class="control is-expanded">
-                        <input class="input" type="text" placeholder="" v-model="form.counter" :disabled="counterIsLocked" />
-                    </div>
-                    <div class="control" v-if="counterIsLocked">
-                        <a class="button is-dark field-lock" @click="counterIsLocked = false" :title="$t('twofaccounts.forms.unlock.title')">
-                            <span class="icon">
-                                <font-awesome-icon :icon="['fas', 'lock']" />
-                            </span>
-                        </a>
-                    </div>
-                    <div class="control" v-else>
-                        <a class="button is-dark field-unlock"  @click="counterIsLocked = true" :title="$t('twofaccounts.forms.lock.title')">
-                            <span class="icon has-text-danger">
-                                <font-awesome-icon :icon="['fas', 'lock-open']" />
-                            </span>
-                        </a>
-                    </div>
-                </div>
-                <field-error :form="form" field="uri" class="help-for-file" />
-            </div>
+            <!-- icon -->
             <div class="field">
                 <label class="label">{{ $t('twofaccounts.icon') }}</label>
                 <div class="file is-dark">
@@ -47,50 +25,152 @@
                 </div>
             </div>
             <field-error :form="form" field="icon" class="help-for-file" />
-            <div class="field is-grouped">
-                <div class="control">
-                    <v-button :isLoading="form.isBusy" >{{ $t('commons.save') }}</v-button>
+            <!-- otp type -->
+            <form-toggle class="has-uppercased-button" :isDisabled="true" :form="form" :choices="otpTypes" fieldName="otpType" :label="$t('twofaccounts.forms.otp_type.label')" :help="$t('twofaccounts.forms.otp_type.help')" :hasOffset="true" />
+            <div v-if="form.otpType">
+                <!-- secret -->
+                <label class="label" v-html="$t('twofaccounts.forms.secret.label')"></label>
+                <div class="field has-addons">
+                    <p class="control">
+                        <span class="select">
+                            <select v-model="form.secretIsBase32Encoded">
+                                <option v-for="format in secretFormats" :value="format.value">{{ format.text }}</option>
+                            </select>
+                        </span>
+                    </p>
+                    <p class="control is-expanded">
+                        <input class="input" type="text" v-model="form.secret">
+                    </p>
                 </div>
-                <div class="control">
-                    <button type="button" class="button is-text" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
+                <div class="field">
+                    <field-error :form="form" field="secret" class="help-for-file" />
+                    <p class="help" v-html="$t('twofaccounts.forms.secret.help')"></p>
                 </div>
+                <h2 class="title is-4 mt-5 mb-2">{{ $t('commons.options') }}</h2>
+                <p class="help mb-4">
+                    {{ $t('twofaccounts.forms.options_help') }}
+                </p>
+                <!-- digits -->
+                <form-toggle :form="form" :choices="digitsChoices" fieldName="digits" :label="$t('twofaccounts.forms.digits.label')" :help="$t('twofaccounts.forms.digits.help')" />
+                <!-- algorithm -->
+                <form-toggle :form="form" :choices="algorithms" fieldName="algorithm" :label="$t('twofaccounts.forms.algorithm.label')" :help="$t('twofaccounts.forms.algorithm.help')" />
+                <!-- TOTP period -->
+                <form-field v-if="form.otpType === 'totp'" :form="form" fieldName="totpPeriod" inputType="text" :label="$t('twofaccounts.forms.totpPeriod.label')" :placeholder="$t('twofaccounts.forms.totpPeriod.placeholder')" :help="$t('twofaccounts.forms.totpPeriod.help')" />
+                <!-- HOTP counter -->
+                <div v-if="form.otpType === 'hotp'">
+                    <div class="field" style="margin-bottom: 0.5rem;">
+                        <label class="label">{{ $t('twofaccounts.forms.hotpCounter.label') }}</label>
+                    </div>
+                    <div class="field has-addons">
+                        <div class="control is-expanded">
+                            <input class="input" type="text" placeholder="" v-model="form.hotpCounter" :disabled="hotpCounterIsLocked" />
+                        </div>
+                        <div class="control" v-if="hotpCounterIsLocked">
+                            <a class="button is-dark field-lock" @click="hotpCounterIsLocked = false" :title="$t('twofaccounts.forms.unlock.title')">
+                                <span class="icon">
+                                    <font-awesome-icon :icon="['fas', 'lock']" />
+                                </span>
+                            </a>
+                        </div>
+                        <div class="control" v-else>
+                            <a class="button is-dark field-unlock"  @click="hotpCounterIsLocked = true" :title="$t('twofaccounts.forms.lock.title')">
+                                <span class="icon has-text-danger">
+                                    <font-awesome-icon :icon="['fas', 'lock-open']" />
+                                </span>
+                            </a>
+                        </div>
+                    </div>
+                    <field-error :form="form" field="uri" class="help-for-file" />
+                    <p class="help" v-html="$t('twofaccounts.forms.hotpCounter.help_lock')"></p>
+                </div>
+                <!-- image link -->
+                <form-field :form="form" fieldName="imageLink" inputType="text" :label="$t('twofaccounts.forms.image_link.label')" :placeholder="$t('twofaccounts.forms.image_link.placeholder')" :help="$t('twofaccounts.forms.image_link.help')" />
             </div>
+            <!-- form buttons -->
+            <vue-footer :showButtons="true">
+                <p class="control">
+                    <v-button :isLoading="form.isBusy" class="is-rounded" >{{ $t('commons.save') }}</v-button>
+                </p>
+                <p class="control" v-if="form.otpType && form.secret">
+                    <button type="button" class="button is-success is-rounded" @click="previewAccount">{{ $t('twofaccounts.forms.test') }}</button>
+                </p>
+                <p class="control">
+                    <button type="button" class="button is-text is-rounded" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
+                </p>
+            </vue-footer>
         </form>
+        <!-- modal -->
+        <modal v-model="ShowTwofaccountInModal">
+            <token-displayer ref="AdvancedFormTokenDisplayer" v-bind="form.data()" @increment-hotp="incrementHotp">
+            </token-displayer>
+        </modal>
     </form-wrapper>
 </template>
 
 <script>
 
+    import Modal from '../../components/Modal'
     import Form from './../../components/Form'
+    import TokenDisplayer from '../../components/TokenDisplayer'
 
     export default {
         data() {
             return {
-                counterIsLocked: true,
+                ShowTwofaccountInModal : false,
+                hotpCounterIsLocked: true,
                 twofaccountExists: false,
                 tempIcon: '',
                 form: new Form({
                     service: '',
                     account: '',
+                    otpType: '',
                     uri: '',
                     icon: '',
-                    qrcode: null,
-                    type: '',
-                    counter: null
-                })
+                    secret: '',
+                    secretIsBase32Encoded: null,
+                    algorithm: '',
+                    digits: null,
+                    hotpCounter: null,
+                    totpPeriod: null,
+                    imageLink: '',
+                }),
+                otpTypes: ['totp', 'hotp'],
+                digitsChoices: [6,7,8,9,10],
+                secretFormats: [
+                    { text: this.$t('twofaccounts.forms.plain_text'), value: 0 },
+                    { text: 'Base32', value: 1 }
+                ],
+                algorithms: ['sha1', 'sha256', 'sha512', 'md5'],
             }
         },
 
+        mounted: function () {
+
+            // stop TOTP generation on modal close
+            this.$on('modalClose', function() {
+
+                this.$refs.AdvancedFormTokenDisplayer.stopLoop()
+            });
+        },
+
         created: function() {
             this.getAccount();
         },
 
+        components: {
+            Modal,
+            TokenDisplayer,
+        },
+
         methods: {
             async getAccount () {
 
-                const { data } = await this.axios.get('/api/twofaccounts/' + this.$route.params.twofaccountId)
+                const { data } = await this.axios.get('/api/twofaccounts/' + this.$route.params.twofaccountId + '/withSensitive')
 
                 this.form.fill(data)
+                this.form.secretIsBase32Encoded = 1
+                this.form.uri = '' // we don't want the uri because the user can change any otp parameter in the form
+
                 this.twofaccountExists = true
 
                 // set account icon as temp icon
@@ -119,6 +199,10 @@
 
             },
 
+            previewAccount() {
+                this.$refs.AdvancedFormTokenDisplayer.getToken()
+            },
+
             cancelCreation: function() {
                 // clean new temp icon
                 this.deleteIcon()
@@ -149,6 +233,15 @@
                 this.tempIcon = ''
             },
 
+            incrementHotp(payload) {
+                // The quick form or the preview feature has incremented the HOTP counter so we get the new value from
+                // the component.
+                // This could desynchronized the HOTP verification server and our local counter if the user never verified the HOTP but this
+                // is acceptable (and HOTP counter can be edited by the way)
+                this.form.hotpCounter = payload.nextHotpCounter
+                this.form.uri = payload.nextUri
+            },
+
         },
 
     }
diff --git a/resources/lang/en/twofaccounts.php b/resources/lang/en/twofaccounts.php
index 917bde48..61a8473d 100644
--- a/resources/lang/en/twofaccounts.php
+++ b/resources/lang/en/twofaccounts.php
@@ -32,7 +32,6 @@ return [
         'new_account' => 'New account',
         'edit_account' => 'Edit account',
         'otp_uri' => 'OTP Uri',
-        'hotp_counter' => 'HOTP Counter',
         'scan_qrcode' => 'Scan a qrcode',
         'prefill_using_qrcode' => 'Prefill using a QR Code',
         'use_qrcode' => [
@@ -74,7 +73,8 @@ return [
         'hotpCounter' => [
             'label' => 'Counter',
             'placeholder' => 'Default is 0',
-            'help' => 'The initial counter value'
+            'help' => 'The initial counter value',
+            'help_lock' => 'It is risky to edit the counter as you can desynchronize the account with the verification server of the service. Use the lock icon to enable modification, but only if you know for you are doing'
         ],
         'image_link' => [
             'label' => 'Image',