Feature/typescript

.env.example

@@ -1 +1,2 @@
-VUE_APP_SOCKETS_URL="ws://localhost:8089"
+VUE_APP_SOCKETS_URL="ws://localhost:8089"
+VUE_APP_BASE_URL="http://localhost:8089"

.eslintrc.js

@@ -3,12 +3,27 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ["plugin:vue/essential", "@vue/prettier"],
+  extends: [
+    "plugin:vue/essential",
+    "@vue/prettier"
+  ],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-undef": 0,
+    "no-unused-vars": ["off"],
+    "prettier/prettier": {
+      "quotes": ["error", "single"]
+    }
   },
+  plugins: [
+    "typescript"
+  ],
   parserOptions: {
-    parser: "babel-eslint"
-  }
+    "parser": "typescript-eslint-parser",
+    // parser: "babel-eslint",
+    // ecmaFeatures: {
+    //   legacyDecorators: true
+    // }
+  },
 };

.gitignore

@@ -22,3 +22,5 @@ yarn-error.log*
 
 .env
 .env.production
+
+documentation/*

package.json

@@ -8,22 +8,38 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "socket.io-client": "^2.2.0",
     "vue": "^2.5.17",
+    "vue-class-component": "^6.3.2",
     "vue-router": "^3.0.1",
     "vue-virtual-scroller": "^1.0.0-beta.4",
-    "vuetify": "^1.3.15"
+    "vuetify": "^1.3.15",
+    "vuex": "^3.1.0"
   },
   "devDependencies": {
+    "@types/axios": "^0.14.0",
+    "@types/node": "^10.12.18",
+    "@types/socket.io-client": "^1.4.32",
     "@vue/cli-plugin-babel": "^3.0.0",
-    "@vue/cli-plugin-eslint": "^3.0.0",
+    "@vue/cli-plugin-eslint": "^3.3.0",
     "@vue/cli-service": "^3.0.0",
     "@vue/eslint-config-prettier": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "eslint": "^5.8.0",
+    "eslint-config-typescript": "^1.1.0",
+    "eslint-plugin-prettier": "^3.0.1",
+    "eslint-plugin-typescript": "^0.14.0",
     "eslint-plugin-vue": "^5.0.0-0",
     "node-sass": "^4.11.0",
+    "prettier": "^1.15.3",
     "sass-loader": "^7.1.0",
+    "ts-loader": "^5.3.3",
+    "tslint": "^5.12.1",
+    "tslint-config-prettier": "^1.17.0",
+    "typescript": "^3.2.4",
+    "typescript-eslint-parser": "^22.0.0",
+    "vue-property-decorator": "^7.3.0",
     "vue-template-compiler": "^2.5.17"
   }
 }

src/App.vue

@@ -1,7 +1,32 @@
 <template>
-  <div id="app"><router-view /></div>
+  <layout>
+    <div id="app"><router-view/></div>
+  </layout>
 </template>
 
+<script>
+import Vue from "vue";
+import Component from "vue-class-component";
+
+import LayoutComponent from "./components/layout/layout.component.vue";
+import { USER_TOKEN_KEY, USER_KEY } from "./constants";
+import { AUTHORIZE_ME } from "./shared/store";
+
+@Component({
+  components: {
+    layout: LayoutComponent
+  }
+})
+export default class App extends Vue {
+  created() {
+    const token = localStorage.getItem(USER_TOKEN_KEY);
+    if (token) {
+      this.$store.dispatch(AUTHORIZE_ME);
+    }
+  }
+}
+</script>
+
 <style lang="scss">
 @import "./../node_modules/vuetify/dist/vuetify.min.css";
 @import "./../node_modules/vue-virtual-scroller/dist/vue-virtual-scroller.css";

src/components/auth/create-user/create-user.component.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="container">
+    <h1>Create User</h1>
+    <v-form 
+      ref="form"
+      class="form"
+      v-model="valid">
+      <v-text-field
+        v-model="email"
+        :rules="emailRules"
+        label="Type your e-mail"
+        required>
+      </v-text-field>
+
+      <v-text-field
+        v-model="password"
+        label="Type your password"
+        :type="'password'"
+        required>
+      </v-text-field>
+
+      <v-select
+        :items="projects"
+        v-model="selectedProjects"
+        multiple
+        chips
+        :item-text="formatProjectName"
+        item-value="id"
+        clearable
+        required
+        label="Select projects">
+      </v-select>
+
+      <v-btn
+        :disabled="!valid"
+        color="success"
+        class="submit-btn"
+        dark
+        round
+        @click="submit">
+        Create User
+      </v-btn>
+    </v-form>
+    <v-snackbar
+      v-model="showMessage"
+      top
+      color="success"
+      :timeout="2000"
+    >
+      {{ message }}
+    </v-snackbar>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Component } from "vue-property-decorator";
+import { CREATE_USER } from "../../../shared/store";
+
+@Component({
+  name: 'create-user'
+})
+export default class CreateUserComponent extends Vue {
+  valid = false;
+  email = '';
+  password = '';
+  selectedProjects: string[] = [];
+  showMessage: boolean = false;
+  message: string = '';
+  messageColor: string = 'success';
+
+  emailRules = [
+    (v: any) => !!v || 'E-mail is required',
+    (v: any) => /.+@.+/.test(v) || 'E-mail must be valid'
+  ];
+
+  get projects() {
+    return this.$store.getters.getProjects;
+  }
+
+  formatProjectName(project: Project) {
+    return `${project.namespace} - ${project.projectName}`
+  }
+
+  resetForm() {
+    this.email = '';
+    this.password = '';
+    this.selectedProjects = [];
+  }
+
+  showSnackBar(message: string, color: string = 'success') {
+    this.showMessage = true;
+    this.message = message;
+    this.messageColor = color;
+  }
+
+  submit() {
+    this.$store.dispatch(CREATE_USER, {
+      email: this.email,
+      password: this.password,
+      projects: this.selectedProjects
+    }).then(() => {
+      this.showSnackBar('User has been created!');
+      this.resetForm();
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+
+  h1 {
+    color: white;
+  }
+
+  .form {
+    max-width: 50%;
+  }
+
+  .submit-btn {
+    width: 100%;
+    margin: 0;
+  }
+}
+</style>

src/components/auth/login/login.component.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="container">
+    <h1>Log In</h1>
+    <v-form 
+      ref="form"
+      class="form"
+      v-model="valid">
+      <v-text-field
+        v-model="email"
+        :rules="emailRules"
+        label="Type your e-mail"
+        required>
+      </v-text-field>
+
+      <v-text-field
+        v-model="password"
+        label="Type your password"
+        :type="'password'"
+        required>
+      </v-text-field>
+
+      <v-btn
+        :disabled="!valid"
+        color="info"
+        class="login-btn"
+        dark
+        round
+        @click="submit">
+        Log In
+      </v-btn>
+    </v-form>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Component } from "vue-property-decorator";
+
+import { LOGIN_USER } from "../../../shared/store";
+
+@Component({
+  name: 'login'
+})
+export default class LoginComponent extends Vue {
+  valid = false;
+  email = '';
+  password = '';
+
+  emailRules = [
+    (v: any) => !!v || 'E-mail is required',
+    (v: any) => /.+@.+/.test(v) || 'E-mail must be valid'
+  ];
+
+  submit() {
+    this.$store.dispatch(LOGIN_USER, {
+      email: this.email,
+      password: this.password
+    }).then(() => {
+      this.$router.push('/');
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 30%;
+
+  h1 {
+    width: 100%;
+    background: rgb(249, 180, 22);
+    color: white;
+  }
+
+  .form {
+    border: 1px solid rgb(249, 180, 22);
+    padding: 3rem;
+    width: 100%;
+  }
+
+  .login-btn {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+}
+</style>