diff --git a/public/css/screen.styl b/public/css/screen.styl index 576d4646..9a0783a0 100644 --- a/public/css/screen.styl +++ b/public/css/screen.styl @@ -2654,9 +2654,8 @@ user-admin-border-size = 2px } #create-session-modal { - - .session-title-validate-error { - margin-top: 10px; + .create-session-error { + margin: 25px 25px 0px 25px; } } @@ -2736,9 +2735,9 @@ user-admin-border-size = 2px } } - .proposed-title-validate-error { - margin: 0px; + .propose-session-error { margin-top: 15px; + margin-bottom: 5px; } } diff --git a/public/js/event-views.js b/public/js/event-views.js index c90efae8..b20f80e7 100644 --- a/public/js/event-views.js +++ b/public/js/event-views.js @@ -553,6 +553,8 @@ views.SessionListView = Backbone.Marionette.CollectionView.extend({ events: { 'click #btn-group-me': 'groupUser', + 'click #btn-create-session': 'invokeCreateSessionModal', + 'click #btn-propose-session': 'invokeProposeSessionModal' }, initialize: function() { @@ -571,6 +573,20 @@ views.SessionListView = Backbone.Marionette.CollectionView.extend({ }; }, + invokeCreateSessionModal: function(jqevt) { + jqevt.preventDefault(); + $("#create-session-modal").modal('show'); + $(".create-session-error").addClass('hide'); + $(".create-session-error").removeClass('show'); + }, + + invokeProposeSessionModal: function(jqevt) { + jqevt.preventDefault(); + $("#propose-session-modal").modal('show'); + $(".propose-session-error").addClass('hide'); + $(".propose-session-error").removeClass('show'); + }, + groupUser: function(jqevt) { jqevt.preventDefault(); var thisEventAssign = this.getMySessionAssignment(); @@ -717,7 +733,6 @@ views.DialogView = Backbone.Marionette.Layout.extend({ 'keyup #session_message': 'updateSessionMessage', 'click #send-email-button': 'sendFollowupEmail', 'click #submit-contact-info': 'submitContactInfo', - 'click #btn-propose-session': 'proposeSessionDialog', 'click #set-iframe-code': 'setIframeCode', 'click #propose': 'proposeSession', 'input .input-topic-title': 'fillTopicPreview', @@ -739,28 +754,21 @@ views.DialogView = Backbone.Marionette.Layout.extend({ fillTopicPreview: function(event) { event.preventDefault(); - var title = $(".input-topic-title").val(); var scope = $("#propose-session-modal"); if(title.length > 80 || title.length === 0 || title === "") { scope.modal('show'); - $(".proposed-title-validate-error", scope).addClass('show'); - $(".proposed-title-validate-error", scope).removeClass('hide'); - if(title.length > 80) - $(".proposed-title-validate-error", scope).text("Title should be less than 80 characters"); + this.showProposeSessionError("Oops! Session title should be less than 80 characters."); else if (title.length === 0 || title === "") - $(".proposed-title-validate-error", scope).text("Title cannot be left blank"); - + this.showProposeSessionError("Oops! Session title cannot be left blank."); return; } + this.hideProposeSessionError(); $(".title-preview").text(""); $(".title-preview").text(title); - $(".proposed-title-validate-error", scope).removeClass('show'); - $(".proposed-title-validate-error", scope).addClass('hide'); - }, regroupUser: function(event) { @@ -778,18 +786,11 @@ views.DialogView = Backbone.Marionette.Layout.extend({ if(title.length > 80 || title.length === 0 || title === "") { scope.modal('show'); - - $(".proposed-title-validate-error", scope).removeClass('hide'); - $(".proposed-title-validate-error", scope).addClass('show'); - if(title.length > 80) { - $(".proposed-title-validate-error", scope).text("Title should be less than 80 characters"); - } - - else if (title.length === 0 || title === "") { - $(".proposed-title-validate-error", scope).text("Title cannot be left blank"); + this.showProposeSessionError("Oops! Session title should be less than 80 characters."); + } else if (title.length === 0 || title === "") { + this.showProposeSessionError("Oops! Session title cannot be left blank."); } - return; } @@ -806,21 +807,14 @@ views.DialogView = Backbone.Marionette.Layout.extend({ }); scope.modal('hide'); - $(".title-preview").text("Your title will appear here"); $(".input-topic-title").val(""); - $(".proposed-title-validate-error", scope).addClass('hide'); - $(".proposed-title-validate-error", scope).removeClass('show'); }, closeDisconnected: function() { $("#disconnected-modal").modal('hide'); }, - proposeSessionDialog: function() { - $("#propose-session-dialog").modal('show'); - }, - setIframeCode: function(event) { event.preventDefault(); var iframeCode = $(".input-iframe-code").val(); @@ -930,7 +924,6 @@ views.DialogView = Backbone.Marionette.Layout.extend({ $('.contact-control', scope).removeClass('contact-invalid-error'); scope.modal('hide'); - }, createSession: function(event) { @@ -940,24 +933,21 @@ views.DialogView = Backbone.Marionette.Layout.extend({ var joinCap = parseInt($.trim($("[name=join_cap]", scope).val())); var type = $("[name='session_type']:checked", scope).val(); - if (isNaN(joinCap) || joinCap < 2 || joinCap > 10) { - $(".join-cap-error", scope).show(); - return; - } - if(title.length > 80 || title.length === 0 || title === "") { scope.modal('show'); - $(".session-title-validate-error", scope).addClass('show'); - $(".session-title-validate-error", scope).removeClass('hide'); - - if(title.length > 80) - $(".session-title-validate-error", scope).text("Title should be less than 80 characters"); - else if (title.length === 0 || title == "") - $(".session-title-validate-error", scope).text("Title cannot be left blank"); + if(title.length > 80) { + this.showCreateSessionError("Oops! Session name should be less than 80 characters."); + return; + } else if (title.length === 0 || title == "") { + this.showCreateSessionError("Oops! Session name cannot be left blank."); + return; + } + } + if (isNaN(joinCap) || joinCap < 2 || joinCap > 10) { + this.showCreateSessionError("Oops! Participant limit should be a number between 2 and 10."); return; - - } + } var activities = []; switch (type) { @@ -965,10 +955,14 @@ views.DialogView = Backbone.Marionette.Layout.extend({ activities.push({type: "about", autoHide: true}); break; case "video": + var ytUrl = $("#session_youtube_id", scope).val(); + if(!ytUrl) { + this.showCreateSessionError("Oops! URL for a 'Youtube Video' session type cannot be left blank."); + return; + } var ytid = video.extractYoutubeId($("#session_youtube_id", scope).val()); if (!ytid) { - $(".yt-error", scope).show(); - $("#session_youtube_id", scope).parent().addClass("error"); + this.showCreateSessionError("Oops! that's an unrecognized Youtube URL! Please enter a valid URL.") return; } else { activities.push({type: "video", video: {provider: "youtube", id: ytid}}); @@ -976,9 +970,13 @@ views.DialogView = Backbone.Marionette.Layout.extend({ break; case "webpage": var url = this.$("#session_webpage").val(); + if(!url) { + this.showCreateSessionError("Oops! URL for a 'Webpage' session type cannot be left blank."); + return; + } + if (!/^https:\/\//.test(url)) { - $(".url-error", scope).show(); - $("#session_webpage", scope).parent().addClass("error"); + this.showCreateSessionError("Oops! We only allow embedding of secure pages in the breakout rooms. Please enter an 'https' url."); return; } else { activities.push({type: "webpage", url: url}); @@ -996,15 +994,10 @@ views.DialogView = Backbone.Marionette.Layout.extend({ }); $("input[type=text]", scope).val(""); - $(".yt-error, .url-error, .join-cap-error", scope).hide(); - $(".error", scope).removeClass(".error"); scope.modal('hide'); - - $(".session-title-validate-error", scope).addClass('hide'); - $(".session-title-validate-error", scope).removeClass('show'); }, - sendFollowupEmail: function(jqevt) { + sendFollowupEmail: function(jqevt) { jqevt.preventDefault(); $.ajax({ @@ -1018,6 +1011,23 @@ views.DialogView = Backbone.Marionette.Layout.extend({ closeDisconnected: function() { $("#disconnected-modal").modal('hide'); + }, + + showCreateSessionError: function(msg) { + $(".create-session-error").addClass("show"); + $(".create-session-error").removeClass("hide"); + $(".create-session-error").text(msg); + }, + + showProposeSessionError: function(msg) { + $(".propose-session-error").addClass("show"); + $(".propose-session-error").removeClass("hide"); + $(".propose-session-error").text(msg); + }, + + hideProposeSessionError: function() { + $(".propose-session-error").addClass("hide"); + $(".propose-session-error").removeClass("show"); } }); diff --git a/test/test.create-sessions.selenium.js b/test/test.create-sessions.selenium.js index ca3af224..9aa42950 100644 --- a/test/test.create-sessions.selenium.js +++ b/test/test.create-sessions.selenium.js @@ -156,8 +156,8 @@ describe("CREATE SESSIONS", function() { expect(val).to.be(""); }); browser.byCss("#create-session").click(); - browser.waitForSelector(".join-cap-error"); - browser.executeScript("$('.join-cap-error').hide();"); + browser.waitForSelector(".create-session-error"); + browser.executeScript("$('.create-session-error').hide();"); // Error for too low browser.waitForSelector("#session_name"); @@ -165,8 +165,8 @@ describe("CREATE SESSIONS", function() { browser.byCss("#join_cap").clear(); browser.byCss("#join_cap").sendKeys("1"); browser.byCss("#create-session").click(); - browser.waitForSelector(".join-cap-error"); - browser.executeScript("$('.join-cap-error').hide();"); + browser.waitForSelector(".create-session-error"); + browser.executeScript("$('.create-session-error').hide();"); // Error for too high browser.waitForSelector("#session_name"); @@ -174,16 +174,17 @@ describe("CREATE SESSIONS", function() { browser.byCss("#join_cap").clear(); browser.byCss("#join_cap").sendKeys("11"); browser.byCss("#create-session").click(); - browser.waitForSelector(".join-cap-error"); - browser.executeScript("$('.join-cap-error').hide();"); + browser.waitForSelector(".create-session-error"); + browser.executeScript("$('.create-session-error').hide();"); // Goldilocks browser.waitForSelector("#session_name"); browser.byCss("#session_name").sendKeys("Joining Capacity"); browser.byCss("#join_cap").clear(); + browser.executeScript("$('#join_cap').val('');"); browser.byCss("#join_cap").sendKeys("3"); - browser.byCss("#create-session").click(); + browser.byCss("#create-session").click(); browser.waitForSelector(".session .hangout-users"); browser.byCsss(".session .hangout-users li").then(function(els) { diff --git a/views/event.ejs b/views/event.ejs index 7c8bff9f..4044a442 100644 --- a/views/event.ejs +++ b/views/event.ejs @@ -271,21 +271,17 @@
- - - +
- - - +
@@ -696,11 +692,8 @@ //Hide the youtube and webpage url form controls $(".youtube-url").hide(); $(".webpage-url").hide(); - $(".join-cap-error").hide(); $('[data-toggle="tooltip"]').tooltip(); - -