catalog editor: add validation and exit dialog

cateditor/src/components/CatalogInfo.vue

@@ -20,13 +20,25 @@
             label="Region"></v-select>
         </v-flex>
         <v-flex d-flex grow>
-          <v-text-field v-model="name" label="Catalog name" required></v-text-field>
+          <v-text-field
+            v-model="name"
+            label="Catalog name"
+            :rules="[rules.required]"
+          ></v-text-field>
+        </v-flex>
+
+        <v-flex d-flex shrink>
+          <v-text-field
+            v-model="email"
+            :rules="[rules.emailRules]"
+            label="Email"
+          ></v-text-field>
         </v-flex>
       </v-layout>
 
       <v-layout row>
         <!-- TODO only if admin! -->
-        <v-flex d-flex shrink>
+        <v-flex d-flex shrink v-if="isAdmin">
           <v-checkbox v-model="master" label="Region master"></v-checkbox>
         </v-flex>
         <v-flex d-flex shrink>
@@ -40,8 +52,6 @@
         </v-flex>
       </v-layout>
 
-      <!-- TODO: email selects -->
-
     </v-layout>
   </v-container>
 </template>
@@ -49,11 +59,30 @@
 <script>
 var seasons = JSON.parse(document.getElementById('seasons').textContent)
 var regions = JSON.parse(document.getElementById('regions').textContent)
+var lazyUser = JSON.parse(document.getElementById('lazyUser').textContent)
 
 export default {
   data: () => ({
     seasons: seasons,
     regions: regions,
+    isAdmin: true, // TODO
+    rules: {
+      required: value => {
+        return !!value || 'Required'
+      },
+      emailRules: value => {
+        if (!lazyUser) {
+          // signed-up user doesn't need email
+          return true
+        }
+        if (!value) {
+          return 'Required'
+        } else {
+          const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+          return pattern.test(value) || 'Invalid email'
+        }
+      },
+    },
   }),
   computed: {
     name: {
@@ -65,6 +94,15 @@ export default {
       }
     },
 
+    email: {
+      get() {
+        return this.$store.getters.catalogProperty('email')
+      },
+      set(email) {
+        this.$store.dispatch('setCatalogProperty', { key: 'email', value: email })
+      }
+    },
+
     season: {
       get() {
         return this.$store.getters.catalogProperty('season')