Started implementation

server/public/assets/css/style.css

@@ -428,6 +428,18 @@ footer{
 
 /* global colors */
 
+.modal-overlay {
+  z-index: 999999 !important;
+}
+
+.modal {
+  z-index: 9999999999 !important;
+}
+
+#user_password {
+  width: 50% !important;
+}
+
 .modal-header-fixed{
   position:fixed;
   width:100px;

server/public/assets/js/listeners.js

@@ -177,6 +177,9 @@ function init(){
 	$("#help").modal();
     $("#contact").modal();
 	$("#embed").modal();
+    $("#user_password").modal({
+        dismissible: false
+    });
 
     spotify_is_authenticated(spotify_authenticated);
 
@@ -951,9 +954,27 @@ $(document).on("click", ".modal-close", function(e){
     e.preventDefault();
 });
 
+$(document).on("change", ".password_protected", function(e) {
+	e.preventDefault();
+    if(this.checked) {
+        //alert("kwek");
+        $("#user_password").modal('open');
+    }
+});
+
+$(document).on("click", ".submit-user-password", function(e) {
+    e.preventDefault();
+    $("#user_password").modal('close');
+    console.log($("#user-pass-input").val());
+})
+
+$(document).on("click", ".close-user-password", function() {
+    $(".password_protected").prop("checked", false);
+});
+
 $(document).on("click", ".not-exported-container .not-exported-element #extra-export-container-text .extra-add-text", function(){
     this.select();
-})
+});
 
 $(document).on("click", ".next_page", function(e){
     e.preventDefault();

server/public/layouts/channel.handlebars

@@ -89,6 +89,20 @@
             </div>
         </nav>
       </div>
+      <div id="user_password" class="modal">
+            <div class="modal-content">
+                  <h5>Password</h5>
+                <form id="user-password-channel-form">
+                      <div class="input-field">
+                           <input id="user-pass-input" name="user-pass" type="password" autocomplete="off" />
+                     </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat close-user-password">Close</a>
+                <a href="#!" class="waves-effect waves-green btn-flat submit-user-password">Submit</a>
+            </div>
+        </div>
       <div id="help" class="modal modal-fixed-footer">
             <div class="modal-content">
                 <h4>Help</h4>

server/public/partials/panel.handlebars

@@ -91,6 +91,15 @@
                             <input name="removeplay" type="checkbox" class="conf" /><span class="lever"></span>
                             <span class="right-span">Remove</span>
                         </label></div></li>
+
+                        <li><span class="switch-text">
+                            User password
+                          </span>
+                            <div class="switch"><label>
+                            <span class="left-span">No</span>
+                            <input name="password_protected" type="checkbox" class="conf password_protected" /><span class="lever"></span>
+                            <span class="right-span">Yes</span>
+                        </label></div></li>
                       </ul>
                 </form>
             </div>