Created login screen

package-lock.json

@@ -1105,6 +1105,61 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@nuxt/opencollective": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.3.2.tgz",
+      "integrity": "sha512-XG7rUdXG9fcafu9KTDIYjJSkRO38EwjlKYIb5TQ/0WDbiTUTtUtgncMscKOYzfsY86kGs05pAuMOR+3Fi0aN3A==",
+      "requires": {
+        "chalk": "^4.1.0",
+        "consola": "^2.15.0",
+        "node-fetch": "^2.6.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -1197,6 +1252,125 @@
       "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
       "dev": true
     },
+    "@syncfusion/ej2-base": {
+      "version": "18.3.51",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-base/-/ej2-base-18.3.51.tgz",
+      "integrity": "sha512-sCFInC7Q215I4DrWjSR6nHi3E/D7rGXLMbd7HHFljum1aM9K7LcPsG2S70P9nMRz7E8NW1jsu90ZSQZAav4bWw==",
+      "requires": {
+        "@syncfusion/ej2-icons": "~18.3.47"
+      }
+    },
+    "@syncfusion/ej2-buttons": {
+      "version": "18.3.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-buttons/-/ej2-buttons-18.3.47.tgz",
+      "integrity": "sha512-V/uzgfaE4f0bfbxKbztIs4Px6cVEVYKKoSMMTWxGFOAD1Ol2Hp055MJzDjQTzmoaq7TlLjyHXGZDsYoKGuguGw==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.47"
+      }
+    },
+    "@syncfusion/ej2-data": {
+      "version": "18.3.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-data/-/ej2-data-18.3.47.tgz",
+      "integrity": "sha512-9ugdrThHhh/7ShZIotuBIsUUAhh8L/jCXrXGTbepmikgZpsMp5npv5BNK3E5M7LE70Pl5MMzLyqORrS5l8v4Ow==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.47"
+      }
+    },
+    "@syncfusion/ej2-icons": {
+      "version": "18.3.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-icons/-/ej2-icons-18.3.47.tgz",
+      "integrity": "sha512-SSasO60RF0wZuPvz7KUMhvqeZgHCBOrCy2IjPywg3YDOgH244E90NasE0jfGm/1HDdkkVhxWATh8bZh79Ivg/g=="
+    },
+    "@syncfusion/ej2-inputs": {
+      "version": "18.3.51",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-inputs/-/ej2-inputs-18.3.51.tgz",
+      "integrity": "sha512-E24koZMyfGOh0jlMYF6Foql3Fqsi25a7cRvYwShF3J43X9k4fRl+iOFpdv2OQulqC5zzyq+Q89SuLbIzSXo7KQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.51",
+        "@syncfusion/ej2-buttons": "~18.3.47",
+        "@syncfusion/ej2-popups": "~18.3.50",
+        "@syncfusion/ej2-splitbuttons": "~18.3.50"
+      }
+    },
+    "@syncfusion/ej2-lists": {
+      "version": "18.3.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-lists/-/ej2-lists-18.3.47.tgz",
+      "integrity": "sha512-1fZ9ApsyFFRHLIqZyQ6sWCOFbFLNnRxfaoT81jfA1cQdGdiCuA6B5Q4FLXEnZ6/QZMkgfrWr7VxDP8QNkud0pA==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.47",
+        "@syncfusion/ej2-buttons": "~18.3.47",
+        "@syncfusion/ej2-data": "~18.3.47"
+      }
+    },
+    "@syncfusion/ej2-navigations": {
+      "version": "18.3.51",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-navigations/-/ej2-navigations-18.3.51.tgz",
+      "integrity": "sha512-vHaUjpnXTGK1+eXPcv3uCwZzzgH7pJE4pZUbYa7o8JON+0vdbbH8/ns/LJXL/Ov7kjd2R/STnOWQx1WYHsmPLQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.51",
+        "@syncfusion/ej2-buttons": "~18.3.47",
+        "@syncfusion/ej2-data": "~18.3.47",
+        "@syncfusion/ej2-inputs": "~18.3.51",
+        "@syncfusion/ej2-lists": "~18.3.47",
+        "@syncfusion/ej2-popups": "~18.3.50"
+      }
+    },
+    "@syncfusion/ej2-popups": {
+      "version": "18.3.50",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-popups/-/ej2-popups-18.3.50.tgz",
+      "integrity": "sha512-eAb13v0iqm4nU6etT60WJh5r+ugVe2IpSZ4MBVxPwZAFQwPLh2ueuAcb2g4YAcxfDBY1irzXcUbQwnNMQQznXA==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.49",
+        "@syncfusion/ej2-buttons": "~18.3.47"
+      }
+    },
+    "@syncfusion/ej2-splitbuttons": {
+      "version": "18.3.50",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-18.3.50.tgz",
+      "integrity": "sha512-zcZ6a1LuW3nwN/hqUCpUOEvfXX1GRlOkxonh+LTIqOOuGoYXpwFHugxgf3+VYnFnZWKUongEuRx0HmAgnluZcw==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.49",
+        "@syncfusion/ej2-popups": "~18.3.50"
+      }
+    },
+    "@syncfusion/ej2-vue-base": {
+      "version": "18.3.50",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-vue-base/-/ej2-vue-base-18.3.50.tgz",
+      "integrity": "sha512-A3U35h0Fy91Uy6tmSq2yI3gn0DY5Py66gAb0a79sG5NC+Li/4SoEQBkKO5/Y97tITdOF/1zRWlWLkrIT39dtkg==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.49"
+      }
+    },
+    "@syncfusion/ej2-vue-buttons": {
+      "version": "18.3.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-vue-buttons/-/ej2-vue-buttons-18.3.47.tgz",
+      "integrity": "sha512-uQC7maeHzxf3FRvAnnWjMb8PJPK8htAliVSv/AOobYYDmicKQVA0VD1C4ekyGaX+Zaw4JY1GHXl1L3EEwys0Tw==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.47",
+        "@syncfusion/ej2-buttons": "18.3.47",
+        "@syncfusion/ej2-vue-base": "~18.3.47"
+      }
+    },
+    "@syncfusion/ej2-vue-inputs": {
+      "version": "18.3.51",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-vue-inputs/-/ej2-vue-inputs-18.3.51.tgz",
+      "integrity": "sha512-7acqFcRBgZaUDidkpFu9dXxJWZjmucc9toYEqShqwqUGc/zgjDtxLdftbUxwGq2FiDeFN5FR+8+QxmSLYDRqtw==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.51",
+        "@syncfusion/ej2-inputs": "18.3.51",
+        "@syncfusion/ej2-vue-base": "~18.3.50"
+      }
+    },
+    "@syncfusion/ej2-vue-navigations": {
+      "version": "18.3.51",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-vue-navigations/-/ej2-vue-navigations-18.3.51.tgz",
+      "integrity": "sha512-RRGILsZnpB/FuTNhHz8vPFpbmZE4R0Kuex4OfGlIdAUQ4FVTOmZs+s7DnhShJLzxLZZeIbAwBpnwag7C1Ch3dQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~18.3.51",
+        "@syncfusion/ej2-navigations": "18.3.51",
+        "@syncfusion/ej2-vue-base": "~18.3.50"
+      }
+    },
     "@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
