Skip to content
This repository was archived by the owner on Aug 27, 2018. It is now read-only.

Commit 64514bd

Browse files
xnerhuxnerhu
committed
Add login form
1 parent 244cac5 commit 64514bd

File tree

7 files changed

+240
-3
lines changed

7 files changed

+240
-3
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
3/build
22
3/materialdesign
33
3/node_modules
4-
3-panel/build
4+
panel/build
55
3/node_modules
66
rest-api/yarn.lock
77
rest-api/node_modules

‎panel/build/entry.bundle.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎panel/src/images/nersent-logo.png‎

24.2 KB
Loading

‎panel/src/index.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import App from './views/App'
2+
import LoginForm from './views/LoginForm'
23
import UI from './helpers/UI'
34

45
import './styles.scss'
56

67
// Wait for sass load.
78
window.onload = function () {
8-
UI.render(new App(), document.getElementById('app'))
9+
const logged = false
10+
const app = (logged) ? new App() : new LoginForm()
11+
UI.render(app, document.getElementById('app'))
912
}

‎panel/src/styles.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,3 +58,5 @@ $pictureBlur: 10px;
5858
@import 'views/Pages/LessonsPlan/components/LessonHours/style.scss';
5959

6060
@import 'views/Pages/ManageAccount/style.scss';
61+
62+
@import 'views/LoginForm/styles.scss';

‎panel/src/views/LoginForm/index.js‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import Component from '../../helpers/Component'
2+
3+
import Preloader from './../../imports/materialdesign/components/Preloader'
4+
import TextField from './../../imports/materialdesign/components/TextField'
5+
import MaterialButton from './../../imports/materialdesign/components/MaterialButton'
6+
7+
export default class LoginForm extends Component {
8+
beforeRender () {
9+
window.loginForm = this
10+
}
11+
12+
/**
13+
* On textfield input.
14+
* @param {Event}
15+
* @param {TextField}
16+
*/
17+
onTextFieldInput = (e, textfield) => {
18+
if (textfield.error) textfield.toggleError(false)
19+
}
20+
21+
/**
22+
* On button login click.
23+
* Logs user.
24+
* @param {Event}
25+
*/
26+
onLoginButtonClick = (e) => {
27+
if (!this.validate()) {
28+
this.togglePreloader(true)
29+
}
30+
}
31+
32+
/**
33+
* Validates form.
34+
* @return {Boolean} error
35+
*/
36+
validate () {
37+
const login = this.elements.login
38+
const password = this.elements.password
39+
40+
let error = false
41+
42+
if (login.getValue().length < 1) {
43+
login.toggleError(true)
44+
error = true
45+
}
46+
47+
if (password.getValue().length < 1) {
48+
password.toggleError(true)
49+
error = true
50+
}
51+
52+
return error
53+
}
54+
55+
/**
56+
* Shows or hides preloader.
57+
* @param {Boolean}
58+
*/
59+
togglePreloader (flag) {
60+
const preloaderContainer = this.elements.preloaderContainer
61+
62+
preloaderContainer.style[(flag) ? 'display' : 'opacity'] = (flag) ? 'block' : '0'
63+
64+
setTimeout(function () {
65+
preloaderContainer.style[(flag) ? 'opacity' : 'display'] = (flag) ? '1' : 'none'
66+
}, (flag) ? 20 : 300)
67+
}
68+
69+
render () {
70+
return (
71+
<div>
72+
<div className='login-form'>
73+
<div className='title'>
74+
Zaloguj się
75+
</div>
76+
<div className='form'>
77+
<TextField hint='Login/Email' ref='login' onInput={this.onTextFieldInput} />
78+
<TextField className='password' hint='Hasło' type='password' ref='password' onInput={this.onTextFieldInput} />
79+
<div className='incorrect-data'>
80+
Dane są nieprawidłowe
81+
</div>
82+
<div className='bottom-container'>
83+
<MaterialButton text='ZALOGUJ' onClick={this.onLoginButtonClick} />
84+
<a href='http://www.blog.nersent.tk/reset-password' className='reset-password'>
85+
Nie pamiętasz hasła?
86+
</a>
87+
</div>
88+
</div>
89+
<div className='preloader-container' ref='preloaderContainer'>
90+
<Preloader />
91+
</div>
92+
</div>
93+
<a href='https://www.github.com/xNerhu22/MyClassBlog' target='_blank' className='github'>
94+
GitHub
95+
</a>
96+
<a href='https://www.nersent.tk' target='_blank' className='copy-right'>
97+
&copy; 2013-2018 Nersent
98+
<div className='nersent-logo' />
99+
</a>
100+
</div>
101+
)
102+
}
103+
}

