Added login interface #5

frontend/public/index.html

@@ -5,7 +5,7 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
- <title>crm-front</title>
+ <title>WatchIn</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
  </head>

frontend/src/App.vue

@@ -16,22 +16,20 @@
  </v-toolbar>
 
  <v-content>
- <HelloWorld/>
+ <router-view/>
  </v-content>
  </v-app>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld'
-
 export default {
  name: 'App',
- components: {
- HelloWorld
- },
- data () {
- return {
- //
+ mounted(){
+ if(this.$store.state.users.user){
+  console.log("user here")
+  }
+ else{
+ this.$router.push('/login')
  }
  }
 }

frontend/src/components/UserManagement/Login.js

@@ -0,0 +1,21 @@
+export default{
+ data(){
+ return {
+ user:{
+ email:'',
+ password:''
+ }
+ }
+ },
+ methods:{
+ loginUser(){
+ if(this.$validator.validateAll()){
+ this.$validator.validate().then( result => {
+ if (result){
+ console.log("valid!")
+ }
+ })
+ }
+ }
+ }
+}

frontend/src/components/UserManagement/Login.vue

@@ -0,0 +1,38 @@
+<template>
+ <v-container>
+ <v-layout justify-center>
+ <v-flex md6>
+ <h1>Login</h1><hr>
+ <v-flex xs12>
+ <v-text-field
+ v-model="user.email"
+ name="username"
+ v-validate="'required'"
+ :error-messages="errors.collect('username')"
+ :label="email"
+ :data-vv-as="email"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs12>
+ <v-text-field
+ v-model="user.password"
+ name="password"
+ v-validate="'required|min:8'"
+ :error-messages="errors.collect('password')"
+ :label="password"
+ type="password"
+ ></v-text-field>
+ </v-flex>
+ <v-flex xs12>
+ <v-btn
+ color="primary"
+ @click="loginUser"
+ >
+ LogIn
+ </v-btn>
+ </v-flex>
+ </v-flex>
+ </v-layout>
+ </v-container>
+</template>
+<script src="./Login.js"></script>

frontend/src/router.js

@@ -1,25 +1,17 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from './views/Home.vue'
+import Login from './components/UserManagement/Login.vue'
 
 Vue.use(Router)
 
 export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
- {
- path: '/',
- name: 'home',
- component: Home
- },
- {
- path: '/about',
- name: 'about',
- // route level code-splitting
- // this generates a separate chunk (about.[hash].js) for this route
- // which is lazy-loaded when the route is visited.
- component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
+ { 
+ path:'/login', 
+ name:'login',
+ component: Login 
  }
  ]
 })

frontend/src/store.js

@@ -1,9 +1,13 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import users from './store/users.js'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
+ modules: {
+ users: users
+ },
  state: {
 
  },

frontend/src/store/users.js

@@ -0,0 +1,11 @@
+export default{
+ state: {
+ user: localStorage.getItem('user')
+ },
+ mutations: {
+
+ },
+ actions: {
+
+ }
+}