From 24c6d79fac60100bda28b488ed941e6015b56ba1 Mon Sep 17 00:00:00 2001
From: mudmykola <mykola.mud@gmail.com>
Date: Sun, 15 Sep 2024 14:24:46 +0300
Subject: [PATCH] update(chat): update chat

---
 .firebase/hosting.ZGlzdA.cache        |  26 +++----
 src/components/chat/ChatComponent.vue | 108 ++++++++++++++++++--------
 src/firebase.js                       |   3 +-
 3 files changed, 89 insertions(+), 48 deletions(-)

diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
index 7712e65..117fa64 100644
--- a/.firebase/hosting.ZGlzdA.cache
+++ b/.firebase/hosting.ZGlzdA.cache
@@ -1,13 +1,13 @@
-index.html,1726206215334,25393176ff3ddf28ec46e13af8d4e432a54fdf29b5bf806d3b2c57a1c8b6fba5
-assets/fa-v4compatibility-BX8XWJtE.woff2,1726206215334,8945f97a3a1bbd891397f2f7900844dbf1808e9e3924900a31d4acafb11a9db2
-data/cartoons.json,1726206215003,7fc09526226ac347c18f1e3e4506c1748c9eb1da294b7c4d521017df05a2be65
-assets/fa-v4compatibility-B9MWI-E6.ttf,1726206215333,d5040b176e185deb1562d78b306cffe3336502f43ad77337eb9b8e464e1ab757
-assets/FavoriteComponent-CU74GVyb.js,1726206215334,38dd6cb7bdbdab1751a0d6dc75ee681f148b5f6a32cca87d370ff5d2230cd091
-assets/fa-regular-400-DgEfZSYE.woff2,1726206215331,fb31b3f693b818441c452f39a682d8ad81967e3474b6a2266ddb885177cd98d1
-assets/fa-regular-400-Bf3rG5Nx.ttf,1726206215334,61e9221981e1ad8a27ea29b9aed2d9d1615450c3f99b3a6175c2ef238fa67eb4
-assets/fa-brands-400-O7nZalfM.woff2,1726206215331,5446f4c298ee6694ba92500f91741668e1ff9c8c08cb018a4f414fb663acae9e
-assets/fa-solid-900-DOQJEhcS.woff2,1726206215334,7a9c4ef0dd299dfd976428e4cb9c86fc13ebd4eed7604f035476e69af3f56b9d
-assets/fa-brands-400-Dur5g48u.ttf,1726206215334,8a036bca81921a2f3fc90c860fde21f0e8066cdf3507cf9999dd2a47cac380b1
-assets/index-DJ_jKQnL.css,1726206215333,975c65ec679ed0e5f7d7955347d934f9e0c9de341190f1ada3adbfde4c8736a8
-assets/index-BAYcpFy6.js,1726206215335,93ef0b5b97e8c5913cc5d2d53e285821f08b434426ab40660036f8651467be64
-assets/fa-solid-900-BV3CbEM2.ttf,1726206215332,af1fb4d30a49d562da382fdc49f386e2c8075bbbe26a5ecbbcdcf8994aaa423d
+index.html,1726399403568,912d8525b8b728904b97d2ab83de9e5650a2384ace33ed9eee24bef7ae51a6cb
+assets/fa-v4compatibility-BX8XWJtE.woff2,1726399403567,8945f97a3a1bbd891397f2f7900844dbf1808e9e3924900a31d4acafb11a9db2
+assets/fa-v4compatibility-B9MWI-E6.ttf,1726399403568,d5040b176e185deb1562d78b306cffe3336502f43ad77337eb9b8e464e1ab757
+data/cartoons.json,1726399403242,7fc09526226ac347c18f1e3e4506c1748c9eb1da294b7c4d521017df05a2be65
+assets/FavoriteComponent-BySKiWHV.js,1726399403567,4f14e81c8a97dfea3e994cf6e65f2554ee3db1ecf295394fbc0d49e1c5572379
+assets/fa-regular-400-DgEfZSYE.woff2,1726399403567,fb31b3f693b818441c452f39a682d8ad81967e3474b6a2266ddb885177cd98d1
+assets/fa-regular-400-Bf3rG5Nx.ttf,1726399403568,61e9221981e1ad8a27ea29b9aed2d9d1615450c3f99b3a6175c2ef238fa67eb4
+assets/fa-brands-400-O7nZalfM.woff2,1726399403568,5446f4c298ee6694ba92500f91741668e1ff9c8c08cb018a4f414fb663acae9e
+assets/fa-solid-900-DOQJEhcS.woff2,1726399403567,7a9c4ef0dd299dfd976428e4cb9c86fc13ebd4eed7604f035476e69af3f56b9d
+assets/fa-brands-400-Dur5g48u.ttf,1726399403567,8a036bca81921a2f3fc90c860fde21f0e8066cdf3507cf9999dd2a47cac380b1
+assets/index-CgG86AI3.css,1726399403567,075812d1fe0967260c6c23f5ce9c85b812a3d91eacb8ae8b9789169f014b1a93
+assets/index-D5R5qNIA.js,1726399403568,c73ee5ad7b32eee88607ee7417b9766cfd0266d37b46c8270fd499c83a94de32
+assets/fa-solid-900-BV3CbEM2.ttf,1726399403568,af1fb4d30a49d562da382fdc49f386e2c8075bbbe26a5ecbbcdcf8994aaa423d
diff --git a/src/components/chat/ChatComponent.vue b/src/components/chat/ChatComponent.vue
index 89d2156..a2fdf37 100644
--- a/src/components/chat/ChatComponent.vue
+++ b/src/components/chat/ChatComponent.vue
@@ -25,6 +25,8 @@ const displayedMessages = ref([]);
 const maxDisplayedMessages = ref(10);
 const isMobile = ref(window.innerWidth < 768);
 const typingUsers = ref([]);
