Add new options to control the Start view behavior

This commit is contained in:
Bubka 2020-11-20 18:59:36 +01:00
parent 8a65fa7d64
commit f76a834b05
5 changed files with 75 additions and 46 deletions

View File

@ -42,6 +42,8 @@ return [
'activeGroup' => 0, 'activeGroup' => 0,
'defaultGroup' => 0, 'defaultGroup' => 0,
'useEncryption' => false, 'useEncryption' => false,
'defaultCaptureMode' => 'livescan',
'useDirectCapture' => false,
], ],
/* /*

View File

@ -257,7 +257,12 @@
methods: { methods: {
start() { start() {
this.$router.push({ name: 'start', params: { accountCount: this.accounts.length } }); if( this.$root.appSettings.useDirectCapture && this.$root.appSettings.defaultCaptureMode === 'advancedForm' ) {
this.$router.push({ name: 'createAccount' })
}
else {
this.$router.push({ name: 'start', params: { accountCount: this.accounts.length } })
}
}, },
fetchAccounts() { fetchAccounts() {

View File

@ -12,7 +12,7 @@
<div class="column is-full quick-uploader-button" > <div class="column is-full quick-uploader-button" >
<div class="quick-uploader-centerer"> <div class="quick-uploader-centerer">
<!-- upload a qr code (with basic file field and backend decoding) --> <!-- upload a qr code (with basic file field and backend decoding) -->
<label v-if="$root.appSettings.useBasicQrcodeReader" class="button is-link is-medium is-rounded is-focused" > <label v-if="$root.appSettings.useBasicQrcodeReader" class="button is-link is-medium is-rounded is-focused" ref="qrcodeInputLabel">
<input class="file-input" type="file" accept="image/*" v-on:change="submitQrCode" ref="qrcodeInput"> <input class="file-input" type="file" accept="image/*" v-on:change="submitQrCode" ref="qrcodeInput">
{{ $t('twofaccounts.forms.upload_qrcode') }} {{ $t('twofaccounts.forms.upload_qrcode') }}
</label> </label>
@ -28,7 +28,7 @@
<!-- upload a qr code (with qrcode-capture component) --> <!-- upload a qr code (with qrcode-capture component) -->
<div class="block has-text-link" v-if="!$root.appSettings.useBasicQrcodeReader"> <div class="block has-text-link" v-if="!$root.appSettings.useBasicQrcodeReader">
<form @submit.prevent="createAccount" @keydown="form.onKeydown($event)"> <form @submit.prevent="createAccount" @keydown="form.onKeydown($event)">
<label :class="{'is-loading' : form.isBusy}" class="button is-link is-outlined is-rounded"> <label :class="{'is-loading' : form.isBusy}" class="button is-link is-outlined is-rounded" ref="qrcodeInputLabel">
<qrcode-capture @decode="submitUri" class="file-input" ref="qrcodeInput" /> <qrcode-capture @decode="submitUri" class="file-input" ref="qrcodeInput" />
{{ $t('twofaccounts.forms.upload_qrcode') }} {{ $t('twofaccounts.forms.upload_qrcode') }}
</label> </label>
@ -48,7 +48,7 @@
<vue-footer :showButtons="true"> <vue-footer :showButtons="true">
<!-- back button --> <!-- back button -->
<p class="control"> <p class="control">
<router-link class="button is-dark is-rounded" :to="{ name: '/' }" > <router-link class="button is-dark is-rounded" :to="{ name: 'accounts' }" >
{{ $t('commons.back') }} {{ $t('commons.back') }}
</router-link> </router-link>
</p> </p>
@ -96,7 +96,7 @@
* *
* Output : both decoders provide an URI and push it the Create form * Output : both decoders provide an URI and push it the Create form
* *
* The view behaviour is affected by the user options : * The view behavior is affected by the user options :
* - 'appSettings.useBasicQrcodeReader' totally disable the vue-qrcode-reader decoder * - 'appSettings.useBasicQrcodeReader' totally disable the vue-qrcode-reader decoder
* - 'appSettings.useDirectCapture' trigger the acquisition mode set by 'appSettings.defaultCaptureMode' automatically at vue @created event * - 'appSettings.useDirectCapture' trigger the acquisition mode set by 'appSettings.defaultCaptureMode' automatically at vue @created event
* *
@ -116,7 +116,7 @@
errorName: '', errorName: '',
errorText: '', errorText: '',
showStream: false, showStream: false,
canStream: true, canStream: null,
camera: 'auto', camera: 'auto',
} }
}, },
@ -124,12 +124,19 @@
props: ['accountCount'], props: ['accountCount'],
created() { created() {
this.$nextTick(() => {
if( this.$root.appSettings.useDirectCapture && this.$root.appSettings.defaultCaptureMode === 'upload' ) {
this.$refs.qrcodeInputLabel.click()
}
})
if( this.$root.appSettings.useBasicQrcodeReader ) { if( this.$root.appSettings.useBasicQrcodeReader ) {
// User has set the basic QR code reader (run by backend) so we disable the other one (run by js) // User has set the basic QR code reader (run by backend) so we disable the other one (run by js)
this.canStream = this.showStream = false this.canStream = this.showStream = false
} }
else { else if( this.accountCount > 0 && this.$root.appSettings.useDirectCapture ) {
if( this.accountCount > 0 && this.$root.appSettings.useDirectCapture ) { if( this.$root.appSettings.defaultCaptureMode === 'livescan' ) {
this.enableStream() this.enableStream()
} }
} }
@ -143,12 +150,16 @@
async enableStream() { async enableStream() {
this.setUploader()
this.camera = 'auto' this.camera = 'auto'
this.showStream = true
console.log('stream enabled') if( this.canStream ) {
this.showStream = true
console.log('stream started')
}
else if( this.errorText && !this.$root.appSettings.useBasicQrcodeReader ) {
this.$notify({ type: 'is-warning', text: this.errorText })
}
}, },
async disableStream() { async disableStream() {
@ -156,9 +167,7 @@
this.camera = 'off' this.camera = 'off'
this.showStream = false this.showStream = false
this.$parent.$emit('stopStreaming') console.log('stream stopped')
console.log('stream disabled')
}, },
async onStreamerInit (promise) { async onStreamerInit (promise) {
@ -168,6 +177,9 @@
try { try {
await promise await promise
this.canStream = true
console.log('stream is possible')
} }
catch (error) { catch (error) {
@ -191,33 +203,20 @@
} else if (error.name === 'StreamApiNotSupportedError') { } else if (error.name === 'StreamApiNotSupportedError') {
this.errorText = this.$t('twofaccounts.stream.stream_api_not_supported') this.errorText = this.$t('twofaccounts.stream.stream_api_not_supported')
} }
}
},
setUploader() {
if( this.errorName ) {
console.log('fail to stream : ' + this.errorText)
this.canStream = false this.canStream = false
this.$notify({ type: 'is-warning', text: this.errorText })
}
else
{
if( !this.errorName && !this.showStream ) {
this.camera = 'off'
console.log('stream stopped') if( !this.$root.appSettings.useBasicQrcodeReader && this.$root.appSettings.useDirectCapture && this.$root.appSettings.defaultCaptureMode === 'livescan') {
this.$notify({ type: 'is-warning', text: this.errorText })
} }
console.log('stream started') console.log('stream no possible : ' + this.errorText)
} }
}, },
/** /**
* the basicQRcodeReader option is On, so qrcode decoding has to be done by the backend, which in return * the basicQRcodeReader option is On, so qrcode decoding will be done by the backend, which in return
* send the corresponding URI * send the corresponding URI
*/ */
async submitQrCode() { async submitQrCode() {
@ -238,7 +237,7 @@
* We simply check the uri validity to prevent useless push to the Create form, but the form will check uri validity too. * We simply check the uri validity to prevent useless push to the Create form, but the form will check uri validity too.
*/ */
async submitUri(event) { async submitUri(event) {
// We post the URI automatically decoded by vue-qrcode-reader
this.form.uri = event this.form.uri = event
if( !this.form.uri ) { if( !this.form.uri ) {

View File

@ -11,7 +11,7 @@
<!-- default group --> <!-- default group -->
<form-select :options="groups" :form="form" fieldName="defaultGroup" :label="$t('settings.forms.default_group.label')" :help="$t('settings.forms.default_group.help')" /> <form-select :options="groups" :form="form" fieldName="defaultGroup" :label="$t('settings.forms.default_group.label')" :help="$t('settings.forms.default_group.help')" />
<h4 class="title is-4">{{ $t('settings.security') }}</h4> <h4 class="title is-4 pt-4">{{ $t('settings.security') }}</h4>
<!-- auto lock --> <!-- auto lock -->
<form-select :options="kickUserAfters" :form="form" fieldName="kickUserAfter" :label="$t('settings.forms.auto_lock.label')" :help="$t('settings.forms.auto_lock.help')" /> <form-select :options="kickUserAfters" :form="form" fieldName="kickUserAfter" :label="$t('settings.forms.auto_lock.label')" :help="$t('settings.forms.auto_lock.help')" />
<!-- protect db --> <!-- protect db -->
@ -21,9 +21,13 @@
<!-- close token on copy --> <!-- close token on copy -->
<form-checkbox :form="form" fieldName="closeTokenOnCopy" :label="$t('settings.forms.close_token_on_copy.label')" :help="$t('settings.forms.close_token_on_copy.help')" /> <form-checkbox :form="form" fieldName="closeTokenOnCopy" :label="$t('settings.forms.close_token_on_copy.label')" :help="$t('settings.forms.close_token_on_copy.help')" />
<h4 class="title is-4">{{ $t('settings.advanced') }}</h4> <h4 class="title is-4 pt-4">{{ $t('settings.data_input') }}</h4>
<!-- basic qrcode --> <!-- basic qrcode -->
<form-checkbox :form="form" fieldName="useBasicQrcodeReader" :label="$t('settings.forms.use_basic_qrcode_reader.label')" :help="$t('settings.forms.use_basic_qrcode_reader.help')" /> <form-checkbox :form="form" fieldName="useBasicQrcodeReader" :label="$t('settings.forms.use_basic_qrcode_reader.label')" :help="$t('settings.forms.use_basic_qrcode_reader.help')" />
<!-- direct capture -->
<form-checkbox :form="form" fieldName="useDirectCapture" :label="$t('settings.forms.useDirectCapture.label')" :help="$t('settings.forms.useDirectCapture.help')" />
<!-- default capture mode -->
<form-select :options="captureModes" :form="form" fieldName="defaultCaptureMode" :label="$t('settings.forms.defaultCaptureMode.label')" :help="$t('settings.forms.defaultCaptureMode.help')" />
</form> </form>
</form-wrapper> </form-wrapper>
</template> </template>
@ -36,15 +40,17 @@
data(){ data(){
return { return {
form: new Form({ form: new Form({
lang: this.$root.$i18n.locale, lang: '',
showTokenAsDot: this.$root.appSettings.showTokenAsDot, showTokenAsDot: null,
closeTokenOnCopy: this.$root.appSettings.closeTokenOnCopy, closeTokenOnCopy: null,
useBasicQrcodeReader: this.$root.appSettings.useBasicQrcodeReader, useBasicQrcodeReader: null,
showAccountsIcons: this.$root.appSettings.showAccountsIcons, showAccountsIcons: null,
displayMode: this.$root.appSettings.displayMode, displayMode: '',
kickUserAfter: this.$root.appSettings.kickUserAfter, kickUserAfter: '',
useEncryption: this.$root.appSettings.useEncryption, useEncryption: null,
defaultGroup: this.$root.appSettings.defaultGroup, defaultGroup: '',
useDirectCapture: null,
defaultCaptureMode: '',
}), }),
langs: [ langs: [
{ text: this.$t('languages.en'), value: 'en' }, { text: this.$t('languages.en'), value: 'en' },
@ -68,11 +74,17 @@
groups: [ groups: [
{ text: this.$t('groups.no_group'), value: 0 }, { text: this.$t('groups.no_group'), value: 0 },
{ text: this.$t('groups.active_group'), value: -1 }, { text: this.$t('groups.active_group'), value: -1 },
] ],
captureModes: [
{ text: this.$t('settings.forms.livescan'), value: 'livescan' },
{ text: this.$t('settings.forms.upload'), value: 'upload' },
{ text: this.$t('settings.forms.advanced_form'), value: 'advancedForm' },
],
} }
}, },
mounted() { mounted() {
this.form.fill(this.$root.appSettings)
this.fetchGroups() this.fetchGroups()
}, },

View File

@ -22,7 +22,7 @@ return [
], ],
'general' => 'General', 'general' => 'General',
'security' => 'Security', 'security' => 'Security',
'advanced' => 'Advanced', 'data_input' => 'Data input',
'forms' => [ 'forms' => [
'edit_settings' => 'Edit settings', 'edit_settings' => 'Edit settings',
'setting_saved' => 'Settings saved', 'setting_saved' => 'Settings saved',
@ -64,6 +64,14 @@ return [
'label' => 'Default group', 'label' => 'Default group',
'help' => 'The group to which the newly created accounts are associated', 'help' => 'The group to which the newly created accounts are associated',
], ],
'useDirectCapture' => [
'label' => 'Direct input',
'help' => 'Choose whether you want to be prompted to choose an input mode among those available or if you want to directly use the default input mode',
],
'defaultCaptureMode' => [
'label' => 'Default input mode',
'help' => 'Default input mode used when the Direct input option is On',
],
'never' => 'Never', 'never' => 'Never',
'on_token_copy' => 'On security code copy', 'on_token_copy' => 'On security code copy',
'1_minutes' => 'After 1 minute', '1_minutes' => 'After 1 minute',
@ -73,6 +81,9 @@ return [
'30_minutes' => 'After 30 minutes', '30_minutes' => 'After 30 minutes',
'1_hour' => 'After 1 hour', '1_hour' => 'After 1 hour',
'1_day' => 'After 1 day', '1_day' => 'After 1 day',
'livescan' => 'QR code livescan',
'upload' => 'QR code upload',
'advanced_form' => 'Advanced form',
], ],
]; ];