Simple Register/Login Forms

frontend/package.json

@@ -22,6 +22,7 @@
     "@vue/cli-service": "^3.4.0",
     "@vue/eslint-config-prettier": "^4.0.1",
     "@vue/test-utils": "^1.0.0-beta.20",
+    "axios": "^0.18.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",

frontend/src/components/forms/Login.vue

@@ -1,35 +1,98 @@
 <template>
-  <v-dialog v-model="dialog" width="500">
+  <v-dialog v-model="dialog">
-    <v-btn slot="activator" color="red lighten-2" dark>
+    <v-btn slot="activator">
       Login
     </v-btn>
 
     <v-card>
-      <v-card-title class="headline grey lighten-2" primary-title>
+      <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>
-        Some form
+          <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="primary" flat @click="dialog = false">
+
+          <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>
 export default {
-  name: "LoginForm"
+  name: 'LoginForm',
+  data: () => ({
+    dialog: false,
+    valid: true,
+
+    login: '',
+    loginRules: [v => !!v || 'User name is required'],
+
+    password: '',
+    showPassword: false,
+    passwordRules: [v => !!v || 'Password is required']
+  }),
+
+  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()
+        })
+    }
+  }
 }
 </script>
-
-<style lang="css" scoped>
-</style>

frontend/src/components/forms/Register.vue

@@ -0,0 +1,97 @@
+<template>
+  <v-dialog v-model="dialog">
+    <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>
+
+        <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>
+</template>
+
+<script>
+export default {
+  name: 'RegisterForm',
+  data: () => ({
+    dialog: false,
+    valid: true,
+
+    login: '',
+    loginRules: [v => !!v || 'User name is required'],
+
+    password: '',
+    showPassword: false,
+    passwordRules: [v => !!v || 'Password is required']
+  }),
+
+  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()
+        })
+    }
+  }
+}
+</script>

frontend/src/main.js

@@ -5,6 +5,14 @@ import router from './router'
 import 'roboto-fontface/css/roboto/roboto-fontface.css'
 import 'material-design-icons-iconfont/dist/material-design-icons.css'
 
+import axios from 'axios'
+axios.defaults.baseURL =
+  window.location.protocol + '//' + window.location.hostname + ':3001'
+
+window.pkgs = {
+  axios: axios
+}
+
 Vue.config.productionTip = false
 
 new Vue({

frontend/src/views/Home.vue

@@ -10,12 +10,13 @@
     </v-flex>
 
     <LoginForm />
-
+    <RegisterForm />
   </v-container>
 </template>
 
 <script>
 import LoginForm from '@/components/forms/Login.vue'
+import RegisterForm from '@/components/forms/Register.vue'
 
 export default {
   name: 'Home',
@@ -25,7 +26,8 @@ export default {
     }
   },
   components: {
-    LoginForm
+    LoginForm,
+    RegisterForm
   }
 }
 </script>

frontend/yarn.lock

@@ -1542,6 +1542,14 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
+axios@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
+  integrity sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=
+  dependencies:
+    follow-redirects "^1.3.0"
+    is-buffer "^1.1.5"
+
 babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -4144,7 +4152,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.3.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
   integrity sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==