@@ -2696,6 +2870,23 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.3.tgz",
+      "integrity": "sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ=="
+    },
+    "bootstrap-vue": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.19.0.tgz",
+      "integrity": "sha512-IjAXUSrRU5Qu9x3uwUcoj6LtysKbCVeWoJOsODyI/WokStUr95M+tTIajXUjIrB/Nsk0fS+RNvZnm2sWeNFrhg==",
+      "requires": {
+        "@nuxt/opencollective": "^0.3.2",
+        "bootstrap": ">=4.5.3 <5.0.0",
+        "popper.js": "^1.16.1",
+        "portal-vue": "^2.1.7",
+        "vue-functional-data-merge": "^3.1.0"
+      }
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3545,6 +3736,11 @@
       "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
       "dev": true
     },
+    "consola": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.0.tgz",
+      "integrity": "sha512-vlcSGgdYS26mPf7qNi+dCisbhiyDnrN1zaRbw3CSuc2wGOMEGGPsp46PdRG5gqXwgtJfjxDkxRNAgRPr1B77vQ=="
+    },
     "console-browserify": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
@@ -7440,6 +7636,11 @@
         "lower-case": "^1.1.1"
       }
     },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+    },
     "node-forge": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
@@ -8105,6 +8306,16 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
+    "portal-vue": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
+      "integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -10861,6 +11072,11 @@
         }
       }
     },
+    "vue-functional-data-merge": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
+      "integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

package.json

@@ -8,8 +8,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@syncfusion/ej2-vue-buttons": "^18.3.47",
+    "@syncfusion/ej2-vue-inputs": "^18.3.51",
+    "@syncfusion/ej2-vue-navigations": "^18.3.51",
+    "bootstrap": "^4.5.3",
+    "bootstrap-vue": "^2.19.0",
     "core-js": "^3.6.5",
