-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
125 lines (114 loc) · 3.86 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html>
<head>
<title>CryptCom</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
<style>
html, body, input, p, h1, h2, h3 ,h4, h5, h6 {
font-family: 'Quicksand', sans-serif;
}
h1 {
font-size: 30px;
}
form {
max-width: 300px;
margin: 0 auto;
}
form > div {
margin-bottom: 20px;
overflow: hidden;
}
form > div input {
width: 100%;
padding-left: 10px;
height: 45px;
background-color: white;
border:2px solid lightgrey;
font-size: 16px;
}
form input[type="submit"] {
width: 100%;
height: 45px;
border: 0;
background-color: orange;
color: white;
cursor: pointer;
transition: 0.5s all;
}
form input[type="submit"]:hover{
background-color: #FF9800;
}
.error-msg {
background-color: darkred;
color: white;
font-weight: 500;
text-align: center;
padding: 10px;
max-width: 600px;
margin: 10px auto;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Crypted Communication, your chat won't be logged and we won't have any knowledge of it. Only people you share password can read your message others won't be able to read it unless you share your password with</h1>
<div class="error-msg hidden"></div>
<form id="joinroom">
<div>
<input type="text" name="user" placeholder="Your name" required>
</div>
<div>
<input type="text" name="chatroom" placeholder="Enter chatroom Name" required>
</div>
<div>
<input type="text" name="chatroom-password" placeholder="Enter chatroom Password" required>
</div>
<div>
<input title="If room with the name doesn't exist it will be created with your password or you will join existing room" type="submit" value="join or create" />
</div>
</form>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
jQuery(document).ready(function($){
$('#joinroom').submit(function(event){
event.preventDefault();
var roomName = $(this).find('input[name="chatroom"]').val();
if(!roomName || roomName.trim() === '')
return;
var roomPass = $(this).find('input[name="chatroom-password"]').val();
if(!roomPass || roomPass.trim() === '')
return;
var userName = $(this).find('input[name="user"]').val();
if(!userName || userName.trim() === '')
return;
insertNewRoom(roomName, userName, roomPass);
window.location.href = '/chatroom/'+roomName;
});
function insertNewRoom(room, userName, roomPass) {
var rooms = sessionStorage.getItem('rooms') || '{}';
rooms = JSON.parse(rooms);
rooms[room] = {userName : userName, password: roomPass};
sessionStorage.setItem('rooms', JSON.stringify(rooms));
}
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
if(getParameterByName('error')) {
if(getParameterByName('error') === 'usernameexists') {
$('.error-msg').html("Username you entered already exists in the room").removeClass('hidden');
}
} else {
$('.error-msg').addClass('hidden');
}
});
</script>
</body>
</html>