Complete first part of work on onionrui

2018-09-02 22:08:12 -07:00 · 2018-09-02 22:08:12 -07:00 · ecefa41792
parent b01184d151
commit ecefa41792
15 changed files with 797 additions and 103 deletions
--- a/onionr/api.py
+++ b/onionr/api.py
@ -250,7 +250,7 @@ class API:
                    response = siteData.split(b'-', 2)[-1]
                resp = Response(response)
            elif action == 'info':
-                resp = new Response(json.dumps({'id' : 'not yet implemented'}))
+                resp = Response(json.dumps({'pubkey' : self._core._crypto.pubKey, 'host' : self._core.hsAdder}))
            elif action == "insertBlock":
                response = {'success' : False, 'reason' : 'An unknown error occurred'}

--- a/onionr/static-data/bootstrap-nodes.txt
+++ b/onionr/static-data/bootstrap-nodes.txt
@ -1,2 +1,3 @@
 onionragxuddecmg.onion
 dgyllprmtmym4gbk.onion
+eczfevdpirhvbniy.onion
--- a/onionr/static-data/www/ui/common/default-icon.html
+++ b/onionr/static-data/www/ui/common/default-icon.html
--- a/onionr/static-data/www/ui/common/footer.html
+++ b/onionr/static-data/www/ui/common/footer.html
@ -1,4 +1,19 @@
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<!-- Modal -->
+        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="modal-title"><$= LANG.MODAL_TITLE $></h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body" id="modal-content"><$= LANG.MODAL_MESSAGE $></div>
+                </div>
+            </div>
+        </div>
+
+        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script src="js/main.js"></script>
--- a/onionr/static-data/www/ui/dist/css/main.css
+++ b/onionr/static-data/www/ui/dist/css/main.css
@ -60,6 +60,35 @@ body {
    width: 100%;
 }

