extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-03-30 09:56:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactore and fix for icon management

Browse Source
This commit is contained in:
Bubka 2020-01-08 23:22:51 +01:00
parent 01534beaf2
commit da6d64f9ee
7 changed files with 94 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/Http/Controllers/IconController.php
View File

@ -21,9 +21,9 @@ public function upload(Request $request)
if($request->hasFile('icon')){ if($request->hasFile('icon')){
$path = $request->file('icon')->storePublicly('public'); $path = $request->file('icon')->storePublicly('public/icons');
return response()->json('storage/' . pathinfo($path)['basename'], 201); return response()->json(pathinfo($path)['basename'], 201);
} }
else else
{ {
@ -41,9 +41,9 @@ public function upload(Request $request)
public function delete($icon) public function delete($icon)
{ {
if( Storage::exists('public/' . $icon) ) { if( Storage::exists('public/icons/' . $icon) ) {
Storage::delete('public/' . $icon); Storage::delete('public/icons/' . $icon);
} }
return response()->json(null, 204); return response()->json(null, 204);

2
app/Http/Controllers/TwoFAccountController.php
View File

@ -108,7 +108,7 @@ public function update(Request $request, TwoFAccount $twofaccount)
public function destroy(TwoFAccount $twofaccount) public function destroy(TwoFAccount $twofaccount)
{ {
// delete icon // delete icon
$storedIcon = 'public/' . pathinfo($twofaccount->icon)['basename']; $storedIcon = 'public/icons/' . $twofaccount->icon;
if( Storage::exists($storedIcon) ) { if( Storage::exists($storedIcon) ) {
Storage::delete($storedIcon); Storage::delete($storedIcon);

2
app/TwoFAccount.php
View File

@ -28,7 +28,7 @@ class TwoFAccount extends Model
public function getIconAttribute($value) public function getIconAttribute($value)
{ {
if( !Storage::exists('public/' . pathinfo($value)['basename']) ) { if( !Storage::exists('public/icons/' . pathinfo($value)['basename']) ) {
return ''; return '';
} }

2
resources/js/components/TwofaccountShow.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<figure class="image is-64x64" style="display: inline-block" v-if="icon"> <figure class="image is-64x64" style="display: inline-block" v-if="icon">
<img :src="icon"> <img :src="'storage/icons/' + icon">
</figure> </figure>
<p class="is-size-4 has-text-grey-light">{{ service }}</p> <p class="is-size-4 has-text-grey-light">{{ service }}</p>
<p class="is-size-6 has-text-grey">{{ account }}</p> <p class="is-size-6 has-text-grey">{{ account }}</p>

4
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="account.icon" v-if="account.icon"> <img :src="'storage/icons/' + account.icon" v-if="account.icon">
{{ account.service }} {{ account.service }}
<span class="is-family-primary is-size-7 has-text-grey">{{ account.account }}</span> <span class="is-family-primary is-size-7 has-text-grey">{{ account.account }}</span>
</span> </span>
@ -21,7 +21,7 @@
</div> </div>
<div class="container has-text-centered" v-show="this.showNoAccount"> <div class="container has-text-centered" v-show="this.showNoAccount">
<p> <p>
<img class="bg" src="storage/bg.png"> <img class="bg" src="storage/img/bg.png">
</p> </p>
<p class="subtitle is-5"> <p class="subtitle is-5">
No 2FA here! No 2FA here!

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

@ -63,8 +63,8 @@
<span class="file-label">Choose an image…</span> <span class="file-label">Choose an image…</span>
</span> </span>
</label> </label>
<span class="tag is-black is-large" v-if="twofaccount.icon.length > 0"> <span class="tag is-black is-large" v-if="tempIcon">
<img class="icon-preview" :src="twofaccount.icon" > <img class="icon-preview" :src="'storage/icons/' + tempIcon" >
<button class="delete is-small" @click.prevent="deleteIcon"></button> <button class="delete is-small" @click.prevent="deleteIcon"></button>
</span> </span>
</div> </div>
@ -74,7 +74,7 @@
<button type="submit" class="button is-link">Create</button> <button type="submit" class="button is-link">Create</button>
</div> </div>
<div class="control"> <div class="control">
<router-link :to="{ name: 'accounts', params: { InitialEditMode: false } }" class="button is-text">Cancel</router-link> <button class="button is-text" @click="cancelCreation">Cancel</button>
</div> </div>
</div> </div>
</form> </form>
@ -93,13 +93,18 @@
'uri' : '', 'uri' : '',
'icon' : '' 'icon' : ''
}, },
uriIsLocked: true uriIsLocked: true,
tempIcon: ''
} }
}, },
methods: { methods: {
createAccount: function() { createAccount: function() {
// set current temp icon as account icon
this.twofaccount.icon = this.tempIcon
// store the account
let token = localStorage.getItem('jwt') let token = localStorage.getItem('jwt')
axios.defaults.headers.common['Content-Type'] = 'application/json' axios.defaults.headers.common['Content-Type'] = 'application/json'
@ -110,6 +115,15 @@
}) })
}, },
cancelCreation: function() {
// clean possible uploaded temp icon
if( this.tempIcon ) {
this.deleteIcon()
}
this.$router.push({name: 'accounts', params: { InitialEditMode: false }});
},
uploadQrcode(event) { uploadQrcode(event) {
let token = localStorage.getItem('jwt') let token = localStorage.getItem('jwt')
@ -117,15 +131,15 @@
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.qrcodeInput.files let files = this.$refs.qrcodeInput.files
if (!files.length) { if (!files.length) {
console.log('no files'); console.log('no files');
return false; return false;
} }
else { else {
console.log(files.length + ' file(s) found'); console.log(files.length + ' file(s) found');
} }
let imgdata = new FormData(); let imgdata = new FormData();
@ -151,16 +165,16 @@
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.iconInput.files let files = this.$refs.iconInput.files
if (!files.length) { if (!files.length) {
return false; return false;
} }
// clean possible already uploaded icon // clean possible already uploaded temp icon
if( this.twofaccount.icon ) { if( this.tempIcon ) {
this.deleteIcon() this.deleteIcon()
} }
let imgdata = new FormData(); let imgdata = new FormData();
@ -174,7 +188,7 @@
axios.post('/api/icon/upload', imgdata, config).then(response => { axios.post('/api/icon/upload', imgdata, config).then(response => {
console.log('icon path > ', response); console.log('icon path > ', response);
this.twofaccount.icon = response.data; this.tempIcon = response.data;
} }
) )
}, },
@ -186,11 +200,10 @@
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
axios.delete('/api/icon/delete/' + this.twofaccount.icon.replace('storage/', '')).then(response => { axios.delete('/api/icon/delete/' + this.tempIcon).then(response => {
this.twofaccount.icon = '' this.tempIcon = ''
} }
) )
} }
}, },

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

