From 7613c187113fd911850d28fe5c7446e16be59be1 Mon Sep 17 00:00:00 2001 From: marcsello Date: Tue, 24 Nov 2020 21:00:18 +0100 Subject: [PATCH] Created login screen --- package-lock.json | 216 +++++++++++++++++++++++++++++ package.json | 7 +- public/index.html | 2 +- src/App.vue | 12 +- src/components/Login.vue | 30 ++++ src/components/LoginBoxContent.vue | 35 +++++ src/components/Register.vue | 33 +++++ src/main.js | 14 ++ src/router/index.js | 50 +++---- src/views/Login.vue | 15 -- src/views/Register.vue | 15 -- src/views/Welcome.vue | 34 +++++ 12 files changed, 402 insertions(+), 61 deletions(-) create mode 100644 src/components/Login.vue create mode 100644 src/components/LoginBoxContent.vue create mode 100644 src/components/Register.vue delete mode 100644 src/views/Login.vue delete mode 100644 src/views/Register.vue create mode 100644 src/views/Welcome.vue diff --git a/package-lock.json b/package-lock.json index d05c0f2..f7f8a49 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index ad669ec..1e79309 100644 --- a/package.json +++ b/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" }, diff --git a/public/index.html b/public/index.html index 4123528..c343076 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,7 @@ - + <%= htmlWebpackPlugin.options.title %> diff --git a/src/App.vue b/src/App.vue index 630ad77..09979ea 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,5 @@ @@ -7,3 +7,13 @@ + + \ No newline at end of file diff --git a/src/components/Login.vue b/src/components/Login.vue new file mode 100644 index 0000000..a5105cb --- /dev/null +++ b/src/components/Login.vue @@ -0,0 +1,30 @@ + + + + + \ No newline at end of file diff --git a/src/components/LoginBoxContent.vue b/src/components/LoginBoxContent.vue new file mode 100644 index 0000000..6248abb --- /dev/null +++ b/src/components/LoginBoxContent.vue @@ -0,0 +1,35 @@ + + + + + \ No newline at end of file diff --git a/src/components/Register.vue b/src/components/Register.vue new file mode 100644 index 0000000..d1fa23b --- /dev/null +++ b/src/components/Register.vue @@ -0,0 +1,33 @@ + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index f253456..f19e8a7 100644 --- a/src/main.js +++ b/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, diff --git a/src/router/index.js b/src/router/index.js index c5e2004..f188456 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,41 +1,35 @@ import Vue from 'vue' import VueRouter from 'vue-router' import Dashboard from '@/views/Dashboard' -import Login from "@/views/Login"; -import Register from "@/views/Register"; +import Welcome from "@/views/Welcome"; Vue.use(VueRouter) const routes = [ - { - path: '/', - name: 'Home', - component: Dashboard - }, - { - path: '/login', - name: 'Login', - component: Login - }, - { - path: '/register', - name: 'Register', - component: Register - }, - { - 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: '/', + name: 'Welcome', + component: Welcome + }, + { + path: '/dashboard', + name: 'Dashboard', + component: Dashboard + }, + { + 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') + } ] const router = new VueRouter({ - mode: 'history', - base: process.env.BASE_URL, - routes + mode: 'history', + base: process.env.BASE_URL, + routes }) export default router diff --git a/src/views/Login.vue b/src/views/Login.vue deleted file mode 100644 index 0fc3c82..0000000 --- a/src/views/Login.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/views/Register.vue b/src/views/Register.vue deleted file mode 100644 index e5090ba..0000000 --- a/src/views/Register.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/views/Welcome.vue b/src/views/Welcome.vue new file mode 100644 index 0000000..2f7afd3 --- /dev/null +++ b/src/views/Welcome.vue @@ -0,0 +1,34 @@ + + + + + \ No newline at end of file