From 76bfb6ab359bb0fccd59fe16aa2a9da3db00d2a2 Mon Sep 17 00:00:00 2001
From: ansuz <ansuz@transitiontech.ca>
Date: Wed, 17 Aug 2016 18:36:13 +0200
Subject: [PATCH] detect whether you are new to a page

prompt for your name and create a column for your username
prompt before deleting columns as well
style a few elements differently
---
 customize.dist/main.css          |  15 +++--
 customize.dist/src/cryptpad.less |  44 ++++++++-----
 www/poll/index.html              |   2 +-
 www/poll/main.js                 | 107 ++++++++++++++++++++++++-------
 4 files changed, 123 insertions(+), 45 deletions(-)

diff --git a/customize.dist/main.css b/customize.dist/main.css
index ad345e13d..3778b5d8c 100644
--- a/customize.dist/main.css
+++ b/customize.dist/main.css
@@ -302,24 +302,27 @@ form.realtime table tr td.checkbox-cell div.checkbox-contain {
   height: 100%;
   width: 100%;
 }
-form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"] {
+form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) {
   display: none;
 }
-form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"] ~ label {
+form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) ~ .cover {
   font-weight: bold;
   background-color: #FF0073;
   color: #302B28;
   display: block;
 }
-form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"] ~ label:after {
+form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) ~ .cover:after {
   content: "✖";
 }
-form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"] ~ label.yes {
+form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) ~ .cover.yes {
   background-color: #46E981;
 }
-form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"] ~ label.yes:after {
+form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) ~ .cover.yes:after {
   content: "✔";
 }
+form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.mine) ~ .cover.mine {
+  display: none;
+}
 form.realtime table input[type="text"] {
   height: 100%;
   width: 90%;
@@ -333,7 +336,6 @@ form.realtime table tfoot tr td {
   z-index: 4000;
   cursor: pointer;
 }
-form.realtime #adduser,
 form.realtime #addoption {
   color: #46E981;
   border: 1px solid #46E981;
@@ -341,6 +343,7 @@ form.realtime #addoption {
 }
 form.realtime #adduser {
   border-top-left-radius: 5px;
+  padding: 15px;
 }
 form.realtime #addoption {
   border-bottom-left-radius: 5px;
diff --git a/customize.dist/src/cryptpad.less b/customize.dist/src/cryptpad.less
index e0f257093..1cac19dfb 100644
--- a/customize.dist/src/cryptpad.less
+++ b/customize.dist/src/cryptpad.less
@@ -373,19 +373,29 @@ form.realtime {
 
                         input {
                             &[type="checkbox"] {
-                                display: none;
-                                ~ label {
-                                    display: block;
-                                    font-weight: bold;
-
-                                    background-color: @cp-red;
-                                    color: @base;
-                                    &:after { content: "✖"; }
-
-                                    display: block;
-                                    &.yes {
-                                        background-color: @cp-green;
-                                        &:after { content: "✔"; }
+                                &.mine {
+                                    // idk
+                                }
+
+                                &:not(.mine) {
+                                    display: none;
+
+                                    ~ .cover {
+                                        display: block;
+                                        font-weight: bold;
+
+                                        background-color: @cp-red;
+                                        color: @base;
+                                        &:after { content: "✖"; }
+
+                                        display: block;
+                                        &.yes {
+                                            background-color: @cp-green;
+                                            &:after { content: "✔"; }
+                                        }
+                                        &.mine {
+                                            display: none;
+                                        }
                                     }
                                 }
                             }
@@ -431,14 +441,18 @@ form.realtime {
         }
     }
 
-    #adduser,
+    //#adduser,
     #addoption {
         color: @cp-green;
         border: 1px solid @cp-green;
         padding: 15px;
     }
 
-    #adduser { .top-left; }
+    #adduser {
+        .top-left;
+        //border: 1px solid grey;
+        padding: 15px;
+    }
     #addoption { .bottom-left; }
 }
 
diff --git a/www/poll/index.html b/www/poll/index.html
index 49d487487..23d74cd9c 100644
--- a/www/poll/index.html
+++ b/www/poll/index.html
@@ -62,7 +62,7 @@
             <thead>
                 <tr>
                     <td>
-                        <div id="adduser" class="clickable" title="click to add a user">+ Users</div>
+                        <div id="adduser"></div>
                     </td>
                 </tr>
             </thead>
diff --git a/www/poll/main.js b/www/poll/main.js
index b39de2f1d..4aa455f78 100644
--- a/www/poll/main.js
+++ b/www/poll/main.js
@@ -70,12 +70,6 @@ define([
         };
     };
 
