QR code upload

app/Http/Controllers/QrCodeController.php

@@ -0,0 +1,70 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\File;
+use Illuminate\Support\Facades\Storage;
+use Zxing\QrReader;
+use App\TwoFAccount;
+
+class QrCodecontroller extends Controller
+{
+    /**
+     * Handle uploaded qr code image
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function decode(Request $request)
+    {
+
+        if($request->hasFile('qrcode')){
+
+            $path = $request->file('qrcode')->store('qrcodes');
+
+            $qrcode = new QrReader(storage_path('app/' . $path));
+            $uri = urldecode($qrcode->text());
+
+            $uriChunks = explode('?', $uri);
+
+            foreach(explode('&', $uriChunks[1]) as $option) {
+                $option = explode('=', $option);
+                $options[$option[0]] = $option[1];
+            }
+
+            $email = $service = '';
+
+            $serviceChunks = explode(':', str_replace('otpauth://totp/', '', $uriChunks[0]));
+
+            if( count($serviceChunks) > 1 ) {
+                $email = $serviceChunks[1];
+            }
+
+            $service = $serviceChunks[0];
+
+            if( strstr( $service, '@') ) {
+                $email = $service;
+                $service = '';
+            }
+
+            if( empty($service) & !empty($options['issuer']) ) {
+                $service = $options['issuer'];
+            }
+
+            $twofaccount = (object) array(
+                'name' => $service,
+                'email' => $email,
+                'uri' => $uri,
+                'options' => $options
+            );
+
+            Storage::delete($path);
+
+            return response()->json($twofaccount, 201);
+        }
+        else {
+            return response()->json('no file in $request', 204);
+        }
+    }
+}

resources/js/views/Create.vue

@@ -8,6 +8,24 @@
                         <div class="box has-background-black-ter ">
                             <form @submit.prevent="createAccount">
                                 <h1 class="subtitle is-2">New account</h1>
+                                <div class="field">
+                                    <label class="label">qr code</label>
+                                    <div class="control">
+                                        
+                                    </div>
+                                </div>
+                                <div class="file has-name is-fullwidth">
+                                    <label class="file-label">
+                                        <input type="file" class="file-input" accept="image/*" v-on:change="uploadQrcode" ref="fileInput">
+                                        <span class="file-cta">
+                                            <span class="file-icon">
+                                                <i class="fas fa-qrcode"></i>
+                                            </span>
+                                            <span class="file-label">Use a QR Code</span>
+                                        </span>
+                                        <span class="file-name">Screen Shot 2017-07-29 at 15.54.25.png</span>
+                                    </label>
+                                </div>
                                 <div class="field">
                                     <label class="label">Service</label>
                                     <div class="control">
@@ -17,19 +35,19 @@
                                 <div class="field">
                                     <label class="label">Email</label>
                                     <div class="control">
-                                        <input class="input" type="text" placeholder="Email" v-model="twofaccount.email" required />
+                                        <input class="input" type="text" placeholder="Email" v-model="twofaccount.email"  />
                                     </div>
                                 </div>
                                 <div class="field">
                                     <label class="label">Uri</label>
                                     <div class="control">
-                                        <input class="input" type="text" placeholder="Uri" v-model="twofaccount.uri" required />
+                                        <input class="input" type="text" placeholder="Uri" v-model="twofaccount.uri" />
                                     </div>
                                 </div>
                                 <div class="field">
                                     <label class="label">Icon</label>
                                     <div class="control">
-                                        <input class="input" type="text" placeholder="Icon" v-model="twofaccount.icon" required />
+                                        <input class="input" type="text" placeholder="Icon" v-model="twofaccount.icon" />
                                     </div>
                                 </div>
                                 <div class="field is-grouped">
@@ -68,6 +86,40 @@
                 axios.post('/api/twofaccounts', this.twofaccount).then(response => {
                     this.$router.push({name: 'accounts'});
                 })
+            },
+
+            uploadQrcode(event) {
+
+                let token = localStorage.getItem('jwt')
+
+                axios.defaults.headers.common['Content-Type'] = 'application/json'
+                axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
+
+                 let files = this.$refs.fileInput.files
+
+                 if (!files.length) {
+                     console.log('no files');
+                     return false;
+                 }
+                 else {
+                    console.log(files.length + ' file(s) found');
+                 }
+
+                let imgdata = new FormData();
+
+                imgdata.append('qrcode', files[0]); 
+
+                let config = {
+                    header : {
+                        'Content-Type' : 'multipart/form-data',
+                    }
+                }
+
+                axios.post('/api/qrcode/decode', imgdata, config).then(response => {
+                        console.log('image upload response > ', response);
+                        this.twofaccount = response.data;
+                    }
+                )
             }
         },
 

routes/api.php

@@ -21,5 +21,6 @@
     Route::get('user', 'UserController@getDetails');
     Route::apiResource('twofaccounts', 'TwoFAccountController');
     Route::get('twofaccounts/{twofaccount}/totp', 'TwoFAccountController@generateTOTP')->name('twofaccounts.generateTOTP');
+    Route::post('qrcode/decode', 'QrCodeController@decode');
     Route::delete('twofaccounts/force/{id}', 'TwoFAccountController@forceDestroy')->name('twofaccounts.forceDestroy');
 });