+.onionr-post-creator {
+    padding: 1rem;
+    margin-bottom: 1rem;
+
+    width: 100%;
+}
+
+.onionr-post-creator-user-name {
+    display: inline;
+}
+
+.onionr-post-creator-user-id:before { content: "("; }
+.onionr-post-creator-user-id:after { content: ")"; }
+
+.onionr-post-creator-content {
+    word-wrap: break-word;
+    width: 100%;
+}
+
+.onionr-post-creator-user-icon {
+    border-radius: 100%;
+    width: 100%;
+}
+
+.onionr-post-creator-create {
+    width: 100%;
+    text-align: center;
+}
+
 .h-divider {
    margin: 5px 15px;
    height: 1px;
@ -77,3 +106,7 @@ body {
 .onionr-profile-username {
    text-align: center;
 }
+
+.onionr-profile-save {
+    width: 100%;
+}
--- a/onionr/static-data/www/ui/dist/css/themes/dark.css
+++ b/onionr/static-data/www/ui/dist/css/themes/dark.css
@ -31,6 +31,35 @@ body {
    font-size: 15pt;
 }

+.onionr-post-creator {
+    border: 1px solid black;
+    border-radius: 1rem;
+
+    background-color: lightgray;
+}
+
+.onionr-post-creator-user-name {
+    color: green;
+    font-weight: bold;
+}
+
+.onionr-post-creator-user-id {
+    color: gray;
+}
+
+.onionr-post-creator-date {
+    color: gray;
+}
+
+.onionr-post-creator-content {
+    font-family: sans-serif, serif;
+    border-top: 1px solid black;
+    font-size: 15pt;
+    background-color: lightgray;
+    color: black;
+    border-width: 0px;
+}
+
 .h-divider {
    border-top:1px solid gray;
 }
--- a/onionr/static-data/www/ui/dist/index.html
+++ b/onionr/static-data/www/ui/dist/index.html
@ -40,10 +40,16 @@
                    <div class="onionr-profile">
                        <div class="row">
                            <div class="col-4 col-lg-12">
-                                <img id="onionr-profile-user-icon" class="onionr-profile-user-icon" src="img/default.png">
+                                <img id="onionr-profile-user-icon" class="onionr-profile-user-icon" src="">
                            </div>
                            <div class="col-8 col-lg-12">
-                                <h2 id="onionr-profile-username" class="onionr-profile-username text-left text-lg-center text-sm-left" data-placement="top" data-toggle="tooltip" title="unknown">arinerron</h2>
+                                <h2 id="onionr-profile-username" class="onionr-profile-username text-left text-lg-center text-sm-left" data-placement="top" data-toggle="tooltip" title="unknown" data-editable></h2>
+                            </div>
+                            <div class="col-sm-6 col-lg-12">
+                                <input type="button" onclick="updateUser()" class="onionr-profile-save text-center" id="onionr-profile-save" value="Save" style="display: none" />
+                            </div>
+                            <div class="col-sm-6 col-lg-12">
+                                <input type="button" onclick="cancelUpdate()" class="onionr-profile-save text-center" id="onionr-profile-cancel" value="Cancel" style="display: none" />
                            </div>
                        </div>
                    </div>
@ -52,6 +58,32 @@
                <div class="h-divider pb-3 d-block d-lg-none"></div>

                <div class="col-sm-12 col-lg-6">
+                    <div class="row" id="onionr-timeline-post-creator">
+                        <!-- POST -->
+                        <div class="col-12">
+                            <div class="onionr-post-creator">
+                                <div class="row">
+                                    <div class="col-2">
+                                        <img class="onionr-post-creator-user-icon" id="onionr-post-creator-user-icon">
+                                    </div>
+                                    <div class="col-10">
+                                        <div class="row">
+                                            <div class="col col-auto">
+                                                <a class="onionr-post-creator-user-name" id="onionr-post-creator-user-name" href="#!" onclick="viewProfile('$user-id-url', '$user-name-url')"></a>
+                                                <a class="onionr-post-creator-user-id" id="onionr-post-creator-user-id" href="#!" onclick="viewProfile('$user-id-url', '$user-name-url')" data-placement="top" data-toggle="tooltip" title="$user-id">you</a>
+                                            </div>
+                                        </div>
+
+                                        <textarea class="onionr-post-creator-content" id="onionr-post-creator-content"></textarea>
+
+                                        <input type="button" onclick="makePost()" title="Create post" value="Create post" id="onionr-post-creator-create" class="onionr-post-creator-create" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- END POST -->
+                    </div>
+
                    <div class="row" id="onionr-timeline-posts">

                    </div>
@ -69,6 +101,21 @@
            </div>
        </div>

+        <!-- Modal -->
+        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="modal-title">Loading...</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body" id="modal-content">Onionr has begun performing a CPU-intensive operation. If this operation does not complete in the next 10 seconds, try reloading the page.</div>
+                </div>
+            </div>
+        </div>
+
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
--- a/onionr/static-data/www/ui/dist/js/main.js
+++ b/onionr/static-data/www/ui/dist/js/main.js
--- a/onionr/static-data/www/ui/dist/js/timeline.js
+++ b/onionr/static-data/www/ui/dist/js/timeline.js
@ -1,35 +1,3 @@
-function getUserInfo(id, callback) {
-    var user = deserializeUser(id);
-    if(user === null) {
-        Block.getBlocks({'type' : 'onionr-user-info', 'signed' : true, 'reverse' : true}, function(data) {
-            if(data.length !== 0) {
-                try {
-                    user = new User();
-
-                    var userInfo = JSON.parse(data[0].getContent());
-
-                    if(userInfo['id'] === id) {
-                        user.setName(userInfo['name']);
-                        user.setIcon(userInfo['icon']);
-                        user.setID(id);
-
-                        serializeUser(user);
-
-                        return callback(user);
-                    }
-                } catch(e) {
-                    console.log(e);
-                    return callback(null);
-                }
-            } else {
-                return callback(null);
-            }
-        });
-    } else {
-        return callback(user);
-    }
-}
-
 /* just for testing rn */
 Block.getBlocks({'type' : 'onionr-post', 'signed' : true, 'reverse' : true}, function(data) {
    for(var i = 0; i < data.length; i++) {
@ -37,7 +5,7 @@ Block.getBlocks({'type' : 'onionr-post', 'signed' : true, 'reverse' : true}, fun
            var block = data[i];

            var finished = false;
-            getUserInfo(new String(block.getHeader('signer', 'unknown')), function(user) {
+            User.getUser(new String(block.getHeader('signer', 'unknown')), function(user) {
                var post = new Post();

                var blockContent = JSON.parse(block.getContent());
@ -53,6 +21,7 @@ Block.getBlocks({'type' : 'onionr-post', 'signed' : true, 'reverse' : true}, fun

            while(!finished);
        } catch(e) {
+            console.log('Troublemaker block: ' + data[i].getHash());
            console.log(e);
        }
    }
@ -62,11 +31,97 @@ function viewProfile(id, name) {
    id = decodeURIComponent(id);
    document.getElementById("onionr-profile-username").innerHTML = Sanitize.html(decodeURIComponent(name));

-    getUserInfo(id, function(data) {
+    User.getUser(id, function(data) {
        if(data !== null) {
            document.getElementById("onionr-profile-username").innerHTML = Sanitize.html(data.getName());
            document.getElementById("onionr-profile-username").title = Sanitize.html(data.getID());
            document.getElementById("onionr-profile-user-icon").src = "data:image/jpeg;base64," + Sanitize.html(data.getIcon());
+            document.getElementById("onionr-profile-user-icon").b64 = Sanitize.html(data.getIcon());
        }
    });
 }
+
+function updateUser() {
+    toggleSaveButton(false);
+
+    jQuery('#modal').modal('show');
+
+    var name = jQuery('#onionr-profile-username').text();
+    var id = document.getElementById("onionr-profile-username").title;
+    var icon = document.getElementById("onionr-profile-user-icon").b64;
+    var description = 'todo';
+
+    var user = new User();
+
+    user.setName(name);
+    user.setID(id);
+    user.setIcon(icon);
+    user.setDescription(description);
+
+    user.remember();
+    user.save();
+
+    window.location.reload();
+}
+
+function cancelUpdate() {
+    toggleSaveButton(false);
+
+    var name = jQuery('#onionr-profile-username').text();
+    var id = document.getElementById("onionr-profile-username").title;
+
+    viewProfile(id, name);
+}
+
+function toggleSaveButton(show) {
+    document.getElementById("onionr-profile-save").style.display = (show ? 'block' : 'none');
+    document.getElementById("onionr-profile-cancel").style.display = (show ? 'block' : 'none');
+}
+
+function makePost() {
+    var content = document.getElementById("onionr-post-creator-content").value;
+
+    var post = new Post();
+
+    post.setUser(getCurrentUser());
+    post.setContent(content);
+    post.setPostDate(new Date());
+
+    post.save(function(data) {}); // async, but no function
+
+    document.getElementById('onionr-timeline-posts').innerHTML = post.getHTML() + document.getElementById('onionr-timeline-posts').innerHTML;
+
+    document.getElementById("onionr-post-creator-content").value = "";
+}
+
+$('body').on('click', '[data-editable]', function() {
+    var el = jQuery(this);
+    var txt = el.text();
+
+    var input = jQuery('<input/>').val(txt);
+    el.replaceWith(input);
+
+    var save = function() {
+        var newTxt = input.val();
+        var p = el.text(Sanitize.username(newTxt));
+        input.replaceWith(p);
+
+        if(newTxt !== txt)
+            toggleSaveButton(true);
+    };
+
+    input.one('blur', save).focus();
+});
+
+document.getElementById("onionr-post-creator-user-name").innerHTML = Sanitize.html(currentUser.getName());
+document.getElementById("onionr-post-creator-user-id").innerHTML = "you";
+document.getElementById("onionr-post-creator-user-icon").src = "data:image/jpeg;base64," + Sanitize.html(currentUser.getIcon());
+document.getElementById("onionr-post-creator-user-id").title = currentUser.getID();
+document.getElementById("onionr-post-creator-content").placeholder = "Enter a message here...";
+
+viewCurrentProfile = function() {
+    viewProfile(encodeURIComponent(currentUser.getID()), encodeURIComponent(currentUser.getName()));
+}
+
+document.getElementById("onionr-post-creator-user-id").onclick = viewCurrentProfile;
+document.getElementById("onionr-post-creator-user-name").onclick = viewCurrentProfile;
--- a/onionr/static-data/www/ui/lang.json
+++ b/onionr/static-data/www/ui/lang.json
@ -6,10 +6,21 @@
        "NOTIFICATIONS" : "Notifications",
        "MESSAGES" : "Messages",

+        "LATEST" : "Latest...",
        "TRENDING" : "Trending",

+        "MODAL_TITLE" : "Loading...",
+        "MODAL_MESSAGE" : "Onionr has begun performing a CPU-intensive operation. If this operation does not complete in the next 10 seconds, try reloading the page.",
+
        "POST_LIKE" : "like",
-        "POST_REPLY" : "reply"
+        "POST_REPLY" : "reply",
+
+        "POST_CREATOR_YOU" : "you",
+        "POST_CREATOR_PLACEHOLDER" : "Enter a message here...",
+        "POST_CREATOR_CREATE" : "Create post",
+
+        "PROFILE_EDIT_SAVE" : "Save",
+        "PROFILE_EDIT_CANCEL" : "Cancel"
    },

    "spa" : {
--- a/onionr/static-data/www/ui/src/css/main.css
+++ b/onionr/static-data/www/ui/src/css/main.css
@ -60,6 +60,35 @@ body {
    width: 100%;
 }

+.onionr-post-creator {
+    padding: 1rem;
+    margin-bottom: 1rem;
+
+    width: 100%;
+}
+
+.onionr-post-creator-user-name {
+    display: inline;
+}
+
+.onionr-post-creator-user-id:before { content: "("; }
+.onionr-post-creator-user-id:after { content: ")"; }
+
+.onionr-post-creator-content {
+    word-wrap: break-word;
+    width: 100%;
+}
+
+.onionr-post-creator-user-icon {
+    border-radius: 100%;
+    width: 100%;
+}
+
+.onionr-post-creator-create {
+    width: 100%;
+    text-align: center;
+}
+
 .h-divider {
    margin: 5px 15px;
    height: 1px;
@ -77,3 +106,7 @@ body {
 .onionr-profile-username {
    text-align: center;
 }
+
+.onionr-profile-save {
+    width: 100%;
+}
--- a/onionr/static-data/www/ui/src/css/themes/dark.css
+++ b/onionr/static-data/www/ui/src/css/themes/dark.css
@ -31,6 +31,35 @@ body {
    font-size: 15pt;
 }

+.onionr-post-creator {
+    border: 1px solid black;
+    border-radius: 1rem;
+
+    background-color: lightgray;
+}
+
+.onionr-post-creator-user-name {
+    color: green;
+    font-weight: bold;
+}
+
+.onionr-post-creator-user-id {
+    color: gray;
+}
+
+.onionr-post-creator-date {
+    color: gray;
+}
+
+.onionr-post-creator-content {
+    font-family: sans-serif, serif;
+    border-top: 1px solid black;
+    font-size: 15pt;
+    background-color: lightgray;
+    color: black;
+    border-width: 0px;
+}
+
 .h-divider {
    border-top:1px solid gray;
 }
--- a/onionr/static-data/www/ui/src/index.html
+++ b/onionr/static-data/www/ui/src/index.html
@ -10,10 +10,16 @@
                    <div class="onionr-profile">
                        <div class="row">
                            <div class="col-4 col-lg-12">
-                                <img id="onionr-profile-user-icon" class="onionr-profile-user-icon" src="img/default.png">
+                                <img id="onionr-profile-user-icon" class="onionr-profile-user-icon" src="">
                            </div>
                            <div class="col-8 col-lg-12">
-                                <h2 id="onionr-profile-username" class="onionr-profile-username text-left text-lg-center text-sm-left" data-placement="top" data-toggle="tooltip" title="unknown">arinerron</h2>
+                                <h2 id="onionr-profile-username" class="onionr-profile-username text-left text-lg-center text-sm-left" data-placement="top" data-toggle="tooltip" title="unknown" data-editable></h2>
+                            </div>
+                            <div class="col-sm-6 col-lg-12">
+                                <input type="button" onclick="updateUser()" class="onionr-profile-save text-center" id="onionr-profile-save" value="<$= LANG.PROFILE_EDIT_SAVE $>" style="display: none" />
+                            </div>
+                            <div class="col-sm-6 col-lg-12">
+                                <input type="button" onclick="cancelUpdate()" class="onionr-profile-save text-center" id="onionr-profile-cancel" value="<$= LANG.PROFILE_EDIT_CANCEL $>" style="display: none" />
                            </div>
                        </div>
                    </div>
@ -22,6 +28,32 @@
                <div class="h-divider pb-3 d-block d-lg-none"></div>

                <div class="col-sm-12 col-lg-6">
+                    <div class="row" id="onionr-timeline-post-creator">
+                        <!-- POST -->
+                        <div class="col-12">
+                            <div class="onionr-post-creator">
+                                <div class="row">
+                                    <div class="col-2">
+                                        <img class="onionr-post-creator-user-icon" id="onionr-post-creator-user-icon">
+                                    </div>
+                                    <div class="col-10">
+                                        <div class="row">
+                                            <div class="col col-auto">
+                                                <a class="onionr-post-creator-user-name" id="onionr-post-creator-user-name" href="#!" onclick="viewProfile('$user-id-url', '$user-name-url')"></a>
+                                                <a class="onionr-post-creator-user-id" id="onionr-post-creator-user-id" href="#!" onclick="viewProfile('$user-id-url', '$user-name-url')" data-placement="top" data-toggle="tooltip" title="$user-id">you</a>
+                                            </div>
+                                        </div>
+
+                                        <textarea class="onionr-post-creator-content" id="onionr-post-creator-content"></textarea>
+
+                                        <input type="button" onclick="makePost()" title="<$= LANG.POST_CREATOR_CREATE $>" value="<$= LANG.POST_CREATOR_CREATE $>" id="onionr-post-creator-create" class="onionr-post-creator-create" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- END POST -->
+                    </div>
+
                    <div class="row" id="onionr-timeline-posts">

                    </div>
--- a/onionr/static-data/www/ui/src/js/main.js
+++ b/onionr/static-data/www/ui/src/js/main.js
@ -44,16 +44,17 @@ function deserializeUser(id) {
    return user;
 }

-function serializeUser(user) {
-    if(user !== null && user !== undefined) {
-        var serialized = {'name' : user.getName(), 'id' : user.getID(), 'icon' : user.getIcon()};
+function getCurrentUser() {
+    var user = get('currentUser', null);

-        usermap[user.getID()] = serialized;
+    if(user === null)
+        return null;

-        set('usermap', JSON.stringify(getUserMap()));
+    return User.getUser(user, function() {});
+}

-        return serialized;
-    }
+function setCurrentUser(user) {
+    set('currentUser', user.getID());
 }

 /* returns a relative date format, e.g. "5 minutes" */
@ -131,6 +132,11 @@ class Sanitize {
    static url(url) {
        return encodeURIComponent(url);
    }
+
+    /* usernames */
+    static username(username) {
+        return String(username).replace(/[\W_]+/g, " ").substring(0, 25);
+    }
 }

 /* config stuff */
@ -182,18 +188,75 @@ class User {
        return this.image;
    }

+    setDescription(description) {
+        this.description = description;
+    }
+
+    getDescription() {
+        return this.description;
+    }
+
    serialize() {
        return {
            'name' : this.getName(),
            'id' : this.getID(),
-            'icon' : this.getIcon()
+            'icon' : this.getIcon(),
+            'description' : this.getDescription()
        };
    }

+    /* save in usermap */
    remember() {
        usermap[this.getID()] = this.serialize();
        set('usermap', JSON.stringify(usermap));
    }
+
+    /* save as a block */
+    save(callback) {
+        var block = new Block();
+
+        block.setType('onionr-user');
+        block.setContent(JSON.stringify(this.serialize()));
+
+        return block.save(true, callback);
+    }
+
+    static getUser(id, callback) {
+        var user = deserializeUser(id);
+        if(user === null) {
+            Block.getBlocks({'type' : 'onionr-user-info', 'signed' : true, 'reverse' : true}, function(data) {
+                if(data.length !== 0) {
+                    try {
+                        user = new User();
+
+                        var userInfo = JSON.parse(data[0].getContent());
+
+                        if(userInfo['id'] === id) {
+                            user.setName(userInfo['name']);
+                            user.setIcon(userInfo['icon']);
+                            user.setID(id);
+
+                            user.remember();
+
+                            callback(user);
+                            return user;
+                        }
+                    } catch(e) {
+                        console.log(e);
+
+                        callback(null);
+                        return null;
+                    }
+                } else {
+                    callback(null);
+                    return null;
+                }
+            });
+        } else {
+            callback(user);
+            return user;
+        }
+    }
 }

 /* post class */
@ -246,6 +309,35 @@ class Post {
    getPostDate() {
        return this.date;
    }
+
+    save(callback) {
+        var args = {'type' : 'onionr-post', 'sign' : true, 'content' : JSON.stringify({'content' : this.getContent()})};
+
+        var url = '/client/?action=insertBlock&data=' + Sanitize.url(JSON.stringify(args)) + '&token=' + Sanitize.url(getWebPassword()) + '&timingToken=' + Sanitize.url(getTimingToken());
+
+        console.log(url);
+
+        var http = new XMLHttpRequest();
+
+        if(callback !== undefined) {
+            // async
+
+            http.addEventListener('load', function() {
+                callback(Block.parseBlockArray(JSON.parse(http.responseText)['hash']));
+            }, false);
+
+            http.open('GET', url, true);
+            http.timeout = 5000;
+            http.send(null);
+        } else {
+            // sync
+
+            http.open('GET', url, false);
+            http.send(null);
+
+            return Block.parseBlockArray(JSON.parse(http.responseText)['hash']);
+        }
+    }
 }

 /* block class */
@ -348,6 +440,52 @@ class Block {
        return !(this.hash === null || this.hash === undefined);
    }

+    // saves the block, returns the hash
+    save(sign, callback) {
+        var type = this.getType();
+        var content = this.getContent();
+        var parent = this.getParent();
+
+        if(content !== undefined && content !== null && type !== '') {
+            var args = {'content' : content};
+
+            if(type !== undefined && type !== null && type !== '')
+                args['type'] = type;
+            if(parent !== undefined && parent !== null && parent.getHash() !== undefined && parent.getHash() !== null && parent.getHash() !== '')
+                args['parent'] = parent.getHash();
+            if(sign !== undefined && sign !== null)
+                args['sign'] = String(sign) !== 'false'
+
+
+            var url = '/client/?action=insertBlock&data=' + Sanitize.url(JSON.stringify(args)) + '&token=' + Sanitize.url(getWebPassword()) + '&timingToken=' + Sanitize.url(getTimingToken());
+
+            console.log(url);
+
+            var http = new XMLHttpRequest();
+
+            if(callback !== undefined) {
+                // async
+
+                http.addEventListener('load', function() {
+                    callback(Block.parseBlockArray(JSON.parse(http.responseText)['hash']));
+                }, false);
+
+                http.open('GET', url, true);
+                http.timeout = 5000;
+                http.send(null);
+            } else {
+                // sync
+
+                http.open('GET', url, false);
+                http.send(null);
+
+                return Block.parseBlockArray(JSON.parse(http.responseText)['hash']);
+            }
+        }
+
+        return false;
+    }
+
    /* static functions */

    // recreates a block by hash
@ -431,19 +569,55 @@ class Block {

 /* temporary code */

+var tt = getParameter("timingToken");
+if(tt !== null && tt !== undefined) {
+    setTimingToken(tt);
+}
+
 if(getWebPassword() === null) {
    var password = "";
    while(password.length != 64) {
        password = prompt("Please enter the web password (run `./RUN-LINUX.sh --get-password`)");
    }

-    setTimingToken(prompt("Please enter the timing token (optional)"));
-
    setWebPassword(password);
-    window.location.reload(true);
 }

-var tt = getParameter("timingToken");
-if(tt !== null && tt !== undefined) {
-    setTimingToken(tt);
+if(getCurrentUser() === null) {
+    var url = '/client/?action=info&token=' + Sanitize.url(getWebPassword()) + '&timingToken=' + Sanitize.url(getTimingToken());
+
+    console.log(url);
+
+    var http = new XMLHttpRequest();
+
+    // sync
+
+    http.open('GET', url, false);
+    http.send(null);
+
+    var id = JSON.parse(http.responseText)['pubkey'];
+
+    User.getUser(id, function(data) {
+        if(data === null || data === undefined) {
+            jQuery('#modal').modal('show');
+
+            var user = new User();
+
+            user.setName('New User');
+            user.setID(id);
+            user.setIcon('<$= Template.jsTemplate("default-icon") $>');
+            user.setDescription('A new OnionrUI user');
+
+            user.remember();
+            user.save();
+
+            setCurrentUser(user);
+
+            window.location.reload();
+        } else {
+            setCurrentUser(data);
+        }
+    });
 }
+
+currentUser = getCurrentUser();
--- a/onionr/static-data/www/ui/src/js/timeline.js
+++ b/onionr/static-data/www/ui/src/js/timeline.js
@ -1,35 +1,3 @@
-function getUserInfo(id, callback) {
-    var user = deserializeUser(id);
-    if(user === null) {
-        Block.getBlocks({'type' : 'onionr-user-info', 'signed' : true, 'reverse' : true}, function(data) {
-            if(data.length !== 0) {
-                try {
-                    user = new User();
-
-                    var userInfo = JSON.parse(data[0].getContent());
-
-                    if(userInfo['id'] === id) {
-                        user.setName(userInfo['name']);
-                        user.setIcon(userInfo['icon']);
-                        user.setID(id);
-
-                        serializeUser(user);
-
-                        return callback(user);
-                    }
-                } catch(e) {
-                    console.log(e);
-                    return callback(null);
-                }
-            } else {
-                return callback(null);
-            }
-        });
-    } else {
-        return callback(user);
-    }
-}
-
 /* just for testing rn */
 Block.getBlocks({'type' : 'onionr-post', 'signed' : true, 'reverse' : true}, function(data) {
    for(var i = 0; i < data.length; i++) {
@ -37,7 +5,7 @@ Block.getBlocks({'type' : 'onionr-post', 'signed' : true, 'reverse' : true}, fun
            var block = data[i];

            var finished = false;
-            getUserInfo(new String(block.getHeader('signer', 'unknown')), function(user) {
+            User.getUser(new String(block.getHeader('signer', 'unknown')), function(user) {
                var post = new Post();

                var blockContent = JSON.parse(block.getContent());
@ -53,6 +21,7 @@ Block.getBlocks({'type' : 'onionr-post', 'signed' : true, 'reverse' : true}, fun

            while(!finished);
        } catch(e) {
+            console.log('Troublemaker block: ' + data[i].getHash());
            console.log(e);
        }
    }
@ -62,11 +31,101 @@ function viewProfile(id, name) {
    id = decodeURIComponent(id);
    document.getElementById("onionr-profile-username").innerHTML = Sanitize.html(decodeURIComponent(name));

-    getUserInfo(id, function(data) {
+    User.getUser(id, function(data) {
        if(data !== null) {
            document.getElementById("onionr-profile-username").innerHTML = Sanitize.html(data.getName());
            document.getElementById("onionr-profile-username").title = Sanitize.html(data.getID());
            document.getElementById("onionr-profile-user-icon").src = "data:image/jpeg;base64," + Sanitize.html(data.getIcon());
+            document.getElementById("onionr-profile-user-icon").b64 = Sanitize.html(data.getIcon());
        }
    });
 }
+
+function updateUser() {
+    toggleSaveButton(false);
+
+    jQuery('#modal').modal('show');
+
+    var name = jQuery('#onionr-profile-username').text();
+    var id = document.getElementById("onionr-profile-username").title;
+    var icon = document.getElementById("onionr-profile-user-icon").b64;
+    var description = 'todo';
+
+    var user = new User();
+
+    user.setName(name);
+    user.setID(id);
+    user.setIcon(icon);
+    user.setDescription(description);
+
+    user.remember();
+    user.save();
+
+    window.location.reload();
+}
+
+function cancelUpdate() {
+    toggleSaveButton(false);
+
+    var name = jQuery('#onionr-profile-username').text();
+    var id = document.getElementById("onionr-profile-username").title;
+
+    viewProfile(id, name);
+}
+
+function toggleSaveButton(show) {
+    document.getElementById("onionr-profile-save").style.display = (show ? 'block' : 'none');
+    document.getElementById("onionr-profile-cancel").style.display = (show ? 'block' : 'none');
+}
+
+function makePost() {
+    var content = document.getElementById("onionr-post-creator-content").value;
+
+    if(content.trim() !== '') {
+        var post = new Post();
+
+        post.setUser(getCurrentUser());
+        post.setContent(content);
+        post.setPostDate(new Date());
+
+        post.save(function(data) {}); // async, but no function
+
+        document.getElementById('onionr-timeline-posts').innerHTML = post.getHTML() + document.getElementById('onionr-timeline-posts').innerHTML;
+
+        document.getElementById("onionr-post-creator-content").value = "";
+    } else {
+        console.log('Not making empty post.');
+    }
+}
+
+$('body').on('click', '[data-editable]', function() {
+    var el = jQuery(this);
+    var txt = el.text();
+
+    var input = jQuery('<input/>').val(txt);
+    el.replaceWith(input);
+
+    var save = function() {
+        var newTxt = input.val();
+        var p = el.text(Sanitize.username(newTxt));
+        input.replaceWith(p);
+
+        if(newTxt !== txt)
+            toggleSaveButton(true);
+    };
+
+    input.one('blur', save).focus();
+});
+
+document.getElementById("onionr-post-creator-user-name").innerHTML = Sanitize.html(currentUser.getName());
+document.getElementById("onionr-post-creator-user-id").innerHTML = "<$= LANG.POST_CREATOR_YOU $>";
+document.getElementById("onionr-post-creator-user-icon").src = "data:image/jpeg;base64," + Sanitize.html(currentUser.getIcon());
+document.getElementById("onionr-post-creator-user-id").title = currentUser.getID();
+document.getElementById("onionr-post-creator-content").placeholder = "<$= LANG.POST_CREATOR_PLACEHOLDER $>";
+
+viewCurrentProfile = function() {
+    viewProfile(encodeURIComponent(currentUser.getID()), encodeURIComponent(currentUser.getName()));
+}
+
+document.getElementById("onionr-post-creator-user-id").onclick = viewCurrentProfile;
+document.getElementById("onionr-post-creator-user-name").onclick = viewCurrentProfile;