Wrap forms in a vue component

resources/js/components/FormWrapper.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="columns is-centered">
+        <div class="form-column column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
+            <h1 class="title" v-html="title"></h1>
+            <slot />
+            <p v-if="showTag">
+                <span class="tag is-danger" v-if="fail" v-html="fail" />
+                <span class="tag is-success" v-if="success" v-html="success" />
+            </p>
+        </div>
+    </div>    
+</template>
+
+<script>
+    export default {
+        name: 'FormWrapper',
+        
+        data() {
+            return {
+
+            }
+        },
+
+        computed: {
+            showTag: function() {
+                return (this.fail || this.success) ? true : false
+            }
+        },
+
+        props: {
+            title: {
+                type: String,
+                default: ''
+            },
+
+            fail: {
+                type: String,
+                default: ''
+            },
+
+            success: {
+                type: String,
+                default: ''
+            },
+        }
+    }
+</script>

resources/js/components/index.js

@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import Button from './Button'
 import FieldError from './FieldError'
+import FormWrapper from './FormWrapper'
 
 // Components that are registered globaly.
 [
 	Button,
     FieldError,
+    FormWrapper,
 ].forEach(Component => {
 	Vue.component(Component.name, Component)
 })

resources/js/views/auth/Login.vue

@@ -1,51 +1,29 @@
 <template>
-    <div class="section">
-        <div class="columns is-mobile  is-centered">
-            <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                <h1 class="title">{{ $t('auth.forms.login') }}</h1>
-                <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">
-                        <div class="control">
-                            <v-button :isLoading="form.isBusy" >{{ $t('auth.sign_in') }}</v-button>
-                        </div>
-                    </div>
-                    <div class="field" v-if="errorMessage">
-                        <span class="tag is-danger">
-                            {{ errorMessage }}
-                        </span>
-                    </div>
-                </form>
+    <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>
-        <div class="columns is-mobile is-centered">
-            <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                {{ $t('auth.forms.dont_have_account_yet') }}&nbsp;<router-link :to="{ name: 'register' }" class="is-link">
-                    {{ $t('auth.register') }}
-                </router-link>
+            <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>
-        <div class="columns is-mobile is-centered">
-            <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                {{ $t('auth.forms.forgot_your_password') }}&nbsp;<router-link :to="{ name: 'password.request' }" class="is-link">
-                    {{ $t('auth.forms.request_password_reset') }}
-                </router-link>
+            <div class="field is-grouped">
+                <div class="control">
+                    <v-button :isLoading="form.isBusy" >{{ $t('auth.sign_in') }}</v-button>
+                </div>
             </div>
-        </div>
-    </div>
+        </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>
+    </form-wrapper>
 </template>
 
 <script>
