<!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/jquery.min.js"></script>
    <script type="text/javascript" src="openpgp/openpgp.min.js"></script>
    <script type="text/javascript" src="openpgp/openpgp.worker.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 <%= packageversion %></h1>
      <div id="togglemenu">
        <span id="username">[unknown]</span>
        <span id="connectionstatus">
          <span id="good" title="connected" style="display: none">&#x2714;</span>
          <span id="bad" title="disconnected">&#x2718;</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">

      <!--                                                            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)"/>
          <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>

      <!--                                                               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>

      <!--                                                    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="<%= projecturl %>" target="_blank">more information</a></p>
      </noscript>

      <!--                                                  Error: Missing LocalStorage -->
      <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>

      <!--                                                       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>
