From 0afb906c2d3f0bcfb93ee0f714d22fe17103852c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Mon, 6 May 2019 17:02:12 +0200
Subject: [PATCH] FormDialog abstract component

---
 frontend/src/components/forms/FormDialog.vue |  66 +++++++++++
 frontend/src/components/forms/Login.vue      | 116 +++++++------------
 frontend/src/components/forms/Register.vue   | 112 +++++++-----------
 3 files changed, 146 insertions(+), 148 deletions(-)
 create mode 100644 frontend/src/components/forms/FormDialog.vue

diff --git a/frontend/src/components/forms/FormDialog.vue b/frontend/src/components/forms/FormDialog.vue
new file mode 100644
index 0000000..0fb48ba
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/forms/Login.vue b/frontend/src/components/forms/Login.vue
index b33981d..29cb343 100644
--- a/frontend/src/components/forms/Login.vue
+++ b/frontend/src/components/forms/Login.vue
@@ -1,66 +1,43 @@
 <template>
-  <v-dialog v-model="dialog">
-    <v-btn slot="activator">
-      Login
-    </v-btn>
+  <FormDialog buttonText="Login">
+    <v-card-title class="headline">
+      Log In
+    </v-card-title>
 
-    <v-card>
-      <v-form
-        ref="form"
-        v-model="valid"
-        @submit.prevent="validate"
-        lazy-validation
-      >
-        <v-card-title class="headline">
-          Log In
-        </v-card-title>
+    <v-card-text>
+      <v-text-field
+        ref="autofocus"
+        v-model="login"
+        :rules="loginRules"
+        label="User name"
+        required
+      ></v-text-field>
 
-        <v-card-text>
-          <v-text-field
-            ref="autofocus"
-            v-model="login"
-            :rules="loginRules"
-            label="User name"
-            required
-          ></v-text-field>
-
-          <v-text-field
-            v-model="password"
-            :append-icon="showPassword ? 'visibility' : 'visibility_off'"
-            @click:append="showPassword = !showPassword"
-            :rules="passwordRules"
-            :type="showPassword ? 'text' : 'password'"
-            label="Password"
-            required
-            counter
-          ></v-text-field>
-        </v-card-text>
-
-        <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>
+      <v-text-field
+        v-model="password"
+        :append-icon="showPassword ? 'visibility' : 'visibility_off'"
+        @click:append="showPassword = !showPassword"
+        :rules="passwordRules"
+        :type="showPassword ? 'text' : 'password'"
+        label="Password"
+        required
+        counter
+      ></v-text-field>
+    </v-card-text>
+  </FormDialog>
 </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,27 +47,16 @@ export default {
   }),
 
   methods: {
-    validate() {
-      if (this.$refs.form.validate()) {
-        window.pkgs.axios
-          .post('/user/login', {
-            login: this.login,
-            password: this.password
-          })
-          .then(response => {
-            // this.$refs.form.reset()
-            console.log('login', response.data)
-            console.log('cookie', document.cookie)
-          })
-      }
-    }
-  },
-
-  watch: {
-    dialog(val) {
-      if (val)
-        requestAnimationFrame(() => {
-          this.$refs.autofocus.focus()
+    confirm() {
+      window.pkgs.axios
+        .post('/user/login', {
+          login: this.login,
+          password: this.password
+        })
+        .then(response => {
+          // this.$refs.form.reset()
+          console.log('login', response.data)
+          console.log('cookie', document.cookie)
         })
     }
   }
diff --git a/frontend/src/components/forms/Register.vue b/frontend/src/components/forms/Register.vue
index fd68d1f..71c7525 100644
--- a/frontend/src/components/forms/Register.vue
+++ b/frontend/src/components/forms/Register.vue
@@ -1,66 +1,43 @@
 <template>
-  <v-dialog v-model="dialog">
-    <v-btn slot="activator">
+  <FormDialog buttonText="Register">
+    <v-card-title class="headline">
       Register
-    </v-btn>
+    </v-card-title>
 
-    <v-card>
-      <v-form
-        ref="form"
-        v-model="valid"
-        @submit.prevent="validate"
-        lazy-validation
-      >
-        <v-card-title class="headline">
-          Register
-        </v-card-title>
+    <v-card-text>
+      <v-text-field
+        ref="autofocus"
+        v-model="login"
+        :rules="loginRules"
+        label="User name"
+        required
+      ></v-text-field>
 
-        <v-card-text>
-          <v-text-field
-            ref="autofocus"
-            v-model="login"
-            :rules="loginRules"
-            label="User name"
-            required
-          ></v-text-field>
-
-          <v-text-field
-            v-model="password"
-            :append-icon="showPassword ? 'visibility' : 'visibility_off'"
-            @click:append="showPassword = !showPassword"
-            :rules="passwordRules"
-            :type="showPassword ? 'text' : 'password'"
-            label="Password"
-            required
-            counter
-          ></v-text-field>
-        </v-card-text>
-
-        <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>
+      <v-text-field
+        v-model="password"
+        :append-icon="showPassword ? 'visibility' : 'visibility_off'"
+        @click:append="showPassword = !showPassword"
+        :rules="passwordRules"
+        :type="showPassword ? 'text' : 'password'"
+        label="Password"
+        required
+        counter
+      ></v-text-field>
+    </v-card-text>
+  </FormDialog>
 </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,26 +47,15 @@ export default {
   }),
 
   methods: {
-    validate() {
-      if (this.$refs.form.validate()) {
-        window.pkgs.axios
-          .post('/user/register', {
-            login: this.login,
-            password: this.password
-          })
-          .then(response => {
-            // this.$refs.form.reset()
-            console.log('register', response.data)
-          })
-      }
-    }
-  },
-
-  watch: {
-    dialog(val) {
-      if (val)
-        requestAnimationFrame(() => {
-          this.$refs.autofocus.focus()
+    confirm() {
+      window.pkgs.axios
+        .post('/user/register', {
+          login: this.login,
+          password: this.password
+        })
+        .then(response => {
+          // this.$refs.form.reset()
+          console.log('register', response.data)
         })
     }
   }