Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

New type of login functionality. #22

Merged
merged 6 commits into from

2 participants

@microp11
Collaborator

Closing #14, #21, #22
Added a small rocket.
Added a small delay when disconnecting so there is no flickering when user purposefully disconnects.
The login, if successful, ends when the end of motd is received, currently motd not displayed still.
The case of identical nick is handled.
The case of password is left to a notice for now.
Modified the spinner to adjust the login form.
An implementation related connectivity inconsistency with asynchronous operations found and fixed.
Removed the status bar and associated css. Still some is left.
motd still disabled, we only need to signal the end of it for our current functionality.
Adjusted the scroller for high volume data.
Width of table adjusted to fill in container.
Fixed the scrolling. The scoll appears on the proper side of the scrolled control.

microp11 added some commits
@microp11 microp11 WIP
Removed the current spinner, will add a small one to the login screen itself.
The login screen acts more like a yahoo messenger login screen, you can't get past it if the nick is the same. If a password will be requested, probably a password box will be added to the username edit box.
Fixed a bug for how the client connects, made it asynchronous.
Cleaned up the code.
8418058
@microp11 microp11 Added a small rocket.
Added a small delay when disconnecting so there is no flickering when user purposefully disconnects.
The login, if successful, end at the end of motd, currently not displayed still.
The case of identical nick is handled.
The case of password is left to a notice for now. Chances are that we will intoduce a command for that.
Modified the spinner to adjust the login form.
Removed the status bar and associated css. Still some is left.
motd enabled fully, mind you we only need to signal the end of it for our current functionality.
7b21660
@microp11 microp11 Fixed reconnect issue. 73ebd90
@microp11 microp11 Minor mishap fixed. Would have prevented the displey of the spinner d…
…urin a subsequest connect after first failure.
2976508
@microp11 microp11 Fixed the scrolling. The scoll appears on the proper side of the scro…
…lled control.
2e55599
@microp11 microp11 Adjusted the scroller for high volume data.
Width of table adjusted to fill in container.
aa7e743
@alejandro alejandro merged commit 739ffce into nodester:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 25, 2012
  1. @microp11

    WIP

    microp11 authored
    Removed the current spinner, will add a small one to the login screen itself.
    The login screen acts more like a yahoo messenger login screen, you can't get past it if the nick is the same. If a password will be requested, probably a password box will be added to the username edit box.
    Fixed a bug for how the client connects, made it asynchronous.
    Cleaned up the code.
Commits on Mar 26, 2012
  1. @microp11

    Added a small rocket.

    microp11 authored
    Added a small delay when disconnecting so there is no flickering when user purposefully disconnects.
    The login, if successful, end at the end of motd, currently not displayed still.
    The case of identical nick is handled.
    The case of password is left to a notice for now. Chances are that we will intoduce a command for that.
    Modified the spinner to adjust the login form.
    Removed the status bar and associated css. Still some is left.
    motd enabled fully, mind you we only need to signal the end of it for our current functionality.
  2. @microp11

    Fixed reconnect issue.

    microp11 authored
  3. @microp11

    Minor mishap fixed. Would have prevented the displey of the spinner d…

    microp11 authored
    …urin a subsequest connect after first failure.
  4. @microp11
  5. @microp11

    Adjusted the scroller for high volume data.

    microp11 authored
    Width of table adjusted to fill in container.
