wulkanowy/wulkanowy-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #73 from wulkanowy/enhancement/login-page-five

Browse source 
Add baner to the login page by MARIONEQ
This commit is contained in:
Marcin 2021-09-05 14:55:05 +02:00 committed by GitHub
commit c9875a2fd6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 19942 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19622
frontend/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
frontend/package.json
View file

@ -17,7 +17,7 @@
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuetify": "^2.4.0",
"vuex": "^3.4.0"
"vuex": "^3.6.2"
},
"devDependencies": {
"@types/chai": "^4.2.11",

BIN
frontend/public/favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.2 KiB

BIN
frontend/public/icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.2 KiB

9
frontend/public/index.html
View file

@ -1,18 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<html lang="pl">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="shortcut icon" type="image/png" href="icon.png"/>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
<title><%= htmlWebpackPlugin.options.title %></title>
<title>Wulkanowy</title>
<meta name="keywords" content="vulcan, wulkanowy web, wulkanowy, e dziennik, e-dziennik, dziennik, szoła, szkolny.eu, szkolnyeu">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong>Przepraszamy Wulkanowy Web potrzebuje włączonego JavaScript</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->

BIN
frontend/src/assets/icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.2 KiB

56
frontend/src/components/Login/Baner.vue Normal file
View file

@ -0,0 +1,56 @@
<template>
<div class="card" style="float: left;">
<v-col>
<v-row align="center">
<v-card dark color="#d32f2f" style="height: 524px; margin-right: 35px; width: 350px;">
<v-card-text>
<div style="width: 140; height: 140;">
<img src="../../assets/wulkanowy.svg"
width="140"
class="logo"/>
</div>
<div id="headlineRed">Wulkanowy</div>
<div id="headlineTwo">Nieoficjalna aplikacja przeglądarkowa ucznia i
rodzica dla dziennika Vulcan UONET+
</div>
<br><br><br>
<a href="#" target="_blank" style="color: white;">Polityka prywatności</a>
<br>
<div id="headlineTwo">v 0.1.0</div>
</v-card-text>
</v-card>
</v-row>
</v-col>
</div>
</template>
<style>
.cardTwo{
float: left;
height: 500px;
top: 5%;
margin-bottom: 50px;
width: 450px;
}
#headlineRed{
text-align: center;
font-weight: 300;
font-size: 2pc;
margin-bottom: 1pc;
color: white;
font-weight: 400;
text-shadow: -1px 2px 0px rgba(157,0,0,0.73);
margin-top: 10px;
}
#headlineTwo{
text-align: center;
font-weight: 300;
font-size: 1pc;
margin-bottom: 1.5pc;
color: white;
padding: 10px;
}
.logo img{
text-shadow: -1px 2px 0px rgba(157,0,0,0.73);
}
</style>

19
frontend/src/components/Login/Loading.vue Normal file
View file

@ -0,0 +1,19 @@
<template>
<div id="App" style="height: 476px; margin: 0;">
<v-row align="center">
<v-col cols="12">
<v-progress-circular
indeterminate
color="red"
style="margin-top: 200px;"
></v-progress-circular>
</v-col>
</v-row>
</div>
</template>
<script>
export default {
name: 'Loading',
};
</script>

40
frontend/src/components/Login/SelectStudent.vue
View file

