Поправил верстку и исправил валидацию

frontend-park-mail-ru · Mar 4, 2024 · 7e89073 · 7e89073
1 parent 60b4ff1
commit 7e89073
Show file tree

Hide file tree

Showing 56 changed files with 720 additions and 552 deletions.
diff --git a/build.sh b/build.sh
@@ -16,4 +16,5 @@ handlebars -m public/src/components/footer/footer.hbs -f public/build/footer.js
 handlebars -m public/src/components/button/button.hbs -f public/build/button.js
 handlebars -m public/src/components/settings-panel/settings-panel.hbs -f public/build/settings-panel.js
 handlebars -m public/src/components/span/span.hbs -f public/build/span.js
+handlebars -m public/src/components/logo/logo.hbs -f public/build/logo.js
 
diff --git a/package.json b/package.json
@@ -1,7 +1,8 @@
 {
   "scripts": {
     "start": "npm run build && node server/index.js",
-    "build": "./build.sh"
+    "lint": "npx eslint --fix ./public/src",
+    "build": "build.sh"
   },
   "dependencies": {
     "handlebars": "^4.7.8",

diff --git a/public/config.js b/public/config.js
@@ -10,14 +10,24 @@ const homePage = {
 const notesPage = {
     id: "notes-page",
     href: "/notes",
-    needAuth: true
+    needAuth: true,
+    noteEditor: {
+        id: "note-editor",
+        closeBtn: {
+            id: "close-editor-btn",
+            src: "/src/assets/close.png"
+        }
+    }
 }
 
 const header = {
     name: "YouNote",
     logo: {
-        href: "/",
-        text: "YouNote"
+        id: "logo",
+        img: {
+            id: "logo-icon",
+            src: "/src/assets/logo.png"
+        }
     },
     settings: {
         id: "settings-wrapper",
@@ -170,7 +180,6 @@ export const config = {
     notFoundPage: notFoundPage,
     header: header,
     notes: notes,
-    noteEditor: noteEditor,
     note: note,
     avatar: avatar,
     wrapper: wrapper,

diff --git a/public/index.css b/public/index.css
@@ -14,6 +14,7 @@
 @import "src/components/wrapper/wrapper.css";
 @import "src/components/footer/footer.css";
 @import "src/components/settings-panel/settings-panel.css";
+@import "src/components/logo/logo.css";
 
 *, *::before, *::after {
     box-sizing: border-box;

diff --git a/public/index.html b/public/index.html
@@ -3,12 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>YouNote</title>
 
     <link href="index.css" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <link rel='shortcut icon' type='image/x-icon' href='./src/assets/logo.png' />
 
     <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
 </head>

diff --git a/public/src/assets/close.png b/public/src/assets/close.png
diff --git a/public/src/assets/logo.png b/public/src/assets/logo.png
diff --git a/public/src/components/button/button.hbs b/public/src/components/button/button.hbs
@@ -1,3 +1,3 @@
-<button class="submit-btn" id="submit-btn-{{id}}">
+<button class="submit-btn" id="{{id}}">
 	{{text}}
 </button>
diff --git a/public/src/components/button/button.js b/public/src/components/button/button.js
@@ -1,4 +1,4 @@
-import '../../../build/button.js'
+import "../../../build/button.js";
 import {create_UUID} from "../../shared/uuid.js";
 
 export class Button {
@@ -11,28 +11,27 @@ export class Button {
 
     constructor(parent, config, onSubmit) {
         this.id = create_UUID();
-        console.log(this.id);
         this.#parent = parent;
         this.#props.id = this.id;
         this.#props.text = config.text;
         this.#onSubmit = onSubmit;
     }
 
     get self(){
-        return document.getElementById(`submit-btn-${this.id}`);
+        return document.getElementById(this.id);
     }
 
     #addEventListeners(){
         if (this.#onSubmit !== undefined) {
-            this.self.addEventListener('click', (e) => {
-                e.preventDefault()
-                this.#onSubmit()
+            this.self.addEventListener("click", (e) => {
+                e.preventDefault();
+                this.#onSubmit();
             });
         }
     }
 
     #removeEventListeners(){
-        this.self.removeEventListener('click', this.#onSubmit);
+        this.self.removeEventListener("click", this.#onSubmit);
     }
 
     remove(){
@@ -42,13 +41,10 @@ export class Button {
     }
 
     render(){
-
-
         this.#parent.insertAdjacentHTML(
-            'beforeend',
-            Handlebars.templates['button.hbs'](this.#props)
-        )
-
+            "beforeend",
+            window.Handlebars.templates["button.hbs"](this.#props)
+        );
 
         this.#addEventListeners();
     }

diff --git a/public/src/components/button/events.js b/public/src/components/button/events.js
@@ -1,3 +1,3 @@
 export const SubmitButtonEvents = {
-    BUTTON_SUBMIT: 'BUTTON_SUBMIT'
-}
+    BUTTON_SUBMIT: "BUTTON_SUBMIT"
+};
diff --git a/public/src/components/footer/footer.js b/public/src/components/footer/footer.js
@@ -1,4 +1,4 @@
-import "../../../build/footer.js"
+import "../../../build/footer.js";
 
 export class Footer {
     #parent;
@@ -10,11 +10,11 @@ export class Footer {
     }
 
     get self() {
-        return document.getElementById(`${this.#config.id}`)
+        return document.getElementById(`${this.#config.id}`);
     }
 
     render() {
         const template = window.Handlebars.templates["footer.hbs"];
-        this.#parent.insertAdjacentHTML('beforeend', template(this.#config));
+        this.#parent.insertAdjacentHTML("beforeend", template(this.#config));
     }
 }
diff --git a/public/src/components/header/header.css b/public/src/components/header/header.css
@@ -16,26 +16,9 @@ header.black {
     background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0));
 }
 
-header.black .logo-container a {
-    color: #fff;
-}
-
-header .logo-container a.white {
-    color: #fff;
-}
-
-header .logo-container a{
-    color: #000;
-    text-decoration: none;
-    font-weight: bold;
-    font-size: 22px;
-    transition: 0.5s;
-}
-
 header .right-container {
     display: flex;
     align-items: center;
-    gap: 25px;
 }
 
 header .menu-container {

diff --git a/public/src/components/header/header.js b/public/src/components/header/header.js
@@ -1,11 +1,11 @@
-import {Link} from "../link/link.js";
-import '../../../build/header.js';
+import "../../../build/header.js";
 import {AppEventMaker} from "../../modules/eventMaker.js";
 import {UserStoreEvents} from "../../stores/user/events.js";
 import {AppUserStore} from "../../stores/user/userStore.js";
 import {router} from "../../modules/router.js";
 import {Button} from "../button/button.js";
 import {SettingsPanel} from "../settings-panel/settings-panel.js";
+import {Logo} from "../logo/logo.js";
 
 export class Header {
     #parent;
@@ -25,84 +25,74 @@ export class Header {
     }
 
     get self () {
-        return document.getElementById("header")
+        return document.getElementById("header");
     }
 
     #addEventListeners(){
-        document.addEventListener("scroll", (event) => {
-            if (window.scrollY > 100) {
-                this.self.classList.add("black")
-            } else {
-                this.self.classList.remove("black")
-            }
-        });
-
-
         AppEventMaker.subscribe(UserStoreEvents.SUCCESSFUL_LOGIN, () => {
             if (this.#settingsPanel === undefined) {
-                this.#settingsPanel = new SettingsPanel(document.querySelector(".right-container"), this.#config.settings)
+                this.#settingsPanel = new SettingsPanel(document.querySelector(".right-container"), this.#config.settings);
             }
-            this.#settingsPanel.render()
+            this.#settingsPanel.render();
 
             this.#authPageLink.self.classList.add("hidden");
-        })
+        });
 
         AppEventMaker.subscribe(UserStoreEvents.CHANGE_PAGE, (href) => {
-            console.log("CHANGE_PAGE")
-            console.log(href)
+            console.log("CHANGE_PAGE");
+            console.log(href);
             if (href === "/") {
-                this.#logo.self.classList.add("white")
                 if (!AppUserStore.IsAuthenticated()) {
                     this.#authPageLink.self.classList.remove("hidden");
                 }
             } else {
                 this.#authPageLink.self.classList.add("hidden");
             }
-        })
+        });
 
         AppEventMaker.subscribe(UserStoreEvents.LOGOUT, () => {
-            console.log("LOGOUT")
+            console.log("LOGOUT");
 
-            this.#settingsPanel.remove()
+            this.#settingsPanel.remove();
 
             if (this.#authPageLink === undefined) {
-                this.#authPageLink = new Button(this.#menu, this.#config.menu.auth, this.handleButtonClick)
-                this.#authPageLink.render()
+                this.#authPageLink = new Button(this.#menu, this.#config.menu.auth, this.handleButtonClick);
+                this.#authPageLink.render();
             } else {
                 this.#authPageLink.self.classList.remove("hidden");
             }
         });
     }
 
     handleButtonClick = () => {
-        router.redirect("/login")
-    }
+        router.redirect("/login");
+    };
 
     render() {
-        console.log("header render")
+        console.log("header render");
 
         this.#parent.insertAdjacentHTML(
-            'afterbegin',
-            window.Handlebars.templates['header.hbs'](this.#config)
+            "afterbegin",
+            window.Handlebars.templates["header.hbs"](this.#config)
         );
 
-        this.#logo = new Link(document.querySelector(".logo-container"), this.#config.logo)
-        this.#logo.render()
+        this.#logo = new Logo(document.querySelector(".logo-container"), this.#config.logo);
+        this.#logo.render();
 
 
-        const rightContainer = document.querySelector(".right-container")
+        const rightContainer = document.querySelector(".right-container");
 
-        this.#menu = document.createElement("div")
-        this.#menu.className = "menu-container"
+        this.#menu = document.createElement("div");
+        this.#menu.className = "menu-container";
 
-        rightContainer.appendChild(this.#menu)
+        rightContainer.appendChild(this.#menu);
 
         if (AppUserStore.IsAuthenticated()) {
-            this.#settingsPanel = new SettingsPanel(document.querySelector(".right-container"), this.#config.settings)
-            this.#settingsPanel.render()
+            this.#settingsPanel = new SettingsPanel(document.querySelector(".right-container"), this.#config.settings);
+            this.#settingsPanel.render();
         } else {
-            this.#authPageLink = new Button(this.#menu, this.#config.menu.auth, this.handleButtonClick)
-            this.#authPageLink.render()
+            this.#authPageLink = new Button(this.#menu, this.#config.menu.auth, this.handleButtonClick);
+            this.#authPageLink.render();
         }
 
         this.#addEventListeners();

diff --git a/public/src/components/image/image.js b/public/src/components/image/image.js
@@ -1,4 +1,4 @@
-import "../../../build/image.js"
+import "../../../build/image.js";
 
 export class Image {
     #parent;
@@ -10,21 +10,21 @@ export class Image {
     }
 
     get self() {
-        return document.getElementById(this.#config.id)
+        return document.getElementById(this.#config.id);
     }
 
     updateImage(path) {
-        this.self.src = path
+        this.self.src = path;
     }
 
     render() {
         this.#parent.insertAdjacentHTML(
-            'afterbegin',
-            window.Handlebars.templates['image.hbs'](this.#config)
+            "afterbegin",
+            window.Handlebars.templates["image.hbs"](this.#config)
         );
 
         if (this.#config.src) {
-            this.updateImage(this.#config.src)
+            this.updateImage(this.#config.src);
         }
     }
 }
diff --git a/public/src/components/input/events.js b/public/src/components/input/events.js
@@ -1,3 +1,3 @@
 export const inputEvents = {
-    INPUT_CHANGE: 'INPUT_CHANGE'
-}
+    INPUT_CHANGE: "INPUT_CHANGE"
+};
diff --git a/public/src/components/input/input.css b/public/src/components/input/input.css
@@ -1,5 +1,5 @@
 .input-container {
-    width: 240px;
+    width: 100%;
     position: relative;
 }
 
@@ -13,23 +13,22 @@
     transition: 0.3s;
 }
 
-
 .input-container input:focus {
     border: 1px solid #56A6F0;
 }
 
-.input-container[data-error] input {
+.input-container.success input {
+    border: 1px solid green;
+}
+
+.input-container.error input {
     border: 1px solid #c92432;
-    color: #c92432;
-    background: #fffafa;
 }
 
-.input-container[data-error]::after {
-    content: attr(data-error);
+.input-container .errors-container {
+    height: 30px;
     color: #c92432;
-    font-size: 0.85em;
-    display: block;
-    margin: 5px 0;
+    font-size: 13px;
 }
 
 .input-container .show-password-btn {