diff --git a/resources/js/components/Form.js b/resources/js/components/Form.js
index 81f79158..f12411c1 100644
--- a/resources/js/components/Form.js
+++ b/resources/js/components/Form.js
@@ -77,13 +77,13 @@ class Form {
     /**
      * Reset the form fields.
      */
-    // reset () {
-    //   Object.keys(this)
-    //     .filter(key => !Form.ignore.includes(key))
-    //     .forEach(key => {
-    //       this[key] = deepCopy(this.originalData[key])
-    //     })
-    // }
+    reset () {
+      Object.keys(this)
+        .filter(key => !Form.ignore.includes(key))
+        .forEach(key => {
+          this[key] = deepCopy(this.originalData[key])
+        })
+    }
 
     /**
      * Submit the form via a GET request.
@@ -267,6 +267,6 @@ class Form {
 
 Form.routes = {}
 Form.errorMessage = 'Something went wrong. Please try again.'
-Form.ignore = ['isBusy', /*'successful', 'errors',*/ 'originalData']
+Form.ignore = ['isBusy', /*'successful'*/, 'errors', 'originalData']
 
 export default Form
diff --git a/resources/js/views/auth/Login.vue b/resources/js/views/auth/Login.vue
index e5bce629..cb09863b 100644
--- a/resources/js/views/auth/Login.vue
+++ b/resources/js/views/auth/Login.vue
@@ -7,16 +7,16 @@
                     <div class="field">
                         <label class="label">{{ $t('auth.forms.email') }}</label>
                         <div class="control">
-                            <input id="email" type="email" class="input" v-model="email" required autofocus />
+                            <input id="email" type="email" class="input" v-model="form.email" required autofocus />
                         </div>
-                        <p class="help is-danger" v-if="validationErrors.email">{{ validationErrors.email.toString() }}</p>
+                        <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="password" required />
+                            <input id="password" type="password" class="input" v-model="form.password" required />
                         </div>
-                        <p class="help is-danger" v-if="validationErrors.password">{{ validationErrors.password.toString() }}</p>
+                        <field-error :form="form" field="password" />
                     </div>
                     <div class="field">
                         <div class="control">
@@ -49,13 +49,17 @@
 </template>
 
 <script>
+
+    import Form from './../../components/Form'
+
     export default {
         data(){
             return {
-                email : '',
-                password : '',
-                validationErrors: {},
-                errorMessage: ''
+                errorMessage: '',
+                form: new Form({
+                    email: '',
+                    password: ''
+                })
             }
         },
 
@@ -63,10 +67,7 @@
             handleSubmit(e) {
                 e.preventDefault()
 
-                axios.post('api/login', {
-                    email: this.email,
-                    password: this.password
-                })
+                this.form.post('/api/login')
                 .then(response => {
                     localStorage.setItem('user',response.data.message.name)
                     localStorage.setItem('jwt',response.data.message.token)
@@ -76,18 +77,11 @@
                     }
                 })
                 .catch(error => {
-
-                    this.validationErrors = {}
-                    this.errorMessage = ''
-
                     if( error.response.status === 401 ) {
                         this.errorMessage = this.$t('auth.forms.password_do_not_match')
                     }
-                    else if( error.response.status == 422 ) {
-                        this.validationErrors = error.response.data.errors
-                    }
-                    else {
-                        this.$router.push({ name: 'genericError', params: { err: error.response } });
+                    else if( error.response.status !== 422 ) {
+                        this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
                     }
                 });
             }
diff --git a/resources/js/views/auth/Register.vue b/resources/js/views/auth/Register.vue
index 27e5cfbd..dbec48cb 100644
--- a/resources/js/views/auth/Register.vue
+++ b/resources/js/views/auth/Register.vue
@@ -7,30 +7,30 @@
                     <div class="field">
                         <label class="label">{{ $t('auth.forms.name') }}</label>
                         <div class="control">
-                            <input id="name" type="text" class="input" v-model="name" required autofocus />
+                            <input id="name" type="text" class="input" v-model="form.name" required autofocus />
                         </div>
-                        <p class="help is-danger" v-if="validationErrors.name">{{ validationErrors.name.toString() }}</p>
+                        <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="email" required />
+                            <input id="email" type="email" class="input" v-model="form.email" required />
                         </div>
-                        <p class="help is-danger" v-if="validationErrors.email">{{ validationErrors.email.toString() }}</p>
+                        <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="password" required />
+                            <input id="password" type="password" class="input" v-model="form.password" required />
                         </div>
-                        <p class="help is-danger" v-if="validationErrors.password">{{ validationErrors.password.toString() }}</p>
+                        <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="password_confirmation" required />
+                            <input id="password_confirmation" type="password" class="input" v-model="form.password_confirmation" required />
                         </div>
-                        <p class="help is-danger" v-if="validationErrors.passwordConfirmation">{{ validationErrors.passwordConfirmation.toString() }}</p>
+                        <field-error :form="form" field="password_confirmation" />
                     </div>
                     <div class="field">
                         <div class="control">
@@ -55,15 +55,19 @@
 </template>
 
 <script>
+
+    import Form from './../../components/Form'
+
     export default {
         data(){
             return {
-                name : '',
-                email : '',
-                password : '',
-                password_confirmation : '',
-                validationErrors: {},
-                errorMessage: ''
+                errorMessage: '',
+                form: new Form({
+                    name : '',
+                    email : '',
+                    password : '',
+                    password_confirmation : '',
+                })
             }
         },
 
@@ -77,7 +81,7 @@
                 }
             })
             .catch(error => {
-                this.$router.push({ name: 'genericError', params: { err: error.response } });
+                this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
             });
         },
 