@ -1,10 +1,9 @@
<template>
<div id="App" style="min-height: 476px; margin: 0;">
<v-row align="center">
<v-col cols="12">
<a>Select student to login!</a>
</v-col>
<v-col cols="12">
<v-radio-group v-model="radioGroup" @change="$store.state.selectedStudent = radioGroup">
<div id="nag">Wybierz ucznia</div>
<v-radio-group>
<v-radio
v-model="selectedStudent"
v-for="student in this.$store.state.loginData.data.students.data"
@ -14,14 +13,12 @@
</v-radio-group>
</v-col>
<v-col cols="12">
<v-btn
class="login-button"
depressed
color="primary"
@click="chooseClicked()">
Choose</v-btn>
<v-btn id="buttonTwo" dark color="red" elevation="2"
@click="chooseClicked()" :disabled="inputDisabled"
>Wybierz</v-btn>
</v-col>
</v-row>
</div>
</template>
<script>
@ -29,7 +26,8 @@ export default {
name: 'SelectStudent',
data() {
return {
radioGroup: 0,
itemSelected: '',
radioGroup: 1,
selectedStudent: '',
studentList: {
type: Array,
@ -45,10 +43,28 @@ export default {
this.$store.state.showStudentsList = true;
await this.$router.push('/user');
},
back() {
this.$store.state.showStudentsList = false;
},
},
};
</script>
<style scoped>
<style>
#nag{
text-align: center;
font-weight: 300;
font-size: 1.3pc;
margin-bottom: 1pc;
}
#App{
padding: 10px;
}
#buttonTwo{
margin-top: auto;
margin-left: auto;
display: flex;
}
</style>

101
frontend/src/components/Login/UserLogin.vue
View file

@ -1,47 +1,24 @@
<template>
<div>
<div id="App" style="height: 476px; margin: 0;">
<v-row align="center">
<v-col cols="12"></v-col>
<v-col cols="12">
<v-text-field
class="login-input"
v-model="login"
label="E-mail"
outlined
clearable>
</v-text-field>
<v-text-field
class="login-input"
v-model="password"
label="Password"
outlined
clearable>
</v-text-field>
</v-col>
<v-col cols="12">
<v-select
:items="diaryNames"
v-model="selectedDiary"
item-value=""
v-on:change="itemSelected()"
label="Symbol"
selection="index"
outlined></v-select>
</v-col>
<v-col cols="12">
<v-btn
class="login-button"
depressed
color="primary"
@click="loginUser()">
Log in!</v-btn>
<v-divider style="padding: 5px"></v-divider>
<a style="">You forgot password click here!</a>
<div id="nag">Zaloguj się za pomocą konta ucznia lub rodzica</div>
<v-text-field color="red" v-model="login" :disabled="inputDisabled"
label="E-mail" outlined></v-text-field>
<v-text-field color="red" v-model="password" :disabled="inputDisabled"
label="Hasło" outlined type="password"></v-text-field>
<v-text-field color="red" v-model="symbol" :disabled="inputDisabled"
label="Symbol" outlined></v-text-field>
<v-select color="red" v-model="selectedSymbol" :disabled="inputDisabled"
label="Wybierz odmianę dziennika UONET+" outlined :items="item"
v-on:change="fakelog()"
item-color="red"></v-select>
<v-btn id="buttonTwo" dark color="red" elevation="2"
@click="loginUser()">Zaloguj się</v-btn>
</v-col>
</v-row>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import login from '../../api/login';
@ -51,43 +28,65 @@ interface Login {
login: string
password: string
diaryNames: Array<string>
selectedDiary: string
selectedDiary: string,
selectedSymbol: string,
symbol: string
}
export default Vue.extend({
name: 'UserLogin',
data: (): Login => ({
data() {
return {
inputDisabled: false,
login: '',
password: '',
diaryNames: [],
selectedDiary: '',
}),
created() {
this.diaryNames = diary.diaries.map((item): string => item.name);
selectedSymbol: '',
symbol: '',
item: [
'Vulcan',
'Fakelog',
],
};
},
methods: {
async loginUser() {
this.inputDisabled = true;
Vue.set(this.$store.state, 'isLoading', true);
const index = diary.diaries.findIndex((item) => item.name === this.selectedDiary);
const index = diary.diaries.findIndex((item) => item.name === this.selectedSymbol);
const response = await login.login(this.login, this.password,
'powiatwulkanowy', diary.diaries[index].url);
this.$store.state.loginData = response.data;
if (this.$store.state.loginData.data.students.data.length > 1) {
this.$store.state.isLoading = false;
this.$store.state.showStudentsList = true;
this.$store.state.isLoading = false;
}
},
itemSelected() {
if (this.selectedDiary === 'Fakelog') {
this.login = 'jan@fakelog.tk';
fakelog() {
if (this.selectedSymbol === 'Fakelog') {
this.login = 'jan@fakelog.cf';
this.password = 'jan123';
this.symbol = 'powiatwulkanowy';
}
},
},
});
</script>
<style>
#App{
padding: 10px;
}
#nag{
text-align: center;
font-weight: 300;
font-size: 1.3pc;
margin-bottom: 1pc;
}
<style scoped>
#buttonOne{
margin-right: auto;
display: block;
float: left;
}
</style>