@@ -55,7 +33,8 @@
     export default {
         data(){
             return {
-                errorMessage: '',
+                success: '',
+                fail: '',
                 form: new Form({
                     email: '',
                     password: ''
@@ -78,7 +57,7 @@
                 })
                 .catch(error => {
                     if( error.response.status === 401 ) {
-                        this.errorMessage = this.$t('auth.forms.password_do_not_match')
+                        this.fail = this.$t('auth.forms.password_do_not_match')
                     }
                     else if( error.response.status !== 422 ) {
                         this.$router.push({ name: 'genericError', params: { err: error.response } });

resources/js/views/auth/Register.vue

@@ -1,57 +1,42 @@
 <template>
-    <div class="section">
-        <div class="columns is-mobile  is-centered">
-            <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                <h1 class="title">{{ $t('auth.register') }}</h1>
-                <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>
-                <br />
-                <span class="tag is-danger" v-if="errorMessage">
-                    {{ errorMessage }}
-                </span>
+    <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>
-        <div class="columns is-mobile is-centered">
-            <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                {{ $t('auth.forms.already_register') }}&nbsp;<router-link :to="{ name: 'login' }" class="is-link">
-                    {{ $t('auth.sign_in') }}
-                </router-link>
+            <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>
-    </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>
+        <p>{{ $t('auth.forms.already_register') }}&nbsp;<router-link :to="{ name: 'login' }" class="is-link">{{ $t('auth.sign_in') }}</router-link></p>
+    </form-wrapper>
 </template>
 
 <script>
@@ -61,7 +46,8 @@
     export default {
         data(){
             return {
-                errorMessage: '',
+                success: '',
+                fail: '',
                 form: new Form({
                     name : '',
                     email : '',
@@ -76,7 +62,7 @@
             const { data } = await this.axios.post('api/checkuser')
 
             if( data.userCount > 0 ) {
-                this.errorMessage = this.$t('errors.already_one_user_registered') + ' ' + this.$t('errors.cannot_register_more_user')
+                this.fail = this.$t('errors.already_one_user_registered') + ' ' + this.$t('errors.cannot_register_more_user')
                 this.$router.push({ name: 'flooded' });
             }
 

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

@@ -1,38 +1,23 @@
 <template>
-    <div class="section">
-        <div class="columns is-mobile  is-centered">
-            <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                <h1 class="title">{{ $t('auth.forms.reset_password') }}</h1>
-                <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>
-                    <div class="field" v-if="errorMessage">
-                        <span class="tag is-danger">
-                            {{ errorMessage }}
-                        </span>
-                    </div>
-                </form>
+    <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>
-        <div class="columns is-mobile is-centered" v-if="response">
-            <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                {{ response }}
+            <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>
-        </div>
-    </div>
+        </form>
+    </form-wrapper>
 </template>
 
 <script>
@@ -42,8 +27,8 @@
     export default {
         data(){
             return {
-                response: '',
-                errorMessage: '',
+                success: '',
+                fail: '',
                 form: new Form({
                     email: '',
                 })
@@ -56,11 +41,11 @@
                 this.form.post('/api/password/email', {returnError: true})
                 .then(response => {
 
-                    this.response = response.data.status
+                    this.success = response.data.status
                 })
                 .catch(error => {
                     if( error.response.data.requestFailed ) {
-                        this.errorMessage = error.response.data.requestFailed
+                        this.fail = error.response.data.requestFailed
                     }
                     else if( error.response.status !== 422 ) {
                         this.$router.push({ name: 'genericError', params: { err: error.response } });

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

@@ -1,47 +1,37 @@
 <template>
-    <div class="section">
-        <div class="columns is-mobile  is-centered">
-            <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                <h1 class="title">{{ $t('auth.forms.new_password') }}</h1>
-                <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>
-                    <div class="field" v-if="errorMessage">
-                        <span class="tag is-danger">
-                            {{ errorMessage }}
-                        </span>
-                    </div>
-                </form>
+    <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>
-    </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>
+    </form-wrapper>
 </template>
 
 <script>
@@ -51,7 +41,8 @@
     export default {
         data(){
             return {
-                errorMessage: '',
+                success: '',
+                fail: '',
                 form: new Form({
                     email : '',
                     password : '',
@@ -77,7 +68,7 @@
                 })
                 .catch(error => {
                     if( error.response.data.resetFailed ) {
-                        this.errorMessage = error.response.data.resetFailed
+                        this.fail = error.response.data.resetFailed
                     }
                     else if( error.response.status !== 422 ) {
                         this.$router.push({ name: 'genericError', params: { err: error.response } });

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

@@ -1,54 +1,37 @@
 <template>
-    <div class="section">
-        <div class="columns is-mobile  is-centered">
-            <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                <h1 class="title">{{ $t('auth.forms.change_password') }}</h1>
-                <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
-                    <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">
-                        <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: 'profile' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
-                        </div>
-                    </div>
-                    <div class="field" v-if="errorMessage">
-                        <span class="tag is-danger">
-                            {{ errorMessage }}
-                        </span>
-                    </div>
-                </form>
+    <form-wrapper :title="$t('auth.forms.change_password')" :fail="fail" :success="success">
+        <form @submit.prevent="handleSubmit" @keydown="form.onKeydown($event)">
+            <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>
-        <div class="columns is-mobile is-centered" v-if="response">
-            <div class="has-text-link column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                <span class="tag is-success">
-                    {{ response }}
-                </span>
+            <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>
-    </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: 'profile' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
+                </div>
+            </div>
+        </form>
+    </form-wrapper>
 </template>
 
 <script>
@@ -58,8 +41,8 @@
     export default {
         data(){
             return {
-                response: '',
-                errorMessage: '',
+                success: '',
+                fail: '',
                 form: new Form({
                     currentPassword : '',
                     password : '',
@@ -72,17 +55,17 @@
             handleSubmit(e) {
                 e.preventDefault()
 
-                this.errorMessage = ''
-                this.response = ''
+                this.fail = ''
+                this.success = ''
 
                 this.form.patch('/api/password', {returnError: true})
                 .then(response => {
 
-                    this.response = response.data.message
+                    this.success = response.data.message
                 })
                 .catch(error => {
                     if( error.response.status === 400 ) {
-                        this.errorMessage = error.response.data.message
+                        this.fail = error.response.data.message
                     }
                     else if( error.response.status !== 422 ) {
                         this.$router.push({ name: 'genericError', params: { err: error.response } });

resources/js/views/profile/Edit.vue

@@ -1,61 +1,39 @@
 <template>
-    <div class="section">
-        <div class="columns is-mobile  is-centered">
-            <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                <h1 class="title">{{ $t('commons.profile') }}</h1>
-                <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 is-grouped">
-                        <div class="control">
-                            <v-button :isLoading="form.isBusy" >{{ $t('commons.update') }}</v-button>
-                        </div>
-                        <div class="control">
-                            <router-link :to="{ name: 'accounts' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
-                        </div>
-                    </div>
-                    <div class="field" v-if="errorMessage">
-                        <span class="tag is-danger">
-                            {{ errorMessage }}
-                        </span>
-                    </div>
-                </form>
+    <form-wrapper :title="$t('commons.profile')" :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>
-        <div class="columns is-mobile is-centered">
-            <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                <router-link :to="{ name: 'password.update' }" class="is-link">
-                    {{ $t('auth.forms.change_your_password') }}
-                </router-link>
+            <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>
-        <div class="columns is-mobile is-centered" v-if="response">
-            <div class="has-text-link column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                <span class="tag is-success">
-                    {{ response }}
-                </span>
+            <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>
-    </div>
+            <div class="field is-grouped">
+                <div class="control">
+                    <v-button :isLoading="form.isBusy" >{{ $t('commons.update') }}</v-button>
+                </div>
+                <div class="control">
+                    <router-link :to="{ name: 'accounts' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
+                </div>
+            </div>
+        </form>
+        <p><router-link :to="{ name: 'password.update' }" class="is-link">{{ $t('auth.forms.change_your_password') }}</router-link></p>
+    </form-wrapper>
+
 </template>
 
 <script>
@@ -65,8 +43,8 @@
     export default {
         data(){
             return {
-                response: '',
-                errorMessage: '',
+                success: '',
+                fail: '',
                 form: new Form({
                     name : '',
                     email : '',
@@ -85,19 +63,20 @@
             handleSubmit(e) {
                 e.preventDefault()
 
-                this.errorMessage = ''
-                this.response = ''
+                this.fail = ''
+                this.success = ''
 
                 this.form.patch('/api/user', {returnError: true})
                 .then(response => {
 
-                    this.response = response.data.message
+                    this.success = response.data.message
 
                     localStorage.setItem('user',response.data.username)
                 })
                 .catch(error => {
                     if( error.response.status === 400 ) {
-                        this.errorMessage = error.response.data.message
+
+                        this.fail = error.response.data.message
                     }
                     else if( error.response.status !== 422 ) {
                         this.$router.push({ name: 'genericError', params: { err: error.response } });

resources/js/views/twofaccounts/Create.vue

@@ -1,91 +1,86 @@
 <template>
-    <div class="section">
-        <div class="columns is-mobile is-centered">
-            <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                <h1 class="title">{{ $t('twofaccounts.forms.new_account') }}</h1>
-                <form @submit.prevent="createAccount" @keydown="form.onKeydown($event)">
-                    <div class="field">
-                        <div class="file is-dark is-boxed">
-                            <label class="file-label" :title="$t('twofaccounts.forms.use_qrcode.title')">
-                                <input class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
-                                <span class="file-cta">
-                                    <span class="file-icon">
-                                        <font-awesome-icon :icon="['fas', 'qrcode']" size="lg" />
-                                    </span>
-                                    <span class="file-label">{{ $t('twofaccounts.forms.use_qrcode.val') }}</span>
-                                </span>
-                            </label>
-                        </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>
-                    <div class="field" style="margin-bottom: 0.5rem;">
-                        <label class="label">{{ $t('twofaccounts.forms.totp_uri') }}</label>
-                    </div>
-                    <div class="field has-addons">
-                        <div class="control is-expanded">
-                            <input class="input" type="text" placeholder="otpauth://totp/..." v-model="form.uri" :disabled="uriIsLocked" />
-                        </div>
-                        <div class="control" v-if="uriIsLocked">
-                            <a class="button is-dark field-lock" @click="uriIsLocked = 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="uriIsLocked = 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="uri" class="help-for-file" />
-                    <div class="field">
-                        <label class="label">{{ $t('twofaccounts.icon') }}</label>
-                        <div class="file is-dark">
-                            <label class="file-label">
-                                <input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
-                                <span class="file-cta">
-                                    <span class="file-icon">
-                                        <font-awesome-icon :icon="['fas', 'image']" />
-                                    </span>
-                                    <span class="file-label">{{ $t('twofaccounts.forms.choose_image') }}</span>
-                                </span>
-                            </label>
-                            <span class="tag is-black is-large" v-if="tempIcon">
-                                <img class="icon-preview" :src="'storage/icons/' + tempIcon" >
-                                <button class="delete is-small" @click.prevent="deleteIcon"></button>
+    <form-wrapper :title="$t('twofaccounts.forms.new_account')">
+        <form @submit.prevent="createAccount" @keydown="form.onKeydown($event)">
+            <div class="field">
+                <div class="file is-dark is-boxed">
+                    <label class="file-label" :title="$t('twofaccounts.forms.use_qrcode.title')">
+                        <input class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
+                        <span class="file-cta">
+                            <span class="file-icon">
+                                <font-awesome-icon :icon="['fas', 'qrcode']" size="lg" />
                             </span>
-                        </div>
-                    </div>
-                    <field-error :form="form" field="icon" class="help-for-file" />
-                    <div class="field is-grouped">
-                        <div class="control">
-                            <v-button :isLoading="form.isBusy" >{{ $t('twofaccounts.forms.create') }}</v-button>
-                        </div>
-                        <div class="control">
-                            <button class="button is-text" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
-                        </div>
-                    </div>
-                </form>
+                            <span class="file-label">{{ $t('twofaccounts.forms.use_qrcode.val') }}</span>
+                        </span>
+                    </label>
+                </div>
             </div>
-        </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>
+            <div class="field" style="margin-bottom: 0.5rem;">
+                <label class="label">{{ $t('twofaccounts.forms.totp_uri') }}</label>
+            </div>
+            <div class="field has-addons">
+                <div class="control is-expanded">
+                    <input class="input" type="text" placeholder="otpauth://totp/..." v-model="form.uri" :disabled="uriIsLocked" />
+                </div>
+                <div class="control" v-if="uriIsLocked">
+                    <a class="button is-dark field-lock" @click="uriIsLocked = 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="uriIsLocked = 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="uri" class="help-for-file" />
+            <div class="field">
+                <label class="label">{{ $t('twofaccounts.icon') }}</label>
+                <div class="file is-dark">
+                    <label class="file-label">
+                        <input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
+                        <span class="file-cta">
+                            <span class="file-icon">
+                                <font-awesome-icon :icon="['fas', 'image']" />
+                            </span>
+                            <span class="file-label">{{ $t('twofaccounts.forms.choose_image') }}</span>
+                        </span>
+                    </label>
+                    <span class="tag is-black is-large" v-if="tempIcon">
+                        <img class="icon-preview" :src="'storage/icons/' + tempIcon" >
+                        <button class="delete is-small" @click.prevent="deleteIcon"></button>
+                    </span>
+                </div>
+            </div>
+            <field-error :form="form" field="icon" class="help-for-file" />
+            <div class="field is-grouped">
+                <div class="control">
+                    <v-button :isLoading="form.isBusy" >{{ $t('twofaccounts.forms.create') }}</v-button>
+                </div>
+                <div class="control">
+                    <button class="button is-text" @click="cancelCreation">{{ $t('commons.cancel') }}</button>
+                </div>
+            </div>
+        </form>
+    </form-wrapper>
 </template>
 
 <script>

resources/js/views/twofaccounts/Edit.vue

@@ -1,79 +1,74 @@
 <template>
-    <div class="section" v-if="twofaccountExists">
-        <div class="columns is-mobile is-centered">
-            <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
-                <h1 class="title">{{ $t('twofaccounts.forms.edit_account') }}</h1>
-                <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>
-                    <div v-if="form.type === 'hotp'">
-                        <div class="field" style="margin-bottom: 0.5rem;">
-                            <label class="label">{{ $t('twofaccounts.forms.hotp_counter') }}</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="uri" class="help-for-file" />
+    <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>
+            <div v-if="form.type === 'hotp'">
+                <div class="field" style="margin-bottom: 0.5rem;">
+                    <label class="label">{{ $t('twofaccounts.forms.hotp_counter') }}</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="field">
-                        <label class="label">{{ $t('twofaccounts.icon') }}</label>
-                        <div class="file is-dark">
-                            <label class="file-label">
-                                <input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
-                                <span class="file-cta">
-                                    <span class="file-icon">
-                                        <font-awesome-icon :icon="['fas', 'image']" />
-                                    </span>
-                                    <span class="file-label">{{ $t('twofaccounts.forms.choose_image') }}</span>
-                                </span>
-                            </label>
-                            <span class="tag is-black is-large" v-if="tempIcon">
-                                <img class="icon-preview" :src="'../storage/icons/' + tempIcon" >
-                                <button class="delete is-small" @click.prevent="deleteIcon"></button>
+                    <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>
-                        </div>
+                        </a>
                     </div>
-                    <field-error :form="form" field="icon" class="help-for-file" />
-                    <div class="field is-grouped">
-                        <div class="control">
-                            <v-button :isLoading="form.isBusy" >{{ $t('twofaccounts.forms.save') }}</v-button>
-                        </div>
-                        <div class="control">
-                            <button class="button is-text" @click.prevent="cancelCreation">{{ $t('commons.cancel') }}</button>
-                        </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>
-                </form>
+                </div>
+                <field-error :form="form" field="uri" class="help-for-file" />
+            </div>
+            <div class="field">
+                <label class="label">{{ $t('twofaccounts.icon') }}</label>
+                <div class="file is-dark">
+                    <label class="file-label">
+                        <input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
+                        <span class="file-cta">
+                            <span class="file-icon">
+                                <font-awesome-icon :icon="['fas', 'image']" />
+                            </span>
+                            <span class="file-label">{{ $t('twofaccounts.forms.choose_image') }}</span>
+                        </span>
+                    </label>
+                    <span class="tag is-black is-large" v-if="tempIcon">
+                        <img class="icon-preview" :src="'../storage/icons/' + tempIcon" >
+                        <button class="delete is-small" @click.prevent="deleteIcon"></button>
+                    </span>
+                </div>
+            </div>
+            <field-error :form="form" field="icon" class="help-for-file" />
+            <div class="field is-grouped">
+                <div class="control">
+                    <v-button :isLoading="form.isBusy" >{{ $t('twofaccounts.forms.save') }}</v-button>
+                </div>
+                <div class="control">
+                    <button class="button is-text" @click.prevent="cancelCreation">{{ $t('commons.cancel') }}</button>
+                </div>
             </div>
-        </div>
-    </div>
+        </form>
+    </form-wrapper>
 </template>
 
 <script>

resources/sass/app.scss

@@ -12,6 +12,19 @@
   padding: 1.5rem 1.5rem 8rem 1.5rem;
 }
 
+.form-column {
+  padding-top: 3rem;
+}
+
+.form-column > p {
+  margin-bottom: 0.75rem;
+  padding-top: 0.75rem;
+}
+
+.form-column > p:first-of-type {
+  padding-top: 1.5rem !important;
+}
+
 nav.level {
     padding: 0 20px;
     /*postion: fixed;*/