@@ -85,14 +89,8 @@
             handleSubmit(e) {
                 e.preventDefault()
 
-                axios.post('api/register', {
-                    name: this.name,
-                    email: this.email,
-                    password: this.password,
-                    password_confirmation : this.password_confirmation
-                })
+                this.form.post('api/register')
                 .then(response => {
-
                     localStorage.setItem('user',response.data.message.name)
                     localStorage.setItem('jwt',response.data.message.token)
 
@@ -101,14 +99,8 @@
                     }
                 })
                 .catch(error => {
-
-                    this.validationErrors = {}
-
-                    if( error.response.status == 422 ) {
-                        this.validationErrors = error.response.data.errors
-                    }
-                    else {
-                        this.$router.push({ name: 'genericError', params: { err: error.response } });
+                    if( error.response.status !== 422 ) {
+                        this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
                     }
                 });
             }
diff --git a/resources/js/views/auth/password/Request.vue b/resources/js/views/auth/password/Request.vue
index 9445649c..87158c71 100644
--- a/resources/js/views/auth/password/Request.vue
+++ b/resources/js/views/auth/password/Request.vue
@@ -7,9 +7,9 @@
                     <div class="field">
                         <label class="label">{{ $t('auth.forms.email') }}</label>
                         <div class="control">
-                            <input id="email" type="email" class="input" v-model="email" required autofocus />
+                            <input id="email" type="email" class="input" v-model="form.email" required autofocus />
                         </div>
-                        <p class="help is-danger" v-if="validationErrors.email">{{ validationErrors.email.toString() }}</p>
+                        <field-error :form="form" field="email" />
                     </div>
                     <div class="field is-grouped">
                         <div class="control">
@@ -19,58 +19,52 @@
                             <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>
-                <br />
-                <span class="tag is-danger" v-if="errorMessage">
-                    {{ errorMessage }}
-                </span>
             </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 }}
-                </router-link>
             </div>
         </div>
     </div>
 </template>
 
 <script>
