FormDialog abstract component

frontend/src/components/forms/FormDialog.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-dialog v-model="dialog">
+    <v-btn slot="activator">
+      {{ buttonText }}
+    </v-btn>
+
+    <v-card>
+      <v-form
+        ref="form"
+        v-model="valid"
+        @submit.prevent="validate"
+        lazy-validation
+      >
+        <slot></slot>
+
+        <v-divider></v-divider>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+
+          <v-btn color="success" type="submit" :disabled="!valid">
+            {{ buttonText }}
+          </v-btn>
+
+          <v-btn color="error" @click="dialog = false">
+            Cancel
+          </v-btn>
+        </v-card-actions>
+      </v-form>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  name: 'FormDialog',
+  data: () => ({
+    dialog: false,
+    valid: true
+  }),
+
+  props: {
+    buttonText: String
+  },
+
+  methods: {
+    validate() {
+      if (this.$refs.form.validate()) {
+        this.$parent.confirm()
+      }
+    }
+  },
+
+  watch: {
+    dialog(val) {
+      if (val) {
+        requestAnimationFrame(() => {
+          this.$parent.$refs.autofocus.focus()
+        })
+      } else {
+        this.$refs.form.resetValidation()
+      }
+    }
+  }
+}
+</script>

frontend/src/components/forms/Login.vue

@@ -1,16 +1,5 @@
 <template>
-  <v-dialog v-model="dialog">
+  <FormDialog buttonText="Login">
-    <v-btn slot="activator">
-      Login
-    </v-btn>
-
-    <v-card>
-      <v-form
-        ref="form"
-        v-model="valid"
-        @submit.prevent="validate"
-        lazy-validation
-      >
     <v-card-title class="headline">
       Log In
     </v-card-title>
@@ -35,32 +24,20 @@
         counter
       ></v-text-field>
     </v-card-text>
-
+  </FormDialog>
-        <v-divider></v-divider>
-
-        <v-card-actions>
-          <v-spacer></v-spacer>
-
-          <v-btn color="success" type="submit" :disabled="!valid">
-            Login
-          </v-btn>
-
-          <v-btn color="error" @click="dialog = false">
-            Cancel
-          </v-btn>
-        </v-card-actions>
-      </v-form>
-    </v-card>
-  </v-dialog>
 </template>
 
 <script>
+import FormDialog from './FormDialog.vue'
+
 export default {
   name: 'LoginForm',
-  data: () => ({
-    dialog: false,
-    valid: true,
 
+  components: {
+    FormDialog
+  },
+
+  data: () => ({
     login: '',
     loginRules: [v => !!v || 'User name is required'],
 
@@ -70,8 +47,7 @@ export default {
   }),
 
   methods: {
-    validate() {
+    confirm() {
-      if (this.$refs.form.validate()) {
       window.pkgs.axios
         .post('/user/login', {
           login: this.login,
@@ -84,15 +60,5 @@ export default {
         })
     }
   }
-  },
-
-  watch: {
-    dialog(val) {
-      if (val)
-        requestAnimationFrame(() => {
-          this.$refs.autofocus.focus()
-        })
-    }
-  }
 }
 </script>

frontend/src/components/forms/Register.vue

@@ -1,16 +1,5 @@
 <template>
-  <v-dialog v-model="dialog">
+  <FormDialog buttonText="Register">
-    <v-btn slot="activator">
-      Register
-    </v-btn>
-
-    <v-card>
-      <v-form
-        ref="form"
-        v-model="valid"
-        @submit.prevent="validate"
-        lazy-validation
-      >
     <v-card-title class="headline">
       Register
     </v-card-title>
@@ -35,32 +24,20 @@
         counter
       ></v-text-field>
     </v-card-text>
-
+  </FormDialog>
-        <v-divider></v-divider>
-
-        <v-card-actions>
-          <v-spacer></v-spacer>
-
-          <v-btn color="success" type="submit" :disabled="!valid">
-            Register
-          </v-btn>
-
-          <v-btn color="error" @click="dialog = false">
-            Cancel
-          </v-btn>
-        </v-card-actions>
-      </v-form>
-    </v-card>
-  </v-dialog>
 </template>
 
 <script>
+import FormDialog from './FormDialog.vue'
+
 export default {
   name: 'RegisterForm',
-  data: () => ({
-    dialog: false,
-    valid: true,
 
+  components: {
+    FormDialog
+  },
+
+  data: () => ({
     login: '',
     loginRules: [v => !!v || 'User name is required'],
 
@@ -70,8 +47,7 @@ export default {
   }),
 
   methods: {
-    validate() {
+    confirm() {
-      if (this.$refs.form.validate()) {
       window.pkgs.axios
         .post('/user/register', {
           login: this.login,
@@ -83,15 +59,5 @@ export default {
         })
     }
   }
-  },
-
-  watch: {
-    dialog(val) {
-      if (val)
-        requestAnimationFrame(() => {
-          this.$refs.autofocus.focus()
-        })
-    }
-  }
 }
 </script>