extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-03-27 06:46:45 +01: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')){
$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
{
@ -41,9 +41,9 @@ public function upload(Request $request)
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);

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

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

2
app/TwoFAccount.php
View File

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

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

@ -1,7 +1,7 @@
<template>
<div>
<figure class="image is-64x64" style="display: inline-block" v-if="icon">
<img :src="icon">
<img :src="'storage/icons/' + icon">
</figure>
<p class="is-size-4 has-text-grey-light">{{ service }}</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">
<span v-for="account in accounts" class="button is-black twofaccount" >
<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 }}
<span class="is-family-primary is-size-7 has-text-grey">{{ account.account }}</span>
</span>
@ -21,7 +21,7 @@
</div>
<div class="container has-text-centered" v-show="this.showNoAccount">
<p>
<img class="bg" src="storage/bg.png">
<img class="bg" src="storage/img/bg.png">
</p>
<p class="subtitle is-5">
No 2FA here!

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

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

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

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