Set FormToggle component as a fully reactive form field

This commit is contained in:
Bubka 2020-11-19 14:07:31 +01:00
parent 101a26b035
commit 6558eca8d9
3 changed files with 38 additions and 17 deletions

View File

@ -2,7 +2,10 @@
<div class="field" :class="{ 'with-offset' : hasOffset }">
<label class="label" v-html="label"></label>
<div class="is-toggle buttons">
<a class="button is-dark" :disabled="isDisabled" v-for="choice in choices" :class="{ 'is-link' : form[fieldName] === choice }" @click="setField(choice)">{{ choice }}</a>
<label class="button is-dark" :disabled="isDisabled" v-for="choice in choices" :class="{ 'is-link' : form[fieldName] === choice.value }">
<input type="radio" class="is-hidden" :checked="form[fieldName] === choice.value" :value="choice.value" v-model="form[fieldName]" :disabled="isDisabled" />
<font-awesome-icon :icon="['fas', choice.icon]" v-if="choice.icon" class="mr-3" /> {{ choice.text }}
</label>
</div>
<field-error :form="form" :field="fieldName" />
<p class="help" v-html="help" v-if="help"></p>
@ -55,16 +58,6 @@
type: Boolean,
default: false
}
},
methods: {
setField(value) {
if( !this.isDisabled ) {
this.form[this.fieldName] = value
}
}
}
}
</script>

View File

@ -159,13 +159,27 @@
imageLink: '',
qrcode: null,
}),
otpTypes: ['totp', 'hotp'],
digitsChoices: [6,7,8,9,10],
otpTypes: [
{ text: 'TOTP', value: 'totp' },
{ text: 'HOTP', value: 'hotp' },
],
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: ['sha1', 'sha256', 'sha512', 'md5'],
algorithms: [
{ text: 'sha1', value: 'sha1' },
{ text: 'sha256', value: 'sha256' },
{ text: 'sha512', value: 'sha512' },
{ text: 'md5', value: 'md5' },
],
}
},

View File

@ -132,13 +132,27 @@
totpPeriod: null,
imageLink: '',
}),
otpTypes: ['totp', 'hotp'],
digitsChoices: [6,7,8,9,10],
otpTypes: [
{ text: 'TOTP', value: 'totp' },
{ text: 'HOTP', value: 'hotp' },
],
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: ['sha1', 'sha256', 'sha512', 'md5'],
algorithms: [
{ text: 'sha1', value: 'sha1' },
{ text: 'sha256', value: 'sha256' },
{ text: 'sha512', value: 'sha512' },
{ text: 'md5', value: 'md5' },
],
}
},