Implement message destroy functionality

princekhunt · May 3, 2024 · 136665f · 136665f
1 parent 9fa57e0
commit 136665f
Show file tree

Hide file tree

Showing 13 changed files with 195 additions and 32 deletions.
diff --git a/assets/css/base_style.css b/assets/css/base_style.css
@@ -20,10 +20,6 @@
     color: #000;
 }
 
-.sidenav a:hover{
-    color: #f1f1f1;
-}
-
 
 .main{
     z-index: 10;

diff --git a/assets/css/chat.css b/assets/css/chat.css
@@ -81,7 +81,7 @@
 #msg_field {
   margin-left: 24px;
   margin-top: 16px;
-  width: 1030px;
+  width: 850px;
 }
 
 #send_btn {

diff --git a/assets/css/chat/Base.css b/assets/css/chat/Base.css
@@ -78,4 +78,10 @@
 .top-nav-list{
   border: none; 
   background-color: transparent;
+}
+
+#delete-friend{
+  padding: 1.8rem 0rem 0rem 0rem;
+  color: rgb(255, 91, 91);
+  cursor: pointer;
 }
diff --git a/assets/css/chat/chats.css b/assets/css/chat/chats.css
@@ -65,3 +65,7 @@
     box-shadow: 14px 0 0 -2px, 38px 0 0 2px, -14px 0 0 -2px, -38px 0 0 -2px;
   }
 }
+
+#MessageDestroy {
+  margin-top: 1rem;
+}
diff --git a/assets/js/chat/Base.js b/assets/js/chat/Base.js
@@ -159,5 +159,62 @@ $(document).ready(function() {
     })
 });
 
+function destroyer(delay, element){
+setTimeout(() => {
+    //element is class name
+    var Message = document.getElementsByClassName(element);
+    Message = Message[0];
+    Message.remove();
+
+}, delay * 1000);
+}
+
+function delete_friend(friend){
+    Swal.fire({
+        title: 'Are you sure?',
+        text: "You want to remove this user from your friend list. This action cannot be undone!",
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Yes, delete it!'
+      }).then((result) => {
+        if (result.isConfirmed) {
+            $.ajax({
+                url: '../delete_friend',
+                dataType: 'json',
+                data: { 
+                    'friend': friend 
+                },
+                success: function(response){
+                    if(response.status == true){
+                        Swal.fire(
+                            'Deleted!',
+                            'User has been deleted.',
+                            'success'
+                          ).then(function(){
+                            location.reload();
+                          });
+                    }
+                    else{
+                        Swal.fire(
+                            'Error!',
+                            'An error occured. Please try again later.',
+                            'error'
+                          );
+                    }
+                },
+                error: function(response){
+                    Swal.fire(
+                        'Error!',
+                        'An error occured. Please try again later.',
+                        'error'
+                      );
+                }
+            });
+
+        }
+      });
+    }
 
 parent.document.title = "PrivatePing - A Secure Chat Room";
