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

Make working login page

parent 5b49e661
// Setup basic express server
var express = require('express');
var app = express();
var path = require('path');
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var port = process.env.PORT || 3000;
var express = require('express'),
app = express(),
path = require('path'),
server = require('http').createServer(app),
io = require('socket.io')(server),
port = process.env.PORT || 3000,
bodyParser = require('body-parser');
server.listen(port, () => {
console.log('Server listening at port %d', port);
});
app.use(bodyParser.urlencoded({ extended: true }));
// Routing
app.use(express.static(path.join(__dirname, 'public')));
......
......@@ -6,5 +6,9 @@ exports.home = 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() {
var $messages = $('.messages'); // Messages area
var $inputMessage = $('.inputMessage'); // Input message input box
var $loginPage = $('.login.page'); // The login page
var $chatPage = $('.chat.page'); // The chatroom page
// Prompt for setting a username
var username;
var connected = false;
var typing = false;
var lastTypingTime;
......@@ -38,22 +36,6 @@ $(function() {
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
const sendMessage = () => {
var message = $inputMessage.val();
......@@ -216,11 +198,6 @@ $(function() {
// Click events
// Focus input when clicking anywhere on login page
$loginPage.click(() => {
$currentInput.focus();
});
// Focus input when clicking on the message input's border
$inputMessage.click(() => {
$inputMessage.focus();
......@@ -354,14 +331,9 @@ $(function() {
});
// Get rid of legacy login system
const urlParams = new URLSearchParams(window.location.search);
username = urlParams.get('u');
if(username == null) username = makeid();
if(username == null || username == undefined) username = makeid();
socket.emit('add user', username);
$loginPage.fadeOut();
$chatPage.show();
$loginPage.off('click');
$currentInput = $inputMessage.focus();
......
......@@ -61,46 +61,6 @@ ul {
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 {
......
var express = require('express'),
router = express.Router(),
indexController = require('../controllers');
controller = require('../controllers');
router.route('/')
.get(indexController.home);
.get(controller.home);
router.route('/room')
.get(indexController.room);
.get(controller.redirect_home)
.post(controller.room);
module.exports = router
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OnMap - Location Sharing</title>
<link rel="stylesheet" href="/assets/style.css">
<meta charset="UTF-8">
<title>OnMap - Location Sharing</title>
<link rel="stylesheet" href="/assets/style.css">
<!-- OpenLayer CSS -->
<link href="/assets/openlayer.min.css" rel="stylesheet">
<!-- OpenLayer CSS -->
<link href="/assets/openlayer.min.css" rel="stylesheet">
</head>
<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>
</html>
\ No newline at end of file
......@@ -2,13 +2,14 @@
{% block content %}
<div class="container">
<form method="POST" action="/room">
<label for="room-name">Room:</label>
<input id="room-name" type="text" name="room">
<label for="room-name">Username:</label>
<input id="user-name" type="text" name="username">
</form>
</div>
<div class="container">
<form method="POST" action="/room">
<label for="room-name">Room:</label>
<input id="room-name" type="text" name="room">
<label for="room-name">Username:</label>
<input id="user-name" type="text" name="username">
<button type="submit">Join</button>
</form>
</div>
{% endblock %}
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OnMap - Location Sharing</title>
<link rel="stylesheet" href="assets/style.css">
{% extends '_layout.html' %}
<!-- OpenLayer CSS -->
<link href="assets/openlayer.min.css" rel="stylesheet">
</head>
<body>
{% block content %}
<div class="container-main">
<div class="container-main">
<div id="map" class="map"></div>
<div id="info" style="display: none;"></div>
<p>
Position accuracy : <code id="accuracy"></code>&nbsp;&nbsp;
Altitude : <code id="altitude"></code>&nbsp;&nbsp;
Altitude accuracy : <code id="altitudeAccuracy"></code>&nbsp;&nbsp;
Heading : <code id="heading"></code>&nbsp;&nbsp;
Speed : <code id="speed"></code>
</p>
<div id="map" class="map"></div>
<div id="info" style="display: none;"></div>
<p>
Position accuracy : <code id="accuracy"></code>&nbsp;&nbsp;
Altitude : <code id="altitude"></code>&nbsp;&nbsp;
Altitude accuracy : <code id="altitudeAccuracy"></code>&nbsp;&nbsp;
Heading : <code id="heading"></code>&nbsp;&nbsp;
Speed : <code id="speed"></code>
</p>
</div>
</div>
<div class="container-side">
<ul class="pages">
<li class="chat page">
<div class="chatArea">
<ul class="messages"></ul>
</div>
<input class="inputMessage" placeholder="Type here..."/>
</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>
</div>
<div class="container-side">
<ul class="pages">
<li class="chat page">
<div class="chatArea">
<ul class="messages"></ul>
</div>
<input class="inputMessage" placeholder="Type here..."/>
</li>
</ul>
</div>
{% 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>
</html>
\ No newline at end of file
{% block scripts %}
<script src="/socket.io/socket.io.js"></script>
<script src="assets/openlayer.min.js"></script>
<script>var username = "{{ username | escape }}";</script>
<script src="assets/main.js"></script>
{% endblock %}
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