extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-02-16 18:31:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Icon is set using upload

Browse Source
This commit is contained in:
Bubka 2020-01-05 23:21:28 +01:00
parent d9344d9c28
commit dfc8a70ec8
6 changed files with 110 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/Http/Controllers/QrCodeController.php
View File

@ -56,6 +56,7 @@ public function decode(Request $request)
'name' => $service, 'name' => $service,
'email' => $email, 'email' => $email,
'uri' => $uri, 'uri' => $uri,
'icon' => '',
'options' => $options 'options' => $options
); );

6
resources/js/app.js vendored
View File

@ -11,12 +11,10 @@ import Create from './views/Create'
import Edit from './views/Edit' import Edit from './views/Edit'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { faPlusCircle } from '@fortawesome/free-solid-svg-icons' import { faPlusCircle, faQrcode, faImage } from '@fortawesome/free-solid-svg-icons'
import { faQrcode } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faPlusCircle); library.add(faPlusCircle, faQrcode, faImage);
library.add(faQrcode);
Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.component('font-awesome-icon', FontAwesomeIcon)

2
resources/js/views/Accounts.vue
View File

@ -4,7 +4,7 @@
<div class="buttons are-large is-centered"> <div class="buttons are-large is-centered">
<span v-for="account in accounts" class="button is-black twofaccount" > <span v-for="account in accounts" class="button is-black twofaccount" >
<span @click.stop="getAccount(account.id)"> <span @click.stop="getAccount(account.id)">
<img src="https://fakeimg.pl/64x64/"> <img :src="account.icon">
{{ account.name }} {{ account.name }}
<span class="is-family-primary is-size-7 has-text-grey">{{ account.email }}</span> <span class="is-family-primary is-size-7 has-text-grey">{{ account.email }}</span>
</span> </span>

60
resources/js/views/Create.vue
View File

@ -11,10 +11,10 @@
<div class="field"> <div class="field">
<div class="file is-dark is-boxed"> <div class="file is-dark is-boxed">
<label class="file-label"> <label class="file-label">
<input class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="fileInput"> <input class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
<span class="file-cta"> <span class="file-cta">
<span class="file-icon"> <span class="file-icon">
<font-awesome-icon :icon="['fas', 'qrcode']" /> <font-awesome-icon :icon="['fas', 'qrcode']" size="lg" />
</span> </span>
<span class="file-label">Upload a qrcode</span> <span class="file-label">Upload a qrcode</span>
</span> </span>
@ -41,6 +41,19 @@
</div> </div>
<div class="field"> <div class="field">
<label class="label">Icon</label> <label class="label">Icon</label>
<div class="file is-dark">
<label class="file-label">
<input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
<span class="file-cta">
<span class="file-icon">
<font-awesome-icon :icon="['fas', 'image']" />
</span>
<span class="file-label">Choose an image…</span>
</span>
</label>
</div>
</div>
<div class="field">
<div class="control"> <div class="control">
<input class="input" type="text" placeholder="Icon" v-model="twofaccount.icon" /> <input class="input" type="text" placeholder="Icon" v-model="twofaccount.icon" />
</div> </div>
@ -66,7 +79,12 @@
export default { export default {
data() { data() {
return { return {
twofaccount: {} twofaccount: {
'name' : '',
'email' : '',
'uri' : '',
'icon' : ''
}
} }
}, },
@ -90,7 +108,7 @@
axios.defaults.headers.common['Content-Type'] = 'application/json' axios.defaults.headers.common['Content-Type'] = 'application/json'
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
let files = this.$refs.fileInput.files let files = this.$refs.qrcodeInput.files
if (!files.length) { if (!files.length) {
console.log('no files'); console.log('no files');
@ -115,6 +133,40 @@
this.twofaccount = response.data; this.twofaccount = response.data;
} }
) )
},
uploadIcon(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.iconInput.files
if (!files.length) {
console.log('no files');
return false;
}
else {
console.log(files.length + ' file(s) found');
}
let imgdata = new FormData();
imgdata.append('icon', files[0]);
let config = {
header : {
'Content-Type' : 'multipart/form-data',
}
}
axios.post('/api/icon/upload', imgdata, config).then(response => {
console.log('icon path > ', response);
this.twofaccount.icon = response.data;
}
)
} }
}, },

51
resources/js/views/Edit.vue
View File

@ -17,13 +17,26 @@
<div class="field"> <div class="field">
<label class="label">Email</label> <label class="label">Email</label>
<div class="control"> <div class="control">
<input class="input" type="email" placeholder="account email" v-model="twofaccount.email" required /> <input class="input" type="text" placeholder="account email" v-model="twofaccount.email" />
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label class="label">Icon</label> <label class="label">Icon</label>
<div class="file is-dark">
<label class="file-label">
<input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
<span class="file-cta">
<span class="file-icon">
<font-awesome-icon :icon="['fas', 'image']" />
</span>
<span class="file-label">Choose an image…</span>
</span>
</label>
</div>
</div>
<div class="field">
<div class="control"> <div class="control">
<input class="input" type="text" placeholder="account icon" v-model="twofaccount.icon" required /> <input class="input" type="text" placeholder="Icon" v-model="twofaccount.icon" />
</div> </div>
</div> </div>
<div class="field is-grouped"> <div class="field is-grouped">
@ -77,6 +90,40 @@
this.$router.push({name: 'accounts'}); this.$router.push({name: 'accounts'});
}) })
}, },
uploadIcon(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.iconInput.files
if (!files.length) {
console.log('no files');
return false;
}
else {
console.log(files.length + ' file(s) found');
}
let imgdata = new FormData();
imgdata.append('icon', files[0]);
let config = {
header : {
'Content-Type' : 'multipart/form-data',
}
}
axios.post('/api/icon/upload', imgdata, config).then(response => {
console.log('icon path > ', response);
this.twofaccount.icon = response.data;
}
)
}
}, },
} }

1
routes/api.php
View File

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