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

Commit 266e175

Browse files
xnerhuxnerhu
committed
Add manage account page
1 parent f6c4755 commit 266e175

File tree

9 files changed

+427
-2
lines changed

9 files changed

+427
-2
lines changed

‎panel/src/images/NavigationDrawer/manage-account.png‎

1.16 KB
Loading

‎panel/src/imports/materialdesign/components/TextField/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@ export default class TextField extends Component {
6565
textarea.style.height = 'auto'
6666
textarea.style.height = textarea.scrollHeight - 16 + 'px'
6767
}
68+
69+
const onInput = this.props.onInput
70+
if (typeof onInput === 'function') onInput(e, this)
6871
}
6972

7073
/**

‎panel/src/styles.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,5 @@ $pictureBlur: 10px;
5656
@import 'views/Pages/LessonsPlan/components/Day/style.scss';
5757
@import 'views/Pages/LessonsPlan/components/ExpansionPanel/style.scss';
5858
@import 'views/Pages/LessonsPlan/components/LessonHours/style.scss';
59+
60+
@import 'views/Pages/ManageAccount/style.scss';

‎panel/src/views/App/components/NavigationDrawer/components/NavigationDrawerItem/style.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,3 +49,9 @@
4949
background-image: url(images/NavigationDrawer/lessonsplan.png);
5050
}
5151
}
52+
53+
.navigation-drawer-manage-account {
54+
& .icon {
55+
background-image: url(images/NavigationDrawer/manage-account.png);
56+
}
57+
}

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

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import PostsPage from '../Pages/Posts'
2727
import GalleryPage from '../Pages/Gallery'
2828
import AboutClassPage from '../Pages/AboutClass'
2929
import LessonsPlanPage from '../Pages/LessonsPlan'
30+
import ManageAccountPage from '../Pages/ManageAccount'
3031

3132
import FAB from './../../imports/materialdesign/components/FAB'
3233
import Menu from './../../imports/materialdesign/components/Menu'
@@ -42,7 +43,11 @@ export default class App extends Component {
4243
this.defaultTitle = 'Posty'
4344

4445
this.accountInfo = {
45-
userName: 'Mikołaj Palkiewicz'
46+
userID: 1,
47+
login: 'mikolajpalkiewicz',
48+
userName: 'Mikołaj Palkiewicz',
49+
avatar: 'https://scontent-waw1-1.xx.fbcdn.net/v/t1.0-9/14581320_549947718524540_5437545186607783553_n.jpg?oh=1d709d8978f80d6887041c3e9583f27f&oe=59994281',
50+
email: 'xnerhu22@onet.pl'
4651
}
4752

4853
this.elementsToCall = []
@@ -103,6 +108,14 @@ export default class App extends Component {
103108
return this.elements.lessonsPlanPage
104109
}
105110

111+
/**
112+
* Gets manage account page.
113+
* @return {ManageAccountPage}
114+
*/
115+
getManageAccountPage () {
116+
return this.elements.manageAccountPage
117+
}
118+
106119
/**
107120
* Gets menu.
108121
* @return {Menu}
@@ -192,6 +205,7 @@ export default class App extends Component {
192205
logUser () {
193206
this.accountInfo = {
194207
userID: 1,
208+
login: 'mikolajpalkiewicz',
195209
userName: 'Mikołaj Palkiewicz',
196210
avatar: 'https://scontent-waw1-1.xx.fbcdn.net/v/t1.0-9/14581320_549947718524540_5437545186607783553_n.jpg?oh=1d709d8978f80d6887041c3e9583f27f&oe=59994281',
197211
email: 'xnerhu22@onet.pl'
@@ -332,6 +346,13 @@ export default class App extends Component {
332346
onClick: function (e) {
333347
PageManager.selectPage(self.getLessonsPlanPage())
334348
}
349+
},
350+
{
351+
text: 'Zarządzaj kontem',
352+
className: 'navigation-drawer-manage-account',
353+
onClick: function (e) {
354+
PageManager.selectPage(self.getManageAccountPage())
355+
}
335356
}
336357
]
337358

@@ -424,6 +445,7 @@ export default class App extends Component {
424445
<GalleryPage ref='galleryPage' />
425446
<AboutClassPage ref='aboutClassPage' />
426447
<LessonsPlanPage ref='lessonsPlanPage' />
448+
<ManageAccountPage ref='manageAccountPage' />
427449
</div>
428450
<PostDialog ref='postDialog' />
429451
</div>
@@ -487,6 +509,8 @@ export default class App extends Component {
487509
pageToSelect = this.getAboutClassPage()
488510
} else if (urlPage === 'lessonsplan') {
489511
pageToSelect = this.getLessonsPlanPage()
512+
} else if (urlPage === 'manageaccount') {
513+
pageToSelect = this.getManageAccountPage()
490514
}
491515
}
492516

‎panel/src/views/Pages/LessonsPlan/components/ExpansionPanel/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
margin-top: 16px;
1010
background-color: #fff;
1111
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
12+
border-radius: 2px;
1213

1314
&:first-child {
1415
margin-top: 0px;

‎panel/src/views/Pages/ManageAccount/index.js‎

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
import Component from '../../../helpers/Component'
2+
3+
import TextField from '../../../imports/materialdesign/components/TextField'
4+
import MaterialButton from '../../../imports/materialdesign/components/MaterialButton'
5+
import Preloader from '../../../imports/materialdesign/components/Preloader'
6+
7+
export default class ManageAccountPage extends Component {
8+
beforeRender () {
9+
this.pageData = {
10+
title: 'Zarządzaj kontem',
11+
url: 'manageaccount',
12+
loaded: false
13+
}
14+
15+
this.isEdited = false
16+
this.avatar = null
17+
this.canShowButtons = false
18+
}
19+
20+
/**
21+
* Gets root.
22+
* @return {DOMElement} root
23+
*/
24+
getRoot () {
25+
return this.elements.root
26+
}
27+
28+
/**
29+
* Loads categories.
30+
*/
31+
load () {
32+
const self = this
33+
34+
const app = window.app
35+
36+
setTimeout(function () {
37+
app.togglePreloader(false)
38+
app.pagesData.loading = false
39+
self.canShowButtons = true
40+
}, 10)
41+
}
42+
43+
/**
44+
* On user logs event.
45+
*/
46+
onUserLog () {
47+
this.setForm()
48+
}
49+
50+
setForm () {
51+
const app = window.app
52+
const accountInfo = app.accountInfo
53+
54+
this.avatar = accountInfo.avatar
55+
this.elements.avatar.style.backgroundImage = 'url(' + accountInfo.avatar + ')'
56+
this.elements.login.setValue(accountInfo.login)
57+
this.elements.name.setValue(accountInfo.userName)
58+
this.elements.email.setValue(accountInfo.email)
59+
this.elements.password.setValue('')
60+
this.elements.passwordVerify.setValue('')
61+
}
62+
63+
onTextFieldInput = (e, textField) => {
64+
if (this.canShowButtons) {
65+
this.isEdited = true
66+
this.toggleButtons(true)
67+
68+
if (textField.error) textField.toggleError(false)
69+
}
70+
}
71+
72+
/**
73+
* Shows or hides action buttons. (save and cancel)
74+
* @param {Boolean}
75+
*/
76+
toggleButtons (flag) {
77+
const buttonsContainer = this.elements.buttonsContainer
78+
79+
buttonsContainer.style.height = ((flag) ? buttonsContainer.scrollHeight : 0) + 'px'
80+
}
81+
82+
/**
83+
* Shows or hides preloader.
84+
* @param {Boolean}
85+
*/
86+
togglePreloader (flag) {
87+
const container = this.elements.preloaderContainer
88+
89+
container.style[(flag) ? 'display' : 'opacity'] = (flag) ? 'block' : '0'
90+
91+
setTimeout(function () {
92+
container.style[(flag) ? 'opacity' : 'display'] = (flag) ? '1' : 'none'
93+
}, (flag) ? 20 : 300)
94+
}
95+
96+
/**
97+
* On save button click.
98+
* Saves settings.
99+
* @param {Event}
100+
*/
101+
onSaveButtonClick = (e) => {
102+
const self = this
103+
104+
const app = window.app
105+
106+
this.canShowButtons = false
107+
108+
if (this.verifyData()) {
109+
this.toggleButtons(false)
110+
this.togglePreloader(true)
111+
112+
app.accountInfo.avatar = this.avatar
113+
app.accountInfo.login = this.elements.login.getValue()
114+
app.accountInfo.userName = this.elements.name.getValue()
115+
app.accountInfo.email = this.elements.email.getValue()
116+
117+
console.log(app.accountInfo)
118+
119+
setTimeout(function () {
120+
self.togglePreloader(false)
121+
self.canShowButtons = true
122+
}, 1000)
123+
}
124+
}
125+
126+
/**
127+
* On cancel button click.
128+
* Backs settings.
129+
* @param {Event}
130+
*/
131+
onCancelButtonClick = (e) => {
132+
this.setForm()
133+
this.toggleButtons(false)
134+
}
135+
136+
verifyData () {
137+
const textFields = [
138+
this.elements.login,
139+
this.elements.name,
140+
this.elements.email
141+
]
142+
143+
let correct = true
144+
145+
for (var i = 0; i < textFields.length; i++) {
146+
if (!this.verifyTextField(textFields[i])) correct = false
147+
}
148+
149+
const password = this.elements.password.getValue()
150+
const passwordVerifyTextField = this.elements.passwordVerify
151+
const passwordVerify = passwordVerifyTextField.getValue()
152+
153+
if (password.length >= 1) {
154+
if (password !== passwordVerify) {
155+
passwordVerifyTextField.toggleError(true)
156+
return false
157+
}
158+
}
159+
160+
return correct
161+
}
162+
163+
verifyTextField (textField) {
164+
if (textField.getValue().length < 1) {
165+
textField.toggleError(true)
166+
return false
167+
}
168+
169+
return true
170+
}
171+
172+
/**
173+
* On avatar click.
174+
* Triggers file input dialog.
175+
* @param {Event}
176+
*/
177+
onAvatarClick = (e) => {
178+
const self = this
179+
180+
const input = document.createElement('input')
181+
182+
input.type = 'file'
183+
input.accept = 'image/*'
184+
185+
input.addEventListener('change', function (e) {
186+
let reader = new FileReader()
187+
188+
reader.onload = function (e) {
189+
const src = e.target.result
190+
191+
self.avatar = src
192+
self.elements.avatar.style.backgroundImage = 'url(' + src + ')'
193+
self.toggleButtons(true)
194+
}
195+
196+
reader.readAsDataURL(input.files[0])
197+
})
198+
199+
setTimeout(function () {
200+
input.click()
201+
}, 20)
202+
}
203+
204+
render () {
205+
return (
206+
<div className='page page-manage-account' ref='root'>
207+
<div className='page-manage-account-container'>
208+
<div className='section avatar'>
209+
<div className='title'>
210+
Avatar
211+
</div>
212+
<div className='control'>
213+
<div className='avatar' ref='avatar' onClick={this.onAvatarClick} />
214+
</div>
215+
</div>
216+
<div className='section login'>
217+
<div className='title'>
218+
Login
219+
</div>
220+
<div className='control'>
221+
<TextField ref='login' onInput={this.onTextFieldInput} />
222+
</div>
223+
</div>
224+
<div className='section name'>
225+
<div className='title'>
226+
Imię i Nazwisko
227+
</div>
228+
<div className='control'>
229+
<TextField ref='name' onInput={this.onTextFieldInput} />
230+
</div>
231+
</div>
232+
<div className='section email'>
233+
<div className='title'>
234+
E-Mail
235+
</div>
236+
<div className='control'>
237+
<TextField ref='email' onInput={this.onTextFieldInput} />
238+
</div>
239+
</div>
240+
<div className='section password'>
241+
<div className='title'>
242+
Hasło
243+
</div>
244+
<div className='control'>
245+
<TextField ref='password' type='password' onInput={this.onTextFieldInput} />
246+
</div>
247+
</div>
248+
<div className='section password-verify'>
249+
<div className='title'>
250+
Powtórz hasło
251+
</div>
252+
<div className='control'>
253+
<TextField ref='passwordVerify' type='password' onInput={this.onTextFieldInput} />
254+
</div>
255+
</div>
256+
<div className='buttons-container' ref='buttonsContainer'>
257+
<MaterialButton text='ZAPISZ' onClick={this.onSaveButtonClick} shadow={false} rippleStyle={{
258+
backgroundColor: '#3f51b5',
259+
opacity: 0.2
260+
}} />
261+
<MaterialButton className='cancel' onClick={this.onCancelButtonClick} text='ANULUJ' shadow={false} rippleStyle={{
262+
backgroundColor: '#000',
263+
opacity: 0.2
264+
}} />
265+
</div>
266+
<div className='preloader-container' ref='preloaderContainer'>
267+
<Preloader />
268+
</div>
269+
</div>
270+
</div>
271+
)
272+
}
273+
274+
afterRender () {
275+
window.app.elementsToCall.push(this)
276+
}
277+
}

0 commit comments

Comments
 (0)