Skip to content

Commit 91b66ce

Browse files
author
Balashov Nikita
committed
edit-user-page
1 parent c778806 commit 91b66ce

File tree

1 file changed

+275
-0
lines changed

1 file changed

+275
-0
lines changed

‎phone-book/src/edit-user-page/edit-user-page.js‎

Lines changed: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,275 @@
1+
import {Url} from '../url/url';
2+
3+
class EditUserPage {
4+
constructor(store, accountName) {
5+
this.setStateEditUser = () => {
6+
const {setState} = store;
7+
const initializeState = {
8+
stateName: 'EDIT USER',
9+
};
10+
setState(initializeState);
11+
}
12+
13+
this.url = new Url(accountName);
14+
}
15+
16+
render(user) {
17+
this.user = user;
18+
19+
return /*html*/`
20+
<div id="add-user-page">
21+
22+
<header class="container">
23+
<div class="row d-flex justify-content-center">
24+
<span class="add-user-header">Edit user ${user.fullName}</span>
25+
</div>
26+
</header>
27+
28+
<main class="container add-user-block">
29+
<form>
30+
31+
<div class="form-group">
32+
<label for="fullName-input">Full name:</label>
33+
<input type="text" name="fullName" class="form-control" id="fullName-input" placeholder="Enter full name">
34+
</div>
35+
36+
<div class="form-group">
37+
<label for="email-input">Email address:</label>
38+
<input type="email" name="email" class="form-control" id="email-input" placeholder="Enter email">
39+
</div>
40+
41+
<div class="form-group">
42+
<label for="phoneNumber-input">Phone Number:</label>
43+
<input type="number" name="phone" class="form-control" id="phoneNumber-input" placeholder="Enter phone number">
44+
<small class="form-text text-muted">Length of your phone number should be more than 9</small>
45+
</div>
46+
47+
<div class="form-group">
48+
<label for="birthDate-input">Birth date:</label>
49+
<input type="date" name="birthdate" class="form-control" id="birthDate-input">
50+
</div>
51+
52+
<div class="form-group">
53+
<label for="address-input">Address:</label>
54+
<input type="text" name="address" class="form-control" id="address-input" placeholder="Enter address">
55+
</div>
56+
57+
<div class="form-group">
58+
<label for="gender-selection">Gender:</label>
59+
<select name="gender" class="form-control" id="gender-selection">
60+
<option>Male</option>
61+
<option>Female</option>
62+
</select>
63+
</div>
64+
65+
<div class="form-group">
66+
<label for="avatarUrl-input">Avatar url:</label>
67+
<input type="text" name="avatarUrl" class="form-control" id="avatarUrl-input" aria-describedby="avatarHelp" placeholder="Enter avatar url">
68+
<small id="avatarHelp" class="form-text text-muted">ex: https://cloud-drive/photo123456.</small>
69+
</div>
70+
71+
<div class="row d-flex justify-content-center">
72+
<button type="submit" class="btn btn-primary">Edit this user</button>
73+
</div>
74+
75+
</form>
76+
</main>
77+
78+
</div>
79+
`;
80+
}
81+
82+
applyListenersForEditUserPage() {
83+
84+
const editUserForm = document.querySelector('form');
85+
86+
const handlerForInputs = (e) => {
87+
if(e.target.name === 'fullName') {
88+
const VALUE = e.target.value;
89+
90+
if(VALUE.length === 0) {
91+
e.target.classList.remove('wrong')
92+
e.target.classList.remove('correct')
93+
return;
94+
}
95+
96+
if(this.isValidFullName(VALUE)) {
97+
e.target.classList.add('correct')
98+
e.target.classList.remove('wrong')
99+
} else {
100+
e.target.classList.add('wrong')
101+
e.target.classList.remove('correct')
102+
}
103+
104+
}
105+
106+
if(e.target.name === 'email') {
107+
const VALUE = e.target.value;
108+
109+
if(VALUE.length === 0) {
110+
e.target.classList.remove('wrong')
111+
e.target.classList.remove('correct')
112+
return;
113+
}
114+
115+
if(this.isValidEmail(VALUE)) {
116+
e.target.classList.add('correct')
117+
e.target.classList.remove('wrong')
118+
} else {
119+
e.target.classList.add('wrong')
120+
e.target.classList.remove('correct')
121+
}
122+
}
123+
124+
if(e.target.name === 'phone') {
125+
const VALUE = e.target.value;
126+
127+
if(VALUE.length === 0) {
128+
e.target.classList.remove('wrong')
129+
e.target.classList.remove('correct')
130+
return;
131+
}
132+
133+
if(VALUE.length > 9) {
134+
e.target.classList.add('correct')
135+
e.target.classList.remove('wrong')
136+
} else {
137+
e.target.classList.add('wrong')
138+
e.target.classList.remove('correct')
139+
}
140+
}
141+
142+
if(e.target.name === 'birthdate') {
143+
const VALUE = e.target.value;
144+
145+
if(VALUE.length === 0) {
146+
e.target.classList.remove('correct')
147+
return;
148+
}
149+
150+
if(VALUE.length > 9) {
151+
e.target.classList.add('correct')
152+
}
153+
}
154+
155+
if(e.target.name === 'address') {
156+
const VALUE = e.target.value;
157+
158+
if(VALUE.length === 0) {
159+
e.target.classList.remove('correct')
160+
return;
161+
}
162+
163+
if(VALUE.length > 0) {
164+
e.target.classList.add('correct')
165+
}
166+
}
167+
168+
if(e.target.name === "avatarUrl") {
169+
const VALUE = e.target.value;
170+
171+
if(VALUE.length === 0) {
172+
e.target.classList.remove('wrong')
173+
e.target.classList.remove('correct')
174+
return;
175+
}
176+
177+
if(this.isValidURL(VALUE)) {
178+
e.target.classList.add('correct')
179+
e.target.classList.remove('wrong')
180+
} else {
181+
e.target.classList.add('wrong')
182+
e.target.classList.remove('correct')
183+
}
184+
}
185+
186+
};
187+
188+
editUserForm.addEventListener('input', handlerForInputs);
189+
const inputs = [...editUserForm.elements]
190+
.filter(elem => elem.tagName === 'INPUT' || elem.tagName === 'SELECT');
191+
192+
const handlerForSubmit = (e) => {
193+
e.preventDefault();
194+
195+
const infoToEdit = inputs.reduce((editedUser, input) => {
196+
if(input.classList.contains('wrong')) {
197+
alert(`${input.name} is incorrect!`);
198+
return;
199+
};
200+
if(input.value.length !== 0
201+
&& input.name !== 'phone'
202+
&& input.name !== 'gender'
203+
&& input.name !== 'fullName'
204+
) {
205+
editedUser[input.name] = input.value;
206+
}
207+
if(input.value.length !== 0 && input.name === 'phone') {
208+
editedUser[input.name] = input.value.replace(/(.{3})(.{3})(.{2})/g, '($1) $2-$3-');
209+
}
210+
if(input.name === 'gender') {
211+
input.value === "Male"
212+
? editedUser[input.name] = "M"
213+
: editedUser[input.name] = "F"
214+
}
215+
if(input.value.length !== 0 && input.name === 'fullName') {
216+
const formatedFullName = input.value.split(' ').reduce((output, word, index) => {
217+
const splitedWord = word.toLowerCase().split('');
218+
const firstLetter = splitedWord[0].toUpperCase();
219+
splitedWord[0] = firstLetter;
220+
output += splitedWord.join('');
221+
222+
if(index === 0) {
223+
output += ' ';
224+
}
225+
226+
return output;
227+
}, '');
228+
229+
editedUser[input.name] = formatedFullName;
230+
}
231+
return editedUser;
232+
}, {});
233+
234+
if(infoToEdit) {
235+
this.url.editUser(infoToEdit, this.user._id);
236+
237+
inputs.forEach(input => {
238+
if(input.tagName !== "SELECT") {
239+
input.value = "";
240+
input.classList.remove('correct');
241+
}
242+
});
243+
} else {
244+
alert('Something is incorrect!');
245+
}
246+
247+
}
248+
249+
editUserForm.addEventListener('submit', handlerForSubmit);
250+
}
251+
252+
isValidFullName(value) {
253+
const splitedValue = value.split(' ');
254+
255+
return splitedValue.length === 2 && splitedValue[0].length > 0 && splitedValue[1].length > 0;
256+
}
257+
258+
isValidEmail(value) {
259+
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
260+
return re.test(String(value).toLowerCase());
261+
}
262+
263+
isValidURL(value) {
264+
const re = new RegExp('^(https?:\\/\\/)?'+ // protocol
265+
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|'+ // domain name
266+
'((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
267+
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
268+
'(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
269+
'(\\#[-a-z\\d_]*)?$','i'); // fragment locator
270+
return re.test(String(value).toLowerCase());
271+
}
272+
273+
}
274+
275+
export {EditUserPage};

0 commit comments

Comments
 (0)