Set form fields and buttons as components

resources/js/components/FormButtons.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="field is-grouped">
+        <div class="control">
+            <v-button :isLoading="isBusy" >{{ caption }}</v-button>
+        </div>
+        <div class="control" v-if="showCancelButton">
+            <router-link :to="{ name: cancelLandingView }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'FormButtons',
+        
+        data() {
+            return {
+
+            }
+        },
+
+        props: {
+            showCancelButton: {
+                type: Boolean,
+                default: false
+            },
+
+            isBusy: {
+                type: Boolean,
+                default: false
+            },
+
+            caption: {
+                type: String,
+                default: 'Submit'
+            },
+
+            cancelLandingView: {
+                type: String,
+                default: ''
+            },
+        }
+    }
+</script>

resources/js/components/FormField.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="field">
+        <label class="label" v-html="label"></label>
+        <div class="control">
+            <input :id="fieldName" :type="inputType" class="input" v-model="form[fieldName]" :placeholder="placeholder" v-bind="$attrs" />
+        </div>
+        <field-error :form="form" :field="fieldName" />
+    </div> 
+</template>
+
+<script>
+    export default {
+        name: 'FormField',
+        inheritAttrs: false,
+        
+        data() {
+            return {
+
+            }
+        },
+
+        props: {
+            label: {
+                type: String,
+                default: ''
+            },
+
+            fieldName: {
+                type: String,
+                default: '',
+                required: true
+            },
+
+            inputType: {
+                type: String,
+                default: 'text'
+            },
+
+            form: {
+                type: Object,
+                required: true
+            },
+
+            placeholder: {
+                type: String,
+                default: ''
+            },
+        }
+    }
+</script>

resources/js/components/index.js

@@ -2,6 +2,8 @@ import Vue from 'vue'
 import Button from './Button'
 import FieldError from './FieldError'
 import FormWrapper from './FormWrapper'
+import FormField from './FormField'
+import FormButtons from './FormButtons'
 import VueFooter from './Footer'
 
 // Components that are registered globaly.
@@ -9,6 +11,8 @@ import VueFooter from './Footer'
 	Button,
     FieldError,
     FormWrapper,
