The user profile page with editing was added (without pop-up forms)

src/components/index.ts

@@ -8,3 +8,4 @@ export { ChatItem } from "./chat-item";
 export { Search } from "./search";
 export { Conversation } from "./conversation";
 export { Navigator } from "./navigator";
+export { Pair } from "./pair";

src/components/navigator/navigator.hbs

@@ -5,5 +5,6 @@
         <li>{{> Button label="Messenger" type="link" page="messenger"}}</li>
         <li>{{> Button label="404" type="link" page="404"}}</li>
         <li>{{> Button label="500" type="link" page="500"}}</li>
+        <li>{{> Button label="profile" type="link" page="profile"}}</li>
     </ul>
 </nav>

src/components/pair/index.ts

@@ -0,0 +1 @@
+export { default as Pair } from './pair.hbs?raw';

src/components/pair/pair.hbs

@@ -0,0 +1,6 @@
+<li class="pair">
+    <div class="pair__key">{{key}}</div>
+    <div class="pair__value">
+        <a href="">{{value}} <span class="pair__value-icon">&#x270D;</span></a>
+    </div>
+</li>

src/components/pair/pair.scss

@@ -0,0 +1,28 @@
+@import "/src/scss/variables";
+
+.pair {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  border-bottom: 1px $border-color solid;
+  padding-top: 15px;
+
+  &__key {
+    display: flex;
+    align-items: flex-end;
+  }
+
+  &__value {
+    display: flex;
+    align-items: flex-end;
+
+    a, &:hover, &:visited {
+      text-decoration: none;
+      color: $text-secondary-color;
+    }
+
+    &-icon {
+      font-size: 1.5rem;
+    }
+  }
+}

src/data/index.ts

@@ -2,3 +2,4 @@ export { chat_list_data as ChatListData  } from './chat_list';
 export { conversation as ConversationData  } from './conversation';
 export { Error404 as Errors404Data } from './errors';
 export { Error500 as Errors500Data } from './errors';
+export { userData as UserData } from './user';

src/data/user.ts

@@ -0,0 +1,10 @@
+export const userData = {
+    avatar: "https://fikiwiki.com/uploads/posts/2022-02/1644885500_22-fikiwiki-com-p-kartinki-dlya-geimerov-na-avu-26.jpg",
+    first_name: "Ivan",
+    second_name: "Ivanov",
+    display_name : "Ivanchik",
+    login: "ivan1645",
+    email: "[email protected]",
+    phone: "+78005553535",
+    password: "0123456789",
+}

src/main.ts

@@ -6,9 +6,10 @@ import * as Data from "./data";
 const pages = {
     'signin': [ Pages.SignInPage, ],
     'signup': [ Pages.SignUpPage,  ],
-    'messenger': [ Pages.Messenger, { chat_list: Data.ChatListData, conversation: Data.ConversationData }],
+    'messenger': [ Pages.MessengerPage, { chat_list: Data.ChatListData, conversation: Data.ConversationData }],
     '404': [ Pages.ErrorPage,  Data.Errors404Data],
     '500': [ Pages.ErrorPage, Data.Errors500Data],
+    'profile': [ Pages.ProfilePage, {user: Data.UserData} ],
 };
 
 Object.entries(Components).forEach(([ name, component ]) => {
@@ -26,7 +27,7 @@ function navigate(page: string) {
     container.innerHTML = Handlebars.compile(source)(context);
 }
 
-document.addEventListener('DOMContentLoaded', () => navigate('messenger'));
+document.addEventListener('DOMContentLoaded', () => navigate('profile'));
 
 document.addEventListener('click', e => {
     //@ts-ignore

src/pages/index.ts

@@ -1,4 +1,5 @@
 export {SignInPage} from './signin'
 export {SignUpPage} from './signup'
-export {Messenger} from './messenger'
+export {MessengerPage} from './messenger'
 export {ErrorPage} from './error'
+export {ProfilePage} from './profile'

src/pages/messenger/index.ts

@@ -1 +1 @@
-export { default as Messenger } from './messenger.hbs?raw';
+export { default as MessengerPage } from './messenger.hbs?raw';

src/pages/profile/index.ts

@@ -0,0 +1 @@
+export { default as ProfilePage } from './profile.hbs?raw';

src/pages/profile/profile.hbs

@@ -0,0 +1,20 @@
+<div class="messenger">
+    <div class="messenger__widget">
+        {{> Avatar user=user }}
+        {{#with user}}
+            <h1>{{display_name}}</h1>
+            <div class="messenger__space"></div>
+            <ul>
+                <!--to edit this field we should click on it to invoke pop-up form-->
+                {{> Pair key="Display name:" value=display_name}}
+                {{> Pair key="First name:" value=first_name}}
+                {{> Pair key="Second name:" value=second_name}}
+                {{> Pair key="Login:" value=login}}
+                {{> Pair key="Phone:" value=phone}}
+            </ul>
+            {{> Button label="Changr password" type="link"}}
+            <div class="messenger__space"></div>
+        {{/with}}
+        {{> Button label="Log out" type="primary"}}
+    </div>
+</div>

src/pages/profile/profile.scss

@@ -0,0 +1,38 @@
+.messenger {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: white;
+
+  &__widget {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 50px 30px 30px;
+    width: 500px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.5);
+    border-radius: 12px;
+
+    .avatar {
+      display: flex;
+      width: 120px;
+      height: 120px;
+    }
+
+    h1 {
+      text-align: center;
+    }
+
+    ul {
+      padding: 0;
+      width: 100%;
+    }
+  }
+
+  &__space {
+    height: 15px;
+  }
+}
+
+

src/style.scss

@@ -9,7 +9,9 @@
 @import '/src/components/chat-list/chat-list';
 @import '/src/components/conversation/conversation';
 @import '/src/components/navigator/navigator';
+@import '/src/components/pair/pair';
 @import '/src/pages/signin/signin';
 @import '/src/pages/signup/signup';
 @import '/src/pages/messenger/messenger';
 @import '/src/pages/error/error';
+@import '/src/pages/profile/profile';