diff --git a/assets/js/chat/chats.js b/assets/js/chat/chats.js
@@ -21,8 +21,15 @@ socket3.addEventListener('message', function (e) {
     const data = JSON.parse(e.data);
     if (data.status == 'offline') {
         if (count >= 3) {
-            alert("User disconnected. Navigating you to the home page.");
-            parent.location.href = "/";
+            Swal.fire({
+                icon: "error",
+                title: "Oops...",
+                confirmButtonColor: "#003d89",
+                text: "User disconnected, Navigating you to home page!",
+              }).then(function(){
+                parent.location.href = "/";
+
+              });
         }
         else {
             count++;
@@ -50,7 +57,12 @@ document.getElementById("msg_field").addEventListener("input", function(){
     }
 });
 
-alert("Please wait, User is connecting...");
+Swal.fire({
+    title: "Creating a secure room!",
+    text: "Please wait while we connect you.",
+    confirmButtonColor: "#003d89",
+    icon: "info"
+  });
 document.getElementById("msg_field").disabled = true;
 document.getElementById("send_btn").disabled = true;
 

diff --git a/assets/js/registration/GenerateKeys.js b/assets/js/registration/GenerateKeys.js
@@ -63,4 +63,6 @@ async function main() {
 
 main();
 
-parent.document.title = "PrivatePing - Securing Session";
+if (typeof parent !== 'undefined' && parent.document) {
+  parent.document.title = "PrivatePing - Securing Session";
+}
diff --git a/chat/consumers.py b/chat/consumers.py
@@ -88,14 +88,16 @@ def receive(self, text_data=None, bytes_data=None):
 
         try:
             message = text_data_json['message']
-
             to = text_data_json['to']
+            destroy = text_data_json['destroy']
+
 
             async_to_sync(self.channel_layer.group_send)(
                 "box_"+str(to),
                 {
                     'type': 'chat_message',
-                    'message': message
+                    'message': message,
+                    'destroy': destroy
                 }
             )   
 
@@ -119,11 +121,12 @@ def receive(self, text_data=None, bytes_data=None):
             pass
 
     def chat_message(self, event):
+        print(event['destroy'])
         try:
-            message = event['message']
             self.send(text_data=json.dumps({
-                'message': message,
-                'status': "received"
+                'message': event['message'],
+                'status': "received",
+                'destroy': event['destroy']
             }))
         except:
             pass

diff --git a/chat/templates/chat/Base.html b/chat/templates/chat/Base.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
         integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
     <link rel="stylesheet" href="{% static 'css/base_style.css' %}" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css" integrity="sha256-h2Gkn+H33lnKlQTNntQyLXMWq7/9XI2rlPCsLsVcUBs=" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
@@ -28,6 +29,9 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
         crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js" integrity="sha256-73rO2g7JSErG8isZXCse39Kf5yGuePgjyvot/8cRCNQ=" crossorigin="anonymous"></script>
+
+
 
     <!--define favicon for all devices-->
     <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-touch-icon.png' %}" />
@@ -69,7 +73,7 @@ <h5 class="modal-title" id="exampleModalLongTitle">
                     Please share your username: <br /><b><u>{{request.user}}</u></b><br />with the person you wish to
                     chat with.
                     <br><br><br>
-                    <small>Note: This temporary account will be logged out automatically in 24 hours, and deleted.</small>
+                    <small>Note: This temporary account will be logged out automatically in <b>24 hours, and deleted.</b></small>
                 </div>
             </div>
         </div>
@@ -144,6 +148,7 @@ <h3 class="top-nav-header">
                             <div class="col">
                                 <div class="row">
                                     <p>{{friend.friend.name}}</p>
+                                       <a id="delete-friend" onclick="delete_friend('{{friend.friend.name}}');"><i class="fas fa-trash"></i></a>
                                 </div>
                             </div>
                         </div>
@@ -201,14 +206,31 @@ <h2>Privacy is a <u>Fundamental</u> Right!</h2>
         } else {
         }
 
-        function logout() {
-            confimation = confirm(
-                "Your temporary account will be deleted on logging out, are you sure?"
-            );
-            if (confimation) {
-                window.location.href = "/logout";
-            }
+
+        function logout(){
+            Swal.fire({
+                title: "Heads up!",
+                text: "Your temporary account will be deleted on logging out, are you sure?",
+                icon: "warning",
+                showCancelButton: true,
+                confirmButtonColor: "#003d89",
+                cancelButtonColor: "#d33",
+                confirmButtonText: "Yes, delete it!"
+                }).then((result) => {
+                if (result.isConfirmed) {
+                    Swal.fire({
+                    title: "Deleted!",
+                    confirmButtonColor: "#003d89",
+                    text: "Your account has been deleted.",
+                    icon: "success"
+                    });
+                    setTimeout(function () {
+                    window.location.href = "/logout";
+                    }, 2000);
+                }
+                });
         }
+
     </script>
     {% endif %}
 
@@ -249,7 +271,12 @@ <h2>Privacy is a <u>Fundamental</u> Right!</h2>
             if(window.location.href.includes("/chat")){
                 if(flowOpen == false){
                     flowOpen = true;
-                    alert("You can now send messages.");
+                    Swal.fire({
+                        title: "You're good to go!",
+                        text: "You can now send messages securely.",
+                        confirmButtonColor: "#003d89",
+                        icon: "success"
+                        });
                     document.getElementById("msg_field").disabled = false;
                     document.getElementById("send_btn").disabled = false;
                     document.getElementById("live-notification-text").innerHTML = "Online";
@@ -304,6 +331,8 @@ <h2>Privacy is a <u>Fundamental</u> Right!</h2>
                 const decrypted = decoder.decode(decrypted_message);
                 message = decrypted;
 
+                destroy = obj.destroy;
+
                 const outputDiv = document.getElementById("output");
                 var lenth = message.length;
                 var width = 0;
@@ -331,8 +360,15 @@ <h2>Privacy is a <u>Fundamental</u> Right!</h2>
                 } else {
                     width = 90;
                 }
+
+                classname = Math.random().toString(36).substring(7);
+            DestroySeconds = new Array(5, 10, 30, 60, 300, 600, 3600);
+            if(DestroySeconds.includes(parseInt(destroy))){
+                destroyer(parseInt(destroy), classname);
+            }
+
                 const text_box =
-                    '<div id="ChatMessage" class="container" style="max-width: ' +
+                    '<div id="ChatMessage" class="container '+ classname +'" style="max-width: ' +
                     width +
                     '%;">' +
                     "<h5>" +
@@ -389,17 +425,19 @@ <h2>Privacy is a <u>Fundamental</u> Right!</h2>
                 return btoa(binary);
             }
 
+            MessageDestroy = $("#MessageDestroy").val();
+
             encryptData(message, public_key).then((encrypted_message) => {
                 //convert to base64
                 const base64 = arrayBufferToBase64(encrypted_message);
                 socket.send(
                     JSON.stringify({
                         message: base64,
                         to: getUserName(),
+                        destroy: MessageDestroy,
                     })
                 );
             });
-
             // Clear the input field
             $("#msg_field").val("");
 
@@ -430,8 +468,15 @@ <h2>Privacy is a <u>Fundamental</u> Right!</h2>
                 width = 100;
             }
 
+            classname = Math.random().toString(36).substring(7);
+            DestroySeconds = new Array(5, 10, 30, 60, 300, 600, 3600);
+            if(DestroySeconds.includes(parseInt(MessageDestroy))){
+                destroyer(parseInt(MessageDestroy), classname);
+            }
+
+
             const text_box =
-                '<div id="ChatMessage" class="container-darker" style="max-width: ' +
+                '<div id="ChatMessage" class="container-darker '+ classname +' " style="max-width: ' +
                 width +
                 '%;">' +
                 "<h5>" +

diff --git a/chat/templates/chat/FriendRequest.html b/chat/templates/chat/FriendRequest.html
@@ -36,8 +36,13 @@ <h5>Request Note: <b>{{note}}</b></h5>
 
             },
             success: function (data) {
-                alert("Friend request accepted");
-                window.location.href = "{% url 'chat:dashboard' %}";
+                Swal.fire({
+                title: "Friend request accepted!",
+                confirmButtonColor: "#003d89",
+                icon: "success"
+                }).then(function(){
+                    window.location.href = "{% url 'chat:dashboard' %}";
+                })
             }
         });
     });