1
frontend/src/components/Panel/Appbar.vue
View file

@ -71,5 +71,4 @@ export default {
</script>
<style scoped>
</style>

40
frontend/src/components/Panel/Drawer.vue
View file

@ -12,18 +12,19 @@
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title class="title">
{{ nameSurname }}
Jan Kowalski
</v-list-item-title>
<v-list-item-subtitle>{{ className }}</v-list-item-subtitle>
<v-list-item-subtitle>4A</v-list-item-subtitle>
</v-list-item-content>
<v-btn
icon
@click.stop="mini = !mini">
<v-icon>mdi-chevron-right</v-icon>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
</v-list-item>
</v-list>
<v-divider></v-divider>
<v-list
nav
dense>
@ -31,7 +32,7 @@
v-model="this.$store.state.group">
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-home</v-icon>
<v-icon>mdi-view-dashboard</v-icon>
</v-list-item-icon>
<v-list-item-title>Dashboard</v-list-item-title>
</v-list-item>
@ -50,6 +51,13 @@
<v-list-item-title>Attendance</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-calendar-outline</v-icon>
</v-list-item-icon>
<v-list-item-title>Exams</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-table-clock</v-icon>
@ -71,6 +79,13 @@
<v-list-item-title>Homework</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-trophy-outline</v-icon>
</v-list-item-icon>
<v-list-item-title>Notes and achievements</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-devices</v-icon>
@ -84,6 +99,22 @@
</v-list-item-icon>
<v-list-item-title>School</v-list-item-title>
</v-list-item>
<v-divider></v-divider>
<v-list-item @click="clickMenu(settings)">
<v-list-item-icon>
<v-icon>mdi-cog</v-icon>
</v-list-item-icon>
<v-list-item-title>Settings</v-list-item-title>
</v-list-item>
<v-list-item @click="clickMenu(about)">
<v-list-item-icon>
<v-icon>mdi-information-outline</v-icon>
</v-list-item-icon>
<v-list-item-title>About</v-list-item-title>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
@ -119,5 +150,4 @@ export default {
</script>
<style scoped>
</style>

5
frontend/src/router/index.ts
View file

@ -23,6 +23,11 @@ const routes: Array<RouteConfig> = [
name: 'User',
component: () => import('../views/Panel.vue'),
},
{
path: '*',
name: 'Login',
component: () => import('../views/Login.vue'),
},
];
const router = new VueRouter({

8
frontend/src/store/index.ts
View file

@ -12,13 +12,15 @@ interface IndexState {
}
export default new Vuex.Store({
state: (): IndexState => ({
state: {
drawer: true,
group: null,
mini: true,
appbarTitle: 'Dashboard',
selectedStudent: 0,
}),
selcetDialog: false,
page: 'about',
showStudentsList: false,
},
mutations: {
},
actions: {

6
frontend/src/store/login.ts
View file

@ -10,11 +10,11 @@ interface LoginState {
}
export default new Vuex.Store({
state: (): LoginState => ({
state: {
isLoading: false,
loginData: null,
showStudentsList: false,
}),
showStudentsList: true,
},
mutations: {
},
actions: {

55
frontend/src/views/Login.vue
View file

@ -1,18 +1,28 @@
<template>
<div id="login">
<img class="image" src="../assets/logo_login.svg" width="500" alt="Wulkanowy">
<v-main style="width: 100%;">
<div style="clear: both;"></div>
<v-card
:loading="this.$store.state.isLoading"
elevation="24"
elevation="10"
id="login-form"
class="mx-auto mt-9">
class="mx-auto"
>
<Baner v-if="window.width > 900"></Baner>
<div class="card">
<v-col>
<form>
<v-container>
<UserLogin v-if="!this.$store.state.showStudentsList"></UserLogin>
<SelectStudent v-if="this.$store.state.showStudentsList"></SelectStudent>
<UserLogin
v-if="!this.$store.state.showStudentsList && !this.$store.state.isLoading">
</UserLogin>
<SelectStudent
v-if="this.$store.state.showStudentsList && !this.$store.state.isLoading">
</SelectStudent>
<Loading v-if="this.$store.state.isLoading"></Loading>
</v-container>
</form>
</v-col>
</div>
</v-card>
</v-main>
</div>
@ -21,17 +31,41 @@
<script>
import UserLogin from '../components/Login/UserLogin.vue';
import SelectStudent from '../components/Login/SelectStudent.vue';
import Baner from '../components/Login/Baner.vue';
import Loading from '../components/Login/Loading.vue';
export default {
name: 'Login',
components: {
SelectStudent,
UserLogin,
Baner,
Loading,
},
data() {
return {
windowWidth: '',
window: {
width: 0,
height: 0,
},
};
},
created() {
window.addEventListener('resize', this.handleResize);
this.handleResize();
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
methods: {
getLoading() {
return this.$store.state.isLoading;
},
handleResize() {
this.window.width = window.innerWidth;
this.window.height = window.innerHeight;
},
},
};
</script>
@ -40,26 +74,23 @@ export default {
::-webkit-scrollbar {
display: none;
}
#login {
text-align: center;
background-position: center center;
overflow: hidden;
background-image: url("../assets/wallpaper.jpg");
background-size: cover;
height: 100%;
width: 100%;
}
#login-form {
width: 500px;
top: 15%;
bottom: 50%;
width: 850px;
margin-bottom: 200px;
}
.login-input {
margin: 10px;
}
.login-button {
margin: 10px;
}

3
frontend/src/views/Panel.vue
View file

@ -1,5 +1,5 @@
<template>
<div>
<div id="App" style="margin: 0;">
<div id="appbar">
<Appbar></Appbar>
<Drawer></Drawer>
@ -21,5 +21,4 @@ export default {
</script>
<style scoped>
</style>

71
frontend/src/views/Privacy.vue Normal file
View file

@ -0,0 +1,71 @@
<template>
<div id="App">
<v-main style="width: 100%;">
<img class="image" src="../assets/logo_login.svg" alt="Wulkanowy">
<v-card
elevation="24"
id="form"
class="mx-auto">
<v-row align="center">
<v-col cols="12">
<div id="nag">Polityka Prywatności</div>
</v-col>
</v-row>
<v-col cols="12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas eget tempor nulla.Nam vulputate nisi ac magna pulvinar,
vitae aliquam lorem consectetur. In egetnplacerat ex, et tempor elit.
Donec ac volutpat orci. Integer sagittis eget mi a blandit. Nullam
ac quam a nisl elementum pretium vel sit amet augue. Praesent
sollicitudin aliquam mi, et condimentum elit vehicula id.
Pellentesque dapibus dolor nec nulla cursus bibendum.
Cras enim tortor, feugiat at bibendum ut, ultricies
non quam. Nulla at lorem non lorem tincidunt tempus.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Suspendisse at rutrum lectus.
Nunc aliquet commodo scelerisque. Ut euismod pellentesque diam
eget accumsan. Fusce eget elementum leo, sed auctor erat.
</v-col>
</v-card>
</v-main>
</div>
</template>
<script>
export default {
name: 'PP',
methods: {
getLoading() {
return this.$store.state.isLoading;
},
},
};
</script>
<style>
::-webkit-scrollbar {
display: none;
}
#App {
text-align: center;
background-position: center center;
overflow: hidden;
background-image: url("../assets/wallpaper.jpg");
background-size: cover;
height: 100%;
width: 100%;
}
#form {
top: 5%;
margin-bottom: 50px;
width: 750px;
padding: 20px;
text-align: justify;
}
.image{
max-width: 500px;
}
</style>