A self hosted chat application with end-to-end encrypted messaging.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js" th:if="false"></script> <script src="http://blackpeppersoftware.github.io/thymeleaf-fragment.js/thymeleaf-fragment.js" defer="defer" th:if="false"></script>
<div th:replace="fragments/head :: headFragment"> <meta charset="UTF-8"> <title id="pageTitle">Chat</title> </div> <script src="./../../javascript/bundle.js" th:src="@{'/js/' + ${@environment.getProperty('chat-bundle')}}" defer></script> <link rel="stylesheet" th:href="@{/css/chat.css}" href="../../resources/static/css/chat.css">
</head>
<body> <div th:include="fragments/navbar :: navbarFragment"></div> <header id="chat-section"> <div class="dark-overlay"> <div class="chat-inner container bg-primary"> <div class="row"> <div class="col-sm d-lg-block"> <h1 class="display-4">Chat with your friends</h1> <div class="d-flex"> <div class="p-4 align-self-start">
</div> <div class="p-4 align-self-end">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam dolorem nostrum consequatur eos voluptates. Ipsam ullam quos illo qui. Quaerat corrupti nisi numquam rerum quasi nesciunt deserunt fugit commodi consequatur!
</div> </div> </div> </div>
</div> </div> </header> <div class="container-fluid h-100"> <div class="row justify-content-center h-100 mt-3"> <div class="col-md-4 col-xl-3 chat"> <div class="card mb-sm-3 mb-md-0 contacts_card"> <div class="card-header"> <form action="#" id="user-search"> <div class="input-group"> <input type="text" placeholder="Search..." id="user-search-term" class="form-control search"> <button class="search-cancel" id="user-search-cancel" hidden><i class="fas fa-times"></i></button> <div class="input-group-prepend">
<button class="input-group-text search_btn"><i class="fas fa-search"></i></button> </div> </div> </form> </div> <div class="card-body contacts_body"> <ui class="contacts"> <li class="active"> <div class="d-flex bd-highlight"> <div class="img_cont"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img"> <span class="online_icon"></span> </div> <div class="user_info"> <span>Khalid</span> <p>Kalid is online</p> </div> </div> </li> </ui> <ui class="contacts" id="contacts-box"> <th:block th:each="au: ${activeUsers}"> <li name="user-box" class="user-box"> <div class="d-flex bd-highlight"> <div class="img_cont"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img"> <span th:if="${au.online == true}" class="online_icon"></span> </div> <div class="user_info"> <span class="to-user-span" th:text="${au.userName}">Khalid</span> <div th:switch="${au.online}"> <p th:case="true" th:text="${au.userName} + ' is online'">Khalid is online</p> <th:block th:case="false"> <th:block th:if="${au.lastActive == null}"> <p th:text="'User has not logged in yet'"></p> </th:block> <th:block th:if="${au.lastActive != null}"> <p th:text="'Last active ' + ${au.lastActive}">Last active 3 hours ago</p> </th:block> <!-- <p th:case="${au.online == true}" th:text="${au.userName} + ' is online'">Khalid is online</p>
<p th:if="${au.online == false}" th:text="${au.userName} + ' is offline' + ' Last active = ' + ${au.lastActive}">Khalid is offline. --> <!-- <span th:text="'Last active = ' + ${au.lastActive}"></span> --> </th:block> </div> </div> <div class="d-flex flex-column ml-auto"> <div class="text-right">Dec 25</div> <div style="color: rgba(255,255,255,0.7);">Hello how are you</div> </div> </div> </li> </th:block> </ui> </div> <div class="card-footer"></div> </div> </div> <div class="col-md-8 col-xl-6 chat"> <div class="card" id="no-user-selected"> <div class="m-auto"> <div class="d-flex justify-content-center"> <div class="align-self-center"> <h2 class="display-4 no-user-selected-h2">Please select a user</h2> <input class="form-control type_msg" size="10" type="password" id="passphrase-initial" placeholder="Passphrase " required> </div> </div> </div> </div> <div class="card" id="chat-card" hidden> <div class="card-header msg_head"> <div class="d-flex bd-highlight"> <div class="img_cont"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img"> <!-- <span class="online_icon"></span> --> </div> <div class="user_info"> <span id="user-name-span">Chat with Khalid</span> <p id="num-messages-p">1767 Messages</p> </div> <div class="video_cam"> <span><i class="fas fa-video"></i></span> <span><i class="fas fa-phone"></i></span> </div> </div> <span id="action_menu_btn"><i class="fas fa-ellipsis-v"></i></span> <div class="action_menu"> <ul> <li><i class="fas fa-user-circle"></i> View profile</li> <li><i class="fas fa-users"></i> Add to close friends</li> <li><i class="fas fa-plus"></i> Add to group</li> <li><i class="fas fa-ban"></i> Block</li> </ul> </div> </div> <div class="card-body msg_card_body" id="chat-area-new"> </div> <div class="card-footer"> <form action="#" th:object="${chatMessageDTO}" method="post" id="chatMessageForm" class="needs-validation" novalidate> <div class="input-group"> <div class="input-group-append"> <span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span> </div> <input class="form-control type_msg" size="10" type="password" id="passphrase" placeholder="Passphrase " required> <textarea name="" id="chatInput" class="form-control type_msg" placeholder="Type your message..." required></textarea> <div class="input-group-append"> <button class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></button> </div> </div> </form> </div> </div> </div> </div> </div> <section hidden> <div class="container"> <div class="row"> <div class="col-sm">
<h4 class="display-4 text-center py-2">Chat</h4> <div class="card text-white bg-primary mb-3 card-form rounded mx-auto">
<div class="card-body rounded"> <!-- <h4 class="card-title">Chat</h4> --> <div class="form-group"> <textarea id="chatTextArea" class="form-control-lg py-2" disabled></textarea> </div> <!-- <form action="#" th:action="@{/seedstartermng}" th:object="${seedStarter}" method="post"> --> <!-- th:action="@{/api/chat}" --> <div class="card-text">
</div> <form action="#" th:object="${chatMessageDTO}" method="post" class="needs-validation" novalidate> <div class="row"> <div class="col-3"> <div class="form-group"> <label class="lead" for="toUser">User to send to: </label> <th:block th:each="userName: ${userNames}"> <input class="form-control" type="radio" th:field="*{toUser}" th:value="${userName}"> <label class="btn btn-secondary" th:for="${#ids.prev('toUser')}" th:text="${userName}"> Demo User </label> </th:block> </div> </div> <div class="col"> <div class="my-form-inputs container"> <div class="form-group"> <label for="chatInput">Your message: </label> <textarea class="form-control" type="text" required></textarea> <div class="invalid-feedback"> Cannot be empty </div>
</div> <div class="form-group"> <label for="passphrase">Passphrase: </label> <input class="form-control" type="password" required> </div> <div class="form-group text-center"> <button class="btn btn-secondary mx-auto">Submit</button> </div> </div> </div> </div> </form> </div> </div> </div> </div> </div> </section> <template id="msg_container_template"> <div class="d-flex justify-content-start mb-4"> <div class="img_cont_msg"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg"> </div> <div class="msg msg_container"> {{{message}}} <span class="msg_time">{{msgDateFormat messageTime}}</span> </div> </div> </template>
<template id="msg_container_send_template"> <div class="d-flex justify-content-end mb-4"> <div class="msg msg_container_send"> {{{message}}} <span class="msg_time_send">{{msgDateFormat messageTime}}</span> </div> <!-- <div class="img_cont_msg">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg"> </div> --> {{{avatar}}} </div> </template>
<template id="user-contact-online-template"> <li name="user-box" class="user-box"> <div class="d-flex bd-highlight"> <div class="img_cont"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img"> <span class="online_icon"></span> </div> <div class="user_info"> <span class="to-user-span">{{userName}}</span> <p>{{userName}} is online</p> </div> <div class="d-flex flex-column ml-auto"> <div class="text-right">Dec 25</div> <div style="color: rgba(255,255,255,0.7);">Hello how are you</div> </div> </div> </li> </template> <template id="user-contact-offline-template"> <li name="user-box" class="user-box"> <div class="d-flex bd-highlight"> <div class="img_cont"> <img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img"> </div> <div class="user_info"> <span class="to-user-span">{{userName}}</span> <p>Last active {{fromNow lastActive}}</p> </div> <div class="d-flex flex-column ml-auto"> <div class="text-right">Dec 25</div> <div style="color: rgba(255,255,255,0.7);">Hello how are you</div> </div> </div> </li> </template>
</body><!-- <script th:src="@{js/chat.js}" type="text/javascript"></script> --><!-- <script src="../static/js/bundle.js" th:src="@{/js/bundle.js}"></script> --><script src="../static/js/chatStatic.js" th:if="false"></script>
</html>
<!-- <div th:include="::frag (${value1},${value2})">...</div>
<div th:include="::frag (onevar=${value1},twovar=${value2})">...</div> -->
|
