Fixed color issues on several browsers and added authentication

2 files changed, 18 insertions, 14 deletions

diff --git a/main/app/sprinkles/core/templates/pages/index.html.twig b/main/app/sprinkles/core/templates/pages/index.html.twig
index 5de2d30..3a78a16 100644
--- a/main/app/sprinkles/core/templates/pages/index.html.twig
+++ b/main/app/sprinkles/core/templates/pages/index.html.twig
@@ -32,10 +32,11 @@
                     <hr>
                 </div>
             </div>
-            <div class="carousel-cell">
+
+            <div class="carousel-cell ChatTab">
                 <div class="headerWrap">
                     <div class="header">
-                    <span class="LeftButtonHeader"><img draggable="false" ondragstart="return false;"
+                    <span class="LeftButtonHeader"><img class="svg" draggable="false" ondragstart="return false;"
                                                         src="{{ assets.url('assets://SiteAssets/icons/BurgerMenuShort.svg') }}"></span>
                         <span class="HeaderCaption">{{ translate("TAB_CAPTIONS.CHAT") }}</span>
                         <span class="RightButtonHeader"><i class="fas fa-bell"></i></span>
@@ -52,6 +53,7 @@
                     </div>
                 </div>
             </div>
+
             <div class="carousel-cell">
                 <div class="headerWrap">
                     <div class="header">
@@ -73,6 +75,10 @@
                     </div>
                     <hr>
                 </div>
+                <div class="MainInTab">
+                    {{current_user.first_name}} {{current_user.last_name}}
+                    <small>({{current_user.user_name}})</small>
+                </div>
             </div>
         </div>
 
@@ -84,7 +90,7 @@
             <img draggable="false" ondragstart="return false;" src="{{ assets.url('assets://SiteAssets/icons/ExploreGlobeOutline.svg') }}">
         </span>
             <span id="2" class="NavbarIconWrap ActiveTab">
-            <img draggable="false" ondragstart="return false;" src="{{ assets.url('assets://SiteAssets/icons/MessageBubbleOutline.svg') }}">
+            <img draggable="false" ondragstart="return false;" src="{{ assets.url('assets://SiteAssets/icons/MessageBubbleOutlineActivated.svg') }}">
         </span>
             <span id="3" class="NavbarIconWrap">
             <img draggable="false" ondragstart="return false;" src="{{ assets.url('assets://SiteAssets/icons/UserGroupOutline.svg') }}">
diff --git a/main/app/sprinkles/core/templates/pages/partials/chat.js.twig b/main/app/sprinkles/core/templates/pages/partials/chat.js.twig
index a160087..7ae258b 100644
--- a/main/app/sprinkles/core/templates/pages/partials/chat.js.twig
+++ b/main/app/sprinkles/core/templates/pages/partials/chat.js.twig
@@ -2,8 +2,8 @@
 
 /************
  GENERATE KEYS
- ************/
-if (localStorage.getItem('KeysGenerated') === null || localStorage.getItem('KeysGenerated') !== "true") {
+ ************
+ if (localStorage.getItem('KeysGenerated') === null || localStorage.getItem('KeysGenerated') !== "true") {
     // GENERATE -- LATER ON LOGIN!
     var EncryptionPhrase = "PASSWORD 123"; // THE USERS PASSWORD -- needs to generate on login!
     var RSABitLength = 1024;
@@ -28,10 +28,9 @@ if (localStorage.getItem('KeysGenerated') === null || localStorage.getItem('Keys
 }
 
 
-/******
+ /******
  GENERAL
  ******/
-
 var ChatTextInput = $("#ChatTextInput");
 var SubscribeTextInput = $("#SubscribeTextInput");
 var ChatMessages = $("#ChatMessages");
@@ -82,17 +81,16 @@ WebSocket.onmessage = function (e) {
     } else if (MessageObject.ServerMessage === true) {
         if (MessageObject.ServerMessageType === "GroupJoin") {
             if (MessageObject.WasHimself === false) {
-                var TempJoinMessage = "{{ translate("CHAT_MESSAGES.USER_GROUP_JOIN", {user: "ConvertTranslatedMessageWithUsername"}) }}";
-                var GeneratedJoinMessage = TempJoinMessage.replace("ConvertTranslatedMessageWithUsername", MessageObject.Username);
-                ChatMessages.append("<div class='ServerChatMessage'>" + GeneratedJoinMessage + ".</div><br><br>");
+                var TranslatedUserJoinMessage = "{{ translate("CHAT_MESSAGES.USER_GROUP_JOIN", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", MessageObject.Username);
+                ChatMessages.append("<div class='ServerChatMessage'>" + TranslatedUserJoinMessage + ".</div><br><br>");
             } else if (MessageObject.WasHimself === true) {
                 ChatMessages.empty();
-                ChatMessages.append("<div class='ServerChatMessage'>{{ translate("CHAT_MESSAGES.YOU_GROUP_JOIN") }} " + MessageObject.GroupName + "</span>.</div><br><br>");
+                var TranslatedYouJoinMessage = "{{ translate("CHAT_MESSAGES.YOU_GROUP_JOIN", {group: "ConvertTranslatedMessageWithGroupName"}) }}".replace("ConvertTranslatedMessageWithGroupName", '"' + MessageObject.GroupName + '"');
+                ChatMessages.append("<div class='ServerChatMessage'>" + TranslatedYouJoinMessage + "</span>.</div><br><br>");
             }
         } else if (MessageObject.ServerMessageType === "UserDisconnect") {
-            var TempDisconnectMessage = "{{ translate("CHAT_MESSAGES.USER_DISCONNECT", {user: "ConvertTranslatedMessageWithUsername"}) }}";
-            var GeneratedDisconnectMessage = TempDisconnectMessage.replace("ConvertTranslatedMessageWithUsername", MessageObject.Username);
-            ChatMessages.append("<div class='ServerChatMessage'>" + GeneratedDisconnectMessage + ".</div><br><br>");
+            var TranslatedDisconnectMessage = "{{ translate("CHAT_MESSAGES.USER_DISCONNECT", {user: "ConvertTranslatedMessageWithUsername"}) }}".replace("ConvertTranslatedMessageWithUsername", MessageObject.Username);
+            ChatMessages.append("<div class='ServerChatMessage'>" + TranslatedDisconnectMessage + ".</div><br><br>");
         }
     }
 };