-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbundle.js
More file actions
197 lines (169 loc) · 70 KB
/
Copy pathbundle.js
File metadata and controls
197 lines (169 loc) · 70 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/build/";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/index.js");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./src/add-user/add-user.js":
/*!**********************************!*\
!*** ./src/add-user/add-user.js ***!
\**********************************/
/*! exports provided: AddUserPage */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"AddUserPage\", function() { return AddUserPage; });\n/* harmony import */ var _url_url__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../url/url */ \"./src/url/url.js\");\n\n\nclass AddUserPage {\n constructor(store, accountName) {\n this.setStateAddUser = () => {\n const { setState } = store;\n const initializeState = {\n stateName: 'ADD USER',\n activePage: this.render()\n };\n setState(initializeState);\n window.history.pushState(initializeState.activePage, initializeState.stateName);\n };\n\n this.url = new _url_url__WEBPACK_IMPORTED_MODULE_0__[\"Url\"](accountName);\n }\n\n render() {\n return (/*html*/`\n <div id=\"add-user-page\">\n\n <header class=\"container\">\n <div class=\"row d-flex justify-content-center\">\n <span class=\"add-user-header\">Add new user</span>\n </div>\n </header>\n\n <main class=\"container add-user-block\">\n <form>\n\n <div class=\"form-group\">\n <label for=\"fullName-input\"><span class=\"required\">*</span>Full name:</label>\n <input type=\"text\" name=\"fullName\" class=\"form-control\" id=\"fullName-input\" placeholder=\"Enter full name\" required>\n </div>\n\n <div class=\"form-group\">\n <label for=\"email-input\"><span class=\"required\">*</span>Email address:</label>\n <input type=\"email\" name=\"email\" class=\"form-control\" id=\"email-input\" placeholder=\"Enter email\" required>\n </div>\n\n <div class=\"form-group\">\n <label for=\"phoneNumber-input\"><span class=\"required\">*</span>Phone Number:</label>\n <input type=\"number\" name=\"phone\" class=\"form-control\" id=\"phoneNumber-input\" placeholder=\"Enter phone number\" required>\n </div>\n\n <div class=\"form-group\">\n <label for=\"birthDate-input\">Birth date:</label>\n <input type=\"date\" name=\"birthdate\" class=\"form-control\" id=\"birthDate-input\">\n </div>\n\n <div class=\"form-group\">\n <label for=\"address-input\">Address:</label>\n <input type=\"text\" name=\"address\" class=\"form-control\" id=\"address-input\" placeholder=\"Enter address\">\n </div>\n\n <div class=\"form-group\">\n <label for=\"gender-selection\">Gender:</label>\n <select name=\"gender\" class=\"form-control\" id=\"gender-selection\">\n <option>Male</option>\n <option>Female</option>\n </select>\n </div>\n \n <div class=\"form-group\">\n <label for=\"avatarUrl-input\">Avatar url:</label>\n <input type=\"text\" name=\"avatarUrl\" class=\"form-control\" id=\"avatarUrl-input\" aria-describedby=\"avatarHelp\" placeholder=\"Enter avatar url\">\n <small id=\"avatarHelp\" class=\"form-text text-muted\">ex: https://cloud-drive/photo123456.</small>\n </div>\n\n <div class=\"row d-flex justify-content-center\">\n <button type=\"submit\" class=\"btn btn-primary\">Add user</button> \n </div>\n \n </form>\n </main>\n\n </div>\n `\n );\n }\n\n applyListenersForAddUserPage() {\n\n const addUserForm = document.querySelector('form');\n\n const handlerForInputs = e => {\n if (e.target.name === 'fullName') {\n const VALUE = e.target.value;\n\n if (VALUE.length === 0) {\n e.target.classList.remove('wrong');\n e.target.classList.remove('correct');\n return;\n }\n\n if (this.isValidFullName(VALUE)) {\n e.target.classList.add('correct');\n e.target.classList.remove('wrong');\n } else {\n e.target.classList.add('wrong');\n e.target.classList.remove('correct');\n }\n }\n\n if (e.target.name === 'email') {\n const VALUE = e.target.value;\n\n if (VALUE.length === 0) {\n e.target.classList.remove('wrong');\n e.target.classList.remove('correct');\n return;\n }\n\n if (this.isValidEmail(VALUE)) {\n e.target.classList.add('correct');\n e.target.classList.remove('wrong');\n } else {\n e.target.classList.add('wrong');\n e.target.classList.remove('correct');\n }\n }\n\n if (e.target.name === 'phone') {\n const VALUE = e.target.value;\n\n if (VALUE.length === 0) {\n e.target.classList.remove('wrong');\n e.target.classList.remove('correct');\n return;\n }\n\n if (VALUE.length > 9) {\n e.target.classList.add('correct');\n e.target.classList.remove('wrong');\n } else {\n e.target.classList.add('wrong');\n e.target.classList.remove('correct');\n }\n }\n\n if (e.target.name === 'birthdate') {\n const VALUE = e.target.value;\n\n if (VALUE.length === 0) {\n e.target.classList.remove('correct');\n return;\n }\n\n if (VALUE.length > 9) {\n e.target.classList.add('correct');\n }\n }\n\n if (e.target.name === 'address') {\n const VALUE = e.target.value;\n\n if (VALUE.length === 0) {\n e.target.classList.remove('correct');\n return;\n }\n\n if (VALUE.length > 0) {\n e.target.classList.add('correct');\n }\n }\n\n if (e.target.name === \"avatarUrl\") {\n const VALUE = e.target.value;\n\n if (VALUE.length === 0) {\n e.target.classList.remove('wrong');\n e.target.classList.remove('correct');\n return;\n }\n\n if (this.isValidURL(VALUE)) {\n e.target.classList.add('correct');\n e.target.classList.remove('wrong');\n } else {\n e.target.classList.add('wrong');\n e.target.classList.remove('correct');\n }\n }\n };\n\n addUserForm.addEventListener('input', handlerForInputs);\n\n const inputs = [...addUserForm.elements].filter(elem => elem.tagName === 'INPUT' || elem.tagName === 'SELECT');\n\n const handlerForSubmit = e => {\n e.preventDefault();\n\n const user = inputs.reduce((newUser, input) => {\n if (input.classList.contains('wrong')) {\n alert(`${input.name} is incorrect!`);\n return;\n };\n if (input.value.length !== 0 && input.name !== 'phone' && input.name !== 'gender' && input.name !== 'fullName') {\n newUser[input.name] = input.value;\n }\n if (input.value.length !== 0 && input.name === 'phone') {\n newUser[input.name] = input.value.replace(/(.{3})(.{3})(.{2})/g, '($1) $2-$3-');\n }\n if (input.name === 'gender') {\n input.value === \"Male\" ? newUser[input.name] = \"M\" : newUser[input.name] = \"F\";\n }\n if (input.value.length !== 0 && input.name === 'fullName') {\n const formatedFullName = input.value.split(' ').reduce((output, word, index) => {\n const splitedWord = word.toLowerCase().split('');\n const firstLetter = splitedWord[0].toUpperCase();\n splitedWord[0] = firstLetter;\n output += splitedWord.join('');\n\n if (index === 0) {\n output += ' ';\n }\n\n return output;\n }, '');\n\n newUser[input.name] = formatedFullName;\n }\n return newUser;\n }, {});\n\n if (user) {\n this.url.postUser(user);\n\n inputs.forEach(input => {\n if (input.tagName !== \"SELECT\") {\n input.value = \"\";\n input.classList.remove('correct');\n }\n });\n } else {\n alert('Something is incorrect!');\n }\n };\n\n addUserForm.addEventListener('submit', handlerForSubmit);\n }\n\n isValidFullName(value) {\n const splitedValue = value.split(' ');\n\n return splitedValue.length === 2 && splitedValue[0].length > 0 && splitedValue[1].length > 0;\n }\n\n isValidEmail(value) {\n 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,}))$/;\n return re.test(String(value).toLowerCase());\n }\n\n isValidURL(value) {\n const re = new RegExp('^(https?:\\\\/\\\\/)?' + // protocol\n '((([a-z\\\\d]([a-z\\\\d-]*[a-z\\\\d])*)\\\\.?)+[a-z]{2,}|' + // domain name\n '((\\\\d{1,3}\\\\.){3}\\\\d{1,3}))' + // OR ip (v4) address\n '(\\\\:\\\\d+)?(\\\\/[-a-z\\\\d%_.~+]*)*' + // port and path\n '(\\\\?[;&a-z\\\\d%_.~+=-]*)?' + // query string\n '(\\\\#[-a-z\\\\d_]*)?$', 'i'); // fragment locator\n return re.test(String(value).toLowerCase());\n }\n}\n\n\n\n//# sourceURL=webpack:///./src/add-user/add-user.js?");
/***/ }),
/***/ "./src/authorization-page/authorization-page.js":
/*!******************************************************!*\
!*** ./src/authorization-page/authorization-page.js ***!
\******************************************************/
/*! exports provided: AuthorizationPage */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"AuthorizationPage\", function() { return AuthorizationPage; });\nclass AuthorizationPage {\n constructor(store) {\n this.setStateAuthorization = listeners => {\n const { setState } = store;\n const initializeState = {\n stateName: 'AUTHORIZATION',\n activePage: this.render()\n };\n setState(initializeState);\n window.history.pushState(initializeState.activePage, initializeState.stateName);\n };\n }\n\n render() {\n return (/*html*/`\n <div class=\"authorization-block\">\n <h1 class=\"au-title\">Authorization</h1>\n <div class=\"wraper-for-authorization-inputs\">\n <input class=\"au-input\" type=\"text\" placeholder=\"Login\">\n <button id=\"log-in\" class=\"au-btn btn btn-primary\">Log in</button>\n </div>\n </div>\n `\n );\n }\n}\n\n\n\n//# sourceURL=webpack:///./src/authorization-page/authorization-page.js?");
/***/ }),
/***/ "./src/components/mobile-operators-identifiers.js":
/*!********************************************************!*\
!*** ./src/components/mobile-operators-identifiers.js ***!
\********************************************************/
/*! exports provided: MOBILE_OPERATORS_IDENTIFICATORS */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"MOBILE_OPERATORS_IDENTIFICATORS\", function() { return MOBILE_OPERATORS_IDENTIFICATORS; });\nconst MOBILE_OPERATORS_IDENTIFICATORS = {\n kuivstar: ['067', '096', '097', '098', '068'],\n vodafone: ['050', '066', '095', '099'],\n life: ['063', '093', '073']\n};\n\n\n\n//# sourceURL=webpack:///./src/components/mobile-operators-identifiers.js?");
/***/ }),
/***/ "./src/contact/contact.js":
/*!********************************!*\
!*** ./src/contact/contact.js ***!
\********************************/
/*! exports provided: ContactPage */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ContactPage\", function() { return ContactPage; });\n/* harmony import */ var _url_url__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../url/url */ \"./src/url/url.js\");\n/* harmony import */ var _user_page_user_page__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../user-page/user-page */ \"./src/user-page/user-page.js\");\n\n\n\n/* ================== CONTACT START================== */\n\nclass ContactPage {\n constructor(store, accountName) {\n this.setStateContact = () => {\n const { setState, getState } = store;\n const initializeState = {\n stateName: 'CONTACT',\n activePage: this.render()\n };\n setState(initializeState);\n window.history.pushState(initializeState.activePage, initializeState.stateName);\n };\n\n this.url = new _url_url__WEBPACK_IMPORTED_MODULE_0__[\"Url\"](accountName);\n this.userPage = new _user_page_user_page__WEBPACK_IMPORTED_MODULE_1__[\"UserPage\"](store, accountName);\n }\n\n render() {\n const contactTempalte = /*html*/`\n <div id=\"contact-wraper\">\n\n <header class=\"container\">\n <form class=\"form-inline search-form row\">\n <div class=\"form-group\">\n <label class=\"sr-only\" for=\"search\">Search</label>\n <input type=\"text\" class=\"form-control\" id= \"search\" placeholder=\"Search\">\n </div>\n </form>\n </header>\n\n <main class=\"container contact-list\">\n <table class=\"table table-hover table-striped\">\n\n <thead>\n <tr id=\"wraper-for-th\">\n <th class=\"for-sort\">Name</th>\n <th class=\"for-sort\">Last Name</th>\n <th class=\"for-sort\">Email</th>\n </tr>\n </thead>\n\n <tbody id=\"list-of-contacts\">\n \n </tbody>\n\n </table>\n </main>\n </div>\n `;\n\n return contactTempalte;\n }\n\n contactListComponent(userList) {\n return userList.reduce((listStructure, user) => {\n const splitedFullName = user.fullName.split(' ');\n const userFirstName = splitedFullName[0];\n const userLastName = splitedFullName[1];\n const userEmail = user.email;\n const id = user._id;\n\n const userComponent = /*html*/`\n <tr id=\"${id}\" class=\"user\">\n <td> ${userFirstName} </td>\n <td> ${userLastName} </td>\n <td> ${userEmail} </td>\n </tr>\n `;\n\n listStructure += userComponent;\n return listStructure;\n }, ``);\n }\n\n renderUsers() {\n this.url.getUsersFromServer().then(data => {\n return data.json();\n }).then(users => {\n this.users = users;\n const listStructure = this.contactListComponent(users);\n const listOfContacts = document.getElementById('list-of-contacts');\n listOfContacts.innerHTML = listStructure;\n });\n }\n\n applyListenerForContactPage() {\n const wraperForTh = document.getElementById('wraper-for-th');\n wraperForTh.addEventListener('click', e => {\n const TH_ELEM_CONTAINS = e.target.textContent.trim();\n const PREDICT_TEXT_CONTENT = {\n firstName: 'Name',\n lastName: 'Last Name',\n email: 'Email'\n };\n\n const listOfContacts = document.getElementById('list-of-contacts');\n\n if (TH_ELEM_CONTAINS === PREDICT_TEXT_CONTENT.firstName) {\n const firstName = 0;\n const sortedListByFirsName = this.mergeSort(this.users, firstName);\n listOfContacts.innerHTML = this.contactListComponent(sortedListByFirsName);\n return;\n }\n\n if (TH_ELEM_CONTAINS === PREDICT_TEXT_CONTENT.lastName) {\n const lastName = 1;\n const sortedListByLastName = this.mergeSort(this.users, lastName);\n listOfContacts.innerHTML = this.contactListComponent(sortedListByLastName);\n return;\n }\n\n if (TH_ELEM_CONTAINS === PREDICT_TEXT_CONTENT.email) {\n const sortedListByEmail = this.sortUsersByValue('email', this.users);\n listOfContacts.innerHTML = this.contactListComponent(sortedListByEmail);\n return;\n }\n });\n\n /* SORT USERS BY INPUTED LETTERS OF NAME */\n const contactSearchField = document.querySelector('#search');\n\n contactSearchField.addEventListener('input', () => {\n const VALUE = contactSearchField.value;\n const filteredUsers = this.filterUsersByInputValueByName(VALUE);\n const listOfContacts = document.getElementById('list-of-contacts');\n\n filteredUsers.length === 0 ? listOfContacts.innerHTML = /*html*/`<p>No such users</p>` : listOfContacts.innerHTML = this.contactListComponent(filteredUsers);\n });\n\n /* DEFINE USER */\n\n const listOfContacts = document.getElementById('list-of-contacts');\n const handlerForListOfContacts = e => {\n if (e.target.parentElement.tagName === \"TR\") {\n const id = e.target.parentElement.id;\n const user = this.users.filter(user => user._id === id)[0];\n this.userPage.setStateUserPage(user);\n const userPage = this.userPage.render(user);\n\n const MAIN_WRAPER = document.getElementById('main-wraper');\n MAIN_WRAPER.firstElementChild.outerHTML = userPage;\n this.userPage.applyListenersForUserPage();\n\n window.user = user;\n }\n };\n\n listOfContacts.addEventListener('click', handlerForListOfContacts);\n }\n\n sortUsersByValue(key, users) {\n const sortFunction = function (value, nextValue) {\n if (value[key] > nextValue[key]) return 1;\n if (value[key] < nextValue[key]) return -1;\n };\n\n return [...users].sort(sortFunction);\n }\n\n mergeSort(arr, index) {\n\n const len = arr.length;\n if (len < 2) return arr;\n const mid = Math.floor(len / 2),\n left = arr.slice(0, mid),\n right = arr.slice(mid);\n\n return this.merge(this.mergeSort(left, index), this.mergeSort(right, index), index);\n }\n\n merge(left, right, index) {\n let result = [],\n lLen = left.length,\n rLen = right.length,\n l = 0,\n r = 0;\n while (l < lLen && r < rLen) {\n const leftWord = left[l].fullName.split(' ')[index];\n const rightWord = right[r].fullName.split(' ')[index];\n if (leftWord < rightWord) {\n result.push(left[l++]);\n } else {\n result.push(right[r++]);\n }\n }\n\n return result.concat(left.slice(l)).concat(right.slice(r));\n }\n\n filterUsersByInputValueByName(inputValue) {\n return this.users.reduce((newUsers, user) => {\n const firstName = user.fullName.split(' ')[0].toLowerCase();\n\n const comparedPartOfName = firstName.slice(0, inputValue.length);\n\n if (inputValue.toLowerCase() === comparedPartOfName) {\n newUsers.push(user);\n }\n\n return newUsers;\n }, []);\n }\n}\n\n/* ================== CONTACT END================== */\n\n\n\n//# sourceURL=webpack:///./src/contact/contact.js?");
/***/ }),
/***/ "./src/edit-user-page/edit-user-page.js":
/*!**********************************************!*\
!*** ./src/edit-user-page/edit-user-page.js ***!
\**********************************************/
/*! exports provided: EditUserPage */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"EditUserPage\", function() { return EditUserPage; });\n/* harmony import */ var _url_url__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../url/url */ \"./src/url/url.js\");\n\n\nclass EditUserPage {\n constructor(store, accountName) {\n this.setStateEditUser = user => {\n const { setState, getState } = store;\n const initializeState = {\n stateName: 'EDIT USER',\n activePage: this.render(user)\n };\n setState(initializeState);\n window.history.pushState(initializeState.activePage, initializeState.stateName);\n };\n\n this.url = new _url_url__WEBPACK_IMPORTED_MODULE_0__[\"Url\"](accountName);\n }\n\n render(user) {\n this.user = user;\n\n return (/*html*/`\n <div id=\"edit-user-page\">\n\n <header class=\"container\">\n <div class=\"row d-flex justify-content-center\">\n <span class=\"add-user-header\">Edit user ${user.fullName}</span>\n </div>\n </header>\n\n <main class=\"container add-user-block\">\n <form>\n\n <div class=\"form-group\">\n <label for=\"fullName-input\">Full name:</label>\n <input type=\"text\" name=\"fullName\" class=\"form-control\" id=\"fullName-input\" placeholder=\"Enter full name\">\n </div>\n\n <div class=\"form-group\">\n <label for=\"email-input\">Email address:</label>\n <input type=\"email\" name=\"email\" class=\"form-control\" id=\"email-input\" placeholder=\"Enter email\">\n </div>\n\n <div class=\"form-group\">\n <label for=\"phoneNumber-input\">Phone Number:</label>\n <input type=\"number\" name=\"phone\" class=\"form-control\" id=\"phoneNumber-input\" placeholder=\"Enter phone number\">\n <small class=\"form-text text-muted\">Length of your phone number should be more than 9</small>\n </div>\n\n <div class=\"form-group\">\n <label for=\"birthDate-input\">Birth date:</label>\n <input type=\"date\" name=\"birthdate\" class=\"form-control\" id=\"birthDate-input\">\n </div>\n\n <div class=\"form-group\">\n <label for=\"address-input\">Address:</label>\n <input type=\"text\" name=\"address\" class=\"form-control\" id=\"address-input\" placeholder=\"Enter address\">\n </div>\n\n <div class=\"form-group\">\n <label for=\"gender-selection\">Gender:</label>\n <select name=\"gender\" class=\"form-control\" id=\"gender-selection\">\n <option>Male</option>\n <option>Female</option>\n </select>\n </div>\n \n <div class=\"form-group\">\n <label for=\"avatarUrl-input\">Avatar url:</label>\n <input type=\"text\" name=\"avatarUrl\" class=\"form-control\" id=\"avatarUrl-input\" aria-describedby=\"avatarHelp\" placeholder=\"Enter avatar url\">\n <small id=\"avatarHelp\" class=\"form-text text-muted\">ex: https://cloud-drive/photo123456.</small>\n </div>\n\n <div class=\"row d-flex justify-content-center\">\n <button type=\"submit\" class=\"btn btn-primary\">Edit this user</button> \n </div>\n \n </form>\n </main>\n\n </div>\n `\n );\n }\n\n applyListenersForEditUserPage() {\n\n const editUserForm = document.querySelector('form');\n\n const handlerForInputs = e => {\n if (e.target.name === 'fullName') {\n const VALUE = e.target.value;\n\n if (VALUE.length === 0) {\n e.target.classList.remove('wrong');\n e.target.classList.remove('correct');\n return;\n }\n\n if (this.isValidFullName(VALUE)) {\n e.target.classList.add('correct');\n e.target.classList.remove('wrong');\n } else {\n e.target.classList.add('wrong');\n e.target.classList.remove('correct');\n }\n }\n\n if (e.target.name === 'email') {\n const VALUE = e.target.value;\n\n if (VALUE.length === 0) {\n e.target.classList.remove('wrong');\n e.target.classList.remove('correct');\n return;\n }\n\n if (this.isValidEmail(VALUE)) {\n e.target.classList.add('correct');\n e.target.classList.remove('wrong');\n } else {\n e.target.classList.add('wrong');\n e.target.classList.remove('correct');\n }\n }\n\n if (e.target.name === 'phone') {\n const VALUE = e.target.value;\n\n if (VALUE.length === 0) {\n e.target.classList.remove('wrong');\n e.target.classList.remove('correct');\n return;\n }\n\n if (VALUE.length > 9) {\n e.target.classList.add('correct');\n e.target.classList.remove('wrong');\n } else {\n e.target.classList.add('wrong');\n e.target.classList.remove('correct');\n }\n }\n\n if (e.target.name === 'birthdate') {\n const VALUE = e.target.value;\n\n if (VALUE.length === 0) {\n e.target.classList.remove('correct');\n return;\n }\n\n if (VALUE.length > 9) {\n e.target.classList.add('correct');\n }\n }\n\n if (e.target.name === 'address') {\n const VALUE = e.target.value;\n\n if (VALUE.length === 0) {\n e.target.classList.remove('correct');\n return;\n }\n\n if (VALUE.length > 0) {\n e.target.classList.add('correct');\n }\n }\n\n if (e.target.name === \"avatarUrl\") {\n const VALUE = e.target.value;\n\n if (VALUE.length === 0) {\n e.target.classList.remove('wrong');\n e.target.classList.remove('correct');\n return;\n }\n\n if (this.isValidURL(VALUE)) {\n e.target.classList.add('correct');\n e.target.classList.remove('wrong');\n } else {\n e.target.classList.add('wrong');\n e.target.classList.remove('correct');\n }\n }\n };\n\n editUserForm.addEventListener('input', handlerForInputs);\n const inputs = [...editUserForm.elements].filter(elem => elem.tagName === 'INPUT' || elem.tagName === 'SELECT');\n\n const handlerForSubmit = e => {\n e.preventDefault();\n\n const infoToEdit = inputs.reduce((editedUser, input) => {\n if (input.classList.contains('wrong')) {\n alert(`${input.name} is incorrect!`);\n return;\n };\n if (input.value.length !== 0 && input.name !== 'phone' && input.name !== 'gender' && input.name !== 'fullName') {\n editedUser[input.name] = input.value;\n }\n if (input.value.length !== 0 && input.name === 'phone') {\n editedUser[input.name] = input.value.replace(/(.{3})(.{3})(.{2})/g, '($1) $2-$3-');\n }\n if (input.name === 'gender') {\n input.value === \"Male\" ? editedUser[input.name] = \"M\" : editedUser[input.name] = \"F\";\n }\n if (input.value.length !== 0 && input.name === 'fullName') {\n const formatedFullName = input.value.split(' ').reduce((output, word, index) => {\n const splitedWord = word.toLowerCase().split('');\n const firstLetter = splitedWord[0].toUpperCase();\n splitedWord[0] = firstLetter;\n output += splitedWord.join('');\n\n if (index === 0) {\n output += ' ';\n }\n\n return output;\n }, '');\n\n editedUser[input.name] = formatedFullName;\n }\n return editedUser;\n }, {});\n\n if (infoToEdit) {\n this.url.editUser(infoToEdit, this.user._id || window.user);\n\n inputs.forEach(input => {\n if (input.tagName !== \"SELECT\") {\n input.value = \"\";\n input.classList.remove('correct');\n }\n });\n } else {\n alert('Something is incorrect!');\n }\n };\n\n editUserForm.addEventListener('submit', handlerForSubmit);\n }\n\n isValidFullName(value) {\n const splitedValue = value.split(' ');\n\n return splitedValue.length === 2 && splitedValue[0].length > 0 && splitedValue[1].length > 0;\n }\n\n isValidEmail(value) {\n 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,}))$/;\n return re.test(String(value).toLowerCase());\n }\n\n isValidURL(value) {\n const re = new RegExp('^(https?:\\\\/\\\\/)?' + // protocol\n '((([a-z\\\\d]([a-z\\\\d-]*[a-z\\\\d])*)\\\\.?)+[a-z]{2,}|' + // domain name\n '((\\\\d{1,3}\\\\.){3}\\\\d{1,3}))' + // OR ip (v4) address\n '(\\\\:\\\\d+)?(\\\\/[-a-z\\\\d%_.~+]*)*' + // port and path\n '(\\\\?[;&a-z\\\\d%_.~+=-]*)?' + // query string\n '(\\\\#[-a-z\\\\d_]*)?$', 'i'); // fragment locator\n return re.test(String(value).toLowerCase());\n }\n\n}\n\n\n\n//# sourceURL=webpack:///./src/edit-user-page/edit-user-page.js?");
/***/ }),
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _authorization_page_authorization_page__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./authorization-page/authorization-page */ \"./src/authorization-page/authorization-page.js\");\n/* harmony import */ var _contact_contact__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./contact/contact */ \"./src/contact/contact.js\");\n/* harmony import */ var _keypad_keypad__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./keypad/keypad */ \"./src/keypad/keypad.js\");\n/* harmony import */ var _add_user_add_user__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./add-user/add-user */ \"./src/add-user/add-user.js\");\n/* harmony import */ var _user_page_user_page__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./user-page/user-page */ \"./src/user-page/user-page.js\");\n/* harmony import */ var _edit_user_page_edit_user_page__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./edit-user-page/edit-user-page */ \"./src/edit-user-page/edit-user-page.js\");\n\n\n\n\n\n\n\nclass App {\n constructor() {\n this.store = this.createStore();\n this.authorizationPage = new _authorization_page_authorization_page__WEBPACK_IMPORTED_MODULE_0__[\"AuthorizationPage\"](this.store);\n this.authorizationPage.setStateAuthorization(this.applyListenerForAuthorizationPage);\n this.renderAuthorizationPage();\n }\n\n createStore() {\n let state;\n\n return {\n getState() {\n return state;\n },\n setState(newState) {\n state = newState;\n }\n };\n }\n\n reducer(action) {\n const currentState = this.store.getState();\n const mainWraper = document.getElementById('main-wraper');\n const switchBetweenPages = () => {\n mainWraper.firstElementChild.outerHTML = currentState.activePage;\n };\n\n if (action.type === 'MOVE_TO_KEYPAD_PAGE') {\n switchBetweenPages();\n this.pages.keypad.applyListenerForKeypadPage();\n return;\n }\n\n if (action.type === 'MOVE_TO_CONTACT_PAGE') {\n switchBetweenPages();\n this.pages.contacts.renderUsers();\n this.pages.contacts.applyListenerForContactPage();\n return;\n }\n\n if (action.type === 'MOVE_TO_ADD_USER_PAGE') {\n switchBetweenPages();\n this.pages.addUser.applyListenersForAddUserPage();\n return;\n }\n }\n\n renderAuthorizationPage() {\n const authorizationPage = this.authorizationPage.render();\n const mountMode = document.getElementById('mountMode');\n mountMode.innerHTML = authorizationPage;\n this.applyListenerForAuthorizationPage();\n }\n\n applyListenerForAuthorizationPage() {\n const input = document.querySelector('.au-input');\n const logInButton = document.getElementById('log-in');\n const switchBetweenPages = () => {\n this.accountName = input.value;\n\n this.pages = {\n 'contacts': new _contact_contact__WEBPACK_IMPORTED_MODULE_1__[\"ContactPage\"](this.store, this.accountName),\n 'keypad': new _keypad_keypad__WEBPACK_IMPORTED_MODULE_2__[\"KeypadPage\"](this.store, this.accountName),\n 'addUser': new _add_user_add_user__WEBPACK_IMPORTED_MODULE_3__[\"AddUserPage\"](this.store, this.accountName),\n 'footer': new FooterNavigationBar(),\n 'userPage': new _user_page_user_page__WEBPACK_IMPORTED_MODULE_4__[\"UserPage\"](this.store, this.accountName),\n 'editUserPage': new _edit_user_page_edit_user_page__WEBPACK_IMPORTED_MODULE_5__[\"EditUserPage\"](this.store, this.accountName)\n };\n\n this.pages.contacts.setStateContact();\n this.render();\n this.pages.contacts.applyListenerForContactPage();\n this.applyListenerForNavigation();\n };\n\n const handlerForLogInBtn = () => {\n if (input.value.length > 3) {\n switchBetweenPages();\n } else {\n alert('So short login');\n }\n };\n\n const handlerForLogInInput = e => {\n if (e.keyCode === 13) {\n if (input.value.length > 3) {\n switchBetweenPages();\n } else {\n alert('So short login');\n }\n }\n };\n\n logInButton.addEventListener('click', handlerForLogInBtn);\n input.addEventListener('keydown', handlerForLogInInput);\n }\n\n render() {\n const currentState = this.store.getState();\n const FOOTER = this.pages.footer.render();\n\n const appTemplate = /*html*/`\n <div id=\"main-wraper\" class=\"app-block\">\n ${currentState.activePage}\n ${FOOTER}\n </div>\n `;\n\n const mountMode = document.getElementById('mountMode');\n mountMode.innerHTML = appTemplate;\n\n if (currentState.stateName === 'CONTACT') {\n this.pages.contacts.renderUsers();\n };\n }\n\n updateView(state) {\n const mainWraper = document.getElementById('main-wraper');\n\n mainWraper.firstElementChild.outerHTML = state;\n }\n\n applyListenerForNavigation() {\n\n const _MOVE_TO_KEYPAD_PAGE = {\n type: 'MOVE_TO_KEYPAD_PAGE'\n };\n\n const _MOVE_TO_CONTACT_PAGE = {\n type: 'MOVE_TO_CONTACT_PAGE'\n };\n\n const _MOVE_TO_ADD_USER_PAGE = {\n type: 'MOVE_TO_ADD_USER_PAGE'\n };\n\n const wraperForFooter = document.getElementById('wraper-for-footer');\n wraperForFooter.addEventListener('click', e => {\n const currentState = this.store.getState();\n\n const BUTTON_ID = e.target.id;\n const BUTTON_ID_FROM_SVG = e.target.parentElement.id;\n const BUTTON_ID_FROM_PATH = e.target.parentElement.parentElement.id;\n\n if (BUTTON_ID === 'to-keypad-page' || BUTTON_ID_FROM_SVG === 'to-keypad-page' || BUTTON_ID_FROM_PATH === 'to-keypad-page') {\n\n if (currentState.stateName !== 'KEYPAD') {\n this.pages.keypad.setStateKeypad();\n return this.reducer(_MOVE_TO_KEYPAD_PAGE);\n }\n return;\n }\n\n if (BUTTON_ID === 'to-contact-page' || BUTTON_ID_FROM_SVG === 'to-contact-page' || BUTTON_ID_FROM_PATH === 'to-contact-page') {\n\n if (currentState.stateName !== 'CONTACT') {\n this.pages.contacts.setStateContact();\n return this.reducer(_MOVE_TO_CONTACT_PAGE);\n }\n return;\n }\n\n if (BUTTON_ID === 'to-addUser-page' || BUTTON_ID_FROM_SVG === 'to-addUser-page' || BUTTON_ID_FROM_PATH === 'to-addUser-page') {\n\n if (currentState.stateName !== 'ADD USER') {\n this.pages.addUser.setStateAddUser();\n return this.reducer(_MOVE_TO_ADD_USER_PAGE);\n }\n return;\n }\n });\n\n window.addEventListener('popstate', e => {\n\n if (/id=\"user-page\"/.test(e.state)) {\n this.updateView(e.state);\n this.pages.userPage.applyListenersForUserPage();\n }\n\n if (/id=\"contact-wraper\"/.test(e.state)) {\n this.updateView(e.state);\n this.pages.contacts.renderUsers();\n this.pages.contacts.applyListenerForContactPage();\n }\n\n if (/id=\"edit-user-page\"/.test(e.state)) {\n this.updateView(e.state);\n this.pages.editUserPage.applyListenersForEditUserPage();\n }\n\n if (/id=\"add-user-page\"/.test(e.state)) {\n this.updateView(e.state);\n this.pages.addUser.applyListenersForAddUserPage();\n }\n\n if (/id=\"keypad-wraper\"/.test(e.state)) {\n this.updateView(e.state);\n this.pages.keypad.applyListenerForKeypadPage();\n }\n\n if (/class=\"authorization-block\"/.test(e.state)) {\n this.renderAuthorizationPage();\n }\n });\n }\n}\n\n/* ================== FOOTER START================== */\n\nclass FooterNavigationBar {\n constructor() {\n this.icons = {\n contactIcon: {\n id: 'to-contact-page',\n class: 'far fa-address-book'\n },\n keypadIcon: {\n id: 'to-keypad-page',\n class: 'fas fa-tty'\n },\n addUserIcon: {\n id: 'to-addUser-page',\n class: 'fas fa-user-plus'\n }\n };\n }\n\n render() {\n const navigationBar = /*html*/`\n <footer class=\"container\">\n <div class=\"row navigation-panel\" id=\"wraper-for-footer\">\n ${this.createIcon(this.icons.contactIcon)}\n ${this.createIcon(this.icons.keypadIcon)}\n ${this.createIcon(this.icons.addUserIcon)}\n </div>\n </footer>\n `;\n\n return navigationBar;\n }\n\n createIcon(iconPattern) {\n const ID = iconPattern.id;\n const CLASS = iconPattern.class;\n\n const icon = /*html*/`\n <div class=\"col-4 d-flex justify-content-center\">\n <button id=\"${ID}\" class=\"navigation-button\">\n <span class=\"${CLASS} icon\"></span>\n </button>\n </div>\n `;\n\n return icon;\n }\n\n}\n\n/* ================== FOOTER END================== */\n\nconst APPLICATION = new App();\n\n//# sourceURL=webpack:///./src/index.js?");
/***/ }),
/***/ "./src/keypad/keypad.js":
/*!******************************!*\
!*** ./src/keypad/keypad.js ***!
\******************************/
/*! exports provided: KeypadPage */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"KeypadPage\", function() { return KeypadPage; });\n/* harmony import */ var _components_mobile_operators_identifiers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../components/mobile-operators-identifiers */ \"./src/components/mobile-operators-identifiers.js\");\n\n\n/* ================== KEYPAD START================== */\n\nclass KeypadPage {\n constructor(store, accountName) {\n this.setStateKeypad = () => {\n const { setState } = store;\n const initializeState = {\n stateName: 'KEYPAD',\n activePage: this.render()\n };\n setState(initializeState);\n window.history.pushState(initializeState.activePage, initializeState.stateName);\n };\n\n this.callMode = new CallMode();\n }\n\n render() {\n const buttons = {\n ONE: '1',\n TWO: '2',\n THREE: '3',\n FOUR: '4',\n FIVE: '5',\n SIX: '6',\n SEVEN: '7',\n EIGHT: '8',\n NINE: '9',\n ZERO: '0',\n ASTERISK: '*',\n HASH: '#'\n };\n\n return (/*html*/`\n <div id=\"keypad-wraper\">\n\n <header class=\"container\">\n <div class=\"keypad-header-wraper d-flex justify-content-between\">\n <div id=\"phone-number\">\n <span id=\"number\"></span>\n <span id=\"operator\"></span>\n </div>\n <div id=\"delete\" class=\"delete-number\">\n <span class=\"fas fa-backspace\"></span>\n </div>\n </div>\n </header>\n\n <main class=\"container keypad-block borders\">\n \n <div id=\"wraper-for-buttons\">\n <div class=\"row\">\n ${this.createButton(buttons.ONE)}\n ${this.createButton(buttons.TWO)}\n ${this.createButton(buttons.THREE)}\n </div>\n <div class=\"row\">\n ${this.createButton(buttons.FOUR)}\n ${this.createButton(buttons.FIVE)}\n ${this.createButton(buttons.SIX)}\n </div>\n <div class=\"row\">\n ${this.createButton(buttons.SEVEN)}\n ${this.createButton(buttons.EIGHT)}\n ${this.createButton(buttons.NINE)}\n </div>\n <div class=\"row\">\n ${this.createButton(buttons.ASTERISK)}\n ${this.createButton(buttons.ZERO)}\n ${this.createButton(buttons.HASH)}\n </div>\n </div>\n\n <div class=\"row\">\n <div id=\"call-btn\" class=\"number-btn call\"><span class=\"fas fa-phone\"></span></div>\n </div>\n <span id=\"error-block\"></span>\n\n </main>\n\n </div> \n `\n );\n }\n\n createButton(value) {\n const button = /*html*/`\n <div class=\"number-btn\">${value}</div>\n `;\n\n return button;\n }\n\n applyListenerForKeypadPage() {\n\n /* ADD NUMBER */\n const keypadButtons = document.getElementById('wraper-for-buttons');\n const fieldForNumber = document.getElementById('number');\n const fieldForOperator = document.getElementById('operator');\n\n const toFormateNumberFieldForAdding = () => {\n const numbersFromField = fieldForNumber.textContent.replace(/\\D/gm, '');\n let finalConstructions = null;\n\n if (numbersFromField.length === 1) {\n finalConstructions = numbersFromField.replace(/(.{1})/g, '($1');\n fieldForNumber.textContent = finalConstructions;\n return;\n }\n\n if (numbersFromField.length === 3) {\n finalConstructions = numbersFromField.replace(/(.{3})/g, '($1)');\n fieldForNumber.textContent = finalConstructions;\n return;\n }\n\n if (numbersFromField.length === 4) {\n finalConstructions = numbersFromField.replace(/(.{3})(.{1})/g, '($1) $2');\n fieldForNumber.textContent = finalConstructions;\n return;\n }\n\n if (numbersFromField.length === 7) {\n finalConstructions = numbersFromField.replace(/(.{3})(.{3})(.{1})/g, '($1) $2-$3');\n fieldForNumber.textContent = finalConstructions;\n return;\n }\n\n if (numbersFromField.length === 9) {\n finalConstructions = numbersFromField.replace(/(.{3})(.{3})(.{2})(.{1})/g, '($1) $2-$3-$4');\n fieldForNumber.textContent = finalConstructions;\n return;\n }\n };\n\n keypadButtons.addEventListener('click', e => {\n const TARGET_CLASS_NAME = e.target.className;\n\n if (TARGET_CLASS_NAME === 'number-btn') {\n const BUTTON_VALUE = e.target.textContent;\n fieldForNumber.textContent += BUTTON_VALUE;\n\n const MATCH_NUMBERS = fieldForNumber.textContent.match(/\\d+/gm);\n const FIRST_THREE_NUMBERS = MATCH_NUMBERS[0];\n const LENGTH_OF_FIRST_NUMBERS = FIRST_THREE_NUMBERS.length;\n\n if (LENGTH_OF_FIRST_NUMBERS === 3) {\n fieldForOperator.textContent = this.indentifyMobileOperator(FIRST_THREE_NUMBERS);\n }\n\n toFormateNumberFieldForAdding();\n }\n });\n\n /* REMOVE NUMBER */\n const deleteButton = document.getElementById('delete');\n\n deleteButton.addEventListener('click', e => {\n const BUTTON_ID = e.target.id;\n const BUTTON_ID_FROM_SVG = e.target.parentElement.id;\n const BUTTON_ID_FROM_PATH = e.target.parentElement.parentElement.id;\n\n if (BUTTON_ID === 'delete' || BUTTON_ID_FROM_SVG === 'delete' || BUTTON_ID_FROM_PATH === 'delete') {\n const LENGTH_OF_NUMBERS = fieldForNumber.textContent.length;\n const LENGTH_OF_NUMBERS_FOR_SLICE = fieldForNumber.textContent.length - 1;\n const strWithDeletedOneNumber = fieldForNumber.textContent.slice(0, LENGTH_OF_NUMBERS_FOR_SLICE);\n fieldForNumber.textContent = strWithDeletedOneNumber;\n\n if (LENGTH_OF_NUMBERS <= 3) {\n fieldForOperator.textContent = '';\n }\n\n return;\n }\n });\n\n /* TO CALL BUTTON */\n const mainWraper = document.getElementById('main-wraper');\n\n const toCallButton = document.getElementById('call-btn');\n toCallButton.addEventListener('click', () => {\n const ERROR_BLOCK = document.getElementById('error-block');\n\n if (fieldForNumber.textContent.length < 3) {\n ERROR_BLOCK.textContent = `ERROR you've typed incorrect number`;\n setTimeout(() => {\n ERROR_BLOCK.textContent = '';\n }, 3000);\n return;\n }\n\n const NUMBER_FOR_CALL_MODE = this.callMode.getNumber();\n const OPERATOR_FOR_CALL_MODE = this.callMode.getOperator();\n\n mainWraper.classList.add('call-mode');\n mainWraper.innerHTML = this.callMode.render(NUMBER_FOR_CALL_MODE, OPERATOR_FOR_CALL_MODE);\n this.callMode.applyListenerForCallMode();\n });\n\n /* WRITING NUMBER BY KEYBOARD */\n\n const keyCodes = {\n ONE: 49,\n TWO: 50,\n THREE: 51,\n FOUR: 52,\n FIVE: 53,\n SIX: 54,\n SEVEN: 55,\n EIGHT: 56,\n NINE: 57,\n ZERO: 48,\n ASTERISK: 42,\n HASH: 35,\n DELETE: 8\n };\n\n const SINGLE_TAPS = e => {\n\n if (e.keyCode === keyCodes.ONE) {\n const ONE = '1';\n fieldForNumber.textContent += ONE;\n }\n if (e.keyCode === keyCodes.TWO) {\n const TWO = '2';\n fieldForNumber.textContent += TWO;\n }\n if (e.keyCode === keyCodes.THREE) {\n const THREE = '3';\n fieldForNumber.textContent += THREE;\n }\n if (e.keyCode === keyCodes.FOUR) {\n const FOUR = '4';\n fieldForNumber.textContent += FOUR;\n }\n if (e.keyCode === keyCodes.FIVE) {\n const FIVE = '5';\n fieldForNumber.textContent += FIVE;\n }\n if (e.keyCode === keyCodes.SIX) {\n const SIX = '6';\n fieldForNumber.textContent += SIX;\n }\n if (e.keyCode === keyCodes.SEVEN) {\n const SEVEN = '7';\n fieldForNumber.textContent += SEVEN;\n }\n if (e.keyCode === keyCodes.EIGHT) {\n const EIGHT = '8';\n fieldForNumber.textContent += EIGHT;\n }\n if (e.keyCode === keyCodes.NINE) {\n const NINE = '9';\n fieldForNumber.textContent += NINE;\n }\n if (e.keyCode === keyCodes.ZERO) {\n const ZERO = '0';\n fieldForNumber.textContent += ZERO;\n }\n if (e.keyCode === keyCodes.HASH) {\n const HASH = '#';\n fieldForNumber.textContent += HASH;\n }\n if (e.keyCode === keyCodes.ASTERISK) {\n const ASTERISK = '*';\n fieldForNumber.textContent += ASTERISK;\n }\n\n /* IDENTIFICATION FUNCTIONAL */\n const MATCH_NUMBERS = fieldForNumber.textContent.match(/\\d+/gm);\n const FIRST_THREE_NUMBERS = MATCH_NUMBERS[0];\n const LENGTH_OF_FIRST_NUMBERS = FIRST_THREE_NUMBERS.length;\n\n if (LENGTH_OF_FIRST_NUMBERS === 3) {\n fieldForOperator.textContent = this.indentifyMobileOperator(FIRST_THREE_NUMBERS);\n }\n\n toFormateNumberFieldForAdding();\n };\n\n const DELETE_FUNCTIONAL = e => {\n const LENGTH_OF_NUMBERS = fieldForNumber.textContent.length;\n\n if (e.keyCode === keyCodes.DELETE) {\n const LENGTH_OF_NUMBERS_FOR_SLICE = fieldForNumber.textContent.length - 1;\n const strWithDeletedOneNumber = fieldForNumber.textContent.slice(0, LENGTH_OF_NUMBERS_FOR_SLICE);\n fieldForNumber.textContent = strWithDeletedOneNumber;\n\n if (LENGTH_OF_NUMBERS <= 3) {\n fieldForOperator.textContent = '';\n }\n return;\n }\n };\n\n window.addEventListener('keypress', SINGLE_TAPS);\n window.addEventListener('keydown', DELETE_FUNCTIONAL);\n }\n\n indentifyMobileOperator(firstThreeNumbers) {\n let operator;\n\n _components_mobile_operators_identifiers__WEBPACK_IMPORTED_MODULE_0__[\"MOBILE_OPERATORS_IDENTIFICATORS\"].kuivstar.forEach(identicationNumber => {\n if (identicationNumber === firstThreeNumbers) {\n operator = 'Kuivstar';\n }\n });\n\n _components_mobile_operators_identifiers__WEBPACK_IMPORTED_MODULE_0__[\"MOBILE_OPERATORS_IDENTIFICATORS\"].life.forEach(identicationNumber => {\n if (identicationNumber === firstThreeNumbers) {\n operator = 'Life';\n }\n });\n\n _components_mobile_operators_identifiers__WEBPACK_IMPORTED_MODULE_0__[\"MOBILE_OPERATORS_IDENTIFICATORS\"].vodafone.forEach(identicationNumber => {\n if (identicationNumber === firstThreeNumbers) {\n operator = 'Vodafone';\n }\n });\n\n return operator;\n }\n}\n\n/* ================== KEYPAD END================== */\n\n/* ================== CALL MODE START================== */\nclass CallMode {\n constructor() {}\n\n render(number, operator) {\n return (/*html*/`\n <div id=\"callMode\">\n <header class=\"container\">\n\n <div class=\"row d-flex justify-content-center\">\n <span class=\"call-target\">${number}</span>\n <span class=\"phone-code\">${operator}</span>\n </div>\n\n <div class=\"row d-flex justify-content-center\">\n <span id=\"load-point-1\" class=\"load-point fas fa-circle\"></span>\n <span id=\"load-point-2\" class=\"load-point fas fa-circle\"></span>\n <span id=\"load-point-3\" class=\"load-point fas fa-circle\"></span>\n <span id=\"load-point-4\" class=\"load-point fas fa-circle\"></span>\n <span id=\"load-point-5\" class=\"load-point fas fa-circle\"></span>\n </div>\n\n </header>\n\n <main class=\"all-mode-keypad-block\">\n\n <div class=\"wraper-for-call-mode-buttons\">\n\n <div class=\"row\">\n\n <div class=\"wraper-for-call-mode-btn\">\n <div class=\"call-mode-btn\">\n <span class=\"fas fa-microphone-alt-slash\"></span>\n </div>\n <span class=\"call-btn-description\">mute</span>\n </div>\n\n <div class=\"wraper-for-call-mode-btn\">\n <div class=\"call-mode-btn\">\n <span class=\"fas fa-th\"></span>\n </div>\n <span class=\"call-btn-description\">keypad</span>\n </div>\n \n <div class=\"wraper-for-call-mode-btn\">\n <div class=\"call-mode-btn\">\n <span class=\"fas fa-volume-up\"></span>\n </div> \n <span class=\"call-btn-description\">volume</span>\n </div>\n \n </div>\n\n <div class=\"row\">\n <div class=\"wraper-for-call-mode-btn\">\n <div class=\"call-mode-btn\">\n <span class=\"fas fas fa-plus\"></span>\n </div> \n <span class=\"call-btn-description\">add</span>\n </div>\n \n <div class=\"wraper-for-call-mode-btn\">\n <div class=\"call-mode-btn\">\n <span class=\"fas fa-video\"></span>\n </div> \n <span class=\"call-btn-description\">video</span>\n </div>\n\n <div class=\"wraper-for-call-mode-btn\">\n <div class=\"call-mode-btn\">\n <span class=\"fas fa-users\"></span>\n </div> \n <span class=\"call-btn-description\">contacts</span>\n </div>\n </div>\n\n </div>\n\n <div class=\"row d-flex justify-content-center\">\n <div id=\"call-off\" class=\"call-mode-btn call-off\">\n <span class=\"fas fa-phone\"></span>\n </div> \n </div>\n\n </main>\n </div>\n `\n );\n }\n\n getNumber() {\n const phoneNumber = document.getElementById('number');\n return phoneNumber.textContent;\n }\n\n getOperator() {\n const phoneOperator = document.getElementById('operator');\n return phoneOperator.textContent;\n }\n\n applyListenerForCallMode() {}\n\n setSavedKeypadPage(page) {\n this.savedKeypadPage = page;\n }\n}\n\n/* ================== CALL MODE END================== */\n\n\n\n//# sourceURL=webpack:///./src/keypad/keypad.js?");
/***/ }),
/***/ "./src/url/url.js":
/*!************************!*\
!*** ./src/url/url.js ***!
\************************/
/*! exports provided: Url */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"Url\", function() { return Url; });\nclass Url {\n constructor(accountName) {\n this.url = `https://easycode-js.herokuapp.com/${accountName}/users`;\n }\n\n getUsersFromServer() {\n return fetch(this.url);\n }\n\n postUser(user) {\n fetch(this.url, {\n method: 'POST',\n headers: {\n 'Content-type': 'application/json'\n },\n body: JSON.stringify(user)\n });\n }\n\n editUser(infoToEdit, id) {\n fetch(this.url + '/' + id, {\n method: 'PATCH',\n headers: {\n 'Content-type': 'application/json'\n },\n body: JSON.stringify(infoToEdit)\n });\n }\n\n deleteUserById(id) {\n fetch(this.url + '/' + id, {\n method: 'DELETE'\n });\n }\n}\n\n\n\n//# sourceURL=webpack:///./src/url/url.js?");
/***/ }),
/***/ "./src/user-page/user-page.js":
/*!************************************!*\
!*** ./src/user-page/user-page.js ***!
\************************************/
/*! exports provided: UserPage */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"UserPage\", function() { return UserPage; });\n/* harmony import */ var _edit_user_page_edit_user_page__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../edit-user-page/edit-user-page */ \"./src/edit-user-page/edit-user-page.js\");\n/* harmony import */ var _url_url__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../url/url */ \"./src/url/url.js\");\n\n\n\nclass UserPage {\n constructor(store, accountName) {\n this.setStateUserPage = user => {\n const { setState, getState } = store;\n const initializeState = {\n stateName: 'USER_PAGE',\n activePage: this.render(user)\n };\n setState(initializeState);\n window.history.pushState(initializeState.activePage, initializeState.stateName);\n };\n\n this.editUserPage = new _edit_user_page_edit_user_page__WEBPACK_IMPORTED_MODULE_0__[\"EditUserPage\"](store, accountName);\n this.url = new _url_url__WEBPACK_IMPORTED_MODULE_1__[\"Url\"](accountName);\n }\n\n render(user) {\n this.user = user;\n\n return (/*html*/`\n <div id=\"user-page\">\n\n <header class=\"container\">\n <div class=\"row d-flex justify-content-center\">\n <span class=\"user-header\">User page</span>\n </div>\n </header>\n\n <main id=\"user-info\" class=\"container mt-2\">\n \n <div class=\"row d-flex justify-content-center\">\n <img id=\"user-page-avatar\" src=\"${!user.avatarUrl ? 'https://steamuserimages-a.akamaihd.net/ugc/504697773361488218/90CC7E33B932155252A6C15117A3AB8031B3FE36/' : user.avatarUrl}\" alt=\"avatar\">\n </div>\n\n <div class=\"row d-flex justify-content-between\">\n <p class=\"user-page-key\">Full Name: </p>\n <p class=\"user-page-value\">${user.fullName}</p>\n </div>\n <div class=\"row d-flex justify-content-between\">\n <p class=\"user-page-key\">Email: </p>\n <p class=\"user-page-value\">${user.email}</p>\n </div>\n <div class=\"row d-flex justify-content-between\">\n <p class=\"user-page-key\">Phone number: </p>\n <p class=\"user-page-value\">${user.phone}</p>\n </div>\n <div class=\"row d-flex justify-content-between\">\n <p class=\"user-page-key\">Birth date: </p>\n <p class=\"user-page-value\">${user.birthdate ? user.birthdate.slice(0, 10) : '__________'}</p>\n </div>\n <div class=\"row d-flex justify-content-between\">\n <p class=\"user-page-key\">Address: </p>\n <p class=\"user-page-value\">${user.address ? user.address : '__________'}</p>\n </div>\n <div class=\"row d-flex justify-content-between\">\n <p class=\"user-page-key\">Gender: </p>\n <p class=\"user-page-value\">${user.gender === \"M\" ? 'Male' : 'Female'}</p>\n </div> \n\n <div id=\"usp-wraper-for-btns\" class=\"row d-flex justify-content-around\">\n <button type=\"button\" class=\"btn btn-primary\">Edit</button>\n <button type=\"button\" class=\"btn btn-danger\">Delete</button>\n </div>\n\n </main>\n\n </div>\n `\n );\n }\n\n applyListenersForUserPage() {\n const wraperForButtons = document.getElementById('usp-wraper-for-btns');\n\n const handlerForButtons = e => {\n if (e.target.textContent.trim() === 'Edit') {\n this.editUserPage.setStateEditUser(this.user || window.user);\n const EDIT_USER_PAGE = this.editUserPage.render(this.user || window.user);\n\n const MAIN_WRAPER = document.getElementById('main-wraper');\n MAIN_WRAPER.firstElementChild.outerHTML = EDIT_USER_PAGE;\n this.editUserPage.applyListenersForEditUserPage();\n }\n\n if (e.target.textContent.trim() === 'Delete') {\n const requestForDelete = confirm('Are you sure?');\n if (requestForDelete) {\n this.url.deleteUserById(this.user._id || window.user);\n\n const USER_PAGE = document.getElementById('user-info');\n USER_PAGE.innerHTML = /*html*/`<h1 class=\"respond-after-delete\">This user was deleted</h1>`;\n }\n }\n };\n\n wraperForButtons.addEventListener('click', handlerForButtons);\n }\n}\n\n\n\n//# sourceURL=webpack:///./src/user-page/user-page.js?");
/***/ })
/******/ });