Commit b797ed77 authored by Corentin Mors's avatar Corentin Mors
Browse files

Make working login page

parent 5b49e661
// Setup basic express server // Setup basic express server
var express = require('express'); var express = require('express'),
var app = express(); app = express(),
var path = require('path'); path = require('path'),
var server = require('http').createServer(app); server = require('http').createServer(app),
var io = require('socket.io')(server); io = require('socket.io')(server),
var port = process.env.PORT || 3000; port = process.env.PORT || 3000,
bodyParser = require('body-parser');
server.listen(port, () => { server.listen(port, () => {
console.log('Server listening at port %d', port); console.log('Server listening at port %d', port);
}); });
app.use(bodyParser.urlencoded({ extended: true }));
// Routing // Routing
app.use(express.static(path.join(__dirname, 'public'))); app.use(express.static(path.join(__dirname, 'public')));
......
...@@ -6,5 +6,9 @@ exports.home = function(req, res, next) { ...@@ -6,5 +6,9 @@ exports.home = function(req, res, next) {
} }
exports.room = function(req, res, next) { exports.room = function(req, res, next) {
res.render('room'); res.render('room', {room: req.body.room, username: req.body.username});
}
exports.redirect_home = function(req, res, next) {
res.redirect('/');
} }
\ No newline at end of file
...@@ -17,11 +17,9 @@ $(function() { ...@@ -17,11 +17,9 @@ $(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
var username;
var connected = false; var connected = false;
var typing = false; var typing = false;
var lastTypingTime; var lastTypingTime;
...@@ -38,22 +36,6 @@ $(function() { ...@@ -38,22 +36,6 @@ $(function() {
log(message); log(message);
} }
// Sets the client's username
const setUsername = () => {
username = cleanInput($usernameInput.val().trim());
// If the username is valid
if (username) {
$loginPage.fadeOut();
$chatPage.show();
$loginPage.off('click');
$currentInput = $inputMessage.focus();
// Tell the server your username
socket.emit('add user', username);
}
}
// Sends a chat message // Sends a chat message
const sendMessage = () => { const sendMessage = () => {
var message = $inputMessage.val(); var message = $inputMessage.val();
...@@ -216,11 +198,6 @@ $(function() { ...@@ -216,11 +198,6 @@ $(function() {
// Click events // Click events
// Focus input when clicking anywhere on login page
$loginPage.click(() => {
$currentInput.focus();
});
// Focus input when clicking on the message input's border // Focus input when clicking on the message input's border
$inputMessage.click(() => { $inputMessage.click(() => {
$inputMessage.focus(); $inputMessage.focus();
...@@ -354,14 +331,9 @@ $(function() { ...@@ -354,14 +331,9 @@ $(function() {
}); });
// Get rid of legacy login system if(username == null || username == undefined) username = makeid();
const urlParams = new URLSearchParams(window.location.search);
username = urlParams.get('u');
if(username == null) username = makeid();
socket.emit('add user', username); socket.emit('add user', username);
$loginPage.fadeOut();
$chatPage.show(); $chatPage.show();
$loginPage.off('click');
$currentInput = $inputMessage.focus(); $currentInput = $inputMessage.focus();
......
...@@ -61,46 +61,6 @@ ul { ...@@ -61,46 +61,6 @@ ul {
width: 100%; width: 100%;
} }
/* Login Page */
.login.page {
background-color: #000;
}
.login.page .form {
height: 100px;
margin-top: -100px;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
.login.page .form .usernameInput {
background-color: transparent;
border: none;
border-bottom: 2px solid #fff;
outline: none;
padding-bottom: 15px;
text-align: center;
width: 400px;
}
.login.page .title {
font-size: 200%;
}
.login.page .usernameInput {
font-size: 200%;
letter-spacing: 3px;
}
.login.page .title, .login.page .usernameInput {
color: #fff;
font-weight: 100;
}
/* Chat page */ /* Chat page */
.chat.page { .chat.page {
......
var express = require('express'), var express = require('express'),
router = express.Router(), router = express.Router(),
indexController = require('../controllers'); controller = require('../controllers');
router.route('/') router.route('/')
.get(indexController.home); .get(controller.home);
router.route('/room') router.route('/room')
.get(indexController.room); .get(controller.redirect_home)
.post(controller.room);
module.exports = router module.exports = router
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>OnMap - Location Sharing</title> <title>OnMap - Location Sharing</title>
<link rel="stylesheet" href="/assets/style.css"> <link rel="stylesheet" href="/assets/style.css">
<!-- OpenLayer CSS --> <!-- OpenLayer CSS -->
<link href="/assets/openlayer.min.css" rel="stylesheet"> <link href="/assets/openlayer.min.css" rel="stylesheet">
</head> </head>
<body> <body>
{% block content %} {% block content %}
{% endblock %} {% endblock %}
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
{% block scripts %}{% endblock %}
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="assets/openlayer.min.js"></script>
<script src="assets/main.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -2,13 +2,14 @@ ...@@ -2,13 +2,14 @@
{% block content %} {% block content %}
<div class="container"> <div class="container">
<form method="POST" action="/room"> <form method="POST" action="/room">
<label for="room-name">Room:</label> <label for="room-name">Room:</label>
<input id="room-name" type="text" name="room"> <input id="room-name" type="text" name="room">
<label for="room-name">Username:</label> <label for="room-name">Username:</label>
<input id="user-name" type="text" name="username"> <input id="user-name" type="text" name="username">
</form> <button type="submit">Join</button>
</div> </form>
</div>
{% endblock %} {% endblock %}
\ No newline at end of file
<!doctype html> {% extends '_layout.html' %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OnMap - Location Sharing</title>
<link rel="stylesheet" href="assets/style.css">
<!-- OpenLayer CSS --> {% block content %}
<link href="assets/openlayer.min.css" rel="stylesheet">
</head>
<body>
<div class="container-main"> <div class="container-main">
<div id="map" class="map"></div> <div id="map" class="map"></div>
<div id="info" style="display: none;"></div> <div id="info" style="display: none;"></div>
<p> <p>
Position accuracy : <code id="accuracy"></code>&nbsp;&nbsp; Position accuracy : <code id="accuracy"></code>&nbsp;&nbsp;
Altitude : <code id="altitude"></code>&nbsp;&nbsp; Altitude : <code id="altitude"></code>&nbsp;&nbsp;
Altitude accuracy : <code id="altitudeAccuracy"></code>&nbsp;&nbsp; Altitude accuracy : <code id="altitudeAccuracy"></code>&nbsp;&nbsp;
Heading : <code id="heading"></code>&nbsp;&nbsp; Heading : <code id="heading"></code>&nbsp;&nbsp;
Speed : <code id="speed"></code> Speed : <code id="speed"></code>
</p> </p>
</div> </div>
<div class="container-side"> <div class="container-side">
<ul class="pages"> <ul class="pages">
<li class="chat page"> <li class="chat page">
<div class="chatArea"> <div class="chatArea">
<ul class="messages"></ul> <ul class="messages"></ul>
</div> </div>
<input class="inputMessage" placeholder="Type here..."/> <input class="inputMessage" placeholder="Type here..."/>
</li> </li>
<li class="login page"> </ul>
<div class="form"> </div>
<h3 class="title">What's your nickname?</h3>
<input class="usernameInput" type="text" maxlength="14" /> {% endblock %}
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> {% block scripts %}
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script src="assets/openlayer.min.js"></script> <script src="assets/openlayer.min.js"></script>
<script src="assets/main.js"></script> <script>var username = "{{ username | escape }}";</script>
</body> <script src="assets/main.js"></script>
</html> {% endblock %}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment