initial commit
This commit is contained in:
Torben Indorf
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="login d-flex primary base-container">
|
||||
<div
|
||||
class="login-form-container d-flex justify-center_ align-center flex-column"
|
||||
>
|
||||
<!-- spacer -->
|
||||
<div class="mt-12"></div>
|
||||
<div class="my-12 on-primary--text d-flex align-center">
|
||||
<div class="application-logo-container mr-3">
|
||||
<img class="big" src="../../assets/logo.svg" alt="logo" />
|
||||
</div>
|
||||
<span class="application-name">
|
||||
{{ applicationName }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="background login-form text-center elevation-3">
|
||||
<div class="inner-form ma-10">
|
||||
<form @submit.prevent="onLogin">
|
||||
<div class="header mb-6">
|
||||
<h4>{{ $t('LOGIN.LOGIN_TITLE') }}</h4>
|
||||
</div>
|
||||
<v-text-field
|
||||
v-model="email"
|
||||
:label="$t('LOGIN.LOGIN')"
|
||||
required
|
||||
outlined
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
:label="$t('LOGIN.PASSWORD')"
|
||||
type="password"
|
||||
required
|
||||
outlined
|
||||
></v-text-field>
|
||||
<div class="footer d-flex justify-space-between">
|
||||
<v-btn
|
||||
type="submit"
|
||||
color="accent"
|
||||
:disabled="!password || !email"
|
||||
>
|
||||
{{ $t('LOGIN.NEXT') }}
|
||||
</v-btn>
|
||||
<!-- <span class="primary--text d-flex align-center caption">-->
|
||||
<!-- {{$t('LOGIN.FORGOT_PASSWORD')}}-->
|
||||
<!-- </span>-->
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="disclaimer mt-3">
|
||||
<div class="copyright d-flex justify-center">
|
||||
<span class="white--text caption">{{
|
||||
$t('LOGIN.DISCLAIMER.COPYRIGHT')
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="d-flex justify-center">
|
||||
<span class="white--text caption">{{
|
||||
$t('LOGIN.DISCLAIMER.DATA_PROTECTION')
|
||||
}}</span>
|
||||
<span class="white--text caption pl-1 pr-1">-</span>
|
||||
<span class="white--text caption">{{
|
||||
$t('LOGIN.DISCLAIMER.IMPRINT')
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { namespace } from 'vuex-class';
|
||||
import User from '../../models/User';
|
||||
|
||||
const AuthStore = namespace('auth');
|
||||
|
||||
/**
|
||||
* This view provides a login for each user role.
|
||||
*/
|
||||
@Component({})
|
||||
export default class LoginView extends Vue {
|
||||
public applicationName: string = process.env.VUE_APP_TITLE!;
|
||||
|
||||
@AuthStore.Action('loginAction')
|
||||
private loginAction!: (value: { email: string; password: string }) => any;
|
||||
private email: string | null = process.env.VUE_APP_DEFAULT_USERNAME || null;
|
||||
private password: string | null =
|
||||
process.env.VUE_APP_DEFAULT_PASSWORD || null;
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
private async onLogin() {
|
||||
try {
|
||||
const loginData = await this.loginAction({
|
||||
email: this.email!,
|
||||
password: this.password!
|
||||
});
|
||||
this.$router.push({name: 'dashboard'});
|
||||
} catch (e) {
|
||||
if (this.$te(`LOGIN.NOTIFICATIONS.${e.status}.TEXT`)) {
|
||||
this.$notifyError(
|
||||
this.$t(`LOGIN.NOTIFICATIONS.GENERAL_TITLE`).toString(),
|
||||
this.$t(`LOGIN.NOTIFICATIONS.${e.status}.TEXT`).toString()
|
||||
);
|
||||
} else {
|
||||
this.$notifyErrorSimplified('LOGIN.NOTIFICATIONS.GENERAL_ERROR');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login {
|
||||
.login-form-container {
|
||||
flex: 1;
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-toolbar flat class="primary" height="65px">
|
||||
<div class="toolbar d-flex justify-space-between white--text">
|
||||
<div class="d-flex align-center">
|
||||
<div class="application-logo-container mt-1">
|
||||
<img
|
||||
src="../../assets/logo.svg"
|
||||
alt="logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="application-name ml-6 mr-12">
|
||||
<template>
|
||||
{{ applicationName }}
|
||||
</template>
|
||||
</div>
|
||||
<div class="navigation-container d-flex">
|
||||
<div
|
||||
class="nav-item nav-hover mx-3"
|
||||
v-for="item in navigationItems"
|
||||
v-bind:key="item.routerName"
|
||||
v-bind:class="{
|
||||
itemSelected: selectedNavItem === item.routerName
|
||||
}"
|
||||
@click="
|
||||
item.dropdownOptions.length === 0 ? onNavItemClick(item) : {}
|
||||
"
|
||||
>
|
||||
<v-menu offset-y>
|
||||
<template v-slot:activator="{ on }">
|
||||
<div
|
||||
class="fill-height d-flex align-center justify-center px-3"
|
||||
v-on="on"
|
||||
>
|
||||
<div>{{ item.title }}</div>
|
||||
<v-icon
|
||||
v-if="item.dropdownOptions.length > 0"
|
||||
class="white--text ml-3"
|
||||
>
|
||||
mdi-chevron-down
|
||||
</v-icon>
|
||||
</div>
|
||||
</template>
|
||||
<v-list v-if="item.dropdownOptions.length > 0" :dense="true">
|
||||
<div
|
||||
v-for="(dropdownItem, index) in item.dropdownOptions"
|
||||
:key="index"
|
||||
>
|
||||
<v-list-item @click="onNavItemClick(dropdownItem)">
|
||||
<v-icon class="mr-6 primary--text">
|
||||
{{ dropdownItem.icon }}
|
||||
</v-icon>
|
||||
<v-list-item-title>{{
|
||||
$t(dropdownItem.title)
|
||||
}}</v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-divider
|
||||
class="mr-3 ml-3"
|
||||
v-if="index < item.dropdownOptions.length - 1"
|
||||
>
|
||||
</v-divider>
|
||||
</div>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-center"></div>
|
||||
</div>
|
||||
</v-toolbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Watch } from 'vue-property-decorator';
|
||||
import { NavigationItemInterface } from '@/interfaces/NavigationItem.interface';
|
||||
import { NavigationItemStorage } from '@/helper/NavigationItemStorage';
|
||||
|
||||
@Component({})
|
||||
export default class NavigationView extends Vue {
|
||||
public applicationName: string = process.env.VUE_APP_TITLE!;
|
||||
private navigationItems: NavigationItemInterface[] = [];
|
||||
private selectedNavItem = 'companyDashboard';
|
||||
|
||||
/**
|
||||
* On click handler that activates a route
|
||||
* @param item
|
||||
*/
|
||||
public onNavItemClick(item: any) {
|
||||
switch (item.routerName) {
|
||||
case 'createCustomer':
|
||||
break;
|
||||
case 'createUser':
|
||||
break;
|
||||
case 'createCompany':
|
||||
break;
|
||||
default:
|
||||
this.selectedNavItem = item.routerName;
|
||||
this.$router.push({ name: item.routerName });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Watch the route url for changing the navigation bar
|
||||
*/
|
||||
@Watch('$route', { immediate: true, deep: true })
|
||||
private onUrlChange(routerValue: any) {
|
||||
if (routerValue.name) {
|
||||
this.selectedNavItem = routerValue.name;
|
||||
}
|
||||
this.setNavigationItems();
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines the navigation items regarding the current user role
|
||||
*/
|
||||
private setNavigationItems() {
|
||||
this.navigationItems = NavigationItemStorage;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.navigation-container {
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user