-    "vue": "^2.6.11",
+    "vue": "^2.6.12",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },

public/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="app">
     <router-view/>
   </div>
 </template>
@@ -7,3 +7,13 @@
 <style>
 
 </style>
+
+<style>
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
+@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
+</style>

src/components/Login.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <b-overlay :show="processing">
+      <b-form class="my-4">
+        <div>
+          <ejs-textbox id='username' floatLabelType="Auto" placeholder="Username" autocomplete="off"/>
+          <ejs-textbox id='password' floatLabelType="Auto" placeholder="Password" autocomplete="off" type="password"/>
+        </div>
+        <div class="mt-4 text-center">
+          <ejs-button cssClass='e-primary'>Login</ejs-button>
+        </div>
+      </b-form>
+    </b-overlay>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Login",
+  data() {
+    return {
+      processing: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/LoginBoxContent.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <ejs-tab id='element'>
+      <div class="e-tab-header">
+        <div>Login</div>
+        <div>Register</div>
+      </div>
+      <div class="e-content">
+        <div>
+          <login/>
+        </div>
+        <div>
+          <register/>
+        </div>
+      </div>
+    </ejs-tab>
+  </div>
+</template>
+
+<script>
+import Register from "@/components/Register";
+import Login from "@/components/Login";
+
+export default {
+  name: "LoginBoxContent",
+  components: {
+    Login,
+    Register
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Register.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <b-overlay :show="processing">
+
+        <b-form class="my-4">
+          <div>
+            <ejs-textbox id='username' floatLabelType="Auto" placeholder="Username" autocomplete="off"/>
+            <ejs-textbox id='password' floatLabelType="Auto" placeholder="Password" autocomplete="off" type="password"/>
+            <ejs-textbox id='password-confirm' floatLabelType="Auto" placeholder="Confirm password" autocomplete="off"
+                         type="password"/>
+          </div>
+          <div class="mt-4 text-center">
+            <ejs-button cssClass='e-primary'>Register</ejs-button>
+          </div>
+        </b-form>
+    </b-overlay>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Register",
+  data() {
+    return {
+      processing: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -2,9 +2,23 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+// Used only for grid stuff:
+import { BootstrapVue } from 'bootstrap-vue'
+
+import { TabPlugin } from '@syncfusion/ej2-vue-navigations';
+import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
+import { TextBoxPlugin } from '@syncfusion/ej2-vue-inputs';
+
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 Vue.config.productionTip = false
 
+Vue.use(TabPlugin);
+Vue.use(ButtonPlugin);
+Vue.use(BootstrapVue);
+Vue.use(TextBoxPlugin);
+
 new Vue({
   router,
   store,

src/router/index.js

@@ -1,27 +1,21 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Dashboard from '@/views/Dashboard'
-import Login from "@/views/Login";
+import Welcome from "@/views/Welcome";
-import Register from "@/views/Register";
 
 Vue.use(VueRouter)
 
 const routes = [
     {
         path: '/',
-    name: 'Home',
+        name: 'Welcome',
+        component: Welcome
+    },
+    {
+        path: '/dashboard',
+        name: 'Dashboard',
         component: Dashboard
     },
-  {
-    path: '/login',
-    name: 'Login',
-    component: Login
-  },
-  {
-    path: '/register',
-    name: 'Register',
-    component: Register
-  },
     {
         path: '/about',
         name: 'About',

src/views/Login.vue

@@ -1,15 +0,0 @@
-<template>
-  <div>
-    Login
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Login"
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/Register.vue

@@ -1,15 +0,0 @@
-<template>
-  <div>
-    Register
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Register"
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/Welcome.vue

@@ -0,0 +1,34 @@
+<template>
+  <div id="welcome">
+    <b-container>
+      <b-row align-h="center">
+        <b-col md="6" lg="4" cols="12">
+          <b-card class="my-5">
+            <div class="text-center">
+              <h1>VideON</h1>
+            </div>
+            <login-box-content/>
+          </b-card>
+          <div class="text-center text-muted">
+            Copyright 2020 by VideON Team
+          </div>
+        </b-col>
+      </b-row>
+    </b-container>
+  </div>
+</template>
+
+<script>
+import LoginBoxContent from "@/components/LoginBoxContent";
+
+export default {
+  name: "Welcome",
+  components: {LoginBoxContent}
+}
+</script>
+
+<style scoped>
+#welcome {
+
+}
+</style>