‎panel/src/views/LoginForm/styles.scss‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
html, body {
2+
@include Roboto-Regular;
3+
@include cursor-default;
4+
background-color: #eee;
5+
}
6+
7+
.login-form {
8+
width: 100%;
9+
max-width: 450px;
10+
height: auto;
11+
padding-top: 54px;
12+
padding-bottom: 64px;
13+
background-color: #fff;
14+
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
15+
position: absolute;
16+
top: 25%;
17+
left: 50%;
18+
transform: translate(-50%, -25%);
19+
20+
& .title {
21+
width: calc(100% - 32px);
22+
padding: 16px;
23+
font-size: 18px;
24+
color: #fff;
25+
background-color: #3f51b5;
26+
z-index: 2;
27+
position: absolute;
28+
top: 0;
29+
left: 0;
30+
}
31+
32+
& .form {
33+
padding-top: 24px;
34+
padding-bottom: 16px;
35+
36+
& .material-text-field {
37+
width: calc(100% - 64px);
38+
margin: 0 auto;
39+
40+
&.password {
41+
margin-top: 16px;
42+
}
43+
}
44+
45+
& .incorrect-data {
46+
color: #d32f2f;
47+
font-size: 14px;
48+
left: 32px;
49+
bottom: 54px;
50+
position: absolute;
51+
opacity: 0;
52+
transition: 0.3s opacity;
53+
}
54+
55+
& .bottom-container {
56+
width: 100%;
57+
position: absolute;
58+
bottom: 16px;
59+
60+
& .material-button {
61+
margin-right: 32px;
62+
float: right;
63+
}
64+
65+
& .reset-password {
66+
position: absolute;
67+
left: 32px;
68+
@include center-vertical();
69+
}
70+
71+
&::after {
72+
content: '';
73+
display: block;
74+
clear: both;
75+
}
76+
}
77+
}
78+
79+
& .preloader-container {
80+
width: 100%;
81+
height: 100%;
82+
position: absolute;
83+
left: 0;
84+
top: 0;
85+
background-color: #fff;
86+
opacity: 0;
87+
display: none;
88+
transition: 0.3s opacity;
89+
z-index: 1;
90+
91+
& .material-preloader {
92+
width: 54px;
93+
height: 54px;
94+
position: absolute;
95+
left: 50%;
96+
top: 50%;
97+
transform: translate(-50%, -50%);
98+
}
99+
}
100+
}
101+
102+
.copy-right, .github {
103+
position: absolute;
104+
left: 50%;
105+
transform: translateX(-50%);
106+
font-size: 16px;
107+
}
108+
109+
.copy-right {
110+
bottom: 16px;
111+
color: rgba(0, 0, 0, 0.74);
112+
113+
& .nersent-logo {
114+
width: 48px;
115+
height: 48px;
116+
@include image-center(100%, auto);
117+
background-image: url(images/nersent-logo.png);
118+
float: right;
119+
position: absolute;
120+
top: 50%;
121+
right: -56px;
122+
transform: translateY(-50%);
123+
}
124+
}
125+
126+
.github {
127+
bottom: 48px;
128+
color: rgba(0, 0, 0, 0.54);
129+
}

0 commit comments

Comments
 (0)