2FAuth/resources/js/views/twofaccounts/Edit.vue

318 lines
15 KiB
Vue
Raw Normal View History

<template>
2020-01-28 15:33:33 +01:00
<form-wrapper :title="$t('twofaccounts.forms.edit_account')">
<form @submit.prevent="updateAccount" @keydown="form.onKeydown($event)">
<!-- service -->
2022-07-07 11:48:29 +02:00
<form-field :isDisabled="form.otp_type === 'steamtotp'" :form="form" fieldName="service" inputType="text" :label="$t('twofaccounts.service')" :placeholder="$t('twofaccounts.forms.service.placeholder')" autofocus />
<!-- account -->
<form-field :form="form" fieldName="account" inputType="text" :label="$t('twofaccounts.account')" :placeholder="$t('twofaccounts.forms.account.placeholder')" />
<!-- icon upload -->
<label class="label">{{ $t('twofaccounts.icon') }}</label>
<div class="field is-grouped">
<!-- i'm lucky button -->
<div class="control" v-if="$root.appSettings.getOfficialIcons">
<v-button @click="fetchLogo" :color="'is-dark'" :nativeType="'button'" :isDisabled="form.service.length < 3">
<span class="icon is-small">
<font-awesome-icon :icon="['fas', 'globe']" />
</span>
<span>{{ $t('twofaccounts.forms.i_m_lucky') }}</span>
</v-button>
</div>
<!-- upload button -->
<div class="control">
2022-10-12 11:30:20 +02:00
<div role="button" tabindex="0" class="file is-dark" @keyup.enter="$refs.iconInputLabel.click()">
<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">
<span class="file-cta">
<span class="file-icon">
<font-awesome-icon :icon="['fas', 'upload']" />
</span>
<span class="file-label">{{ $t('twofaccounts.forms.choose_image') }}</span>
2020-01-28 15:33:33 +01:00
</span>
</label>
<span class="tag is-black is-large" v-if="tempIcon">
2022-09-18 17:04:37 +02:00
<img class="icon-preview" :src="'/storage/icons/' + tempIcon" :alt="$t('twofaccounts.icon_to_illustrate_the_account')">
2022-10-12 11:30:20 +02:00
<button class="clear-selection delete is-small" @click.prevent="deleteIcon" :aria-label="$t('twofaccounts.remove_icon')"></button>
2020-01-28 15:33:33 +01:00
</span>
</div>
2020-01-28 15:33:33 +01:00
</div>
</div>
<div class="field">
<field-error :form="form" field="icon" class="help-for-file" />
<p class="help" v-html="$t('twofaccounts.forms.i_m_lucky_legend')"></p>
</div>
<!-- otp type -->
<form-toggle class="has-uppercased-button" :isDisabled="true" :form="form" :choices="otp_types" fieldName="otp_type" :label="$t('twofaccounts.forms.otp_type.label')" :help="$t('twofaccounts.forms.otp_type.help')" :hasOffset="true" />
<div v-if="form.otp_type">
<!-- secret -->
2022-09-10 17:59:52 +02:00
<label :for="this.inputId('text','secret')" class="label" v-html="$t('twofaccounts.forms.secret.label')"></label>
<div class="field has-addons">
<p v-if="!secretIsLocked" class="control">
<span class="select">
<select @change="form.secret=''" v-model="secretIsBase32Encoded">
<option v-for="(format) in secretFormats" :key="format.value" :value="format.value">{{ format.text }}</option>
</select>
</span>
</p>
<p class="control is-expanded">
2022-09-10 17:59:52 +02:00
<input :id="this.inputId('text','secret')" class="input" type="text" v-model="form.secret" :disabled="secretIsLocked">
</p>
<p class="control" v-if="secretIsLocked">
2022-10-12 11:30:20 +02:00
<button type="button" class="button is-dark field-lock" @click.stop="secretIsLocked = false" :title="$t('twofaccounts.forms.unlock.title')">
<span class="icon">
<font-awesome-icon :icon="['fas', 'lock']" />
</span>
2022-10-12 11:30:20 +02:00
</button>
</p>
<p class="control" v-else>
2022-10-12 11:30:20 +02:00
<button type="button" class="button is-dark field-unlock" @click.stop="secretIsLocked = true" :title="$t('twofaccounts.forms.lock.title')">
<span class="icon has-text-danger">
<font-awesome-icon :icon="['fas', 'lock-open']" />
</span>
2022-10-12 11:30:20 +02:00
</button>
</p>
2020-01-28 15:33:33 +01:00
</div>
<div class="field">
<field-error :form="form" field="secret" class="help-for-file" />
<p class="help" v-html="$t('twofaccounts.forms.secret.help')"></p>
2020-01-28 15:33:33 +01:00
</div>
2022-07-07 11:48:29 +02:00
<div v-if="form.otp_type !== 'steamtotp'">
<h2 class="title is-4 mt-5 mb-2">{{ $t('commons.options') }}</h2>
<p class="help mb-4">
{{ $t('twofaccounts.forms.options_help') }}
</p>
<!-- digits -->
<form-toggle :form="form" :choices="digitsChoices" fieldName="digits" :label="$t('twofaccounts.forms.digits.label')" :help="$t('twofaccounts.forms.digits.help')" />
<!-- algorithm -->
<form-toggle :form="form" :choices="algorithms" fieldName="algorithm" :label="$t('twofaccounts.forms.algorithm.label')" :help="$t('twofaccounts.forms.algorithm.help')" />
<!-- TOTP period -->
<form-field v-if="form.otp_type === 'totp'" :form="form" fieldName="period" inputType="text" :label="$t('twofaccounts.forms.period.label')" :placeholder="$t('twofaccounts.forms.period.placeholder')" :help="$t('twofaccounts.forms.period.help')" />
<!-- HOTP counter -->
<div v-if="form.otp_type === 'hotp'">
<div class="field" style="margin-bottom: 0.5rem;">
<label class="label">{{ $t('twofaccounts.forms.counter.label') }}</label>
</div>
2022-07-07 11:48:29 +02:00
<div class="field has-addons">
<div class="control is-expanded">
<input class="input" type="text" placeholder="" v-model="form.counter" :disabled="counterIsLocked" />
</div>
<div class="control" v-if="counterIsLocked">
2022-10-12 11:30:20 +02:00
<button type="button" class="button is-dark field-lock" @click="counterIsLocked = false" :title="$t('twofaccounts.forms.unlock.title')">
2022-07-07 11:48:29 +02:00
<span class="icon">
<font-awesome-icon :icon="['fas', 'lock']" />
</span>
2022-10-12 11:30:20 +02:00
</button>
2022-07-07 11:48:29 +02:00
</div>
<div class="control" v-else>
2022-10-12 11:30:20 +02:00
<button type="button" class="button is-dark field-unlock" @click="counterIsLocked = true" :title="$t('twofaccounts.forms.lock.title')">
2022-07-07 11:48:29 +02:00
<span class="icon has-text-danger">
<font-awesome-icon :icon="['fas', 'lock-open']" />
</span>
2022-10-12 11:30:20 +02:00
</button>
2022-07-07 11:48:29 +02:00
</div>
</div>
2022-07-07 11:48:29 +02:00
<field-error :form="form" field="counter" />
<p class="help" v-html="$t('twofaccounts.forms.counter.help_lock')"></p>
</div>
</div>
</div>
<!-- form buttons -->
<vue-footer :showButtons="true">
<p class="control">
<v-button :isLoading="form.isBusy" class="is-rounded" >{{ $t('commons.save') }}</v-button>
</p>
<p class="control" v-if="form.otp_type && form.secret">
<button type="button" class="button is-success is-rounded" @click="previewAccount">{{ $t('twofaccounts.forms.test') }}</button>
</p>
<p class="control">
<button type="button" class="button is-text is-rounded" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
</p>
</vue-footer>
2020-01-28 15:33:33 +01:00
</form>
<!-- modal -->
<modal v-model="ShowTwofaccountInModal">
<otp-displayer ref="AdvancedFormOtpDisplayer" v-bind="form.data()" @increment-hotp="incrementHotp" @validation-error="mapDisplayerErrors">
</otp-displayer>
</modal>
2020-01-28 15:33:33 +01:00
</form-wrapper>
</template>
<script>
2020-01-20 22:51:57 +01:00
import Modal from '../../components/Modal'
2020-01-20 22:51:57 +01:00
import Form from './../../components/Form'
import OtpDisplayer from '../../components/OtpDisplayer'
import Base32 from "hi-base32"
2020-01-20 22:51:57 +01:00
export default {
data() {
return {
ShowTwofaccountInModal : false,
counterIsLocked: true,
twofaccountExists: false,
tempIcon: '',
secretIsBase32Encoded: null,
2020-01-20 22:51:57 +01:00
form: new Form({
service: '',
account: '',
otp_type: '',
2020-01-20 22:51:57 +01:00
uri: '',
icon: '',
secret: '',
algorithm: '',
digits: null,
counter: null,
period: null,
image: '',
}),
otp_types: [
{ text: 'TOTP', value: 'totp' },
{ text: 'HOTP', value: 'hotp' },
2022-07-07 11:48:29 +02:00
{ text: 'STEAM', value: 'steamtotp' },
],
digitsChoices: [
{ text: 6, value: 6 },
{ text: 7, value: 7 },
{ text: 8, value: 8 },
{ text: 9, value: 9 },
{ text: 10, value: 10 },
],
secretFormats: [
{ text: this.$t('twofaccounts.forms.plain_text'), value: 0 },
{ text: 'Base32', value: 1 }
],
algorithms: [
{ text: 'sha1', value: 'sha1' },
{ text: 'sha256', value: 'sha256' },
{ text: 'sha512', value: 'sha512' },
{ text: 'md5', value: 'md5' },
],
secretIsLocked: true,
}
},
mounted: function () {
// stop TOTP generation on modal close
this.$on('modalClose', function() {
this.$refs.AdvancedFormOtpDisplayer.stopLoop()
});
},
created: function() {
this.getAccount();
},
components: {
Modal,
OtpDisplayer,
},
methods: {
async getAccount () {
2020-01-16 22:21:05 +01:00
const { data } = await this.axios.get('/api/v1/twofaccounts/' + this.$route.params.twofaccountId)
2020-01-08 23:22:51 +01:00
this.form.fill(data)
this.secretIsBase32Encoded = 1
this.twofaccountExists = true
2020-01-19 22:29:36 +01:00
// set account icon as temp icon
this.tempIcon = this.form.icon
},
async updateAccount() {
2020-01-08 23:22:51 +01:00
// Set new icon and delete old one
2020-01-20 22:51:57 +01:00
if( this.tempIcon !== this.form.icon ) {
2020-01-08 23:22:51 +01:00
let oldIcon = ''
2020-01-20 22:51:57 +01:00
oldIcon = this.form.icon
2020-01-08 23:22:51 +01:00
2020-01-20 22:51:57 +01:00
this.form.icon = this.tempIcon
2020-01-08 23:22:51 +01:00
this.tempIcon = oldIcon
this.deleteIcon()
}
// Secret to base32 if necessary
this.form.secret = this.secretIsBase32Encoded ? this.form.secret : Base32.encode(this.form.secret).toString();
await this.form.put('/api/v1/twofaccounts/' + this.$route.params.twofaccountId)
2020-01-27 14:55:30 +01:00
if( this.form.errors.any() === false ) {
this.$notify({ type: 'is-success', text: this.$t('twofaccounts.account_updated') })
this.$router.push({name: 'accounts', params: { initialEditMode: true, toRefresh: true }})
2020-01-27 14:55:30 +01:00
}
2020-01-19 22:29:36 +01:00
},
2020-01-05 23:21:28 +01:00
previewAccount() {
this.$refs.AdvancedFormOtpDisplayer.show()
},
2020-01-08 23:22:51 +01:00
cancelCreation: function() {
// clean new temp icon
2020-01-16 22:21:05 +01:00
this.deleteIcon()
2020-01-08 23:22:51 +01:00
this.$router.push({name: 'accounts', params: { initialEditMode: true }});
2020-01-08 23:22:51 +01:00
},
2020-01-27 14:55:30 +01:00
async uploadIcon(event) {
2020-01-05 23:21:28 +01:00
2020-01-08 23:22:51 +01:00
// clean possible tempIcon but keep original one
2020-01-16 22:21:05 +01:00
this.deleteIcon()
2020-01-05 23:21:28 +01:00
let imgdata = new FormData();
2020-01-20 22:51:57 +01:00
imgdata.append('icon', this.$refs.iconInput.files[0]);
2020-01-05 23:21:28 +01:00
this.form.upload('/api/v1/icons', imgdata, {returnError: true}).then(response => {
this.tempIcon = response.data.filename;
})
.catch(error => {
this.$notify({type: 'is-danger', text: this.$t(error.response.data.message) })
});
2020-01-08 16:14:25 +01:00
},
fetchLogo() {
if (this.$root.appSettings.getOfficialIcons) {
this.axios.post('/api/v1/icons/default', {service: this.form.service}, {returnError: true}).then(response => {
if (response.status === 201) {
// clean possible already uploaded temp icon
this.deleteIcon()
this.tempIcon = response.data.filename;
}
else this.$notify({type: 'is-warning', text: this.$t('errors.no_logo_found_for_x', {service: this.form.service}) })
})
.catch(error => {
this.$notify({type: 'is-warning', text: this.$t('errors.no_logo_found_for_x', {service: this.form.service}) })
});
}
},
2020-01-19 22:29:36 +01:00
deleteIcon(event) {
2020-01-08 16:14:25 +01:00
2020-01-20 22:51:57 +01:00
if( this.tempIcon && this.tempIcon !== this.form.icon ) {
this.axios.delete('/api/v1/icons/' + this.tempIcon)
2020-01-08 23:22:51 +01:00
}
this.tempIcon = ''
},
2020-01-08 16:14:25 +01:00
incrementHotp(payload) {
// The quick form or the preview feature has incremented the HOTP counter so we get the new value from
// the component.
// This could desynchronized the HOTP verification server and our local counter if the user never verified the HOTP but this
// is acceptable (and HOTP counter can be edited by the way)
this.form.counter = payload.nextHotpCounter
this.form.uri = payload.nextUri
},
mapDisplayerErrors (event) {
this.form.errors.set(this.form.extractErrors(event))
}
},
}
</script>