feat(webapp): create generic email field

desec-io · Aug 31, 2023 · 4cebf71 · 4cebf71
1 parent bee8909
commit 4cebf71
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 94 deletions.
diff --git 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
@@ -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/views/ChangeEmail.vue b/www/webapp/src/views/ChangeEmail.vue
@@ -35,14 +35,10 @@
                                 </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"
@@ -59,16 +55,9 @@
                                     ref="password"
                                     tabindex="1"
                             ></v-text-field>
-                            <v-text-field
+                            <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 +80,13 @@
 
 <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";
 
   export default {
     name: 'ChangeEmail',
     components: {
+      GenericEmail,
       ErrorAlert,
     },
     data: () => ({
@@ -108,7 +97,6 @@
       email: '',
       rules: {
         required: v => !!v || 'Required.',
-        email: v => !!email_pattern.test(v) || 'Not a valid email address.'
       },
       show: false,
 

diff --git a/www/webapp/src/views/DeleteAccount.vue b/www/webapp/src/views/DeleteAccount.vue
@@ -33,14 +33,10 @@
                                 </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"
                             />
                             <v-text-field
                                     v-model="password"
@@ -78,10 +74,11 @@
 <script>
   import { HTTP, withWorking, digestError } from '@/utils';
   import ErrorAlert from "@/components/ErrorAlert.vue";
+  import GenericEmail from "@/components/Field/GenericEmail.vue";
 
   export default {
     name: 'DeleteAccount',
-    components: {ErrorAlert},
+    components: {GenericEmail, ErrorAlert},
     data: () => ({
       valid: false,
       working: false,

diff --git 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
@@ -27,15 +27,10 @@
             </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
                 v-model="password"
@@ -89,22 +84,25 @@
 import { HTTP, digestError } from '@/utils';
 import ErrorAlert from "@/components/ErrorAlert.vue";
 import {useUserStore} from "@/store/user";
+import GenericEmail from "@/components/Field/GenericEmail.vue";
 
 export default {
   name: 'LoginPage',
   components: {
+    GenericEmail,
     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: '',
     password_rules: [
       v => !!v || 'Enter your password to log in',
     ],