206 lines
9.4 KiB
Plaintext
206 lines
9.4 KiB
Plaintext
|
<!DOCTYPE HTML>
|
||
|
|
<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="stylesheets/safechat.css" rel="stylesheet" type="text/css" />
|
||
|
|
<script type="text/javascript" src="javascripts/jquery.js"></script>
|
||
|
|
<script type="text/javascript" src="javascripts/openpgp.js"></script>
|
||
|
|
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
|
||
|
|
<script type="text/javascript" src="javascripts/safechat.js"></script>
|
||
|
|
<link href="stylesheets/jquery.cssemoticons.css" media="screen" rel="stylesheet" type="text/css" />
|
||
|
|
<script src="javascripts/jquery.cssemoticons.js" type="text/javascript"></script>
|
||
|
|
<title>Safe Chat</title>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="header" class="header">
|
||
|
|
<h1>Safe Chat @PACKAGE_VERSION@</h1>
|
||
|
|
<div id="togglemenu">
|
||
|
|
<span id="username">[unknown]</span>
|
||
|
|
<span id="connectionstatus">
|
||
|
|
<span id="good" title="connected" style="display: none">✔</span>
|
||
|
|
<span id="bad" title="disconnected">✘</span>
|
||
|
|
</span>
|
||
|
|
<img id="menuicon" onclick="togglemenu()" src="images/menu.svg" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul id="menu" style="display: none">
|
||
|
|
<li onclick="backup()">Download Backup</li>
|
||
|
|
<li class="toolbutton"><label for="restore">Restore Backup</label><input autocomplete="off" type="file" accept="*.bak" id="restore" /></li>
|
||
|
|
<li id="groups" onclick="groups()">Edit Groups</li>
|
||
|
|
<li id="removeKey" style="display: none" onclick="removeKey()">Password Forgotten</li>
|
||
|
|
<li id="android-download" href="safechat.apk"><a href="safechat.apk">Download Android-App</a></li>
|
||
|
|
<li href="<%= projecturl %>" target="_blank"><a href="<%= projecturl %>" target="_blank">About Safe Chat</a></li>
|
||
|
|
</ul>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(function() { // on load: without cordova, remove andoid-download
|
||
|
|
if ("@CORDOVA@" == "0") $("#android-download").hide();
|
||
|
|
if (!window.FileReader) $("#restore").hide(); // not supported by browser
|
||
|
|
$("#groups").hide();
|
||
|
|
})
|
||
|
|
$("#restore").change(function(evt){restore(evt)});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div id="main">
|
||
|
|
|
||
|
|
<div id="newuser" style="display: none">
|
||
|
|
<h2>Register User</h2>
|
||
|
|
<p>All you need to start is a username and a password:</p>
|
||
|
|
<form id="register">
|
||
|
|
<input placeholder="username" type="text" id="user"/>
|
||
|
|
<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>
|
||
|
|
<script>
|
||
|
|
$("#user").on("input", function() {
|
||
|
|
console.log("query user: "+$('#user').val());
|
||
|
|
socket.emit("user", $('#user').val());
|
||
|
|
});
|
||
|
|
$("#register").submit(function(event) {
|
||
|
|
createkeypair(event.target.elements['user'].value,
|
||
|
|
event.target.elements['pwd'].value);
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<p>Please chose any username, e.g. a pseudonym, your e-mail,
|
||
|
|
your phone number, your real name, and chose a safe
|
||
|
|
password.</p>
|
||
|
|
<h2>What is Safe Chat?</h2>
|
||
|
|
<p>Safe Chat is a chat program to protect your privacy. It is
|
||
|
|
designed to be extremely easy to use, with all cool features,
|
||
|
|
but with highest security through strong encryption. For more
|
||
|
|
information, open «About Safe Chat» in the menu
|
||
|
|
(<img style="height: 1em; border: 2px solid green;
|
||
|
|
vertical-align: text-bottom; background-color: green"
|
||
|
|
src="images/menu.svg" />) above.</p>
|
||
|
|
<h2>Never forget your Password!</h2>
|
||
|
|
<p>This messenger is absolutely secure. But on the other hand,
|
||
|
|
that means, no one except you knows your password. No one can
|
||
|
|
read your messages exept you, not even our administrator. It
|
||
|
|
is technically impossible to restore a password. You would
|
||
|
|
have to delete your account and create a new one. In that
|
||
|
|
case, all messages are lost.</p>
|
||
|
|
<h3>Keys and Password</h3>
|
||
|
|
<p>Safe Chat internally uses OpenPGP for public/private-key
|
||
|
|
encryption. Your password is not transfered to the server and
|
||
|
|
not stored, it is used only to create and encrypt your private
|
||
|
|
key. There are two keys, a secret private key, that is stored
|
||
|
|
in the browser (or app) on your computer, encrypted with your
|
||
|
|
password and not sent to the server. There is also public key,
|
||
|
|
which is sent to the server and used by other users to encrypt
|
||
|
|
messages that only you can read. You can backup and restore
|
||
|
|
your keys and setings to and from a file. This is the only way
|
||
|
|
to transfer your account to another browser or to computer. Do
|
||
|
|
not delete your browser's local storage unless you have backed
|
||
|
|
up your keys.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="getpwd" style="display: none">
|
||
|
|
<form>
|
||
|
|
<input placeholder="please enter password" id="pwd" oninput="setpw(this.value)"
|
||
|
|
type="password" />
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="chat" style="display: none">
|
||
|
|
<div id="message">
|
||
|
|
<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"/>
|
||
|
|
<div class="buttongroup">
|
||
|
|
<span class="toolbutton">
|
||
|
|
<label for="photo"><img src="images/photo.svg"/></label>
|
||
|
|
<input autocomplete="off" type="file" accept="image/*" id="photo" multiple />
|
||
|
|
</span>
|
||
|
|
<!--
|
||
|
|
<span class="toolbutton">
|
||
|
|
<label for="video"><img src="images/video.svg"/></label>
|
||
|
|
<input autocomplete="off" type="file" accept="video/*" id="video"/>
|
||
|
|
</span>
|
||
|
|
<span class="toolbutton">
|
||
|
|
<label for="audio"><img src="images/audio.svg"/></label>
|
||
|
|
<input autocomplete="off" type="file" accept="audio/*" id="audio"/>
|
||
|
|
</span>
|
||
|
|
<span class="toolbutton">
|
||
|
|
<label for="file"><img src="images/attachment.svg"/></label>
|
||
|
|
<input autocomplete="off" type="file" id="file"/>
|
||
|
|
</span>
|
||
|
|
-->
|
||
|
|
<span class="toolbutton">
|
||
|
|
<label for="send"><img src="images/send.svg"/></label>
|
||
|
|
<input type="submit" id="send" disabled/>
|
||
|
|
</span>
|
||
|
|
<span class="toolbutton">
|
||
|
|
<label for="reset"><img src="images/abort.svg" /></label>
|
||
|
|
<input type="reset" id="reset" onclick="clearmessage();" />
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
<div id="preview"></div>
|
||
|
|
</div>
|
||
|
|
<div id="msgs"></div>
|
||
|
|
<script>
|
||
|
|
$("#file,#photo,#audio,#video").change(function(evt){fileupload(evt)});
|
||
|
|
if (!window.FileReader) $("#file,#photo,#audio,#video").hide(); // not supported by browser
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="forgotpassword" style="display: none">
|
||
|
|
<h2>Password Forgotten</h2>
|
||
|
|
<div class="warning"><strong>Warning!</strong>
|
||
|
|
<ul>
|
||
|
|
<li>You loose all messages.</li>
|
||
|
|
<li>You loose your account name.</li>
|
||
|
|
<li>You should backup now, before you continue!</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<p>You can only remove your local data. You will have to
|
||
|
|
create a new account with a new name on the server. This
|
||
|
|
means, you loose all your messages and you loose your
|
||
|
|
account name forever. This chat program is secure, nobody
|
||
|
|
can restore your password. Without password, you can't
|
||
|
|
decrypt your messages.</p>
|
||
|
|
<div class="buttongroup">
|
||
|
|
<p class="toolbutton bad" onclick="deleteUser()">
|
||
|
|
Yes, I really forgot my password.<br/>
|
||
|
|
I want to loose my data to get a new account.</p>
|
||
|
|
<p class="toolbutton good" onclick="start()">
|
||
|
|
No, bring me back!.<br/>
|
||
|
|
I'll try to remember my password.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<noscript>
|
||
|
|
<h2>JavasScript Required!</h2>
|
||
|
|
<p>This is a secure and encryptet chat application, that runs
|
||
|
|
in your browser and does not send any credentials to the
|
||
|
|
server. Your password and your secret key are fully under
|
||
|
|
your control. That's why you must enable javascript and
|
||
|
|
local storage for this application.</p>
|
||
|
|
<p><a href="<%= projecturl %>" target="_blank">more information</a></p>
|
||
|
|
</noscript>
|
||
|
|
|
||
|
|
<div id="nolocalstorage" style="display: none">
|
||
|
|
<p>No access to local storage. Please allow access to local
|
||
|
|
storage, i.e. do not block cookies.<p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="allmessages" style="display: none">
|
||
|
|
<p>Setting up all previous messages, please wait …</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="startup">
|
||
|
|
<p>Starting up …</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="status"></div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|