+    FormField,
+    FormButtons,
     VueFooter,
 ].forEach(Component => {
 	Vue.component(Component.name, Component)

resources/js/views/auth/Login.vue

@@ -1,25 +1,9 @@
 <template>
     <form-wrapper :title="$t('auth.forms.login')" :fail="fail" :success="success">
         <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.email') }}</label>
-                <div class="control">
-                    <input id="email" type="email" class="input" v-model="form.email" autofocus />
-                </div>
-                <field-error :form="form" field="email" />
-            </div>
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.password') }}</label>
-                <div class="control">
-                    <input id="password" type="password" class="input" v-model="form.password" />
-                </div>
-                <field-error :form="form" field="password" />
-            </div>
-            <div class="field is-grouped">
-                <div class="control">
-                    <v-button :isLoading="form.isBusy" >{{ $t('auth.sign_in') }}</v-button>
-                </div>
-            </div>
+            <form-field :form="form" fieldName="email" inputType="email" :label="$t('auth.forms.email')" autofocus />
+            <form-field :form="form" fieldName="password" inputType="password" :label="$t('auth.forms.password')" />
+            <form-buttons :isBusy="form.isBusy" :caption="$t('auth.sign_in')" />
         </form>
         <p>{{ $t('auth.forms.dont_have_account_yet') }}&nbsp;<router-link :to="{ name: 'register' }" class="is-link">{{ $t('auth.register') }}</router-link></p>
         <p>{{ $t('auth.forms.forgot_your_password') }}&nbsp;<router-link :to="{ name: 'password.request' }" class="is-link">{{ $t('auth.forms.request_password_reset') }}</router-link></p>

resources/js/views/auth/Register.vue

@@ -1,39 +1,11 @@
 <template>
     <form-wrapper :title="$t('auth.register')" :fail="fail" :success="success">
         <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.name') }}</label>
-                <div class="control">
-                    <input id="name" type="text" class="input" v-model="form.name" autofocus />
-                </div>
-                <field-error :form="form" field="name" />
-            </div>
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.email') }}</label>
-                <div class="control">
-                    <input id="email" type="email" class="input" v-model="form.email" />
-                </div>
-                <field-error :form="form" field="email" />
-            </div>
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.password') }}</label>
-                <div class="control">
-                    <input id="password" type="password" class="input" v-model="form.password" />
-                </div>
-                <field-error :form="form" field="password" />
-            </div>
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.confirm_password') }}</label>
-                <div class="control">
-                    <input id="password_confirmation" type="password" class="input" v-model="form.password_confirmation" />
-                </div>
-                <field-error :form="form" field="password_confirmation" />
-            </div>
-            <div class="field">
-                <div class="control">
-                    <v-button :isLoading="form.isBusy" >{{ $t('auth.register') }}</v-button>
-                </div>
-            </div>
+            <form-field :form="form" fieldName="name" inputType="text" :label="$t('auth.forms.name')" autofocus />
+            <form-field :form="form" fieldName="email" inputType="email" :label="$t('auth.forms.email')" />
+            <form-field :form="form" fieldName="password" inputType="password" :label="$t('auth.forms.password')" />
+            <form-field :form="form" fieldName="password_confirmation" inputType="password" :label="$t('auth.forms.confirm_password')" />
+            <form-buttons :isBusy="form.isBusy" :caption="$t('auth.register')" />
         </form>
         <p>{{ $t('auth.forms.already_register') }}&nbsp;<router-link :to="{ name: 'login' }" class="is-link">{{ $t('auth.sign_in') }}</router-link></p>
     </form-wrapper>

resources/js/views/auth/password/Request.vue

@@ -1,21 +1,8 @@
 <template>
     <form-wrapper :title="$t('auth.forms.reset_password')" :fail="fail" :success="success">
         <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.email') }}</label>
-                <div class="control">
-                    <input id="email" type="email" class="input" v-model="form.email" autofocus />
-                </div>
-                <field-error :form="form" field="email" />
-            </div>
-            <div class="field is-grouped">
-                <div class="control">
-                    <v-button :isLoading="form.isBusy" >{{ $t('auth.forms.send_password_reset_link') }}</v-button>
-                </div>
-                <div class="control">
-                    <router-link :to="{ name: 'login' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
-                </div>
-            </div>
+            <form-field :form="form" fieldName="email" inputType="email" :label="$t('auth.forms.email')" autofocus />
+            <form-buttons :isBusy="form.isBusy" :caption="$t('auth.forms.send_password_reset_link')" :showCancelButton="true" cancelLandingView="login" />
         </form>
     </form-wrapper>
 </template>

resources/js/views/auth/password/Reset.vue

@@ -1,35 +1,10 @@
 <template>
     <form-wrapper :title="$t('auth.forms.new_password')" :fail="fail" :success="success">
         <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.email') }}</label>
-                <div class="control">
-                    <input id="email" type="email" class="input" v-model="form.email" disabled readonly />
-                </div>
-                <field-error :form="form" field="email" />
-            </div>
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.new_password') }}</label>
-                <div class="control">
-                    <input id="password" type="password" class="input" v-model="form.password" />
-                </div>
-                <field-error :form="form" field="password" />
-            </div>
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.confirm_password') }}</label>
-                <div class="control">
-                    <input id="password_confirmation" type="password" class="input" v-model="form.password_confirmation" />
-                </div>
-                <field-error :form="form" field="password_confirmation" />
-            </div>
-            <div class="field is-grouped">
-                <div class="control">
-                    <v-button :isLoading="form.isBusy" >{{ $t('auth.forms.change_password') }}</v-button>
-                </div>
-                <div class="control">
-                    <router-link :to="{ name: 'login' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
-                </div>
-            </div>
+            <form-field :form="form" fieldName="email" inputType="email" :label="$t('auth.forms.email')" disabled readonly />
+            <form-field :form="form" fieldName="password" inputType="password" :label="$t('auth.forms.new_password')" />
+            <form-field :form="form" fieldName="password_confirmation" inputType="password" :label="$t('auth.forms.confirm_password')" />
+            <form-buttons :isBusy="form.isBusy" :caption="$t('auth.forms.change_password')" :showCancelButton="true" cancelLandingView="login" />
         </form>
     </form-wrapper>
 </template>

resources/js/views/profile/Account.vue

@@ -1,32 +1,10 @@
 <template>
     <form-wrapper :fail="fail" :success="success">
         <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.name') }}</label>
-                <div class="control">
-                    <input id="name" type="text" class="input" v-model="form.name" autofocus />
-                </div>
-                <field-error :form="form" field="name" />
-            </div>
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.email') }}</label>
-                <div class="control">
-                    <input id="email" type="email" class="input" v-model="form.email" />
-                </div>
-                <field-error :form="form" field="email" />
-            </div>
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.current_password') }}</label>
-                <div class="control">
-                    <input id="password" type="password" class="input" v-model="form.password" />
-                </div>
-                <field-error :form="form" field="password" />
-            </div>
-            <div class="field is-grouped">
-                <div class="control">
-                    <v-button :isLoading="form.isBusy" >{{ $t('commons.update') }}</v-button>
-                </div>
-            </div>
+            <form-field :form="form" fieldName="name" :label="$t('auth.forms.name')" autofocus />
+            <form-field :form="form" fieldName="email" inputType="email" :label="$t('auth.forms.email')" />
+            <form-field :form="form" fieldName="password" inputType="password" :label="$t('auth.forms.current_password')" />
+            <form-buttons :isBusy="form.isBusy" :caption="$t('commons.update')" />
         </form>
     </form-wrapper>
 </template>

resources/js/views/profile/Password.vue

@@ -1,32 +1,10 @@
 <template>
     <form-wrapper :fail="fail" :success="success">
         <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.new_password') }}</label>
-                <div class="control">
-                    <input id="password" type="password" class="input" v-model="form.password" />
-                </div>
-                <field-error :form="form" field="password" />
-            </div>
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.confirm_new_password') }}</label>
-                <div class="control">
-                    <input id="password_confirmation" type="password" class="input" v-model="form.password_confirmation" />
-                </div>
-                <field-error :form="form" field="password_confirmation" />
-            </div>
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.current_password') }}</label>
-                <div class="control">
-                    <input id="currentPassword" type="password" class="input" v-model="form.currentPassword" />
-                </div>
-                <field-error :form="form" field="currentPassword" />
-            </div>
-            <div class="field is-grouped">
-                <div class="control">
-                    <v-button :isLoading="form.isBusy" >{{ $t('auth.forms.change_password') }}</v-button>
-                </div>
-            </div>
+            <form-field :form="form" fieldName="password" inputType="password" :label="$t('auth.forms.new_password')" />
+            <form-field :form="form" fieldName="password_confirmation" inputType="password" :label="$t('auth.forms.confirm_new_password')" />
+            <form-field :form="form" fieldName="currentPassword" inputType="password" :label="$t('auth.forms.current_password')" />
+            <form-buttons :isBusy="form.isBusy" :caption="$t('auth.forms.change_password')" />
         </form>
     </form-wrapper>
 </template>

resources/js/views/profile/Settings.vue

@@ -1,18 +1,8 @@
 <template>
     <form-wrapper :fail="fail" :success="success">
         <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
-            <div class="field">
-                <label class="label">{{ $t('auth.forms.name') }}</label>
-                <div class="control">
-                    <input id="FirstSetting" type="text" class="input" v-model="form.FirstSetting" autofocus />
-                </div>
-                <field-error :form="form" field="FirstSetting" />
-            </div>
-            <div class="field is-grouped">
-                <div class="control">
-                    <v-button :isLoading="form.isBusy" >{{ $t('commons.save') }}</v-button>
-                </div>
-            </div>
+            <form-field :form="form" fieldName="FirstSetting" :label="$t('auth.forms.FirstSetting')" />
+            <form-buttons :isBusy="form.isBusy" :caption="$t('commons.save')" />
         </form>
     </form-wrapper>
 </template>

resources/js/views/twofaccounts/Create.vue

@@ -47,20 +47,8 @@
                 </div>
             </div>
             <field-error :form="form" field="qrcode" class="help-for-file" />
-            <div class="field">
-                <label class="label">{{ $t('twofaccounts.service') }}</label>
-                <div class="control">
-                    <input class="input" type="text" :placeholder="$t('twofaccounts.forms.service.placeholder')" v-model="form.service"  autofocus />
-                </div>
-                <field-error :form="form" field="service" />
-            </div>
-            <div class="field">
-                <label class="label">{{ $t('twofaccounts.account') }}</label>
-                <div class="control">
-                    <input class="input" type="text" :placeholder="$t('twofaccounts.forms.account.placeholder')" v-model="form.account"  />
-                </div>
-                <field-error :form="form" field="account" />
-            </div>
+            <form-field :form="form" fieldName="service" inputType="text" :label="$t('twofaccounts.service')" :placeholder="$t('twofaccounts.forms.service.placeholder')" autofocus />
+            <form-field :form="form" fieldName="account" inputType="text" :label="$t('twofaccounts.account')" :placeholder="$t('twofaccounts.forms.account.placeholder')" />
             <div class="field" style="margin-bottom: 0.5rem;">
                 <label class="label">{{ $t('twofaccounts.forms.otp_uri') }}</label>
             </div>

resources/js/views/twofaccounts/Edit.vue

@@ -1,20 +1,8 @@
 <template>
     <form-wrapper :title="$t('twofaccounts.forms.edit_account')">
         <form @submit.prevent="updateAccount" @keydown="form.onKeydown($event)">
-            <div class="field">
-                <label class="label">{{ $t('twofaccounts.service') }}</label>
-                <div class="control">
-                    <input class="input" type="text" :placeholder="$t('twofaccounts.forms.service.placeholder')" v-model="form.service" autofocus />
-                </div>
-                <field-error :form="form" field="service" />
-            </div>
-            <div class="field">
-                <label class="label">{{ $t('twofaccounts.account') }}</label>
-                <div class="control">
-                    <input class="input" type="text" :placeholder="$t('twofaccounts.forms.account.placeholder')" v-model="form.account" />
-                </div>
-                <field-error :form="form" field="account" />
-            </div>
+            <form-field :form="form" fieldName="service" inputType="text" :label="$t('twofaccounts.service')" :placeholder="$t('twofaccounts.forms.service.placeholder')" autofocus />
+            <form-field :form="form" fieldName="account" inputType="text" :label="$t('twofaccounts.account')" :placeholder="$t('twofaccounts.forms.account.placeholder')" />
             <div v-if="form.type === 'hotp'">
                 <div class="field" style="margin-bottom: 0.5rem;">
                     <label class="label">{{ $t('twofaccounts.forms.hotp_counter') }}</label>
@@ -64,7 +52,7 @@
                     <v-button :isLoading="form.isBusy" >{{ $t('twofaccounts.forms.save') }}</v-button>
                 </div>
                 <div class="control">
-                    <button type="button" class="button is-text" @click.prevent="cancelCreation">{{ $t('commons.cancel') }}</button>
+                    <button type="button" class="button is-text" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
                 </div>
             </div>
         </form>