mirror of
https://github.com/Bubka/2FAuth.git
synced 2025-05-29 22:39:11 +02:00
Complete Steam integration in forms
This commit is contained in:
Bubka
parent
3f06ca154f
commit
2b5ee2f006
@ -56,7 +56,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<field-error :form="form" field="qrcode" class="help-for-file" />
|
<field-error :form="form" field="qrcode" class="help-for-file" />
|
||||||
<!-- service -->
|
<!-- service -->
|
||||||
<form-field :form="form" fieldName="service" inputType="text" :label="$t('twofaccounts.service')" :placeholder="$t('twofaccounts.forms.service.placeholder')" autofocus />
|
<form-field :form="form" :isDisabled="form.otp_type === 'steamtotp'" fieldName="service" inputType="text" :label="$t('twofaccounts.service')" :placeholder="$t('twofaccounts.forms.service.placeholder')" autofocus />
|
||||||
<!-- account -->
|
<!-- account -->
|
||||||
<form-field :form="form" fieldName="account" inputType="text" :label="$t('twofaccounts.account')" :placeholder="$t('twofaccounts.forms.account.placeholder')" />
|
<form-field :form="form" fieldName="account" inputType="text" :label="$t('twofaccounts.account')" :placeholder="$t('twofaccounts.forms.account.placeholder')" />
|
||||||
<!-- icon upload -->
|
<!-- icon upload -->
|
||||||
@ -80,7 +80,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<field-error :form="form" field="icon" class="help-for-file" />
|
<field-error :form="form" field="icon" class="help-for-file" />
|
||||||
<!-- otp type -->
|
<!-- otp type -->
|
||||||
<form-toggle class="has-uppercased-button" :form="form" :choices="otp_types" fieldName="otp_type" :label="$t('twofaccounts.forms.otp_type.label')" :help="$t('twofaccounts.forms.otp_type.help')" :hasOffset="true" />
|
<form-toggle @otpTypeSelected="SetFormState" class="has-uppercased-button" :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">
|
<div v-if="form.otp_type">
|
||||||
<!-- secret -->
|
<!-- secret -->
|
||||||
<label class="label" v-html="$t('twofaccounts.forms.secret.label')"></label>
|
<label class="label" v-html="$t('twofaccounts.forms.secret.label')"></label>
|
||||||
@ -100,18 +100,20 @@
|
|||||||
<field-error :form="form" field="secret" class="help-for-file" />
|
<field-error :form="form" field="secret" class="help-for-file" />
|
||||||
<p class="help" v-html="$t('twofaccounts.forms.secret.help')"></p>
|
<p class="help" v-html="$t('twofaccounts.forms.secret.help')"></p>
|
||||||
</div>
|
</div>
|
||||||
<h2 class="title is-4 mt-5 mb-2">{{ $t('commons.options') }}</h2>
|
<div v-if="form.otp_type !== 'steamtotp'">
|
||||||
<p class="help mb-4">
|
<h2 class="title is-4 mt-5 mb-2">{{ $t('commons.options') }}</h2>
|
||||||
{{ $t('twofaccounts.forms.options_help') }}
|
<p class="help mb-4">
|
||||||
</p>
|
{{ $t('twofaccounts.forms.options_help') }}
|
||||||
<!-- digits -->
|
</p>
|
||||||
<form-toggle :form="form" :choices="digitsChoices" fieldName="digits" :label="$t('twofaccounts.forms.digits.label')" :help="$t('twofaccounts.forms.digits.help')" />
|
<!-- digits -->
|
||||||
<!-- algorithm -->
|
<form-toggle :form="form" :choices="digitsChoices" fieldName="digits" :label="$t('twofaccounts.forms.digits.label')" :help="$t('twofaccounts.forms.digits.help')" />
|
||||||
<form-toggle :form="form" :choices="algorithms" fieldName="algorithm" :label="$t('twofaccounts.forms.algorithm.label')" :help="$t('twofaccounts.forms.algorithm.help')" />
|
<!-- algorithm -->
|
||||||
<!-- TOTP period -->
|
<form-toggle :form="form" :choices="algorithms" fieldName="algorithm" :label="$t('twofaccounts.forms.algorithm.label')" :help="$t('twofaccounts.forms.algorithm.help')" />
|
||||||
<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')" />
|
<!-- TOTP period -->
|
||||||
<!-- HOTP counter -->
|
<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')" />
|
||||||
<form-field v-if="form.otp_type === 'hotp'" :form="form" fieldName="counter" inputType="text" :label="$t('twofaccounts.forms.counter.label')" :placeholder="$t('twofaccounts.forms.counter.placeholder')" :help="$t('twofaccounts.forms.counter.help')" />
|
<!-- HOTP counter -->
|
||||||
|
<form-field v-if="form.otp_type === 'hotp'" :form="form" fieldName="counter" inputType="text" :label="$t('twofaccounts.forms.counter.label')" :placeholder="$t('twofaccounts.forms.counter.placeholder')" :help="$t('twofaccounts.forms.counter.help')" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<vue-footer :showButtons="true">
|
<vue-footer :showButtons="true">
|
||||||
<p class="control">
|
<p class="control">
|
||||||
@ -204,6 +206,7 @@
|
|||||||
otp_types: [
|
otp_types: [
|
||||||
{ text: 'TOTP', value: 'totp' },
|
{ text: 'TOTP', value: 'totp' },
|
||||||
{ text: 'HOTP', value: 'hotp' },
|
{ text: 'HOTP', value: 'hotp' },
|
||||||
|
{ text: 'STEAM', value: 'steamtotp' },
|
||||||
],
|
],
|
||||||
digitsChoices: [
|
digitsChoices: [
|
||||||
{ text: 6, value: 6 },
|
{ text: 6, value: 6 },
|
||||||
@ -371,7 +374,13 @@
|
|||||||
|
|
||||||
clipboardErrorHandler ({ value, event }) {
|
clipboardErrorHandler ({ value, event }) {
|
||||||
console.log('error', value)
|
console.log('error', value)
|
||||||
}
|
},
|
||||||
|
|
||||||
|
SetFormState (event) {
|
||||||
|
this.form.otp_type = event
|
||||||
|
this.form.service = event === 'steamtotp' ? 'Steam' : ''
|
||||||
|
this.secretIsBase32Encoded = event === 'steamtotp' ? 1 : this.secretIsBase32Encoded
|
||||||
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<form-wrapper :title="$t('twofaccounts.forms.edit_account')">
|
<form-wrapper :title="$t('twofaccounts.forms.edit_account')">
|
||||||
<form @submit.prevent="updateAccount" @keydown="form.onKeydown($event)">
|
<form @submit.prevent="updateAccount" @keydown="form.onKeydown($event)">
|
||||||
<!-- service -->
|
<!-- service -->
|
||||||
<form-field :form="form" fieldName="service" inputType="text" :label="$t('twofaccounts.service')" :placeholder="$t('twofaccounts.forms.service.placeholder')" autofocus />
|
<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 -->
|
<!-- account -->
|
||||||
<form-field :form="form" fieldName="account" inputType="text" :label="$t('twofaccounts.account')" :placeholder="$t('twofaccounts.forms.account.placeholder')" />
|
<form-field :form="form" fieldName="account" inputType="text" :label="$t('twofaccounts.account')" :placeholder="$t('twofaccounts.forms.account.placeholder')" />
|
||||||
<!-- icon -->
|
<!-- icon -->
|
||||||
@ -60,42 +60,44 @@
|
|||||||
<field-error :form="form" field="secret" class="help-for-file" />
|
<field-error :form="form" field="secret" class="help-for-file" />
|
||||||
<p class="help" v-html="$t('twofaccounts.forms.secret.help')"></p>
|
<p class="help" v-html="$t('twofaccounts.forms.secret.help')"></p>
|
||||||
</div>
|
</div>
|
||||||
<h2 class="title is-4 mt-5 mb-2">{{ $t('commons.options') }}</h2>
|
<div v-if="form.otp_type !== 'steamtotp'">
|
||||||
<p class="help mb-4">
|
<h2 class="title is-4 mt-5 mb-2">{{ $t('commons.options') }}</h2>
|
||||||
{{ $t('twofaccounts.forms.options_help') }}
|
<p class="help mb-4">
|
||||||
</p>
|
{{ $t('twofaccounts.forms.options_help') }}
|
||||||
<!-- digits -->
|
</p>
|
||||||
<form-toggle :form="form" :choices="digitsChoices" fieldName="digits" :label="$t('twofaccounts.forms.digits.label')" :help="$t('twofaccounts.forms.digits.help')" />
|
<!-- digits -->
|
||||||
<!-- algorithm -->
|
<form-toggle :form="form" :choices="digitsChoices" fieldName="digits" :label="$t('twofaccounts.forms.digits.label')" :help="$t('twofaccounts.forms.digits.help')" />
|
||||||
<form-toggle :form="form" :choices="algorithms" fieldName="algorithm" :label="$t('twofaccounts.forms.algorithm.label')" :help="$t('twofaccounts.forms.algorithm.help')" />
|
<!-- algorithm -->
|
||||||
<!-- TOTP period -->
|
<form-toggle :form="form" :choices="algorithms" fieldName="algorithm" :label="$t('twofaccounts.forms.algorithm.label')" :help="$t('twofaccounts.forms.algorithm.help')" />
|
||||||
<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')" />
|
<!-- TOTP period -->
|
||||||
<!-- HOTP counter -->
|
<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')" />
|
||||||
<div v-if="form.otp_type === 'hotp'">
|
<!-- HOTP counter -->
|
||||||
<div class="field" style="margin-bottom: 0.5rem;">
|
<div v-if="form.otp_type === 'hotp'">
|
||||||
<label class="label">{{ $t('twofaccounts.forms.counter.label') }}</label>
|
<div class="field" style="margin-bottom: 0.5rem;">
|
||||||
|
<label class="label">{{ $t('twofaccounts.forms.counter.label') }}</label>
|
||||||
|
</div>
|
||||||
|
<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">
|
||||||
|
<a class="button is-dark field-lock" @click="counterIsLocked = false" :title="$t('twofaccounts.forms.unlock.title')">
|
||||||
|
<span class="icon">
|
||||||
|
<font-awesome-icon :icon="['fas', 'lock']" />
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="control" v-else>
|
||||||
|
<a class="button is-dark field-unlock" @click="counterIsLocked = true" :title="$t('twofaccounts.forms.lock.title')">
|
||||||
|
<span class="icon has-text-danger">
|
||||||
|
<font-awesome-icon :icon="['fas', 'lock-open']" />
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<field-error :form="form" field="counter" />
|
||||||
|
<p class="help" v-html="$t('twofaccounts.forms.counter.help_lock')"></p>
|
||||||
</div>
|
</div>
|
||||||
<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">
|
|
||||||
<a class="button is-dark field-lock" @click="counterIsLocked = false" :title="$t('twofaccounts.forms.unlock.title')">
|
|
||||||
<span class="icon">
|
|
||||||
<font-awesome-icon :icon="['fas', 'lock']" />
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="control" v-else>
|
|
||||||
<a class="button is-dark field-unlock" @click="counterIsLocked = true" :title="$t('twofaccounts.forms.lock.title')">
|
|
||||||
<span class="icon has-text-danger">
|
|
||||||
<font-awesome-icon :icon="['fas', 'lock-open']" />
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<field-error :form="form" field="counter" />
|
|
||||||
<p class="help" v-html="$t('twofaccounts.forms.counter.help_lock')"></p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- form buttons -->
|
<!-- form buttons -->
|
||||||
@ -150,6 +152,7 @@
|
|||||||
otp_types: [
|
otp_types: [
|
||||||
{ text: 'TOTP', value: 'totp' },
|
{ text: 'TOTP', value: 'totp' },
|
||||||
{ text: 'HOTP', value: 'hotp' },
|
{ text: 'HOTP', value: 'hotp' },
|
||||||
|
{ text: 'STEAM', value: 'steamtotp' },
|
||||||
],
|
],
|
||||||
digitsChoices: [
|
digitsChoices: [
|
||||||
{ text: 6, value: 6 },
|
{ text: 6, value: 6 },
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user