Complete Steam integration in forms

resources/js/views/twofaccounts/Create.vue

@@ -56,7 +56,7 @@
                 </div>
                 <field-error :form="form" field="qrcode" class="help-for-file" />
                 <!-- 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 -->
                 <form-field :form="form" fieldName="account" inputType="text" :label="$t('twofaccounts.account')" :placeholder="$t('twofaccounts.forms.account.placeholder')" />
                 <!-- icon upload -->
@@ -80,7 +80,7 @@
                 </div>
                 <field-error :form="form" field="icon" class="help-for-file" />
                 <!-- 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">
                     <!-- secret -->
                     <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" />
                         <p class="help" v-html="$t('twofaccounts.forms.secret.help')"></p>
                     </div>
-                    <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 -->
-                    <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 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 -->
+                        <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>
                 <vue-footer :showButtons="true">
                     <p class="control">
@@ -204,6 +206,7 @@
                 otp_types: [
                     { text: 'TOTP', value: 'totp' },
                     { text: 'HOTP', value: 'hotp' },
+                    { text: 'STEAM', value: 'steamtotp' },
                 ],
                 digitsChoices: [
                     { text: 6, value: 6 },
@@ -371,7 +374,13 @@
 
             clipboardErrorHandler ({ value, event }) {
                 console.log('error', value)
-            }
+            },
+
+            SetFormState (event) {
+                this.form.otp_type = event
+                this.form.service = event === 'steamtotp' ? 'Steam' : ''
+                this.secretIsBase32Encoded = event === 'steamtotp' ? 1 : this.secretIsBase32Encoded
+            },
             
         },
 

resources/js/views/twofaccounts/Edit.vue

@@ -2,7 +2,7 @@
     <form-wrapper :title="$t('twofaccounts.forms.edit_account')">
         <form @submit.prevent="updateAccount" @keydown="form.onKeydown($event)">
             <!-- 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 -->
             <form-field :form="form" fieldName="account" inputType="text" :label="$t('twofaccounts.account')" :placeholder="$t('twofaccounts.forms.account.placeholder')" />
             <!-- icon -->
@@ -60,42 +60,44 @@
                     <field-error :form="form" field="secret" class="help-for-file" />
                     <p class="help" v-html="$t('twofaccounts.forms.secret.help')"></p>
                 </div>
-                <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>
-                    <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 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>
-                        <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 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>
-                    <field-error :form="form" field="counter" />
-                    <p class="help" v-html="$t('twofaccounts.forms.counter.help_lock')"></p>
                 </div>
             </div>
             <!-- form buttons -->
@@ -150,6 +152,7 @@
                 otp_types: [
                     { text: 'TOTP', value: 'totp' },
                     { text: 'HOTP', value: 'hotp' },
+                    { text: 'STEAM', value: 'steamtotp' },
                 ],
                 digitsChoices: [
                     { text: 6, value: 6 },