auth

.tm_properties

@@ -1,4 +1,4 @@
-dwExtraExcludes = "log,vendor,tmp,node_modules"
+dwExtraExcludes = "log,vendor,tmp,node_modules,app"
 excludeInFileChooser  = "{$excludeInFileChooser,$dwExtraExcludes}" 
 excludeInFolderSearch = "{$excludeInFolderSearch,$dwExtraExcludes}" 
 excludeInBrowser      = "{$excludeInBrowser,log,vendor,tmp,node_modules}" 

app.js

@@ -31,6 +31,8 @@ logger.on('newEvent', function(event, data) {
     console.log('%s: %s', event, JSON.stringify(data));
 });
 
+
+
 // ***************************************************************************
 // Express routes helpers
 // ***************************************************************************
@@ -68,7 +70,7 @@ var sendBroadcast = function(text) {
 
 // Welcome message
 app.get('/', function(req, res) {
-    res.send(200, "Welcome to chat server");
+    res.send(200, "Welcome to Daveo Radio");
 });
 
 // Broadcast message to all connected users
@@ -223,6 +225,15 @@ io.sockets.on('connection', function(socket) {
     });
 });
 
+app.get('/other', function (req, res) {
+  if (req.query.other === 'stillgame')
+    res.sendStatus(200)
+  else {
+    res.writeHead(400, 'WRONG!')
+    res.send()
+  }
+})
+
 // Automatic message generation (for testing purposes)
 if (conf.debug) {
     setInterval(function() {

gulpfile.js

@@ -93,7 +93,7 @@ var watchTask = function() {
     .pipe(gulp.dest('./app/css'));
   gulp.src('./src/js/templates/*')
     .pipe(gulp.dest('./app/js/templates'));
-  gulp.src(['.src/js/amplitude-v2.2.0.js', './src/js/chat.js', './src/js/radio.js'])
+  gulp.src(['./src/js/amplitude-v2.2.0.js', './src/js/chat.js', './src/js/radio.js'])
     .pipe(concat('radio.min.js'))
     //.pipe(uglify())
     .pipe(gulp.dest('./app/js'));

src/css/main.css

@@ -50,6 +50,30 @@ header {
   background: rgba(0,0,0,.8);
 }
 
+/* =========  Vertical Align Modals ============ */
+
+.vertical-alignment-helper {
+    display:table;
+    height: 100%;
+    width: 100%;
+    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
+}
+.vertical-align-center {
+    /* To center vertically */
+    display: table-cell;
+    vertical-align: middle;
+    pointer-events:none;
+}
+.modal-content {
+    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
+    width:inherit;
+    height:inherit;
+    /* To center horizontally */
+    margin: 0 auto;
+    pointer-events: all;
+}
+
+
 /***********************************
 ========== Audio Player ============ 
 ***********************************/

src/index.html

@@ -289,31 +289,39 @@
                </div>
             </div>
             
-            <div id="modal_setnick" class="modal fade" data-keyboard="false" data-backdrop="static" >
+<div id="modal_setnick" class="modal fade" data-keyboard="false" data-backdrop="static" >
-               <div class="vertical-alignment-helper">
+   <div class="vertical-alignment-helper">
-                  <div class="modal-dialog modal-sm vertical-align-center">
+      <div class="modal-dialog modal-sm">
-                      <div class="modal-content">
+         <div class="modal-content">
-                         <form data-toggle="validator" role="form">
+            <form id="nick" role="form">
-                            <div class="modal-body">
+               <div class="modal-body">
-                               <div class="form-group has-feedback">
+                  <div class="form-group has-feedback">
-                                  <label class="control-label" for="inputSuccess2">Set a Nickname:</label>
+                     <label class="control-label" for="nickname">Nickname:</label>
-                                  <div class="input-group">
+                     <div class="input-group">
-                                     <span class="input-group-addon">@</span>
+                        <span class="input-group-addon">@</span>
-                                     <input id="nickname" type="text" class="form-control" pattern="^[a-zA-Z]+$" minlength="3" maxlength="25" placeholder="letters only (min 3)" required>
+                        <input id="nickname" type="text" class="form-control" pattern="^[a-zA-Z]+$" minlength="3" maxlength="25" placeholder="letters only (min 3)" required>
-                                  </div>
+                        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>               
-                                  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
+                     </div>
-                               </div>
+                     <div class="help-block with-errors"></div>
-                            </div>
+                  </div>
-                            <div class="modal-footer">
+                  <div class="form-group has-feedback">
-                              <div class="form-group">
+                     <label class="control-label" for="password">Password:</label>
-                                <button id="b_set_nickname" type="submit" class="btn btn-success">OK</button>
+                     <div class="input-group">                  
-                              </div>
+                        <span class="input-group-addon"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></span>
-                            </div>
+                        <input id="other" name="other" type="text" class="form-control" data-remote="/other" placeholder="" required>
-                         </form>
+                        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                      </div>
+                     <div class="help-block with-errors"></div>
                   </div>
                </div>
-            </div>
+               <div class="modal-footer">
+                  <button id="b_set_nickname" type="submit" class="btn btn-success">Submit</button>
+               </div>
+            </form>
+         </div>
+      </div>
+   </div>
+</div>
             <!-- End Modal -->
             
             <!-- START Auth Modal -->

src/js/chat.js

@@ -297,10 +297,7 @@
     });
 
     // Set nickname
-    $('#b_set_nickname').click(function(eventObject) {
+
-        eventObject.preventDefault();
-        socket.emit('setNickname', {'username':getNickname()});
-    });
 
 })();
 

src/js/radio.js

@@ -194,12 +194,24 @@ interval = setInterval(radioTitle,20000); // every 20 seconds or stop polling
 
 $(document).ready(function() {
   $('#auth-modal').modal('show');
-  $('#nickname').validator();
+  $('#nick').validator();
-
+  var socket = io.connect(window.location.host);
+  var getNickname = function() {
+      var nickname = $('#nickname').val();
+      $('#nickname').val("");
+      return nickname;
+  };
+  $('#nick').validator().on('submit', function (e) {
+    if (e.isDefaultPrevented()) {
+    } else {
+      e.preventDefault();
+      socket.emit('setNickname', {'username':getNickname()});
+      $('#modal_setnick').modal('hide');
+    }
+  }); 
   radioTitle(); // call it once on load to avoid 20s delay
   getRecentTracks();  //call it once to avoid 3m delay
   var randomColor = Math.floor(Math.random()*16777215).toString(16);
   $("span#user-label").css({ backgroundColor: '#' + randomColor });
   $('ul.nav-tabs a').tooltip();
-  
 });