natein · natein · Jan 18, 2021 · Jan 18, 2021 · Jan 19, 2021 · Jan 20, 2021
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -15,5 +15,8 @@ module.exports = {
         "ecmaVersion": 2018,
         "sourceType": "module"
     },
+    "rules": {
+        "no-param-reassign": [2, { "props": false }]
+    }
 };
 
diff --git a/debug.log b/debug.log
@@ -5,3 +5,6 @@
 [0112/191140.288:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
 [0113/181410.359:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
 [0114/181756.347:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
+[0118/180712.859:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
+[0121/174104.700:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
+[0125/183609.977:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
   "dependencies": {
     "chart.js": "^2.9.3",
     "core-js": "^3.4.7",
+    "openweather-apis": "^4.4.1",
     "regenerator-runtime": "^0.13.3"
   }
 }
diff --git a/src/assets/audio/ambient.mp3 b/src/assets/audio/ambient.mp3
diff --git a/src/assets/audio/birds-waves.mp3 b/src/assets/audio/birds-waves.mp3
diff --git a/src/assets/audio/birds.mp3 b/src/assets/audio/birds.mp3
diff --git a/src/assets/audio/cafe.mp3 b/src/assets/audio/cafe.mp3
diff --git a/src/assets/audio/thunder.mp3 b/src/assets/audio/thunder.mp3
diff --git a/src/assets/audio/waves.mp3 b/src/assets/audio/waves.mp3
diff --git a/src/assets/fonts/fonts-calculator/Crystal.ttf b/src/assets/fonts/fonts-calculator/Crystal.ttf
diff --git a/src/assets/fonts/fonts-calculator/Roboto-Bold.ttf b/src/assets/fonts/fonts-calculator/Roboto-Bold.ttf
diff --git a/src/assets/fonts/fonts-calculator/Roboto-Regular.ttf b/src/assets/fonts/fonts-calculator/Roboto-Regular.ttf
diff --git a/src/assets/fonts/fonts-calculator/symbol.ttf b/src/assets/fonts/fonts-calculator/symbol.ttf
diff --git a/src/assets/fonts/fonts-weather/owfont-regular.eot b/src/assets/fonts/fonts-weather/owfont-regular.eot
diff --git a/src/assets/fonts/fonts-weather/owfont-regular.otf b/src/assets/fonts/fonts-weather/owfont-regular.otf
diff --git a/src/assets/fonts/fonts-weather/owfont-regular.svg b/src/assets/fonts/fonts-weather/owfont-regular.svg
diff --git a/src/assets/fonts/fonts-weather/owfont-regular.ttf b/src/assets/fonts/fonts-weather/owfont-regular.ttf
diff --git a/src/assets/fonts/fonts-weather/owfont-regular.woff b/src/assets/fonts/fonts-weather/owfont-regular.woff
diff --git a/src/assets/img/metal.jpg b/src/assets/img/metal.jpg
diff --git a/src/assets/img/weather.jpg b/src/assets/img/weather.jpg
diff --git a/src/css/style.css b/src/css/style.css
@@ -3,6 +3,7 @@
   --accent-color-contrast: #120C0E;
   --error-color: #f00;
   --text-color: #000;
+  --input-outline-color: #ccc;
   --app-background-color: #fff;
   --header-footer-text-color: #FDF6A1;  
 }

diff --git a/src/index.html b/src/index.html
@@ -4,7 +4,8 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="shortcut icon" href="./assets/icons/favicon.ico" type="image/x-icon">
+  <link rel="shortcut icon" href="icons/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <title>Start Page</title>
 </head>
 

diff --git a/src/js/components/auth/auth.css b/src/js/components/auth/auth.css
@@ -0,0 +1,105 @@
+.modal-shadow {  
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  top: 0;
+}
+
+.modal {
+  width: 300px;
+  padding: 10px 0;
+  background-color: var(--modal-background-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 9px;
+}
+
+.auth {    
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 10px;
+  width: 300px;
+  background-color: var(--accent-color-contrast);
+}
+
+.auth-header {
+  margin-top: 15px;
+  font-size: 33px;
+  line-height: 33px;
+  color: var(--header-footer-text-color);
+}
+
+.auth-description {
+  margin: 10px 10px 20px 10px;
+  font-size: 16px;
+  color: var(--header-footer-text-color);
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.auth-inputs {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px;
+  background-color: var(--header-footer-text-color);
+  width: 100%;
+}
+
+.auth-form-input {
+  max-width: 260px;
+  width: calc(100% - 20px);
+  font-size: 16px;
+  padding: 12px;
+  margin: 10px;
+  border: 1px solid var(--input-outline-color);
+  border-radius: 5px;  
+}
+
+.auth-form-error {
+  max-width: 260px;
+  color: var(--error-color);
+  margin-bottom: 20px;
+}
+
+.auth-button {
+  font-weight: bold;
+  margin: 10px;
+  padding: 10px 20px;
+  font-size: 18px;
+  background-color: var(--header-footer-text-color);
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.button-register {
+  background-color: transparent;
+  color: var(--header-footer-text-color);
+}
+
+.auth-button:focus {
+  outline:none;
+  box-shadow: none;
+}
+
+.button-log-in:hover {
+  background-color: var(--app-background-color);
+}
+
+.button-register:hover {
+  color: var(--app-background-color);
+}
diff --git a/src/js/components/auth/auth.js b/src/js/components/auth/auth.js
@@ -0,0 +1,176 @@
+import './auth.css';
+import * as Constants from '../../data/constants';
+import create from '../../utils/create';
+import { validatePassword, validateEmail } from './validation';
+import * as RemoteAuth from '../../services/auth';
+
+export class Auth {
+  constructor(register) {
+    this.isLogin = register;
+    this.modelContainer = create('div', 'modal-shadow');
+    this.modal = create('div', 'auth');
+    this.modelContainer.appendChild(this.modal);
+    this.modelContainer.addEventListener('click', this.clickShadow.bind(this));
+    document.body.appendChild(this.modelContainer);
+    this.render();
+    this.addListeners();
+  }
+
+  render() {
+    const formCaption = (this.isLogin) ? 'Login' : 'Register';
+    const emailInput = (this.isLogin) ? '' : `;
+          <input
+            id="auth-email"
+            class="auth-form-input"
+            name="login"
+            type="email"
+            placeholder="youremail@domain.com"
+            required
+          />`;
+    const buttonLogin = (this.isLogin) ? 'Login' : 'Register';
+    const buttonRegister = (this.isLogin) ? 'Register' : 'Login';
+    const template = `
+      <h1 class="auth-header">${formCaption}</h1>
+      <span class="auth-description">Insert your e-mail and password.</span>
+      <form class="auth-form" method="post">
+        <div class="auth-inputs">
+          <input
+            id="auth-username"
+            class="auth-form-input"
+            name="username"
+            type="text"
+            placeholder="Username"
+            required
+          />      
+          ${emailInput}
+         <input
+            id="auth-password"
+            class="auth-form-input"
+            name="password"
+            type="password"
+            placeholder="**************"
+            autocomplete ="off"
+            required
+          />
+         <span class="auth-form-error"></span>
+        </div>
+        <div class="auth-buttons">
+          <button
+              class="auth-button button-register"
+              type="button"
+          >
+          ${buttonRegister}
+          </button>
+          <button class="auth-button button-log-in" 
+            type="submit">${buttonLogin}</button>
+        </div>
+      </form>
+    `;
+    this.modal.innerHTML = template;
+  }
+
+  addListeners() {
+    this.regBtn = document.querySelector('.button-register');
+    this.loginBtn = document.querySelector('.button-log-in');
+    if (this.isLogin) {
+      this.regBtn.addEventListener('click', this.switchForm.bind(this));
+      this.loginBtn.addEventListener('click', this.login.bind(this));
+    } else {
+      this.regBtn.addEventListener('click', this.switchForm.bind(this));
+      this.loginBtn.addEventListener('click', this.register.bind(this));
+      const password = document.querySelector('#auth-password');
+      password.addEventListener('change', this.validatePassword.bind(this));
+      const email = document.querySelector('#auth-email');
+      email.addEventListener('change', this.validateEmail.bind(this));
+    }    
+  }
+
+  register(evt) {
+    evt.preventDefault();
+    const username = document.querySelector('#auth-username');
+    const email = document.querySelector('#auth-email');
+    const password = document.querySelector('#auth-password');
+    this.registerUser(username.value, email.value, password.value);
+  }
+
+  login(evt) {
+    evt.preventDefault();
+    const username = document.querySelector('#auth-username');
+    const password = document.querySelector('#auth-password');
+    this.loginUser(username.value, password.value);  
+  }
+
+  switchForm() {
+    this.isLogin = !this.isLogin;
+    this.modal.innerHTML = '';
+    this.render();
+    this.addListeners();
+  }
+
+  validatePassword(evt) {
+    const mess = document.querySelector('.auth-form-error');
+    if (!validatePassword(evt.target.value)) {
+      mess.innerText = 'password must contain digits, uppercase and lovercase letters, special symbols';
+    } else {
+      mess.innerText ='';      
+    }
+  }
+
+  validateEmail(evt) {
+    const mess = document.querySelector('.auth-form-error');
+    if (!validateEmail(evt.target.value)) {
+      mess.innerText = 'incorrect email';
+    } else {
+      mess.innerText ='';      
+    }
+  }  
+
+  clickShadow(evt) {
+    if(evt.target === this.modelContainer) {
+      this.closeModal();
+    }      
+  }
+
+  closeModal() {
+    document.body.removeChild(this.modelContainer);
+    window.myapp.header.deleteLoginForm();    
+  }  
+
+  async registerUser(username, email, password) {
+    try {
+      const res = await RemoteAuth.registerUser(username, email, password);
+      if (res.statusCode === 200) {
+        localStorage.setItem(Constants.userItemLocalStorage, JSON.stringify(res.token));
+        window.myapp.header.setLogged();
+        this.closeModal();
+      }
+      if (res.statusCode === 400) {
+        const mess = document.querySelector('.auth-form-error');
+        mess.innerText = `${res.reason}`;
+      }      
+    } catch (err) {
+      const mess = document.querySelector('.auth-form-error');
+      mess.innerText = `${err.name}: ${err.message}`;
+    }
+  }  
+
+  async loginUser(username, password) {
+    try {
+      const res = await RemoteAuth.loginUser(username, password);
+      if (res.statusCode === 200) {
+        localStorage.setItem(Constants.userItemLocalStorage, JSON.stringify(res.token));
+        window.myapp.header.setLogged();
+        this.closeModal();        
+      }
+      if (res.statusCode === 403) {
+        const mess = document.querySelector('.auth-form-error');
+        mess.innerText = `${res.reason}`;
+      }
+    } catch (err) {
+      const mess = document.querySelector('.auth-form-error');
+      mess.innerText = `${err.name}: ${err.message}`;
+    }
+  }
+}
+
+export default Auth;
diff --git a/src/js/components/auth/validation.js b/src/js/components/auth/validation.js
@@ -0,0 +1,10 @@
+export const validatePassword = function validatePassword(password) {
+    const re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
+    return re.test(password);
+};
+
+export const validateEmail = function validateEmail(email) {
+    // eslint-disable-next-line no-useless-escape,max-len
+    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(email).toLowerCase());
+};
diff --git a/src/js/components/base-menu/baseMenu.css b/src/js/components/base-menu/baseMenu.css