extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2024-12-24 16:09:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix icon deletion & CreateUpdate form being submitted on Cancel

Browse Source
This commit is contained in:
Bubka 2023-11-22 14:23:47 +01:00
parent fd8606aa4b
commit eb99e9200a
3 changed files with 38 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js_vue3/components/formElements/ButtonBackCloseCancel.vue
View File

@ -72,6 +72,7 @@
id="btnClose" id="btnClose"
:class="classes" :class="classes"
@click="$emit('closed')" @click="$emit('closed')"
type="button"
> >
{{ $t('commons.close') }} {{ $t('commons.close') }}
</button> </button>
@ -80,6 +81,7 @@
id="btnCancel" id="btnCancel"
:class="classes" :class="classes"
@click="$emit('canceled')" @click="$emit('canceled')"
type="button"
> >
{{ $t('commons.cancel') }} {{ $t('commons.cancel') }}
</button> </button>

64
resources/js_vue3/views/twofaccounts/CreateUpdate.vue
View File

@ -54,13 +54,12 @@
{ text: 'md5', value: 'md5' }, { text: 'md5', value: 'md5' },
] ]
const uri = ref() const uri = ref()
const tempIcon = ref() const tempIcon = ref('')
const showQuickForm = ref(false) const showQuickForm = ref(false)
const showAlternatives = ref(false) const showAlternatives = ref(false)
const showAdvancedForm = ref(false) const showAdvancedForm = ref(false)
const ShowTwofaccountInModal = ref(false) const ShowTwofaccountInModal = ref(false)
const fetchingLogo = ref(false) const fetchingLogo = ref(false)
const secretIsLocked = ref(false)
// $refs // $refs
const iconInput = ref(null) const iconInput = ref(null)
@ -82,6 +81,7 @@
if (route.name == 'editAccount') { if (route.name == 'editAccount') {
twofaccountService.get(props.twofaccountId).then(response => { twofaccountService.get(props.twofaccountId).then(response => {
form.fill(response.data) form.fill(response.data)
form.setOriginal()
// set account icon as temp icon // set account icon as temp icon
tempIcon.value = form.icon tempIcon.value = form.icon
showAdvancedForm.value = true showAdvancedForm.value = true
@ -94,7 +94,7 @@
twofaccountService.preview(uri.value).then(response => { twofaccountService.preview(uri.value).then(response => {
form.fill(response.data) form.fill(response.data)
tempIcon.value = response.data.icon ? response.data.icon : null tempIcon.value = response.data.icon ? response.data.icon : ''
showQuickForm.value = true showQuickForm.value = true
nextTick().then(() => { nextTick().then(() => {
OtpDisplayForQuickForm.value.show() OtpDisplayForQuickForm.value.show()
@ -135,7 +135,7 @@
} }
else if (from === 'steamtotp') { else if (from === 'steamtotp') {
form.service = '' form.service = ''
deleteIcon() deleteTempIcon()
} }
} }
) )
@ -170,12 +170,10 @@
// Set new icon and delete old one // Set new icon and delete old one
if( tempIcon.value !== form.icon ) { if( tempIcon.value !== form.icon ) {
let oldIcon = '' let oldIcon = ''
oldIcon = form.icon oldIcon = form.icon
form.icon = tempIcon.value form.icon = tempIcon.value
tempIcon.value = oldIcon tempIcon.value = oldIcon
deleteIcon() deleteTempIcon()
} }
const { data } = await form.put('/api/v1/twofaccounts/' + props.twofaccountId) const { data } = await form.put('/api/v1/twofaccounts/' + props.twofaccountId)
@ -203,15 +201,15 @@
* Exits the view with user confirmation * Exits the view with user confirmation
*/ */
function cancelCreation() { function cancelCreation() {
if( form.hasChanged() ) { if (form.hasChanged() || tempIcon.value != form.icon) {
if( confirm(trans('twofaccounts.confirm.cancel')) === false ) { if (confirm(trans('twofaccounts.confirm.cancel')) === true) {
return if (!isEditMode || tempIcon.value != form.icon) {
deleteTempIcon()
}
router.push({name: 'accounts'})
} }
} }
// clean possible uploaded temp icon else router.push({name: 'accounts'})
deleteIcon()
router.push({name: 'accounts'});
} }
/** /**
@ -219,7 +217,7 @@
*/ */
function uploadIcon() { function uploadIcon() {
// clean possible already uploaded temp icon // clean possible already uploaded temp icon
deleteIcon() deleteTempIcon()
iconForm.icon = iconInput.value.files[0] iconForm.icon = iconInput.value.files[0]
iconForm.upload('/api/v1/icons', { returnError: true }) iconForm.upload('/api/v1/icons', { returnError: true })
@ -239,13 +237,21 @@
/** /**
* Deletes the temp icon from backend * Deletes the temp icon from backend
*/ */
function deleteIcon() { function deleteTempIcon() {
if (tempIcon.value) { if (isEditMode) {
if (tempIcon.value) {
if (tempIcon.value !== form.icon) {
twofaccountService.deleteIcon(tempIcon.value)
}
tempIcon.value = ''
}
}
else if (tempIcon.value) {
twofaccountService.deleteIcon(tempIcon.value) twofaccountService.deleteIcon(tempIcon.value)
tempIcon.value = '' tempIcon.value = ''
} if (showQuickForm.value) {
if (showQuickForm.value) { form.icon = ''
form.icon = tempIcon.value }
} }
} }
@ -318,7 +324,7 @@
.then(response => { .then(response => {
if (response.status === 201) { if (response.status === 201) {
// clean possible already uploaded temp icon // clean possible already uploaded temp icon
deleteIcon() deleteTempIcon()
tempIcon.value = response.data.filename; tempIcon.value = response.data.filename;
} }
else notify.warn( {text: trans('errors.no_logo_found_for_x', {service: strip_tags(form.service)}) }) else notify.warn( {text: trans('errors.no_logo_found_for_x', {service: strip_tags(form.service)}) })
@ -388,7 +394,7 @@
<input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput"> <input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
<FontAwesomeIcon :icon="['fas', 'image']" size="2x" /> <FontAwesomeIcon :icon="['fas', 'image']" size="2x" />
</label> </label>
<button class="delete delete-icon-button is-medium" v-if="tempIcon" @click.prevent="deleteIcon"></button> <button class="delete delete-icon-button is-medium" v-if="tempIcon" @click.prevent="deleteTempIcon"></button>
<OtpDisplay <OtpDisplay
ref="OtpDisplayForQuickForm" ref="OtpDisplayForQuickForm"
v-bind="form.data()" v-bind="form.data()"
@ -459,10 +465,10 @@
</VueButton> </VueButton>
</UseColorMode> </UseColorMode>
</div> </div>
<!-- upload button --> <!-- upload icon button -->
<div class="control"> <div class="control is-flex">
<UseColorMode v-slot="{ mode }"> <UseColorMode v-slot="{ mode }">
<div role="button" tabindex="0" class="file" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @keyup.enter="iconInputLabel.click()"> <div role="button" tabindex="0" class="file mr-3" :class="mode == 'dark' ? 'is-dark' : 'is-white'" @keyup.enter="iconInputLabel.click()">
<label class="file-label" ref="iconInputLabel"> <label class="file-label" ref="iconInputLabel">
<input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput"> <input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
<span class="file-cta"> <span class="file-cta">
@ -472,11 +478,11 @@
<span class="file-label">{{ $t('twofaccounts.forms.choose_image') }}</span> <span class="file-label">{{ $t('twofaccounts.forms.choose_image') }}</span>
</span> </span>
</label> </label>
<span class="tag is-large" :class="mode =='dark' ? 'is-dark' : 'is-white'" v-if="tempIcon">
<img class="icon-preview" :src="$2fauth.config.subdirectory + '/storage/icons/' + tempIcon" :alt="$t('twofaccounts.icon_to_illustrate_the_account')">
<button class="clear-selection delete is-small" @click.prevent="deleteIcon" :aria-label="$t('twofaccounts.remove_icon')"></button>
</span>
</div> </div>
<span class="tag is-large" :class="mode =='dark' ? 'is-dark' : 'is-white'" v-if="tempIcon">
<img class="icon-preview" :src="$2fauth.config.subdirectory + '/storage/icons/' + tempIcon" :alt="$t('twofaccounts.icon_to_illustrate_the_account')">
<button class="clear-selection delete is-small" @click.prevent="deleteTempIcon" :aria-label="$t('twofaccounts.remove_icon')"></button>
</span>
</UseColorMode> </UseColorMode>
</div> </div>
</div> </div>

2
resources/lang/en/twofaccounts.php
View File

@ -127,7 +127,7 @@
], ],
'confirm' => [ 'confirm' => [
'delete' => 'Are you sure you want to delete this account?', 'delete' => 'Are you sure you want to delete this account?',
'cancel' => 'The account will be lost. Are you sure?', 'cancel' => 'Changes will be lost. Are you sure?',
'discard' => 'Are you sure you want to discard this account?', 'discard' => 'Are you sure you want to discard this account?',
'discard_all' => 'Are you sure you want to discard all accounts?', 'discard_all' => 'Are you sure you want to discard all accounts?',
'discard_duplicates' => 'Are you sure you want to discard all duplicates?', 'discard_duplicates' => 'Are you sure you want to discard all duplicates?',