@ -28,8 +28,8 @@
<span class="file-label">Choose an image…</span> <span class="file-label">Choose an image…</span>
</span> </span>
</label> </label>
<span class="tag is-black is-large" v-if="twofaccount.icon"> <span class="tag is-black is-large" v-if="tempIcon">
<img class="icon-preview" :src="'../' + twofaccount.icon" > <img class="icon-preview" :src="'../storage/icons/' + tempIcon" >
<button class="delete is-small" @click.prevent="deleteIcon"></button> <button class="delete is-small" @click.prevent="deleteIcon"></button>
</span> </span>
</div> </div>
@ -39,7 +39,7 @@
<button type="submit" class="button is-link">Save</button> <button type="submit" class="button is-link">Save</button>
</div> </div>
<div class="control"> <div class="control">
<router-link :to="{ name: 'accounts', params: { InitialEditMode: true } }" class="button is-text">Cancel</router-link> <button class="button is-text" @click.prevent="cancelCreation">Cancel</button>
</div> </div>
</div> </div>
</form> </form>
@ -57,7 +57,8 @@
'account' : '', 'account' : '',
'uri' : '', 'uri' : '',
'icon' : '' 'icon' : ''
} },
tempIcon: ''
} }
}, },
@ -74,10 +75,26 @@
axios.get('/api/twofaccounts/' + this.$route.params.twofaccountId).then(response => { axios.get('/api/twofaccounts/' + this.$route.params.twofaccountId).then(response => {
this.twofaccount = response.data this.twofaccount = response.data
// set account icon as temp icon
this.tempIcon = this.twofaccount.icon
}) })
}, },
updateAccount: function() { updateAccount: function() {
// Set new icon and delete old one
if( this.tempIcon !== this.twofaccount.icon ) {
let oldIcon = ''
oldIcon = this.twofaccount.icon
this.twofaccount.icon = this.tempIcon
this.tempIcon = oldIcon
this.deleteIcon()
}
// store the account
let token = localStorage.getItem('jwt') let token = localStorage.getItem('jwt')
axios.defaults.headers.common['Content-Type'] = 'application/json' axios.defaults.headers.common['Content-Type'] = 'application/json'
@ -88,6 +105,15 @@
}) })
}, },
cancelCreation: function() {
// clean new temp icon
if( this.tempIcon ) {
this.deleteIcon()
}
this.$router.push({name: 'accounts', params: { InitialEditMode: true }});
},
uploadIcon(event) { uploadIcon(event) {
let token = localStorage.getItem('jwt') let token = localStorage.getItem('jwt')
@ -95,16 +121,16 @@
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.iconInput.files let files = this.$refs.iconInput.files
if (!files.length) { if (!files.length) {
return false; return false;
} }
// clean possible already uploaded icon // clean possible tempIcon but keep original one
if( this.twofaccount.icon ) { if( this.tempIcon && this.tempIcon !== this.twofaccount.icon ) {
this.deleteIcon() this.deleteIcon()
} }
let imgdata = new FormData(); let imgdata = new FormData();
@ -118,23 +144,27 @@
axios.post('/api/icon/upload', imgdata, config).then(response => { axios.post('/api/icon/upload', imgdata, config).then(response => {
console.log('icon path > ', response); console.log('icon path > ', response);
this.twofaccount.icon = response.data; this.tempIcon = response.data;
} }
) )
}, },
deleteIcon(event) { deleteIcon(event) {
let token = localStorage.getItem('jwt') if( this.tempIcon !== this.twofaccount.icon ) {
let token = localStorage.getItem('jwt')
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
axios.delete('/api/icon/delete/' + this.twofaccount.icon.replace('storage/', '')).then(response => { axios.delete('/api/icon/delete/' + this.tempIcon).then(response => {
this.twofaccount.icon = '' this.tempIcon = ''
} }
) )
} }
this.tempIcon = ''
},
}, },