Edit form enhancement

This commit is contained in:
Bubka 2020-01-08 16:14:25 +01:00
parent 21c7f20e21
commit 8ed572bb24
2 changed files with 33 additions and 15 deletions

View File

@ -191,9 +191,8 @@
} }
) )
} }
}, },
} }

View File

@ -7,13 +7,13 @@
<div class="field"> <div class="field">
<label class="label">Service</label> <label class="label">Service</label>
<div class="control"> <div class="control">
<input class="input" type="text" placeholder="Service" v-model="twofaccount.service" required autofocus /> <input class="input" type="text" placeholder="example.com" v-model="twofaccount.service" required autofocus />
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<label class="label">Account</label> <label class="label">Account</label>
<div class="control"> <div class="control">
<input class="input" type="text" placeholder="Account" v-model="twofaccount.account" /> <input class="input" type="text" placeholder="John DOE" v-model="twofaccount.account" />
</div> </div>
</div> </div>
<div class="field"> <div class="field">
@ -28,19 +28,18 @@
<span class="file-label">Choose an image</span> <span class="file-label">Choose an image</span>
</span> </span>
</label> </label>
</div> <span class="tag is-black is-large" v-if="twofaccount.icon.length > 0">
</div> <img class="icon-preview" :src="twofaccount.icon" >
<div class="field"> <button class="delete is-small" @click="deleteIcon"></button>
<div class="control"> </span>
<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">
<div class="control"> <div class="control">
<router-link :to="{ name: 'accounts', params: { InitialEditMode: true } }" class="button is-light">Cancel</router-link> <button type="submit" class="button is-link">Save</button>
</div> </div>
<div class="control"> <div class="control">
<button type="submit" class="button is-link">Save</button> <router-link :to="{ name: 'accounts', params: { InitialEditMode: true } }" class="button is-text">Cancel</router-link>
</div> </div>
</div> </div>
</form> </form>
@ -53,7 +52,12 @@
export default { export default {
data() { data() {
return { return {
twofaccount: {} twofaccount: {
'service' : '',
'account' : '',
'uri' : '',
'icon' : ''
}
} }
}, },
@ -94,11 +98,12 @@
let files = this.$refs.iconInput.files let files = this.$refs.iconInput.files
if (!files.length) { if (!files.length) {
console.log('no files');
return false; return false;
} }
else {
console.log(files.length + ' file(s) found'); // clean possible already uploaded icon
if( this.twofaccount.icon ) {
this.deleteIcon()
} }
let imgdata = new FormData(); let imgdata = new FormData();
@ -116,7 +121,21 @@
this.twofaccount.icon = response.data; this.twofaccount.icon = response.data;
} }
) )
},
deleteIcon(event) {
let token = localStorage.getItem('jwt')
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 = ''
}
)
} }
}, },
} }