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": "^2.6.11",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vuetify": "^2.4.0", "vuetify": "^2.4.0",
"vuex": "^3.4.0" "vuex": "^3.6.2"
}, },
"devDependencies": { "devDependencies": {
"@types/chai": "^4.2.11", "@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> <!DOCTYPE html>
<html lang="en"> <html lang="pl">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <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"> <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://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"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</head> </head>
<body> <body>
<noscript> <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> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- 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> <template>
<div id="App" style="min-height: 476px; margin: 0;">
<v-row align="center"> <v-row align="center">
<v-col cols="12"> <v-col cols="12">
<a>Select student to login!</a> <div id="nag">Wybierz ucznia</div>
</v-col> <v-radio-group>
<v-col cols="12">
<v-radio-group v-model="radioGroup" @change="$store.state.selectedStudent = radioGroup">
<v-radio <v-radio
v-model="selectedStudent" v-model="selectedStudent"
v-for="student in this.$store.state.loginData.data.students.data" v-for="student in this.$store.state.loginData.data.students.data"
@ -14,14 +13,12 @@
</v-radio-group> </v-radio-group>
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-btn <v-btn id="buttonTwo" dark color="red" elevation="2"
class="login-button" @click="chooseClicked()" :disabled="inputDisabled"
depressed >Wybierz</v-btn>
color="primary"
@click="chooseClicked()">
Choose</v-btn>
</v-col> </v-col>
</v-row> </v-row>
</div>
</template> </template>
<script> <script>
@ -29,7 +26,8 @@ export default {
name: 'SelectStudent', name: 'SelectStudent',
data() { data() {
return { return {
radioGroup: 0, itemSelected: '',
radioGroup: 1,
selectedStudent: '', selectedStudent: '',
studentList: { studentList: {
type: Array, type: Array,
@ -45,10 +43,28 @@ export default {
this.$store.state.showStudentsList = true; this.$store.state.showStudentsList = true;
await this.$router.push('/user'); await this.$router.push('/user');
}, },
back() {
this.$store.state.showStudentsList = false;
},
}, },
}; };
</script> </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> </style>

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

@ -1,47 +1,24 @@
<template> <template>
<div> <div id="App" style="height: 476px; margin: 0;">
<v-row align="center"> <v-row align="center">
<v-col cols="12"></v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <div id="nag">Zaloguj się za pomocą konta ucznia lub rodzica</div>
class="login-input" <v-text-field color="red" v-model="login" :disabled="inputDisabled"
v-model="login" label="E-mail" outlined></v-text-field>
label="E-mail" <v-text-field color="red" v-model="password" :disabled="inputDisabled"
outlined label="Hasło" outlined type="password"></v-text-field>
clearable> <v-text-field color="red" v-model="symbol" :disabled="inputDisabled"
</v-text-field> label="Symbol" outlined></v-text-field>
<v-text-field <v-select color="red" v-model="selectedSymbol" :disabled="inputDisabled"
class="login-input" label="Wybierz odmianę dziennika UONET+" outlined :items="item"
v-model="password" v-on:change="fakelog()"
label="Password" item-color="red"></v-select>
outlined <v-btn id="buttonTwo" dark color="red" elevation="2"
clearable> @click="loginUser()">Zaloguj się</v-btn>
</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>
</v-col> </v-col>
</v-row> </v-row>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import login from '../../api/login'; import login from '../../api/login';
@ -51,43 +28,65 @@ interface Login {
login: string login: string
password: string password: string
diaryNames: Array<string> diaryNames: Array<string>
selectedDiary: string selectedDiary: string,
selectedSymbol: string,
symbol: string
} }
export default Vue.extend({ export default Vue.extend({
name: 'UserLogin', name: 'UserLogin',
data: (): Login => ({ data() {
login: '', return {
password: '', inputDisabled: false,
diaryNames: [], login: '',
selectedDiary: '', password: '',
}), selectedSymbol: '',
created() { symbol: '',
this.diaryNames = diary.diaries.map((item): string => item.name); item: [
'Vulcan',
'Fakelog',
],
};
}, },
methods: { methods: {
async loginUser() { async loginUser() {
this.inputDisabled = true;
Vue.set(this.$store.state, 'isLoading', 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, const response = await login.login(this.login, this.password,
'powiatwulkanowy', diary.diaries[index].url); 'powiatwulkanowy', diary.diaries[index].url);
this.$store.state.loginData = response.data; this.$store.state.loginData = response.data;
if (this.$store.state.loginData.data.students.data.length > 1) { if (this.$store.state.loginData.data.students.data.length > 1) {
this.$store.state.isLoading = false;
this.$store.state.showStudentsList = true; this.$store.state.showStudentsList = true;
this.$store.state.isLoading = false;
} }
}, },
itemSelected() {
if (this.selectedDiary === 'Fakelog') { fakelog() {
this.login = 'jan@fakelog.tk'; if (this.selectedSymbol === 'Fakelog') {
this.login = 'jan@fakelog.cf';
this.password = 'jan123'; this.password = 'jan123';
this.symbol = 'powiatwulkanowy';
} }
}, },
}, },
}); });
</script> </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> </style>

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

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

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

@ -12,18 +12,19 @@
</v-list-item-avatar> </v-list-item-avatar>
<v-list-item-content> <v-list-item-content>
<v-list-item-title class="title"> <v-list-item-title class="title">
{{ nameSurname }} Jan Kowalski
</v-list-item-title> </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-list-item-content>
<v-btn <v-btn
icon icon
@click.stop="mini = !mini"> @click.stop="mini = !mini">
<v-icon>mdi-chevron-right</v-icon> <v-icon>mdi-chevron-left</v-icon>
</v-btn> </v-btn>
</v-list-item> </v-list-item>
</v-list> </v-list>
<v-divider></v-divider> <v-divider></v-divider>
<v-list <v-list
nav nav
dense> dense>
@ -31,7 +32,7 @@
v-model="this.$store.state.group"> v-model="this.$store.state.group">
<v-list-item> <v-list-item>
<v-list-item-icon> <v-list-item-icon>
<v-icon>mdi-home</v-icon> <v-icon>mdi-view-dashboard</v-icon>
</v-list-item-icon> </v-list-item-icon>
<v-list-item-title>Dashboard</v-list-item-title> <v-list-item-title>Dashboard</v-list-item-title>
</v-list-item> </v-list-item>
@ -50,6 +51,13 @@
<v-list-item-title>Attendance</v-list-item-title> <v-list-item-title>Attendance</v-list-item-title>
</v-list-item> </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>
<v-list-item-icon> <v-list-item-icon>
<v-icon>mdi-table-clock</v-icon> <v-icon>mdi-table-clock</v-icon>
@ -71,6 +79,13 @@
<v-list-item-title>Homework</v-list-item-title> <v-list-item-title>Homework</v-list-item-title>
</v-list-item> </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>
<v-list-item-icon> <v-list-item-icon>
<v-icon>mdi-devices</v-icon> <v-icon>mdi-devices</v-icon>
@ -84,7 +99,23 @@
</v-list-item-icon> </v-list-item-icon>
<v-list-item-title>School</v-list-item-title> <v-list-item-title>School</v-list-item-title>
</v-list-item> </v-list-item>
</v-list-item-group>
<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-list>
</v-navigation-drawer> </v-navigation-drawer>
</div> </div>
@ -119,5 +150,4 @@ export default {
</script> </script>
<style scoped> <style scoped>
</style> </style>

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

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

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

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

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

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

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

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

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

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