extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-01-23 06:38:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix FieldError components not reacting when an error occurs

Browse Source
This commit is contained in:
Bubka 2023-11-20 12:59:16 +01:00
parent bfe75069a4
commit fcc7e6db03
3 changed files with 31 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js_vue3/views/Start.vue
View File

@ -78,7 +78,7 @@
<button v-else class="button is-link is-medium is-rounded is-main" @click="capture()">
{{ $t('twofaccounts.forms.scan_qrcode') }}
</button>
<FieldError v-if="form.hasAny" :error="form.errors.get('qrcode')" :field="'qrcode'" />
<FieldError v-if="form.errors.hasAny('qrcode')" :error="form.errors.get('qrcode')" :field="'qrcode'" />
</div>
</div>
<!-- alternative methods -->

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

@ -28,7 +28,12 @@
counter: null,
period: null,
image: '',
qrcode: null,
}))
const qrcodeForm = reactive(new Form({
qrcode: null
}))
const iconForm = reactive(new Form({
icon: null
}))
const otp_types = [
{ text: 'TOTP', value: 'totp' },
@ -215,17 +220,19 @@
function uploadIcon() {
// clean possible already uploaded temp icon
deleteIcon()
const iconForm = new Form({
icon: iconInput.value.files[0]
})
iconForm.icon = iconInput.value.files[0]
iconForm.upload('/api/v1/icons', { returnError: true })
.then(response => {
tempIcon.value = response.data.filename;
tempIcon.value = response.data.filename
if (showQuickForm.value) {
form.icon = tempIcon.value
}
})
.catch(error => {
notify.alert({ text: trans(error.response.data.message) })
if (error.response.status !== 422) {
notify.alert({ text: error.response.data.message})
}
})
}
@ -267,9 +274,7 @@
* Sends a QR code to backend for decoding and prefill the form with the qr data
*/
function uploadQrcode() {
const qrcodeForm = new Form({
qrcode: qrcodeInput.value.files[0]
})
qrcodeForm.qrcode = qrcodeInput.value.files[0]
// First we get the uri encoded in the qrcode
qrcodeForm.upload('/api/v1/qrcode/decode', { returnError: true })
@ -293,8 +298,9 @@
})
})
.catch(error => {
notify.alert({ text: trans(error.response.data.message) })
return false
if (error.response.status !== 422) {
notify.alert({ text: error.response.data.message})
}
})
}
@ -375,6 +381,7 @@
<div class="container preview has-text-centered">
<div class="columns is-mobile">
<div class="column">
<FieldError v-if="iconForm.errors.hasAny('icon')" :error="iconForm.errors.get('icon')" :field="'icon'" class="help-for-file" />
<label class="add-icon-button" v-if="!tempIcon">
<input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
<FontAwesomeIcon :icon="['fas', 'image']" size="2x" />
@ -429,7 +436,7 @@
</div>
</div>
</div>
<FieldError v-if="!isEditMode && form.errors.hasAny('qrcode')" :error="form.errors.get('qrcode')" :field="'qrcode'" class="help-for-file" />
<FieldError v-if="qrcodeForm.errors.hasAny('qrcode')" :error="qrcodeForm.errors.get('qrcode')" :field="'qrcode'" class="help-for-file" />
<!-- service -->
<FormField v-model="form.service" fieldName="service" :fieldError="form.errors.get('email')" :isDisabled="form.otp_type === 'steamtotp'" label="twofaccounts.service" :placeholder="$t('twofaccounts.forms.service.placeholder')" autofocus />
<!-- account -->
@ -470,7 +477,7 @@
</div>
</div>
<div class="field">
<FieldError v-if="form.errors.hasAny('icon')" :error="form.errors.get('icon')" :field="'icon'" class="help-for-file" />
<FieldError v-if="iconForm.errors.hasAny('icon')" :error="iconForm.errors.get('icon')" :field="'icon'" class="help-for-file" />
<p v-if="user.preferences.getOfficialIcons" class="help" v-html="$t('twofaccounts.forms.i_m_lucky_legend')"></p>
</div>
<!-- otp type -->

16
resources/js_vue3/views/twofaccounts/Import.vue
View File

@ -29,14 +29,14 @@
counter: null,
period: null,
}))
const fileForm = new Form({
const fileForm = reactive(new Form({
file: null,
withSecret: true
})
const qrcodeForm = new Form({
}))
const qrcodeForm = reactive(new Form({
qrcode: null,
withSecret: true
})
}))
const showTwofaccountInModal = ref(false)
const supportedSources = [
{app: '2FAuth', format: 'JSON'},
@ -173,6 +173,7 @@
* Uploads the submitted file to the backend for parsing
*/
function submitFile() {
fileForm.clear()
isFetching.value = true
fileForm.file = fileInput.value.files[0]
@ -199,6 +200,7 @@
* Uploads the submitted QR code file to the backend for decoding
*/
function submitQrCode() {
qrcodeForm.clear()
isFetching.value = true
qrcodeForm.qrcode = qrcodeInput.value.files[0]
@ -208,7 +210,7 @@
.catch(error => {
if( error.response.status === 422 ) {
if (error.response.data.errors.qrcode == undefined) {
notify.alert({ text: this.$t('errors.invalid_2fa_data') })
notify.alert({ text: trans('errors.invalid_2fa_data') })
}
}
else notify.alert({ text: error.response.data.message})
@ -251,7 +253,7 @@
<input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="submitQrCode" ref="qrcodeInput">
</label>
</div>
<FieldError v-if="qrcodeForm.errors.get('qrcode') != undefined" :error="qrcodeForm.errors.get('qrcode')" :field="qrcodeForm.qrcode" />
<FieldError v-if="qrcodeForm.errors.hasAny('qrcode')" :error="qrcodeForm.errors.get('qrcode')" :field="'qrcode'" />
<p class="help">{{ $t('twofaccounts.import.supported_formats_for_qrcode_upload') }}</p>
</div>
<h5 class="title is-5 mb-3 has-text-grey">{{ $t('commons.file') }}</h5>
@ -261,7 +263,7 @@
<input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="text/plain,application/json,text/csv,.2fas" v-on:change="submitFile" ref="fileInput">
{{ $t('twofaccounts.import.upload') }}
</label>
<FieldError v-if="fileForm.errors.get('file') != undefined" :error="fileForm.errors.get('file')" :field="fileForm.file" />
<FieldError v-if="fileForm.errors.hasAny('file')" :error="fileForm.errors.get('file')" :field="'file'" />
<p class="help">{{ $t('twofaccounts.import.supported_formats_for_file_upload') }}</p>
</div>
<!-- Supported migration resources -->