Re-committing work for channel overlay in new branch in an attempt to learn how to use git good and stuff.

src/channel/anonymouscheck.js

@@ -16,16 +16,18 @@ AnonymousCheck.prototype.onUserPreJoin = function (user, data, cb) {
     }
 
     if(anonymousBanned && user.isAnonymous()) {
+        user.socket.emit("needIdentity");
         user.socket.on("disconnect", function () {
             if (!user.is(Flags.U_IN_CHANNEL)) {
                 cb("User disconnected", ChannelModule.DENY);
             }
         });
 
-        user.socket.emit("errorMsg", { msg : "This channel has blocked anonymous users. Please provide a user name to join."});
         user.waitFlag(Flags.U_LOGGED_IN, function () {
+            user.socket.emit("cancelNeedIdentity");
             cb(null, ChannelModule.PASSTHROUGH);
         });
+
         return;
     } else{
         cb(null, ChannelModule.PASSTHROUGH);

templates/channel.pug

@@ -43,6 +43,13 @@ html(lang="en")
                 i#userlisttoggle.glyphicon.glyphicon-chevron-down.pull-left.pointer(title="Show/Hide Userlist")
                 span#usercount.pointer Not Connected
                 span#modflair.label.label-default.pull-right.pointer Name Color
+              #overlay-container.row
+                  #channel-overlay.col-xs-12.d-none.position-absolute
+                    #channel-overlay-content.text-center
+                        h4#channel-overlay-content-header.mb-5
+                        span#channel-overlay-content-msg.d-block.mb-5
+                        input#channel-overlay-content-input.form-control.mb-5
+                        button#channel-overlay-submit.btn.btn-default Submit
               #userlist
               #messagebuffer.linewrap
               input#chatline.form-control(type="text", maxlength="240", style="display: none")

www/css/cytube.css

@@ -556,6 +556,24 @@ body.chatOnly .pm-panel, body.chatOnly .pm-panel-placeholder {
     margin-right: 5px;
 }
 
+#channel-overlay{
+    height: 97%;
+    width: 100%;
+    background-color: #272b30;
+    z-index: 9998;
+    position: absolute;
+}
+
+#channel-overlay-content{
+    margin: 0 auto;
+    margin-top: 20%;
+}
+
+#channel-overlay-content-input{
+    width: 50%;
+    margin: 0 auto;
+}
+    
 @media screen and (min-width: 768px) {
     .modal-dialog {
         min-width: 600px!important;
@@ -568,6 +586,15 @@ body.chatOnly .pm-panel, body.chatOnly .pm-panel-placeholder {
     }
 }
 
+@media screen and (max-width: 480px) {
+    #channel-overlay-content{
+        margin-top:3%;
+    }
+    
+    #channel-overlay-content-input{
+        width: 80%;
+    }
+}
 table td {
     max-width: 200px;
     word-wrap: break-word;
@@ -688,3 +715,17 @@ input#logout[type="submit"]:hover {
 body.hd #resize-video-larger, body.hd #resize-video-smaller {
     display: none;
 }
+
+.d-block{
+    display:block !important;
+}
+.d-none{
+    display: none !important;
+}
+.position-absolute{
+    position: absolute !important;
+}
+
+.mb-5{
+    margin-bottom: 5px !important;
+}

www/js/callbacks.js

@@ -117,41 +117,70 @@ Callbacks = {
         errDialog(message);
     },
 
-    needPassword: function (wrongpw) {
-        var div = $("<div/>");
-        $("<strong/>").text("Channel Password")
-            .appendTo(div);
-        if (wrongpw) {
-            $("<br/>").appendTo(div);
-            $("<span/>").addClass("text-error")
-                .text("Wrong Password")
-                .appendTo(div);
-        }
+    needIdentity: function () {
+        var overlayInput = $('#channel-overlay-content-input');
+        var overlaySubmit = $('#channel-overlay-submit');
+        overlaySubmit.off('click');
+        overlayInput.off('keydown');
+        $('#channel-overlay-content-header').text('User name required');
+        $('#channel-overlay-content-msg').text('This channel has blocked anonymous users. Please login or provide a guest name.');
+        $('#channel-overlay').removeClass('d-none');
   
-        var pwbox = $("<input/>").addClass("form-control")
-            .attr("type", "password")
-            .appendTo(div);
-        var submit = $("<button/>").addClass("btn btn-xs btn-default btn-block")
-            .css("margin-top", "5px")
-            .text("Submit")
-            .appendTo(div);
-        var parent = chatDialog(div);
-        parent.attr("id", "needpw");
-        var sendpw = function () {
-            socket.emit("channelPassword", pwbox.val());
-            parent.remove();
+        overlayInput.attr("type", "text").val('');
+
+        var guestLogin = function () {
+            socket.emit("login", {
+                name: overlayInput.val()
+            });
         };
-        submit.click(sendpw);
-        pwbox.keydown(function (ev) {
+        overlaySubmit.click(guestLogin);
+        overlayInput.keydown(function (ev) {
             if (ev.keyCode == 13) {
-                sendpw();
+                guestLogin();
             }
         });
-        pwbox.focus();
+
+        overlayInput.focus();
     },
     
+    
+    cancelNeedIdentity: function(){
+         $('#channel-overlay').addClass('d-none');
+    },
+    
+    
+    needPassword: function (wrongpw) {
+        var overlayInput = $('#channel-overlay-content-input');
+        var overlaySubmit = $('#channel-overlay-submit');
+        overlaySubmit.off('click');
+        overlayInput.off('keydown');
+        $('#channel-overlay-content-header').text('Channel Password');
+        $('#channel-overlay').removeClass('d-none');
+
+        overlayInput.attr("type", "password");
+        
+        if(wrongpw){
+            $('#channel-overlay-content-msg').text('Wrong Password. Try Again.');
+        }
+
+        var sendPw = function () {
+            socket.emit("channelPassword", overlayInput.val());
+        };
+
+        overlaySubmit.click(sendPw);
+
+        overlayInput.keydown(function (ev) {
+            if (ev.keyCode == 13) {
+                sendPw();
+            }
+        });
+
+        overlayInput.focus();
+    },
+
+    
     cancelNeedPassword: function () {
-        $("#needpw").remove();
+        $('#channel-overlay').addClass('d-none');
     },
 
     cooldown: function (time) {