This page is out of date. Refresh to see the latest.
View
27 irc.js
@@ -143,6 +143,19 @@ io.sockets.on('connection', function (client) {
}));
});
+ //on nickname already in use, 433
+ irc.addListener('433', function (message) {
+ client.send(JSON.stringify({
+ messagetype: "433",
+ //rejected nick
+ from: (message.params[1]),
+ //the irc server as channel
+ channel: message.server,
+ //the rejection message, usually "Nickname is already in use."
+ message: (message.params[2])
+ }));
+ });
+
//on parting the channel but remaining connected to the irc server
irc.addListener('part', function (message) {
client.send(JSON.stringify({
@@ -157,7 +170,7 @@ io.sockets.on('connection', function (client) {
* As it serves no practical purpose, it is commented out.
* uncomment to use. Do not forget to uncomment the
* corresponding code on the UA side
- *
+ */
irc.addListener('372', function (raw) {
client.send(JSON.stringify({
messagetype: "motd",
@@ -177,17 +190,14 @@ io.sockets.on('connection', function (client) {
from: (raw.server)
}));
});
- */
+ /**/
/*
* NOTICE
* Must handle some quirks of the implementation of irc client protocol by irc-js
* Will probably switch to raw.
*
- * As it serves no practical purpose, it is commented out.
- * uncomment to use. Do not forget to uncomment the
- * corresponding code on the UA side
- *
+*/
irc.addListener('notice', function (message) {
if (message.person !== undefined) {
//notice for content
@@ -207,7 +217,6 @@ io.sockets.on('connection', function (client) {
}));
}
});
-*/
irc.addListener('error', function () {console.log(arguments)});
} else {
@@ -227,7 +236,9 @@ io.sockets.on('connection', function (client) {
client.on('disconnect', function() {
if (irc){
- irc.quit();
+ irc.quit();
+ irc = null;
}
});
+
});
View
30 public/css/irc.css
@@ -26,11 +26,6 @@ body {
margin-left: auto; margin-right: auto; width: 100%;top:30px;
text-align:center;
}
-.loader {
- margin-left: auto; margin-right: auto; width: 8em;top:30px;
- text-align:center;
- margin-top:30px;
-}
.btn.real {
background-image: -moz-linear-gradient(top, white, #E6E6E6);
background-image: -ms-linear-gradient(top, white, #E6E6E6);
@@ -127,21 +122,20 @@ a {
}
.spinner {
margin-left:135px;
+ top: 17px;
}
-#statusmsg {
- position: relative;
- margin-top: 30px;
+#login-msg {
text-align: center;
- font-weight:bold;
+ color: green;
}
#top_section {
padding: 0 151px 0 0;
}
#nick_list {
bottom: 35px;
- border-left: 1px solid #EEE;
line-height: 1.15;
- overflow: auto;
+ overflow: auto;
+ overflow-x: hidden;
position: fixed;
right: 0;
top: 37px;
@@ -150,6 +144,7 @@ a {
border-left: 3px solid #FFD720;
box-shadow: -2px 0 #ccc;
color: white;
+ margin-bottom: 10px;
}
#nick_list ul {
list-style-type: none;
@@ -161,12 +156,15 @@ a {
padding-top: 5px;
font-size: 15px;
}
+#chat_scroller {
+ margin-top: 38px;
+ overflow: auto;
+ overflow-x: hidden;
+ margin-right: 4px;
+ height: 30px;
+}
#chat_body {
- padding: 10px;
- width: 100%;
- margin-top:30px;
- overflow-y: scroll;
- margin-bottom: 30px;
+ width: 100%;
}
#chat_body th,
#chat_body td {
View
24 public/index.html
@@ -15,17 +15,19 @@
</div>
<div class="rocket">
<h2>IRC #nodester channel</h2>
- <p class="off" style="color:red;" id="wrong"> You need to specify a valid nickname</p>
- <form id="join-form">
- <input type="text" id="nick" class="btn" placeholder="username">
- <button href="#" class="btn btn-info" id="join"> Join</button>
- </form>
+ <br />
+ <p class="off" style="color:red;" id="wrong"> You need to specify a valid nickname</p>
+ <p class="off" id="login-msg"></p>
+ <form id="join-form">
+ <input type="text" id="nick" class="btn" placeholder="username">
+ <button href="#" class="btn btn-info" id="join"> Join</button>
+ </form>
</div>
</div>
<div id="chat_wrapper" class="off">
<div id="rocket" class="header" style="background: #FFD720;">
- <img src="/rocket-md-right.png">
+ <img src="/rocket-md-right-small.png">
<span> IRC #nodester </span>
</div>
<div id="top_section">
@@ -33,8 +35,10 @@
<ul id="nick_ul">
</ul>
</div>
- <table id="chat_body">
- </table>
+ <div id="chat_scroller">
+ <table id="chat_body">
+ </table>
+ </div>
</div>
<div id="chat_bar">
<form id="chat-form">
@@ -44,10 +48,6 @@
</div>
</div>
</div>
-<div id="statusBar" class="off">
- <div id="spiner"></div>
- <p id="statusmsg"></p>
-</div>
<div id="js">
<script src="//code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js" type="text/javascript"></script>
View
146 public/js/app.js
@@ -12,18 +12,19 @@ $(document).ready(function(){
var nick_ul = $('#nick_ul');
var chatForm = $('#chat-form');
var joinForm = $('#join-form');
+ var isIrcNoticesEnabled = false; //would prohibit the displaying of "notice" during the login screen
+ var doNotReconnect = false; //would prohibit the reconnect to nodester server after a disconnect
window.counter = 0;
-
$('#nick').focus();
var opts = {
lines : 12,
length : 7,
width : 4,
- radius : 10,
+ radius : 2.8,
color : '#000',
speed : 1,
- trail : 60,
+ trail : 40,
shadow : false,
hwaccel : false,
className : 'spinner',
@@ -32,35 +33,32 @@ $(document).ready(function(){
left : 'auto'
};
+ var enableIrcNotices = function(enabled) {
+ isIrcNoticesEnabled = enabled;
+ };
+
var scrollBody = function() {
- document.body.scrollTop = document.body.clientHeight;
+ $("#chat_scroller").animate({ scrollTop: $("#chat_scroller").prop("scrollHeight") }, 100);
};
- joinForm.on('submit',function(e){
+ joinForm.on('submit',function(e) {
e.preventDefault();
- if ($('#nick').val() !== ''){
- window.target = document.getElementById('spiner');
- window.spinner = new Spinner(opts).spin(window.target);
-
- logBox.slideToggle();
- statusBar.removeClass('off').addClass('loader box');
-
- var nick = window.nick = getNickname($('#nick').val());
- $('<meta/>', {content: nick, name: 'nick'}).appendTo($('head'));
- statusMsg.text(' Joining as '+nick+'...' );
-
- sock = io.connect('http://'+window.location.host);
- sock.on('message', handleMessage);
- sock.on("disconnect", handleDisconnect);
- appendEvent("IRC #nodester", "connected", false);
- sock.send(JSON.stringify({ nickname: nick }));
-
- $('#chat_wrapper').removeClass('off');
- $('#text_input').focus();
+ doNotReconnect = false;
+ if ($('#nick').val() !== '') {
+ $('#wrong').addClass('off');
+ $('#login-msg').removeClass('off');
+ chatBody.text("");
+ if (sock !== null && sock.socket.connected === false) {
+ sock.socket.reconnect();
+ } else {
+ sock = io.connect('http://'+window.location.host);
+ sock.on('message', handleMessage);
+ sock.on('disconnect', handleDisconnect);
+ sock.on('connect', handleConnect);
+ };
} else {
$('#wrong').removeClass('off');
}
- return false;
});
window.onfocus = function(){
@@ -70,18 +68,8 @@ $(document).ready(function(){
var getNickname = function (name) {
var name = name || window.nick || 'Guest' + Math.round(Math.random(0,10)*25);
- switch (name) {
- case "":
- alert("You did not input a nickname, please reload if you wish to connect.");
- sock.disconnect();
- return null;
- case null:
- alert("Login cancelled, please reload if you wish to connect.");
- sock.disconnect();
- return null;
- default:
- return name;
- }
+ nickname = name;
+ return name;
};
var appendMessage = function (from, message, isSelf) {
@@ -163,22 +151,27 @@ $(document).ready(function(){
var handleMessage = function (data) {
var obj = JSON.parse(data);
- window.spinner.stop();
- statusBar.addClass('off');
- if (nickname === null) {
- var tmp = getNickname();
- if (tmp !== null) {
- nickname = tmp;
- rv = sock.send(JSON.stringify({ nickname: nickname }));
- }
- };
+ //window.spinner.stop();
+ //statusBar.addClass('off');
if (obj && obj.messagetype) {
var isSelf = (obj.from == nickname) ? true : false;
switch (obj.messagetype) {
+ case "433": //nick already in use
+ window.spinner.stop();
+ sock.disconnect();
+ $('#login-msg').addClass('off');
+ $('#wrong').text("");
+ $('#wrong').removeClass('off');
+ $('#wrong').text(obj.message);
+ return;
//notice at login
case "notice":
//notice for content
case "notice-msg":
+ if (isIrcNoticesEnabled == true) {
+ appendMessage(obj.from, obj.message, false);
+ }
+ break;
case "message":
appendMessage(obj.from, obj.message, false);
break;
@@ -196,15 +189,26 @@ $(document).ready(function(){
nicks.sort(cisort);
nicksToList();
break;
- case "motd":
- motd += obj.message + "<br />";
- break;
- case "endmotd":
/*
- * the following line disables motd
+ * motd is currently disabled
* just uncomment if you want it
+ * you must enable the server corresponding part as well in irc.js
*/
+ case "motd":
+ //motd += obj.message + "<br />";
+ break;
+ case "endmotd":
//appendEvent(obj.from, obj.messagetype, false);
+
+ //here we use end of motd to signal web irc login completed
+ enableIrcNotices(true);
+ window.spinner.stop();
+ $('<meta/>', {content: nick, name: 'nick'}).appendTo($('head'));
+ $('#chat_wrapper').removeClass('off');
+ $('#text_input').focus();
+ appendEvent("IRC #nodester", "connected", false);
+ $("#chat_scroller").height($("#nick_list").height()-1);
+ logBox.slideToggle();
break;
case "join":
appendEvent(obj.from, obj.messagetype, isSelf);
@@ -228,18 +232,38 @@ $(document).ready(function(){
default:
alert(data);
break;
- }
+ };
} else {
console.log(data);
}
};
- var handleDisconnect = function() {
- appendEvent("*", "disconnected", false);
- nicks = [];
- nicksToList();
- }
+ var handleConnect = function() {
+ //cancel reconnect
+ if (doNotReconnect == true) {
+ return;
+ }
+ var nick = window.nick = getNickname($('#nick').val());
+ $('#login-msg').text("Joining as " + nick + "...");
+ enableIrcNotices(false);
+ sock.send(JSON.stringify({ nickname: nick }));
+ //start spinner
+ window.target = document.getElementById('join-form');
+ window.spinner = new Spinner(opts).spin(window.target);
+ };
+ var handleDisconnect = function() {
+ //set a time delay for disconnect
+ //in case we exit the form we do not want the user to see it
+ //the socket has a reconnect timeout does not help us with irc here
+ doNotReconnect = true;
+ setTimeout( function () {
+ appendEvent("*", "disconnected", false);
+ nicks = [];
+ nicksToList();
+ }, 1000);
+ };
+
var sendMessage = function () {
appendMessage(nickname, textInput.val(), true);
sock.send(JSON.stringify({
@@ -339,5 +363,11 @@ $(document).ready(function(){
} else {
return 0;
}
- };
+ };
+
+ //to resize "chat_scroller" to the size of screen
+ $(window).resize(function() {
+ $("#chat_scroller").height($("#nick_list").height()-1);
+ });
+
});
View
BIN  public/rocket-md-right-small.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Something went wrong with that request. Please try again.