-    var find = function (map, path) {
-        return (map && path.reduce(function (p, n) {
-            return typeof p[n] !== 'undefined' && p[n];
-        }, map)) || undefined;
-    };
-
     var Input = function (opt) { return $('<input>', opt); };
     var Checkbox = function (id) {
         var p = parseXY(id);
@@ -86,8 +80,9 @@ define([
             'class': 'checkbox-contain',
         });
 
-        var $label = $('<label>', {
+        var $cover = $('<span>', {
             'for': id,
+            'class': 'cover'
         });
 
         var $check = Input({
@@ -98,15 +93,21 @@ define([
             console.log("(%s, %s) => %s", p.x, p.y, $check[0].checked);
             var checked = proxy.table.cells[id] = $check[0].checked? 1: 0;
             if (checked) {
-                $label.addClass('yes');
+                $cover.addClass('yes');
             }
             else {
-                $label.removeClass('yes');
+                $cover.removeClass('yes');
             }
         });
 
+        if (p.x === module.userId) {
+            $check.addClass('mine');
+        } else {
+            console.log(module.userId, p.x);
+        }
+
         $div.append($check);
-        $check.after($label);
+        $check.after($cover);
 
         return $div; //$check;
     };
@@ -116,7 +117,13 @@ define([
 
     var setEditable = function (bool) {
         module.isEditable = bool;
-        $('input, textarea').attr('disabled', !bool);
+
+        items.forEach(function ($item) {
+            $item.attr('disabled', !bool);
+        });
+        $('input[id^="y"]').each(function (i, e) {
+            $(this).attr('disabled', !bool);
+        });
     };
 
     var coluid = Uid('x');
@@ -181,6 +188,7 @@ define([
             id: id,
             type: 'text',
             placeholder: 'your name',
+            disabled: true,
         }).on('keyup change', function () {
             proxy.table.cols[id] = $user.val() || "";
         });
@@ -193,8 +201,12 @@ define([
                 'class': 'remove',
                 'title': 'remove column', // TODO translate
             }).text('✖').click(function () {
-                removeColumn(proxy, id);
-                table.removeColumn(id);
+                Cryptpad.confirm("Are you sure you'd like to remove this user?", // TODO translate
+                    function (yes) {
+                        if (!yes) { return; }
+                        removeColumn(proxy, id);
+                        table.removeColumn(id);
+                    });
             }));
 
         proxy.table.cols[id] = value || "";
@@ -243,11 +255,22 @@ define([
         return $option;
     };
 
+    /*
     $('#adduser').click(function () {
         if (!module.isEditable) { return; }
         var id = coluid();
         makeUser(module.rt.proxy, id).focus();
     });
+    */
+
+    var makeUserEditable = module.makeUserEditable = function (id, bool) {
+        var $name = $('input[type="text"][id="' + id + '"]').attr('disabled', !bool);
+
+        var $sel = $('input[id^="' + id + '"]')
+            [bool?'addClass':'removeClass']('mine');
+
+        return $sel;
+    };
 
     $('#addoption').click(function () {
         if (!module.isEditable) { return; }
@@ -348,7 +371,7 @@ define([
             }
             var checked = box.checked = proxy.table.cells[uid] ? true : false;
             if (checked) {
-                $(box).parent().find('label').addClass('yes');
+                $(box).parent().find('.cover').addClass('yes');
             }
         });
 
@@ -445,10 +468,10 @@ define([
                     if (!$parent.length) { console.log("couldn't find parent element of checkbox"); return; }
 
                     if (checked) {
-                        $parent.find('label').addClass('yes');
+                        $parent.find('.cover').addClass('yes');
                         //$(el).parent().
                     } else {
-                        $parent.find('label').removeClass('yes');
+                        $parent.find('.cover').removeClass('yes');
                     }
                     break;
                 default:
@@ -643,14 +666,52 @@ define([
             // TODO prompt them with questions to set up their poll...
         }
 
-        /*  TODO
-            even if the user isn't the first, check their storage to see if
-            they've visited before and if they 'own' a column in the table.
-            if they do, make it editable and suggest that they fill it in.
+        Cryptpad.getPadAttribute('column', function (err, column) {
+            if (err) {
+                console.log("unable to retrieve column");
+                return;
+            }
+
+            module.userId = column;
 
-            if they have not visited, make a column for them.
-            don't propogate changes from this column until they make changes
-        */
+            var promptForName = function () {
+                // HERE
+                Cryptpad.prompt("What is your name?", "", function (name, ev) {
+                    if (name === null) {
+                        name = '';
+                    }
+
+                    if (!module.isEditable) { return; }
+                    var id = module.userId = coluid();
+
+                    Cryptpad.setPadAttribute('column', id, function (err) {
+                        if (err) {
+                            console.error("Couldn't remember your column id");
+                            return;
+                        }
+
+                        console.log(id);
+                        makeUser(module.rt.proxy, id, name).focus().val(name);
+                        makeUserEditable(id, true);
+                    });
+                });
+            };
+
+            if (column === null) {
+                //console.log("Looks like you're new to this poll, why don't you make a column");
+                promptForName();
+                return;
+            }
+
+            // column might be defined, but that column might have been deleted...
+            if (proxy.table.colsOrder.indexOf(column) === -1) {
+                promptForName();
+                return;
+            }
+
+            // if column is defined, then you can just make that column editable
+            makeUserEditable(column, true);
+        });
     };
 
     var config = {