hasura-imad · Jinesh210 · Feb 10, 2017 · Feb 10, 2017 · Feb 11, 2017 · Feb 11, 2017
diff --git a/server.js b/server.js
@@ -1,20 +1,186 @@
 var express = require('express');
 var morgan = require('morgan');
 var path = require('path');
+var Pool = require('pg').Pool;
+var crypto = require('crypto');
+var bodyParser = require('body-parser');
+var session = require('express-session');
+
+var config = {
+ user: 'jinesh220',
+ database: 'jinesh220',
+ host: 'db.imad.hasura-app.io',
+ port: '5432',
+ password:db-jinesh220-47751
+};
 
 var app = express();
 app.use(morgan('combined'));
+app.use(bodyParser.json());
+app.use(session({
+ secret: 'someRandomSecretValue',
+ cookie: { maxAge: 1000 * 60 * 60 * 24 * 30}
+}));
+
+
+function createTemplate (data) {
+ var title = data.title;
+ var date = data.date;
+ var heading = data.heading;
+ var content = data.content;
+
+ var htmlTemplate = `
+ <html>
+ <head>
+ <title>
+ ${title}
+ </title>
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link href="/ui/style.css" rel="stylesheet" />
+ </head> 
+ <body>
+ <div class="container">
+ <div>
+ <a href="/">Home</a>
+ </div>
+ <hr/>
+ <h3>
+ ${heading}
+ </h3>
+ <div>
+ ${date.toDateString()}
+ </div>
+ <div>
+ ${content}
+ </div>
+ <hr/>
+ <h4>Comments</h4>
+ <div id="comment_form">
+ </div>
+ <div id="comments">
+ <center>Loading comments...</center>
+ </div>
+ </div>
+ <script type="text/javascript" src="/ui/article.js"></script>
+ </body>
+ </html>
+ `;
+ return htmlTemplate;
+}
 
 app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'ui', 'index.html'));
 });
 
-app.get('/ui/style.css', function (req, res) {
- res.sendFile(path.join(__dirname, 'ui', 'style.css'));
+
+function hash (input, salt) {
+ // How do we create a hash?
+ var hashed = crypto.pbkdf2Sync(input, salt, 10000, 512, 'sha512');
+ return ["pbkdf2", "10000", salt, hashed.toString('hex')].join('$');
+}
+
+
+app.get('/hash/:input', function(req, res) {
+ var hashedString = hash(req.params.input, 'this-is-some-random-string');
+ res.send(hashedString);
+});
+
+app.post('/create-user', function (req, res) {
+ // username, password
+ // {"username": "tanmai", "password": "password"}
+ // JSON
+ var username = req.body.username;
+ var password = req.body.password;
+ var salt = crypto.randomBytes(128).toString('hex');
+ var dbString = hash(password, salt);
+ pool.query('INSERT INTO "user" (username, password) VALUES ($1, $2)', [username, dbString], function (err, result) {
+ if (err) {
+ res.status(500).send(err.toString());
+ } else {
+ res.send('User successfully created: ' + username);
+ }
+ });
+});
+
+
+
+
+
+var pool = new Pool(config);
+
+app.get('/get-articles', function (req, res) {
+ // make a select request
+ // return a response with the results
+ pool.query('SELECT * FROM article ORDER BY date DESC', function (err, result) {
+ if (err) {
+ res.status(500).send(err.toString());
+ } else {
+ res.send(JSON.stringify(result.rows));
+ }
+ });
+});
+
+app.get('/get-comments/:articleName', function (req, res) {
+ // make a select request
+ // return a response with the results
+ pool.query('SELECT comment.*, "user".username FROM article, comment, "user" WHERE article.title = $1 AND article.id = comment.article_id AND comment.user_id = "user".id ORDER BY comment.timestamp DESC', [req.params.articleName], function (err, result) {
+ if (err) {
+ res.status(500).send(err.toString());
+ } else {
+ res.send(JSON.stringify(result.rows));
+ }
+ });
+});
+
+app.post('/submit-comment/:articleName', function (req, res) {
+ // Check if the user is logged in
+ if (req.session && req.session.auth && req.session.auth.userId) {
+ // First check if the article exists and get the article-id
+ pool.query('SELECT * from article where title = $1', [req.params.articleName], function (err, result) {
+ if (err) {
+ res.status(500).send(err.toString());
+ } else {
+ if (result.rows.length === 0) {
+ res.status(400).send('Article not found');
+ } else {
+ var articleId = result.rows[0].id;
+ // Now insert the right comment for this article
+ pool.query(
+ "INSERT INTO comment (comment, article_id, user_id) VALUES ($1, $2, $3)",
+ [req.body.comment, articleId, req.session.auth.userId],
+ function (err, result) {
+ if (err) {
+ res.status(500).send(err.toString());
+ } else {
+ res.status(200).send('Comment inserted!')
+ }
+ });
+ }
+ }
+ }); 
+ } else {
+ res.status(403).send('Only logged in users can comment');
+ }
+});
+
+app.get('/articles/:articleName', function (req, res) {
+ // SELECT * FROM article WHERE title = '\'; DELETE WHERE a = \'asdf'
+ pool.query("SELECT * FROM article WHERE title = $1", [req.params.articleName], function (err, result) {
+ if (err) {
+ res.status(500).send(err.toString());
+ } else {
+ if (result.rows.length === 0) {
+ res.status(404).send('Article not found');
+ } else {
+ var articleData = result.rows[0];
+ res.send(createTemplate(articleData));
+ }
+ }
+ });
 });
 
-app.get('/ui/madi.png', function (req, res) {
- res.sendFile(path.join(__dirname, 'ui', 'madi.png'));
+app.get('/ui/:fileName', function (req, res) {
+ res.sendFile(path.join(__dirname, 'ui', req.params.fileName));
 });
 
 

diff --git a/ui/article-one.html b/ui/article-one.html
@@ -0,0 +1,19 @@
+<html>
+ <head>
+ <title>
+ Jinesh
+ </title>
+ <meta name="viewport" content="width-device-width,intial-scale=1"/>
+ <link href="/ui/style.css" rel="stylesheet" />
+
+ </head>
+ <body>
+ <div class="st">
+<h1>hii</h1>
+<div>
+ <a href="/" >Home</a>
+</div>
+<p> hii this me</p>
+</div>
+</body>
+</html>
diff --git a/ui/article-three.html b/ui/article-three.html
@@ -0,0 +1,14 @@
+<html>
+ <head>
+ <title>
+ Jinesh
+ </title>
+ <meta name="viewport" content="width-device-width,intial-scale=1"/>
+ </head>
+ <body>
+<h1>hii</h1>
+<div>
+ <a href="/" >Home</a>
+</div>
+</body>
+</html>
diff --git a/ui/article-two.html b/ui/article-two.html
@@ -0,0 +1,14 @@
+<html>
+ <head>
+ <title>
+ Jinesh1
+ </title>
+ <meta name="viewport" content="width-device-width,intial-scale=1"/>
+ </head>
+ <body>
+<h1>hii</h1>
+<div>
+ <a href="/" >Home</a>
+</div>
+</body>
+</html>
diff --git a/ui/article.js b/ui/article.js
@@ -0,0 +1,100 @@
+// Eg: coco98.imad.hasura-app.io/articles/article-one will result in article-one
+var currentArticleTitle = window.location.pathname.split('/')[2];
+
+function loadCommentForm () {
+ var commentFormHtml = `
+ <h5>Submit a comment</h5>
+ <textarea id="comment_text" rows="5" cols="100" placeholder="Enter your comment here..."></textarea>
+ <br/>
+ <input type="submit" id="submit" value="Submit" />
+ <br/>
+ `;
+ document.getElementById('comment_form').innerHTML = commentFormHtml;
+
+ // Submit username/password to login
+ var submit = document.getElementById('submit');
+ submit.onclick = function () {
+ // Create a request object
+ var request = new XMLHttpRequest();
+
+ // Capture the response and store it in a variable
+ request.onreadystatechange = function () {
+ if (request.readyState === XMLHttpRequest.DONE) {
+ // Take some action
+ if (request.status === 200) {
+ // clear the form & reload all the comments
+ document.getElementById('comment_text').value = '';
+ loadComments(); 
+ } else {
+ alert('Error! Could not submit comment');
+ }
+ submit.value = 'Submit';
+ }
+ };
+
+ // Make the request
+ var comment = document.getElementById('comment_text').value;
+ request.open('POST', '/submit-comment/' + currentArticleTitle, true);
+ request.setRequestHeader('Content-Type', 'application/json');
+ request.send(JSON.stringify({comment: comment})); 
+ submit.value = 'Submitting...';
+
+ };
+}
+
+function loadLogin () {
+ // Check if the user is already logged in
+ var request = new XMLHttpRequest();
+ request.onreadystatechange = function () {
+ if (request.readyState === XMLHttpRequest.DONE) {
+ if (request.status === 200) {
+ loadCommentForm(this.responseText);
+ }
+ }
+ };
+
+ request.open('GET', '/check-login', true);
+ request.send(null);
+}
+
+function escapeHTML (text)
+{
+ var $text = document.createTextNode(text);
+ var $div = document.createElement('div');
+ $div.appendChild($text);
+ return $div.innerHTML;
+}
+
+function loadComments () {
+ // Check if the user is already logged in
+ var request = new XMLHttpRequest();
+ request.onreadystatechange = function () {
+ if (request.readyState === XMLHttpRequest.DONE) {
+ var comments = document.getElementById('comments');
+ if (request.status === 200) {
+ var content = '';
+ var commentsData = JSON.parse(this.responseText);
+ for (var i=0; i< commentsData.length; i++) {
+ var time = new Date(commentsData[i].timestamp);
+ content += `<div class="comment">
+ <p>${escapeHTML(commentsData[i].comment)}</p>
+ <div class="commenter">
+ ${commentsData[i].username} - ${time.toLocaleTimeString()} on ${time.toLocaleDateString()} 
+ </div>
+ </div>`;
+ }
+ comments.innerHTML = content;
+ } else {
+ comments.innerHTML('Oops! Could not load comments!');
+ }
+ }
+ };
+
+ request.open('GET', '/get-comments/' + currentArticleTitle, true);
+ request.send(null);
+}
+
+
+// The first thing to do is to check if the user is logged in!
+loadLogin();
+loadComments();
diff --git a/ui/index.html b/ui/index.html
@@ -4,12 +4,26 @@
  <link href="/ui/style.css" rel="stylesheet" />
  </head>
  <body>
- <div class="center">
- <img src="/ui/madi.png" class="img-medium"/>
- </div>
- <br>
- <div class="center text-big bold">
- Hi! I am your webapp.
+ <div class="container">
+ <div class="center">
+ <img id='madi' src="https://pbs.twimg.com/profile_images/794285789240623104/Cyio02cd_400x400.jpg" class="img-medium"/>
+ </div>
+ <h3>About Me</h3>
+ <div>
+ Hi. My name is Tanmai Gopal<br/>
+ I work at Hasura
+ </div>
+ <hr/>
+ <div id="login_area">
+ <center>Loading login status...</center>
+ </div>
+ <hr/>
+ <h3>My Articles</h3>
+ <div id="articles">
+ <center>Loading articles...</center>
+ </div>
+ <div class="footer">
+ </div>
  </div>
  <script type="text/javascript" src="/ui/main.js">
  </script>