profile download implemented; closes #15

html/index.html.in

@@ -16,7 +16,16 @@
 
 <div id="header">
   <h1>Safe Chat @PACKAGE_VERSION@</h1>
+  <div id="togglemenu">
+    <span id="username">[unknown]</span>
+    <img onclick="togglemenu()" src="menu.svg" />
   </div>
+</div>
+
+<ul id="menu" style="display: none">
+  <li onclick="backup()">Backup</li>
+  <li onclick="restore()">Restore</li>
+</ul>
 
 <div id="main">
 

html/menu.svg

@@ -4,8 +4,8 @@
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="27px" height="20px" viewBox="0 0 27 20" enable-background="new 0 0 27 20" xml:space="preserve">
 <g>
-	<rect fill="#4D4D4D" width="27" height="4"/>
+	<rect fill="#FFFFFF" width="27" height="4"/>
-	<rect y="8" fill="#4D4D4D" width="27" height="4"/>
+	<rect y="8" fill="#FFFFFF" width="27" height="4"/>
-	<rect y="16" fill="#4D4D4D" width="27" height="4"/>
+	<rect y="16" fill="#FFFFFF" width="27" height="4"/>
 </g>
 </svg>

html/safechat.css

@@ -75,9 +75,14 @@ td:last-child {
   background-color: green;
   color: white;
 }
+#header #togglemenu {
+  display: inline;
+  float: right;
+}
 #header h1 {
   font-weight: bold;
   font-size: 100%;
+  display: inline;
 }
 
 #status {
@@ -89,11 +94,9 @@ td:last-child {
   padding: 0 1em 0 1em;
   text-align: right;
 }
-@media (min-width: 45em) {
+@media (max-width: 45em) {
-  #status {
+  #username {
-    bottom: auto;
+    display: none;
-    left: auto;
-    top: 0;
   }
 }
 #status.error {
@@ -109,8 +112,28 @@ td:last-child {
   color: black;
 }
 
+#menu {
+  clear: both;
+  padding: 2em 0em 1em 0em;
+  margin: 0 1em 0 1em;
+  float: right;
+  background-color: lightblue;
+  list-style-type: none;
+  border: 1px solid black;
+}
+#menu li {
+  padding: 0 1em 0 1em;
+  cursor: pointer;
+}
+#menu li + li {
+  border-top: 1px solid black;
+  margin-top: 0.5em;
+  padding-top: 0.5em;
+}
+
 #main {
   padding: 2em 1em 2em 1em;
+  clear: both;
 }
 
 .clear {

html/safechat.js

@@ -132,6 +132,33 @@ function alert() {
     (new Audio("A-Tone-His_Self-1266414414.mp3")).play();
 }
 
+/// Toggle Menu Display
+function togglemenu() {
+    $("#menu").toggle();
+}
+
+/// Download Profile Backup
+function backup() {
+    status("<p>Starting Download...</p>");
+    var download = document.createElement('a');
+    download.href = 'data:attachment/text,'+encodeURI(JSON.stringify(localStorage));
+    download.target = '_blank';
+    function pad(n) {return n<10 ? '0'+n : n}
+    var now = new Date();
+    download.download =
+        pad(now.getFullYear())+pad(now.getMonth()+1)+pad(now.getDate())+
+        "-safechat.bak";
+    var clickEvent = new MouseEvent("click", {
+        "view": window,
+        "bubbles": true,
+        "cancelable": false
+    });
+    download.dispatchEvent(clickEvent);
+    status("<p>Download:</p><pre>"+download.outerHTML.replace("<", "&lt;")+"</pre>");
+    togglemenu();
+    setTimeout(start, 20000);
+}
+
 /// Check if user name is available
 /** Calls checknewuser.php on server and displays an error, if the
     user name is already in use. This function is used when creating a
@@ -484,6 +511,7 @@ function getpwd() {
     get() which polls for new messages. */
 function chat() {
     if (!password) return getpwd();
+    $("#username").html(userid()+"@safechat.ch");
     $.ajax({url: "chat.html", success: function(res) {
         status(res);
         setTimeout(get, 2000);