+
+    import Form from './../../../components/Form'
+
     export default {
         data(){
             return {
-                email : '',
-                validationErrors: {},
                 response: '',
-                errorMessage: ''
+                errorMessage: '',
+                form: new Form({
+                    email: '',
+                })
             }
         },
         methods : {
-            handleSubmit(e){
+            handleSubmit(e) {
                 e.preventDefault()
 
-                this.validationErrors = {}
-
-                axios.post('/api/password/email', {
-                    email: this.email
-                })
+                this.form.post('/api/password/email')
                 .then(response => {
 
                     this.response = response.data.status
-
                 })
                 .catch(error => {
-
-                    if( error.response.status == 422 ) {
-                        this.validationErrors = error.response.data.errors
-                    }
-                    else if( error.response.data.requestFailed ) {
+                    if( error.response.data.requestFailed ) {
                         this.errorMessage = error.response.data.requestFailed
                     }
-                    else {
-                        this.$router.push({ name: 'genericError', params: { err: error.response } });
+                    else if( error.response.status !== 422 ) {
+                        this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
                     }
-                    
                 });
 
             }
diff --git a/resources/js/views/auth/password/Reset.vue b/resources/js/views/auth/password/Reset.vue
index b426bbb7..7054a3db 100644
--- a/resources/js/views/auth/password/Reset.vue
+++ b/resources/js/views/auth/password/Reset.vue
@@ -7,23 +7,23 @@
                     <div class="field">
                         <label class="label">{{ $t('auth.forms.email') }}</label>
                         <div class="control">
-                            <input id="email" type="email" class="input" v-model="email" disabled readonly />
+                            <input id="email" type="email" class="input" v-model="form.email" disabled readonly />
                         </div>
-                        <p class="help is-danger" v-if="validationErrors.email">{{ validationErrors.email.toString() }}</p>
+                        <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="password" required />
+                            <input id="password" type="password" class="input" v-model="form.password" required />
                         </div>
-                        <p class="help is-danger" v-if="validationErrors.password">{{ validationErrors.password.toString() }}</p>
+                        <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="password_confirmation" required />
+                            <input id="password_confirmation" type="password" class="input" v-model="form.password_confirmation" required />
                         </div>
-                        <p class="help is-danger" v-if="validationErrors.password_confirmation">{{ validationErrors.password_confirmation.toString() }}</p>
+                        <field-error :form="form" field="password_confirmation" />
                     </div>
                     <div class="field is-grouped">
                         <div class="control">
@@ -33,63 +33,55 @@
                             <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>
-                <br />
-                <span class="tag is-danger" v-if="errorMessage">
-                    {{ errorMessage }}
-                </span>
             </div>
         </div>
     </div>
 </template>
 
 <script>
+
+    import Form from './../../../components/Form'
+
     export default {
         data(){
             return {
-                email : '',
-                password : '',
-                password_confirmation : '',
-                token : '',
-                validationErrors: {},
-                errorMessage: ''
+                errorMessage: '',
+                form: new Form({
+                    email : '',
+                    password : '',
+                    password_confirmation : '',
+                    token: ''
+                })
             }
         },
 
         created () {
-            this.email = this.$route.query.email
-            this.token = this.$route.params.token
+            this.form.email = this.$route.query.email
+            this.form.token = this.$route.params.token
         },
 
         methods : {
             handleSubmit(e) {
                 e.preventDefault()
 
-                this.validationErrors = {}
-
-                axios.post('/api/password/reset', {
-                    email: this.email,
-                    password: this.password,
-                    password_confirmation : this.password_confirmation,
-                    token: this.token
-                })
+                this.form.post('/api/password/reset')
                 .then(response => {
 
                     this.$router.go('/');
-
                 })
                 .catch(error => {
-
-                    if( error.response.status == 422 ) {
-                        this.validationErrors = error.response.data.errors
-                    }
-                    else if( error.response.data.resetFailed ) {
+                    if( error.response.data.resetFailed ) {
                         this.errorMessage = error.response.data.resetFailed
                     }
-                    else {
-                        this.$router.push({ name: 'genericError', params: { err: error.response } });
+                    else if( error.response.status !== 422 ) {
+                        this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
                     }
-                    
                 });
             }
         },
diff --git a/resources/js/views/twofaccounts/Create.vue b/resources/js/views/twofaccounts/Create.vue
index 71c81a0c..e4ef7180 100644
--- a/resources/js/views/twofaccounts/Create.vue
+++ b/resources/js/views/twofaccounts/Create.vue
@@ -21,14 +21,14 @@
                     <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="twofaccount.service"  autofocus />
+                            <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="twofaccount.account"  />
+                            <input class="input" type="text" :placeholder="$t('twofaccounts.forms.account.placeholder')" v-model="form.account"  />
                         </div>
                         <field-error :form="form" field="account" />
                     </div>
@@ -37,7 +37,7 @@
                     </div>
                     <div class="field has-addons">
                         <div class="control is-expanded">
-                            <input class="input" type="text" placeholder="otpauth://totp/..." v-model="twofaccount.uri" :disabled="uriIsLocked" />
+                            <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')">
@@ -95,15 +95,8 @@
     export default {
         data() {
             return {
-                twofaccount: {
-                    'service' : '',
-                    'account' : '',
-                    'uri' : '',
-                    'icon' : ''
-                },
                 uriIsLocked: true,
                 tempIcon: '',
-                validationErrors: {},
                 form: new Form({
                     service: '',
                     account: '',
@@ -118,17 +111,14 @@
 
             createAccount() {
                 // set current temp icon as account icon
-                this.twofaccount.icon = this.tempIcon
+                this.form.icon = this.tempIcon
 
-                this.form.post('/api/twofaccounts', this.twofaccount)
+                this.form.post('/api/twofaccounts')
                 .then(response => {
                     this.$router.push({name: 'accounts', params: { InitialEditMode: false }});
                 })
                 .catch(error => {
-                    if( error.response.status == 422 ) {
-                        this.validationErrors = error.response.data.errors
-                    }
-                    else {
+                    if( error.response.status !== 422 ) {
                         this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
                     }
                 });
@@ -137,9 +127,7 @@
 
             cancelCreation: function() {
                 // clean possible uploaded temp icon
-                if( this.tempIcon ) {
-                    this.deleteIcon()
-                }
+                this.deleteIcon()
 
                 this.$router.push({name: 'accounts', params: { InitialEditMode: false }});
             },
@@ -147,19 +135,16 @@
             uploadQrcode(event) {
 
                 let imgdata = new FormData();
-
                 imgdata.append('qrcode', this.$refs.qrcodeInput.files[0]);
 
                 this.form.upload('/api/qrcode/decode', imgdata)
                 .then(response => {
-                    this.twofaccount = response.data;
-                    this.validationErrors['qrcode'] = '';
+                    this.form.service = response.data.service;
+                    this.form.account = response.data.account;
+                    this.form.uri = response.data.uri;
                 })
                 .catch(error => {
-                    if( error.response.status == 422 ) {
-                        this.validationErrors = error.response.data.errors
-                    }
-                    else {
+                    if( error.response.status !== 422 ) {
                         this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
                     }
                 });
@@ -169,24 +154,17 @@
             uploadIcon(event) {
 
                 // clean possible already uploaded temp icon
-                if( this.tempIcon ) {
-                    this.deleteIcon()
-                }
+                this.deleteIcon()
 
                 let imgdata = new FormData();
-
                 imgdata.append('icon', this.$refs.iconInput.files[0]);
 
                 this.form.upload('/api/icon/upload', imgdata)
                 .then(response => {
                     this.tempIcon = response.data;
-                    this.validationErrors['icon'] = '';
                 })
                 .catch(error => {
-                    if( error.response.status == 422 ) {
-                        this.validationErrors = error.response.data.errors
-                    }
-                    else {
+                    if( error.response.status !== 422 ) {
                         this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
                     }
                 });
@@ -199,15 +177,6 @@
                     this.tempIcon = ''
                 }
             },
-
-            clearTwofaccount() {
-                this.twofaccount.service = ''
-                this.twofaccount.account = ''
-                this.twofaccount.uri = ''
-                this.twofaccount.icon = ''
-
-                this.deleteIcon()
-            }
             
         },
 
diff --git a/resources/js/views/twofaccounts/Edit.vue b/resources/js/views/twofaccounts/Edit.vue
index 32878035..74dacc3b 100644
--- a/resources/js/views/twofaccounts/Edit.vue
+++ b/resources/js/views/twofaccounts/Edit.vue
@@ -3,20 +3,20 @@
         <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">
+                <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="twofaccount.service" autofocus />
+                            <input class="input" type="text" :placeholder="$t('twofaccounts.forms.service.placeholder')" v-model="form.service" autofocus />
                         </div>
-                        <p class="help is-danger" v-if="validationErrors.service">{{ validationErrors.service.toString() }}</p>
+                        <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="twofaccount.account" />
+                            <input class="input" type="text" :placeholder="$t('twofaccounts.forms.account.placeholder')" v-model="form.account" />
                         </div>
-                        <p class="help is-danger" v-if="validationErrors.account">{{ validationErrors.account.toString() }}</p>
+                        <field-error :form="form" field="account" />
                     </div>
                     <div class="field">
                         <label class="label">{{ $t('twofaccounts.icon') }}</label>
@@ -36,7 +36,7 @@
                             </span>
                         </div>
                     </div>
-                    <p class="help is-danger help-for-file" v-if="validationErrors.icon">{{ validationErrors.icon.toString() }}</p>
+                    <field-error :form="form" field="icon" class="help-for-file" />
                     <div class="field is-grouped">
                         <div class="control">
                             <button type="submit" class="button is-link">{{ $t('twofaccounts.forms.save') }}</button>
@@ -52,18 +52,21 @@
 </template>
 
 <script>
+
+    import Form from './../../components/Form'
+
     export default {
         data() {
             return {
-                twofaccount: {
-                    'service' : '',
-                    'account' : '',
-                    'uri' : '',
-                    'icon' : ''
-                },
                 twofaccountExists: false,
                 tempIcon: '',
-                validationErrors: {}
+                form: new Form({
+                    service: '',
+                    account: '',
+                    uri: '',
+                    icon: '',
+                    qrcode: null
+                })
             }
         },
 
@@ -76,11 +79,11 @@
 
                 axios.get('/api/twofaccounts/' + this.$route.params.twofaccountId)
                 .then(response => {
-                    this.twofaccount = response.data
+                    this.form.fill(response.data)
                     this.twofaccountExists = true
 
                     // set account icon as temp icon
-                    this.tempIcon = this.twofaccount.icon
+                    this.tempIcon = this.form.icon
                 })
                 .catch(error => {
                     this.$router.push({ name: 'genericError', params: { err: error.response } });
@@ -91,26 +94,23 @@
             updateAccount() {
 
                 // Set new icon and delete old one
-                if( this.tempIcon !== this.twofaccount.icon ) {
+                if( this.tempIcon !== this.form.icon ) {
                     let oldIcon = ''
 
-                    oldIcon = this.twofaccount.icon
+                    oldIcon = this.form.icon
 
-                    this.twofaccount.icon = this.tempIcon
+                    this.form.icon = this.tempIcon
                     this.tempIcon = oldIcon
                     this.deleteIcon()
                 }
 
-                axios.put('/api/twofaccounts/' + this.$route.params.twofaccountId, this.twofaccount)
+                this.form.put('/api/twofaccounts/' + this.$route.params.twofaccountId)
                 .then(response => {
                     this.$router.push({name: 'accounts', params: { InitialEditMode: true }});
                 })
                 .catch(error => {
-                    if( error.response.status == 422 ) {
-                        this.validationErrors = error.response.data.errors
-                    }
-                    else {
-                        this.$router.push({ name: 'genericError', params: { err: error.response } });
+                    if( error.response.status !== 422 ) {
+                        this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
                     }
                 });
 
@@ -129,26 +129,15 @@
                 this.deleteIcon()
 
                 let imgdata = new FormData();
+                imgdata.append('icon', this.$refs.iconInput.files[0]);
 
-                imgdata.append('icon', this.$refs.iconInput.files[0]); 
-
-                let config = {
-                    header : {
-                        'Content-Type' : 'multipart/form-data',
-                    }
-                }
-
-                axios.post('/api/icon/upload', imgdata, config)
+                this.form.upload('/api/icon/upload', imgdata)
                 .then(response => {
                     this.tempIcon = response.data;
-                    this.validationErrors['icon'] = '';
                 })
                 .catch(error => {
-                    if( error.response.status == 422 ) {
-                        this.validationErrors = error.response.data.errors
-                    }
-                    else {
-                        this.$router.push({ name: 'genericError', params: { err: error.response } });
+                    if( error.response.status !== 422 ) {
+                        this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
                     }
                 });
 
@@ -156,7 +145,7 @@
 
             deleteIcon(event) {
 
-                if( this.tempIcon && this.tempIcon !== this.twofaccount.icon ) {
+                if( this.tempIcon && this.tempIcon !== this.form.icon ) {
                     axios.delete('/api/icon/delete/' + this.tempIcon)
                 }