Add login form

frontend/components/organisms/LoginForm.vue

@@ -0,0 +1,85 @@
+<template>
+  <v-card class="elevation-12">
+    <v-toolbar color="primary" dark flat>
+      <v-toolbar-title>Login</v-toolbar-title>
+    </v-toolbar>
+    <v-card-text>
+      <v-form
+        ref="form"
+        v-model="valid"
+      >
+        <v-text-field
+          v-model="username"
+          :rules="userNameRules"
+          label="Login"
+          name="login"
+          prepend-icon="person"
+          type="text"
+        />
+        <v-text-field
+          id="password"
+          v-model="password"
+          :rules="passwordRules"
+          label="Password"
+          name="password"
+          prepend-icon="lock"
+          type="password"
+        />
+      </v-form>
+    </v-card-text>
+    <v-card-actions>
+      <div class="flex-grow-1" />
+      <v-btn
+        :disabled="!valid"
+        color="primary"
+        @click="tryLogin"
+      >
+        Login
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import { userNameRules, passwordRules } from '@/rules/index'
+
+export default {
+  props: {
+    login: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      valid: false,
+      username: '',
+      password: '',
+      userNameRules,
+      passwordRules
+    }
+  },
+
+  methods: {
+    cancel() {
+      this.$emit('close')
+    },
+    validate() {
+      return this.$refs.form.validate()
+    },
+    reset() {
+      this.$refs.form.reset()
+    },
+    tryLogin() {
+      if (this.validate()) {
+        this.login({
+          username: this.username,
+          password: this.password
+        })
+        this.reset()
+        this.cancel()
+      }
+    }
+  }
+}
+</script>

frontend/pages/auth.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-app id="inspire">
+    <v-content>
+      <v-container class="fill-height" fluid>
+        <v-row align="center" justify="center">
+          <v-col cols="12" sm="8" md="4">
+            <login-form />
+            <!--
+            <v-card class="elevation-12">
+              <v-toolbar color="primary" dark flat>
+                <v-toolbar-title>Login form</v-toolbar-title>
+              </v-toolbar>
+              <v-card-text>
+                <v-form>
+                  <v-text-field
+                    label="Login"
+                    name="login"
+                    prepend-icon="person"
+                    type="text"
+                  />
+                  <v-text-field
+                    id="password"
+                    label="Password"
+                    name="password"
+                    prepend-icon="lock"
+                    type="password"
+                  />
+                </v-form>
+              </v-card-text>
+              <v-card-actions>
+                <div class="flex-grow-1" />
+                <v-btn color="primary">
+                  Login
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+            -->
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-content>
+  </v-app>
+</template>
+
+<script>
+import LoginForm from '@/components/organisms/LoginForm'
+
+export default {
+  components: {
+    LoginForm
+  }
+}
+</script>

frontend/rules/index.js

@@ -10,7 +10,8 @@ export const labelNameRules = [
 
 // Rules for project member.
 export const userNameRules = [
-  v => !!v || 'User is required'
+  v => !!v || 'User name is required',
+  v => (v && v.length <= 30) || 'User name must be less than 30 characters'
 ]
 
 export const roleRules = [
@@ -41,3 +42,9 @@ export const uploadFileRules = [
   v => !!v || 'File is required',
   v => !v || v.size < 1000000 || 'File size should be less than 1 MB!'
 ]
+
+// Rules for user.
+export const passwordRules = [
+  v => !!v || 'Password is required',
+  v => (v && v.length <= 30) || 'Password must be less than 30 characters'
+]