webservices/safechat
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first design

Browse Source
This commit is contained in:
Marc Wäckerlin
2015-06-29 22:34:37 +00:00
parent 4dfe4d14a1
commit 0758a9d217
5 changed files with 135 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
html/chat.html
View File

@@ -1,6 +1,6 @@
<form id="chat" onsubmit="sendmessage(this.elements['recv'].value, this.elements['msg'].value)">
<label for="recv">receiver:</label> <input type="text" id="recv" oninput="checkpartner(this.value)" autofocus/>
<label for="msg">message:</label> <input type="text" id="msg"/>
<form id="chat" autocomplete="off" onsubmit="sendmessage(this.elements['recv'].value, this.elements['msg'].value)">
<input placeholder="receiver" autocomplete="off" type="text" id="recv" oninput="checkpartner(this.value)" />
<input placeholder="message" autocomplete="off" type="text" id="msg"/>
<input type="submit" id="send" disabled/>
</form>
<table id="msgs"></table>
<div id="msgs"></div>

5
html/index.html
View File

@@ -2,6 +2,7 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1" />
<link href="safechat.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="openpgp.js"></script>
@@ -13,7 +14,9 @@
<body>
<h1>Safe Chat</h1>
<div id="header">
<h1>Safe Chat</h1>
</div>
<div id="main">

12
html/newuser.html
View File

@@ -1,10 +1,8 @@
<h2>Create New User (Step 1 of 1)</h2>
<p>Welcome to Safechat. Yor are here for the first time, at least with this browser. We do not collect your private data. Please chose any username, either a pseudony or your real name, and chose a safe password.</p>
<h2>Register User (Step 1 of 1)</h2>
<form id="register" onsubmit="createNewUser(this.elements['user'].value, this.elements['pwd'].value)">
<label for="user">User Name:</label><input type="text" id="user" oninput="checkuser(this.value)" autofocus/>
<label for="pwd">Password:</label><input type="password" id="pwd" oninput="checkpwd(this.value, document.getElementById('pwd2').value)"/>
<label for="pwd2">Repeat Password:</label><input type="password" id="pwd2" oninput="checkpwd(document.getElementById('pwd').value, this.value)"/>
<input placeholder="user name" type="text" id="user" oninput="checkuser(this.value)"/>
<input placeholder="password" type="password" id="pwd" oninput="checkpwd(this.value, document.getElementById('pwd2').value)"/>
<input placeholder="repeat password" type="password" id="pwd2" oninput="checkpwd(document.getElementById('pwd').value, this.value)"/>
<input id="createuser" type="submit" disabled/>
</form>
<p>Please choose any user name and a safe password. Chose a user name so, that your friends can find you, for example your real name, email address or phone number.</p>
<p>Be careful: You won't be able to change the user name, nor the password later.</p>
<p>Please chose any username, e.g. a pseudonym, your e-mail, your phone number, your real name, and chose a safe password.</p>

112
html/safechat.css
View File

@@ -3,8 +3,62 @@
padding: 0;
}
p {
padding: .5em 0 1em 0;
}
form {
padding: .5em 0 1em 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
@media (max-width: 45em) {
form {
flex-direction: column;
flex-wrap: wrap;
}
}
form > * {
flex-grow: 1;
}
form input[type="submit"] {
flex-grow: 0;
}
form input#msg {
flex-grow: 4;
}
table {
width: 100%;
}
tr {
display: flex;
align-items: stretch;
}
td:last-child {
flex:1; /* last td to fill remaining width */
}
#header {
position: fixed;
left: 0;
right: 0;
top: 0;
margin: 0;
padding: 0 1em 0 1em;
background-color: green;
color: white;
}
#header h1 {
font-weight: bold;
font-size: 100%;
}
#status {
position: absolute;
position: fixed;
left: 0;
right: 0;
bottom: 0;
@@ -12,6 +66,13 @@
padding: 0 1em 0 1em;
text-align: right;
}
@media (min-width: 45em) {
#status {
bottom: auto;
left: auto;
top: 0;
}
}
#status.error {
background-color: lightred;
}
@@ -21,12 +82,47 @@
#status.success {
background-color: lightgreen;
}
#main {
border: .1em solid blue;
background-color: lightblue;
border-radius: 1em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
margin: 1em;
padding: 1em;
padding: 2em 1em 2em 1em;
}
.clear {
clear: both;
}
#msgs .msg {
border: 1px solid black;
margin: 1ex;
padding: 1ex;
border-radius: 2ex;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
}
#msgs .me {
float: left;
}
#msgs .other {
float: right;
}
#msgs .msg .header {
border-bottom: 1px solid black;
margin-bottom: .25ex;
padding-bottom: .25ex;
position: relative;
height: 1em;
}
#msgs .msg .header .date {
font-size: xx-small;
float: left;
/*position: absolute;
left: 0;*/
}
#msgs .msg .header .sender {
font-size: small;
float: right;
/*position: absolute;
right: 0;*/
}
#msgs .msg .text {
float: left;
}

34
html/safechat.js
View File

@@ -59,7 +59,9 @@ function status(text, msg) {
$("#main").fadeOut("slow", function() {
$("#main").html(text);
success(msg);
$("#main").fadeIn("slow");
$("#main").fadeIn("slow", function() {
$("form input:first-child").focus();
})
});
}
@@ -174,18 +176,19 @@ function get() {
if (privkey.decrypt(password))
openpgp.decryptAndVerifyMessage(privkey, key.keys, message)
.then(function(msg) {
$("#msgs")
.prepend("<tr><td>"
+e["id"]
+"</td><td>"
+(new Date(1000*Number(e["time"]))).toLocaleString()
+'</td><td><a href="javascript:void(0)" onclick="setreceiver(this.innerHTML)">'
+e["user"]
+"</a></td><td>"
+(msg.signatures[0].valid?"✔":"✘")
+'</td><td class="msg">'
+msg.text
+"</td></tr>");
$("#msgs") // todo: check msg.signatures[0].valid
.prepend('<div id="id'+(e["id"])+'" class="msg '+
(e["user"]==userid()?"me":"other")+
'"><div class="header">'+
'<span class="date">'+
(new Date(1000*Number(e["time"]))).toLocaleString()+
'</span><span class="sender">'+
'<a href="javascript:void(0)" onclick="setreceiver(this.innerHTML)">'+
e["user"]+
'</a></span></div><div class="text">'+
msg.text+
'</div></div><div class="clear"/>');
$('#id'+(e["id"])).emoticonize();
if (!beeped)
(new Audio("A-Tone-His_Self-1266414414.mp3"))
.play();
@@ -200,7 +203,6 @@ function get() {
});
});
}
if (beeped) $(".msg").emoticonize(); // only if new messages added
setTimeout(get, 10000);
}).fail(error);
}
@@ -243,8 +245,8 @@ function setpw(pwd) {
function getpwd() {
status('<form>'+
' <label for="pwd">password for '+userid()+':</label>'+
' <input id="pwd" oninput="setpw(this.value)" type="password" autofocus/>'+
' <input placeholder="password for '+userid()+
'" id="pwd" oninput="setpw(this.value)" type="password" />'+
'</form>');
}