Skip to content

Commit c525e3a

Browse files
author
Balashov Nikita
committed
add-user-page
1 parent ae3b5d0 commit c525e3a

File tree

1 file changed

+179
-26
lines changed

1 file changed

+179
-26
lines changed

‎phone-book/src/add-user/add-user.js‎

Lines changed: 179 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {Url} from '../url/url';
22

33
class AddUserPage {
4-
constructor(store) {
4+
constructor(store, accountName) {
55
this.setStateContact = () => {
66
const {setState} = store;
77
const initializeState = {
@@ -11,7 +11,7 @@ class AddUserPage {
1111
setState(initializeState);
1212
}
1313

14-
this.serverSide = new Url();
14+
this.url = new Url(accountName);
1515
}
1616

1717
render() {
@@ -28,17 +28,17 @@ class AddUserPage {
2828
<form>
2929
3030
<div class="form-group">
31-
<label for="fullName-input">Full name:</label>
31+
<label for="fullName-input"><span class="required">*</span>Full name:</label>
3232
<input type="text" name="fullName" class="form-control" id="fullName-input" placeholder="Enter full name" required>
3333
</div>
3434
3535
<div class="form-group">
36-
<label for="email-input">Email address:</label>
36+
<label for="email-input"><span class="required">*</span>Email address:</label>
3737
<input type="email" name="email" class="form-control" id="email-input" placeholder="Enter email" required>
3838
</div>
3939
4040
<div class="form-group">
41-
<label for="phoneNumber-input">Phone Number:</label>
41+
<label for="phoneNumber-input"><span class="required">*</span>Phone Number:</label>
4242
<input type="number" name="phone" class="form-control" id="phoneNumber-input" placeholder="Enter phone number" required>
4343
</div>
4444
@@ -78,40 +78,193 @@ class AddUserPage {
7878
}
7979

8080
applyListenersForAddUserPage() {
81-
// const fullNameInput = document.querySelector('#fullName-input');
82-
// const emailInput = document.querySelector('#email-input');
83-
// const phoneNumberInput = document.querySelector('#phoneNumber-input');
84-
// const birthDateInput = document.querySelector('#birthDate-input');
85-
// const addressInput = document.querySelector('#address-input');
86-
// const genderInput = document.querySelector('#gender-selection');
87-
// const avatarUrlInput = document.querySelector('#avatarUrl-input');
8881

8982
const addUserForm = document.querySelector('form');
83+
84+
const handlerForInputs = (e) => {
85+
if(e.target.name === 'fullName') {
86+
const VALUE = e.target.value;
87+
88+
if(VALUE.length === 0) {
89+
e.target.classList.remove('wrong')
90+
e.target.classList.remove('correct')
91+
return;
92+
}
93+
94+
if(this.isValidFullName(VALUE)) {
95+
e.target.classList.add('correct')
96+
e.target.classList.remove('wrong')
97+
} else {
98+
e.target.classList.add('wrong')
99+
e.target.classList.remove('correct')
100+
}
101+
}
102+
103+
if(e.target.name === 'email') {
104+
const VALUE = e.target.value;
105+
106+
if(VALUE.length === 0) {
107+
e.target.classList.remove('wrong')
108+
e.target.classList.remove('correct')
109+
return;
110+
}
111+
112+
if(this.isValidEmail(VALUE)) {
113+
e.target.classList.add('correct')
114+
e.target.classList.remove('wrong')
115+
} else {
116+
e.target.classList.add('wrong')
117+
e.target.classList.remove('correct')
118+
}
119+
}
120+
121+
if(e.target.name === 'phone') {
122+
const VALUE = e.target.value;
123+
124+
if(VALUE.length === 0) {
125+
e.target.classList.remove('wrong')
126+
e.target.classList.remove('correct')
127+
return;
128+
}
129+
130+
if(VALUE.length > 9) {
131+
e.target.classList.add('correct')
132+
e.target.classList.remove('wrong')
133+
} else {
134+
e.target.classList.add('wrong')
135+
e.target.classList.remove('correct')
136+
}
137+
}
138+
139+
if(e.target.name === 'birthdate') {
140+
const VALUE = e.target.value;
141+
142+
if(VALUE.length === 0) {
143+
e.target.classList.remove('correct')
144+
return;
145+
}
146+
147+
if(VALUE.length > 9) {
148+
e.target.classList.add('correct')
149+
}
150+
}
151+
152+
if(e.target.name === 'address') {
153+
const VALUE = e.target.value;
154+
155+
if(VALUE.length === 0) {
156+
e.target.classList.remove('correct')
157+
return;
158+
}
159+
160+
if(VALUE.length > 0) {
161+
e.target.classList.add('correct')
162+
}
163+
}
164+
165+
if(e.target.name === "avatarUrl") {
166+
const VALUE = e.target.value;
167+
168+
if(VALUE.length === 0) {
169+
e.target.classList.remove('wrong')
170+
e.target.classList.remove('correct')
171+
return;
172+
}
173+
174+
if(this.isValidURL(VALUE)) {
175+
e.target.classList.add('correct')
176+
e.target.classList.remove('wrong')
177+
} else {
178+
e.target.classList.add('wrong')
179+
e.target.classList.remove('correct')
180+
}
181+
}
182+
183+
};
184+
185+
addUserForm.addEventListener('input', handlerForInputs)
186+
90187
const inputs = [...addUserForm.elements]
91188
.filter(elem => elem.tagName === 'INPUT' || elem.tagName === 'SELECT');
92189

93-
addUserForm.addEventListener('submit', (e) => {
190+
const handlerForSubmit = (e) => {
191+
e.preventDefault();
94192

95193
const user = inputs.reduce((newUser, input) => {
96-
const KEY = input.name;
97-
const VALUE = input.value;
98-
99-
if(VALUE.lenght !== 0) {
100-
newUser[KEY] = VALUE;
194+
if(input.classList.contains('wrong')) {
195+
alert(`${input.name} is incorrect!`);
196+
return;
197+
};
198+
if(input.value.length !== 0
199+
&& input.name !== 'phone'
200+
&& input.name !== 'gender'
201+
&& input.name !== 'fullName'
202+
) {
203+
newUser[input.name] = input.value;
101204
}
102-
if(VALUE === 'Male' || VALUE === 'Female') {
103-
const firstChar = input.value[0];
104-
newUser[KEY] = firstChar;
205+
if(input.value.length !== 0 && input.name === 'phone') {
206+
newUser[input.name] = input.value.replace(/(.{3})(.{3})(.{2})/g, '($1) $2-$3-');
207+
}
208+
if(input.name === 'gender') {
209+
input.value === "Male"
210+
? newUser[input.name] = "M"
211+
: newUser[input.name] = "F"
212+
}
213+
if(input.value.length !== 0 && input.name === 'fullName') {
214+
const formatedFullName = input.value.split(' ').reduce((output, word, index) => {
215+
const splitedWord = word.toLowerCase().split('');
216+
const firstLetter = splitedWord[0].toUpperCase();
217+
splitedWord[0] = firstLetter;
218+
output += splitedWord.join('');
219+
220+
if(index === 0) {
221+
output += ' ';
222+
}
223+
224+
return output;
225+
}, '');
226+
227+
newUser[input.name] = formatedFullName;
105228
}
106229
return newUser;
107-
}, {});
108-
109-
this.serverSide.postUser(user);
110-
})
230+
}, {})
231+
232+
if(user) {
233+
this.url.postUser(user);
234+
235+
inputs.forEach(input => {
236+
if(input.tagName !== "SELECT") {
237+
input.value = "";
238+
input.classList.remove('correct');
239+
}
240+
})
241+
} else {
242+
alert('Something is incorrect!')
243+
}
244+
}
245+
246+
addUserForm.addEventListener('submit', handlerForSubmit)
111247
}
112248

113-
isValid() {
249+
isValidFullName(value) {
250+
const splitedValue = value.split(' ');
251+
252+
return splitedValue.length === 2 && splitedValue[0].length > 0 && splitedValue[1].length > 0;
253+
}
254+
255+
isValidEmail(value) {
256+
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,}))$/;
257+
return re.test(String(value).toLowerCase());
258+
}
114259

260+
isValidURL(value) {
261+
const re = new RegExp('^(https?:\\/\\/)?'+ // protocol
262+
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|'+ // domain name
263+
'((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
264+
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
265+
'(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
266+
'(\\#[-a-z\\d_]*)?$','i'); // fragment locator
267+
return re.test(String(value).toLowerCase());
115268
}
116269
}
117270

0 commit comments

Comments
 (0)