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)"> <form id="chat" autocomplete="off" 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/> <input placeholder="receiver" autocomplete="off" type="text" id="recv" oninput="checkpartner(this.value)" />
<label for="msg">message:</label> <input type="text" id="msg"/> <input placeholder="message" autocomplete="off" type="text" id="msg"/>
<input type="submit" id="send" disabled/> <input type="submit" id="send" disabled/>
</form> </form>
<table id="msgs"></table> <div id="msgs"></div>

5
html/index.html
View File

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

12
html/newuser.html
View File

@@ -1,10 +1,8 @@
<h2>Create New User (Step 1 of 1)</h2> <h2>Register 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>
<form id="register" onsubmit="createNewUser(this.elements['user'].value, this.elements['pwd'].value)"> <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/> <input placeholder="user name" type="text" id="user" oninput="checkuser(this.value)"/>
<label for="pwd">Password:</label><input type="password" id="pwd" oninput="checkpwd(this.value, document.getElementById('pwd2').value)"/> <input placeholder="password" 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="repeat password" type="password" id="pwd2" oninput="checkpwd(document.getElementById('pwd').value, this.value)"/>
<input id="createuser" type="submit" disabled/> <input id="createuser" type="submit" disabled/>
</form> </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>Please chose any username, e.g. a pseudonym, your e-mail, your phone number, your real name, and chose a safe password.</p>
<p>Be careful: You won't be able to change the user name, nor the password later.</p>

112
html/safechat.css
View File

@@ -3,8 +3,62 @@
padding: 0; 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 { #status {
position: absolute; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
@@ -12,6 +66,13 @@
padding: 0 1em 0 1em; padding: 0 1em 0 1em;
text-align: right; text-align: right;
} }
@media (min-width: 45em) {
#status {
bottom: auto;
left: auto;
top: 0;
}
}
#status.error { #status.error {
background-color: lightred; background-color: lightred;
} }
@@ -21,12 +82,47 @@
#status.success { #status.success {
background-color: lightgreen; background-color: lightgreen;
} }
#main { #main {
border: .1em solid blue; padding: 2em 1em 2em 1em;
background-color: lightblue; }
border-radius: 1em;
-webkit-border-radius: 1em; .clear {
-moz-border-radius: 1em; clear: both;
margin: 1em; }
padding: 1em; #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").fadeOut("slow", function() {
$("#main").html(text); $("#main").html(text);
success(msg); success(msg);
$("#main").fadeIn("slow"); $("#main").fadeIn("slow", function() {
$("form input:first-child").focus();
})
}); });
} }
@@ -174,18 +176,19 @@ function get() {
if (privkey.decrypt(password)) if (privkey.decrypt(password))
openpgp.decryptAndVerifyMessage(privkey, key.keys, message) openpgp.decryptAndVerifyMessage(privkey, key.keys, message)
.then(function(msg) { .then(function(msg) {
$("#msgs") $("#msgs") // todo: check msg.signatures[0].valid
.prepend("<tr><td>" .prepend('<div id="id'+(e["id"])+'" class="msg '+
+e["id"] (e["user"]==userid()?"me":"other")+
+"</td><td>" '"><div class="header">'+
+(new Date(1000*Number(e["time"]))).toLocaleString() '<span class="date">'+
+'</td><td><a href="javascript:void(0)" onclick="setreceiver(this.innerHTML)">' (new Date(1000*Number(e["time"]))).toLocaleString()+
+e["user"] '</span><span class="sender">'+
+"</a></td><td>" '<a href="javascript:void(0)" onclick="setreceiver(this.innerHTML)">'+
+(msg.signatures[0].valid?"✔":"✘") e["user"]+
+'</td><td class="msg">' '</a></span></div><div class="text">'+
+msg.text msg.text+
+"</td></tr>"); '</div></div><div class="clear"/>');
$('#id'+(e["id"])).emoticonize();
if (!beeped) if (!beeped)
(new Audio("A-Tone-His_Self-1266414414.mp3")) (new Audio("A-Tone-His_Self-1266414414.mp3"))
.play(); .play();
@@ -200,7 +203,6 @@ function get() {
}); });
}); });
} }
if (beeped) $(".msg").emoticonize(); // only if new messages added
setTimeout(get, 10000); setTimeout(get, 10000);
}).fail(error); }).fail(error);
} }
@@ -243,8 +245,8 @@ function setpw(pwd) {
function getpwd() { function getpwd() {
status('<form>'+ status('<form>'+
' <label for="pwd">password for '+userid()+':</label>'+ ' <input placeholder="password for '+userid()+
' <input id="pwd" oninput="setpw(this.value)" type="password" autofocus/>'+ '" id="pwd" oninput="setpw(this.value)" type="password" />'+
'</form>'); '</form>');
} }