Autologin, short username

This commit is contained in:
Dan Seripap 2016-01-06 15:23:49 -05:00
parent 9d92e59dcd
commit b727a046c0
4 changed files with 9 additions and 20 deletions

View File

@ -10,6 +10,7 @@
"express-session": "^1.12.1", "express-session": "^1.12.1",
"express-socket.io-session": "^1.3.1", "express-socket.io-session": "^1.3.1",
"mustache-express": "^1.2.2", "mustache-express": "^1.2.2",
"shortid": "^2.2.4",
"socket.io": "^1.4.0", "socket.io": "^1.4.0",
"underscore": "^1.8.3", "underscore": "^1.8.3",
"uuid": "^2.0.1" "uuid": "^2.0.1"

View File

@ -5,6 +5,7 @@ import session from 'express-session';
import Redis from 'connect-redis'; import Redis from 'connect-redis';
import Io from 'socket.io'; import Io from 'socket.io';
import http from 'http'; import http from 'http';
import shortid from 'shortid';
const app = express(); const app = express();
const server = http.createServer(app); const server = http.createServer(app);
@ -37,7 +38,7 @@ app.use(express.static(__dirname + '/public'));
app.get('/', (req, res) => { app.get('/', (req, res) => {
res.render('index', {}); res.render('index', {username: shortid.generate()});
}); });
@ -53,7 +54,6 @@ io.on('connection', (socket) => {
}); });
}); });
// when the client emits 'add user', this listens and executes
socket.on('add user', (username) => { socket.on('add user', (username) => {
if (addedUser) return; if (addedUser) return;

View File

@ -13,7 +13,6 @@ $(function() {
var $messages = $('.messages'); // Messages area var $messages = $('.messages'); // Messages area
var $inputMessage = $('.inputMessage'); // Input message input box var $inputMessage = $('.inputMessage'); // Input message input box
var $loginPage = $('.login.page'); // The login page
var $chatPage = $('.chat.page'); // The chatroom page var $chatPage = $('.chat.page'); // The chatroom page
// Prompt for setting a username // Prompt for setting a username
@ -37,13 +36,10 @@ $(function() {
// Sets the client's username // Sets the client's username
function setUsername () { function setUsername () {
username = cleanInput($usernameInput.val().trim()); username = window.username;
// If the username is valid // If the username is valid
if (username) { if (username) {
$loginPage.fadeOut();
$chatPage.show(); $chatPage.show();
$loginPage.off('click');
$currentInput = $inputMessage.focus(); $currentInput = $inputMessage.focus();
// Tell the server your username // Tell the server your username
@ -211,13 +207,6 @@ $(function() {
updateTyping(); updateTyping();
}); });
// Click events
// Focus input when clicking anywhere on login page
$loginPage.click(function () {
$currentInput.focus();
});
// Focus input when clicking on the message input's border // Focus input when clicking on the message input's border
$inputMessage.click(function () { $inputMessage.click(function () {
$inputMessage.focus(); $inputMessage.focus();
@ -263,4 +252,6 @@ $(function() {
socket.on('stop typing', function (data) { socket.on('stop typing', function (data) {
removeChatTyping(data); removeChatTyping(data);
}); });
setUsername()
}); });

View File

@ -4,6 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Hi</title> <title>Hi</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script>
window.username = '{{username}}';
</script>
</head> </head>
<body> <body>
<ul class="pages"> <ul class="pages">
@ -13,12 +16,6 @@
</div> </div>
<input class="inputMessage" placeholder="Type here..."/> <input class="inputMessage" placeholder="Type here..."/>
</li> </li>
<li class="login page">
<div class="form">
<h3 class="title">What's your nickname?</h3>
<input class="usernameInput" type="text" maxlength="14" />
</div>
</li>
</ul> </ul>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>