Skip to content

Commit 6472fdd

Browse files
NickP123NickP123
authored
Merge pull request #27 from FACN3/css
create css design
2 parents 2a0d871 + dbd8c37 commit 6472fdd

12 files changed

Lines changed: 149 additions & 68 deletions

File tree

‎database/db_build.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ const buildScript = fs.readFileSync(`${__dirname}/db_build.sql`, `utf8`);
55

66
connect.query(buildScript, (err, res) => {
77
if (err) {
8-
console.log(err);
98
throw err;
109
}
1110
connect.end();

‎public/chatRoom.html‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,28 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8-
<title>Document</title>
8+
<link rel="stylesheet" type="text/css" href="../public/css/style.css">
9+
<title>Chat Room</title>
910
</head>
1011

1112
<body>
1213

13-
<h1>Chat Room</h1>
14-
15-
16-
<section id="messagesArea">
17-
18-
</section>
19-
<section>
20-
<form action="/newMessage" method="POST">
21-
<textarea id="message" name="description"></textarea>
22-
<button id="createMessage">Create Message</button>
23-
</form>
24-
</section>
25-
26-
<form action='/logout' method='POST'>
27-
<button class="logout">Log Out</button>
14+
<header>
15+
<h1 class="headline-title">Chat Room</h1>
16+
</header>
17+
<section id="messagesArea">
18+
</section>
19+
<section>
20+
<form action="/newMessage" method="POST">
21+
<textarea id="description" name="description" class="form-item"></textarea>
22+
<button id="createMessage" class="form-item">Create Message</button>
2823
</form>
24+
</section>
25+
26+
<form action='/logout' method='POST'>
27+
<button class="logout">Log Out</button>
28+
</form>
29+
<script src="../public/js/index.js"></script>
2930
</body>
3031

31-
</html>
32+
</html>

‎public/css/style.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
body,
2+
main,
3+
section,
4+
form {
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
flex-direction: column;
9+
margin: 2vh;
10+
}
11+
12+
.long-form-fix {
13+
margin: 2vh;
14+
}
15+
16+
.headline-title {
17+
font-size: 4em;
18+
}
19+
20+
.form-item {
21+
font-size: 1.5em;
22+
margin: 3vh;
23+
width: 35vw;
24+
height: 6vh;
25+
text-align: center;
26+
}

‎public/js/index.js‎

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,35 @@
1-
// function request(url, callback) {
2-
// var xhr = new XMLHttpRequest();
3-
//
4-
// xhr.onreadystatechange = function() {
5-
// if (xhr.readyState == 4 && xhr.status !== 200) {
6-
// callback(xhr.responseText);
7-
// } else if (xhr.readyState == 4 && xhr.status == 200) {
8-
// callback(null, JSON.parse(xhr.responseText));
9-
// }
10-
// };
11-
// xhr.open("POST", url);
12-
// xhr.send();
13-
// }
1+
(function onLoad() {
2+
fech('/getMessages', 'GET', function(err, messageArray) {
3+
if (err) {
4+
console.log(err);
5+
} else {
6+
var messageArea = document.getElementById('messagesArea');
7+
messageArray.forEach(function(message) {
8+
var messageElement = document.createElement('ul');
9+
var userName = document.createElement('li');
10+
var description = document.createElement('li');
11+
var timeStamp = document.createElement('li');
12+
description.innerText = message.description;
13+
timeStamp.innerText = message.time_stamp;
14+
userName.innerText = message.name;
15+
messageElement.appendChild(userName);
16+
messageElement.appendChild(description);
17+
messageElement.appendChild(timeStamp);
18+
messageArea.appendChild(messageElement);
19+
});
20+
}
21+
});
22+
})();
23+
24+
function fech(url, method, callback) {
25+
var xhr = new XMLHttpRequest();
26+
xhr.onreadystatechange = function() {
27+
if (xhr.readyState == 4 && xhr.status !== 200) {
28+
callback(xhr.responseText);
29+
} else if (xhr.readyState == 4 && xhr.status == 200) {
30+
callback(null, JSON.parse(xhr.responseText));
31+
}
32+
};
33+
xhr.open(method, url);
34+
xhr.send();
35+
}

‎public/login.html‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,27 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta http-equiv="X-UA-Compatible" content="ie=edge">
88
<link rel="stylesheet" type="text/css" href="../public/css/style.css">
9-
<title>Document</title>
9+
<title>WhatsUp Login Page</title>
1010
</head>
1111

1212
<body>
1313
<header>
14-
<h1>Login Page</h1>
14+
<h1 class="headline-title">WhatsUp Login Page</h1>
1515
</header>
1616
<section>
1717
<form action="/login" method="POST">
1818
<label for="email">
19-
<input placeholder="email" id="email" type="text" name="email">
19+
<input placeholder="email" id="email" type="text" name="email" class="form-item">
2020
</label>
2121
<label for="password">
22-
<input placeholder="password" id="password" type="password" name="password"></input>
22+
<input placeholder="password" id="password" type="password" name="password" class="form-item"></input>
2323
</label>
24-
<button id="login">login</button>
25-
<button type="submit"><a href="/registration">Create an accout</a></button>
24+
<button id="login" class="form-item">login</button>
2625
</form>
26+
<a href="/registration" class="form-item">
27+
<button>sign up</button>
28+
</a>
2729
</section>
28-
<script src="../public/js/index.js"></script>
2930
</body>
3031

31-
</html>
32+
</html>

‎public/signUp.html‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,31 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<link rel="stylesheet" type="text/css" href="../public/css/style.css">
89
<title>sign up</title>
910
</head>
1011

1112
<body>
1213
<header>
13-
<h1>sign up</h1>
14+
<h1 class="headline-title">sign up</h1>
1415
</header>
1516
<section>
1617
<form action="/registration" method="POST">
1718
<label for="name">
18-
<input id="name" placeholder="user name" type="text" name="name">
19+
<input id="name" placeholder="user name" type="text" name="name" class="form-item">
1920
</label>
2021
<label for="email">
21-
<input id="email" placeholder="email" type="text" name="email">
22+
<input id="email" placeholder="email" type="text" name="email" class="form-item">
2223
</label>
2324
<label for="password">
24-
<input id="password" type="text" placeholder="password" name="password">
25+
<input id="password" type="password" placeholder="password" name="password" class="form-item">
2526
</label>
2627
<label for="confirmPassword">
27-
<input id="confirmPassword" placeholder="confirm password" type="text" name="confirmPassword">
28+
<input id="confirmPassword" placeholder="confirm password" type="password" name="confirmPassword" class="form-item">
2829
</label>
29-
<button id="signUp" type="submit">sign up</button>
30+
<button id="signUp" type="submit" class="form-item">sign up</button>
3031
</form>
3132
</section>
32-
33-
34-
3533
<script src="../public/js/index.js"></script>
3634
</body>
3735

‎src/handler.js‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ const getData = require('./queries/getData');
88
const { sign, verify } = require('jsonwebtoken');
99

1010
const publicHandler = (req, res) => {
11-
var url = req.url;
12-
11+
var url = req.url; // refactor req => {url}
1312
if (url === '/') {
1413
url = '/public/login.html';
1514
} else if (url.includes('/registration')) {
@@ -37,7 +36,6 @@ const publicHandler = (req, res) => {
3736

3837
//handle chatRoom
3938
const chatRoomHandler = (req, res) => {
40-
console.log(req.headers.cookie);
4139
if (!req.headers.cookie) {
4240
//cheking if the cookie does not exist as in there's no user with tha email signed up, then stay at home!
4341
res.writeHead(302, { Location: '/' });
@@ -86,7 +84,7 @@ const createUser = (req, res) => {
8684
email: formSubmittedData.email,
8785
name: formSubmittedData.name
8886
};
89-
// formSubmittedData.password = newPassword
87+
// refacctor to formSubmittedData.password = newPassword
9088
postData.createUser(values, (err, data) => {
9189
if (err) {
9290
res.writeHead(500, { 'content-type': 'text/html' });
@@ -107,14 +105,11 @@ const login = (req, res) => {
107105
let data = '';
108106
req.on('data', chunk => {
109107
data += chunk;
110-
console.log(chunk);
111108
});
112109
req.on('end', () => {
113110
const submittedLogin = queryString.parse(data);
114-
115111
getData.validUser(submittedLogin.email, (err, result) => {
116112
if (err) {
117-
console.log(err);
118113
} else {
119114
if (result.length == 0) {
120115
res.writeHead(302, {
@@ -131,8 +126,9 @@ const login = (req, res) => {
131126
} else {
132127
const user = {
133128
email: submittedLogin.email,
134-
id: result.id
129+
id: result[0].id
135130
};
131+
//creating a token
136132
const signJWT = sign(user, process.env.SECRET);
137133
res.setHeader('Set-Cookie', `jwt=${signJWT}; Max-Age:9000`);
138134
res.writeHead(302, {
@@ -157,6 +153,7 @@ const message = (req, res) => {
157153
});
158154
req.on('end', () => {
159155
const newMessage = queryString.parse(message);
156+
//decoding cookie
160157
verify(
161158
req.headers.cookie.split('=')[1],
162159
process.env.SECRET,
@@ -175,15 +172,30 @@ const message = (req, res) => {
175172
res.writeHead(500, { 'Content-Type': 'text/html' });
176173
res.end('description is not valid');
177174
} else {
178-
res.writeHead(200, { 'Content-Type': 'text/html' });
175+
res.writeHead(302, {
176+
Location: '/chatRoom'
177+
});
179178
res.end();
180179
}
181180
});
182181
}
183182
}
184183
);
185184
});
186-
req.on('error', err => {});
185+
req.on('error', err => {
186+
console.log(err);
187+
});
188+
};
189+
190+
const getMessages = (req, res) => {
191+
getData.getMessages((err, messages) => {
192+
if (err) {
193+
console.log(err);
194+
} else {
195+
res.writeHead(200, { 'content-type': 'application/json' });
196+
res.end(JSON.stringify(messages));
197+
}
198+
});
187199
};
188200

189201
//LOG OUT
@@ -202,5 +214,6 @@ module.exports = {
202214
login,
203215
chatRoomHandler,
204216
message,
205-
logout
217+
logout,
218+
getMessages
206219
};

‎src/hash.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const comparePasswords = (password, hashedPassword, callback) => {
2424
} else {
2525
callback(null, res);
2626
}
27+
// refactor to callback(err, res);
2728
});
2829
};
2930

‎src/queries/getData.js‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,26 @@ const validUser = (email, cb) => {
55
if (err) {
66
cb(err);
77
} else {
8-
cb(null, res.rows); // get all the data
8+
cb(null, res.rows);
9+
// refactor to cb(err, res.rows);
910
}
1011
});
1112
};
12-
module.exports = { validUser };
13+
14+
const getMessages = cb => {
15+
connect.query(
16+
`SELECT *
17+
FROM messages m INNER JOIN users u
18+
on m.userid = u.id
19+
LIMIT 50`,
20+
(err, res) => {
21+
if (err) {
22+
cb(err);
23+
} else {
24+
cb(null, res.rows);
25+
//refactor to cb(err, res.rows);
26+
}
27+
}
28+
);
29+
};
30+
module.exports = { validUser, getMessages };

‎src/queries/postData.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,22 @@ const createUser = (values, cb) => {
1010
} else {
1111
cb(null, JSON.stringify({ success: 'This was a success' }));
1212
}
13-
//cb(err, JSON.stringify({ success: 'This was a success' }));
13+
// refactor to cb(err, JSON.stringify({ success: 'This was a success' }));
1414
}
1515
);
1616
};
1717

1818
const createMessage = (values, cb) => {
19-
console.log(values);
2019
connect.query(
21-
`INSERT INTO messages (userid, time_stamp, description) VALUES ($1, $2, $3,)`,
22-
[values.userid, '20017-12-16 06:00:00', values.description],
20+
`INSERT INTO messages (userid, time_stamp, description)VALUES ($1, $2, $3)`,
21+
[values.userid, values.time_stamp, values.description],
2322
(err, data) => {
2423
if (err) {
2524
cb(err);
2625
} else {
2726
cb(null, JSON.stringify({ success: 'This was a success' }));
2827
}
28+
// refactor to cb(err,JSON.stringify({ success: 'This was a success' }))
2929
}
3030
);
3131
};

0 commit comments

Comments
 (0)