diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 000000000..70aa65d02
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,3 @@
+/dist
+/node_modules
+/server.js
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 000000000..6751428a9
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,20 @@
+{
+ "env": {
+ "browser": true,
+ "es2021": true
+ },
+ "extends": [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/recommended"
+ ],
+ "parser": "@typescript-eslint/parser",
+ "parserOptions": {
+ "ecmaVersion": "latest",
+ "sourceType": "module"
+ },
+ "plugins": [
+ "@typescript-eslint"
+ ],
+ "rules": {
+ }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..a547bf36d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.postcssrc.json b/.postcssrc.json
new file mode 100644
index 000000000..73b6efeee
--- /dev/null
+++ b/.postcssrc.json
@@ -0,0 +1,5 @@
+{
+ "plugins": {
+ "postcss-preset-env": {}
+ }
+}
diff --git a/.stylelintrc.json b/.stylelintrc.json
new file mode 100644
index 000000000..1d2761c3c
--- /dev/null
+++ b/.stylelintrc.json
@@ -0,0 +1,12 @@
+{
+ "extends": [
+ "stylelint-config-standard"
+ ],
+ "rules": {
+ "selector-class-pattern": "[a-z-_]+"
+
+ },
+ "ignoreFiles": [
+ "build/*"
+ ]
+}
diff --git a/README.md b/README.md
index bcd1a1367..2a2e3bfac 100644
--- a/README.md
+++ b/README.md
@@ -1,83 +1,29 @@
-### Ветка, в которой делаете задания спринта, должна называться sprint_i, где i - номер спринта. Не переименовывайте её.
+# Messenger
+___
+ ### Project 1 for course Middle Yandex.
-### Откройте pull request в ветку main из ветки, где вы разрабатывали проект, и добавьте ссылку на этот pr в README.md в ветке main.
-### ВАЖНО: pull request должен называться “Sprint i” (i — номер спринта).
+### Design
+___
-### Например, задания для проектной работы во втором спринте вы делаете в ветке sprint_2. Открываете из неё pull request в ветку main. Ссылку на этот pr добавляете в README.md в ветке main. После этого на платформе Практикума нажимаете «Проверить задание».
+[Link on Figma](https://www.figma.com/file/FfgnMjuShWBBLmFMls5Ryy/Chat_my_design?type=design&node-id=0-1&mode=design&t=14mgPG10l7FRQJOL-0 "Link on Figma")
-### Также не забудьте проверить, что репозиторий публичный.
----
+### Tech stack:
+___
-Даже законченный проект остаётся только заготовкой, пока им не начнут пользоваться. Но сначала пользователь должен понять, зачем ему пользоваться вашим кодом. В этом помогает файл README.
+- Vite 4.4.9
+- Node.js >14.0.0
+- Handlebars (vite-plugin-handlebars)
+- Typescript 5.2.2
+- Postcss(plugin postcss-preset-env)
-README — первое, что прочитает пользователь, когда попадёт в репозиторий на «Гитхабе». Хороший REAMDE отвечает на четыре вопроса:
+### How to use
+___
-- Готов ли проект к использованию?
-- В чём его польза?
-- Как установить?
-- Как применять?
+ use ```npm run dev``` - for start development
+
\ No newline at end of file
diff --git a/src/assets/icons/arrow-right.svg b/src/assets/icons/arrow-right.svg
new file mode 100644
index 000000000..8d2207939
--- /dev/null
+++ b/src/assets/icons/arrow-right.svg
@@ -0,0 +1 @@
+
+
diff --git a/src/assets/icons/paperclip.svg b/src/assets/icons/paperclip.svg
new file mode 100644
index 000000000..97b038ee2
--- /dev/null
+++ b/src/assets/icons/paperclip.svg
@@ -0,0 +1,9 @@
+
+
\ No newline at end of file
diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg
new file mode 100644
index 000000000..c9af4b15d
--- /dev/null
+++ b/src/assets/icons/search.svg
@@ -0,0 +1 @@
+
+ ${imageUrl ? `
+
` : ``}
+ ${isLoadAvatar ? `
+
` : ""}
+
+ ${text}
+
+ `)
+ }
+}
diff --git a/src/components/badge/index.ts b/src/components/badge/index.ts
new file mode 100644
index 000000000..9e0317d7b
--- /dev/null
+++ b/src/components/badge/index.ts
@@ -0,0 +1,4 @@
+import './badge.pcss';
+
+export {Badge as default} from './badge';
+
diff --git a/src/components/button/button.pcss b/src/components/button/button.pcss
new file mode 100644
index 000000000..08dd1c206
--- /dev/null
+++ b/src/components/button/button.pcss
@@ -0,0 +1,73 @@
+.button {
+ background: var(--red);
+ color: var(--white);
+ font-weight: bold;
+ font-size: 14px;
+ text-transform: uppercase;
+ border: none;
+ border-radius: 20px;
+ padding: 10px 20px;
+ cursor: pointer;
+ max-width: 280px;
+ height: 38px;
+ width: 100%;
+
+ &:hover {
+ opacity: 0.8;
+ }
+}
+
+.button-arrow {
+ padding: 0;
+ background-image: url("../../assets/icons/send.svg");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 60%;
+ width: 36px;
+ height: 36px;
+}
+
+.button-dots {
+ padding: 0;
+ background-image: url("../../assets/icons/dots.svg");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 60%;
+ background-color: transparent;
+ width: 36px;
+ height: 36px;
+}
+
+.button-paperclip {
+ padding: 0;
+ background-image: url("../../assets/icons/paperclip.svg");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 60%;
+ background-color: transparent;
+ width: 50px;
+ height: 50px;
+}
+
+.button-cancel {
+ padding: 0;
+ background-image: url("../../assets/icons/arrow-left.svg");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 60%;
+ width: 36px;
+ height: 36px;
+}
+
+.button-number {
+ padding: 10px;
+ max-width: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 25px;
+ height: 25px;
+}
+
+
+
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
new file mode 100644
index 000000000..f5114571d
--- /dev/null
+++ b/src/components/button/button.ts
@@ -0,0 +1,29 @@
+import {IProps,Block} from "../../utils/Block";
+
+interface IButtonProps extends IProps{
+ type: 'arrow' | 'dots'|'paperclip'|'cancel'|'number',
+ caption: string,
+ page: string,
+ onClick: () => void
+}
+
+export class Button extends Block {
+ constructor(props: IButtonProps) {
+ super({
+ ...props,
+ events: {
+ click: props.onClick || (() => {})
+ }
+ })
+ }
+
+ protected render(): string {
+ const { type='', caption='', page='' } = this._props as IButtonProps;
+ return (`
+
+ ${caption}
+
+ `)
+ }
+}
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
new file mode 100644
index 000000000..f16b52eed
--- /dev/null
+++ b/src/components/button/index.ts
@@ -0,0 +1,3 @@
+import './button.pcss';
+export { Button as default } from './button.ts';
+
diff --git a/src/components/chat-item/chat-item.pcss b/src/components/chat-item/chat-item.pcss
new file mode 100644
index 000000000..914f78c0d
--- /dev/null
+++ b/src/components/chat-item/chat-item.pcss
@@ -0,0 +1,49 @@
+.chat-item {
+ display: grid;
+ grid-template:
+ "a b" 20px
+ "a c" 1fr / 47px 1fr;
+ gap: 4px 10px;
+ grid-auto-flow: column;
+ border-bottom: 1px solid var(--gray-light);
+ height: 80px;
+ width: 310px;
+ margin: 10px 0;
+
+}
+
+.chat-item__avatar {
+ grid-area: a;
+ display: flex;
+ align-items: center;
+}
+
+.chat-item__caption {
+ grid-area: b;
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+
+ .chat-item__caption__name {
+ font-weight: bold;
+ }
+}
+
+.chat-item__message {
+ grid-area: c;
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+
+ .chat-item__message__content p {
+ color: var(--gray-light);
+ width: 200px;
+ margin: 0;
+ -webkit-line-clamp: 2;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
+
diff --git a/src/components/chat-item/chat-item.ts b/src/components/chat-item/chat-item.ts
new file mode 100644
index 000000000..df30ecdd1
--- /dev/null
+++ b/src/components/chat-item/chat-item.ts
@@ -0,0 +1,38 @@
+import {IProps,Block} from "../../utils/Block";
+import {IChat} from "../../models/IChat.ts";
+
+export interface IChatItemProps extends IProps {
+ chat:IChat,
+}
+
+export class ChatItem extends Block {
+ constructor(props: IChatItemProps) {
+ super(props);
+ }
+
+ public renderForList=this.render;
+ protected render(): string {
+ const { chat } = this._props as IChatItemProps;
+ return (`
+
+
+ {{{ Avatar imageUrl=${chat.avatar} isLoadAvatar=false size='sm' }}}
+
+
+
+ ${chat.title}
+
+
+ ${chat.last_message.time}
+
+
+
+
${chat.last_message.content}
+
+ {{{ Button type="number" caption=${chat.unread_count}}}}
+
+ `)
+ }
+}
diff --git a/src/components/chat-item/index.ts b/src/components/chat-item/index.ts
new file mode 100644
index 000000000..7fb390a27
--- /dev/null
+++ b/src/components/chat-item/index.ts
@@ -0,0 +1,5 @@
+import './chat-item.pcss';
+
+export {ChatItem as default} from './chat-item';
+
+
diff --git a/src/components/chat-list/chat-list.pcss b/src/components/chat-list/chat-list.pcss
new file mode 100644
index 000000000..84e7743a8
--- /dev/null
+++ b/src/components/chat-list/chat-list.pcss
@@ -0,0 +1,25 @@
+.chat-list {
+ display: flex;
+ flex-direction: column;
+ border-right: 1px solid var(--gray-light);
+ height: 100%;
+ padding: 10px;
+
+
+ .chat-list__header {
+ display: flex;
+ justify-content: flex-end;
+ }
+
+ .chat-list__search {
+ padding: 10px 0;
+ margin-bottom: 10px;
+ border-bottom: 1px solid var(--gray-light);
+ }
+
+ .chat-list__chats {
+ overflow-y: auto;
+ list-style-type: none;
+ }
+}
+
diff --git a/src/components/chat-list/chat-list.ts b/src/components/chat-list/chat-list.ts
new file mode 100644
index 000000000..dce9d767f
--- /dev/null
+++ b/src/components/chat-list/chat-list.ts
@@ -0,0 +1,41 @@
+import {IProps,Block} from "../../utils/Block";
+import {IChat} from "../../models/IChat.ts";
+import {ChatItem} from "../index.ts";
+import {IChatItemProps} from "../chat-item/chat-item.ts";
+
+interface IChatListProps extends IProps {
+ list:IChat[]
+}
+
+export class ChatList extends Block {
+ constructor(props: IChatListProps) {
+ super(props);
+ }
+
+ getChats(list:IChat[]):string{
+ if(!list||list.length===0)return '';
+ return list.map(chat=>{
+ const chatBlock=new ChatItem({chat:chat} as IChatItemProps)
+ return(`
+ ${chatBlock.renderForList()}
+ `)
+ }).join('')
+ }
+ protected render(): string {
+ const {list } = this._props as IChatListProps;
+
+ return (`
+
+
+
+ {{{ InputSearch }}}
+
+
+ ${this.getChats(list)}
+
+
+
${errorNumber}
+
+ Woops!
+
+
+ ${errorText}
+
+ {{{ Link page='${pageGoBack}' caption='Go Back' }}}
+
+ `)
+ }
+}
diff --git a/src/components/error/index.ts b/src/components/error/index.ts
new file mode 100644
index 000000000..1738eb489
--- /dev/null
+++ b/src/components/error/index.ts
@@ -0,0 +1,4 @@
+import './error.pcss';
+export { Error as default } from './error';
+
+
diff --git a/src/components/form-auth/form-auth.hbs b/src/components/form-auth/form-auth.hbs
new file mode 100644
index 000000000..c8edb4f5d
--- /dev/null
+++ b/src/components/form-auth/form-auth.hbs
@@ -0,0 +1,13 @@
+
+
diff --git a/src/components/form-auth/form-auth.pcss b/src/components/form-auth/form-auth.pcss
new file mode 100644
index 000000000..5540b8922
--- /dev/null
+++ b/src/components/form-auth/form-auth.pcss
@@ -0,0 +1,26 @@
+.container-form {
+ display: grid;
+ grid-template-rows: 0.1fr 0.9fr auto;
+ grid-template-columns: 1fr;
+ gap: 10px;
+ padding: 30px;
+ min-height: 460px;
+ width: 340px;
+
+ .container-form__header {
+ text-align: center;
+ font-size: 1.5em;
+ }
+
+ .container-form__buttons {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ min-height: 74px;
+ margin-top: 30px;
+ align-self: end;
+ }
+}
+
diff --git a/src/components/form-auth/form-auth.ts b/src/components/form-auth/form-auth.ts
new file mode 100644
index 000000000..0616c071a
--- /dev/null
+++ b/src/components/form-auth/form-auth.ts
@@ -0,0 +1,43 @@
+import {IProps,Block} from "../../utils/Block";
+import {ALL_VALIDATE_FIELDS, IValidateType} from "../../models/IValidateType.ts";
+
+interface IFormAuthProps extends IProps {
+ caption: string,
+ children: string,
+ onClickOkButton: (event:Event) => void,
+ onClickCancelButton: (event:Event) => void,
+ captionOk: string,
+ captionCancel: string,
+ pageOk:string,
+ pageCancel:string,
+ validate:IValidateType,
+ onClickOk:(event:Event) => void,
+}
+export class FormAuth extends Block {
+ constructor(props:IFormAuthProps) {
+ props.validate= ALL_VALIDATE_FIELDS;
+ /*props.onClickOk={
+ console.log('OK');
+ props.onClickOkButton(event)
+ }*/
+ super(props);
+ }
+
+ protected render(): string {
+ const {caption='Login',children='',onClickCancelButton,captionOk,captionCancel,pageCancel}=this._props as IFormAuthProps;
+ return(`
+
+ `)
+ }
+}
diff --git a/src/components/form-auth/index.ts b/src/components/form-auth/index.ts
new file mode 100644
index 000000000..f05e574a6
--- /dev/null
+++ b/src/components/form-auth/index.ts
@@ -0,0 +1,3 @@
+import './form-auth.pcss';
+export { FormAuth as default } from './form-auth.ts';
+
diff --git a/src/components/form-profile/form-profile.hbs b/src/components/form-profile/form-profile.hbs
new file mode 100644
index 000000000..8f8f7838e
--- /dev/null
+++ b/src/components/form-profile/form-profile.hbs
@@ -0,0 +1,26 @@
+
+
+ {{> Avatar image=user.image isLoadAvatar=true}}
+
{{user.firstName}} {{user.lastName}}
+
+ {{#with user}}
+
+ {{> @partial-block }}
+
+ {{/with}}
+ {{#if withButton}}
+
+ {{> Button caption=button-text page=button-page }}
+
+ {{else}}
+
+ {{>Link caption="Change IUser Data" page="pageProfileEdit" type='success' linkLine=true }}
+ {{>Link caption="Change Password" page="pagePasswordEdit" type='success' linkLine=true }}
+ {{>Link caption="Cancel" page=button-page type='danger' }}
+
+ {{/if}}
+
+ {{> Button type="cancel" page=button-page }}
+
+
diff --git a/src/components/form-profile/form-profile.pcss b/src/components/form-profile/form-profile.pcss
new file mode 100644
index 000000000..502f007f8
--- /dev/null
+++ b/src/components/form-profile/form-profile.pcss
@@ -0,0 +1,50 @@
+.profile {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ padding: 60px;
+
+ .profile__avatar {
+ text-align: center;
+
+ .profile__avatar__name{
+ font-size: 16px;
+ font-weight: bold;
+ color:var(--red);
+ margin-top:15px ;
+ }
+ }
+
+ .profile__main{
+ margin: 80px 0;
+ }
+
+ .profile__buttons {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: space-between;
+ width: 100%;
+ margin-top: 30px;
+ align-self: end;
+ }
+}
+
+.block-cancel{
+ position: absolute;
+ top:0;
+ left:0;
+ height:100vh;
+ width: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--gray-0);
+ border-right: 1px solid var(--gray-1);
+
+ &:hover{
+ opacity: 0.8;
+ }
+}
+
diff --git a/src/components/form-profile/form-profile.ts b/src/components/form-profile/form-profile.ts
new file mode 100644
index 000000000..cef0cea9b
--- /dev/null
+++ b/src/components/form-profile/form-profile.ts
@@ -0,0 +1,55 @@
+import {IProps,Block} from "../../utils/Block";
+import {IUser} from "../../models/IUser.ts";
+import {ALL_VALIDATE_FIELDS, IValidateType} from "../../models/IValidateType.ts";
+
+interface IFormProfileProps extends IProps{
+ user:IUser,
+ withButton:boolean,
+ children: string,
+ buttonText:string,
+ buttonPage:string,
+ buttonCancelPage:string,
+ onClickOkButton: (event:Event) => void,
+ validate:IValidateType,
+
+}
+export class FormProfile extends Block {
+ constructor(props:IFormProfileProps) {
+ props.validate= ALL_VALIDATE_FIELDS;
+
+ super(props);
+ }
+
+ protected render(): string {
+ const {user,withButton=false,children='',buttonText='',
+ buttonCancelPage=''}=this._props as IFormProfileProps;
+ const {avatar,first_name,second_name}=user;
+
+ return(`
+
+
+
+ {{{ Avatar image=${avatar} isLoadAvatar=true }}}
+
${first_name} ${second_name}
+
+ ${user ?
+ `
+ ${children}
+
`:''
+ }
+ ${withButton ?
+ `
+ {{{ Button caption="${buttonText}" onClick=onClickOkButton }}}
+
`:
+ `
+ {{{Link caption="Change IUser Data" page="pageProfileEdit" type='success' linkLine=true }}}
+ {{{Link caption="Change Password" page="pagePasswordEdit" type='success' linkLine=true }}}
+ {{{Link caption="Cancel" page=button-page type='danger' }}}
+
`}
+
+ {{{ Button type="cancel" page="${buttonCancelPage}" }}}
+
+ `)
+ }
+}
diff --git a/src/components/form-profile/index.ts b/src/components/form-profile/index.ts
new file mode 100644
index 000000000..c8ca21974
--- /dev/null
+++ b/src/components/form-profile/index.ts
@@ -0,0 +1,3 @@
+import './form-profile.pcss';
+export { FormProfile as default } from './form-profile';
+
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 000000000..cb1712f80
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,17 @@
+export { default as Button } from './button'
+export {default as InputShort } from './input-short';
+export {default as Link } from './link';
+export {default as Loader } from './loader';
+export {default as Avatar } from './avatar';
+export {default as InputWide } from './input-wide';
+export { default as FormAuth } from './form-auth';
+export {default as FormProfile } from './form-profile';
+export {default as Modal } from './modal';
+export {default as Input } from './input';
+export { default as ChatItem } from './chat-item';
+export { default as InputSearch } from './input-search';
+export {default as ChatList } from './chat-list';
+export {default as MessageList } from './message-list';
+export {default as Message } from './message';
+export {default as Badge } from './badge';
+export { default as Error } from './error';
diff --git a/src/components/input-search/index.ts b/src/components/input-search/index.ts
new file mode 100644
index 000000000..cc69ea7fb
--- /dev/null
+++ b/src/components/input-search/index.ts
@@ -0,0 +1,4 @@
+import './input-search.pcss';
+export { InputSearch as default } from './input-search';
+
+
diff --git a/src/components/input-search/input-search.pcss b/src/components/input-search/input-search.pcss
new file mode 100644
index 000000000..760898b56
--- /dev/null
+++ b/src/components/input-search/input-search.pcss
@@ -0,0 +1,61 @@
+.input-search {
+ position: relative;
+ padding: 5px;
+ border-radius: 12px;
+ background-color: var(--gray-0);
+ min-width: 290px;
+ display: block;
+
+ .input-search__label {
+ content: "Search...";
+ color: var(--gray-light);
+ position: absolute;
+ top: 15px;
+ left: 40%;
+ }
+
+ &::before {
+ content: "";
+ background: url("../../assets/icons/search.svg") no-repeat;
+ position: absolute;
+ top: 17px;
+ left: 32%;
+ width: 20px;
+ height: 20px;
+ }
+
+ .input-search__value {
+ display: flex;
+ height: 38px;
+ flex-direction: column;
+ align-content: flex-end;
+ position: relative;
+ width: 100%;
+ border:none;
+ background-color: transparent;
+ transition-duration: 600ms;
+ cursor: pointer;
+ padding: 10px;
+
+ &:focus {
+ background-color: var(--gray-0);
+ border:none;
+ transition-duration: 300ms;
+ }
+
+ &:focus-visible {
+ outline: none;
+ }
+
+ &:not(:placeholder-shown) {
+ background-color: var(--gray-0);
+ border:none;
+ transition-duration: 300ms;
+ }
+ }
+}
+
+
+
+
+
diff --git a/src/components/input-search/input-search.ts b/src/components/input-search/input-search.ts
new file mode 100644
index 000000000..8a7726f02
--- /dev/null
+++ b/src/components/input-search/input-search.ts
@@ -0,0 +1,56 @@
+import {IProps,Block} from "../../utils/Block";
+
+interface IInputSearch extends IProps{
+ name: string,
+ value: string,
+ errorText: string,
+ error:boolean ,
+}
+
+export class InputSearch extends Block {
+
+ constructor(props:IInputSearch) {
+ props.errorText='';
+ props.error=false;
+ super(props);
+
+ }
+
+ public value() {
+
+ return this.refs?.input?.value()
+ }
+
+/* private validate() {
+ console.log(this)
+ const value =this.refs?.input?.value();
+ const error = this.props.validate(value);
+
+ console.log('value,error',value,error)
+ this.props.value=value;
+ if (error) {
+ this.setProps({...this.props, errorText: error,error:true});
+ return false;
+ }
+ this.setProps({...this.props, errorText: '',error:false} );
+ return true;
+ }*/
+
+ protected render(): string {
+ const { name = '', value = ''} = this._props as IInputSearch;
+
+ return (`
+
+ Search...
+ {{{ Input
+ ref='input'
+ type="text"
+ classes="input-search__value"
+ value='${value}'
+ name="${name}"
+ placeholder=' '
+ }}}
+
+ `)
+ }
+}
diff --git a/src/components/input-short/index.ts b/src/components/input-short/index.ts
new file mode 100644
index 000000000..b38dc657a
--- /dev/null
+++ b/src/components/input-short/index.ts
@@ -0,0 +1,4 @@
+import './input-short.pcss';
+export { InputShort as default } from './input-short.ts';
+
+
diff --git a/src/components/input-short/input-short.pcss b/src/components/input-short/input-short.pcss
new file mode 100644
index 000000000..498821d85
--- /dev/null
+++ b/src/components/input-short/input-short.pcss
@@ -0,0 +1,64 @@
+.input {
+ padding: 10px;
+
+ .input__container {
+ display: flex;
+ height: 38px;
+ flex-direction: column;
+ align-content: flex-end;
+ }
+
+ .input__label {
+ transform: translateY(-21px);
+ color: var(--gray-light);
+ font-size: 13px;
+ font-weight: 500;
+ user-select: none;
+ transition:
+ font-size 0.5s,
+ transform 0.5s;
+ }
+
+ .input__value {
+ border: none;
+ border-bottom: 1px solid var(--gray-light);
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--gray-dark);
+ padding: 0 0 7px;
+
+ &:focus-visible {
+ outline: none;
+ }
+
+ &:not(:placeholder-shown) + .input__label,
+ &:focus + .input__label {
+ transform: translateY(-36px);
+ font-size: 9px;
+ }
+ }
+
+ .input__text-error {
+ transform: translateY(-7px);
+ color: var(--red);
+ font-size: 8px;
+ font-weight: 400;
+ display: none;
+
+ }
+
+
+ .input__error .input__text-error {
+ display: block;
+ }
+
+ .input__value-error {
+ color: var(--red);
+ }
+}
+
+
+
+
+
+
diff --git a/src/components/input-short/input-short.ts b/src/components/input-short/input-short.ts
new file mode 100644
index 000000000..0b515fd60
--- /dev/null
+++ b/src/components/input-short/input-short.ts
@@ -0,0 +1,81 @@
+import {IProps,Block} from "../../utils/Block";
+
+interface IInputProps extends IProps{
+ type: 'text' | 'password',
+ name: string,
+ value: string,
+ label: string,
+ errorText: string,
+ error:boolean ,
+ onChange: (value: string) => void,
+ validate: (value: string) => string,
+ onBlur: (value: string) => void,
+ ref:string
+}
+
+export class InputShort extends Block {
+
+ constructor(props:IInputProps) {
+ props.errorText='';
+ props.error=false;
+ props.onBlur= () => this.validate();
+
+ super({
+ ...props,
+ });
+
+ }
+
+ public get props(){
+ return this._props as IInputProps;
+ }
+ public value() {
+ if (!this.validate()) {
+ return '';
+ }
+ return this.refs?.[this.props.ref].value()
+ }
+
+ private validate() {
+ const value =this.refs?.[this.props.ref].value();
+ const error = this.props.validate(value);
+
+ this.props.value=value;
+ if (error) {
+ this.props.error=true;
+ this.props.errorText=error;
+ this.setProps(this.props);
+ return false;
+ }
+ this.props.error=false;
+ this.props.errorText='';
+ this.setProps(this.props);
+ return true;
+ }
+
+ protected render(): string {
+ const {type = '', ref = '', value = '', label = "",error=false,errorText=''} = this.props;
+
+ return (`
+
+ `)
+ }
+}
diff --git a/src/components/input-wide/index.ts b/src/components/input-wide/index.ts
new file mode 100644
index 000000000..ca08cb585
--- /dev/null
+++ b/src/components/input-wide/index.ts
@@ -0,0 +1,4 @@
+import './input-wide.pcss';
+export { InputWide as default } from './input-wide';
+
+
diff --git a/src/components/input-wide/input-wide.pcss b/src/components/input-wide/input-wide.pcss
new file mode 100644
index 000000000..2f60d76bd
--- /dev/null
+++ b/src/components/input-wide/input-wide.pcss
@@ -0,0 +1,61 @@
+.input-wide {
+ .input-wide__container {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ height: 38px;
+ width: 510px;
+ border-bottom: 1px solid var(--gray-light);
+ padding:5px 0;
+ }
+
+ .input-wide__container-noline{
+ border-bottom:none;
+ }
+
+ .input-wide__label {
+ color: var(--gray-dark);
+ font-weight: 500;
+ user-select: none;
+ min-width: auto;
+ }
+
+ .input-wide__value {
+ border: none;
+ color: var(--gray-light);
+ text-align: end;
+ max-width: 50%;
+
+ &:focus-visible {
+ outline: none;
+ }
+
+ }
+
+ .input-wide__text{
+ color: var(--gray-light);
+ display: block;
+ }
+
+ .input-wide__text-error {
+ color: var(--red);
+ font-size: 11px;
+ font-weight: 400;
+ text-align: end;
+ margin-top:5px;
+ }
+
+ .input__value-error {
+ color: var(--red);
+ }
+
+ .input__value-disabled{
+ display: none;
+ }
+}
+
+
+
+
+
+
diff --git a/src/components/input-wide/input-wide.ts b/src/components/input-wide/input-wide.ts
new file mode 100644
index 000000000..9b99bca21
--- /dev/null
+++ b/src/components/input-wide/input-wide.ts
@@ -0,0 +1,92 @@
+import{IProps,Block} from "../../utils/Block";
+
+interface IInputWideProps extends IProps{
+ type: 'text' | 'button',
+ name: string,
+ value: string,
+ label: string,
+ validate: (value: string) => string,
+ readOnly: boolean,
+ noLine: boolean,
+ onBlur: () => void,
+ errorText: string,
+ error:boolean ,
+}
+
+export class InputWide extends Block {
+
+
+ constructor(props: IInputWideProps) {
+ props.errorText='';
+ props.error=false;
+ props.onBlur= () => this.validate();
+ super({
+ ...props
+ });
+ }
+ public get props(){
+ return this._props as IInputWideProps;
+ }
+ public value() {
+ if (!this.validate()) {
+ return '';
+ }
+ return this.refs?.input?.value()
+ }
+
+ private validate() {
+ console.log(this)
+ const value = this.refs?.input?.value();
+ const error = this.props.validate(value);
+
+ console.log('value,error', value, error)
+ this.props.value = value;
+
+ if (error) {
+ this.props.error=true;
+ this.props.errorText=error;
+ this.setProps(this.props);
+ return false;
+ }
+ this.props.error=false;
+ this.props.errorText='';
+ this.setProps(this.props);
+ return true;
+ }
+
+ protected render(): string {
+ const {
+ type = '',
+ name = '',
+ value = '',
+ label = "",
+ error = false,
+ errorText = '',
+ readOnly = false,
+ noLine = false
+ } = this.props;
+
+ return (`
+
+ `)
+ }
+}
diff --git a/src/components/input/index.ts b/src/components/input/index.ts
new file mode 100644
index 000000000..0d20e108d
--- /dev/null
+++ b/src/components/input/index.ts
@@ -0,0 +1,3 @@
+export { Input as default } from './input.ts';
+
+
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
new file mode 100644
index 000000000..d0234ef96
--- /dev/null
+++ b/src/components/input/input.ts
@@ -0,0 +1,35 @@
+import {IProps,Block} from "../../utils/Block.ts";
+
+
+interface IInputProps extends IProps {
+ classes: string,
+ placeholder: string,
+ onBlur:()=>void,
+ ref:string,
+ name:string,
+ value:string
+ type: 'text' | 'password',
+}
+
+export class Input extends Block {
+ constructor(props: IInputProps) {
+ props.events={
+ blur: props.onBlur || (() => {})
+ };
+ super(props)
+ }
+
+ protected render(): string {
+ const { classes, placeholder,ref,value,name,type } = this._props as IInputProps;
+ return (`
+
+ ${caption}
+ ${linkIcon ? '
' : ''}
+
+ `)
+ }
+}
diff --git a/src/components/loader/index.ts b/src/components/loader/index.ts
new file mode 100644
index 000000000..08ac789be
--- /dev/null
+++ b/src/components/loader/index.ts
@@ -0,0 +1,2 @@
+import './loader.pcss';
+export { Loader as default } from './loader';
diff --git a/src/components/loader/loader.pcss b/src/components/loader/loader.pcss
new file mode 100644
index 000000000..8cc92a999
--- /dev/null
+++ b/src/components/loader/loader.pcss
@@ -0,0 +1,34 @@
+.loader {
+ width: 48px;
+ height: 48px;
+ display: inline-block;
+ position: relative;
+}
+
+.loader::after,
+.loader::before {
+ content: '';
+ width: 48px;
+ height: 48px;
+ border: 2px solid #242424;
+ position: absolute;
+ left: 0;
+ top: 0;
+ box-sizing: border-box;
+ animation: rotation 2s ease-in-out infinite;
+}
+
+.loader::after {
+ border-color: #FF3D00;
+ animation-delay: 1s;
+}
+
+@keyframes rotation {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/components/loader/loader.ts b/src/components/loader/loader.ts
new file mode 100644
index 000000000..b6a9a116e
--- /dev/null
+++ b/src/components/loader/loader.ts
@@ -0,0 +1,9 @@
+import {Block} from "../../utils/Block";
+
+export class Loader extends Block {
+ protected render(): string {
+ return (`
+
+ ${messageBlock.renderForList()}
+
+ `)
+ }).join('')
+ }
+ protected render(): string {
+ const { messageList,currentUser,message='' } = this.props;
+ const {avatar,display_name}=currentUser;
+ return (`
+
+
+
+ ${this.getListMessages(messageList)}
+
+
+
+ ${message.file?`
+
+
+ {{{ Badge text="01.20" type="primary" }}}
+
+ `:`
+ ${message.content}
+
+ {{{Badge text="01.20" }}}
+
+ `
+ }
+
+ `)
+ }
+}
diff --git a/src/components/modal/index.ts b/src/components/modal/index.ts
new file mode 100644
index 000000000..3fa7354f4
--- /dev/null
+++ b/src/components/modal/index.ts
@@ -0,0 +1,4 @@
+import './modal.pcss';
+export { Modal as default } from './modal';
+
+
diff --git a/src/components/modal/modal.pcss b/src/components/modal/modal.pcss
new file mode 100644
index 000000000..6792b0ba2
--- /dev/null
+++ b/src/components/modal/modal.pcss
@@ -0,0 +1,41 @@
+.modal {
+ display: grid;
+ grid-template-rows: 0.1fr 0.9fr auto;
+ grid-template-columns: 1fr;
+ gap: 10px;
+ padding: 30px;
+ min-height: 300px;
+ width: 340px;
+ z-index: 100;
+
+ .modal__header {
+ text-align: center;
+ font-size: 1.5em;
+ }
+
+ .modal__footer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ min-height: 74px;
+ margin-top: 30px;
+ align-self: end;
+ }
+}
+
+.modal-background {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: 10;
+ background-color: rgb(0 0 0 / 20%);
+ backdrop-filter: blur(5px);
+ top: 0;
+ left: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
diff --git a/src/components/modal/modal.ts b/src/components/modal/modal.ts
new file mode 100644
index 000000000..6f95a366a
--- /dev/null
+++ b/src/components/modal/modal.ts
@@ -0,0 +1,38 @@
+import {IProps,Block} from "../../utils/Block";
+
+interface IModalProps extends IProps {
+ caption: string,
+ okText: string,
+ okClick: () => void,
+ cancelText: string,
+ cancelClick: () => void,
+}
+
+export class Modal extends Block {
+ constructor(props: IModalProps) {
+ super(props);
+
+ }
+ public get props(){
+ return this._props as IModalProps;
+ }
+ protected render(): string {
+ const { caption='',okText='',cancelText=''} = this.props;
+ return (`
+
+ `)
+ }
+}
diff --git a/src/config.ts b/src/config.ts
new file mode 100644
index 000000000..47a370984
--- /dev/null
+++ b/src/config.ts
@@ -0,0 +1,2 @@
+export const urlImages = '/';
+
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 000000000..ed81248b3
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,14 @@
+
+
+
+ IChat
+
+
+
+ e.target).getAttribute('page');
+ if (page) {
+ navigate(page);
+ e.preventDefault();
+ e.stopImmediatePropagation();
+ }
+});
diff --git a/src/mocks/chat-message.mocks.ts b/src/mocks/chat-message.mocks.ts
new file mode 100644
index 000000000..3b5b491a1
--- /dev/null
+++ b/src/mocks/chat-message.mocks.ts
@@ -0,0 +1,44 @@
+import {IChatMessage} from "../models/IChatMessage.ts";
+
+
+export const message1: IChatMessage = {
+ id: 123,
+ user_id: 231,
+ chat_id: 312,
+ time: "2020-01-02",
+ type: "file",
+ content: 132,
+ file: {
+ id: 132,
+ user_id: 231,
+ path: `2.jpg`,
+ filename: "file name",
+ content_type: "image/jpeg",
+ content_size: 543672,
+ upload_date: "2020-01-02T14:22:22.000Z"
+ }
+}
+
+export const message2: IChatMessage = {
+ id: 123,
+ user_id: 231,
+ chat_id: 312,
+ time: "2020-01-02",
+ type: "text",
+ content: 'Привет! Смотри, тут всплыл интересный кусок лунной космической истории — НАСА в какой-то момент попросила Хассельблад адаптировать модель SWC для полетов на Луну. Сейчас мы все знаем что астронавты летали с моделью 500 EL — и к слову говоря, все тушки этих камер все еще находятся на поверхности Луны, так как астронавты с собой забрали только кассеты с пленкой.\n' +
+ '\n' +
+ 'Хассельблад в итоге адаптировал SWC для космоса, но что-то пошло не так и на ракету они так никогда и не попали. Всего их было произведено 25 штук, одну из них недавно продали на аукционе за 45000 евро.',
+}
+
+export const message3: IChatMessage = {
+ id: 123,
+ user_id: 231,
+ chat_id: 312,
+ time: "2020-01-02",
+ type: "file",
+ content: 'Круто!!!',
+ main: true,
+}
+
+export const mockListMessages = [message1, message2, message3];
+
diff --git a/src/mocks/chat.mocks.ts b/src/mocks/chat.mocks.ts
new file mode 100644
index 000000000..274b98000
--- /dev/null
+++ b/src/mocks/chat.mocks.ts
@@ -0,0 +1,65 @@
+import {IChat} from "../models/IChat.ts";
+
+
+export const chat1: IChat = {
+ id: 123,
+ title: "my-chat",
+ avatar: `3.jpg`,
+ unread_count: 15,
+ created_by: 12345,
+ last_message: {
+ user: {
+ first_name: "Petya",
+ second_name: "Pupkin",
+ avatar: `3.jpg`,
+ email: "my@email.com",
+ login: "userLogin",
+ phone: "8(911)-222-33-22",
+ },
+ time: "01.20",
+ content: "this is message content this is message content this is message content this is message content"
+ }
+}
+
+export const chat2: IChat = {
+ id: 124,
+ title: "my-chat1",
+ avatar: `1.jpeg`,
+ unread_count: 15,
+ created_by: 12345,
+ last_message: {
+ user: {
+ first_name: "Lena",
+ second_name: "Lukova",
+ avatar: `1.jpg`,
+ email: "my@email.com",
+ login: "lenaLogin",
+ phone: "8(911)-222-33-22",
+ },
+ time: "Fr",
+ content: "supper content"
+ }
+}
+
+export const chat3: IChat = {
+ id: 125,
+ title: "my-chat3",
+ avatar: `2.jpg`,
+ unread_count: 0,
+ created_by: 12345,
+ last_message: {
+ user: {
+ first_name: "Lena",
+ second_name: "Lukova",
+ avatar: `2.jpg`,
+ email: "my@email.com",
+ login: "lenaLogin",
+ phone: "8(911)-222-33-22",
+ },
+ time: "20 may 2023",
+ content: "supper content"
+ }
+}
+
+export const mockListChats = [chat1, chat2, chat3]
+
diff --git a/src/mocks/user-profile.mocks.ts b/src/mocks/user-profile.mocks.ts
new file mode 100644
index 000000000..6be61ded0
--- /dev/null
+++ b/src/mocks/user-profile.mocks.ts
@@ -0,0 +1,12 @@
+import {IUser} from "../models/IUser.ts";
+
+export const mockUser: IUser = {
+ first_name: "Elena",
+ second_name: "Family",
+ login: "loginElena",
+ display_name: "ElenaChat",
+ password: "password123",
+ phone: "+7985632369",
+ email: "email@gmail.com",
+ avatar: "1.jpeg",
+}
diff --git a/src/models/IChat.ts b/src/models/IChat.ts
new file mode 100644
index 000000000..ba6a28887
--- /dev/null
+++ b/src/models/IChat.ts
@@ -0,0 +1,20 @@
+import {IUser} from "./IUser.ts";
+
+export interface IChat {
+ id: number;
+ title: string;
+ avatar: string;
+ unread_count: number;
+ created_by: number;
+ last_message: ILastMessage;
+}
+
+export interface ILastMessage {
+ user: IUser;
+ time: string;
+ content: string;
+}
+
+
+
+
diff --git a/src/models/IChatMessage.ts b/src/models/IChatMessage.ts
new file mode 100644
index 000000000..d7d201c69
--- /dev/null
+++ b/src/models/IChatMessage.ts
@@ -0,0 +1,12 @@
+import {IFile} from "./IFile.ts";
+
+export interface IChatMessage {
+ id: number;
+ user_id: number;
+ chat_id: number;
+ time: string;
+ type: string;
+ content: number | string;
+ file?: IFile;
+ main?: boolean;
+}
diff --git a/src/models/IFile.ts b/src/models/IFile.ts
new file mode 100644
index 000000000..441da398d
--- /dev/null
+++ b/src/models/IFile.ts
@@ -0,0 +1,9 @@
+export interface IFile {
+ id: number;
+ user_id: number;
+ path: string;
+ filename: string;
+ content_type: string;
+ content_size: number;
+ upload_date: string;
+}
diff --git a/src/models/IUser.ts b/src/models/IUser.ts
new file mode 100644
index 000000000..5f9f546a0
--- /dev/null
+++ b/src/models/IUser.ts
@@ -0,0 +1,12 @@
+export interface IUser {
+ login?: string;
+ password?: string;
+ display_name?: string;
+ first_name: string;
+ second_name: string;
+ phone: string;
+ email: string;
+ avatar?: string;
+}
+
+
diff --git a/src/models/IValidateType.ts b/src/models/IValidateType.ts
new file mode 100644
index 000000000..416888bc9
--- /dev/null
+++ b/src/models/IValidateType.ts
@@ -0,0 +1,19 @@
+import {validateEmail, validateLogin, validateName, validatePassword, validatePhone} from "../utils/validates.utils.ts";
+
+export interface IValidateType{
+ login?: (value:string)=>string,
+ password?: (value:string)=>string,
+ password2?: (value:string)=>string,
+ name?:(value:string)=>string,
+ phone?:(value:string)=>string,
+ email?:(value:string)=>string,
+
+}
+
+export const ALL_VALIDATE_FIELDS:IValidateType={
+ login: validateLogin,
+ name:validateName,
+ phone:validatePhone,
+ email:validateEmail,
+ password:validatePassword
+}
diff --git a/src/pages/404/404.hbs b/src/pages/404/404.hbs
new file mode 100644
index 000000000..0ec750b4e
--- /dev/null
+++ b/src/pages/404/404.hbs
@@ -0,0 +1,4 @@
+
+ {{>Error errorNumber="404" errorText="Page Not Found" page="pageChat"}}
+
+
diff --git a/src/pages/404/404.ts b/src/pages/404/404.ts
new file mode 100644
index 000000000..69751f45f
--- /dev/null
+++ b/src/pages/404/404.ts
@@ -0,0 +1,14 @@
+import {Block} from "../../utils/Block.ts";
+
+export class Page404 extends Block {
+ constructor() {
+ super({events:{}});
+ }
+
+ protected render(): string {
+ return (`
+
+ {{{ Error errorNumber="404" errorText="Page Not Found" page="pageChat" }}
+
`)
+ }
+}
diff --git a/src/pages/404/index.ts b/src/pages/404/index.ts
new file mode 100644
index 000000000..6ab380b60
--- /dev/null
+++ b/src/pages/404/index.ts
@@ -0,0 +1,2 @@
+export {Page404 as default} from './404';
+
diff --git a/src/pages/500/500.hbs b/src/pages/500/500.hbs
new file mode 100644
index 000000000..789fe0cc4
--- /dev/null
+++ b/src/pages/500/500.hbs
@@ -0,0 +1,3 @@
+
+ {{>Error errorNumber="500" errorText="Something went wrong :(" page="pageChat"}}
+
diff --git a/src/pages/500/500.ts b/src/pages/500/500.ts
new file mode 100644
index 000000000..b2dfc05a1
--- /dev/null
+++ b/src/pages/500/500.ts
@@ -0,0 +1,14 @@
+import {Block} from "../../utils/Block.ts";
+
+export class Page500 extends Block {
+ constructor() {
+ super({events:{}});
+ }
+
+ protected render(): string {
+ return (`
+
+ {{{ Error errorNumber="500" errorText="Something went wrong :(" page="pageChat" }}}
+
`)
+ }
+}
diff --git a/src/pages/500/index.ts b/src/pages/500/index.ts
new file mode 100644
index 000000000..d015ba8b5
--- /dev/null
+++ b/src/pages/500/index.ts
@@ -0,0 +1,2 @@
+export {Page500 as default } from './500';
+
diff --git a/src/pages/all-components/all-components.hbs b/src/pages/all-components/all-components.hbs
new file mode 100644
index 000000000..213eb5764
--- /dev/null
+++ b/src/pages/all-components/all-components.hbs
@@ -0,0 +1,16 @@
+
+
+ {{#> AllComponents}}
+
+ {{>InputShort label="Login" type="text" name="login" }}
+
+ {{/AllComponents}}
+
+
+
+
+ {{{ Button caption="sign in" onClick=onClick}}}
+ {{{ Button type="number" caption="330"}}}
+ {{{ Button type="arrow" onClick=onClick}}}
+ {{{ Button type="dots" onClick=onClick}}}
+ {{{ Button type="paperclip" onClick=onClick}}}
+ {{{ Button type="cancel" onClick=onClick}}}
+ {{{ Badge text="01.20" type="primary"}}}
+ {{{ Badge text="01.20" type="ready"}}}
+ {{{ Badge text="01.20" }}}
+ {{{ Avatar isLoadAvatar=false size='sm' onClickLoadAvatar=onClickLoadAvatar}}}
+ {{{ Avatar imageUrl="1.jpeg" isLoadAvatar=false onClickLoadAvatar=onClickLoadAvatar}}}
+ {{{ Avatar imageUrl="2.jpg" isLoadAvatar=true onClickLoadAvatar=onClickLoadAvatar}}}
+ {{{ Avatar imageUrl="3.jpg" isLoadAvatar=true onClickLoadAvatar=onClickLoadAvatar}}}
+ {{{ InputShort label="Login" type="text" name="login" validate=validate.login ref="login" }}}
+ {{{ InputWide label="Login" type="text" name="login" validate=validate.login ref="login" }}}
+ {{{ InputSearch label="Search" type="text" name="login" ref="search" }}}
+ {{{Link caption="Login" page="loginPage" linkIcon=true }}}
+ {{{Link caption="Profile" type='success' page="page404" }}}
+ {{{Link caption="Edit Profile" page="pageProfileEdit" type='danger' linkLine=true }}}
+ {{{Error errorNumber='400' pageGoBack='' errorText='errorText'}}}
+ {{{ChatItem chat=chat}}}
+ {{{ChatList list=chatList}}}
+ {{{ Message message=message}}}
+ {{{ Message message=message myMessage=true}}}
+ {{{ MessageList messageList=messageList currentUser=user}}}
+ {{{Loader}}}
+
+
+
+
+
+ {{>Link caption="Page 404" type='success' page="page404" }}
+ {{>Link caption="Page 500" type='success' page="page500" }}
+ {{>Link caption="Login Page" type='success' page="loginPage" }}
+ {{>Link caption="Page Registration" type='success' page="pageRegistration" }}
+ {{>Link caption="Page Profile" type='success' page="pageProfile" }}
+ {{>Link caption="Page Profile Edit" type='success' page="pageProfileEdit" }}
+ {{>Link caption="Page Password Edit" type='success' page="pagePasswordEdit" }}
+ {{>Link caption="Page IChat" type='success' page="pageChat" }}
+
+
+
+ {{{Link caption="Page 500" type='success' page="page500" }}}
+ {{{Link caption="Login Page" type='success' page="loginPage" }}}
+ {{{Link caption="Page Registration" type='success' page="pageRegistration" }}}
+ {{{Link caption="Page Profile" type='success' page="pageProfile" }}}
+ {{{Link caption="Page Profile Edit" type='success' page="pageProfileEdit" }}}
+ {{{Link caption="Page Password Edit" type='success' page="pagePasswordEdit" }}}
+ {{{Link caption="Page IChat" type='success' page="pageChat" }}}
+ {{{Link caption="All Components" type='success' page="allComponents" }}}
+
+
+
+ {{>ChatList list=chatList}}
+
+
+ {{>MessageList messageList=messageList currentUser=currentUser}}
+
+
+
+ {{{ ChatList list=chatList }}}
+
+
+ {{{ MessageList messageList=messageList currentUser=currentUser }}}
+
+
= {};
+ protected refs: Record = {};
+
+ constructor(propsWithChildren: IProps) {
+ const eventBus = new EventBus();
+ const {props, children} = this._getChildrenAndProps(propsWithChildren);
+
+ this._meta = {
+ props
+ };
+
+ this.children = children;
+ this._props = this._makePropsProxy(props, this);
+ // console.log('init props',props,this.props)
+
+ this._eventBus = () => eventBus;
+
+ this._registerEvents(eventBus);
+ eventBus.emit(Block.EVENTS.INIT);
+ }
+
+ _getChildrenAndProps(childrenAndProps: IProps) {
+ const props: Record = {};
+ const children: Record = {};
+
+ Object.entries(childrenAndProps).forEach(([key, value]) => {
+ if (value instanceof Block) {
+ children[key] = value;
+ } else {
+ props[key] = value;
+ }
+ });
+
+ return {props, children};
+ }
+
+ _registerEvents(eventBus: EventBus) {
+ eventBus.on(Block.EVENTS.INIT, this._init.bind(this));
+ eventBus.on(Block.EVENTS.FLOW_CDM, this._componentDidMount.bind(this));
+ eventBus.on(Block.EVENTS.FLOW_CDU, this._componentDidUpdate.bind(this));
+ eventBus.on(Block.EVENTS.FLOW_RENDER, this._render.bind(this));
+ eventBus.on(Block.EVENTS.FLOW_CWUM, this._componentWillUnmount.bind(this));
+ }
+
+ private _init() {
+ this.init();
+
+ this._eventBus().emit(Block.EVENTS.FLOW_RENDER);
+ }
+
+ protected init() {
+ }
+
+ private _componentDidMount() {
+ this.componentDidMount();
+ }
+
+ protected componentDidMount() {
+ }
+
+ public dispatchComponentDidMount() {
+ this._eventBus().emit(Block.EVENTS.FLOW_CDM);
+ Object.values(this.children).forEach(child => child.dispatchComponentDidMount());
+ }
+
+ private _componentDidUpdate(oldProps: IProps, newProps: IProps) {
+ const response = this.componentDidUpdate(oldProps, newProps);
+ if (response) {
+
+ this._eventBus().emit(Block.EVENTS.FLOW_RENDER);
+ }
+ }
+
+ protected componentDidUpdate(oldProps: IProps, newProps: IProps) {
+ // this.setProps(newProps);
+ return isDeepEqual(oldProps as { [index: string]: IProps }, newProps as { [index: string]: IProps });
+ }
+
+ private _componentWillUnmount() {
+ this.componentWillUnmount()
+ this._removeEvents();
+ }
+
+ protected componentWillUnmount() {
+ this._removeEvents();
+ }
+
+ setProps = (nextProps: IProps) => {
+ if (!nextProps) {
+ return;
+ }
+ Object.assign(this._props, nextProps);
+
+ };
+
+ get element() {
+ return this._element;
+ }
+
+ public value() {
+ return this._element && (this._element).value ? (this._element).value : '';
+ }
+
+ public getRefs() {
+ return this.refs
+ }
+
+ private _render() {
+ const fragment = this.compile(this.render(), this._props);
+
+ const newElement = fragment.firstElementChild as HTMLElement;
+
+ if (this._element) {
+ this._element.replaceWith(newElement);
+ }
+
+ this._element = newElement;
+
+ this._addEvents();
+ }
+
+ _addEvents() {
+ const {events = {}} = this._props as { events: Record void> };
+
+ Object.keys(events).forEach(eventName => {
+ this._element?.addEventListener(eventName, events[eventName]);
+ });
+ }
+
+ _removeEvents() {
+ const {events = {}} = this._props as { events: Record void> };
+
+ Object.keys(events).forEach(eventName => {
+ this._element?.removeEventListener(eventName, events[eventName]);
+ });
+ }
+
+ private compile(template: string, context: object) {
+
+ const contextAndStubs = {...context, __children: [] as Array<{ component: unknown, embed(node: DocumentFragment): void }>, __refs: this.refs};
+
+ const html = Handlebars.compile(template)(contextAndStubs);
+
+ const temp = document.createElement('template');
+
+ temp.innerHTML = html;
+
+ contextAndStubs.__children?.forEach(({embed}) => {
+ embed(temp.content);
+ });
+
+ return temp.content;
+ }
+
+ protected render(): string {
+ return '';
+ }
+
+ getContent() {
+ return this.element;
+ }
+
+ _makePropsProxy(props: { [index: string | symbol]: unknown }, self: Block) {
+ return new Proxy(props, {
+ get(target, prop) {
+ const value = target[prop];
+ return typeof value === "function" ? value.bind(target) : value;
+ },
+ set(target, prop, value) {
+ const oldTarget = {...target}
+
+ target[prop] = value;
+
+ self._eventBus().emit(Block.EVENTS.FLOW_CDU, oldTarget, target);
+ return true;
+ },
+ deleteProperty() {
+ throw new Error("Нет доступа");
+ }
+ });
+ }
+
+
+}
+
+export default Block;
diff --git a/src/utils/EventBus.ts b/src/utils/EventBus.ts
new file mode 100644
index 000000000..537d73c7a
--- /dev/null
+++ b/src/utils/EventBus.ts
@@ -0,0 +1,49 @@
+export default class EventBus {
+ private readonly listeners: { [event: string]: Array<(...args: object[]) => void> } = {};
+
+ constructor() {
+ this.listeners = {};
+ }
+
+ /**
+ * Подписка на событие
+ * @param event
+ * @param callback
+ */
+ on(event: string, callback:(...args: object[]) => void) {
+ if (!this.listeners[event]) {
+ this.listeners[event] = [];
+ }
+ this.listeners[event].push(callback);
+ }
+
+ /**
+ * Отписка
+ * @param event
+ * @param callback
+ */
+ off(event: string, callback: (...args: object[]) => void) {
+ if (!this.listeners[event]) {
+ throw new Error(`Нет события: ${event}`);
+ }
+
+ this.listeners[event] = this.listeners[event].filter(
+ listener => listener !== callback
+ );
+ }
+
+ /**
+ * Триггер события
+ * @param event
+ * @param args
+ */
+ emit(event: string, ...args: object[]) {
+ if (!this.listeners[event]) {
+ throw new Error(`Нет события: ${event}`);
+ }
+
+ this.listeners[event].forEach(listener => {
+ listener(...args);
+ });
+ }
+}
diff --git a/src/utils/Http.ts b/src/utils/Http.ts
new file mode 100644
index 000000000..bbfddeaa3
--- /dev/null
+++ b/src/utils/Http.ts
@@ -0,0 +1,90 @@
+enum METHODS {
+ GET = 'GET',
+ POST = 'POST',
+ PUT = 'PUT',
+ DELETE = 'DELETE'
+}
+
+type IOptionsRequest = {
+ data?: string;
+ method?: METHODS.GET | METHODS.POST | METHODS.PUT | METHODS.DELETE;
+ timeout?: number;
+ headers?: Record;
+ params?: object;
+}
+
+type HTTPMethod = (url: string, options?: IOptionsRequest) => Promise
+
+/**
+ * Get string of query params from object params
+ * @param data
+ */
+function queryStringify(data: object) {
+ let result = '?';
+ result = result + Object.entries(data).map(([key, value]) => {
+ return `${key}=${Array.isArray(value) ? value.join(',') : String(value)}`
+ }).join("&")
+ return result;
+}
+
+class HTTPTransport {
+ get: HTTPMethod = (url, options = {}) => {
+ return this.request(url, {
+ ...options,
+ data: queryStringify(options.params || {}) || '',
+ method: METHODS.GET
+ }, options.timeout);
+ };
+
+ put: HTTPMethod = (url, options = {}) => {
+
+ return this.request(url, {...options, method: METHODS.PUT}, options.timeout);
+ };
+ post: HTTPMethod = (url, options = {}) => {
+
+ return this.request(url, {...options, method: METHODS.POST}, options.timeout);
+ };
+ delete: HTTPMethod = (url, options = {}) => {
+
+ return this.request(url, {...options, method: METHODS.DELETE}, options.timeout);
+ };
+
+ request = (url: string, options: IOptionsRequest = {method: METHODS.GET}, timeout = 5000) => {
+ const {method, headers, data} = options;
+
+ return new Promise((resolve, reject) => {
+
+ const xhr = new XMLHttpRequest();
+ xhr.timeout = timeout;
+ const isGet = method === METHODS.GET;
+ xhr.open(method || METHODS.GET, isGet ? `${url}${data}` : url,);
+
+
+ if (headers) {
+ Object.keys(headers).forEach(key => xhr.setRequestHeader(key, headers[key]));
+ }
+
+
+ xhr.onload = function () {
+ resolve(xhr);
+ };
+
+ /* const handleError = err => {
+ reject(err);
+ };*/
+
+ xhr.onabort = reject;
+ xhr.onerror = reject;
+ xhr.ontimeout = reject;
+
+ if (method === METHODS.GET || !data) {
+ xhr.send();
+ } else {
+ xhr.send(JSON.stringify(data));
+ }
+ });
+
+ };
+}
+
+export default HTTPTransport;
diff --git a/src/utils/object.utils.ts b/src/utils/object.utils.ts
new file mode 100644
index 000000000..85aee1765
--- /dev/null
+++ b/src/utils/object.utils.ts
@@ -0,0 +1,25 @@
+export const isDeepEqual=(object1:{[index: string]:T}, object2:{[index: string]:T}) => {
+
+ const objKeys1 = Object.keys(object1);
+ const objKeys2 = Object.keys(object2);
+
+ if (objKeys1.length !== objKeys2.length) return false;
+
+ for (const key of objKeys1) {
+ const value1 = object1[key];
+ const value2 = object2[key];
+
+ const isObjects = isObject(value1) && isObject(value2);
+
+ if ((isObjects && !isDeepEqual(value1 as { [index: string]: T } , value2 as { [index: string]: T })) ||
+ (!isObjects && value1 !== value2)
+ ) {
+ return false;
+ }
+ }
+ return true;
+};
+
+const isObject = (object:object) => {
+ return object != null && typeof object === "object";
+};
diff --git a/src/utils/registerComponents.ts b/src/utils/registerComponents.ts
new file mode 100644
index 000000000..323dd608c
--- /dev/null
+++ b/src/utils/registerComponents.ts
@@ -0,0 +1,38 @@
+import Handlebars from 'handlebars';
+import Block from "./Block";
+import {HelperOptions} from "handlebars";
+
+export function registerComponent(name: string, Component: typeof Block) {
+ if (name in Handlebars.helpers) {
+ throw `The ${name} component is already registered!`;
+ }
+
+ Handlebars.registerHelper(name, function (this: unknown, {hash, data, fn}: HelperOptions) {
+ const component = new Component(hash);
+ const dataAttribute = `data-id="${component.id}"`;
+
+ if ('ref' in hash) {
+ (data.root.__refs = data.root.__refs || {})[hash.ref] = component;
+ }
+
+ (data.root.__children = data.root.__children || []).push({
+ component,
+ embed(fragment: DocumentFragment) {
+ const stub = fragment.querySelector(`[${dataAttribute}]`);
+
+ if (!stub) {
+ return;
+ }
+
+ const element=component.getContent();
+ element?.append(...Array.from(stub.childNodes));
+
+ stub.replaceWith(element!);
+ }
+ });
+
+ const contents = fn ? fn(this) : '';
+
+ return `${contents}
`;
+ });
+}
diff --git a/src/utils/validates.utils.ts b/src/utils/validates.utils.ts
new file mode 100644
index 000000000..fb5930547
--- /dev/null
+++ b/src/utils/validates.utils.ts
@@ -0,0 +1,97 @@
+/**
+ * от 3 до 20 символов, латиница, может содержать цифры, но не состоять из них, без пробелов, без спецсимволов (допустимы дефис и нижнее подчёркивание).
+ * @param value
+ */
+export const validateLogin = (value: string) => {
+ if (value.length === 0) return `Login can not be blank`;
+ if (value.length < 3) {
+ return 'Login must have minimum 3 characters'
+ }
+ if (value.length > 20) {
+ return 'Login must have maximum 20 characters'
+ }
+ if (!value.match(/(?=.*[a-z])/)) {
+ return 'Login must have letters'
+ }
+ if (!value.match(/^[a-z0-9_-]{3,}$/)) {
+ return 'Login must be a single word and can include latin characters in lower case, numerals, dash and underscore'
+ }
+ return '';
+}
+
+
+/**
+ * от 8 до 40 символов, обязательно хотя бы одна заглавная буква и цифра.
+ * @param value
+ */
+export const validatePassword = (value: string) => {
+ if (value.length === 0) return `Password can not be blank`;
+ if (value.length < 8) {
+ return 'Password must have minimum 8 characters'
+ }
+ if (value.length > 40) {
+ return 'Password must have maximum 40 characters'
+ }
+ if (!value.match(/(?=.*[A-Z])/)) {
+ return 'Password must have uppercase letters'
+ }
+ if (!value.match(/(?=.*[a-z])/)) {
+ return 'Password must have lower letters'
+ }
+ if (!value.match(/(?=.*[0-9])/)) {
+ return 'Password must have number'
+ }
+ return '';
+}
+
+/**
+ first_name, second_name — латиница или кириллица, первая буква должна быть заглавной, без пробелов и без цифр, нет спецсимволов (допустим только дефис).
+ */
+export const validateName = (value: string) => {
+ if (value.length === 0) return `Name can not be blank`;
+ if (value.length < 2) {
+ return 'Name must have minimum 2 characters'
+ }
+ if (value.length > 140) {
+ return 'Name must have maximum 140 characters'
+ }
+ if (!value.match(/^[A-Z]+/)) {
+ return 'Name must have first uppercase letter'
+ }
+ if (!value.match(/[a-z-]$/)) {
+ return 'Name must have only letters and dash'
+ }
+ return '';
+}
+
+/**
+ * email — латиница, может включать цифры и спецсимволы вроде дефиса и подчёркивания, обязательно должна быть «собака» (@) и точка после неё, но перед точкой обязательно должны быть буквы.// /^\S+@\S+\.\S+$/
+ */
+export const validateEmail = (value: string) => {
+ if (value.length === 0) return `Email can not be blank`;
+
+ if (!value.match(/^\S+@\S+\.\S+$/)) {
+ return 'Invalid email'
+ }
+ return '';
+}
+
+/**
+ * phone — от 10 до 15 символов, состоит из цифр, может начинается с плюса.
+ */
+
+export const validatePhone = (value: string) => {
+ if (value.length === 0) return `Phone can not be blank`;
+
+ if (!value.match(/^\s*(?:\+?(\d{1,3}))?([-. (]*(\d{3})[-. )]*)?((\d{3})[-. ]*(\d{2,4})(?:[-.x ]*(\d+))?)\s*$/)) {
+ return 'Invalid Phone, example +123-456-789-1234'
+ }
+ return '';
+}
+/**
+ * message — не должно быть пустым.
+ */
+export const validateMessage = (value: string) => {
+ if (value.length === 0) return `Message can not be blank`;
+ return '';
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///