add validate

Author: Kirill Serebrennikov

package-lock.json

@@ -13,6 +13,7 @@
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
+    "vuelidate": "^0.7.5",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

package.json

@@ -1,7 +1,6 @@
 <template>
   <div id="app">
 	<component :is="layout">
-		<router-view />
 	</component>
 
   </div>

src/App.vue

@@ -5,25 +5,25 @@
         <a href="#" @click.prevent="$emit('click')">
           <i class="material-icons black-text">dehaze</i>
         </a>
-        <span class="black-text">12.12.12</span>
+        <span class="black-text">{{date | date('datetime')}}</span>
       </div>
 
       <ul class="right hide-on-small-and-down">
         <li>
-          <a class="dropdown-trigger black-text" href="#" data-target="dropdown">
+          <a class="dropdown-trigger black-text" href="#" data-target="dropdown" ref="dropdown">
             USER NAME
             <i class="material-icons right">arrow_drop_down</i>
           </a>
 
           <ul id="dropdown" class="dropdown-content">
             <li>
-              <a href="#" class="black-text">
+              <router-link to="/profile" class="black-text">
                 <i class="material-icons">account_circle</i>Профиль
-              </a>
+              </router-link>
             </li>
             <li class="divider" tabindex="-1"></li>
             <li>
-              <a href="#" class="black-text">
+              <a href="#" class="black-text" @click.prevent="logout">
                 <i class="material-icons">assignment_return</i>Выйти
               </a>
             </li>
@@ -33,3 +33,34 @@
     </div>
   </nav>
 </template>
+
+<script>
+import M from 'materialize-css'
+export default {
+	data: () => ({
+		date: new Date(),
+		interval: null,
+		dropdown: null
+	}),
+	methods: {
+		logout() {
+			console.log('logout')
+			this.$router.push('/login?message=logout')
+		}
+	},
+	mounted() {
+		this.interval = setInterval(() => {
+			this.date = new Date()
+		}, 1000)
+		this.dropdown = M.Dropdown.init(this.$refs.dropdown, {
+			constrainWidth: false
+		})
+	},
+	beforeDestroy() {
+		clearInterval(this.interval)
+		if(this.dropdown && this.dropdown.destroy) {
+			this.dropdown.destroy()
+		}
+	}
+}
+</script>

src/components/app/Navbar.vue

@@ -0,0 +1,17 @@
+export default function dateFilter(value, format = 'date') {
+	const options = {}
+
+	if(format.includes('date')) {
+		options.day = '2-digit'
+		options.month = 'long'
+		options.year = 'numeric'
+	}
+
+	if(format.includes('time')) {
+		options.hour = '2-digit'
+		options.minute = '2-digit'
+		options.second = '2-digit'
+	}
+
+	return new Intl.DateTimeFormat('ru-RU', options).format(new Date(value))
+}

src/filters/date.filter.js

@@ -10,9 +10,9 @@
     </main>
 
     <div class="fixed-action-btn">
-      <a class="btn-floating btn-large blue" href="#">
+      <router-link class="btn-floating btn-large blue" to="/record">
         <i class="large material-icons">add</i>
-      </a>
+      </router-link>
     </div>
   </div>
 </template>

src/layout/MainLayout.vue

@@ -1,12 +1,17 @@
 import Vue from "vue";
+import Vuelidate from 'vuelidate'
 import App from "./App.vue";
 import "./registerServiceWorker";
 import router from "./router";
 import store from "./store";
+import dateFilter from '@/filters/date.filter'
 import 'materialize-css/dist/js/materialize.min'
 
 Vue.config.productionTip = false;
 
+Vue.use(Vuelidate)
+Vue.filter('date', dateFilter)
+
 new Vue({
   router,
   store,

src/main.js

@@ -1,16 +1,18 @@
 <template>
-  <form class="card auth-card">
+  <form class="card auth-card" @submit.prevent="submitHandler">
     <div class="card-content">
       <span class="card-title">Домашняя бухгалтерия</span>
       <div class="input-field">
-        <input id="email" type="text" class="validate" />
+        <input id="email" type="text" v-model.trim="email" :class="{invalid: ($v.email.$dirty && !$v.email.required) || ($v.email.$dirty && !$v.email.email)}"/>
         <label for="email">Email</label>
-        <small class="helper-text invalid">Email</small>
+        <small class="helper-text invalid" v-if="$v.email.$dirty && !$v.email.required">Поле Email не должно быть пустым</small>
+		<small class="helper-text invalid" v-else-if="$v.email.$dirty && !$v.email.email">Введите корректный Email</small>
       </div>
       <div class="input-field">
-        <input id="password" type="password" class="validate" />
+        <input id="password" type="password" v-model.trim="password" :class="{invalid: ($v.password.$dirty && !$v.password.required) || ($v.password.$dirty && !$v.password.minLength)}" />
         <label for="password">Пароль</label>
-        <small class="helper-text invalid">Password</small>
+        <small class="helper-text invalid" v-if="$v.password.$dirty && !$v.password.required">Введите пароль</small>
+		<small class="helper-text invalid" v-if="$v.password.$dirty && !$v.password.minLength">Пароль должен быть {{$v.password.$params.minLength.min}} символов. Сейчас он {{password.length}}</small>
       </div>
     </div>
     <div class="card-action">
@@ -23,8 +25,40 @@
 
       <p class="center">
         Нет аккаунта?
-        <a href="/">Зарегистрироваться</a>
+        <router-link to="/register">Зарегистрироваться</router-link>
       </p>
     </div>
   </form>
 </template>
+
+<script>
+import {email, required, minLength} from 'vuelidate/lib/validators'
+
+export default {
+	name: 'login',
+	data: () => ({
+		email: '',
+		password: ''
+	}),
+	validations: {
+		email: {email, required},
+		password: {required, minLength: minLength(8)}
+	},
+	methods: {
+		submitHandler() {
+			if(this.$v.$invalid) {
+				this.$v.$touch()
+				return
+			}
+			const formData = {
+				email: this.email,
+				password: this.password
+			}
+
+			console.log(formData)
+
+			this.$router.push('/')
+		}
+	}
+}
+</script>