EasyCode-JavaScriptReact-v1 · horidon · Aug 20, 2018 · Aug 20, 2018 · Aug 20, 2018 · Aug 20, 2018
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,7 @@
+phone-book/node_modules
+phone-book/img
+phone-book/package-lock.json
+
 # Logs
 logs
 *.log
@@ -62,3 +66,4 @@ typings/
 
 # IDE
 .idea
+
diff --git a/phone-book/.gitignore b/phone-book/.gitignore
@@ -0,0 +1,2 @@
+package-lock.json
+img
diff --git a/phone-book/.vscode/settings.json b/phone-book/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}
diff --git a/phone-book/build/bundle.js b/phone-book/build/bundle.js
diff --git a/phone-book/img/icon.ico b/phone-book/img/icon.ico
diff --git a/phone-book/index.html b/phone-book/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+
+    <head>
+        <link rel="icon" href="img/icon.ico">
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Phone Book</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="style/main.css">
+        <link rel="stylesheet" href="style/keypad.css">
+        <link rel="stylesheet" href="style/add-user.css">
+        <link rel="stylesheet" href="style/user-page.css">
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
+    </head>
+    <body>
+        <div id="mountMode"></div>
+
+        <script src="build/bundle.js"></script>
+        <script defer="" src="https://use.fontawesome.com/releases/v5.1.1/js/all.js" integrity="sha384-BtvRZcyfv4r0x/phJt9Y9HhnN5ur1Z+kZbKVgzVBAlQZX4jvAuImlIz+bG7TS00a" crossorigin="anonymous"></script>
+    </body>
+</html>
diff --git a/phone-book/package.json b/phone-book/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "phone-book",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "presets": ["env"],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack --mode development",
+    "build": "webpack --mode production"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-preset-env": "^1.7.0",
+    "webpack": "^4.16.3",
+    "webpack-cli": "^3.1.0"
+  }
+}
diff --git a/phone-book/src/add-user/add-user.js b/phone-book/src/add-user/add-user.js
@@ -0,0 +1,272 @@
+import {Url} from '../url/url';
+
+class AddUserPage {
+    constructor(store, accountName) {
+        this.setStateAddUser = () => {
+            const {setState} = store;
+            const initializeState = {
+                stateName: 'ADD USER',
+                activePage: this.render(),
+            };
+            setState(initializeState);
+            window.history.pushState(initializeState.activePage, initializeState.stateName);
+        }
+
+        this.url = new Url(accountName);
+    }
+
+    render() {
+        return /*html*/`
+            <div id="add-user-page">
+
+                <header class="container">
+                    <div class="row d-flex justify-content-center">
+                        <span class="add-user-header">Add new user</span>
+                    </div>
+                </header>
+
+                <main class="container add-user-block">
+                    <form>
+
+                        <div class="form-group">
+                            <label for="fullName-input"><span class="required">*</span>Full name:</label>
+                            <input type="text" name="fullName" class="form-control" id="fullName-input" placeholder="Enter full name" required>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="email-input"><span class="required">*</span>Email address:</label>
+                            <input type="email" name="email" class="form-control" id="email-input" placeholder="Enter email" required>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="phoneNumber-input"><span class="required">*</span>Phone Number:</label>
+                            <input type="number" name="phone" class="form-control" id="phoneNumber-input" placeholder="Enter phone number" required>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="birthDate-input">Birth date:</label>
+                            <input type="date" name="birthdate" class="form-control" id="birthDate-input">
+                        </div>
+
+                        <div class="form-group">
+                            <label for="address-input">Address:</label>
+                            <input type="text" name="address" class="form-control" id="address-input" placeholder="Enter address">
+                        </div>
+
+                        <div class="form-group">
+                            <label for="gender-selection">Gender:</label>
+                            <select name="gender" class="form-control" id="gender-selection">
+                                <option>Male</option>
+                                <option>Female</option>
+                            </select>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="avatarUrl-input">Avatar url:</label>
+                            <input type="text" name="avatarUrl" class="form-control" id="avatarUrl-input" aria-describedby="avatarHelp" placeholder="Enter avatar url">
+                            <small id="avatarHelp" class="form-text text-muted">ex: https://cloud-drive/photo123456.</small>
+                        </div>
+
+                        <div class="row d-flex justify-content-center">
+                            <button type="submit" class="btn btn-primary">Add user</button> 
+                        </div>
+
+                    </form>
+                </main>
+
+            </div>
+        `;
+    }
+
+    applyListenersForAddUserPage() {
+
+        const addUserForm = document.querySelector('form');
+
+        const handlerForInputs = (e) => {
+            if(e.target.name === 'fullName') {
+                const VALUE = e.target.value;
+
+                if(VALUE.length === 0) {
+                    e.target.classList.remove('wrong')
+                    e.target.classList.remove('correct')
+                    return;
+                }
+
+                if(this.isValidFullName(VALUE)) {
+                    e.target.classList.add('correct')
+                    e.target.classList.remove('wrong')
+                } else {
+                    e.target.classList.add('wrong')
+                    e.target.classList.remove('correct')
+                }     
+            }
+
+            if(e.target.name === 'email') {
+                const VALUE = e.target.value;
+
+                if(VALUE.length === 0) {
+                    e.target.classList.remove('wrong')
+                    e.target.classList.remove('correct')
+                    return;
+                }
+
+                if(this.isValidEmail(VALUE)) {
+                    e.target.classList.add('correct')
+                    e.target.classList.remove('wrong')
+                } else {
+                    e.target.classList.add('wrong')
+                    e.target.classList.remove('correct')
+                }
+            }
+
+            if(e.target.name === 'phone') {
+                const VALUE = e.target.value;
+
+                if(VALUE.length === 0) {
+                    e.target.classList.remove('wrong')
+                    e.target.classList.remove('correct')
+                    return;
+                }
+
+                if(VALUE.length > 9) {
+                    e.target.classList.add('correct')
+                    e.target.classList.remove('wrong')
+                } else {
+                    e.target.classList.add('wrong')
+                    e.target.classList.remove('correct')
+                }
+            }
+
+            if(e.target.name === 'birthdate') {
+                const VALUE = e.target.value;
+
+                if(VALUE.length === 0) {
+                    e.target.classList.remove('correct')
+                    return;
+                }
+
+                if(VALUE.length > 9) {
+                    e.target.classList.add('correct')
+                }
+            }
+
+            if(e.target.name === 'address') {
+                const VALUE = e.target.value;
+
+                if(VALUE.length === 0) {
+                    e.target.classList.remove('correct')
+                    return;
+                }
+
+                if(VALUE.length > 0) {
+                    e.target.classList.add('correct')
+                }
+            }
+
+            if(e.target.name === "avatarUrl") {
+                const VALUE = e.target.value;
+
+                if(VALUE.length === 0) {
+                    e.target.classList.remove('wrong')
+                    e.target.classList.remove('correct')
+                    return;
+                }
+
+                if(this.isValidURL(VALUE)) {
+                    e.target.classList.add('correct')
+                    e.target.classList.remove('wrong')
+                } else {
+                    e.target.classList.add('wrong')
+                    e.target.classList.remove('correct')
+                }
+            }
+
+        };
+
+        addUserForm.addEventListener('input', handlerForInputs)
+
+        const inputs = [...addUserForm.elements]
+                            .filter(elem => elem.tagName === 'INPUT' || elem.tagName === 'SELECT');
+
+        const handlerForSubmit = (e) => {
+            e.preventDefault();
+
+            const user = inputs.reduce((newUser, input) => {
+                if(input.classList.contains('wrong')) {
+                    alert(`${input.name} is incorrect!`);
+                    return;
+                };
+                if(input.value.length !== 0 
+                    && input.name !== 'phone' 
+                    && input.name !== 'gender'
+                    && input.name !== 'fullName'
+                ) {
+                    newUser[input.name] = input.value;
+                }
+                if(input.value.length !== 0 && input.name === 'phone') {
+                    newUser[input.name] = input.value.replace(/(.{3})(.{3})(.{2})/g, '($1) $2-$3-');
+                }
+                if(input.name === 'gender') {
+                    input.value === "Male"
+                        ? newUser[input.name] = "M"
+                        : newUser[input.name] = "F"
+                }
+                if(input.value.length !== 0 && input.name === 'fullName') {
+                    const formatedFullName = input.value.split(' ').reduce((output, word, index) => {
+                        const splitedWord = word.toLowerCase().split('');
+                        const firstLetter = splitedWord[0].toUpperCase();
+                        splitedWord[0] = firstLetter;
+                        output += splitedWord.join('');
+
+                        if(index === 0) {
+                            output += ' ';
+                        }
+
+                        return output;
+                    }, '');
+
+                    newUser[input.name] = formatedFullName;
+                }
+                return newUser;
+            }, {})
+
+            if(user) {
+                this.url.postUser(user);
+
+                inputs.forEach(input => {
+                    if(input.tagName !== "SELECT") {
+                        input.value = "";
+                        input.classList.remove('correct');
+                    }
+                })
+            } else {
+                alert('Something is incorrect!')
+            }
+        }
+
+        addUserForm.addEventListener('submit', handlerForSubmit)
+    }
+
+    isValidFullName(value) {
+        const splitedValue = value.split(' ');
+
+        return splitedValue.length === 2 && splitedValue[0].length > 0 && splitedValue[1].length > 0;
+    }
+
+    isValidEmail(value) {
+        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,}))$/;
+        return re.test(String(value).toLowerCase());  
+    }
+
+    isValidURL(value) {
+        const re = new RegExp('^(https?:\\/\\/)?'+ // protocol
+        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|'+ // domain name
+        '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
+        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
+        '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
+        '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
+        return re.test(String(value).toLowerCase());
+    }
+}
+
+export {AddUserPage};
diff --git a/phone-book/src/authorization-page/authorization-page.js b/phone-book/src/authorization-page/authorization-page.js
@@ -0,0 +1,27 @@
+class AuthorizationPage{
+    constructor(store) {
+        this.setStateAuthorization = (listeners) => {
+            const {setState} = store;
+            const initializeState = {
+                stateName: 'AUTHORIZATION',
+                activePage: this.render()
+            };
+            setState(initializeState);
+            window.history.pushState(initializeState.activePage, initializeState.stateName);
+        }
+    }
+
+    render() {
+        return /*html*/`
+        <div class="authorization-block">
+            <h1 class="au-title">Authorization</h1>
+            <div class="wraper-for-authorization-inputs">
+                <input class="au-input" type="text" placeholder="Login">
+                <button id="log-in" class="au-btn btn btn-primary">Log in</button>
+            </div>
+        </div>
+        `;
+    }
+}
+
+export {AuthorizationPage};
diff --git a/phone-book/src/components/mobile-operators-identifiers.js b/phone-book/src/components/mobile-operators-identifiers.js
@@ -0,0 +1,25 @@
+const MOBILE_OPERATORS_IDENTIFICATORS = {
+    kuivstar: [
+        '067',
+        '096',
+        '097',
+        '098',
+        '068'
+    ],
+    vodafone: [
+        '050',
+        '066',
+        '095',
+        '099'
+    ],
+    life: [
+        '063',
+        '093',
+        '073'
+    ]
+};
+
+
+export {
+    MOBILE_OPERATORS_IDENTIFICATORS
+};