videon/videon-frontend
3
0
Fork 0
Code Pull Requests Releases Activity

Created login screen

Browse Source
This commit is contained in:
Pünkösd Marcell
2020-11-24 21:00:18 +01:00
parent 9d65994520
commit 7613c18711
12 changed files with 402 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.vue
View File

@ -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>

30
src/components/Login.vue Normal file
View File

@ -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>

35
src/components/LoginBoxContent.vue Normal file
View File

@ -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>

33
src/components/Register.vue Normal file
View File

@ -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>

14
src/main.js
View File

@ -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,

50
src/router/index.js
View File

@ -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

15
src/views/Login.vue
View File

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

15
src/views/Register.vue
View File

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

34
src/views/Welcome.vue Normal file
View File

@ -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>