AUTH-18 setups vue-material and vuelidate

Author: Andrey Solodovnikov

package-lock.json

@@ -14,6 +14,7 @@
     "element-ui": "^2.4.5",
     "vue": "^2.5.17",
     "vue-i18n": "^8.0.0",
+    "vue-material": "^1.0.0-beta-10.2",
     "vuelidate": "^0.7.4",
     "vuex": "^3.0.1"
   },

package.json

@@ -3,17 +3,48 @@
     <center>
       <img alt="Vue logo" src="./assets/logo.png">
     </center>
-    <AuthForm/>
+    <div class="container">
+      <LocaleChanger/>
+      <h1>{{ $t('title') }}</h1>
+      <AuthForm/>
+    </div>
   </div>
 </template>
 
 <script>
 import AuthForm from './components/AuthForm.vue';
+import LocaleChanger from './components/LocaleChanger.vue';
 
 export default {
   name: 'Root',
   components: {
     AuthForm,
+    LocaleChanger,
   },
 };
 </script>
+
+<style lang="scss" scoped>
+@import 'assets/styles/gui.scss';
+
+.container {
+  font-family: $ui-font-family-common;
+  color: $ui-color-grey13;
+  box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
+  background: $ui-color-white;
+  padding: 20px;
+  width: 500px;
+  margin: 15px auto 0;
+}
+</style>
+
+<i18n>
+{
+  "ru": {
+    "title": "Авторизация в ProtocolONE"
+  },
+  "en": {
+    "title": "ProtocolONE Authorization"
+  }
+}
+</i18n>

src/App.vue

@@ -1,35 +1,89 @@
 <template>
   <div class="auth-form">
-    <LocaleChanger/>
-    <h1>ProtocolONE Auth Form</h1>
-    <HelloI18n/>
+    <form novalidate @submit.prevent="validateUser">
+      <md-field :class="getValidationClass('username')">
+        <label>{{ $t('fieldUsernameLabel') }}</label>
+        <md-input v-model="username"></md-input>
+        <span class="md-error" v-if="!$v.username.required">{{ $t('errorMessageRequired') }}</span>
+      </md-field>
+
+      <md-field :class="getValidationClass('password')">
+        <label>{{ $t('fieldPasswordLabel') }}</label>
+        <md-input type="password" v-model="password"></md-input>
+        <span class="md-error" v-if="!$v.password.required">{{ $t('errorMessageRequired') }}</span>
+      </md-field>
+
+      <md-card-actions>
+        <md-button type="submit" class="md-raised md-primary">
+          {{ $t('submitButtonText') }}
+        </md-button>
+      </md-card-actions>
+    </form>
   </div>
 </template>
 
 <script>
-import HelloI18n from './HelloI18n.vue';
-import LocaleChanger from './LocaleChanger.vue';
+import { required } from 'vuelidate/lib/validators';
 
 export default {
   name: 'AuthForm',
 
-  components: {
-    HelloI18n,
-    LocaleChanger,
+  data() {
+    return {
+      username: '',
+      password: '',
+    };
+  },
+
+  methods: {
+    getValidationClass(fieldName) {
+      const field = this.$v[fieldName];
+
+      if (field) {
+        return {
+          'md-invalid': field.$invalid && field.$dirty,
+        };
+      }
+
+      return '';
+    },
+
+    validateUser() {
+      this.$v.$touch();
+
+      if (!this.$v.$invalid) {
+        console.log('success');
+      }
+    },
+  },
+
+  validations: {
+    username: {
+      required,
+    },
+
+    password: {
+      required,
+    },
   },
 };
 </script>
-
 <style scoped lang="scss">
-@import '../assets/styles/gui.scss';
-
 .auth-form {
-  font-family: $ui-font-family-common;
-  color: $ui-color-grey13;
-  box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
-  background: $ui-color-white;
-  padding: 20px;
-  width: 500px;
-  margin: 15px auto 0;
 }
 </style>
+
+<i18n>
+{
+  "ru": {
+    "fieldUsernameLabel": "Имя пользователя",
+    "fieldPasswordLabel": "Пароль",
+    "submitButtonText": "Войти"
+  },
+  "en": {
+    "fieldUsernameLabel": "Username",
+    "fieldPasswordLabel": "Password",
+    "submitButtonText": "Sign in"
+  }
+}
+</i18n>

src/components/AuthForm.vue

@@ -1,16 +1,20 @@
 <template>
   <div class="locale-changer">
-    <select v-model="$i18n.locale">
-      <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">{{ lang }}</option>
-    </select>
+    <md-field>
+      <md-select v-model="$i18n.locale">
+        <md-option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">{{ lang }}</md-option>
+      </md-select>
+    </md-field>
   </div>
 </template>
 
 <script>
 export default {
   name: 'locale-changer',
   data() {
-    return { langs: ['ru', 'en'] };
+    return {
+      langs: ['ru', 'en'],
+    };
   },
 };
 </script>

src/components/LocaleChanger.vue

@@ -1,3 +1,4 @@
 {
-  "message": "hello i18n !!"
+  "message": "hello i18n !!",
+  "errorMessageRequired": "The field is required"
 }

src/locales/en.json

@@ -1,3 +1,4 @@
 {
-  "message": "дратути i18n !!"
+  "message": "дратути i18n !!",
+  "errorMessageRequired": "Это поле обязательно"
 }

src/locales/ru.json

@@ -4,6 +4,8 @@
  */
 
 import Vue from 'vue';
+import './plugins/vue-material';
+import './plugins/vuelidate';
 import App from './App.vue';
 import store from './store/RootStore';
 import i18n from './i18n';

src/main.js

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import VueMaterial from 'vue-material';
+import 'vue-material/dist/vue-material.min.css';
+import 'vue-material/dist/theme/default.css';
+
+Vue.use(VueMaterial);

src/plugins/vue-material.js

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import Vuelidate from 'vuelidate';
+
+Vue.use(Vuelidate);