diff --git a/www/webapp/src/components/DonateDirectDebitForm.vue b/www/webapp/src/components/DonateDirectDebitForm.vue
index f704400ec..cee529eb1 100644
--- a/www/webapp/src/components/DonateDirectDebitForm.vue
+++ b/www/webapp/src/components/DonateDirectDebitForm.vue
@@ -75,14 +75,10 @@
               validate-on-blur
       />
 
-      <v-text-field
+      <generic-email
               v-model="email"
-              label="Email Address (optional)"
-              :prepend-icon="mdiEmail"
-              outlined
-              :rules="email_rules"
-              :error-messages="email_errors"
-              validate-on-blur
+              :errorMessages="email_errors"
+              :required="false"
       />
 
       <v-btn
@@ -98,10 +94,10 @@
 
 <script>
   import axios from 'axios';
-  import {email_pattern} from '@/validation';
   import {digestError} from '@/utils';
   import ErrorAlert from '@/components/ErrorAlert.vue';
-  import {mdiAccount, mdiBank, mdiCash100, mdiEmail, mdiMessageTextOutline} from "@mdi/js";
+  import {mdiAccount, mdiBank, mdiCash100, mdiMessageTextOutline} from "@mdi/js";
+  import GenericEmail from "@/components/Field/GenericEmail.vue";
 
   const HTTP = axios.create({
     baseURL: '/api/v1/',
@@ -112,6 +108,7 @@
   export default {
     name: 'DonateDirectDebitForm',
     components: {
+      GenericEmail,
       ErrorAlert,
     },
     data: () => ({
@@ -125,7 +122,6 @@
       mdiBank,
       mdiCash100,
       mdiMessageTextOutline,
-      mdiEmail,
 
       /* from env */
       creditorid: import.meta.env.VITE_APP_DESECSTACK_API_SEPA_CREDITOR_ID,
@@ -154,7 +150,6 @@
 
       /* email field */
       email: '',
-      email_rules: [v => v === '' || !!email_pattern.test(v || '') || 'This is not an email address.'],
       email_errors: [],
 
       /* donation interval (every N months) */
diff --git a/www/webapp/src/components/Field/GenericEmail.vue b/www/webapp/src/components/Field/GenericEmail.vue
new file mode 100644
index 000000000..a80cfd4e8
--- /dev/null
+++ b/www/webapp/src/components/Field/GenericEmail.vue
@@ -0,0 +1,101 @@
+<template>
+  <v-text-field
+      v-bind="computedProps"
+      v-on="$listeners"
+  />
+</template>
+
+<script>
+import {email_pattern} from '@/validation';
+import {mdiEmail, mdiEmailLock} from '@mdi/js';
+import {VTextField} from 'vuetify/lib/components';
+
+export default {
+  name: 'GenericEmail',
+  extends: VTextField,
+  props: {
+    value: {
+      type: String,
+      required: false,
+    },
+    errorMessages: {
+      type: [String, Array],
+      default: () => [],
+    },
+    label: {
+      type: String,
+      required: false,
+    },
+    placeholder: {
+      type: String,
+      required: false,
+    },
+    required: {
+      type: Boolean,
+      default: true,
+    },
+    standalone: {
+      type: Boolean,
+      default: false,
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+    },
+    autofocus: {
+      type: Boolean,
+      required: false,
+    },
+    new: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  computed: {
+    computedProps() {
+      let label = 'Email Address';
+      if(!this.required) {
+        label += ' (optional)';
+      }
+      if(this.new) {
+        label = 'New ' + label;
+      }
+      if(this.standalone) {
+        label = '';
+      }
+      if(this.label) { // Override if custom is set.
+        label = this.label;
+      }
+      const icon = this.readonly ? mdiEmailLock : mdiEmail;
+      const ruleDefs = {
+        required: v => !!v || 'Email is required.',
+        valid: v => (v !== undefined && !!email_pattern.test(v)) || 'We need an valid email address for account recovery and technical support.',
+      };
+      let rules = []
+      if(this.required) {
+        rules.push(ruleDefs.required);
+      }
+      if(this.new) {
+        rules.push(ruleDefs.valid);
+      }
+      return {
+        type: 'email',
+        value: this.value,
+        'error-messages': this.errorMessages,
+        label: label,
+        required: this.required,
+        disabled: this.readonly,
+        autofocus: this.autofocus,
+        placeholder: this.placeholder ?? 'Email Address',
+        prependIcon: this.standalone ? '' : icon,
+        prependInnerIcon: this.standalone ? icon : '',
+        flat: this.standalone,
+        solo: this.standalone,
+        outlined: true,
+        rules: rules,
+        validateOnInput: true,
+      }
+    }
+  },
+};
+</script>
diff --git a/www/webapp/src/components/Field/GenericPassword.vue b/www/webapp/src/components/Field/GenericPassword.vue
new file mode 100644
index 000000000..dfd373ed1
--- /dev/null
+++ b/www/webapp/src/components/Field/GenericPassword.vue
@@ -0,0 +1,91 @@
+<template>
+  <v-text-field
+      v-bind="computedProps"
+      v-on="$listeners"
+      @click:append="toggleHide()"
+  />
+</template>
+
+<script>
+import {mdiEye, mdiEyeOff, mdiKey} from '@mdi/js';
+import {VTextField} from 'vuetify/lib/components';
+
+export default {
+  name: 'GenericPassword',
+  extends: VTextField,
+  props: {
+    errorMessages: {
+      type: [String, Array],
+      default: () => [],
+    },
+    label: {
+      type: String,
+      required: false,
+    },
+    required: {
+      type: Boolean,
+      default: true,
+    },
+    standalone: {
+      type: Boolean,
+      default: false,
+    },
+    new: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      hide_password: true,
+    };
+  },
+  computed: {
+    computedProps() {
+      const icon = mdiKey;
+      const iconToggle = this.hide_password ? mdiEyeOff : mdiEye;
+      let label = 'Password';
+      if(!this.required) {
+        label += ' (Optional)';
+      }
+      if(this.new) {
+        label = 'New ' + label;
+      }
+      if(this.label) { // override with custom label
+        label = this.label;
+      }
+      const ruleDefs = {
+        required: v => !!v || 'Password is required.',
+        min: v => (v !== undefined && v.length >= 8) || 'Min 8 characters',
+      };
+      let rules = []
+      if(this.required) {
+        rules.push(ruleDefs.required)
+      }
+      if(this.new) {
+        rules.push(ruleDefs.min)
+      }
+      return {
+        ...this.$props,
+        type: this.hide_password ? 'password' : 'text',
+        label: label,
+        autocomplete: this.new ? 'new-password' : '',
+        prependIcon: this.standalone ? '' : icon,
+        prependInnerIcon: this.standalone ? icon : '',
+        appendIcon: iconToggle,
+        flat: this.standalone,
+        solo: this.standalone,
+        outlined: true,
+        rules: rules,
+        errorMessages: this.errorMessages,
+        validateOnInput: true,
+      }
+    }
+  },
+  methods: {
+    toggleHide() {
+      this.hide_password = !this.hide_password;
+    }
+  },
+};
+</script>
diff --git a/www/webapp/src/components/ResetPasswordActionHandler.vue b/www/webapp/src/components/ResetPasswordActionHandler.vue
index 0d99830b6..f60d01369 100644
--- a/www/webapp/src/components/ResetPasswordActionHandler.vue
+++ b/www/webapp/src/components/ResetPasswordActionHandler.vue
@@ -1,19 +1,13 @@
 <template>
   <div>
     <div class="text-center" v-if="!success">
-        <v-text-field
-                v-model="payload.new_password"
-                :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
-                label="New password"
-                required
-                :disabled="working"
-                :rules="[rules.required, rules.min]"
-                :type="show ? 'text' : 'password'"
-                hint="At least 8 characters"
-                autocomplete="new-password"
-                @click:append="show = !show"
-                tabindex="1"
-        ></v-text-field>
+        <generic-password
+            v-model="payload.new_password"
+            :autofocus="true"
+            :new="true"
+            :standalone="true"
+            tabindex="1"
+        />
         <v-btn
                 depressed
                 color="primary"
@@ -31,16 +25,11 @@
 
 <script>
   import GenericActionHandler from "./GenericActionHandler.vue"
+  import GenericPassword from "@/components/Field/GenericPassword.vue";
 
   export default {
     name: 'ResetPasswordActionHandler',
+    components: {GenericPassword},
     extends: GenericActionHandler,
-    data: () => ({
-      rules: {
-        required: value => !!value || 'Required.',
-        min: v => (v !== undefined && v.length >= 8) || 'Min 8 characters',
-      },
-      show: false,
-    }),
   };
 </script>
diff --git a/www/webapp/src/views/ChangeEmail.vue b/www/webapp/src/views/ChangeEmail.vue
index b36addecb..2ca3da13c 100644
--- a/www/webapp/src/views/ChangeEmail.vue
+++ b/www/webapp/src/views/ChangeEmail.vue
@@ -35,40 +35,21 @@
                                 </p>
                             </v-alert>
 
-                            <v-text-field
-                                    v-model="email"
-                                    label="Current Email"
-                                    prepend-icon="mdi-blank"
-                                    outlined
-                                    required
-                                    :disabled="true"
-                                    validate-on-blur
+                            <generic-email
+                                v-model="email"
+                                label="Current Email Address"
+                                :readonly="true"
                             />
-                            <v-text-field
-                                    v-model="password"
-                                    :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
-                                    prepend-icon="mdi-blank"
-                                    outlined
-                                    label="Password"
-                                    required
-                                    :rules="[rules.required]"
-                                    :type="show ? 'text' : 'password'"
-                                    :error-messages="password_errors"
-                                    @change="password_errors=[]"
-                                    @click:append="show = !show"
-                                    ref="password"
-                                    tabindex="1"
-                            ></v-text-field>
-                            <v-text-field
+
+                            <generic-password
+                                v-model="password"
+                                ref="password"
+                                tabindex="1"
+                            />
+
+                            <generic-email
                                     v-model="new_email"
-                                    label="New Email"
-                                    prepend-icon="mdi-email"
-                                    outlined
-                                    required
-                                    :rules="[rules.required, rules.email]"
-                                    :error-messages="email_errors"
-                                    @change="email_errors=[]"
-                                    validate-on-blur
+                                    :new="true"
                                     tabindex="2"
                             />
                         </v-card-text>
@@ -91,13 +72,15 @@
 
 <script>
   import { HTTP, withWorking ,digestError} from '@/utils';
-  import {email_pattern} from '@/validation';
-  
   import ErrorAlert from "@/components/ErrorAlert.vue";
+  import GenericEmail from "@/components/Field/GenericEmail.vue";
+  import GenericPassword from "@/components/Field/GenericPassword.vue";
 
   export default {
     name: 'ChangeEmail',
     components: {
+      GenericEmail,
+      GenericPassword,
       ErrorAlert,
     },
     data: () => ({
@@ -108,13 +91,11 @@
       email: '',
       rules: {
         required: v => !!v || 'Required.',
-        email: v => !!email_pattern.test(v) || 'Not a valid email address.'
       },
       show: false,
 
       /* password field */
       password: '',
-      password_errors: [],
 
       /* email field */
       new_email: '',
diff --git a/www/webapp/src/views/DeleteAccount.vue b/www/webapp/src/views/DeleteAccount.vue
index 3e2fca065..73265ca40 100644
--- a/www/webapp/src/views/DeleteAccount.vue
+++ b/www/webapp/src/views/DeleteAccount.vue
@@ -33,30 +33,18 @@
                                 </p>
                             </v-alert>
 
-                            <v-text-field
+                            <generic-email
                                     v-model="email"
-                                    label="Current Email"
-                                    prepend-icon="mdi-blank"
-                                    outlined
-                                    required
-                                    :disabled="true"
-                                    validate-on-blur
+                                    label="Current Email Address"
+                                    :readonly="true"
+                            />
+
+                            <generic-password
+                                v-model="password"
+                                :autofocus="true"
+                                ref="password"
+                                tabindex="1"
                             />
-                            <v-text-field
-                                    v-model="password"
-                                    :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
-                                    prepend-icon="mdi-blank"
-                                    outlined
-                                    label="Password"
-                                    required
-                                    :rules="[rules.required]"
-                                    :type="show ? 'text' : 'password'"
-                                    :error-messages="password_errors"
-                                    @change="password_errors=[]"
-                                    @click:append="show = !show"
-                                    ref="password"
-                                    tabindex="1"
-                            ></v-text-field>
                         </v-card-text>
                         <v-card-actions class="justify-center">
                             <v-btn
@@ -78,28 +66,22 @@
 <script>
   import { HTTP, withWorking, digestError } from '@/utils';
   import ErrorAlert from "@/components/ErrorAlert.vue";
+  import GenericEmail from "@/components/Field/GenericEmail.vue";
+  import GenericPassword from "@/components/Field/GenericPassword.vue";
 
   export default {
     name: 'DeleteAccount',
-    components: {ErrorAlert},
+    components: {GenericEmail, GenericPassword, ErrorAlert},
     data: () => ({
       valid: false,
       working: false,
       done: false,
       errors: [],
       email: '',
-      rules: {
-        required: v => !!v || 'Required.',
-      },
-      show: false,
 
       /* password field */
       password: '',
-      password_errors: [],
     }),
-    mounted() {
-      this.initialFocus();
-    },
     async created() {
       const self = this;
       await withWorking(this.error, () => HTTP
@@ -108,9 +90,6 @@
       );
     },
     methods: {
-      initialFocus() {
-        return this.$refs.password.focus();
-      },
       async deleteAccount() {
         if (!this.$refs.form.validate()) {
           return;
diff --git a/www/webapp/src/views/HomePage.vue b/www/webapp/src/views/HomePage.vue
index 6e96dacb9..7adf94f33 100644
--- a/www/webapp/src/views/HomePage.vue
+++ b/www/webapp/src/views/HomePage.vue
@@ -31,17 +31,11 @@
                       <v-radio class="pb-2" label="dynDNS account" value="dynDNS"></v-radio>
                     </v-radio-group>
                   </div>
-                  <v-text-field
-                    outlined
-                    solo
-                    flat
-                    v-model="email"
-                    :prepend-inner-icon="mdiEmail"
-                    type="email"
-                    placeholder="Account Email Address"
-                    :rules="email_rules"
-                    validate-on-blur
-                    ></v-text-field>
+                  <generic-email
+                      v-model="email"
+                      :standalone="true"
+                      :new="true"
+                  />
                   <v-btn
                     color="primary"
                     type="submit"
@@ -224,10 +218,12 @@ import {
     mdiRobot, mdiRunFast,
     mdiTwoFactorAuthentication
 } from "@mdi/js";
+import GenericEmail from "@/components/Field/GenericEmail.vue";
 
 export default {
   name: 'HomePage',
   components: {
+    GenericEmail
   },
   methods: {
     async signup() {
diff --git a/www/webapp/src/views/LoginPage.vue b/www/webapp/src/views/LoginPage.vue
index c420c426d..996209472 100644
--- a/www/webapp/src/views/LoginPage.vue
+++ b/www/webapp/src/views/LoginPage.vue
@@ -27,26 +27,14 @@
             </v-toolbar>
             <v-card-text>
               <error-alert :errors="errors"></error-alert>
-              <v-text-field
-                v-model="email"
-                label="Email"
-                outlined
-                required
-                :rules="email_rules"
-                :error-messages="email_errors"
-                tabindex="1"
-                @change="email_errors=[]"
+              <generic-email
+                  v-model="email"
+                  :autofocus="true"
+                  tabindex="1"
               />
-              <v-text-field
+              <generic-password
                 v-model="password"
-                label="Password"
-                :append-icon="hide_password ? 'mdi-eye' : 'mdi-eye-off'"
-                :type="hide_password ? 'password' : 'text'"
-                outlined
-                required
-                :rules="password_rules"
                 tabindex="2"
-                @click:append="() => (hide_password = !hide_password)"
               />
               <v-layout class="justify-center">
                 <v-checkbox
@@ -89,26 +77,28 @@
 import { HTTP, digestError } from '@/utils';
 import ErrorAlert from "@/components/ErrorAlert.vue";
 import {useUserStore} from "@/store/user";
+import GenericEmail from "@/components/Field/GenericEmail.vue";
+import GenericPassword from "@/components/Field/GenericPassword.vue";
 
 export default {
   name: 'LoginPage',
   components: {
+    GenericEmail,
+    GenericPassword,
     ErrorAlert,
   },
   data: () => ({
     user: useUserStore(),
     valid: false,
     working: false,
-    email: '',
-    password: '',
     terms: false,
     useSessionStorage: false,
-    email_rules: [v => !!v || 'Please enter the email address associated with your account'],
+
+    email: '',
     email_errors: [],
-    password_rules: [
-      v => !!v || 'Enter your password to log in',
-    ],
-    hide_password: true,
+
+    password: '',
+
     errors: [],
   }),
   methods: {
diff --git a/www/webapp/src/views/ResetPassword.vue b/www/webapp/src/views/ResetPassword.vue
index 4052eb5b6..e1f737851 100644
--- a/www/webapp/src/views/ResetPassword.vue
+++ b/www/webapp/src/views/ResetPassword.vue
@@ -39,18 +39,10 @@
                                 </p>
                             </v-alert>
 
-                            <v-text-field
-                                    v-model="email"
-                                    label="Email"
-                                    prepend-icon="mdi-email"
-                                    outlined
-                                    required
-                                    :rules="email_rules"
-                                    :error-messages="email_errors"
-                                    @change="email_errors=[]"
-                                    validate-on-blur
-                                    ref="emailField"
-                                    tabindex="1"
+                            <generic-email
+                                v-model="email"
+                                :autofocus="true"
+                                tabindex="1"
                             />
 
                               <v-container class="pa-0">
@@ -119,9 +111,10 @@
 
 <script>
   import axios from 'axios';
-  import {email_pattern} from '@/validation';
   import {digestError} from '@/utils';
   import ErrorAlert from '@/components/ErrorAlert.vue';
+  import GenericEmail from "@/components/Field/GenericEmail.vue";
+  import {useUserStore} from "@/store/user";
 
   const HTTP = axios.create({
     baseURL: '/api/v1/',
@@ -131,9 +124,12 @@
   export default {
     name: 'ResetPassword',
     components: {
+      GenericEmail,
       ErrorAlert,
     },
     data: () => ({
+      user: useUserStore(),
+
       valid: false,
       working: false,
       done: false,
@@ -143,7 +139,6 @@
 
       /* email field */
       email: '',
-      email_rules: [v => !!email_pattern.test(v || '') || 'We need an email address for account recovery and technical support.'],
       email_errors: [],
 
       /* captcha field */
@@ -157,7 +152,6 @@
         this.email = this.$route.params.email;
       }
       this.getCaptcha();
-      this.initialFocus();
     },
     methods: {
       async getCaptcha(focus = false) {
@@ -172,9 +166,6 @@
           this.captchaWorking = false;
         }
       },
-      async initialFocus() {
-        return this.$refs.emailField.focus();
-      },
       async resetPassword() {
         if (!this.$refs.form.validate()) {
           return;
diff --git a/www/webapp/src/views/SignUp.vue b/www/webapp/src/views/SignUp.vue
index 6813b78f2..87086f9bb 100644
--- a/www/webapp/src/views/SignUp.vue
+++ b/www/webapp/src/views/SignUp.vue
@@ -29,18 +29,11 @@
             <v-card-text>
               <error-alert :errors="errors"></error-alert>
 
-              <v-text-field
-                      v-model="email"
-                      label="Email"
-                      prepend-icon="mdi-email"
-                      outlined
-                      required
-                      :rules="email_rules"
-                      :error-messages="email_errors"
-                      @change="email_errors=[]"
-                      validate-on-blur
-                      ref="emailField"
-                      tabindex="1"
+              <generic-email
+                  v-model="email"
+                  :new="true"
+                  tabindex="1"
+                  ref="emailField"
               />
 
               <v-radio-group
@@ -174,9 +167,10 @@
 
 <script>
   import axios from 'axios';
-  import {domain_pattern, email_pattern} from '@/validation';
+  import {domain_pattern} from '@/validation';
   import {digestError} from '@/utils';
   import ErrorAlert from "@/components/ErrorAlert.vue";
+  import GenericEmail from "@/components/Field/GenericEmail.vue";
 
   const LOCAL_PUBLIC_SUFFIXES = import.meta.env.VITE_APP_LOCAL_PUBLIC_SUFFIXES.split(' ');
 
@@ -189,6 +183,7 @@
   export default {
     name: 'SignUp',
     components: {
+      GenericEmail,
       ErrorAlert,
     },
     data: () => ({
@@ -201,7 +196,6 @@
 
       /* email field */
       email: '',
-      email_rules: [v => !!email_pattern.test(v || '') || 'We need an email address for account recovery and technical support.'],
       email_errors: [],
 
       /* captcha field */