+const showPasswordPrompt = ref(false);
+const passwordInput = ref('');
 
 const loadNewMessages = () => {
   const allMessages = messages.value;
@@ -40,12 +42,16 @@ const scrollToBottom = () => {
 };
 
 const confirmClearChat = () => {
-  if (
-    confirm(
-      'Are you sure you want to clear the chat? This action cannot be undone.'
-    )
-  ) {
+  showPasswordPrompt.value = true;
+};
+
+const handlePasswordSubmit = () => {
+  if (passwordInput.value === import.meta.env.VITE_CHAT_CLEAR_PASSWORD) {
     clearChat();
+    showPasswordPrompt.value = false;
+    passwordInput.value = '';
+  } else {
+    alert('Невірний пароль!');
   }
 };
 
@@ -139,7 +145,7 @@ const toggleEmojiPicker = () => {
 };
 
 const replyMessage = (message) => {
-  newMessage.value = `@${message.user.name} ${message.text}`;
+  newMessage.value = `@${message.user.name} `;
   replyingTo.value = message;
 };
 
@@ -184,6 +190,34 @@ onBeforeUnmount(() => {
     >
       Очистити чат
     </button>
+    <div
+      v-if="showPasswordPrompt"
+      class="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75 z-50"
+    >
+      <div class="bg-gray-900 p-4 rounded-lg shadow-lg">
+        <p class="text-white mb-4">Введіть пароль для підтвердження:</p>
+        <input
+          v-model="passwordInput"
+          type="password"
+          placeholder="Пароль"
+          class="border border-gray-700 bg-gray-800 text-white p-2 rounded-lg w-full mb-4"
+        />
+        <div class="flex justify-end">
+          <button
+            @click="handlePasswordSubmit"
+            class="bg-blue-600 text-white p-2 rounded-lg mr-2 hover:bg-blue-500"
+          >
+            Підтвердити
+          </button>
+          <button
+            @click="showPasswordPrompt = false"
+            class="bg-gray-600 text-white p-2 rounded-lg hover:bg-gray-500"
+          >
+            Скасувати
+          </button>
+        </div>
+      </div>
+    </div>
     <div
       ref="messagesContainer"
       class="flex-1 overflow-y-auto p-2 bg-gray-800 border border-gray-700 rounded-lg shadow-lg"
@@ -191,18 +225,12 @@ onBeforeUnmount(() => {
       <div
         v-for="message in displayedMessages"
         :key="message.timestamp"
-        :class="[
-          'flex items-start mb-4',
-          message.user.id === currentUserId.value
-            ? 'justify-end'
-            : 'justify-start',
-        ]"
+        class="flex mb-4"
+        :class="{
+          'justify-end': message.user.id === currentUserId.value,
+          'justify-start': message.user.id !== currentUserId.value,
+        }"
       >
-        <img
-          :src="message.user?.avatar || 'https://via.placeholder.com/40'"
-          alt="avatar"
-          class="w-10 h-10 rounded-full mr-4 border-2 border-gray-700"
-        />
         <div
           :class="[
             'flex flex-col p-4 rounded-lg max-w-[75%] relative',
@@ -220,7 +248,7 @@ onBeforeUnmount(() => {
           <p class="text-gray-300 whitespace-pre-wrap">
             <span
               v-if="message.replyTo"
-              class="text-gray-400 italic block mb-2"
+              class="block mb-2 p-2 bg-yellow-100 text-yellow-800 border border-yellow-300 rounded-md"
             >
               Відповідає на {{ message.replyTo.user.name }}: "{{
                 message.replyTo.text
@@ -239,40 +267,52 @@ onBeforeUnmount(() => {
             </button>
           </div>
         </div>
+        <img
+          v-if="message.user.id !== currentUserId.value"
+          :src="message.user?.avatar || 'https://via.placeholder.com/40'"
+          alt="avatar"
+          class="w-10 h-10 rounded-full ml-4 border-2 border-gray-700"
+        />
+        <img
+          v-if="message.user.id === currentUserId.value"
+          :src="message.user?.avatar || 'https://via.placeholder.com/40'"
+          alt="avatar"
+          class="w-10 h-10 rounded-full mr-4 border-2 border-gray-700"
+        />
       </div>
+
       <div v-if="typingUsers.length" class="text-gray-400 italic mb-4">
-        <span v-for="(user, index) in typingUsers" :key="user.id">
+        <span v-for="(user, index) in typingUsers" :key="index">
           {{ user.name }}{{ index < typingUsers.length - 1 ? ', ' : '' }}
         </span>
-        друкує...
+        {{ typingUsers.length > 1 ? 'пишуть...' : 'пише...' }}
       </div>
     </div>
-    <div v-if="emojisVisible" class="absolute bottom-16 right-4 z-20">
-      <EmojiPicker @emoji-select="handleEmojiSelect" />
-    </div>
-    <div
-      class="flex items-center justify-between border-t border-gray-700 bg-gray-800 p-2"
-    >
+
+    <div class="flex items-center mt-4">
       <button
         @click="toggleEmojiPicker"
-        class="bg-gray-700 p-2 rounded-lg text-gray-300 mr-2 hover:bg-gray-600"
+        class="p-2 bg-gray-700 text-white rounded-lg mr-2 hover:bg-gray-600"
       >
         😊
       </button>
       <input
-        id="message-input"
-        type="text"
         v-model="newMessage"
-        @keypress="handleKeyPress"
-        placeholder="Введіть повідомлення..."
-        class="flex-1 border border-gray-700 bg-gray-900 p-2 rounded-lg text-white"
+        @keydown="handleKeyPress"
+        @focus="startTyping"
+        @blur="stopTyping"
+        type="text"
+        placeholder="Ваше повідомлення..."
+        class="flex-1 p-2 border border-gray-700 bg-gray-800 text-white rounded-lg"
       />
       <button
         @click="sendMessage"
-        class="bg-blue-600 text-white p-2 rounded-lg ml-2 flex-shrink-0 hover:bg-blue-500"
+        class="ml-2 p-2 bg-blue-600 text-white rounded-lg hover:bg-blue-500"
       >
-        <IconSend />
+        <IconSend class="w-6 h-6" />
       </button>
     </div>
+
+    <EmojiPicker v-if="emojisVisible" @select="handleEmojiSelect" />
   </div>
 </template>
diff --git a/src/firebase.js b/src/firebase.js
index 5ea7d16..e5781e7 100644
--- a/src/firebase.js
+++ b/src/firebase.js
@@ -15,4 +15,5 @@ const firebaseConfig = {
 const app = initializeApp(firebaseConfig);
 export const auth = getAuth(app);
 const database = getDatabase(app);
-export { app, database };
+const CHAT_CLEAR_PASSWORD = import.meta.env.VITE_CHAT_CLEAR_PASSWORD;
+export { app, database, CHAT_CLEAR_PASSWORD };