15 |
16 | # 💬 Messaging App
17 | ### A simple messaging app using Firebase Authentication and Cloud Firestore.
18 |
19 | ▶️
19 |
20 |
176 |
177 |
185 |
186 |
21 |
22 |
170 |
171 |
23 |
24 |
105 |
106 |
25 | Create
26 | Account 27 |
28 |
29 | 26 | Account 27 |
30 | Username
31 |
32 |
53 |
54 |
55 |
56 |
57 |
58 | Password
59 |
60 |
61 |
62 |
63 |
64 |
65 |
71 |
72 |
68 | I accept the terms and conditions.
69 |
70 |
73 |
79 |
80 |
76 | I'll be polite and respectful in the chat.
77 |
78 |
81 |
82 | Sign Up
83 |
84 |
99 |
100 |
85 |
97 |
98 |
101 | Already have an account? Log In
102 |
103 |
104 |
107 |
108 |
168 |
169 |
109 | Welcome
110 | Back 111 |
112 |
113 | 110 | Back 111 |
114 | Username
115 |
116 |
117 |
118 |
119 |
120 |
121 | Password
122 |
123 |
124 |
125 |
126 |
127 |
128 |
134 |
135 |
131 | I accept the terms and conditions.
132 |
133 |
136 |
142 |
143 |
139 | I'll be polite and respectful in the chat.
140 |
141 |
144 |
145 | Log In
146 |
147 |
162 |
163 |
148 |
160 |
161 |
164 | New here? Sign Up
165 |
166 |
167 |
172 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus, nulla.
173 |
174 |
175 |
187 |
188 |
196 |
197 |
261 |
262 |
198 |
199 |
207 |
208 |
216 |
217 |
257 |
258 |
259 |
260 |
263 |
264 |
419 |
420 |
421 |
265 |
266 |
274 |
275 |
417 |
418 |
276 |
283 |
286 |
287 |
288 |
289 |
290 |
306 |
307 |
319 |
320 |
348 |
349 |
350 |
351 |
352 |
392 |
393 |
353 |
391 |
354 | 
355 |
356 |
355 |
357 | 
358 |
359 |
358 |
360 | 
361 |
362 |
361 |
363 | 
364 |
365 |
364 |
366 | 
367 |
368 |
367 |
369 | 
370 |
371 |
370 |
372 | 
373 |
374 |
373 |
375 | 
376 |
377 |
376 |
378 | 
379 |
380 |
379 |
381 | 
382 |
383 |
382 |
384 | 
385 |
386 |
385 |
387 | 
388 |
389 |
388 | 6px
390 |
394 |
415 |
416 |
395 |
396 |
414 |
397 |
399 |
400 |
403 |
406 |
413 |
422 |
439 |
440 |
441 |
423 |
438 |
424 |
427 |
431 |
428 | Heading
429 |
430 |
432 | Description
433 |
434 |
437 |
442 |
451 |
452 |
443 |
450 |
444 | Hello World
445 |
446 |
447 |
449 |
453 |
462 |
463 |
464 |
454 |
461 |
455 | Hello World
456 |
457 |
458 |
460 |
465 |
466 |
475 |
476 |
544 |
545 |
546 |
547 |
550 |
551 |
552 |
467 |
472 |
473 |
474 |
552 |
571 | `;
572 | $(".groups-container").append(el);
573 | $("#" + reRData[i].id).on("click", function(){
574 | if(unsubscribe !== undefined){
575 | unsubscribe();
576 | }
577 | showChatScreen(reRData[i].id, groups_array_name[i]);
578 | });
579 | }
580 | $(".group:last-child").addClass("group2");
581 | }
582 |
583 | function setFilterGroups(arg){
584 | $(".groups-filter-container").html("");
585 | for(let i = 0; i < arg.length; i++){
586 | let lastSender = checker(arg[i].data.lastSender) ? arg[i].data.lastSender : "***";
587 | lastSender = ((lastSender).length > 10) ? (lastSender).substring(0, 10) + '...' : lastSender;
588 | let lastMessage = checker(arg[i].data.lastMessage) ? arg[i].data.lastMessage : "***";
589 | lastMessage = ((lastMessage).length > 10) ? (lastMessage).substring(0, 10) + '...' : lastMessage;
590 | lastSender = lastSender.replace(//g,"");
592 | lastSender = lastSender.replace(/\/>/g,"");
593 | lastMessage = lastMessage.replace(//g,"");
595 | lastMessage = lastMessage.replace(/\/>/g,"");
596 | let el =
597 | `
598 |
553 |
557 |
554 | 
555 |
556 |
555 |
558 |
565 |
559 | ${groups_array_name[i]}
560 |
561 |
564 |
566 |
569 |
570 |
599 |
618 | `;
619 | $(".groups-filter-container").append(el);
620 | $("." + arg[i].id).on("click", function(){
621 | if(unsubscribe !== undefined){
622 | unsubscribe();
623 | }
624 | showChatScreen(arg[i].id, groups_array_name[i]);
625 | });
626 | }
627 | }
628 |
629 | function showMessages(){
630 |
631 | $("#messagesLoaderContainer").css({display: "flex"});
632 | setTimeout(function(){
633 | $("#messagesLoaderContainer").css({filter: "opacity(1)"});
634 | }, 20);
635 |
636 | db
637 | .collection("_rooms728346_")
638 | .orderBy("serial", "desc")
639 | .onSnapshot((snapshot) => {
640 |
641 | $("#messagesLoaderContainer").css({filter: "opacity(0)"});
642 | setTimeout(function(){
643 | $("#messagesLoaderContainer").css({display: "none"});
644 | }, 200);
645 | setTimeout(function(){
646 | $(".groups-container").css({display: "block", filter: "opacity(1)"});
647 | }, 220);
648 | setTimeout(function(){
649 | $(".groups-container").css({filter: "opacity(1)"});
650 | }, 240);
651 |
652 | reRData = snapshot.docs.map((doc) => ({
653 | id: doc.id,
654 | data: doc.data(),
655 | }));
656 |
657 | try {
658 | setGroups(
659 | snapshot.docs.map((doc) => ({
660 | id: doc.id,
661 | data: doc.data(),
662 | }))
663 | );
664 | } catch (err) {
665 |
666 | }
667 |
668 | });
669 |
670 | }
671 |
672 | $("#logoutBtn1").on("click", function(){
673 | firebase.auth().signOut().then(() => {
674 |
675 | $(".section__1").css({filter: "brightness(1)"});
676 | $(".signup").css({transform: "scale(1)"});
677 | $(".login").css({transform: "scale(1)"});
678 | $("#superbody2").css({transform: "translateX(" + window.innerWidth + "px"});
679 | $(".title-bar-t").css({transform: "translateX(100vw)"});
680 |
681 | $("input").prop('disabled', false);
682 | $(".section__1").css({pointerEvents: "auto"});
683 |
684 | }).catch((error) => {
685 | showToast("There was an error")
686 | });
687 | });
688 |
689 | function filterByValue(array, value) {
690 | let s = value;
691 | let values = array;
692 | // return array.filter((data) => JSON.stringify(data).toLowerCase().indexOf(value.toLowerCase()) !== -1);
693 | let re = RegExp(`.*${s.toLowerCase().split("").join(".*")}.*`);
694 | return values.filter((v) => v.data.name.toLowerCase().match(re));
695 | }
696 |
697 | $("#searchInput").on("focus", function(){
698 | $(".groups-container").css({display: "none"});
699 | $(".groups-filter-container").css({display: "block"});
700 | });
701 |
702 | $("#searchInput").on("focusout", function(){
703 | if(this.value.length == 0){
704 | $(".groups-container").css({display: "block"});
705 | $(".groups-filter-container").css({display: "none"});
706 | } else {
707 | $(".groups-container").css({display: "none"});
708 | $(".groups-filter-container").css({display: "block"});
709 | }
710 | });
711 |
712 | $("#searchInput").keydown(function(event){
713 | if(event.keyCode == 8){
714 | $("#searchInput").val("");
715 | return false;
716 | }
717 | });
718 |
719 | $("#searchInput").on("keydown", function(e){
720 |
721 | setTimeout(function(){
722 | if( $("#searchInput").val().length !== 0 ){
723 | // try {
724 | setFilterGroups(filterByValue(reRData, $("#searchInput").val()));
725 | // } catch (err) {}
726 | } else {
727 | try {
728 | setFilterGroups([]);
729 | } catch (err) {}
730 | }
731 | }, 0);
732 |
733 | });
734 |
735 | $("#goBackToGroupScr").on("click", function(){
736 | $(".superbody-2").css({filter: "brightness(1)"});
737 | $(".section__2").css({transform: "scale(1)"});
738 | $("#superbody3").css({transition: "0.2s"})
739 | setTimeout(function(){
740 | $("#superbody3").css({transform: "translateX(100vw)"});
741 | }, 0)
742 |
743 | $(".title-bar-t").css({filter: "brightness(1)"});
744 | $(".title-name-t").css({transform: "scale(1)"});
745 | $(".title-logout-t").css({transform: "scale(1)"});
746 |
747 | if($("#superbody2").scrollTop() == 0){
748 | // $(".superbody-2").css("box-shadow", "inset 0px 0px 0px transparent");
749 | } else {
750 | // $(".superbody-2").css("box-shadow", "rgb(240 248 255) 0px 2px 4px inset");
751 | }
752 | });
753 |
754 | $("#superbody2").scroll(function () {
755 |
756 | if($(this).scrollTop() == 0){
757 | $(".superbody-2").css("box-shadow", "inset 0px 0px 0px transparent");
758 | } else {
759 | $(".superbody-2").css("box-shadow", "rgb(240 248 255) 0px 2px 4px inset");
760 | }
761 |
762 | });
763 |
764 | document.getElementById("messageInput").addEventListener("input", function(){
765 | if(this.value.length == 0){
766 | $(".message-btn-container").css({color: "#88898a"});
767 | } else {
768 | $(".message-btn-container").css({color: "#3165ff"});
769 | }
770 | });
771 |
772 | // $("#messageInput").on("keydown", function(){
773 |
774 | // if(this.value.length == 0){
775 | // $(".message-btn-container").css({color: "#88898a"});
776 | // } else {
777 | // $(".message-btn-container").css({color: "#0040ff"});
778 | // }
779 |
780 | // });
781 |
782 | var chatScreenValue;
783 | var chatMsgsVal;
784 | var chatScreenID;
785 | var tCVal;
786 |
787 | function showChats(){
788 |
789 | $("#chatAreaContainer").html("");
790 |
791 | for(let i = 0; i < chatScreenValue.length; i++){
792 |
793 | if(chatScreenValue[i].data.uid == userUID){
794 | if(
795 | chatScreenValue[i].data.message.includes("[sticker]") &&
796 | chatScreenValue[i].data.message.length == 20 &&
797 | (typeof(parseInt(chatScreenValue[i].data.message.substring(9, 11))) == "number") &&
798 | parseInt(chatScreenValue[i].data.message.substring(9, 11)) >= 0 &&
799 | parseInt(chatScreenValue[i].data.message.substring(9, 11)) <= 12)
800 | {
801 | let el =
802 | `
803 |
600 |
604 |
601 |
602 |
603 |
602 |
605 |
612 |
606 | ${arg[i].data.name}
607 |
608 |
611 |
613 |
616 |
617 |
804 |
815 | `;
816 | $("#chatAreaContainer").append(el);
817 | } else {
818 | let msg = chatScreenValue[i].data.message;
819 | msg = msg.replace(//g,"");
821 | msg = msg.replace(/\/>/g,"");
822 | let el =
823 | `
824 |
805 |
814 |
806 |
810 |
807 | ) - 1]})
808 |
809 |
811 | ${chatScreenValue[i].data.timestamp.toDate().toLocaleTimeString('en-US').split(":")[0] + ":" + chatScreenValue[i].data.timestamp.toDate().toLocaleTimeString('en-US').split(":")[1]}
812 |
813 |
825 |
834 | `;
835 | $("#chatAreaContainer").append(el);
836 | }
837 | } else {
838 | if(
839 | chatScreenValue[i].data.message.includes("[sticker]") &&
840 | chatScreenValue[i].data.message.length == 20 &&
841 | (typeof(parseInt(chatScreenValue[i].data.message.substring(9, 11))) == "number") &&
842 | parseInt(chatScreenValue[i].data.message.substring(9, 11)) >= 0 &&
843 | parseInt(chatScreenValue[i].data.message.substring(9, 11)) <= 12
844 | ){
845 |
846 | let color = (chatScreenValue[i].data.uid == "5mjMJm4YLCSFYrqUfUD2jcSGEde2") ? "background: url(https://res.cloudinary.com/dpj9ddsjf/image/upload/v1610832281/coffee60_y9lnpm.png); background-size: cover; background-repeat: no-repeat; background-position: center; color: transparent; filter: sepia(0.2);" : "background: " + color_array[chatScreenValue[i].data.color];
847 |
848 | let el =
849 | `
850 |
826 |
833 |
827 | ${msg}
828 |
829 |
830 | ${chatScreenValue[i].data.timestamp.toDate().toLocaleTimeString('en-US').split(":")[0] + ":" + chatScreenValue[i].data.timestamp.toDate().toLocaleTimeString('en-US').split(":")[1]}
831 |
832 |
851 |
854 |
868 | `;
869 | $("#chatAreaContainer").append(el);
870 |
871 | } else {
872 | // box-shadow: 0px 0px 8px 2px rgb(255 209 51 / 29%);
873 | let status = false;
874 | status = (chatScreenValue[i].data.status == "normal") ?
875 | false : status;
876 | status = (chatScreenValue[i].data.status == "pro") ?
877 | "PRO" : status;
878 | status = (chatScreenValue[i].data.status == "aimu") ?
879 | "AIMU" : status;
880 | status = (chatScreenValue[i].data.status == "member") ?
881 | "MEMBER" : status;
882 | status = (chatScreenValue[i].data.status == "bot" || chatScreenValue[i].data.uid == "8KP1hhhRZrSRQN8TieNxpVND3z12") ?
883 | "BOT" : status;
884 | status = (chatScreenValue[i].data.status == "creator" || chatScreenValue[i].data.uid == "5mjMJm4YLCSFYrqUfUD2jcSGEde2") ?
885 | "CREATOR" : status;
886 | let statusStyle = chatScreenValue[i].data.status == "normal" ? "display: none" : "display: block";
887 |
888 | // let color = color_array[chatScreenValue[i].data.color];
889 |
890 | let color = (chatScreenValue[i].data.uid == "5mjMJm4YLCSFYrqUfUD2jcSGEde2") ?
891 | "background: url(https://res.cloudinary.com/dpj9ddsjf/image/upload/v1610832281/coffee60_y9lnpm.png); background-size: cover; background-repeat: no-repeat; background-position: center; color: transparent; filter: sepia(0.2);"
892 | : (chatScreenValue[i].data.uid == "7gYhh228NlbSemddKuwGddczBZ03") ? "background: url(https://pbs.twimg.com/profile_images/1328121638680997894/pGQDvYl-_400x400.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; color: transparent; filter: sepia(0.2);border: 2px solid #4f8bcf;" :
893 | "background: " + color_array[chatScreenValue[i].data.color];
894 |
895 | let msg = chatScreenValue[i].data.message;
896 | msg = checker(msg) ? msg : "***";
897 | msg = msg.replace(//g,"");
899 | msg = msg.replace(/\/>/g,"");
900 |
901 | let el =
902 | `
903 |
855 |
867 |
856 |
857 | ${chatScreenValue[i].data.name}
858 |
859 |
860 |
861 |
862 |
863 |
864 | ${chatScreenValue[i].data.timestamp.toDate().toLocaleTimeString('en-US').split(":")[0] + ":" + chatScreenValue[i].data.timestamp.toDate().toLocaleTimeString('en-US').split(":")[1]}
865 |
866 |
904 |
907 |
920 | `;
921 | $("#chatAreaContainer").append(el);
922 | }
923 | }
924 |
925 | if(true){
926 | $("#chatAreaContainer").animate({ scrollTop: $("#chatAreaContainer")[0].scrollHeight}, 0);
927 | }
928 |
929 | }
930 |
931 | }
932 |
933 | function showChatScreen(id, name){
934 |
935 | $("#chatAreaContainer").html("");
936 | chatScreenID = id;
937 |
938 | $(".title-name-2").text(name);
939 |
940 | $(".superbody-2").css({filter: "brightness(0.8)"});
941 | $(".section__2").css({transform: "scale(0.96)"});
942 | $("#superbody3").css({transform: "translateX(0px)"});
943 | setTimeout(function(){
944 | $("#superbody3").css({transition: "0s"});
945 | }, 200)
946 |
947 | $(".title-bar-t").css({filter: "brightness(0.8)"});
948 | $(".title-name-t").css({transform: "scale(0.96)"});
949 | $(".title-logout-t").css({transform: "scale(0.96)"});
950 |
951 | // $(".superbody-2").css("box-shadow", "inset 0px 0px 0px transparent");
952 |
953 | $(".chat-aupc-loader").css({display: "block"});
954 | $(".chat-aupc-text").css({display: "none"});
955 |
956 | unsubscribe = db.collection("_rooms728346_")
957 | .doc(id)
958 | .collection("messages")
959 | .orderBy("timestamp", "asc")
960 | .onSnapshot((snapshot) => {
961 |
962 | chatScreenValue = snapshot.docs.map((doc) => doc.data());
963 |
964 | if(chatScreenValue.length == 0){
965 | $(".chat-aupc-loader").css({display: "none"});
966 | $(".chat-aupc-text").css({display: "block"});
967 | } else {
968 |
969 | $(".chat-aupc-loader").css({display: "none"});
970 | $(".chat-aupc-text").css({display: "none"});
971 | chatScreenValue = snapshot.docs.map((doc) => ({
972 | id: doc.id,
973 | data: doc.data(),
974 | }));
975 | try {
976 | showChats();
977 | } catch (err) {
978 |
979 | }
980 |
981 | }
982 |
983 | if(chatScreenValue.length > 20){
984 | db.collection("_rooms728346_").doc(id).collection("messages").doc(chatScreenValue[0].id).delete().then(function() {
985 | // console.log("Document successfully deleted!");
986 | }).catch(function(error) {
987 | // console.error("Error removing document: ", error);
988 | });
989 | }
990 |
991 | });
992 |
993 | }
994 |
995 | function skyraCheck(msg, username){
996 |
997 | if((msg.toLowerCase().trim() == "s!help")){
998 | alert("Hey " + userVal.name + "! I am Skyra.\n\nHere are the commands which you can use with me:\n\n• s!toss Tosses a coin\n\n• s!dice Rolls a dice\n\n• s!height Tells your screen's height\n\n• s!width Tells your screen's width\n\n• s!joke Tells a random joke\n\n• s!weather
908 |
919 |
909 | ${chatScreenValue[i].data.name}
910 | ${status}
911 |
912 |
915 |
916 | ${chatScreenValue[i].data.timestamp.toDate().toLocaleTimeString('en-US').split(":")[0] + ":" + chatScreenValue[i].data.timestamp.toDate().toLocaleTimeString('en-US').split(":")[1]}
917 |
918 |