@@ -53,8 +58,13 @@ <h5>Request Note: <b>{{note}}</b></h5>
 
             },
             success: function (data) {
-                alert("Friend request rejected");
-                window.location.href = "{% url 'chat:dashboard' %}";
+                Swal.fire({
+                title: "Friend request rejected!",
+                confirmButtonColor: "#003d89",
+                icon: "success"
+                }).then(function(){
+                    window.location.href = "{% url 'chat:dashboard' %}";
+                });
             }
         });
     });

diff --git a/chat/templates/chat/chats.html b/chat/templates/chat/chats.html
@@ -25,6 +25,18 @@ <h3>{{friend.name}}</h3>
             <div class="input-group-prepend">
                 <input style="border-radius: 15px;" type="text" placeholder=" Enter your message" name="message"
                     id="msg_field" autocomplete="off"> &nbsp; &nbsp;
+                    <label class="select" for="MessageDestroy">
+                        <select id="MessageDestroy" required="required">
+                          <option value="0" selected="selected">Do not destroy</option>
+                          <option value="5">5 seconds</option>
+                          <option value="10">10 seconds</option>
+                          <option value="30">30 seconds</option>
+                          <option value="60">1 minutes</option>
+                          <option value="300">5 minutes</option>
+                          <option value="600">10 minutes</option>
+                          <option value="3600">1 hour</option>
+                        </select>
+                      </label>&nbsp; &nbsp;
                 <button style="border-radius: 50%;" type="submit" name="send" class="btn btn-primary" id="send_btn"> <i
                         class="fa-solid fa-paper-plane"></i></button>
 

diff --git a/chat/urls.py b/chat/urls.py
@@ -7,6 +7,7 @@
 urlpatterns = [
     path("dashboard", views.index, name="dashboard"),
     path("addfriend/<str:name>", views.addFriend, name="addFriend"),
+    path("delete_friend", views.deleteFriend, name="deleteFriend"),
     path("chat/<str:username>", views.chat, name="chat"),
     path("request", views.FriendRequest, name="FriendRequest"),
     path('waiting-room', views.waiting_room, name="waiting-room"),