\n'},compiler:[8,">= 4.3.0"],main:function(l,n,e,a,t){var o,s=null!=n?n:l.nullContext||{},c=l.hooks.helperMissing,i="function",r=l.escapeExpression,u=l.lookupProperty||function(l,n){if(Object.prototype.hasOwnProperty.call(l,n))return l[n]};return'\n \n'+(null!=(r=u(e,"if").call(s,null!=n?u(n,"isPassword"):n,{name:"if",hash:{},fn:l.program(1,t,0),inverse:l.noop,data:t,loc:{start:{line:3,column:4},end:{line:5,column:11}}}))?r:"")+"
\n"},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/link.js b/public/build/link.js
new file mode 100644
index 00000000..6d5a77be
--- /dev/null
+++ b/public/build/link.js
@@ -0,0 +1 @@
+!function(){var l=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["link.hbs"]=l({compiler:[8,">= 4.3.0"],main:function(l,n,e,t,a){var o,r=null!=n?n:l.nullContext||{},u=l.hooks.helperMissing,i="function",c=l.escapeExpression,l=l.lookupProperty||function(l,n){if(Object.prototype.hasOwnProperty.call(l,n))return l[n]};return'\r\n\t'+c(typeof(o=null!=(o=l(e,"text")||(null!=n?l(n,"text"):n))?o:u)==i?o.call(r,{name:"text",hash:{},data:a,loc:{start:{line:2,column:1},end:{line:2,column:9}}}):o)+"\r\n"},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/login.js b/public/build/login.js
new file mode 100644
index 00000000..c5babf87
--- /dev/null
+++ b/public/build/login.js
@@ -0,0 +1 @@
+!function(){var a=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["login.hbs"]=a({compiler:[8,">= 4.3.0"],main:function(a,n,e,i,s){return''},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/main-page.js b/public/build/main-page.js
new file mode 100644
index 00000000..24fe096b
--- /dev/null
+++ b/public/build/main-page.js
@@ -0,0 +1 @@
+!function(){var a=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["main-page.hbs"]=a({compiler:[8,">= 4.3.0"],main:function(a,e,n,t,i){return'\n\n
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/note-editor.js b/public/build/note-editor.js
new file mode 100644
index 00000000..310f9109
--- /dev/null
+++ b/public/build/note-editor.js
@@ -0,0 +1 @@
+!function(){var e=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["note-editor.hbs"]=e({compiler:[8,">= 4.3.0"],main:function(e,t,a,n,i){return'\n\n
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/note.js b/public/build/note.js
new file mode 100644
index 00000000..d7d6330d
--- /dev/null
+++ b/public/build/note.js
@@ -0,0 +1 @@
+!function(){var n=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["note.hbs"]=n({compiler:[8,">= 4.3.0"],main:function(n,a,e,t,s){return'\n\t
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/notes.js b/public/build/notes.js
new file mode 100644
index 00000000..ab20e30b
--- /dev/null
+++ b/public/build/notes.js
@@ -0,0 +1 @@
+!function(){var e=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["notes.hbs"]=e({compiler:[8,">= 4.3.0"],main:function(e,n,a,t,s){return'Заголовок
\n\tПервая строчка заметки
\n\n\n
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/register.js b/public/build/register.js
new file mode 100644
index 00000000..e9b931c7
--- /dev/null
+++ b/public/build/register.js
@@ -0,0 +1 @@
+!function(){var e=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["register.hbs"]=e({compiler:[8,">= 4.3.0"],main:function(e,a,t,n,r){return'\n\t
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/submitButton.js b/public/build/submitButton.js
new file mode 100644
index 00000000..12dbda55
--- /dev/null
+++ b/public/build/submitButton.js
@@ -0,0 +1 @@
+!function(){var n=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["submitButton.hbs"]=n({compiler:[8,">= 4.3.0"],main:function(n,t,l,e,a){var o,u=null!=t?t:n.nullContext||{},s=n.hooks.helperMissing,i="function",r=n.escapeExpression,n=n.lookupProperty||function(n,t){if(Object.prototype.hasOwnProperty.call(n,t))return n[t]};return'"},useData:!0})}();
\ No newline at end of file
diff --git a/public/config.js b/public/config.js
index 541fd8d5..ef37504c 100644
--- a/public/config.js
+++ b/public/config.js
@@ -1,43 +1,58 @@
-const button = {
- "text": "toast",
- "id": "hehe123"
-}
-
const mainPage = {
- button: button
+ href: "/",
+ needAuth: true
}
const header = {
name: "YouNote",
- menu: [
- {
- href: "",
+ avatar: {
+ id: "user-avatar"
+ },
+ menu: {
+ home: {
+ href: "/",
text: "Главная",
needAuth: false
},
- {
- href: "main",
+ main: {
+ href: "/main",
text: "Мои заметки",
needAuth: true
},
- {
- href: "login",
+ auth: {
+ href: "/login",
text: "Вход",
needAuth: false
},
- {
- href: "register",
+ register: {
+ href: "/register",
text: "Регистрация",
needAuth: false
}
- ]
+ }
}
const loginPage = {
-
+ href: "login",
+ inputs: {
+ login: {
+ type: 'text',
+ placeholder: 'Введите логин'
+ },
+ password: {
+ type: "password",
+ placeholder: "Придумайте пароль"
+ }
+ },
+ buttons: {
+ submitBtn: {
+ btnLabel: "Войти"
+ }
+ }
}
const registerPage = {
+ href: "register",
inputs: {
login: {
type: "text",
diff --git a/public/index.css b/public/index.css
index 4c02b5c5..c1fa6255 100644
--- a/public/index.css
+++ b/public/index.css
@@ -1,13 +1,14 @@
@import './src/pages/main-page/main-page.css';
-@import './src/pages/register/register.css';
@import './src/components/header/header.css';
@import './src/components/notes/notes.css';
@import './src/components/note/note.css';
@import './src/components/note-editor/note-editor.css';
-@import './src/components/avatar/avatar.css';
+@import 'src/components/image/image.css';
@import './src/components/link/link.css';
@import './src/components/home/home.css';
@import './src/components/input/input.css';
+@import "./src/components/submit-button/submitButton.css";
+@import "src/pages/login/login.css";
*, *::before, *::after {
box-sizing: border-box;
@@ -38,5 +39,11 @@ p, h1, h2, h3, h4, h5, h6 {
}
#root {
- display: grid;
+ display: flex;
+ flex-direction: column;
+}
+
+#wrapper{
+ display: flex;
+ flex: 1 0 auto;
}
\ No newline at end of file
diff --git a/public/index.js b/public/index.js
index b88335ad..01d3b26e 100644
--- a/public/index.js
+++ b/public/index.js
@@ -1,91 +1,29 @@
import {config} from '/config.js';
-import MainPage from './src/pages/main-page/main-page.js';
import {Header} from "./src/components/header/header.js";
-import LoginPage from "./src/pages/login/login.js";
-import RegisterPage from "./src/pages/register/register.js";
+import {AppUserStore} from "./src/stores/user/userStore.js";
+import {router} from "./src/modules/router.js";
const root = document.getElementById('root');
console.log('root');
const wrapper = document.createElement("div")
wrapper.id = "wrapper"
+
root.appendChild(wrapper)
-export const userInfo = {
- login: '',
- username: '',
- isAuthorized: false,
-};
-const currentUrl = window.location.href.split("/").slice(-1)[0];
+AppUserStore.registerEvents();
+
-let page = '';
function renderHeader() {
- const header = new Header(root, config, userInfo.isAuthorized);
+ const header = new Header(root, config.header);
header.render();
}
-const renderMainPage = () => {
- const main = new MainPage(wrapper, config, userInfo);
- main.render();
-};
-
-const renderLoginPage = () => {
- const login = new LoginPage(wrapper, config);
- login.render();
-};
-
-const renderRegisterPage = () => {
- const register = new RegisterPage(wrapper, config);
- register.render()
-}
-
-const changePage = (href) => {
- switch (href) {
- case '':
- if (page !== 'main') {
- renderMainPage();
- page = 'main';
- history.pushState(null, null, '/')
- }
- break;
- case 'main':
- if (page !== 'main') {
- renderMainPage();
- page = 'main';
- history.pushState(null, null, '/' + page)
- }
- break;
- case 'login':
- if (page !== 'login') {
- renderLoginPage();
- page = 'login';
- history.pushState(null, null, '/' + page)
- }
- break;
- case 'register':
- if (page !== 'register') {
- renderRegisterPage();
- page = 'register';
- history.pushState(null, null, '/' + page)
- }
- break;
- default:
- console.log('undefined click');
- }
-};
+renderHeader();
-const listenClick = (e) => {
- e.preventDefault();
- const anchor = e.target.closest('a');
- if (!anchor) return;
- const href = anchor.getAttribute('href').replace('/', '');
- changePage(href);
-};
-window.addEventListener('click', listenClick);
+router.init(wrapper, config)
-renderHeader();
-changePage(currentUrl);
diff --git a/public/src/assets/avatar.png b/public/src/assets/avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3fe2ccaafd6128e47bf61297963b492900aa513
GIT binary patch
literal 16277
zcmc&*gСтраница регистрации
\n
-
-
\ No newline at end of file
diff --git a/public/src/components/avatar/avatar.js b/public/src/components/avatar/avatar.js
deleted file mode 100644
index 4ee5dd9a..00000000
--- a/public/src/components/avatar/avatar.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import "../../../build/avatar.js"
-
-export class Avatar {
- #parent;
- #config;
-
- constructor(parent, config) {
- this.#parent = parent;
- this.#config = config;
- }
-
- render() {
- console.log("render avatar")
-
- const tmp = document.createElement('div');
- const template = Handlebars.templates["avatar.hbs"];
- tmp.innerHTML = template(this.#config.avatar);
- this.#parent.appendChild(tmp.firstElementChild);
- }
-}
diff --git a/public/src/components/header/header.css b/public/src/components/header/header.css
index bf99bf63..c9ddd5a8 100644
--- a/public/src/components/header/header.css
+++ b/public/src/components/header/header.css
@@ -1,6 +1,7 @@
header {
width: 100%;
padding: 10px 25px;
+ height: 80px;
background: #fff;
display: flex;
justify-content: space-between;
@@ -28,4 +29,10 @@ header .menu-container {
header .menu-container .menu-item a {
text-decoration: none;
+}
+
+header .right-container .avatar {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
}
\ No newline at end of file
diff --git a/public/src/components/header/header.js b/public/src/components/header/header.js
index 7202f964..48903d02 100644
--- a/public/src/components/header/header.js
+++ b/public/src/components/header/header.js
@@ -1,41 +1,86 @@
-import {Avatar} from "../avatar/avatar.js";
+import {Image} from "../image/image.js";
import {Link} from "../link/link.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";
export class Header {
#parent;
#config;
- #isAuth;
- constructor(parent, config, isAuth) {
+ #menu;
+
+ #homePageLink;
+ #mainPageLink;
+ #authPageLink;
+ #registerPageLink;
+
+ #avatar;
+
+ constructor(parent, config) {
this.#parent = parent;
this.#config = config;
- this.#isAuth = isAuth;
+ }
+
+ get self () {
+ return document.getElementById("header")
+ }
+
+ #addEventListeners(){
+ AppEventMaker.subscribe(UserStoreEvents.SUCCSSESFUL_LOGIN, () => {
+ console.log("log hueg")
+ this.#avatar = new Image(document.querySelector(".right-container"), this.#config.avatar);
+ this.#avatar.render();
+ this.#avatar.updateImage(AppUserStore.avatar)
+
+ this.#authPageLink.self.hidden = true;
+
+ this.#authPageLink.self.hidden = true;
+ this.#registerPageLink.self.hidden = true;
+
+ this.#homePageLink.self.hidden = true;
+
+ this.#mainPageLink = new Link(this.#menu, this.#config.menu.main)
+ this.#mainPageLink.render()
+
+ router.changePage("/")
+ })
}
render() {
- this.#parent.insertAdjacentHTML('beforebegin', window.Handlebars.templates['header.hbs'](this.#config.header));
+ console.log("header render")
- const self = document.getElementById("header")
+ this.#parent.insertAdjacentHTML('afterbegin', window.Handlebars.templates['header.hbs'](this.#config));
const rightContainer = document.querySelector(".right-container")
- const menu = document.createElement("div")
- menu.className = "menu-container"
+ this.#menu = document.createElement("div")
+ this.#menu.className = "menu-container"
+
+ rightContainer.appendChild(this.#menu)
+
+ if (this.#homePageLink === undefined){
+ this.#homePageLink = new Link(this.#menu, this.#config.menu.home)
+ this.#homePageLink.render()
+ }
+
+ if (this.#authPageLink === undefined) {
+ this.#authPageLink = new Link(this.#menu, this.#config.menu.auth)
+ this.#authPageLink.render()
+ }
+
+ if (this.#registerPageLink === undefined) {
+ this.#registerPageLink = new Link(this.#menu, this.#config.menu.register)
+ this.#registerPageLink.render()
+ }
- this.#config.header.menu.forEach(item => {
- const link = new Link(menu, item, this.#isAuth)
- link.render()
- })
// TODO
// Сделать logout
- rightContainer.appendChild(menu)
+ this.#addEventListeners();
- if (this.#isAuth) {
- const avatar = new Avatar(rightContainer, this.#config.avatar);
- avatar.render();
- }
}
}
diff --git a/public/src/components/image/image.css b/public/src/components/image/image.css
new file mode 100644
index 00000000..e69de29b
diff --git a/public/src/components/image/image.hbs b/public/src/components/image/image.hbs
new file mode 100644
index 00000000..78b0e86c
--- /dev/null
+++ b/public/src/components/image/image.hbs
@@ -0,0 +1 @@
+
+
+ {{#if isPassword}}
+
+ {{/if}}
+
diff --git a/public/src/components/input/input.js b/public/src/components/input/input.js
index 2abb691e..da408339 100644
--- a/public/src/components/input/input.js
+++ b/public/src/components/input/input.js
@@ -1,42 +1,113 @@
import "../../../build/input.js"
+import {inputEvents} from "./events.js";
+import {AppEventMaker} from "../../modules/eventMaker.js";
export class Input {
#parent;
#config;
+ #listeners = {
+ showPassword: '',
+ change: ''
+ }
+ #image;
+ #input;
+
+ id;
constructor(parent, config) {
this.#parent = parent;
this.#config = config;
+ this.#config.id = crypto.randomUUID();
+
+ this.id = this.#config.id;
+
+ this.#listeners.showPassword = this.#showPassword.bind(this);
+ this.#listeners.change = this.#change.bind(this);
+
+ this.#config.isPassword = this.#config.type === 'password';
}
- render() {
- const div = document.createElement('div');
- div.className = "input-container"
+ get self() {
+ return document.querySelector(`#input-${this.#config.id}`);
+ }
+ get value() {
+ return this.#input.value;
+ }
+
+ #change(){
+ AppEventMaker.notify(inputEvents.INPUT_CHANGE, this.#config.id);
+ }
+
+ #showPassword() {
+ if (this.#input.type === "password") {
+ this.#input.type = "text";
+ this.#image.src = "/src/assets/eye-open.svg";
+ } else {
+ this.#input.type = "password";
+ this.#image.src = "/src/assets/eye-close.svg";
+ }
+ }
+
+ #addEventListeners() {
+ if(this.#config.isPassword){
+ this.#image.addEventListener('click', this.#listeners.showPassword);
+ }
+ this.#input.addEventListener('change', this.#listeners.change);
+ }
+
+ #removeEventListeners() {
+ if (this.#config.isPassword){
+ this.#image.removeEventListener('click', this.#listeners.showPassword);
+ }
+ this.#input.removeEventListener('change', this.#listeners.change);
+ }
+
+ remove(){
+ this.#removeEventListeners();
+ }
+
+ render() {
const template = Handlebars.templates["input.hbs"];
- div.innerHTML = template(this.#config);
-
- const input = div.querySelector("input");
-
- if (this.#config.type === "password") {
- const image = document.createElement("img");
- image.src = "/src/assets/eye-close.svg";
- image.className = "show-password-btn";
-
- image.addEventListener("click", function () {
- if (input.type === "password") {
- input.type = "text";
- image.src = "/src/assets/eye-open.svg";
- } else {
- input.type = "password";
- image.src = "/src/assets/eye-close.svg";
- }
- })
-
- div.appendChild(image);
+
+ if(this.self === null){
+ this.#parent.insertAdjacentHTML(
+ 'beforeend',
+ template(this.#config)
+ );
+ this.#image = document.querySelector(`#input-${this.#config.id} > img`);
+ this.#input = document.querySelector(`#input-${this.#config.id} > input`);
+ this.#addEventListeners();
}
- this.#parent.appendChild(div);
+
+ // const div = document.createElement('div');
+ // div.className = "input-container"
+ //
+ // // const template = Handlebars.templates["input.hbs"];
+ // div.innerHTML = template(this.#config);
+ //
+ // const input = div.querySelector("input");
+ //
+ // if (this.#config.type === "password") {
+ // this.#image = document.createElement("img");
+ // image.src = "/src/assets/eye-close.svg";
+ // image.className = "show-password-btn";
+ //
+ // image.addEventListener("click", function () {
+ // if (input.type === "password") {
+ // input.type = "text";
+ // image.src = "/src/assets/eye-open.svg";
+ // } else {
+ // input.type = "password";
+ // image.src = "/src/assets/eye-close.svg";
+ // }
+ // })
+ //
+ // div.appendChild(image);
+ // }
+ //
+ // this.#parent.appendChild(div);
}
}
diff --git a/public/src/components/link/link.hbs b/public/src/components/link/link.hbs
index d78e61c9..d66ac22c 100644
--- a/public/src/components/link/link.hbs
+++ b/public/src/components/link/link.hbs
@@ -1 +1,3 @@
-{{text}}
\ No newline at end of file
+
+ {{text}}
+
\ No newline at end of file
diff --git a/public/src/components/link/link.js b/public/src/components/link/link.js
index 3d01b75c..f413a634 100644
--- a/public/src/components/link/link.js
+++ b/public/src/components/link/link.js
@@ -3,23 +3,21 @@ import "../../../build/link.js"
export class Link {
#parent;
#config;
- #isAuth;
- constructor(parent, config, isAuth) {
+ id;
+
+ constructor(parent, config) {
+ this.id = crypto.randomUUID();
this.#parent = parent;
this.#config = config;
- this.#isAuth = isAuth;
+ this.#config.id = this.id;
}
- render() {
- if (this.#config.needAuth && !this.#isAuth) {
- return
- }
-
- if (!this.#config.needAuth && this.#isAuth) {
- return
- }
+ get self(){
+ return document.getElementById(`${this.id}`);
+ }
+ render() {
const tmp = document.createElement('div');
const template = Handlebars.templates["link.hbs"];
tmp.innerHTML = template(this.#config);
diff --git a/public/src/components/submit-button/events.js b/public/src/components/submit-button/events.js
new file mode 100644
index 00000000..711ccc72
--- /dev/null
+++ b/public/src/components/submit-button/events.js
@@ -0,0 +1,3 @@
+export const SubmitButtonEvents = {
+ BUTTON_SUBMIT: 'BUTTON_SUBMIT'
+}
\ No newline at end of file
diff --git a/public/src/components/submit-button/submitButton.css b/public/src/components/submit-button/submitButton.css
new file mode 100644
index 00000000..f2972e89
--- /dev/null
+++ b/public/src/components/submit-button/submitButton.css
@@ -0,0 +1,18 @@
+.submit-btn{
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #56A6F0;
+ border-radius: 20px;
+ border: none;
+ color: #ffffff;
+ text-align: center;
+ padding: 8px;
+ box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+}
+
+.submit-btn:active{
+
+ box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
+}
\ No newline at end of file
diff --git a/public/src/components/submit-button/submitButton.hbs b/public/src/components/submit-button/submitButton.hbs
new file mode 100644
index 00000000..e9486370
--- /dev/null
+++ b/public/src/components/submit-button/submitButton.hbs
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/public/src/components/submit-button/submitButton.js b/public/src/components/submit-button/submitButton.js
new file mode 100644
index 00000000..4a036dff
--- /dev/null
+++ b/public/src/components/submit-button/submitButton.js
@@ -0,0 +1,54 @@
+import '../../../build/submitButton.js'
+import {AppEventMaker} from "../../modules/eventMaker.js";
+import {SubmitButtonEvents} from "./events.js";
+
+export class SubmitButton{
+ #parent;
+ #props = {
+ btnLabel: ''
+ };
+ id;
+
+ #listeners = {
+ submit: this.#submit.bind(this)
+ };
+
+ constructor(parent, {btnLabel}) {
+ this.id = crypto.randomUUID();
+ this.#parent = parent;
+ this.#props.btnLabel = btnLabel;
+ this.#props.id = this.id;
+ // this.#listeners.submit = this.#submit.bind(this);
+ }
+
+ get self(){
+ return document.getElementById(`submit-btn-${this.id}`);
+ }
+
+ #submit(event){
+ event.preventDefault();
+ AppEventMaker.notify(SubmitButtonEvents.BUTTON_SUBMIT, this.id);
+ }
+
+ #addEventListeners(){
+ this.self.addEventListener('click', this.#listeners.submit);
+ }
+
+ #removeEventListeners(){
+ this.self.removeEventListener('click', this.#listeners.submit);
+ }
+
+ remove(){
+ this.#removeEventListeners();
+ }
+
+ render(){
+
+ this.#parent.insertAdjacentHTML(
+ 'beforeend',
+ Handlebars.templates['submitButton.hbs'](this.#props)
+ )
+
+ this.#addEventListeners();
+ }
+}
\ No newline at end of file
diff --git a/public/src/modules/dispathcer.js b/public/src/modules/dispathcer.js
new file mode 100644
index 00000000..cf369634
--- /dev/null
+++ b/public/src/modules/dispathcer.js
@@ -0,0 +1,20 @@
+class Dispatcher{
+ #callbacks;
+
+ constructor() {
+ this.#callbacks = [];
+ }
+
+ register(callback){
+ this.#callbacks.push(callback);
+ }
+
+ dispatch(action){
+ console.log(action)
+ this.#callbacks.forEach((callback) => {
+ callback(action);
+ })
+ }
+}
+
+export const AppDispatcher = new Dispatcher();
\ No newline at end of file
diff --git a/public/src/modules/eventMaker.js b/public/src/modules/eventMaker.js
new file mode 100644
index 00000000..d9d369cb
--- /dev/null
+++ b/public/src/modules/eventMaker.js
@@ -0,0 +1,31 @@
+class EventMaker{
+ #eventsMap;
+
+ constructor() {
+ this.#eventsMap = new Map();
+ }
+
+ subscribe(event, callback){
+ if (event in this.#eventsMap){
+ this.#eventsMap[event].add(callback);
+ return;
+ }
+ this.#eventsMap[event] = new Set([callback]);
+ }
+
+ unsubscribe(event, callback){
+ this.#eventsMap[event].delete(callback);
+ }
+
+ notify(event, ...args){
+ if(!(event in this.#eventsMap)){
+ return;
+ }
+
+ this.#eventsMap[event].forEach((listener) => {
+ listener.apply(this, args);
+ })
+ }
+}
+
+export const AppEventMaker = new EventMaker();
\ No newline at end of file
diff --git a/public/src/modules/router.js b/public/src/modules/router.js
new file mode 100644
index 00000000..ea9976f4
--- /dev/null
+++ b/public/src/modules/router.js
@@ -0,0 +1,58 @@
+import MainPage from "../pages/main-page/main-page.js";
+import LoginPage from "../pages/login/login.js";
+import RegisterPage from "../pages/register/register.js";
+
+class Router {
+ #currentUrl;
+ #currentPage;
+ #pages;
+
+ constructor() {
+ this.#currentUrl = window.location.href.split("/").slice(-1)[0];
+ this.#currentPage = undefined;
+ this.#pages = [];
+
+ this.registerEvents();
+ }
+
+ init(root, config){
+ const mainPage = new MainPage(root, config.mainPage)
+ this.#pages.push(mainPage)
+
+ const loginPage = new LoginPage(root, config.loginPage)
+ this.#pages.push(loginPage)
+
+ const registerPage = new RegisterPage(root, config.registerPage)
+ this.#pages.push(registerPage)
+
+
+ this.changePage(this.#currentUrl)
+ }
+
+ changePage(href) {
+ if (href === "") href = "/"
+
+ this.#pages.forEach(page => {
+ if (this.#currentPage !== page && page.href === href) {
+ this.#currentPage?.remove()
+ page.render()
+ this.#currentPage = page
+ history.pushState(null, null, page.href)
+ }
+ })
+ }
+
+ registerEvents() {
+ window.addEventListener('click', (e) => this.listenClick(e));
+ }
+
+ listenClick (e) {
+ e.preventDefault();
+ const anchor = e.target.closest('a');
+ if (!anchor) return;
+ const href = anchor.getAttribute('href').replace('/', '');
+ this.changePage(href);
+ }
+}
+
+export const router = new Router()
diff --git a/public/src/pages/login/login.css b/public/src/pages/login/login.css
index e69de29b..50721262 100644
--- a/public/src/pages/login/login.css
+++ b/public/src/pages/login/login.css
@@ -0,0 +1,21 @@
+.centered-widget{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+}
+
+.login-window {
+ padding: 20px;
+ border-radius: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background: #ffffff;
+}
+
+.login-window > div {
+ margin: 10px;
+}
\ No newline at end of file
diff --git a/public/src/pages/login/login.hbs b/public/src/pages/login/login.hbs
index 6d4e59d8..ee077b39 100644
--- a/public/src/pages/login/login.hbs
+++ b/public/src/pages/login/login.hbs
@@ -1,3 +1,9 @@
-
+ {{/if}}
+
- \n\n\t\n\n\t '},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/home.js b/public/build/home.js
deleted file mode 100644
index 4888e240..00000000
--- a/public/build/home.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){var a=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["home.hbs"]=a({compiler:[8,">= 4.3.0"],main:function(a,e,n,t,s){return''},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/input.js b/public/build/input.js
deleted file mode 100644
index 2d6a8233..00000000
--- a/public/build/input.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){var l=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["input.hbs"]=l({1:function(l,n,e,a,t){return' \n'},compiler:[8,">= 4.3.0"],main:function(l,n,e,a,t){var o,s=null!=n?n:l.nullContext||{},c=l.hooks.helperMissing,i="function",r=l.escapeExpression,u=l.lookupProperty||function(l,n){if(Object.prototype.hasOwnProperty.call(l,n))return l[n]};return'
Страница входа
+ \ No newline at end of file diff --git a/public/src/pages/login/login.js b/public/src/pages/login/login.js index d9d96f99..431c0507 100644 --- a/public/src/pages/login/login.js +++ b/public/src/pages/login/login.js @@ -1,17 +1,112 @@ import "../../../build/login.js" +import {Input} from "../../components/input/input.js"; +import {SubmitButton} from "../../components/submit-button/submitButton.js"; +import {inputEvents} from "../../components/input/events.js"; +import {SubmitButtonEvents} from "../../components/submit-button/events.js"; +import {AppEventMaker} from "../../modules/eventMaker.js"; +import {AppDispatcher} from "../../modules/dispathcer.js"; +import {AppUserStore, UserActions} from "../../stores/user/userStore.js"; export default class LoginPage { #parent; #config; + #loginInput; + #passwordInput; + #submitBtn; + + #subscribed; // Костыль + constructor(parent, config) { this.#parent = parent; this.#config = config; + this.#subscribed = false; // Костыль } - render() { + get href () { + return this.#config.href; + } + + #subscribeToEvents(){ + AppEventMaker.subscribe(inputEvents.INPUT_CHANGE, (id) => { + if(id === this.#passwordInput.id){ + this.#validatePassword() + } else{ + this.#validateLogin(); + } + }); + + AppEventMaker.subscribe(SubmitButtonEvents.BUTTON_SUBMIT, (id) => { + if(id === this.#submitBtn.id){ + AppDispatcher.dispatch({ + type: UserActions.LOGIN, + payload: this.#loginInput.value + }) + } + }) + + this.#subscribed = true; // Костыль + } + + #unsubscribeToEvents(){ + console.log("unsubscribeToEvents") + + // TODO + // Не работает + + AppEventMaker.unsubscribe(inputEvents.INPUT_CHANGE, (id) => { + if(id === this.#passwordInput.id){ + this.#validatePassword() + } else{ + this.#validateLogin(); + } + }); + + AppEventMaker.unsubscribe(SubmitButtonEvents.BUTTON_SUBMIT, (id) => { + console.log("fasfdfasd") + if(id === this.#submitBtn.id){ + console.log("fffff") + AppDispatcher.dispatch({ + type: UserActions.LOGIN + }) + } + }) + + } + + #validatePassword(){ + console.log("password validated") + } + + #validateLogin(){ + console.log("login validated") + } + + remove(){ + this.#unsubscribeToEvents(); + this.#submitBtn.remove(); + this.#passwordInput.remove(); + this.#loginInput.remove(); this.#parent.innerHTML = ''; + } + + render() { + console.log("loginPage render") + + this.#parent.insertAdjacentHTML('beforeend', window.Handlebars.templates['login.hbs'](this.#config.loginPage)); + this.#loginInput = new Input(document.querySelector('.username-input-place'), this.#config.inputs.login); + this.#loginInput.render(); + + this.#passwordInput = new Input(document.querySelector('.password-input-place'), this.#config.inputs.password); + this.#passwordInput.render(); + + this.#submitBtn = new SubmitButton(document.querySelector('.submit-btn-place'), this.#config.buttons.submitBtn); + this.#submitBtn.render(); + + // Костыль + if (!this.#subscribed) { + this.#subscribeToEvents(); + } - this.#parent.insertAdjacentHTML('beforeend', window.Handlebars.templates['login.hbs'](this.#config.login)); } } diff --git a/public/src/pages/main-page/main-page.js b/public/src/pages/main-page/main-page.js index 964887e2..ca3cdd85 100644 --- a/public/src/pages/main-page/main-page.js +++ b/public/src/pages/main-page/main-page.js @@ -1,38 +1,47 @@ +import "../../../build/main-page.js" import {NotesContainer} from "../../components/notes/notes.js"; import {NoteEditor} from "../../components/note-editor/note-editor.js"; +import {AppUserStore} from "../../stores/user/userStore.js"; import {Home} from "../../components/home/home.js"; -import "../../../build/main-page.js" export default class MainPage { #parent; #config; - #user; - constructor(parent, config, user) { + constructor(parent, config) { this.#parent = parent; this.#config = config; - this.#user = user; } - render() { + get href () { + return this.#config.href; + } + + get self () { + return document.getElementById('main-page'); + } + + remove(){ + console.log("MainPage remove") this.#parent.innerHTML = ''; + } + + render() { + console.log("MainPage render") const tmp = document.createElement('div'); const template = Handlebars.templates["main-page.hbs"]; tmp.innerHTML = template(this.#config.mainPage); this.#parent.appendChild(tmp.firstElementChild); - const self = document.getElementById('main-page'); - - - if (this.#user.isAuthorized) { - const notesContainer = new NotesContainer(self, this.#config) + if (AppUserStore.IsAuthenticated()) { + const notesContainer = new NotesContainer(this.self, this.#config) notesContainer.render() - const noteEditor = new NoteEditor(self, this.#config) + const noteEditor = new NoteEditor(this.self, this.#config) noteEditor.render() } else { - const home = new Home(self, this.#config) + const home = new Home(this.self, this.#config) home.render() } } diff --git a/public/src/pages/register/register.js b/public/src/pages/register/register.js index d7f2941e..a9b9f419 100644 --- a/public/src/pages/register/register.js +++ b/public/src/pages/register/register.js @@ -10,20 +10,27 @@ export default class RegisterPage { this.#config = config; } - render() { + get href () { + return this.#config.href; + } + + remove(){ this.#parent.innerHTML = ''; + } + + render() { this.#parent.insertAdjacentHTML('beforeend', window.Handlebars.templates['register.hbs'](this.#config.registerPage)); const self = document.getElementById("register-page") - const input1 = new Input(self, this.#config.registerPage.inputs.login) + const input1 = new Input(self, this.#config.inputs.login) input1.render() - const input2 = new Input(self, this.#config.registerPage.inputs.password) + const input2 = new Input(self, this.#config.inputs.password) input2.render() - const input3 = new Input(self, this.#config.registerPage.inputs.repeatPassword) + const input3 = new Input(self, this.#config.inputs.repeatPassword) input3.render() } } diff --git a/public/src/stores/user/events.js b/public/src/stores/user/events.js new file mode 100644 index 00000000..e535e34a --- /dev/null +++ b/public/src/stores/user/events.js @@ -0,0 +1,3 @@ +export const UserStoreEvents = { + SUCCSSESFUL_LOGIN: 'SUCCSSESFUL_LOGIN' +} \ No newline at end of file diff --git a/public/src/stores/user/userStore.js b/public/src/stores/user/userStore.js new file mode 100644 index 00000000..4e1600db --- /dev/null +++ b/public/src/stores/user/userStore.js @@ -0,0 +1,45 @@ +import {AppDispatcher} from "../../modules/dispathcer.js"; +import {AppEventMaker} from "../../modules/eventMaker.js"; +import {UserStoreEvents} from "./events.js"; + +class UserStore { + #state = { + username: '', + avatarUrl: '/src/assets/avatar.png', + isAuth: false + } + + registerEvents(){ + AppDispatcher.register((action) => { + switch (action.type){ + case UserActions.LOGIN: + this.login(action.payload); + } + }) + } + + get username() { + return this.#state.username; + } + + get avatar() { + return this.#state.avatarUrl; + } + + IsAuthenticated() { + return this.#state.isAuth; + } + + login(username){ + console.log("login successfull"); + this.#state.isAuth = true; + this.#state.username = username; + AppEventMaker.notify(UserStoreEvents.SUCCSSESFUL_LOGIN); + } +} + +export const AppUserStore = new UserStore(); + +export const UserActions = { + LOGIN: "LOGIN" +} \ No newline at end of file From 4be1d6631696d3c3226937a531bf73038c226adc Mon Sep 17 00:00:00 2001 From: YarikMix <43493788+YarikMix@users.noreply.github.com> Date: Mon, 26 Feb 2024 15:31:34 +0300 Subject: [PATCH 3/7] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?= =?UTF-8?q?=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B0=20=D0=BF?= =?UTF-8?q?=D1=80=D0=BE=D1=84=D0=B8=D0=BB=D1=8F=20=D0=B8=20=D0=BF=D0=BE?= =?UTF-8?q?=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=20=D1=81=D1=82=D0=B8=D0=BB?= =?UTF-8?q?=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build.sh | 10 +- public/build/header.js | 1 - public/build/home.js | 1 - public/build/image.js | 1 - public/build/input.js | 1 - public/build/link.js | 1 - public/build/login.js | 1 - public/build/main-page.js | 1 - public/build/note-editor.js | 1 - public/build/note.js | 1 - public/build/notes.js | 1 - public/build/register.js | 1 - public/build/submitButton.js | 1 - public/config.js | 95 ++++++++++++++----- public/index.css | 17 +++- public/index.js | 26 +++-- .../submitButton.css => button/button.css} | 8 +- .../submitButton.hbs => button/button.hbs} | 0 .../submitButton.js => button/button.js} | 6 +- .../{submit-button => button}/events.js | 0 public/src/components/footer/footer.css | 6 ++ public/src/components/footer/footer.hbs | 3 + public/src/components/footer/footer.js | 20 ++++ public/src/components/header/header.css | 5 +- public/src/components/header/header.js | 11 ++- public/src/components/input/input.css | 30 ++++-- public/src/components/input/input.hbs | 1 + public/src/components/input/input.js | 6 ++ public/src/components/link/link.css | 9 ++ public/src/components/note/note.css | 1 + public/src/components/wrapper/wrapper.css | 0 public/src/components/wrapper/wrapper.hbs | 3 + public/src/components/wrapper/wrapper.js | 20 ++++ public/src/modules/router.js | 7 +- public/src/pages/login/login.css | 12 ++- public/src/pages/login/login.hbs | 14 +-- public/src/pages/login/login.js | 77 +++++++++++---- public/src/pages/main-page/main-page.hbs | 3 - .../main-page.css => main/main.css} | 3 +- public/src/pages/main/main.hbs | 3 + .../{main-page/main-page.js => main/main.js} | 18 ++-- public/src/pages/profile/profile.css | 8 ++ public/src/pages/profile/profile.hbs | 3 + public/src/pages/profile/profile.js | 48 ++++++++++ public/src/pages/register/register.css | 20 +++- public/src/pages/register/register.hbs | 8 +- public/src/pages/register/register.js | 35 +++++-- 47 files changed, 419 insertions(+), 129 deletions(-) delete mode 100644 public/build/header.js delete mode 100644 public/build/home.js delete mode 100644 public/build/image.js delete mode 100644 public/build/input.js delete mode 100644 public/build/link.js delete mode 100644 public/build/login.js delete mode 100644 public/build/main-page.js delete mode 100644 public/build/note-editor.js delete mode 100644 public/build/note.js delete mode 100644 public/build/notes.js delete mode 100644 public/build/register.js delete mode 100644 public/build/submitButton.js rename public/src/components/{submit-button/submitButton.css => button/button.css} (76%) rename public/src/components/{submit-button/submitButton.hbs => button/button.hbs} (100%) rename public/src/components/{submit-button/submitButton.js => button/button.js} (89%) rename public/src/components/{submit-button => button}/events.js (100%) create mode 100644 public/src/components/footer/footer.css create mode 100644 public/src/components/footer/footer.hbs create mode 100644 public/src/components/footer/footer.js create mode 100644 public/src/components/wrapper/wrapper.css create mode 100644 public/src/components/wrapper/wrapper.hbs create mode 100644 public/src/components/wrapper/wrapper.js delete mode 100644 public/src/pages/main-page/main-page.hbs rename public/src/pages/{main-page/main-page.css => main/main.css} (61%) create mode 100644 public/src/pages/main/main.hbs rename public/src/pages/{main-page/main-page.js => main/main.js} (62%) create mode 100644 public/src/pages/profile/profile.css create mode 100644 public/src/pages/profile/profile.hbs create mode 100644 public/src/pages/profile/profile.js diff --git a/build.sh b/build.sh index 27995e9e..462943d1 100644 --- a/build.sh +++ b/build.sh @@ -1,13 +1,17 @@ #!/bin/bash -mkdir public/build -handlebars -m public/src/pages/main-page/main-page.hbs -f public/build/main-page.js +mkdir -p public/build +handlebars -m public/src/pages/main/main.hbs -f public/build/main.js handlebars -m public/src/pages/login/login.hbs -f public/build/login.js handlebars -m public/src/pages/register/register.hbs -f public/build/register.js +handlebars -m public/src/pages/profile/profile.hbs -f public/build/profile.js +handlebars -m public/src/components/image/image.hbs -f public/build/image.js handlebars -m public/src/components/header/header.hbs -f public/build/header.js handlebars -m public/src/components/notes/notes.hbs -f public/build/notes.js handlebars -m public/src/components/note/note.hbs -f public/build/note.js handlebars -m public/src/components/note-editor/note-editor.hbs -f public/build/note-editor.js -handlebars -m public/src/components/avatar/avatar.hbs -f public/build/avatar.js handlebars -m public/src/components/link/link.hbs -f public/build/link.js handlebars -m public/src/components/home/home.hbs -f public/build/home.js handlebars -m public/src/components/input/input.hbs -f public/build/input.js +handlebars -m public/src/components/wrapper/wrapper.hbs -f public/build/wrapper.js +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 diff --git a/public/build/header.js b/public/build/header.js deleted file mode 100644 index b0d621a0..00000000 --- a/public/build/header.js +++ /dev/null @@ -1 +0,0 @@ -!function(){var n=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["header.hbs"]=n({compiler:[8,">= 4.3.0"],main:function(n,e,a,t,l){var r=n.lookupProperty||function(n,e){if(Object.prototype.hasOwnProperty.call(n,e))return n[e]};return'\n\n\n\t
\n\n\n\t
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/image.js b/public/build/image.js
deleted file mode 100644
index 24241429..00000000
--- a/public/build/image.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){var e=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["image.hbs"]=e({compiler:[8,">= 4.3.0"],main:function(e,a,n,l,t){var o=e.lookupProperty||function(e,a){if(Object.prototype.hasOwnProperty.call(e,a))return e[a]};return'Страница с приветствием пользователя
\n\n'},compiler:[8,">= 4.3.0"],main:function(l,n,e,a,t){var o,s=null!=n?n:l.nullContext||{},c=l.hooks.helperMissing,i="function",r=l.escapeExpression,u=l.lookupProperty||function(l,n){if(Object.prototype.hasOwnProperty.call(l,n))return l[n]};return'\n \n'+(null!=(r=u(e,"if").call(s,null!=n?u(n,"isPassword"):n,{name:"if",hash:{},fn:l.program(1,t,0),inverse:l.noop,data:t,loc:{start:{line:3,column:4},end:{line:5,column:11}}}))?r:"")+"
\n"},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/link.js b/public/build/link.js
deleted file mode 100644
index 6d5a77be..00000000
--- a/public/build/link.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){var l=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["link.hbs"]=l({compiler:[8,">= 4.3.0"],main:function(l,n,e,t,a){var o,r=null!=n?n:l.nullContext||{},u=l.hooks.helperMissing,i="function",c=l.escapeExpression,l=l.lookupProperty||function(l,n){if(Object.prototype.hasOwnProperty.call(l,n))return l[n]};return'\r\n\t'+c(typeof(o=null!=(o=l(e,"text")||(null!=n?l(n,"text"):n))?o:u)==i?o.call(r,{name:"text",hash:{},data:a,loc:{start:{line:2,column:1},end:{line:2,column:9}}}):o)+"\r\n"},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/login.js b/public/build/login.js
deleted file mode 100644
index c5babf87..00000000
--- a/public/build/login.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){var a=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["login.hbs"]=a({compiler:[8,">= 4.3.0"],main:function(a,n,e,i,s){return''},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/main-page.js b/public/build/main-page.js
deleted file mode 100644
index 24fe096b..00000000
--- a/public/build/main-page.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){var a=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["main-page.hbs"]=a({compiler:[8,">= 4.3.0"],main:function(a,e,n,t,i){return'\n\n
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/note-editor.js b/public/build/note-editor.js
deleted file mode 100644
index 310f9109..00000000
--- a/public/build/note-editor.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){var e=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["note-editor.hbs"]=e({compiler:[8,">= 4.3.0"],main:function(e,t,a,n,i){return'\n\n
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/note.js b/public/build/note.js
deleted file mode 100644
index d7d6330d..00000000
--- a/public/build/note.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){var n=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["note.hbs"]=n({compiler:[8,">= 4.3.0"],main:function(n,a,e,t,s){return'\n\t
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/notes.js b/public/build/notes.js
deleted file mode 100644
index ab20e30b..00000000
--- a/public/build/notes.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){var e=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["notes.hbs"]=e({compiler:[8,">= 4.3.0"],main:function(e,n,a,t,s){return'Заголовок
\n\tПервая строчка заметки
\n\n\n
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/register.js b/public/build/register.js
deleted file mode 100644
index e9b931c7..00000000
--- a/public/build/register.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){var e=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["register.hbs"]=e({compiler:[8,">= 4.3.0"],main:function(e,a,t,n,r){return'\n\t
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/submitButton.js b/public/build/submitButton.js
deleted file mode 100644
index 12dbda55..00000000
--- a/public/build/submitButton.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(){var n=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["submitButton.hbs"]=n({compiler:[8,">= 4.3.0"],main:function(n,t,l,e,a){var o,u=null!=t?t:n.nullContext||{},s=n.hooks.helperMissing,i="function",r=n.escapeExpression,n=n.lookupProperty||function(n,t){if(Object.prototype.hasOwnProperty.call(n,t))return n[t]};return'"},useData:!0})}();
\ No newline at end of file
diff --git a/public/config.js b/public/config.js
index ef37504c..533cd0ed 100644
--- a/public/config.js
+++ b/public/config.js
@@ -5,6 +5,9 @@ const mainPage = {
const header = {
name: "YouNote",
+ avatarLink: {
+ href: "/profile"
+ },
avatar: {
id: "user-avatar"
},
@@ -15,7 +18,7 @@ const header = {
needAuth: false
},
main: {
- href: "/main",
+ href: "/",
text: "Мои заметки",
needAuth: true
},
@@ -32,41 +35,80 @@ const header = {
}
}
+const footer = {
+ id: "footer"
+}
+
+const wrapper = {
+ id: "wrapper"
+}
+
+const profilePage = {
+ href: "profile",
+ id: "profile-page",
+ logoutBtn: {
+ btnLabel: "Выйти"
+ }
+}
+
const loginPage = {
href: "login",
- inputs: {
- login: {
- type: 'text',
- placeholder: 'Введите логин'
+ form: {
+ id: "login-form",
+ inputs: {
+ login: {
+ type: 'text',
+ placeholder: 'Введите логин'
+ },
+ password: {
+ type: "password",
+ placeholder: "Придумайте пароль"
+ }
},
- password: {
- type: "password",
- placeholder: "Придумайте пароль"
- }
- },
- buttons: {
- submitBtn: {
- btnLabel: "Войти"
+ links: {
+ registerPage: {
+ href: "/register",
+ text: "Ещё не зарегистрированы?",
+ }
+ },
+ buttons: {
+ submitBtn: {
+ btnLabel: "Войти"
+ }
}
}
}
const registerPage = {
href: "register",
- inputs: {
- login: {
- type: "text",
- placeholder: "Придумайте логин"
+ form: {
+ id: "register-form",
+ inputs: {
+ login: {
+ type: "text",
+ placeholder: "Введите логин"
+ },
+ password: {
+ type: "password",
+ placeholder: "Введите пароль"
+ },
+ repeatPassword: {
+ type: "password",
+ placeholder: "Повторите пароль"
+ }
},
- password: {
- type: "password",
- placeholder: "Придумайте пароль"
+ links: {
+ loginPage: {
+ href: "/login",
+ text: "Уже есть аккаунт?",
+ }
},
- repeatPassword: {
- type: "password",
- placeholder: "Повторите пароль"
+ buttons: {
+ submitBtn: {
+ btnLabel: "Зарегистрироваться"
+ }
}
- }
+ },
}
const notes = {
@@ -90,9 +132,12 @@ export const config = {
mainPage: mainPage,
loginPage: loginPage,
registerPage: registerPage,
+ profilePage: profilePage,
header: header,
notes: notes,
noteEditor: noteEditor,
note: note,
- avatar: avatar
+ avatar: avatar,
+ wrapper: wrapper,
+ footer: footer
};
diff --git a/public/index.css b/public/index.css
index c1fa6255..45963e90 100644
--- a/public/index.css
+++ b/public/index.css
@@ -1,4 +1,7 @@
-@import './src/pages/main-page/main-page.css';
+@import 'src/pages/main/main.css';
+@import "src/pages/login/login.css";
+@import "src/pages/register/register.css";
+@import "src/pages/profile/profile.css";
@import './src/components/header/header.css';
@import './src/components/notes/notes.css';
@import './src/components/note/note.css';
@@ -7,8 +10,9 @@
@import './src/components/link/link.css';
@import './src/components/home/home.css';
@import './src/components/input/input.css';
-@import "./src/components/submit-button/submitButton.css";
-@import "src/pages/login/login.css";
+@import "src/components/button/button.css";
+@import "src/components/wrapper/wrapper.css";
+@import "src/components/footer/footer.css";
*, *::before, *::after {
box-sizing: border-box;
@@ -25,6 +29,11 @@ body {
background: #D9D9D9;
}
+html,
+body {
+ height: 100%;
+}
+
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
@@ -41,9 +50,9 @@ p, h1, h2, h3, h4, h5, h6 {
#root {
display: flex;
flex-direction: column;
+ height: 100%;
}
#wrapper{
- display: flex;
flex: 1 0 auto;
}
\ No newline at end of file
diff --git a/public/index.js b/public/index.js
index 01d3b26e..00cfd411 100644
--- a/public/index.js
+++ b/public/index.js
@@ -1,29 +1,35 @@
import {config} from '/config.js';
import {Header} from "./src/components/header/header.js";
+import {Wrapper} from "./src/components/wrapper/wrapper.js";
+import {Footer} from "./src/components/footer/footer.js";
import {AppUserStore} from "./src/stores/user/userStore.js";
import {router} from "./src/modules/router.js";
const root = document.getElementById('root');
-console.log('root');
-
-const wrapper = document.createElement("div")
-wrapper.id = "wrapper"
-
-root.appendChild(wrapper)
-
AppUserStore.registerEvents();
-
function renderHeader() {
const header = new Header(root, config.header);
header.render();
}
-renderHeader();
+function renderFooter() {
+ const footer = new Footer(root, config.footer);
+ footer.render()
+}
+
+function renderWrapper() {
+ const wrapper = new Wrapper(root, config.wrapper);
+ wrapper.render();
+ router.init(wrapper.self, config);
+}
-router.init(wrapper, config)
+
+renderWrapper();
+renderHeader();
+renderFooter();
diff --git a/public/src/components/submit-button/submitButton.css b/public/src/components/button/button.css
similarity index 76%
rename from public/src/components/submit-button/submitButton.css
rename to public/src/components/button/button.css
index f2972e89..f129c519 100644
--- a/public/src/components/submit-button/submitButton.css
+++ b/public/src/components/button/button.css
@@ -6,13 +6,19 @@
background-color: #56A6F0;
border-radius: 20px;
border: none;
+ outline: none;
color: #ffffff;
text-align: center;
padding: 8px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+ cursor: pointer;
+ transition: 0.3s;
}
-.submit-btn:active{
+.submit-btn:hover{
+ transform: scale(1.05)
+}
+.submit-btn:active{
box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
}
\ No newline at end of file
diff --git a/public/src/components/submit-button/submitButton.hbs b/public/src/components/button/button.hbs
similarity index 100%
rename from public/src/components/submit-button/submitButton.hbs
rename to public/src/components/button/button.hbs
diff --git a/public/src/components/submit-button/submitButton.js b/public/src/components/button/button.js
similarity index 89%
rename from public/src/components/submit-button/submitButton.js
rename to public/src/components/button/button.js
index 4a036dff..7eb8fde6 100644
--- a/public/src/components/submit-button/submitButton.js
+++ b/public/src/components/button/button.js
@@ -1,8 +1,8 @@
-import '../../../build/submitButton.js'
+import '../../../build/button.js'
import {AppEventMaker} from "../../modules/eventMaker.js";
import {SubmitButtonEvents} from "./events.js";
-export class SubmitButton{
+export class Button {
#parent;
#props = {
btnLabel: ''
@@ -46,7 +46,7 @@ export class SubmitButton{
this.#parent.insertAdjacentHTML(
'beforeend',
- Handlebars.templates['submitButton.hbs'](this.#props)
+ Handlebars.templates['button.hbs'](this.#props)
)
this.#addEventListeners();
diff --git a/public/src/components/submit-button/events.js b/public/src/components/button/events.js
similarity index 100%
rename from public/src/components/submit-button/events.js
rename to public/src/components/button/events.js
diff --git a/public/src/components/footer/footer.css b/public/src/components/footer/footer.css
new file mode 100644
index 00000000..abb32196
--- /dev/null
+++ b/public/src/components/footer/footer.css
@@ -0,0 +1,6 @@
+footer {
+ padding: 20px;
+ background: black;
+ color: #fff;
+ flex: 0 0 auto;
+}
\ No newline at end of file
diff --git a/public/src/components/footer/footer.hbs b/public/src/components/footer/footer.hbs
new file mode 100644
index 00000000..45d1c6d6
--- /dev/null
+++ b/public/src/components/footer/footer.hbs
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/public/src/components/footer/footer.js b/public/src/components/footer/footer.js
new file mode 100644
index 00000000..4e311095
--- /dev/null
+++ b/public/src/components/footer/footer.js
@@ -0,0 +1,20 @@
+import "../../../build/footer.js"
+
+export class Footer {
+ #parent;
+ #config;
+
+ constructor(parent, config) {
+ this.#parent = parent;
+ this.#config = config;
+ }
+
+ get self() {
+ return document.getElementById(`${this.#config.id}`)
+ }
+
+ render() {
+ const template = window.Handlebars.templates["footer.hbs"];
+ this.#parent.insertAdjacentHTML('beforeend', template(this.#config));
+ }
+}
\ No newline at end of file
diff --git a/public/src/components/header/header.css b/public/src/components/header/header.css
index c9ddd5a8..18214817 100644
--- a/public/src/components/header/header.css
+++ b/public/src/components/header/header.css
@@ -1,7 +1,7 @@
header {
width: 100%;
- padding: 10px 25px;
- height: 80px;
+ height: 60px;
+ padding: 0 25px;
background: #fff;
display: flex;
justify-content: space-between;
@@ -35,4 +35,5 @@ header .right-container .avatar {
width: 50px;
height: 50px;
border-radius: 50%;
+ cursor: pointer;
}
\ No newline at end of file
diff --git a/public/src/components/header/header.js b/public/src/components/header/header.js
index 48903d02..104c8b16 100644
--- a/public/src/components/header/header.js
+++ b/public/src/components/header/header.js
@@ -31,7 +31,11 @@ export class Header {
#addEventListeners(){
AppEventMaker.subscribe(UserStoreEvents.SUCCSSESFUL_LOGIN, () => {
console.log("log hueg")
- this.#avatar = new Image(document.querySelector(".right-container"), this.#config.avatar);
+
+ const avatarLink = new Link(document.querySelector(".right-container"), this.#config.avatarLink)
+ avatarLink.render()
+
+ this.#avatar = new Image(avatarLink.self, this.#config.avatar);
this.#avatar.render();
this.#avatar.updateImage(AppUserStore.avatar)
@@ -52,7 +56,10 @@ export class Header {
render() {
console.log("header render")
- this.#parent.insertAdjacentHTML('afterbegin', window.Handlebars.templates['header.hbs'](this.#config));
+ this.#parent.insertAdjacentHTML(
+ 'afterbegin',
+ window.Handlebars.templates['header.hbs'](this.#config)
+ );
const rightContainer = document.querySelector(".right-container")
diff --git a/public/src/components/input/input.css b/public/src/components/input/input.css
index 710ca201..e5bd5396 100644
--- a/public/src/components/input/input.css
+++ b/public/src/components/input/input.css
@@ -4,20 +4,38 @@
}
.input-container input {
+ display: block;
width: 100%;
- background: #F2F2F2;
- color: #000;
- border: none;
+ padding: 12px;
+ border: 1px solid #ddd;
outline: none;
- padding: 8px 16px;
- border-radius: 15px;
+ border-radius: 5px;
+ transition: 0.3s;
+}
+
+.input-container input:focus {
+ border: 1px solid #56A6F0;
+}
+
+.input-container[data-error] input {
+ border: 1px solid #c92432;
+ color: #c92432;
+ background: #fffafa;
+}
+
+.input-container[data-error]::after {
+ content: attr(data-error);
+ color: #c92432;
+ font-size: 0.85em;
+ display: block;
+ margin: 5px 0;
}
.input-container .show-password-btn {
position: absolute;
width: 24px;
height: 24px;
- top: 8px;
+ top: 14px;
right: 16px;
cursor: pointer;
}
\ No newline at end of file
diff --git a/public/src/components/input/input.hbs b/public/src/components/input/input.hbs
index c91c698e..58f5b0af 100644
--- a/public/src/components/input/input.hbs
+++ b/public/src/components/input/input.hbs
@@ -1,5 +1,6 @@
Страница регистрации
\n
+
{{#if isPassword}}
{{/if}}
diff --git a/public/src/components/input/input.js b/public/src/components/input/input.js
index da408339..327081b1 100644
--- a/public/src/components/input/input.js
+++ b/public/src/components/input/input.js
@@ -9,6 +9,7 @@ export class Input {
showPassword: '',
change: ''
}
+
#image;
#input;
@@ -35,6 +36,10 @@ export class Input {
return this.#input.value;
}
+ throwError(message) {
+ this.self.dataset.error = message
+ }
+
#change(){
AppEventMaker.notify(inputEvents.INPUT_CHANGE, this.#config.id);
}
@@ -75,6 +80,7 @@ export class Input {
'beforeend',
template(this.#config)
);
+
this.#image = document.querySelector(`#input-${this.#config.id} > img`);
this.#input = document.querySelector(`#input-${this.#config.id} > input`);
this.#addEventListeners();
diff --git a/public/src/components/link/link.css b/public/src/components/link/link.css
index e69de29b..67703134 100644
--- a/public/src/components/link/link.css
+++ b/public/src/components/link/link.css
@@ -0,0 +1,9 @@
+a {
+ color: dodgerblue;
+ text-decoration: none;
+ transition: 0.3s;
+}
+
+a:hover {
+ color: blue;
+}
\ No newline at end of file
diff --git a/public/src/components/note/note.css b/public/src/components/note/note.css
index 67c76c25..a120ddf9 100644
--- a/public/src/components/note/note.css
+++ b/public/src/components/note/note.css
@@ -6,4 +6,5 @@
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
border-radius: 15px;
padding: 15px;
+ width: 300px;
}
\ No newline at end of file
diff --git a/public/src/components/wrapper/wrapper.css b/public/src/components/wrapper/wrapper.css
new file mode 100644
index 00000000..e69de29b
diff --git a/public/src/components/wrapper/wrapper.hbs b/public/src/components/wrapper/wrapper.hbs
new file mode 100644
index 00000000..ba1ff2ed
--- /dev/null
+++ b/public/src/components/wrapper/wrapper.hbs
@@ -0,0 +1,3 @@
+31Zem_rxJP(=**uGqbz?q1elG
z)xT;FZz7U-SZF4bT%#h|PiZ#G+1lb{=b;Yb_*FoHpdg+zbpZ7w9b;Y5oer85Nw?H6P9pXLU*Dd6p4P-
z8bO9|oEXp50eLAo;}U>(bwFH7-iA48+6QcmickX~)E83#zNA1TFF5(qP4Gse(PWY6
z-D)TX>cD}d(rn$U2xqJ({_e{p6TlVV
zputv2KQkd`EBjL7O)Mdbkz3s{{XC&B7h3Qm?eiQus2F^&??Y|s^aX_
zzsG@N7Gx{Heqh#OOdPZWpRwDaJ_nuw-?dDkR-hVmp-R^klFz>9EC|}-q5!`I?Q55(
zbUW^|?Mj)zZnn2Y3ot3fbq?6J3b+m&5h8dEcp;=K2!Bwe@}mN})&ZMAeX9}?tpW!G
zh()0!$oD6L$`(>|+K&QiB9q{}BzZ70EvU?0I8kGq-jes
z0PTXhqR=6wNHPFfH8d1}ty0R0$Zc8M5Kciu(2d-&dASI@6jBB%ZB84#g1TOTYDk(x
zW?h}6akj#<`0{~H;1)8;(1kQS*SI9WuL9ga&m&>!u$Kz&z%3mo2S#To!Ld=3rzJxQg1ygrQqMBeB$tqYib9h;uad2;tWW
z_>C$?cxi1XYFUzQjC{hs&({f;N&ZjdEd#F3H`DRB>9Y%k%hFS?G8pEhDIMMy6`=+~
zs4u1fWL4zM0->$y1oET1(1v@ry_KhP@9}@
zs5YL{WP3mp3x{zJz@Z%YileTt&1D6bYI7zRC$qRW2=LTl%oA}IIiekPq#gI)pQXtz
nPlGyvx`R0oW&KQM*XRENxl_Ir`72aj00000NkvXXu0mjfp_V6I
literal 0
HcmV?d00001
diff --git a/public/src/components/button/button.css b/public/src/components/button/button.css
index f129c519..57f17d5d 100644
--- a/public/src/components/button/button.css
+++ b/public/src/components/button/button.css
@@ -1,5 +1,6 @@
.submit-btn{
width: 100%;
+ min-width: 80px;
display: flex;
align-items: center;
justify-content: center;
@@ -20,5 +21,5 @@
}
.submit-btn:active{
- box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
+ transform: scale(0.98)
}
\ No newline at end of file
diff --git a/public/src/components/button/button.hbs b/public/src/components/button/button.hbs
index e9486370..57403bed 100644
--- a/public/src/components/button/button.hbs
+++ b/public/src/components/button/button.hbs
@@ -1 +1,3 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/public/src/components/button/button.js b/public/src/components/button/button.js
index 7eb8fde6..b59539b9 100644
--- a/public/src/components/button/button.js
+++ b/public/src/components/button/button.js
@@ -1,41 +1,35 @@
import '../../../build/button.js'
-import {AppEventMaker} from "../../modules/eventMaker.js";
-import {SubmitButtonEvents} from "./events.js";
export class Button {
#parent;
#props = {
- btnLabel: ''
+ id: "",
+ text: "",
};
- id;
+ #onSubmit;
- #listeners = {
- submit: this.#submit.bind(this)
- };
-
- constructor(parent, {btnLabel}) {
+ constructor(parent, config, onSubmit) {
this.id = crypto.randomUUID();
this.#parent = parent;
- this.#props.btnLabel = btnLabel;
this.#props.id = this.id;
- // this.#listeners.submit = this.#submit.bind(this);
+ this.#props.text = config.text;
+ this.#onSubmit = onSubmit;
}
get self(){
return document.getElementById(`submit-btn-${this.id}`);
}
- #submit(event){
- event.preventDefault();
- AppEventMaker.notify(SubmitButtonEvents.BUTTON_SUBMIT, this.id);
- }
-
#addEventListeners(){
- this.self.addEventListener('click', this.#listeners.submit);
+ this.self.addEventListener('click', (e) => {
+ console.log(e)
+ e.preventDefault()
+ this.#onSubmit()
+ });
}
#removeEventListeners(){
- this.self.removeEventListener('click', this.#listeners.submit);
+ this.self.removeEventListener('click', this.#onSubmit);
}
remove(){
@@ -44,11 +38,13 @@ export class Button {
render(){
+
this.#parent.insertAdjacentHTML(
'beforeend',
Handlebars.templates['button.hbs'](this.#props)
)
+
this.#addEventListeners();
}
}
\ No newline at end of file
diff --git a/public/src/components/header/header.css b/public/src/components/header/header.css
index 18214817..c57b0e98 100644
--- a/public/src/components/header/header.css
+++ b/public/src/components/header/header.css
@@ -1,12 +1,20 @@
header {
width: 100%;
- height: 60px;
- padding: 0 25px;
- background: #fff;
+ padding: 10px 25px;
display: flex;
justify-content: space-between;
align-items: center;
- box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+ position: fixed;
+ background: rgba(0,0,0,0);
+ transition: 0.5s;
+}
+
+header.black {
+ background: rgba(0,0,0,0.2);
+}
+
+header.black .logo-container a {
+ color: #fff;
}
header .logo-container a{
@@ -14,6 +22,7 @@ header .logo-container a{
text-decoration: none;
font-weight: bold;
font-size: 18px;
+ transition: 0.5s;
}
header .right-container {
@@ -32,8 +41,8 @@ header .menu-container .menu-item a {
}
header .right-container .avatar {
- width: 50px;
- height: 50px;
+ width: 30px;
+ height: 30px;
border-radius: 50%;
cursor: pointer;
}
\ No newline at end of file
diff --git a/public/src/components/header/header.hbs b/public/src/components/header/header.hbs
index dbf427eb..e17dc92b 100644
--- a/public/src/components/header/header.hbs
+++ b/public/src/components/header/header.hbs
@@ -1,7 +1,7 @@
{{/if}}
diff --git a/public/src/components/input/input.js b/public/src/components/input/input.js
index da408339..327081b1 100644
--- a/public/src/components/input/input.js
+++ b/public/src/components/input/input.js
@@ -9,6 +9,7 @@ export class Input {
showPassword: '',
change: ''
}
+
#image;
#input;
@@ -35,6 +36,10 @@ export class Input {
return this.#input.value;
}
+ throwError(message) {
+ this.self.dataset.error = message
+ }
+
#change(){
AppEventMaker.notify(inputEvents.INPUT_CHANGE, this.#config.id);
}
@@ -75,6 +80,7 @@ export class Input {
'beforeend',
template(this.#config)
);
+
this.#image = document.querySelector(`#input-${this.#config.id} > img`);
this.#input = document.querySelector(`#input-${this.#config.id} > input`);
this.#addEventListeners();
diff --git a/public/src/components/link/link.css b/public/src/components/link/link.css
index e69de29b..67703134 100644
--- a/public/src/components/link/link.css
+++ b/public/src/components/link/link.css
@@ -0,0 +1,9 @@
+a {
+ color: dodgerblue;
+ text-decoration: none;
+ transition: 0.3s;
+}
+
+a:hover {
+ color: blue;
+}
\ No newline at end of file
diff --git a/public/src/components/note/note.css b/public/src/components/note/note.css
index 67c76c25..a120ddf9 100644
--- a/public/src/components/note/note.css
+++ b/public/src/components/note/note.css
@@ -6,4 +6,5 @@
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
border-radius: 15px;
padding: 15px;
+ width: 300px;
}
\ No newline at end of file
diff --git a/public/src/components/wrapper/wrapper.css b/public/src/components/wrapper/wrapper.css
new file mode 100644
index 00000000..e69de29b
diff --git a/public/src/components/wrapper/wrapper.hbs b/public/src/components/wrapper/wrapper.hbs
new file mode 100644
index 00000000..ba1ff2ed
--- /dev/null
+++ b/public/src/components/wrapper/wrapper.hbs
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/public/src/components/wrapper/wrapper.js b/public/src/components/wrapper/wrapper.js
new file mode 100644
index 00000000..eb2e2e6a
--- /dev/null
+++ b/public/src/components/wrapper/wrapper.js
@@ -0,0 +1,20 @@
+import "../../../build/wrapper.js"
+
+export class Wrapper {
+ #parent;
+ #config;
+
+ constructor(parent, config) {
+ this.#parent = parent;
+ this.#config = config;
+ }
+
+ get self() {
+ return document.getElementById(`${this.#config.id}`)
+ }
+
+ render() {
+ const template = window.Handlebars.templates["wrapper.hbs"];
+ this.#parent.insertAdjacentHTML('afterbegin', template(this.#config));
+ }
+}
\ No newline at end of file
diff --git a/public/src/modules/router.js b/public/src/modules/router.js
index ea9976f4..78ef26db 100644
--- a/public/src/modules/router.js
+++ b/public/src/modules/router.js
@@ -1,6 +1,7 @@
-import MainPage from "../pages/main-page/main-page.js";
+import Main from "../pages/main/main.js";
import LoginPage from "../pages/login/login.js";
import RegisterPage from "../pages/register/register.js";
+import ProfilePage from "../pages/profile/profile.js";
class Router {
#currentUrl;
@@ -16,7 +17,7 @@ class Router {
}
init(root, config){
- const mainPage = new MainPage(root, config.mainPage)
+ const mainPage = new Main(root, config.mainPage)
this.#pages.push(mainPage)
const loginPage = new LoginPage(root, config.loginPage)
@@ -25,6 +26,8 @@ class Router {
const registerPage = new RegisterPage(root, config.registerPage)
this.#pages.push(registerPage)
+ const profilePage = new ProfilePage(root, config.profilePage)
+ this.#pages.push(profilePage)
this.changePage(this.#currentUrl)
}
diff --git a/public/src/pages/login/login.css b/public/src/pages/login/login.css
index 50721262..aae82aec 100644
--- a/public/src/pages/login/login.css
+++ b/public/src/pages/login/login.css
@@ -1,12 +1,12 @@
-.centered-widget{
- display: flex;
- align-items: center;
- justify-content: center;
+.login-form-wrapper {
width: 100%;
height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-.login-window {
+.login-form {
padding: 20px;
border-radius: 20px;
display: flex;
@@ -14,6 +14,8 @@
align-items: center;
justify-content: center;
background: #ffffff;
+ width: 300px;
+ gap: 20px;
}
.login-window > div {
diff --git a/public/src/pages/login/login.hbs b/public/src/pages/login/login.hbs
index ee077b39..d9cf5e47 100644
--- a/public/src/pages/login/login.hbs
+++ b/public/src/pages/login/login.hbs
@@ -1,9 +1,5 @@
-
\ No newline at end of file
+
+
+
diff --git a/public/src/pages/login/login.js b/public/src/pages/login/login.js
index 431c0507..d340b484 100644
--- a/public/src/pages/login/login.js
+++ b/public/src/pages/login/login.js
@@ -1,11 +1,12 @@
import "../../../build/login.js"
import {Input} from "../../components/input/input.js";
-import {SubmitButton} from "../../components/submit-button/submitButton.js";
+import {Button} from "../../components/button/button.js";
import {inputEvents} from "../../components/input/events.js";
-import {SubmitButtonEvents} from "../../components/submit-button/events.js";
+import {SubmitButtonEvents} from "../../components/button/events.js";
import {AppEventMaker} from "../../modules/eventMaker.js";
import {AppDispatcher} from "../../modules/dispathcer.js";
-import {AppUserStore, UserActions} from "../../stores/user/userStore.js";
+import {UserActions} from "../../stores/user/userStore.js";
+import {Link} from "../../components/link/link.js";
export default class LoginPage {
#parent;
@@ -13,6 +14,7 @@ export default class LoginPage {
#loginInput;
#passwordInput;
+ #link;
#submitBtn;
#subscribed; // Костыль
@@ -27,7 +29,13 @@ export default class LoginPage {
return this.#config.href;
}
+ get form () {
+ return document.getElementById(this.#config.form.id)
+ }
+
#subscribeToEvents(){
+ console.log("subscribeToEvents")
+
AppEventMaker.subscribe(inputEvents.INPUT_CHANGE, (id) => {
if(id === this.#passwordInput.id){
this.#validatePassword()
@@ -38,10 +46,15 @@ export default class LoginPage {
AppEventMaker.subscribe(SubmitButtonEvents.BUTTON_SUBMIT, (id) => {
if(id === this.#submitBtn.id){
- AppDispatcher.dispatch({
- type: UserActions.LOGIN,
- payload: this.#loginInput.value
- })
+ const validateLogin = this.#validateLogin()
+ const validatePassword = this.#validatePassword()
+ if (validateLogin && validatePassword) {
+
+ AppDispatcher.dispatch({
+ type: UserActions.LOGIN,
+ payload: this.#loginInput.value
+ })
+ }
}
})
@@ -54,6 +67,7 @@ export default class LoginPage {
// TODO
// Не работает
+ /*
AppEventMaker.unsubscribe(inputEvents.INPUT_CHANGE, (id) => {
if(id === this.#passwordInput.id){
this.#validatePassword()
@@ -61,25 +75,48 @@ export default class LoginPage {
this.#validateLogin();
}
});
+ */
AppEventMaker.unsubscribe(SubmitButtonEvents.BUTTON_SUBMIT, (id) => {
- console.log("fasfdfasd")
if(id === this.#submitBtn.id){
- console.log("fffff")
AppDispatcher.dispatch({
type: UserActions.LOGIN
})
}
})
-
}
#validatePassword(){
- console.log("password validated")
+ console.log("password validation started")
+
+ const value = this.#passwordInput.value
+
+ if (value === "")
+ {
+ this.#passwordInput.throwError("Пароль не может быть пустым!")
+ return false
+ }
+
+ return true
}
#validateLogin(){
- console.log("login validated")
+ console.log("login validation started")
+
+ console.log(this.#loginInput)
+ delete this.#loginInput.self.dataset.error
+
+ const value = this.#loginInput.value
+
+ if (value === "")
+ {
+ this.#loginInput.throwError("Логин не может быть пустым!")
+ return false
+ }
+
+
+
+ return true
}
remove(){
@@ -93,20 +130,26 @@ export default class LoginPage {
render() {
console.log("loginPage render")
- this.#parent.insertAdjacentHTML('beforeend', window.Handlebars.templates['login.hbs'](this.#config.loginPage));
- this.#loginInput = new Input(document.querySelector('.username-input-place'), this.#config.inputs.login);
+ this.#parent.insertAdjacentHTML(
+ 'beforeend',
+ window.Handlebars.templates['login.hbs'](this.#config.form)
+ );
+
+ this.#loginInput = new Input(this.form, this.#config.form.inputs.login);
this.#loginInput.render();
- this.#passwordInput = new Input(document.querySelector('.password-input-place'), this.#config.inputs.password);
+ this.#passwordInput = new Input(this.form, this.#config.form.inputs.password);
this.#passwordInput.render();
- this.#submitBtn = new SubmitButton(document.querySelector('.submit-btn-place'), this.#config.buttons.submitBtn);
+ this.#link = new Link(this.form, this.#config.form.links.registerPage);
+ this.#link.render();
+
+ this.#submitBtn = new Button(this.form, this.#config.form.buttons.submitBtn);
this.#submitBtn.render();
// Костыль
if (!this.#subscribed) {
this.#subscribeToEvents();
}
-
}
}
diff --git a/public/src/pages/main-page/main-page.hbs b/public/src/pages/main-page/main-page.hbs
deleted file mode 100644
index ab9b2f1c..00000000
--- a/public/src/pages/main-page/main-page.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/public/src/pages/main-page/main-page.css b/public/src/pages/main/main.css
similarity index 61%
rename from public/src/pages/main-page/main-page.css
rename to public/src/pages/main/main.css
index f3309779..1dc25baa 100644
--- a/public/src/pages/main-page/main-page.css
+++ b/public/src/pages/main/main.css
@@ -1,6 +1,5 @@
-#main-page {
+#main {
display: grid;
- grid-template-columns: 300px 500px;
justify-content: center;
padding: 25px;
gap: 20px;
diff --git a/public/src/pages/main/main.hbs b/public/src/pages/main/main.hbs
new file mode 100644
index 00000000..9ab6dc7b
--- /dev/null
+++ b/public/src/pages/main/main.hbs
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/public/src/pages/main-page/main-page.js b/public/src/pages/main/main.js
similarity index 62%
rename from public/src/pages/main-page/main-page.js
rename to public/src/pages/main/main.js
index ca3cdd85..43c1a141 100644
--- a/public/src/pages/main-page/main-page.js
+++ b/public/src/pages/main/main.js
@@ -1,10 +1,9 @@
-import "../../../build/main-page.js"
+import "../../../build/main.js"
import {NotesContainer} from "../../components/notes/notes.js";
-import {NoteEditor} from "../../components/note-editor/note-editor.js";
import {AppUserStore} from "../../stores/user/userStore.js";
import {Home} from "../../components/home/home.js";
-export default class MainPage {
+export default class Main {
#parent;
#config;
@@ -18,28 +17,25 @@ export default class MainPage {
}
get self () {
- return document.getElementById('main-page');
+ return document.getElementById('main');
}
remove(){
- console.log("MainPage remove")
+ console.log("Main remove")
this.#parent.innerHTML = '';
}
render() {
- console.log("MainPage render")
+ console.log("Main page render")
const tmp = document.createElement('div');
- const template = Handlebars.templates["main-page.hbs"];
- tmp.innerHTML = template(this.#config.mainPage);
+ const template = Handlebars.templates["main.hbs"];
+ tmp.innerHTML = template(this.#config);
this.#parent.appendChild(tmp.firstElementChild);
if (AppUserStore.IsAuthenticated()) {
const notesContainer = new NotesContainer(this.self, this.#config)
notesContainer.render()
-
- const noteEditor = new NoteEditor(this.self, this.#config)
- noteEditor.render()
} else {
const home = new Home(this.self, this.#config)
home.render()
diff --git a/public/src/pages/profile/profile.css b/public/src/pages/profile/profile.css
new file mode 100644
index 00000000..eedf3f46
--- /dev/null
+++ b/public/src/pages/profile/profile.css
@@ -0,0 +1,8 @@
+.profile-page {
+ display: flex;
+ flex-direction: column;
+}
+
+.profile-page button {
+ width: 200px;
+}
\ No newline at end of file
diff --git a/public/src/pages/profile/profile.hbs b/public/src/pages/profile/profile.hbs
new file mode 100644
index 00000000..d19d9a8f
--- /dev/null
+++ b/public/src/pages/profile/profile.hbs
@@ -0,0 +1,3 @@
+
+
\ No newline at end of file
diff --git a/public/src/pages/profile/profile.js b/public/src/pages/profile/profile.js
new file mode 100644
index 00000000..1959b8b5
--- /dev/null
+++ b/public/src/pages/profile/profile.js
@@ -0,0 +1,48 @@
+import "../../../build/profile.js"
+import {AppUserStore} from "../../stores/user/userStore.js";
+import {Button} from "../../components/button/button.js";
+
+export default class ProfilePage {
+ #parent;
+ #config;
+
+ #logoutBtn;
+
+ constructor(parent, config) {
+ this.#parent = parent;
+ this.#config = config;
+ }
+
+ get href () {
+ return this.#config.href;
+ }
+
+ get self () {
+ return document.getElementById(this.#config.id);
+ }
+
+ remove(){
+ this.#parent.innerHTML = '';
+ }
+
+ render() {
+ console.log("Profile page render")
+
+ this.#parent.insertAdjacentHTML(
+ 'afterbegin',
+ window.Handlebars.templates['profile.hbs'](this.#config)
+ );
+
+ console.log(this.self)
+
+ this.#logoutBtn = new Button(this.self, this.#config.logoutBtn)
+ this.#logoutBtn.render()
+
+ console.log(AppUserStore.username)
+
+ const test = document.createElement("h1")
+ test.innerText = `Добро пожаловать, ${AppUserStore.username}`
+
+ this.self.appendChild(test)
+ }
+}
diff --git a/public/src/pages/register/register.css b/public/src/pages/register/register.css
index 63747594..589ae551 100644
--- a/public/src/pages/register/register.css
+++ b/public/src/pages/register/register.css
@@ -1,6 +1,22 @@
-#register-page {
+.register-form-wrapper {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.register-form {
+ padding: 20px;
+ border-radius: 20px;
display: flex;
flex-direction: column;
- gap: 15px;
align-items: center;
+ justify-content: center;
+ background: #ffffff;
+ gap: 20px;
+}
+
+.register-window > div {
+ margin: 10px;
}
\ No newline at end of file
diff --git a/public/src/pages/register/register.hbs b/public/src/pages/register/register.hbs
index b2a81402..1167e2d7 100644
--- a/public/src/pages/register/register.hbs
+++ b/public/src/pages/register/register.hbs
@@ -1,3 +1,5 @@
-Страница профиля
+
-
\ No newline at end of file
+Страница регистрации
-
+
+
diff --git a/public/src/pages/register/register.js b/public/src/pages/register/register.js
index a9b9f419..8a568f39 100644
--- a/public/src/pages/register/register.js
+++ b/public/src/pages/register/register.js
@@ -1,10 +1,18 @@
import "../../../build/register.js"
import {Input} from "../../components/input/input.js";
+import {Link} from "../../components/link/link.js";
+import {Button} from "../../components/button/button.js";
export default class RegisterPage {
#parent;
#config;
+ #loginInput;
+ #passwordInput;
+ #repeatPasswordInput;
+ #link;
+ #submitBtn;
+
constructor(parent, config) {
this.#parent = parent;
this.#config = config;
@@ -14,23 +22,36 @@ export default class RegisterPage {
return this.#config.href;
}
+ get form () {
+ return document.getElementById(this.#config.form.id)
+ }
+
remove(){
this.#parent.innerHTML = '';
}
render() {
- this.#parent.insertAdjacentHTML('beforeend', window.Handlebars.templates['register.hbs'](this.#config.registerPage));
+ this.#parent.insertAdjacentHTML(
+ 'beforeend',
+ window.Handlebars.templates['register.hbs'](this.#config.form)
+ );
const self = document.getElementById("register-page")
- const input1 = new Input(self, this.#config.inputs.login)
- input1.render()
+ this.#loginInput = new Input(this.form, this.#config.form.inputs.login);
+ this.#loginInput.render();
+
+ this.#passwordInput = new Input(this.form, this.#config.form.inputs.password);
+ this.#passwordInput.render();
+
+ this.#repeatPasswordInput = new Input(this.form, this.#config.form.inputs.repeatPassword);
+ this.#repeatPasswordInput.render();
- const input2 = new Input(self, this.#config.inputs.password)
- input2.render()
+ this.#link = new Link(this.form, this.#config.form.links.loginPage);
+ this.#link.render();
- const input3 = new Input(self, this.#config.inputs.repeatPassword)
- input3.render()
+ this.#submitBtn = new Button(this.form, this.#config.form.buttons.submitBtn);
+ this.#submitBtn.render();
}
}
From 5ad2a9d58752386e0b63a4bbc0029774b683c30f Mon Sep 17 00:00:00 2001
From: YarikMix <43493788+YarikMix@users.noreply.github.com>
Date: Mon, 26 Feb 2024 15:47:27 +0300
Subject: [PATCH 4/7] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
=?UTF-8?q?=D0=BB=20=D0=B1=D0=B0=D0=B3=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
public/src/pages/login/login.js | 53 ++++++++++++++++++---------------
1 file changed, 29 insertions(+), 24 deletions(-)
diff --git a/public/src/pages/login/login.js b/public/src/pages/login/login.js
index d340b484..7975b165 100644
--- a/public/src/pages/login/login.js
+++ b/public/src/pages/login/login.js
@@ -19,10 +19,20 @@ export default class LoginPage {
#subscribed; // Костыль
+ #callback;
+
constructor(parent, config) {
this.#parent = parent;
this.#config = config;
this.#subscribed = false; // Костыль
+ this.#callback = (id) => {
+ console.log("asdfasdf")
+ if(id === this.#submitBtn.id){
+ AppDispatcher.dispatch({
+ type: UserActions.LOGIN
+ })
+ }
+ }
}
get href () {
@@ -33,6 +43,20 @@ export default class LoginPage {
return document.getElementById(this.#config.form.id)
}
+ validateData = (id) => {
+ if(id === this.#submitBtn.id){
+ const validateLogin = this.#validateLogin()
+ const validatePassword = this.#validatePassword()
+ if (validateLogin && validatePassword) {
+
+ AppDispatcher.dispatch({
+ type: UserActions.LOGIN,
+ payload: this.#loginInput.value
+ })
+ }
+ }
+ }
+
#subscribeToEvents(){
console.log("subscribeToEvents")
@@ -44,25 +68,13 @@ export default class LoginPage {
}
});
- AppEventMaker.subscribe(SubmitButtonEvents.BUTTON_SUBMIT, (id) => {
- if(id === this.#submitBtn.id){
- const validateLogin = this.#validateLogin()
- const validatePassword = this.#validatePassword()
- if (validateLogin && validatePassword) {
-
- AppDispatcher.dispatch({
- type: UserActions.LOGIN,
- payload: this.#loginInput.value
- })
- }
- }
- })
+ AppEventMaker.subscribe(SubmitButtonEvents.BUTTON_SUBMIT, this.validateData)
this.#subscribed = true; // Костыль
}
#unsubscribeToEvents(){
- console.log("unsubscribeToEvents")
+ console.log("unsubscribeToEvents login")
// TODO
// Не работает
@@ -77,13 +89,7 @@ export default class LoginPage {
});
*/
- AppEventMaker.unsubscribe(SubmitButtonEvents.BUTTON_SUBMIT, (id) => {
- if(id === this.#submitBtn.id){
- AppDispatcher.dispatch({
- type: UserActions.LOGIN
- })
- }
- })
+ AppEventMaker.unsubscribe(SubmitButtonEvents.BUTTON_SUBMIT, this.validateData)
}
#validatePassword(){
@@ -104,6 +110,7 @@ export default class LoginPage {
console.log("login validation started")
console.log(this.#loginInput)
+ console.log(this.#loginInput.self.dataset)
delete this.#loginInput.self.dataset.error
const value = this.#loginInput.value
@@ -148,8 +155,6 @@ export default class LoginPage {
this.#submitBtn.render();
// Костыль
- if (!this.#subscribed) {
- this.#subscribeToEvents();
- }
+ this.#subscribeToEvents();
}
}
From f4580dd1c819173f85e21b186fd66c5a223fed26 Mon Sep 17 00:00:00 2001
From: YarikMix <43493788+YarikMix@users.noreply.github.com>
Date: Wed, 28 Feb 2024 21:18:48 +0300
Subject: [PATCH 5/7] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
=?UTF-8?q?=D0=BB=20=D0=B2=D0=B5=D1=80=D1=81=D1=82=D0=BA=D1=83,=20=D0=B8?=
=?UTF-8?q?=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=20=D0=B1=D0=B0=D0=B3?=
=?UTF-8?q?=D0=B8,=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20=D1=81?=
=?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=83=20404?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
build.sh | 2 +
public/config.js | 52 ++++++---
public/index.css | 3 +
public/index.js | 26 ++---
public/src/assets/settings.png | Bin 0 -> 1225 bytes
public/src/components/button/button.css | 3 +-
public/src/components/button/button.hbs | 4 +-
public/src/components/button/button.js | 32 +++---
public/src/components/header/header.css | 21 +++-
public/src/components/header/header.hbs | 2 +-
public/src/components/header/header.js | 61 +++++-----
public/src/components/home/home.css | 19 ++++
public/src/components/home/home.hbs | 16 ++-
public/src/components/home/home.js | 17 ++-
public/src/components/input/input.css | 15 +++
.../components/link-button/link-button.css | 27 +++++
.../components/link-button/link-button.hbs | 3 +
.../src/components/link-button/link-button.js | 43 ++++++++
public/src/components/link/link.hbs | 14 ++-
public/src/components/link/link.js | 34 ++++--
public/src/modules/requests.js | 0
public/src/modules/router.js | 61 +++++-----
public/src/pages/login/login.css | 1 +
public/src/pages/login/login.js | 104 +++++++-----------
public/src/pages/main/main.css | 3 +-
public/src/pages/main/main.js | 10 +-
public/src/pages/notFound/not-found.css | 13 +++
public/src/pages/notFound/not-found.hbs | 3 +
public/src/pages/notFound/not-found.js | 37 +++++++
public/src/pages/profile/profile.css | 5 +
public/src/pages/profile/profile.js | 26 +++--
public/src/pages/register/register.css | 1 +
public/src/pages/register/register.hbs | 2 +-
public/src/pages/register/register.js | 68 +++++++++++-
public/src/stores/user/events.js | 3 +-
public/src/stores/user/userStore.js | 19 +++-
server/index.js | 47 +-------
37 files changed, 536 insertions(+), 261 deletions(-)
create mode 100644 public/src/assets/settings.png
create mode 100644 public/src/components/link-button/link-button.css
create mode 100644 public/src/components/link-button/link-button.hbs
create mode 100644 public/src/components/link-button/link-button.js
create mode 100644 public/src/modules/requests.js
create mode 100644 public/src/pages/notFound/not-found.css
create mode 100644 public/src/pages/notFound/not-found.hbs
create mode 100644 public/src/pages/notFound/not-found.js
diff --git a/build.sh b/build.sh
index 462943d1..58d12c44 100644
--- a/build.sh
+++ b/build.sh
@@ -4,6 +4,7 @@ handlebars -m public/src/pages/main/main.hbs -f public/build/main.js
handlebars -m public/src/pages/login/login.hbs -f public/build/login.js
handlebars -m public/src/pages/register/register.hbs -f public/build/register.js
handlebars -m public/src/pages/profile/profile.hbs -f public/build/profile.js
+handlebars -m public/src/pages/notFound/not-found.hbs -f public/build/not-found.js
handlebars -m public/src/components/image/image.hbs -f public/build/image.js
handlebars -m public/src/components/header/header.hbs -f public/build/header.js
handlebars -m public/src/components/notes/notes.hbs -f public/build/notes.js
@@ -15,3 +16,4 @@ handlebars -m public/src/components/input/input.hbs -f public/build/input.js
handlebars -m public/src/components/wrapper/wrapper.hbs -f public/build/wrapper.js
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/link-button/link-button.hbs -f public/build/link-button.js
diff --git a/public/config.js b/public/config.js
index 533cd0ed..5bea6757 100644
--- a/public/config.js
+++ b/public/config.js
@@ -1,10 +1,23 @@
const mainPage = {
+ id: "main-page",
href: "/",
- needAuth: true
+ needAuth: true,
+ home: {
+ id: "home",
+ linkToLogin: {
+ href: "/login",
+ text: "Попробовать",
+ type: "submit"
+ }
+ }
}
const header = {
name: "YouNote",
+ logo: {
+ href: "/",
+ text: "YouNote"
+ },
avatarLink: {
href: "/profile"
},
@@ -14,23 +27,20 @@ const header = {
menu: {
home: {
href: "/",
- text: "Главная",
- needAuth: false
+ text: "Главная"
},
main: {
href: "/",
- text: "Мои заметки",
- needAuth: true
+ text: "Мои заметки"
},
auth: {
+ id: "link-to-login",
href: "/login",
- text: "Вход",
- needAuth: false
+ text: "Вход"
},
register: {
href: "/register",
- text: "Регистрация",
- needAuth: false
+ text: "Регистрация"
}
}
}
@@ -44,23 +54,25 @@ const wrapper = {
}
const profilePage = {
- href: "profile",
+ href: "/profile",
id: "profile-page",
logoutBtn: {
- btnLabel: "Выйти"
+ text: "Выйти"
}
}
const loginPage = {
- href: "login",
+ href: "/login",
form: {
id: "login-form",
inputs: {
login: {
+ id: "login",
type: 'text',
placeholder: 'Введите логин'
},
password: {
+ id: "password",
type: "password",
placeholder: "Придумайте пароль"
}
@@ -73,14 +85,14 @@ const loginPage = {
},
buttons: {
submitBtn: {
- btnLabel: "Войти"
+ text: "Войти"
}
}
}
}
const registerPage = {
- href: "register",
+ href: "/register",
form: {
id: "register-form",
inputs: {
@@ -105,12 +117,21 @@ const registerPage = {
},
buttons: {
submitBtn: {
- btnLabel: "Зарегистрироваться"
+ text: "Зарегистрироваться"
}
}
},
}
+const notFoundPage = {
+ href: "/404",
+ id: "not-found",
+ link: {
+ href: "/",
+ text: "Вернуться на главную"
+ }
+}
+
const notes = {
}
@@ -133,6 +154,7 @@ export const config = {
loginPage: loginPage,
registerPage: registerPage,
profilePage: profilePage,
+ notFoundPage: notFoundPage,
header: header,
notes: notes,
noteEditor: noteEditor,
diff --git a/public/index.css b/public/index.css
index 45963e90..efcc90e8 100644
--- a/public/index.css
+++ b/public/index.css
@@ -2,6 +2,7 @@
@import "src/pages/login/login.css";
@import "src/pages/register/register.css";
@import "src/pages/profile/profile.css";
+@import "src/pages/notFound/not-found.css";
@import './src/components/header/header.css';
@import './src/components/notes/notes.css';
@import './src/components/note/note.css';
@@ -13,6 +14,7 @@
@import "src/components/button/button.css";
@import "src/components/wrapper/wrapper.css";
@import "src/components/footer/footer.css";
+@import "src/components/link-button/link-button.css";
*, *::before, *::after {
box-sizing: border-box;
@@ -55,4 +57,5 @@ p, h1, h2, h3, h4, h5, h6 {
#wrapper{
flex: 1 0 auto;
+ padding: 50px 0;
}
\ No newline at end of file
diff --git a/public/index.js b/public/index.js
index 00cfd411..e5a25441 100644
--- a/public/index.js
+++ b/public/index.js
@@ -10,26 +10,14 @@ const root = document.getElementById('root');
AppUserStore.registerEvents();
-function renderHeader() {
- const header = new Header(root, config.header);
- header.render();
-}
+const wrapper = new Wrapper(root, config.wrapper);
+wrapper.render();
-function renderFooter() {
- const footer = new Footer(root, config.footer);
- footer.render()
-}
+router.init(wrapper.self, config);
-function renderWrapper() {
- const wrapper = new Wrapper(root, config.wrapper);
- wrapper.render();
-
- router.init(wrapper.self, config);
-}
-
-
-renderWrapper();
-renderHeader();
-renderFooter();
+const header = new Header(root, config.header);
+header.render();
+const footer = new Footer(root, config.footer);
+footer.render()
diff --git a/public/src/assets/settings.png b/public/src/assets/settings.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6c89ac4a13acf4d7875d4d59d5e13805b81e7e5
GIT binary patch
literal 1225
zcmV;)1UCDLP)
- {{name}}
+
diff --git a/public/src/components/header/header.js b/public/src/components/header/header.js
index 104c8b16..28794e3c 100644
--- a/public/src/components/header/header.js
+++ b/public/src/components/header/header.js
@@ -4,7 +4,7 @@ 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 {LinkButton} from "../link-button/link-button.js";
export class Header {
#parent;
@@ -12,12 +12,10 @@ export class Header {
#menu;
- #homePageLink;
- #mainPageLink;
#authPageLink;
- #registerPageLink;
#avatar;
+ #avatarLink;
constructor(parent, config) {
this.#parent = parent;
@@ -29,28 +27,42 @@ export class Header {
}
#addEventListeners(){
+ document.addEventListener("scroll", (event) => {
+ if (window.scrollY > 100) {
+ this.self.classList.add("black")
+ } else {
+ this.self.classList.remove("black")
+ }
+ });
+
+
AppEventMaker.subscribe(UserStoreEvents.SUCCSSESFUL_LOGIN, () => {
console.log("log hueg")
- const avatarLink = new Link(document.querySelector(".right-container"), this.#config.avatarLink)
- avatarLink.render()
-
- this.#avatar = new Image(avatarLink.self, this.#config.avatar);
- this.#avatar.render();
+ if (this.#avatarLink === undefined) {
+ this.#avatarLink = new Link(document.querySelector(".right-container"), this.#config.avatarLink)
+ this.#avatarLink.render()
+ } else {
+ this.#avatarLink.self.hidden = false;
+ }
+
+ if (this.#avatar === undefined) {
+ this.#avatar = new Image(this.#avatarLink.self, this.#config.avatar);
+ this.#avatar.render();
+ }
this.#avatar.updateImage(AppUserStore.avatar)
- this.#authPageLink.self.hidden = true;
- this.#authPageLink.self.hidden = true;
- this.#registerPageLink.self.hidden = true;
+ this.#authPageLink.self.classList.add("hidden");
+ })
- this.#homePageLink.self.hidden = true;
+ AppEventMaker.subscribe(UserStoreEvents.LOGOUT, () => {
+ console.log(this.#avatar.self)
- this.#mainPageLink = new Link(this.#menu, this.#config.menu.main)
- this.#mainPageLink.render()
+ this.#avatarLink.self.hidden = true;
- router.changePage("/")
- })
+ this.#authPageLink.self.classList.remove("hidden");
+ });
}
render() {
@@ -61,6 +73,9 @@ export class Header {
window.Handlebars.templates['header.hbs'](this.#config)
);
+ const logo = new Link(document.querySelector(".logo-container"), this.#config.logo)
+ logo.render()
+
const rightContainer = document.querySelector(".right-container")
this.#menu = document.createElement("div")
@@ -68,21 +83,11 @@ export class Header {
rightContainer.appendChild(this.#menu)
- if (this.#homePageLink === undefined){
- this.#homePageLink = new Link(this.#menu, this.#config.menu.home)
- this.#homePageLink.render()
- }
-
if (this.#authPageLink === undefined) {
- this.#authPageLink = new Link(this.#menu, this.#config.menu.auth)
+ this.#authPageLink = new LinkButton(this.#menu, this.#config.menu.auth)
this.#authPageLink.render()
}
- if (this.#registerPageLink === undefined) {
- this.#registerPageLink = new Link(this.#menu, this.#config.menu.register)
- this.#registerPageLink.render()
- }
-
// TODO
// Сделать logout
diff --git a/public/src/components/home/home.css b/public/src/components/home/home.css
index e69de29b..2d362e98 100644
--- a/public/src/components/home/home.css
+++ b/public/src/components/home/home.css
@@ -0,0 +1,19 @@
+.home {
+ min-height: 200vh;
+ display: flex;
+ flex-direction: column;
+}
+
+.home section {
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ gap: 25px;
+}
+
+.home section button {
+ font-size: 20px;
+}
\ No newline at end of file
diff --git a/public/src/components/home/home.hbs b/public/src/components/home/home.hbs
index 5841f974..9dfb880e 100644
--- a/public/src/components/home/home.hbs
+++ b/public/src/components/home/home.hbs
@@ -1,3 +1,15 @@
-
-
diff --git a/public/src/pages/register/register.js b/public/src/pages/register/register.js
index 8a568f39..a24335ef 100644
--- a/public/src/pages/register/register.js
+++ b/public/src/pages/register/register.js
@@ -2,6 +2,9 @@ import "../../../build/register.js"
import {Input} from "../../components/input/input.js";
import {Link} from "../../components/link/link.js";
import {Button} from "../../components/button/button.js";
+import {ValidateLogin, ValidatePassword} from "../../shared/validation.js";
+import {AppEventMaker} from "../../modules/eventMaker.js";
+import {inputEvents} from "../../components/input/events.js";
export default class RegisterPage {
#parent;
@@ -26,8 +29,69 @@ export default class RegisterPage {
return document.getElementById(this.#config.form.id)
}
+ #validateLogin(){
+ delete this.#loginInput.self.dataset.error;
+
+ const value = this.#loginInput.value;
+
+ const validationResult = ValidateLogin(value);
+
+ if (!validationResult.result){
+ this.#loginInput.throwError(validationResult.message);
+ }
+
+ return validationResult.result;
+ }
+
+ #validatePassword(){
+ delete this.#passwordInput.self.dataset.error;
+
+ const value = this.#passwordInput.value;
+
+ const validationResult = ValidatePassword(value);
+
+ if (!validationResult.result){
+ this.#passwordInput.throwError(validationResult.message);
+ }
+
+ return validationResult.result;
+ }
+
+ #inputEventHandler = (id) => {
+ if (id === this.#loginInput.id){
+ this.#validateLogin();
+ } else if (id === this.#passwordInput.id){
+ this.#validatePassword();
+ } else if (id === this.#repeatPasswordInput.id){
+ this.#validateRepeatPassword();
+ }
+ }
+
+ #validateRepeatPassword(){
+ delete this.#repeatPasswordInput.self.dataset.error;
+
+ const value = this.#repeatPasswordInput.value;
+
+ const validationResult = ValidatePassword(value);
+
+ if (!validationResult.result){
+ this.#repeatPasswordInput.throwError(validationResult.message);
+ }
+
+ return validationResult.result;
+ }
+
+ #subscribeToEvents(){
+ AppEventMaker.subscribe(inputEvents.INPUT_CHANGE, this.#inputEventHandler);
+ }
+
+ #unsubscribeToEvents(){
+ AppEventMaker.unsubscribe(inputEvents.INPUT_CHANGE, this.#inputEventHandler);
+ }
+
remove(){
this.#parent.innerHTML = '';
+ this.#unsubscribeToEvents();
}
render() {
@@ -37,7 +101,7 @@ export default class RegisterPage {
window.Handlebars.templates['register.hbs'](this.#config.form)
);
- const self = document.getElementById("register-page")
+ const self = document.getElementById("register-page") // Не понятно зачем это, анализатор ругается
this.#loginInput = new Input(this.form, this.#config.form.inputs.login);
this.#loginInput.render();
@@ -53,5 +117,7 @@ export default class RegisterPage {
this.#submitBtn = new Button(this.form, this.#config.form.buttons.submitBtn);
this.#submitBtn.render();
+
+ this.#subscribeToEvents();
}
}
diff --git a/public/src/stores/user/events.js b/public/src/stores/user/events.js
index e535e34a..de2b98bb 100644
--- a/public/src/stores/user/events.js
+++ b/public/src/stores/user/events.js
@@ -1,3 +1,4 @@
export const UserStoreEvents = {
- SUCCSSESFUL_LOGIN: 'SUCCSSESFUL_LOGIN'
+ SUCCSSESFUL_LOGIN: 'SUCCSSESFUL_LOGIN',
+ LOGOUT: "LOGOUT"
}
\ No newline at end of file
diff --git a/public/src/stores/user/userStore.js b/public/src/stores/user/userStore.js
index 4e1600db..f13182dc 100644
--- a/public/src/stores/user/userStore.js
+++ b/public/src/stores/user/userStore.js
@@ -1,11 +1,12 @@
import {AppDispatcher} from "../../modules/dispathcer.js";
import {AppEventMaker} from "../../modules/eventMaker.js";
import {UserStoreEvents} from "./events.js";
+import {router} from "../../modules/router.js";
class UserStore {
#state = {
username: '',
- avatarUrl: '/src/assets/avatar.png',
+ avatarUrl: '/src/assets/settings.png',
isAuth: false
}
@@ -14,6 +15,10 @@ class UserStore {
switch (action.type){
case UserActions.LOGIN:
this.login(action.payload);
+ break;
+ case UserActions.LOGOUT:
+ this.logout();
+ break;
}
})
}
@@ -36,10 +41,20 @@ class UserStore {
this.#state.username = username;
AppEventMaker.notify(UserStoreEvents.SUCCSSESFUL_LOGIN);
}
+
+ logout() {
+ console.log("logout successfull");
+ this.#state.isAuth = false;
+ this.#state.username = "";
+ AppEventMaker.notify(UserStoreEvents.LOGOUT);
+ router.redirect("/");
+ }
}
export const AppUserStore = new UserStore();
export const UserActions = {
- LOGIN: "LOGIN"
+ LOGIN: "LOGIN",
+ REGISTER: "REGISTER",
+ LOGOUT: "LOGOUT"
}
\ No newline at end of file
diff --git a/server/index.js b/server/index.js
index 422ff1bd..8de10bf9 100644
--- a/server/index.js
+++ b/server/index.js
@@ -1,24 +1,7 @@
const fs = require('fs');
const http = require('http');
-const ws = require('ws')
const path = require("path");
const SERVER_PORT = 3000
-const wss = new ws.WebSocketServer({port: 3001});
-
-wss.on('connection', (ws) => {
- console.log('WebSocket connected');
-
- // Отправка уведомления о необходимости обновления
- const notifyClients = () => {
- ws.send('reload');
- };
-
- // Мониторинг изменений в файлах
- fs.watch('./', { recursive: true }, (event, filename) => {
- console.log(`File ${filename} changed`);
- notifyClients();
- });
-});
const mimeTypes = {
'.html': 'text/html',
@@ -63,31 +46,11 @@ const staticFile = (res, filePath, ext) => {
const server = http.createServer((req, res) => {
const {url} = req
- switch (url) {
- case "/":
- console.log("home page")
- staticFile(res, "/index.html", ".html")
- break;
- case "/main":
- console.log("main page")
- staticFile(res, "/index.html", ".html")
- break;
- case "/login":
- console.log("login page")
- staticFile(res, "/index.html", ".html")
- break;
- case "/register":
- console.log("register page")
- staticFile(res, "/index.html", ".html")
- break;
- default:
- const extname = String(path.extname(url)).toLocaleLowerCase()
- if (extname in mimeTypes) {
- staticFile(res, url, extname)
- } else {
- res.statusCode = 404
- res.end()
- }
+ const extname = String(path.extname(url)).toLocaleLowerCase()
+ if (extname in mimeTypes) {
+ staticFile(res, url, extname)
+ } else {
+ staticFile(res, "/index.html", ".html")
}
})
From ae052c735687d1090ae93cad76c895793bcfea41 Mon Sep 17 00:00:00 2001
From: YarikMix <43493788+YarikMix@users.noreply.github.com>
Date: Thu, 29 Feb 2024 23:27:48 +0300
Subject: [PATCH 6/7] =?UTF-8?q?=D0=A3=D0=B4=D0=B0=D0=BB=D0=B8=D0=BB=20?=
=?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=20=D0=BA?=
=?UTF-8?q?=D0=BD=D0=BE=D0=BF=D0=BA=D0=B8-=D1=81=D1=81=D1=8B=D0=BB=D0=BA?=
=?UTF-8?q?=D0=B8,=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20=D0=B2?=
=?UTF-8?q?=D0=B0=D0=BB=D0=B8=D0=B4=D0=B0=D1=86=D0=B8=D1=8E=20=D0=B4=D0=BB?=
=?UTF-8?q?=D1=8F=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B=20=D1=80=D0=B5=D0=B3?=
=?UTF-8?q?=D0=B8=D1=81=D1=82=D1=80=D0=B0=D1=86=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
build.sh | 1 -
public/build/button.js | 1 +
public/build/footer.js | 1 +
public/build/header.js | 1 +
public/build/home.js | 1 +
public/build/image.js | 1 +
public/build/input.js | 1 +
public/build/link.js | 1 +
public/build/login.js | 1 +
public/build/main.js | 1 +
public/build/not-found.js | 1 +
public/build/note-editor.js | 1 +
public/build/note.js | 1 +
public/build/notes.js | 1 +
public/build/profile.js | 1 +
public/build/register.js | 1 +
public/build/wrapper.js | 1 +
public/config.js | 4 +-
public/index.css | 1 -
public/src/components/button/button.css | 8 +--
public/src/components/button/button.js | 15 +++---
public/src/components/header/header.js | 13 ++---
public/src/components/home/home.js | 9 +++-
.../components/link-button/link-button.css | 27 ----------
.../components/link-button/link-button.hbs | 3 --
.../src/components/link-button/link-button.js | 43 ---------------
public/src/pages/notFound/not-found.js | 10 ++--
public/src/pages/register/register.js | 25 ++++++++-
public/src/shared/validation.js | 54 +++++++++++++++++++
29 files changed, 130 insertions(+), 99 deletions(-)
create mode 100644 public/build/button.js
create mode 100644 public/build/footer.js
create mode 100644 public/build/header.js
create mode 100644 public/build/home.js
create mode 100644 public/build/image.js
create mode 100644 public/build/input.js
create mode 100644 public/build/link.js
create mode 100644 public/build/login.js
create mode 100644 public/build/main.js
create mode 100644 public/build/not-found.js
create mode 100644 public/build/note-editor.js
create mode 100644 public/build/note.js
create mode 100644 public/build/notes.js
create mode 100644 public/build/profile.js
create mode 100644 public/build/register.js
create mode 100644 public/build/wrapper.js
delete mode 100644 public/src/components/link-button/link-button.css
delete mode 100644 public/src/components/link-button/link-button.hbs
delete mode 100644 public/src/components/link-button/link-button.js
create mode 100644 public/src/shared/validation.js
diff --git a/build.sh b/build.sh
index 58d12c44..8c9bbdc6 100644
--- a/build.sh
+++ b/build.sh
@@ -16,4 +16,3 @@ handlebars -m public/src/components/input/input.hbs -f public/build/input.js
handlebars -m public/src/components/wrapper/wrapper.hbs -f public/build/wrapper.js
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/link-button/link-button.hbs -f public/build/link-button.js
diff --git a/public/build/button.js b/public/build/button.js
new file mode 100644
index 00000000..f6040716
--- /dev/null
+++ b/public/build/button.js
@@ -0,0 +1 @@
+!function(){var t=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["button.hbs"]=t({compiler:[8,">= 4.3.0"],main:function(t,n,l,e,a){var o,u=null!=n?n:t.nullContext||{},s=t.hooks.helperMissing,r="function",i=t.escapeExpression,t=t.lookupProperty||function(t,n){if(Object.prototype.hasOwnProperty.call(t,n))return t[n]};return'"},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/footer.js b/public/build/footer.js
new file mode 100644
index 00000000..87e35fd0
--- /dev/null
+++ b/public/build/footer.js
@@ -0,0 +1 @@
+!function(){var e=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["footer.hbs"]=e({compiler:[8,">= 4.3.0"],main:function(e,a,t,n,r){return""},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/header.js b/public/build/header.js
new file mode 100644
index 00000000..d8cc89da
--- /dev/null
+++ b/public/build/header.js
@@ -0,0 +1 @@
+!function(){var n=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["header.hbs"]=n({compiler:[8,">= 4.3.0"],main:function(n,e,a,t,r){return'\n\n\t '},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/home.js b/public/build/home.js
new file mode 100644
index 00000000..25212cc3
--- /dev/null
+++ b/public/build/home.js
@@ -0,0 +1 @@
+!function(){var n=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["home.hbs"]=n({compiler:[8,">= 4.3.0"],main:function(n,t,e,s,l){var o=n.lookupProperty||function(n,t){if(Object.prototype.hasOwnProperty.call(n,t))return n[t]};return'
Страница с приветствием пользователя
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/src/components/home/home.js b/public/src/components/home/home.js
index 009b7bbd..ff4ac44b 100644
--- a/public/src/components/home/home.js
+++ b/public/src/components/home/home.js
@@ -1,4 +1,5 @@
import "../../../build/home.js"
+import {LinkButton} from "../link-button/link-button.js";
export class Home {
#parent;
@@ -9,10 +10,18 @@ export class Home {
this.#config = config;
}
+ get self () {
+ return document.getElementById('home');
+ }
+
render() {
- const tmp = document.createElement('div');
- const template = Handlebars.templates["home.hbs"];
- tmp.innerHTML = template(this.#config);
- this.#parent.appendChild(tmp.firstElementChild);
+ this.#parent.insertAdjacentHTML(
+ 'afterbegin',
+ window.Handlebars.templates['home.hbs'](this.#config)
+ );
+
+ const link = new LinkButton(document.querySelector(".first"), this.#config.linkToLogin)
+ link.render()
+
}
}
diff --git a/public/src/components/input/input.css b/public/src/components/input/input.css
index e5bd5396..f8a7072d 100644
--- a/public/src/components/input/input.css
+++ b/public/src/components/input/input.css
@@ -13,6 +13,7 @@
transition: 0.3s;
}
+
.input-container input:focus {
border: 1px solid #56A6F0;
}
@@ -38,4 +39,18 @@
top: 14px;
right: 16px;
cursor: pointer;
+}
+
+.input-container .form-label {
+ position: absolute;
+ font-family: inherit;
+ font-size: 1rem;
+ font-weight: 400;
+ line-height: 1.5;
+ left: 0.75rem;
+ top: 0.75rem;
+ padding: 0 0.35rem;
+ color: hsl(220, 3%, 50%);
+ background: #fff;
+ transition: all 0.35s ease;
}
\ No newline at end of file
diff --git a/public/src/components/link-button/link-button.css b/public/src/components/link-button/link-button.css
new file mode 100644
index 00000000..d750b7ac
--- /dev/null
+++ b/public/src/components/link-button/link-button.css
@@ -0,0 +1,27 @@
+.link-button{
+ padding: 8px 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #56A6F0;
+ border-radius: 20px;
+ border: none;
+ outline: none;
+ color: #ffffff;
+ text-align: center;
+ box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+ cursor: pointer;
+ transition: 0.3s;
+}
+
+.link-button:hover{
+ transform: scale(1.05)
+}
+
+.link-button:active{
+ transform: scale(0.98)
+}
+
+.link-button.hidden {
+ display: none;
+}
\ No newline at end of file
diff --git a/public/src/components/link-button/link-button.hbs b/public/src/components/link-button/link-button.hbs
new file mode 100644
index 00000000..e72b0ff1
--- /dev/null
+++ b/public/src/components/link-button/link-button.hbs
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/public/src/components/link-button/link-button.js b/public/src/components/link-button/link-button.js
new file mode 100644
index 00000000..0eb2efa5
--- /dev/null
+++ b/public/src/components/link-button/link-button.js
@@ -0,0 +1,43 @@
+import {router} from "../../modules/router.js";
+import "../../../build/link-button.js"
+
+export class LinkButton {
+ #parent;
+
+ #props = {};
+
+ id;
+
+ constructor(parent, config) {
+ this.id = crypto.randomUUID();
+
+ this.#parent = parent;
+
+ this.#props.id = this.id ;
+ this.#props.text = config.text;
+ this.#props.href = config.href;
+ }
+
+ get self(){
+ return document.getElementById(this.id);
+ }
+
+ handleClick = (e) => {
+ e.preventDefault()
+ router.redirect(this.#props.href)
+ }
+
+ #addListeners () {
+ this.self.addEventListener("click", this.handleClick)
+ }
+
+ render() {
+
+ this.#parent.insertAdjacentHTML(
+ 'beforeend',
+ window.Handlebars.templates['link-button.hbs'](this.#props)
+ );
+
+ this.#addListeners()
+ }
+}
diff --git a/public/src/components/link/link.hbs b/public/src/components/link/link.hbs
index d66ac22c..25f6a70a 100644
--- a/public/src/components/link/link.hbs
+++ b/public/src/components/link/link.hbs
@@ -1,3 +1,11 @@
-
- {{text}}
-
\ No newline at end of file
+{{#if isBtn}}
+
+
+
+{{else}}
+
+ {{text}}
+
+{{/if}}
\ No newline at end of file
diff --git a/public/src/components/link/link.js b/public/src/components/link/link.js
index f413a634..f647bb24 100644
--- a/public/src/components/link/link.js
+++ b/public/src/components/link/link.js
@@ -1,26 +1,44 @@
import "../../../build/link.js"
+import {router} from "../../modules/router.js";
export class Link {
#parent;
- #config;
+
+ #props = {};
id;
constructor(parent, config) {
this.id = crypto.randomUUID();
+
this.#parent = parent;
- this.#config = config;
- this.#config.id = this.id;
+
+ this.#props.id = this.id ;
+ this.#props.text = config.text;
+ this.#props.href = config.href;
}
get self(){
- return document.getElementById(`${this.id}`);
+ return document.getElementById(this.id);
+ }
+
+ handleClick = (e) => {
+ e.preventDefault()
+ router.redirect(this.#props.href)
}
+ #addListeners () {
+ this.self.addEventListener("click", this.handleClick)
+ }
+
+
render() {
- const tmp = document.createElement('div');
- const template = Handlebars.templates["link.hbs"];
- tmp.innerHTML = template(this.#config);
- this.#parent.appendChild(tmp.firstElementChild);
+
+ this.#parent.insertAdjacentHTML(
+ 'beforeend',
+ window.Handlebars.templates['link.hbs'](this.#props)
+ );
+
+ this.#addListeners()
}
}
diff --git a/public/src/modules/requests.js b/public/src/modules/requests.js
new file mode 100644
index 00000000..e69de29b
diff --git a/public/src/modules/router.js b/public/src/modules/router.js
index 78ef26db..73659581 100644
--- a/public/src/modules/router.js
+++ b/public/src/modules/router.js
@@ -2,6 +2,8 @@ import Main from "../pages/main/main.js";
import LoginPage from "../pages/login/login.js";
import RegisterPage from "../pages/register/register.js";
import ProfilePage from "../pages/profile/profile.js";
+import {AppUserStore} from "../stores/user/userStore.js";
+import NotFoundPage from "../pages/notFound/not-found.js";
class Router {
#currentUrl;
@@ -9,52 +11,59 @@ class Router {
#pages;
constructor() {
- this.#currentUrl = window.location.href.split("/").slice(-1)[0];
+ this.#currentUrl = this.parseUrl();
this.#currentPage = undefined;
- this.#pages = [];
-
- this.registerEvents();
+ this.#pages = new Map();
}
init(root, config){
const mainPage = new Main(root, config.mainPage)
- this.#pages.push(mainPage)
+ this.registerPage(mainPage)
const loginPage = new LoginPage(root, config.loginPage)
- this.#pages.push(loginPage)
+ this.registerPage(loginPage)
const registerPage = new RegisterPage(root, config.registerPage)
- this.#pages.push(registerPage)
+ this.registerPage(registerPage)
const profilePage = new ProfilePage(root, config.profilePage)
- this.#pages.push(profilePage)
+ this.registerPage(profilePage)
+
+ const notFoundPage = new NotFoundPage(root, config.notFoundPage)
+ this.registerPage(notFoundPage)
+
+ this.redirect(this.#currentUrl)
+ }
- this.changePage(this.#currentUrl)
+ registerPage(page) {
+ this.#pages[page.href] = page
}
- changePage(href) {
+ redirect(href) {
if (href === "") href = "/"
- this.#pages.forEach(page => {
- if (this.#currentPage !== page && page.href === href) {
- this.#currentPage?.remove()
- page.render()
- this.#currentPage = page
- history.pushState(null, null, page.href)
+ const page = this.#pages[href]
+
+ if (page === undefined) {
+ this.redirect("/404")
+ return;
+ }
+
+ if (this.#currentPage !== page && page.href === href) {
+ if (page.needAuth && !AppUserStore.IsAuthenticated()) {
+ this.redirect("/")
+ return
}
- })
- }
- registerEvents() {
- window.addEventListener('click', (e) => this.listenClick(e));
+ this.#currentPage?.remove()
+ page.render()
+ this.#currentPage = page
+ history.pushState(null, null, page.href)
+ }
}
- listenClick (e) {
- e.preventDefault();
- const anchor = e.target.closest('a');
- if (!anchor) return;
- const href = anchor.getAttribute('href').replace('/', '');
- this.changePage(href);
+ parseUrl() {
+ return "/" + window.location.href.split("/").slice(-1)[0];
}
}
diff --git a/public/src/pages/login/login.css b/public/src/pages/login/login.css
index aae82aec..7f2f0d18 100644
--- a/public/src/pages/login/login.css
+++ b/public/src/pages/login/login.css
@@ -7,6 +7,7 @@
}
.login-form {
+ min-width: 300px;
padding: 20px;
border-radius: 20px;
display: flex;
diff --git a/public/src/pages/login/login.js b/public/src/pages/login/login.js
index 7975b165..5674d284 100644
--- a/public/src/pages/login/login.js
+++ b/public/src/pages/login/login.js
@@ -2,11 +2,12 @@ import "../../../build/login.js"
import {Input} from "../../components/input/input.js";
import {Button} from "../../components/button/button.js";
import {inputEvents} from "../../components/input/events.js";
-import {SubmitButtonEvents} from "../../components/button/events.js";
import {AppEventMaker} from "../../modules/eventMaker.js";
import {AppDispatcher} from "../../modules/dispathcer.js";
import {UserActions} from "../../stores/user/userStore.js";
import {Link} from "../../components/link/link.js";
+import {ValidateLogin, ValidatePassword} from "../../shared/validation.js";
+import {router} from "../../modules/router.js";
export default class LoginPage {
#parent;
@@ -17,22 +18,9 @@ export default class LoginPage {
#link;
#submitBtn;
- #subscribed; // Костыль
-
- #callback;
-
constructor(parent, config) {
this.#parent = parent;
this.#config = config;
- this.#subscribed = false; // Костыль
- this.#callback = (id) => {
- console.log("asdfasdf")
- if(id === this.#submitBtn.id){
- AppDispatcher.dispatch({
- type: UserActions.LOGIN
- })
- }
- }
}
get href () {
@@ -43,87 +31,70 @@ export default class LoginPage {
return document.getElementById(this.#config.form.id)
}
- validateData = (id) => {
- if(id === this.#submitBtn.id){
- const validateLogin = this.#validateLogin()
- const validatePassword = this.#validatePassword()
- if (validateLogin && validatePassword) {
-
- AppDispatcher.dispatch({
- type: UserActions.LOGIN,
- payload: this.#loginInput.value
- })
- }
+ validateData = () => {
+ const validateLogin = this.#validateLogin()
+ const validatePassword = this.#validatePassword()
+ if (validateLogin && validatePassword) {
+
+ AppDispatcher.dispatch({
+ type: UserActions.LOGIN,
+ payload: this.#loginInput.value
+ })
+
+ router.redirect("/")
+ }
+ }
+
+ #inputEventHandler = (id) => {
+ if(id === this.#passwordInput.id){
+ this.#validatePassword();
+ } else if (id === this.#loginInput.id){
+ this.#validateLogin();
}
}
#subscribeToEvents(){
console.log("subscribeToEvents")
- AppEventMaker.subscribe(inputEvents.INPUT_CHANGE, (id) => {
- if(id === this.#passwordInput.id){
- this.#validatePassword()
- } else{
- this.#validateLogin();
- }
- });
-
- AppEventMaker.subscribe(SubmitButtonEvents.BUTTON_SUBMIT, this.validateData)
-
- this.#subscribed = true; // Костыль
+ AppEventMaker.subscribe(inputEvents.INPUT_CHANGE, this.#inputEventHandler);
}
#unsubscribeToEvents(){
console.log("unsubscribeToEvents login")
- // TODO
- // Не работает
-
- /*
- AppEventMaker.unsubscribe(inputEvents.INPUT_CHANGE, (id) => {
- if(id === this.#passwordInput.id){
- this.#validatePassword()
- } else{
- this.#validateLogin();
- }
- });
- */
-
- AppEventMaker.unsubscribe(SubmitButtonEvents.BUTTON_SUBMIT, this.validateData)
+ AppEventMaker.unsubscribe(inputEvents.INPUT_CHANGE, this.#inputEventHandler);
}
#validatePassword(){
console.log("password validation started")
- const value = this.#passwordInput.value
+ delete this.#passwordInput.self.dataset.error;
+
+ const value = this.#passwordInput.value;
- if (value === "")
- {
- this.#passwordInput.throwError("Пароль не может быть пустым!")
- return false
+ const validationResult = ValidatePassword(value);
+
+ if (!validationResult.result){
+ this.#passwordInput.throwError(validationResult.message);
}
- return true
+ return validationResult.result
}
#validateLogin(){
console.log("login validation started")
- console.log(this.#loginInput)
- console.log(this.#loginInput.self.dataset)
delete this.#loginInput.self.dataset.error
const value = this.#loginInput.value
- if (value === "")
- {
- this.#loginInput.throwError("Логин не может быть пустым!")
- return false
- }
-
+ const validationResult = ValidateLogin(value);
+ if (!validationResult.result){
+ this.#loginInput.throwError(validationResult.message);
+ }
- return true
+ return validationResult.result
}
remove(){
@@ -151,10 +122,9 @@ export default class LoginPage {
this.#link = new Link(this.form, this.#config.form.links.registerPage);
this.#link.render();
- this.#submitBtn = new Button(this.form, this.#config.form.buttons.submitBtn);
+ this.#submitBtn = new Button(this.form, this.#config.form.buttons.submitBtn, this.validateData);
this.#submitBtn.render();
- // Костыль
this.#subscribeToEvents();
}
}
diff --git a/public/src/pages/main/main.css b/public/src/pages/main/main.css
index 1dc25baa..dfaa7c19 100644
--- a/public/src/pages/main/main.css
+++ b/public/src/pages/main/main.css
@@ -1,6 +1,5 @@
#main {
- display: grid;
+ display: flex;
justify-content: center;
- padding: 25px;
gap: 20px;
}
\ No newline at end of file
diff --git a/public/src/pages/main/main.js b/public/src/pages/main/main.js
index 43c1a141..51b11b6a 100644
--- a/public/src/pages/main/main.js
+++ b/public/src/pages/main/main.js
@@ -28,16 +28,16 @@ export default class Main {
render() {
console.log("Main page render")
- const tmp = document.createElement('div');
- const template = Handlebars.templates["main.hbs"];
- tmp.innerHTML = template(this.#config);
- this.#parent.appendChild(tmp.firstElementChild);
+ this.#parent.insertAdjacentHTML(
+ 'afterbegin',
+ window.Handlebars.templates['main.hbs'](this.#config)
+ );
if (AppUserStore.IsAuthenticated()) {
const notesContainer = new NotesContainer(this.self, this.#config)
notesContainer.render()
} else {
- const home = new Home(this.self, this.#config)
+ const home = new Home(this.self, this.#config.home)
home.render()
}
}
diff --git a/public/src/pages/notFound/not-found.css b/public/src/pages/notFound/not-found.css
new file mode 100644
index 00000000..baac4b95
--- /dev/null
+++ b/public/src/pages/notFound/not-found.css
@@ -0,0 +1,13 @@
+.not-found {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ gap: 25px;
+}
+
+.not-found button {
+ font-size: 20px;
+}
\ No newline at end of file
diff --git a/public/src/pages/notFound/not-found.hbs b/public/src/pages/notFound/not-found.hbs
new file mode 100644
index 00000000..5d91ac07
--- /dev/null
+++ b/public/src/pages/notFound/not-found.hbs
@@ -0,0 +1,3 @@
+Попробуйте наши заметки!
+Ля-ля-ля
+Ня-ня-ня
+
+
\ No newline at end of file
diff --git a/public/src/pages/notFound/not-found.js b/public/src/pages/notFound/not-found.js
new file mode 100644
index 00000000..c15ab040
--- /dev/null
+++ b/public/src/pages/notFound/not-found.js
@@ -0,0 +1,37 @@
+import "../../../build/not-found.js"
+import {LinkButton} from "../../components/link-button/link-button.js";
+
+export default class NotFoundPage {
+ #parent;
+ #config;
+
+ constructor(parent, config) {
+ this.#parent = parent;
+ this.#config = config;
+ }
+
+ get href () {
+ return this.#config.href;
+ }
+
+ get self () {
+ return document.getElementById(this.#config.id);
+ }
+
+ remove() {
+
+ }
+
+
+ render() {
+ console.log("404 page render")
+
+ this.#parent.insertAdjacentHTML(
+ 'afterbegin',
+ window.Handlebars.templates['not-found.hbs'](this.#config)
+ );
+
+ const link = new LinkButton(this.self, this.#config.link)
+ link.render()
+ }
+}
diff --git a/public/src/pages/profile/profile.css b/public/src/pages/profile/profile.css
index eedf3f46..08f60e31 100644
--- a/public/src/pages/profile/profile.css
+++ b/public/src/pages/profile/profile.css
@@ -1,6 +1,11 @@
.profile-page {
display: flex;
flex-direction: column;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+ gap: 25px;
}
.profile-page button {
diff --git a/public/src/pages/profile/profile.js b/public/src/pages/profile/profile.js
index 1959b8b5..581785ea 100644
--- a/public/src/pages/profile/profile.js
+++ b/public/src/pages/profile/profile.js
@@ -1,16 +1,20 @@
import "../../../build/profile.js"
-import {AppUserStore} from "../../stores/user/userStore.js";
+import {AppUserStore, UserActions} from "../../stores/user/userStore.js";
import {Button} from "../../components/button/button.js";
+import {AppDispatcher} from "../../modules/dispathcer.js";
export default class ProfilePage {
#parent;
#config;
+ needAuth;
+
#logoutBtn;
constructor(parent, config) {
this.#parent = parent;
this.#config = config;
+ this.needAuth = true;
}
get href () {
@@ -25,6 +29,14 @@ export default class ProfilePage {
this.#parent.innerHTML = '';
}
+ handleLogout() {
+ console.log('logout bitch')
+
+ AppDispatcher.dispatch({
+ type: UserActions.LOGOUT
+ })
+ }
+
render() {
console.log("Profile page render")
@@ -33,16 +45,14 @@ export default class ProfilePage {
window.Handlebars.templates['profile.hbs'](this.#config)
);
- console.log(this.self)
-
- this.#logoutBtn = new Button(this.self, this.#config.logoutBtn)
- this.#logoutBtn.render()
-
- console.log(AppUserStore.username)
const test = document.createElement("h1")
test.innerText = `Добро пожаловать, ${AppUserStore.username}`
-
this.self.appendChild(test)
+
+ this.#logoutBtn = new Button(this.self, this.#config.logoutBtn, this.handleLogout)
+ this.#logoutBtn.render()
+
+
}
}
diff --git a/public/src/pages/register/register.css b/public/src/pages/register/register.css
index 589ae551..df902327 100644
--- a/public/src/pages/register/register.css
+++ b/public/src/pages/register/register.css
@@ -7,6 +7,7 @@
}
.register-form {
+ min-width: 300px;
padding: 20px;
border-radius: 20px;
display: flex;
diff --git a/public/src/pages/register/register.hbs b/public/src/pages/register/register.hbs
index 1167e2d7..a6e506f5 100644
--- a/public/src/pages/register/register.hbs
+++ b/public/src/pages/register/register.hbs
@@ -1,5 +1,5 @@
Страница 404
+\n\n\t
\n\n\t\n\n\n\t
\n\n\n\n\t\n\t\t \n\n\t\n\t\t \n\n\t\n\t\t \n\n
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/image.js b/public/build/image.js
new file mode 100644
index 00000000..23289f77
--- /dev/null
+++ b/public/build/image.js
@@ -0,0 +1 @@
+!function(){var e=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["image.hbs"]=e({compiler:[8,">= 4.3.0"],main:function(e,a,n,l,t){var o=e.lookupProperty||function(e,a){if(Object.prototype.hasOwnProperty.call(e,a))return e[a]};return'Попробуйте наши заметки!
\n\tЛя-ля-ля
\n\tНя-ня-ня
\n\t\n'},compiler:[8,">= 4.3.0"],main:function(l,n,e,a,t){var o,s=null!=n?n:l.nullContext||{},c=l.hooks.helperMissing,i="function",r=l.escapeExpression,u=l.lookupProperty||function(l,n){if(Object.prototype.hasOwnProperty.call(l,n))return l[n]};return'\n \n\n'+(null!=(r=u(e,"if").call(s,null!=n?u(n,"isPassword"):n,{name:"if",hash:{},fn:l.program(1,t,0),inverse:l.noop,data:t,loc:{start:{line:4,column:4},end:{line:6,column:11}}}))?r:"")+"
\n"},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/link.js b/public/build/link.js
new file mode 100644
index 00000000..732bc4cd
--- /dev/null
+++ b/public/build/link.js
@@ -0,0 +1 @@
+!function(){var n=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["link.hbs"]=n({1:function(n,l,t,e,a){var o,r=null!=l?l:n.nullContext||{},u=n.hooks.helperMissing,i="function",c=n.escapeExpression,n=n.lookupProperty||function(n,l){if(Object.prototype.hasOwnProperty.call(n,l))return n[l]};return'\t\n\t\t\n\t\n"},3:function(n,l,t,e,a){var o,r=null!=l?l:n.nullContext||{},u=n.hooks.helperMissing,i="function",c=n.escapeExpression,n=n.lookupProperty||function(n,l){if(Object.prototype.hasOwnProperty.call(n,l))return n[l]};return'\t\n\t\t'+c(typeof(o=null!=(o=n(t,"text")||(null!=l?n(l,"text"):l))?o:u)==i?o.call(r,{name:"text",hash:{},data:a,loc:{start:{line:9,column:2},end:{line:9,column:10}}}):o)+"\n\t\n"},compiler:[8,">= 4.3.0"],main:function(n,l,t,e,a){var o=n.lookupProperty||function(n,l){if(Object.prototype.hasOwnProperty.call(n,l))return n[l]};return null!=(t=o(t,"if").call(null!=l?l:n.nullContext||{},null!=l?o(l,"isBtn"):l,{name:"if",hash:{},fn:n.program(1,a,0),inverse:n.program(3,a,0),data:a,loc:{start:{line:1,column:0},end:{line:11,column:7}}}))?t:""},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/login.js b/public/build/login.js
new file mode 100644
index 00000000..a0c80769
--- /dev/null
+++ b/public/build/login.js
@@ -0,0 +1 @@
+!function(){var n=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["login.hbs"]=n({compiler:[8,">= 4.3.0"],main:function(n,l,e,t,a){var o=n.lookupProperty||function(n,l){if(Object.prototype.hasOwnProperty.call(n,l))return n[l]};return'\n\t\n
\n'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/main.js b/public/build/main.js
new file mode 100644
index 00000000..e9589cad
--- /dev/null
+++ b/public/build/main.js
@@ -0,0 +1 @@
+!function(){var a=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["main.hbs"]=a({compiler:[8,">= 4.3.0"],main:function(a,n,e,t,i){return'\n\n
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/not-found.js b/public/build/not-found.js
new file mode 100644
index 00000000..c00870d6
--- /dev/null
+++ b/public/build/not-found.js
@@ -0,0 +1 @@
+!function(){var n=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["not-found.hbs"]=n({compiler:[8,">= 4.3.0"],main:function(n,e,l,t,a){var o=n.lookupProperty||function(n,e){if(Object.prototype.hasOwnProperty.call(n,e))return n[e]};return'\r\n\t
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/note-editor.js b/public/build/note-editor.js
new file mode 100644
index 00000000..310f9109
--- /dev/null
+++ b/public/build/note-editor.js
@@ -0,0 +1 @@
+!function(){var e=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["note-editor.hbs"]=e({compiler:[8,">= 4.3.0"],main:function(e,t,a,n,i){return'Страница 404
\r\n\n\n
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/note.js b/public/build/note.js
new file mode 100644
index 00000000..d7d6330d
--- /dev/null
+++ b/public/build/note.js
@@ -0,0 +1 @@
+!function(){var n=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["note.hbs"]=n({compiler:[8,">= 4.3.0"],main:function(n,a,e,t,s){return'\n\t
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/notes.js b/public/build/notes.js
new file mode 100644
index 00000000..ab20e30b
--- /dev/null
+++ b/public/build/notes.js
@@ -0,0 +1 @@
+!function(){var e=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["notes.hbs"]=e({compiler:[8,">= 4.3.0"],main:function(e,n,a,t,s){return'Заголовок
\n\tПервая строчка заметки
\n\n\n
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/profile.js b/public/build/profile.js
new file mode 100644
index 00000000..59ad08ec
--- /dev/null
+++ b/public/build/profile.js
@@ -0,0 +1 @@
+!function(){var e=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["profile.hbs"]=e({compiler:[8,">= 4.3.0"],main:function(e,n,l,a,t){var o=e.lookupProperty||function(e,n){if(Object.prototype.hasOwnProperty.call(e,n))return e[n]};return'\n\t
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/register.js b/public/build/register.js
new file mode 100644
index 00000000..7beefc4b
--- /dev/null
+++ b/public/build/register.js
@@ -0,0 +1 @@
+!function(){var e=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["register.hbs"]=e({compiler:[8,">= 4.3.0"],main:function(e,t,n,r,l){var a=e.lookupProperty||function(e,t){if(Object.prototype.hasOwnProperty.call(e,t))return e[t]};return'Страница профиля
\n\n\t\n
\n'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/wrapper.js b/public/build/wrapper.js
new file mode 100644
index 00000000..f8b2b18c
--- /dev/null
+++ b/public/build/wrapper.js
@@ -0,0 +1 @@
+!function(){var e=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["wrapper.hbs"]=e({compiler:[8,">= 4.3.0"],main:function(e,n,l,a,t){var r=e.lookupProperty||function(e,n){if(Object.prototype.hasOwnProperty.call(e,n))return e[n]};return'\n\n
'},useData:!0})}();
\ No newline at end of file
diff --git a/public/config.js b/public/config.js
index 5bea6757..bb91152b 100644
--- a/public/config.js
+++ b/public/config.js
@@ -5,9 +5,7 @@ const mainPage = {
home: {
id: "home",
linkToLogin: {
- href: "/login",
- text: "Попробовать",
- type: "submit"
+ text: "Попробовать"
}
}
}
diff --git a/public/index.css b/public/index.css
index efcc90e8..d161b6e8 100644
--- a/public/index.css
+++ b/public/index.css
@@ -14,7 +14,6 @@
@import "src/components/button/button.css";
@import "src/components/wrapper/wrapper.css";
@import "src/components/footer/footer.css";
-@import "src/components/link-button/link-button.css";
*, *::before, *::after {
box-sizing: border-box;
diff --git a/public/src/components/button/button.css b/public/src/components/button/button.css
index 57f17d5d..d4d30c8c 100644
--- a/public/src/components/button/button.css
+++ b/public/src/components/button/button.css
@@ -1,16 +1,14 @@
.submit-btn{
- width: 100%;
- min-width: 80px;
display: flex;
align-items: center;
justify-content: center;
background-color: #56A6F0;
border-radius: 20px;
+ padding: 8px 16px;
border: none;
outline: none;
color: #ffffff;
text-align: center;
- padding: 8px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
cursor: pointer;
transition: 0.3s;
@@ -22,4 +20,8 @@
.submit-btn:active{
transform: scale(0.98)
+}
+
+.submit-btn.hidden {
+ display: none;
}
\ No newline at end of file
diff --git a/public/src/components/button/button.js b/public/src/components/button/button.js
index b59539b9..f951cd11 100644
--- a/public/src/components/button/button.js
+++ b/public/src/components/button/button.js
@@ -21,11 +21,12 @@ export class Button {
}
#addEventListeners(){
- this.self.addEventListener('click', (e) => {
- console.log(e)
- e.preventDefault()
- this.#onSubmit()
- });
+ if (this.#onSubmit !== undefined) {
+ this.self.addEventListener('click', (e) => {
+ e.preventDefault()
+ this.#onSubmit()
+ });
+ }
}
#removeEventListeners(){
@@ -33,7 +34,9 @@ export class Button {
}
remove(){
- this.#removeEventListeners();
+ if (this.#onSubmit !== undefined) {
+ this.#removeEventListeners();
+ }
}
render(){
diff --git a/public/src/components/header/header.js b/public/src/components/header/header.js
index 28794e3c..9b60d0fa 100644
--- a/public/src/components/header/header.js
+++ b/public/src/components/header/header.js
@@ -4,7 +4,8 @@ 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 {LinkButton} from "../link-button/link-button.js";
+import {router} from "../../modules/router.js";
+import {Button} from "../button/button.js";
export class Header {
#parent;
@@ -37,8 +38,6 @@ export class Header {
AppEventMaker.subscribe(UserStoreEvents.SUCCSSESFUL_LOGIN, () => {
- console.log("log hueg")
-
if (this.#avatarLink === undefined) {
this.#avatarLink = new Link(document.querySelector(".right-container"), this.#config.avatarLink)
this.#avatarLink.render()
@@ -57,14 +56,16 @@ export class Header {
})
AppEventMaker.subscribe(UserStoreEvents.LOGOUT, () => {
- console.log(this.#avatar.self)
-
this.#avatarLink.self.hidden = true;
this.#authPageLink.self.classList.remove("hidden");
});
}
+ handleButtonClick = () => {
+ router.redirect("/login")
+ }
+
render() {
console.log("header render")
@@ -84,7 +85,7 @@ export class Header {
rightContainer.appendChild(this.#menu)
if (this.#authPageLink === undefined) {
- this.#authPageLink = new LinkButton(this.#menu, this.#config.menu.auth)
+ this.#authPageLink = new Button(this.#menu, this.#config.menu.auth, this.handleButtonClick)
this.#authPageLink.render()
}
diff --git a/public/src/components/home/home.js b/public/src/components/home/home.js
index ff4ac44b..971d4bd9 100644
--- a/public/src/components/home/home.js
+++ b/public/src/components/home/home.js
@@ -1,5 +1,6 @@
import "../../../build/home.js"
-import {LinkButton} from "../link-button/link-button.js";
+import {router} from "../../modules/router.js";
+import {Button} from "../button/button.js";
export class Home {
#parent;
@@ -14,13 +15,17 @@ export class Home {
return document.getElementById('home');
}
+ handleButtonClick = () => {
+ router.redirect("/login")
+ }
+
render() {
this.#parent.insertAdjacentHTML(
'afterbegin',
window.Handlebars.templates['home.hbs'](this.#config)
);
- const link = new LinkButton(document.querySelector(".first"), this.#config.linkToLogin)
+ const link = new Button(document.querySelector(".first"), this.#config.linkToLogin, this.handleButtonClick)
link.render()
}
diff --git a/public/src/components/link-button/link-button.css b/public/src/components/link-button/link-button.css
deleted file mode 100644
index d750b7ac..00000000
--- a/public/src/components/link-button/link-button.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.link-button{
- padding: 8px 16px;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: #56A6F0;
- border-radius: 20px;
- border: none;
- outline: none;
- color: #ffffff;
- text-align: center;
- box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
- cursor: pointer;
- transition: 0.3s;
-}
-
-.link-button:hover{
- transform: scale(1.05)
-}
-
-.link-button:active{
- transform: scale(0.98)
-}
-
-.link-button.hidden {
- display: none;
-}
\ No newline at end of file
diff --git a/public/src/components/link-button/link-button.hbs b/public/src/components/link-button/link-button.hbs
deleted file mode 100644
index e72b0ff1..00000000
--- a/public/src/components/link-button/link-button.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-
\ No newline at end of file
diff --git a/public/src/components/link-button/link-button.js b/public/src/components/link-button/link-button.js
deleted file mode 100644
index 0eb2efa5..00000000
--- a/public/src/components/link-button/link-button.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import {router} from "../../modules/router.js";
-import "../../../build/link-button.js"
-
-export class LinkButton {
- #parent;
-
- #props = {};
-
- id;
-
- constructor(parent, config) {
- this.id = crypto.randomUUID();
-
- this.#parent = parent;
-
- this.#props.id = this.id ;
- this.#props.text = config.text;
- this.#props.href = config.href;
- }
-
- get self(){
- return document.getElementById(this.id);
- }
-
- handleClick = (e) => {
- e.preventDefault()
- router.redirect(this.#props.href)
- }
-
- #addListeners () {
- this.self.addEventListener("click", this.handleClick)
- }
-
- render() {
-
- this.#parent.insertAdjacentHTML(
- 'beforeend',
- window.Handlebars.templates['link-button.hbs'](this.#props)
- );
-
- this.#addListeners()
- }
-}
diff --git a/public/src/pages/notFound/not-found.js b/public/src/pages/notFound/not-found.js
index c15ab040..668898c1 100644
--- a/public/src/pages/notFound/not-found.js
+++ b/public/src/pages/notFound/not-found.js
@@ -1,5 +1,6 @@
import "../../../build/not-found.js"
-import {LinkButton} from "../../components/link-button/link-button.js";
+import {router} from "../../modules/router.js";
+import {Button} from "../../components/button/button.js";
export default class NotFoundPage {
#parent;
@@ -19,9 +20,12 @@ export default class NotFoundPage {
}
remove() {
-
+ this.#parent.innerHTML = '';
}
+ handleButtonClick = () => {
+ router.redirect("/")
+ }
render() {
console.log("404 page render")
@@ -31,7 +35,7 @@ export default class NotFoundPage {
window.Handlebars.templates['not-found.hbs'](this.#config)
);
- const link = new LinkButton(this.self, this.#config.link)
+ const link = new Button(this.self, this.#config.link, this.handleButtonClick)
link.render()
}
}
diff --git a/public/src/pages/register/register.js b/public/src/pages/register/register.js
index a24335ef..aaeb6241 100644
--- a/public/src/pages/register/register.js
+++ b/public/src/pages/register/register.js
@@ -5,6 +5,9 @@ import {Button} from "../../components/button/button.js";
import {ValidateLogin, ValidatePassword} from "../../shared/validation.js";
import {AppEventMaker} from "../../modules/eventMaker.js";
import {inputEvents} from "../../components/input/events.js";
+import {AppDispatcher} from "../../modules/dispathcer.js";
+import {UserActions} from "../../stores/user/userStore.js";
+import {router} from "../../modules/router.js";
export default class RegisterPage {
#parent;
@@ -29,6 +32,20 @@ export default class RegisterPage {
return document.getElementById(this.#config.form.id)
}
+ validateData = () => {
+ const validateLogin = this.#validateLogin()
+ const validatePassword = this.#validatePassword()
+ if (validateLogin && validatePassword) {
+
+ AppDispatcher.dispatch({
+ type: UserActions.LOGIN,
+ payload: this.#loginInput.value
+ })
+
+ router.redirect("/")
+ }
+ }
+
#validateLogin(){
delete this.#loginInput.self.dataset.error;
@@ -52,6 +69,12 @@ export default class RegisterPage {
if (!validationResult.result){
this.#passwordInput.throwError(validationResult.message);
+ this.#repeatPasswordInput.throwError(validationResult.message);
+ }
+
+ if (this.#passwordInput.value !== this.#repeatPasswordInput.value) {
+ this.#passwordInput.throwError("Пароли не совпадают");
+ this.#repeatPasswordInput.throwError("Пароли не совпадают");
}
return validationResult.result;
@@ -115,7 +138,7 @@ export default class RegisterPage {
this.#link = new Link(this.form, this.#config.form.links.loginPage);
this.#link.render();
- this.#submitBtn = new Button(this.form, this.#config.form.buttons.submitBtn);
+ this.#submitBtn = new Button(this.form, this.#config.form.buttons.submitBtn, this.validateData);
this.#submitBtn.render();
this.#subscribeToEvents();
diff --git a/public/src/shared/validation.js b/public/src/shared/validation.js
new file mode 100644
index 00000000..91ebe2b7
--- /dev/null
+++ b/public/src/shared/validation.js
@@ -0,0 +1,54 @@
+export const ValidatePassword = (value) => {
+ for (let index = 0; index < value.length; ++index){
+ if (!(value.charCodeAt(index) >= 97 && value.charCodeAt(index) <= 122 ||
+ value.charCodeAt(index) >= 64 && value.charCodeAt(index) <= 90 ||
+ value.charCodeAt(index) >= 48 && value.charCodeAt(index) <= 57 ||
+ value.charCodeAt(index) >= 35 && value.charCodeAt(index) <= 38)){
+ return ValidationResult(false, "Пароль должен содержать только латинские символы, цифры или символы #$%&");
+ }
+ }
+
+ if (value === "")
+ {
+ return ValidationResult(false, "Пароль не может быть пустым!")
+ }
+
+ if (value.length < 8){
+ return ValidationResult(false, "Пароль должен быть не менее 8 символов!")
+ }
+
+ if (value.length > 20){
+ return ValidationResult(false, "Пароль должен быть короче 20 символов!")
+ }
+
+ return ValidationResult(true)
+}
+
+export const ValidateLogin = (value) => {
+ for (let index = 0; index < value.length; ++index){
+ if (!(value.charCodeAt(index) >= 97 && value.charCodeAt(index) <= 122 ||
+ value.charCodeAt(index) >= 64 && value.charCodeAt(index) <= 90 ||
+ value.charCodeAt(index) >= 48 && value.charCodeAt(index) <= 57 )){
+ return ValidationResult(false, "Логин должен содержать только латинские символы или цифры")
+ }
+ }
+
+ if (value === "")
+ {
+ return ValidationResult(false, "Логин не может быть пустым!")
+ }
+
+ if (value.length < 4){
+ return ValidationResult(false, "Логин должен быть не менее 4 символов!")
+ }
+
+ if (value.length > 12){
+ return ValidationResult(false, "Логин должен быть короче 12 символов!")
+ }
+
+ return ValidationResult(true)
+}
+
+const ValidationResult = (result, message = null) => {
+ return {result, message}
+}
\ No newline at end of file
From d82c52cb5f2045816241dac63ca94857ec2d89f6 Mon Sep 17 00:00:00 2001
From: YarikMix <43493788+YarikMix@users.noreply.github.com>
Date: Fri, 1 Mar 2024 00:05:30 +0300
Subject: [PATCH 7/7] =?UTF-8?q?=D0=97=D0=B0=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB?=
=?UTF-8?q?=20innerHTML=20=D0=BD=D0=B0=20.remove()=20=D0=BF=D1=80=D0=B8=20?=
=?UTF-8?q?=D1=83=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD=D0=B8=D0=B8=20=D1=81=D1=82?=
=?UTF-8?q?=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
public/build/login.js | 2 +-
public/build/register.js | 2 +-
public/config.js | 2 ++
public/src/pages/login/login.hbs | 4 ++--
public/src/pages/login/login.js | 8 ++++++--
public/src/pages/main/main.js | 2 +-
public/src/pages/notFound/not-found.js | 2 +-
public/src/pages/profile/profile.js | 2 +-
public/src/pages/register/register.hbs | 2 +-
public/src/pages/register/register.js | 6 +++++-
10 files changed, 21 insertions(+), 11 deletions(-)
diff --git a/public/build/login.js b/public/build/login.js
index a0c80769..408300d3 100644
--- a/public/build/login.js
+++ b/public/build/login.js
@@ -1 +1 @@
-!function(){var n=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["login.hbs"]=n({compiler:[8,">= 4.3.0"],main:function(n,l,e,t,a){var o=n.lookupProperty||function(n,l){if(Object.prototype.hasOwnProperty.call(n,l))return n[l]};return'\n\t\n
\n'},useData:!0})}();
\ No newline at end of file
+!function(){var n=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["login.hbs"]=n({compiler:[8,">= 4.3.0"],main:function(n,l,e,t,o){var a=n.lookupProperty||function(n,l){if(Object.prototype.hasOwnProperty.call(n,l))return n[l]};return'\n\t\n
\n'},useData:!0})}();
\ No newline at end of file
diff --git a/public/build/register.js b/public/build/register.js
index 7beefc4b..2b2fdb55 100644
--- a/public/build/register.js
+++ b/public/build/register.js
@@ -1 +1 @@
-!function(){var e=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["register.hbs"]=e({compiler:[8,">= 4.3.0"],main:function(e,t,n,r,l){var a=e.lookupProperty||function(e,t){if(Object.prototype.hasOwnProperty.call(e,t))return e[t]};return'\n\t\n
\n'},useData:!0})}();
\ No newline at end of file
+!function(){var e=Handlebars.template;(Handlebars.templates=Handlebars.templates||{})["register.hbs"]=e({compiler:[8,">= 4.3.0"],main:function(e,t,r,n,l){var a=e.lookupProperty||function(e,t){if(Object.prototype.hasOwnProperty.call(e,t))return e[t]};return'\n\t\n
\n'},useData:!0})}();
\ No newline at end of file
diff --git a/public/config.js b/public/config.js
index bb91152b..6fe30224 100644
--- a/public/config.js
+++ b/public/config.js
@@ -60,6 +60,7 @@ const profilePage = {
}
const loginPage = {
+ id: "login-page",
href: "/login",
form: {
id: "login-form",
@@ -91,6 +92,7 @@ const loginPage = {
const registerPage = {
href: "/register",
+ id: "register-page",
form: {
id: "register-form",
inputs: {
diff --git a/public/src/pages/login/login.hbs b/public/src/pages/login/login.hbs
index d9cf5e47..5e6244de 100644
--- a/public/src/pages/login/login.hbs
+++ b/public/src/pages/login/login.hbs
@@ -1,5 +1,5 @@
-
-