Add Test button to preview OTP before account storage

resources/js/components/TwofaccountShow.vue

@@ -6,10 +6,10 @@
         <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>
-        <ul class="dots" v-if="internal_type === 'totp'">
+        <ul class="dots" v-if="type === 'totp'">
             <li v-for="n in 30"></li>
         </ul>
-        <ul v-else-if="internal_type === 'hotp'">
+        <ul v-else-if="type === 'hotp'">
             <li>counter: {{ counter }}</li>
         </ul>
     </div>
@@ -22,9 +22,9 @@
                 id: null,
                 internal_service: '',
                 internal_account: '',
-                internal_icon: '',
                 internal_uri: '',
-                internal_type: '',
+                internal_icon: '',
+                type: '',
                 otp : '',
                 timerID: null,
                 position: null,
@@ -32,64 +32,55 @@
             }
         },
 
-        computed: {
-            setService: {
-                get: function () { return this.internal_service },
-                set: function(value) { this.internal_service = value }
-            },
-            setAccount: {
-                get: function () { return this.internal_account },
-                set: function(value) { this.internal_account = value }
-            },
-            setIcon: {
-                get: function () { return this.internal_icon },
-                set: function(value) { this.internal_icon = value }
-            },
-            setUri: {
-                get: function () { return this.internal_uri },
-                set: function(value) { this.internal_uri = value }
-            },
-            setType: {
-                get: function () { return this.internal_type },
-                set: function(value) { this.internal_type = value }
-            },
-        },
-
         props: {
             service: '',
             account: '',
             uri : '',
-            type: '',
+            icon: ''
         },
 
         mounted: function() {
-            if( this.uri && this.type ) {
+            this.showAccount()
-
-                this.setService = this.service
-                this.setAccount = this.account
-                this.setUri = this.uri
-                this.setType = this.type
-
-                this.internal_type === 'totp' ? this.getTOTP() : this.getHOTP()
-            }
         },
 
         methods: {
 
-            async getAccount(id) {
+            async showAccount(id) {
 
+                // 2 possible cases :
+                //   - ID is provided so we fetch the account data from db but without the uri.
+                //     This prevent the uri (a sensitive data) to transit via http request unnecessarily. In this
+                //     case this.type is send by the backend.
+                //   - an URI has been set in $parent because we need to preview some OTP before storing the account.
+                //     So this.type is set on client side from the provided URI
+                
                 this.id = id
 
-                const { data } = await this.axios.get('api/twofaccounts/' + this.id)
+                if( this.id || this.uri ) {
+                    if( this.id ) {
 
-                this.setService = data.service
+                        const { data } = await this.axios.get('api/twofaccounts/' + this.id)
-                this.setAccount = data.account
-                this.setIcon = data.icon
-                this.setType = data.type
 
-                this.internal_type === 'totp' ? await this.getTOTP() : await this.getHOTP()
+                        this.internal_service = data.service
-                this.$parent.isActive = true
+                        this.internal_account = data.account
-                
+                        this.internal_icon = data.icon
+                        this.type = data.type
+                    }
+                    else {
+
+                        this.internal_service = this.service
+                        this.internal_account = this.account
+                        this.internal_icon = this.icon
+                        this.internal_uri = this.uri
+                    }
+
+                    if( !this.type ) {
+                        this.type = this.internal_uri.slice(0, 15 ) === "otpauth://totp/" ? 'totp' : 'hotp';
+                    }
+
+                    this.type === 'totp' ? await this.getTOTP() : await this.getHOTP()
+                    this.$parent.isActive = true
+                }
             },
 
             getTOTP: function() {
@@ -135,7 +126,7 @@
 
             getHOTP: function() {
 
-                this.axios.get('api/twofaccounts/otp', {data: this.id ? this.id : this.internal_uri }).then(response => {
+                this.axios.post('api/twofaccounts/otp', {data: this.id ? this.id : this.internal_uri }).then(response => {
                     let spacePosition = Math.ceil(response.data.otp.length / 2);
                     
                     this.otp = response.data.otp.substr(0, spacePosition) + " " + response.data.otp.substr(spacePosition);
@@ -146,7 +137,7 @@
             clearOTP: function() {
                 this.stopLoop()
                 this.id = this.timerID = this.position = this.counter = null
-                this.service = this.account = this.icon = this.type = ''
+                this.internal_service = this.internal_account = this.internal_icon = this.internal_uri = ''
                 this.otp = '... ...'
                 this.$el.querySelector('[data-is-active]').removeAttribute('data-is-active');
                 this.$el.querySelector('.dots li:first-child').setAttribute('data-is-active', true);

resources/js/langs/locales.js

@@ -45,7 +45,7 @@ export default {
             "refresh": "refresh",
             "please": "Please ",
             "response": {
-                "no_valid_totp": "No valid TOTP resource in this QR code"
+                "no_valid_otp": "No valid OTP resource in this QR code"
             },
             "something_wrong_with_server": "Something is wrong with your server",
             "Unable_to_decrypt_uri": "Unable to decrypt uri",
@@ -82,7 +82,7 @@ export default {
                 },
                 "new_account": "New account",
                 "edit_account": "Edit account",
-                "totp_uri": "TOTP Uri",
+                "otp_uri": "OTP Uri",
                 "hotp_counter": "HOTP Counter",
                 "use_qrcode": {
                     "val": "Use a qrcode",
@@ -98,7 +98,8 @@ export default {
                 },
                 "choose_image": "Choose an image…",
                 "create": "Create",
-                "save": "Save"
+                "save": "Save",
+                "test": "Test"
             },
             "confirm": {
                 "delete": "Are you sure you want to delete this account?",
@@ -220,7 +221,7 @@ export default {
                     "image": "Supported format are jpeg, png, bmp, gif, svg, or webp"
                 },
                 "uri": {
-                    "starts_with": "Only valid TOTP uri are supported"
+                    "starts_with": "Only valid OTP uri are supported"
                 },
                 "email": {
                     "exists": "No account found using this email"

resources/js/views/Accounts.vue

@@ -221,13 +221,7 @@
             },
 
             showAccount(id) {
-                if( id ) {
+                this.$refs.TwofaccountShow.showAccount(id)
-                    this.$refs.TwofaccountShow.getAccount(id)
-                }
-                else {
-                    let err = new Error("Id missing")
-                    this.$router.push({ name: 'genericError', params: { err: err } });
-                }
             },
 
             deleteAccount:  function (id) {

resources/js/views/twofaccounts/Create.vue

@@ -11,8 +11,7 @@
                     <twofaccount-show ref="TwofaccountShow"
                         :service="form.service"
                         :account="form.account"
-                        :uri="form.uri"
+                        :uri="form.uri">
-                        :type="form.type">
                     </twofaccount-show>
                 </div>
             </div>
@@ -106,16 +105,29 @@
                 <div class="control">
                     <v-button :isLoading="form.isBusy" >{{ $t('twofaccounts.forms.create') }}</v-button>
                 </div>
+                <div class="control" v-if="form.uri">
+                    <button type="button" class="button is-success" @click="previewAccount">{{ $t('twofaccounts.forms.test') }}</button>
+                </div>
                 <div class="control">
                     <button type="button" class="button is-text" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
                 </div>
             </div>
         </form>
+        <!-- modal -->
+        <modal v-model="ShowTwofaccountInModal">
+            <twofaccount-show ref="TwofaccountPreview" 
+                :service="form.service"
+                :account="form.account"
+                :uri="form.uri"
+                :icon="tempIcon">
+            </twofaccount-show>
+        </modal>
     </form-wrapper>
 </template>
 
 <script>
 
+    import Modal from '../../components/Modal'
     import Form from './../../components/Form'
     import TwofaccountShow from '../../components/TwofaccountShow'
 
@@ -123,6 +135,7 @@
         data() {
             return {
                 isQuickForm: false,
+                ShowTwofaccountInModal : false,
                 uriIsLocked: true,
                 tempIcon: '',
                 form: new Form({
@@ -130,7 +143,6 @@
                     account: '',
                     uri: '',
                     icon: '',
-                    type: '',
                     qrcode: null
                 })
             }
@@ -139,9 +151,9 @@
         watch: {
             tempIcon: function(val) {
                 if( this.isQuickForm ) {
-                    this.$refs.TwofaccountShow.setIcon = val
+                    this.$refs.TwofaccountShow.internal_icon = val
                 }
-            }
+            },
         },
 
         mounted: function () {
@@ -149,12 +161,17 @@
 
                 this.isQuickForm = true
                 this.form.fill(this.$route.params.qrAccount)
-                this.form.type = this.form.uri.slice(0, 15 ) === "otpauth://totp/" ? 'totp' : 'hotp';
 
             }
+
+            // stop OTP generation on modal close
+            this.$on('modalClose', function() {
+                this.$refs.TwofaccountPreview.clearOTP()
+            });
         },
 
         components: {
+            Modal,
             TwofaccountShow,
         },
 
@@ -172,6 +189,13 @@
 
             },
 
+            previewAccount() {
+                // preview is possible only if we have an uri
+                if( this.form.uri ) {
+                    this.$refs.TwofaccountPreview.showAccount()
+                }
+            },
+
             cancelCreation: function() {
 
                 if( this.form.service && this.form.uri ) {

resources/lang/en/twofaccounts.php

@@ -49,6 +49,7 @@ return [
         'choose_image' => 'Choose an image…',
         'create' => 'Create',
         'save' => 'Save',
+        'test' => 'Test',
     ],
     'confirm' => [
         'delete' => 'Are you sure you want to delete this account?',