Commit 376555eb authored by Andres Käver's avatar Andres Käver

login

parent 91fe3018
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
indent_size = 4
trim_trailing_whitespace = true
insert_final_newline = true
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'@vue/standard',
'@vue/typescript/recommended'
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'@vue/standard',
'@vue/typescript/recommended'
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'indent': ['error', 4],
'quotes': 'off',
'semi': 'off',
'space-before-function-paren': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/interface-name-prefix': [
"error",
{ "prefixWithI": "always"}
]
}
}
......@@ -1132,6 +1132,16 @@
"integrity": "sha512-9GvTek+7cVw7r+L7TNGOG1astZJWXz2h5q4BqMXl28KN+24iSCm1xo+RhZOZvwdT3bzNe9hD7riJc/lBoO7mgg==",
"dev": true
},
"@types/bootstrap": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-4.3.2.tgz",
"integrity": "sha512-ArJM2BsZ6KvPb7M3PGWNjlriFYP6gh3hINk76TTVXBqUiPYFOeyXA08gsVFSIjUqMitregBEqT79rvfgXEiLQQ==",
"dev": true,
"requires": {
"@types/jquery": "*",
"popper.js": "^1.14.1"
}
},
"@types/color-name": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
......@@ -1161,6 +1171,15 @@
"@types/node": "*"
}
},
"@types/jquery": {
"version": "3.3.35",
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.35.tgz",
"integrity": "sha512-pnIELWhHXJ7RgoFylhiTxD+96QlKBJfEx8JCLj963/dh7zBOKFkZ6rlNqbaCcn2JZrsAxCI8WhgRXznBx2iDsA==",
"dev": true,
"requires": {
"@types/sizzle": "*"
}
},
"@types/json-schema": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
......@@ -1191,6 +1210,12 @@
"integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
"dev": true
},
"@types/sizzle": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
"integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
"dev": true
},
"@types/webpack-env": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.15.2.tgz",
......@@ -2602,6 +2627,11 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
"dev": true
},
"bootstrap": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz",
"integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA=="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
......@@ -5509,6 +5539,11 @@
}
}
},
"font-awesome": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
"integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
},
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
......@@ -7422,6 +7457,11 @@
}
}
},
"jquery": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
"integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
},
"js-message": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.5.tgz",
......@@ -8978,6 +9018,11 @@
"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=="
},
"portfinder": {
"version": "1.0.25",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
......
......@@ -8,7 +8,11 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.4.1",
"core-js": "^3.6.4",
"font-awesome": "^4.7.0",
"jquery": "3.4.1",
"popper.js": "^1.16.1",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.1",
......@@ -16,6 +20,8 @@
"vuex": "^3.1.3"
},
"devDependencies": {
"@types/bootstrap": "^4.3.2",
"@types/jquery": "^3.3.35",
"@typescript-eslint/eslint-plugin": "^2.26.0",
"@typescript-eslint/parser": "^2.26.0",
"@vue/cli-plugin-babel": "~4.3.0",
......
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
<div>
<header>
<nav
class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"
>
<div class="container">
<router-link to="/" class="navbar-brand">Home</router-link>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target=".navbar-collapse"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<Identity />
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<router-link to="/" class="nav-link text-dark">Home</router-link>
</li>
<li class="nav-item">
<router-link to="/gpssessions" class="nav-link text-dark">Sessions</router-link>
</li>
<li class="nav-item">
<router-link to="/gpslocations" class="nav-link text-dark">Locations</router-link>
</li>
<li class="nav-item">
<router-link
to="/gpslocationtypes"
class="nav-link text-dark"
>Location Types</router-link>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
<router-view />
</main>
</div>
</div>
<router-view/>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import Identity from "./components/Identity.vue";
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
@Component({
components: {
Identity
}
})
export default class App extends Vue {}
</script>
<template>
<ul class="navbar-nav">
<template v-if="isAuthenticated">
<li class="nav-item">
<a class="nav-link text-dark" href>user@user.com</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href>Logout</a>
</li>
</template>
<li v-else class="nav-item">
<router-link to="/account/login" class="nav-link text-dark">Login</router-link>
</li>
</ul>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class Identity extends Vue {
private isAuthenticated = false;
}
</script>
......@@ -2,11 +2,16 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'jquery';
import 'popper.js';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
router,
store,
render: h => h(App)
}).$mount('#app')
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
import AccountLogin from '../views/Account/Login.vue'
import GpsSessionsIndex from '../views/GpsSessions/Index.vue'
import GpsSessionsDetails from '../views/GpsSessions/Details.vue'
import GpsLocationTypesIndex from '../views/GpsLocationTypes/Index.vue'
import GpsLocationsIndex from '../views/GpsLocations/Index.vue'
Vue.use(VueRouter)
const routes: Array<RouteConfig> = [
{
path: '/',
name: 'Home',
component: Home
},
{
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: 'Home', component: Home },
{ path: '/account/login', name: 'AccountLogin', component: AccountLogin },
{ path: '/gpssessions', name: 'GpsSessions', component: GpsSessionsIndex },
{ path: '/gpssessions/details/:id?', name: 'GpsSessionsDetails', component: GpsSessionsDetails, props: true },
{ path: '/gpslocationtypes', name: 'GpsLocationTypes', component: GpsLocationTypesIndex },
{ path: '/gpslocations', name: 'GpsLocations', component: GpsLocationsIndex }
]
const router = new VueRouter({
routes
routes
})
export default router
import Vue, { VNode } from 'vue'
declare global {
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode {}
// tslint:disable no-empty-interface
interface ElementClass extends Vue {}
interface IntrinsicElements {
[elem: string]: any;
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode { }
// tslint:disable no-empty-interface
interface ElementClass extends Vue { }
interface IntrinsicElements {
[elem: string]: any;
}
}
}
}
......@@ -4,12 +4,12 @@ import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
export interface ILoginDTO {
email: string;
password: string;
}
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<template>
<div class="row">
<div class="col-md-6">
<h4>Use a local account to log in.</h4>
<hr />
<div class="form-group">
<label for="Input_Email">Email</label>
<input class="form-control" type="email" id="Input_Email" />
</div>
<div class="form-group">
<label for="Input_Password">Password</label>
<input class="form-control" type="password" id="Input_Password" />
</div>
<div class="form-group">
<button class="btn btn-primary">Log in</button>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { ILoginDTO } from "@/types/ILoginDTO";
@Component
export default class GpsLocationTypesIndex extends Vue {
private loginInfo: ILoginDTO = {
email: "akaver@akaver.com",
password: "Kala.maja2020"
};
// ============ Lifecycle methods ==========
beforeCreate(): void {
console.log("beforeCreate");
}
created(): void {
console.log("created");
}
beforeMount(): void {
console.log("beforeMount");
}
mounted(): void {
console.log("mounted");
}
beforeUpdate(): void {
console.log("beforeUpdate");
}
updated(): void {
console.log("updated");
}
beforeDestroy(): void {
console.log("beforeDestroy");
}
destroyed(): void {
console.log("destroyed");
}
}
</script>
<template>
<div>GpsLocationTypes Index</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class GpsLocationTypesIndex extends Vue {
// ============ Lifecycle methods ==========
beforeCreate(): void {
console.log("beforeCreate");
}
created(): void {
console.log("created");
}
beforeMount(): void {
console.log("beforeMount");
}
mounted(): void {
console.log("mounted");
}
beforeUpdate(): void {
console.log("beforeUpdate");
}
updated(): void {
console.log("updated");
}
beforeDestroy(): void {
console.log("beforeDestroy");
}
destroyed(): void {
console.log("destroyed");
}
}
</script>
<template>
<div>GpsLocations Index</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class GpsLocationsIndex extends Vue {
// ============ Lifecycle methods ==========
beforeCreate(): void {
console.log("beforeCreate");
}
created(): void {
console.log("created");
}
beforeMount(): void {
console.log("beforeMount");
}
mounted(): void {
console.log("mounted");
}
beforeUpdate(): void {
console.log("beforeUpdate");
}
updated(): void {
console.log("updated");
}
beforeDestroy(): void {
console.log("beforeDestroy");
}
destroyed(): void {
console.log("destroyed");
}
}
</script>
<template>
<div>
<h1>GpsSessions Details</h1>
{{id}}
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class GpsSessionsDetails extends Vue {
@Prop()
private id!: string;
// ============ Lifecycle methods ==========
beforeCreate(): void {
console.log("beforeCreate");
}
created(): void {
console.log("created");
}
beforeMount(): void {
console.log("beforeMount");
}
mounted(): void {
console.log("mounted");
}
beforeUpdate(): void {
console.log("beforeUpdate");
}
updated(): void {
console.log("updated");
}
beforeDestroy(): void {
console.log("beforeDestroy");
}
destroyed(): void {
console.log("destroyed");
}
}
</script>
<template>
<div>
<h1>GpsSessions Index</h1>
<router-link :to="urlObject">Details</router-link>
<button class="btn btn-primary" @click="navigateClicked">Navigate</button>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import router from "../../router";
@Component
export default class GpsSessionsIndex extends Vue {
private urlObject = {
name: "GpsSessionsDetails",
params: {
id: "tricky"
}
};
navigateClicked(): void {
console.log('navigateClicked');
router.push(this.urlObject);
}
// ============ Lifecycle methods ==========
beforeCreate(): void {
console.log("beforeCreate");
}
created(): void {
console.log("created");
}
beforeMount(): void {
console.log("beforeMount");
}
mounted(): void {
console.log("mounted");
}
beforeUpdate(): void {
console.log("beforeUpdate");
}
updated(): void {
console.log("updated");
}
beforeDestroy(): void {
console.log("beforeDestroy");
}
destroyed(): void {
console.log("destroyed");
}
}
</script>
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
<div>Home</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>