- {{name}}
+
diff --git a/public/src/components/header/header.js b/public/src/components/header/header.js
index 7202f964..9b60d0fa 100644
--- a/public/src/components/header/header.js
+++ b/public/src/components/header/header.js
@@ -1,41 +1,99 @@
-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";
+import {Button} from "../button/button.js";
export class Header {
#parent;
#config;
- #isAuth;
- constructor(parent, config, isAuth) {
+ #menu;
+
+ #authPageLink;
+
+ #avatar;
+ #avatarLink;
+
+ constructor(parent, config) {
this.#parent = parent;
this.#config = config;
- this.#isAuth = isAuth;
+ }
+
+ get self () {
+ return document.getElementById("header")
+ }
+
+ #addEventListeners(){
+ document.addEventListener("scroll", (event) => {
+ if (window.scrollY > 100) {
+ this.self.classList.add("black")
+ } else {
+ this.self.classList.remove("black")
+ }
+ });
+
+
+ AppEventMaker.subscribe(UserStoreEvents.SUCCSSESFUL_LOGIN, () => {
+ 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.classList.add("hidden");
+ })
+
+ AppEventMaker.subscribe(UserStoreEvents.LOGOUT, () => {
+ this.#avatarLink.self.hidden = true;
+
+ this.#authPageLink.self.classList.remove("hidden");
+ });
+ }
+
+ handleButtonClick = () => {
+ router.redirect("/login")
}
render() {
- this.#parent.insertAdjacentHTML('beforebegin', window.Handlebars.templates['header.hbs'](this.#config.header));
+ console.log("header render")
+
+ this.#parent.insertAdjacentHTML(
+ 'afterbegin',
+ window.Handlebars.templates['header.hbs'](this.#config)
+ );
- const self = document.getElementById("header")
+ const logo = new Link(document.querySelector(".logo-container"), this.#config.logo)
+ logo.render()
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.#authPageLink === undefined) {
+ this.#authPageLink = new Button(this.#menu, this.#config.menu.auth, this.handleButtonClick)
+ this.#authPageLink.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/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 @@
-
-
Страница с приветствием пользователя
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/src/components/home/home.js b/public/src/components/home/home.js
index 009b7bbd..971d4bd9 100644
--- a/public/src/components/home/home.js
+++ b/public/src/components/home/home.js
@@ -1,4 +1,6 @@
import "../../../build/home.js"
+import {router} from "../../modules/router.js";
+import {Button} from "../button/button.js";
export class Home {
#parent;
@@ -9,10 +11,22 @@ export class Home {
this.#config = config;
}
+ get self () {
+ return document.getElementById('home');
+ }
+
+ handleButtonClick = () => {
+ router.redirect("/login")
+ }
+
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 Button(document.querySelector(".first"), this.#config.linkToLogin, this.handleButtonClick)
+ link.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
new file mode 100644
index 00000000..327081b1
--- /dev/null
+++ b/public/src/components/input/input.js
@@ -0,0 +1,119 @@
+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';
+ }
+
+ get self() {
+ return document.querySelector(`#input-${this.#config.id}`);
+ }
+
+ get value() {
+ return this.#input.value;
+ }
+
+ throwError(message) {
+ this.self.dataset.error = message
+ }
+
+ #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"];
+
+ 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();
+ }
+
+
+ // 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.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/link/link.hbs b/public/src/components/link/link.hbs
index d78e61c9..25f6a70a 100644
--- a/public/src/components/link/link.hbs
+++ b/public/src/components/link/link.hbs
@@ -1 +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 3d01b75c..f647bb24 100644
--- a/public/src/components/link/link.js
+++ b/public/src/components/link/link.js
@@ -1,28 +1,44 @@
import "../../../build/link.js"
+import {router} from "../../modules/router.js";
export class Link {
#parent;
- #config;
- #isAuth;
- constructor(parent, config, isAuth) {
+ #props = {};
+
+ id;
+
+ constructor(parent, config) {
+ this.id = crypto.randomUUID();
+
this.#parent = parent;
- this.#config = config;
- this.#isAuth = isAuth;
+
+ 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() {
- if (this.#config.needAuth && !this.#isAuth) {
- return
- }
-
- if (!this.#config.needAuth && this.#isAuth) {
- return
- }
-
- 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/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 @@
+
+ {{/if}}
+
+
+
\ 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/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/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
new file mode 100644
index 00000000..73659581
--- /dev/null
+++ b/public/src/modules/router.js
@@ -0,0 +1,70 @@
+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;
+ #currentPage;
+ #pages;
+
+ constructor() {
+ this.#currentUrl = this.parseUrl();
+ this.#currentPage = undefined;
+ this.#pages = new Map();
+ }
+
+ init(root, config){
+ const mainPage = new Main(root, config.mainPage)
+ this.registerPage(mainPage)
+
+ const loginPage = new LoginPage(root, config.loginPage)
+ this.registerPage(loginPage)
+
+ const registerPage = new RegisterPage(root, config.registerPage)
+ this.registerPage(registerPage)
+
+ const profilePage = new ProfilePage(root, config.profilePage)
+ this.registerPage(profilePage)
+
+ const notFoundPage = new NotFoundPage(root, config.notFoundPage)
+ this.registerPage(notFoundPage)
+
+ this.redirect(this.#currentUrl)
+ }
+
+ registerPage(page) {
+ this.#pages[page.href] = page
+ }
+
+ redirect(href) {
+ if (href === "") 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
+ }
+
+ this.#currentPage?.remove()
+ page.render()
+ this.#currentPage = page
+ history.pushState(null, null, page.href)
+ }
+ }
+
+ parseUrl() {
+ return "/" + window.location.href.split("/").slice(-1)[0];
+ }
+}
+
+export const router = new Router()
diff --git a/public/src/pages/login/login.css b/public/src/pages/login/login.css
index e69de29b..7f2f0d18 100644
--- a/public/src/pages/login/login.css
+++ b/public/src/pages/login/login.css
@@ -0,0 +1,24 @@
+.login-form-wrapper {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.login-form {
+ min-width: 300px;
+ padding: 20px;
+ border-radius: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background: #ffffff;
+ width: 300px;
+ gap: 20px;
+}
+
+.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..5e6244de 100644
--- a/public/src/pages/login/login.hbs
+++ b/public/src/pages/login/login.hbs
@@ -1,3 +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 d9d96f99..6a3a655d 100644
--- a/public/src/pages/login/login.js
+++ b/public/src/pages/login/login.js
@@ -1,17 +1,134 @@
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 {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;
#config;
+ #loginInput;
+ #passwordInput;
+ #link;
+ #submitBtn;
+
constructor(parent, config) {
this.#parent = parent;
this.#config = config;
}
+ get href () {
+ return this.#config.href;
+ }
+
+ get form () {
+ return document.getElementById(this.#config.form.id)
+ }
+
+ get self () {
+ return document.getElementById(this.#config.id)
+ }
+
+ 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, this.#inputEventHandler);
+ }
+
+ #unsubscribeToEvents(){
+ console.log("unsubscribeToEvents login")
+
+ AppEventMaker.unsubscribe(inputEvents.INPUT_CHANGE, this.#inputEventHandler);
+ }
+
+ #validatePassword(){
+ console.log("password validation started")
+
+ 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
+ }
+
+ #validateLogin(){
+ console.log("login validation started")
+
+ 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
+ }
+
+ remove(){
+ this.#unsubscribeToEvents();
+ this.#submitBtn.remove();
+ this.#passwordInput.remove();
+ this.#loginInput.remove();
+ this.self.remove()
+ }
+
render() {
- this.#parent.innerHTML = '';
+ console.log("loginPage render")
+
+ this.#parent.insertAdjacentHTML(
+ 'beforeend',
+ window.Handlebars.templates['login.hbs'](this.#config)
+ );
+
+ 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.#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.validateData);
+ this.#submitBtn.render();
- this.#parent.insertAdjacentHTML('beforeend', window.Handlebars.templates['login.hbs'](this.#config.login));
+ this.#subscribeToEvents();
}
}
diff --git a/public/src/pages/main-page/main-page.css b/public/src/pages/main-page/main-page.css
deleted file mode 100644
index f3309779..00000000
--- a/public/src/pages/main-page/main-page.css
+++ /dev/null
@@ -1,7 +0,0 @@
-#main-page {
- display: grid;
- grid-template-columns: 300px 500px;
- justify-content: center;
- padding: 25px;
- gap: 20px;
-}
\ No newline at end of file
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.js b/public/src/pages/main-page/main-page.js
deleted file mode 100644
index 964887e2..00000000
--- a/public/src/pages/main-page/main-page.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import {NotesContainer} from "../../components/notes/notes.js";
-import {NoteEditor} from "../../components/note-editor/note-editor.js";
-import {Home} from "../../components/home/home.js";
-import "../../../build/main-page.js"
-
-export default class MainPage {
- #parent;
- #config;
- #user;
-
- constructor(parent, config, user) {
- this.#parent = parent;
- this.#config = config;
- this.#user = user;
- }
-
- render() {
- this.#parent.innerHTML = '';
-
- 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)
- notesContainer.render()
-
- const noteEditor = new NoteEditor(self, this.#config)
- noteEditor.render()
- } else {
- const home = new Home(self, this.#config)
- home.render()
- }
- }
-}
diff --git a/public/src/pages/main/main.css b/public/src/pages/main/main.css
new file mode 100644
index 00000000..dfaa7c19
--- /dev/null
+++ b/public/src/pages/main/main.css
@@ -0,0 +1,5 @@
+#main {
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+}
\ No newline at end of file
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/main.js b/public/src/pages/main/main.js
new file mode 100644
index 00000000..2a787b7a
--- /dev/null
+++ b/public/src/pages/main/main.js
@@ -0,0 +1,44 @@
+import "../../../build/main.js"
+import {NotesContainer} from "../../components/notes/notes.js";
+import {AppUserStore} from "../../stores/user/userStore.js";
+import {Home} from "../../components/home/home.js";
+
+export default class Main {
+ #parent;
+ #config;
+
+ constructor(parent, config) {
+ this.#parent = parent;
+ this.#config = config;
+ }
+
+ get href () {
+ return this.#config.href;
+ }
+
+ get self () {
+ return document.getElementById('main');
+ }
+
+ remove(){
+ console.log("Main remove")
+ this.self.remove()
+ }
+
+ render() {
+ console.log("Main page render")
+
+ 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.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..e95b5de5
--- /dev/null
+++ b/public/src/pages/notFound/not-found.js
@@ -0,0 +1,41 @@
+import "../../../build/not-found.js"
+import {router} from "../../modules/router.js";
+import {Button} from "../../components/button/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() {
+ this.self.remove()
+ }
+
+ handleButtonClick = () => {
+ router.redirect("/")
+ }
+
+ render() {
+ console.log("404 page render")
+
+ this.#parent.insertAdjacentHTML(
+ 'afterbegin',
+ window.Handlebars.templates['not-found.hbs'](this.#config)
+ );
+
+ const link = new Button(this.self, this.#config.link, this.handleButtonClick)
+ link.render()
+ }
+}
diff --git a/public/src/pages/profile/profile.css b/public/src/pages/profile/profile.css
new file mode 100644
index 00000000..08f60e31
--- /dev/null
+++ b/public/src/pages/profile/profile.css
@@ -0,0 +1,13 @@
+.profile-page {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+ gap: 25px;
+}
+
+.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 @@
+Страница 404
+
+
\ 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..44c3d1c9
--- /dev/null
+++ b/public/src/pages/profile/profile.js
@@ -0,0 +1,58 @@
+import "../../../build/profile.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 () {
+ return this.#config.href;
+ }
+
+ get self () {
+ return document.getElementById(this.#config.id);
+ }
+
+ remove(){
+ this.self.remove()
+ }
+
+ handleLogout() {
+ console.log('logout bitch')
+
+ AppDispatcher.dispatch({
+ type: UserActions.LOGOUT
+ })
+ }
+
+ render() {
+ console.log("Profile page render")
+
+ this.#parent.insertAdjacentHTML(
+ 'afterbegin',
+ window.Handlebars.templates['profile.hbs'](this.#config)
+ );
+
+
+ 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 e69de29b..df902327 100644
--- a/public/src/pages/register/register.css
+++ b/public/src/pages/register/register.css
@@ -0,0 +1,23 @@
+.register-form-wrapper {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.register-form {
+ min-width: 300px;
+ padding: 20px;
+ border-radius: 20px;
+ display: flex;
+ flex-direction: column;
+ 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..304f6d20 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 7d5d031f..1b0e3d40 100644
--- a/public/src/pages/register/register.js
+++ b/public/src/pages/register/register.js
@@ -1,17 +1,150 @@
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";
+import {AppDispatcher} from "../../modules/dispathcer.js";
+import {UserActions} from "../../stores/user/userStore.js";
+import {router} from "../../modules/router.js";
export default class RegisterPage {
#parent;
#config;
+ #loginInput;
+ #passwordInput;
+ #repeatPasswordInput;
+ #link;
+ #submitBtn;
+
constructor(parent, config) {
this.#parent = parent;
this.#config = config;
}
+ get href () {
+ return this.#config.href;
+ }
+
+ get form () {
+ return document.getElementById(this.#config.form.id)
+ }
+
+ get self () {
+ return document.getElementById(this.#config.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;
+
+ 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);
+ this.#repeatPasswordInput.throwError(validationResult.message);
+ }
+
+ if (this.#passwordInput.value !== this.#repeatPasswordInput.value) {
+ this.#passwordInput.throwError("Пароли не совпадают");
+ this.#repeatPasswordInput.throwError("Пароли не совпадают");
+ }
+
+ 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.#unsubscribeToEvents();
+ this.self.remove()
+ }
+
render() {
- this.#parent.innerHTML = '';
- 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") // Не понятно зачем это, анализатор ругается
+
+ 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();
+
+ 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.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
diff --git a/public/src/stores/user/events.js b/public/src/stores/user/events.js
new file mode 100644
index 00000000..de2b98bb
--- /dev/null
+++ b/public/src/stores/user/events.js
@@ -0,0 +1,4 @@
+export const UserStoreEvents = {
+ 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
new file mode 100644
index 00000000..f13182dc
--- /dev/null
+++ b/public/src/stores/user/userStore.js
@@ -0,0 +1,60 @@
+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/settings.png',
+ isAuth: false
+ }
+
+ registerEvents(){
+ AppDispatcher.register((action) => {
+ switch (action.type){
+ case UserActions.LOGIN:
+ this.login(action.payload);
+ break;
+ case UserActions.LOGOUT:
+ this.logout();
+ break;
+ }
+ })
+ }
+
+ 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);
+ }
+
+ 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",
+ REGISTER: "REGISTER",
+ LOGOUT: "LOGOUT"
+}
\ No newline at end of file
diff --git a/server/index.js b/server/index.js
index 2ca00dfc..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,21 +46,11 @@ const staticFile = (res, filePath, ext) => {
const server = http.createServer((req, res) => {
const {url} = req
- console.log(url)
-
- switch (url) {
- case "/":
- console.log("main 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")
}
})