<!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="jquery.min.js"></script>
<script type="text/javascript" src="openpgp.min.js"></script>
<script type="text/javascript" src="socket.io/socket.io.js"></script>
<script type="text/javascript" src="javascripts/mediarecorder.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/ext/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 id="restore-menu-item" 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="<%= package.documentation %>" target="_blank"><a href="<%= package.documentation %>" 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">
<!-- Register New User -->
<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" autocomplete="off">
<input placeholder="username" autocomplete="off" type="text" id="user"/>
<input placeholder="password" autocomplete="off" type="password" id="pwd" oninput="checkpwd(this.value, document.getElementById('pwd2').value)"/>
<input placeholder="repeat password" autocomplete="off" type="password" id="pwd2" oninput="checkpwd(document.getElementById('pwd').value, this.value)"/>
<button id="createuser" disabled>register</button>
</form>
<script>
$("#user").on("input", function() {
queryuser($('#user').val());
});
$("#createuser").on("click", function(event) {
createkeypair($('#user').val(), $('#pwd').val());
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>
<!-- Enter Password -->
<div id="getpwd" style="display: none">
<form autocomplete="off">
<input placeholder="please enter password" autocomplete="off" id="pwd" oninput="setpw(this.value)"
type="password" />
</form>
</div>
<!-- Chat Screen -->
<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" list="allusers" id="recv" oninput="checkpartner(this.value)" />
<datalist id="allusers"></datalist>
<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 id="video" type="button" onclick="recordvideo()"/>
<!--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="videorecorder" style="display: none">
<video autoplay muted></video><br/>
<button id="done" onclick="done()">done</button>
<button id="abort" onclick="abort()">abort</button>
</div>
<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>
<!-- Password Forgotten -->
<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>
<!-- Fatal: Abort -->
<div id="fatal">
<h2 id="fatal-msg">Failure</h2>
<p>The SafeChat has been aborted due to a fatal error.</p>
<p>There is a problem in your browser. Please try to reload. If the problem persists, please update your web browser or try SafeChat in another browser.</p>
<p>The following java script features are required:</p>
<ul class="features">
<li id="localstorage">Local Storage</li>
<li id="indexeddb">Indexed DB</li>
<li id="randomvalues">Cryptography: Random Values</li>
</ul>
<p>The following java script features are optional:</p>
<ul class="features">
<li id="vibrate">Vibration (vibrates when new message arrives)</li>
<li id="filereader">File Reader (required to restore backup)</li>
</ul>
</div>
<!-- Error: Missing JavaScript -->
<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="<%= package.documentation %>" target="_blank">more information</a></p>
</noscript>
<!-- Notice: Setup Messages -->
<div id="allmessages" style="display: none">
<p>Setting up all previous messages, please wait …</p>
</div>
<!-- Notice: Startup -->
<div id="startup">
<p>Starting up …</p>
</div>
</div>
<div id="status"></div>
</body>
</html>
