Module formatting start

js/lesson21_Module/Gql_promis.html

@@ -597,13 +597,17 @@
                         }
                         return false;
                     }
-                    else
+                    else {
+                        window.location = "#/";
+                        window.location.reload();
                         return true;
+                    }
                 },
                 logout() {
                     if (localStorage.authToken) {
                         store.dispatch(actionAuthLogout());
                         window.location = "#/login/";
+                        window.location.reload();
                     }
                 },
                 //register(){

js/lesson21_Module/index.css

@@ -0,0 +1,147 @@
+body {
+    padding: 0;
+    margin: 0;
+    background: #f2f6e9;
+    }
+    .navbar {
+    background: #6ab446;
+    }
+    .nav-link,
+    .navbar-brand {
+    color: #fff;
+    cursor: pointer;
+    }
+    .nav-link {
+    margin-right: 1em !important;
+    }
+    .nav-link:hover {
+    color: #000;
+    }
+    .navbar-collapse {
+    justify-content: flex-end;
+    }
+    .header {
+    background-image: url("images/header-background.jpg");
+    background-size: cover;
+    background-position: center;
+    position: relative;
+    }
+    .overlay {
+    position: absolute;
+    min-height: 100%;
+    min-width: 100%;
+    left: 0;
+    top: 0;
+    background: rgba(0, 0, 0, 0.6);
+    }
+    .description {
+    left: 50%;
+    position: absolute;
+    top: 45%;
+    transform: translate(-50%, -55%);
+    text-align: center;
+    }
+    .description h1 {
+    color: #6ab446;
+    }
+    .description p {
+    color: #fff;
+    font-size: 1.3rem;
+    line-height: 1.5;
+    }
+    .description button {
+    border: 1px solid #6ab446;
+    background: #6ab446;
+    border-radius: 0;
+    color: #fff;
+    }
+    .description button:hover {
+    border: 1px solid #fff;
+    background: #fff;
+    color: #000;
+    }
+    .features {
+    margin: 4em auto;
+    padding: 1em;
+    position: relative;
+    }
+    .feature-title {
+    color: #333;
+    font-size: 1.3rem;
+    font-weight: 700;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+    }
+    .features img {
+    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
+    -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
+    margin-bottom: 16px;
+    }
+    .features .form-control,
+    .features input {
+    border-radius: 0;
+    }
+    .features .btn {
+    background-color: #589b37;
+    border: 1px solid #589b37;
+    color: #fff;
+    margin-top: 20px;
+    }
+    .features .btn:hover {
+    background-color: #333;
+    border: 1px solid #333;
+    }
+    .background {
+    background: #dedec8;
+    padding: 4em 0;
+    }
+    .team {
+    color: #5e5e55;
+    padding: 0 180px;
+    }
+    .team .card-columns {
+    -webkit-column-count: 4;
+    -moz-column-count: 4;
+    column-count: 4;
+    }
+    .team .card {
+    background: none;
+    border: none;
+    }
+    .team .card-title {
+    font-size: 1.3rem;
+    margin-bottom: 0;
+    text-transform: uppercase;
+    }
+    .page-footer {
+    background-color: #222;
+    color: #ccc;
+    padding: 60px 0 30px;
+    }
+    .footer-copyright {
+    color: #666;
+    padding: 40px 0;
+    }
+    @media (max-width: 575.98px) {
+        .description {
+            left: 0;
+            padding: 0 15px;
+            position: absolute;
+            top: 10%;
+            transform: none;
+            text-align: center;
+        }
+     
+        .description h1 {
+            font-size: 2em;
+        }
+     
+        .description p {
+            font-size: 1.2rem;
+        }
+     
+        .features {
+            margin: 0;
+        }
+    }

js/lesson21_Module/login.js

@@ -8,7 +8,7 @@ function LoginForm(parent, open) {
         this.getValue = function () {
             return this.input.value;
         }
-        this.input.onchange = function () {
+        this.input.oninput = this.input.onchange = function () {
             if (this.onChange)
                 this.onChange(this.getValue());
         }.bind(this);
@@ -22,7 +22,7 @@ function LoginForm(parent, open) {
         this.getValue = function () {
             return this.input.value;
         }
-        this.input.onchange = function () {
+        this.input.oninput = this.input.onchange = function () {
             if (this.onChange)
                 this.onChange(this.getValue());
         }.bind(this);
@@ -45,6 +45,7 @@ function LoginForm(parent, open) {
         check.checked = open;
         check.value = "open";
         check.type = "checkbox";
+        this.setOpen(open);
     }
 
     let form = document.createElement("form");
@@ -53,6 +54,8 @@ function LoginForm(parent, open) {
     this.password = new Password(form, open);
     this.button = document.createElement("button");
     this.button.innerText = "OK";
+    this.button.classList.add('btn');
+    this.button.classList.add('ref-button');
     form.append(this.button);
 
     let setButtonStateCallback = function setButtonState() {