$ git clone https://socialnetwork.ion.nu/socialnetwork-web.git
commit c4b6d85edefeccb5fef4985c129ed59573c6400c
Author: Alicia <...>
Date: Sun Jun 18 21:15:23 2017 +0000
Some improvements/progress on the GUI.
diff --git a/websocial.css b/websocial.css
new file mode 100644
index 0000000..de10c55
--- /dev/null
+++ b/websocial.css
@@ -0,0 +1,49 @@
+body{margin:0;}
+div.modal
+{
+ position:absolute;
+ top:50%;
+ left:50%;
+ transform:translate(-50%,-50%);
+ display:block;
+ border-style:solid;
+ border-color:#808080;
+ border-width:1px;
+ border-radius:10px;
+ padding-top:8px;
+ padding-bottom:8px;
+ width:60%;
+ text-align:center;
+ box-shadow:1px 1px 6px #808080;
+ background-color:#ffffff;
+}
+
+div.inline
+{
+ display:inline-block;
+ width:40%;
+}
+
+div.menu
+{
+ display:inline-block;
+ border-bottom-style:solid;
+ border-right-style:solid;
+ border-color:#808080;
+ border-width:1px;
+ box-shadow:1px 1px 3px #808080;
+ border-radius:0 0 8px 0px;
+ padding:5px;
+}
+div.menu>a
+{
+ border-left-style:solid;
+ border-left-color:#808080;
+ border-left-width:1px;
+ padding:5px;
+ color:#000000;
+}
+div.menu>a:nth-child(1)
+{
+ border-left-style:none;
+}
diff --git a/websocial.html b/websocial.html
index e60a707..7688bf3 100644
--- a/websocial.html
+++ b/websocial.html
@@ -1,11 +1,46 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
<head>
<title>SocialNetwork web client</title>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="libsocial.js"></script>
<script src="libsocialjs.js"></script>
+ <script src="websocial.js"></script>
+ <link rel="stylesheet" type="text/css" href="websocial.css" />
</head>
<body>
- <textarea id="privkey" placeholder="Paste your private key here"></textarea><br />
- <button onclick="init(document.getElementById('privkey').value);">Log in</button>
+ <!-- Login/register -->
+ <div class="modal" id="login_window">
+ <div id="login_privkey" style="display:none;">
+ Paste your private key below, or leave empty to generate a new key<br />
+ <textarea id="privkey"></textarea><br />
+ Note: generating a key takes a while, you may need to tell your browser to let the script continue.<br />
+ <button onclick="initgui();">Continue</button>
+ </div>
+ <div id="login_account" style="display:none;">
+ TODO: Implement server accounts<br />
+ Username:<input type="text" id="login_user" /><br />
+ Password:<input type="password" id="login_pass" /><br />
+ <button>Login</button>
+ <button>Register</button>
+ </div>
+ <div id="login_select">
+ Please choose how to login/create an account/key<br />
+ <div class="inline">
+ <button onclick="chdisplay('login_select','login_account');">Account on the server</button><br />
+ The simple option. TODO: link for details
+ </div>
+ <div class="inline">
+ <button onclick="chdisplay('login_select','login_privkey');">Private key file</button><br />
+ Use a private key file that you yourself are responsible for.
+ </div>
+ </div>
+ </div>
+ <!-- Main interface -->
+ <div class="menu">
+ <a href="#">Feed</a><a href="#">Friends</a><a href="#">Self</a>
+ </div>
+ <div id="display"></div>
</body>
</html>
diff --git a/websocial.js b/websocial.js
new file mode 100644
index 0000000..c67523d
--- /dev/null
+++ b/websocial.js
@@ -0,0 +1,17 @@
+function chdisplay(old,newview)
+{
+ if(old){document.getElementById(old).style.display='none';}
+ if(newview){document.getElementById(newview).style.display='block';}
+}
+
+function initgui()
+{
+ var key=document.getElementById('privkey').value;
+ init(key);
+ chdisplay('login_window',false);
+ if(key=='')
+ {
+// TODO: get the generated key and hand it to the user (as text or fileblob? or both?)
+ }
+// TODO: display any updates we may have (actually we probably won't have any yet, update when we get them, callback for 'updates' command?)
+}