good knowledge bad anology

server.js

@@ -1,18 +1,248 @@
 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: 'ssttrinath',
+    database: 'ssttrinath',
+    host: 'db.imad.hasura-app.io',
+    port: '5432',
+    password: process.env.DB_PASSWORD
+};
 
 var app = express();
 app.use(morgan('combined'));
+app.use(bodyParser.json());
+app.use(session({
+    secret: 'someRandomStringValue',
+    cookie: {maxAge: 1000* 60* 60}
+}));
+
+var counter=0;
+app.get('/counter', function(req, res) {
+    counter++;
+    res.send(counter.toString());
+});
+
+function hash(input, salt) {
+    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
+    //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 is successfully created with username '+username);
+        }
+    });
+});
+
+app.post('/login', function(req, res){
+     var username = req.body.username;
+    var password = req.body.password;
+
+    pool.query('SELECT * FROM "user" WHERE username =$1', [username], function(err, result) {
+        if(err) {
+            res.status(500).send(err.toString());
+        } else {
+            if(result.rows.length === 0) {
+                res.status(403).send('Username/Password is incorrect!!!');
+            } else {
+                //match the password
+                var dbString = result.rows[0].password;
+                var salt = dbString.split('$')[2];
+                var hashedPassword = hash(password, salt);  //creating hashed password with the password submitted by the user while login
+                if(hashedPassword === dbString) {       //matching stored password and subitted password.
+
+                    //set a session
+                    req.session.auth = {userId: result.rows[0].id};
+                    //set cookie with a session Id
+                    //internally, on the server side, it maps the session id to on the object
+                    //{auth: {userId }}
+
+                    res.send('credentials are correct!');
+                } else {
+                    res.status(403).send('Username/Password is incorrect!!!');   
+                }
+            }
+        }
+    });
+});
+
+app.get('/check-login', function(req, res) {
+   if(req.session && req.session.auth && req.session.auth.userId) {
+       res.send('yes' );
+   } else {
+       res.send('no');
+   }
+});
+
+app.get('/logout', function(req, res) {
+    delete req.session.auth;
+    res.send('Logged out!');
+});
+
+/*
+app.get('renderlogin', function(req, res) {
+   var region =  document.getElementById('')
+});
+
+app.get('renderlogin', function(req, res) {
+
+});
+*/
 
 app.get('/', function (req, res) {
   res.sendFile(path.join(__dirname, 'ui', 'index.html'));
 });
 
+var names=[];
+app.get('/submit-name', function(req, res) {
+    var name = req.query.name;
+    names.push(name);
+    res.send(JSON.stringify(names));
+});
+
+var pool = new Pool(config);
+/*
+app.get('/test-db', function(req, res) {
+    //make a select request
+    //return a response with the results
+    pool.query('SELECT * FROM test', function(err, result){
+        if(err) {
+            res.status(500).send(err.toString());
+        } else {
+            res.send(JSON.stringify(result.rows));
+        }
+    });
+});
+*/
+var createTemplate = function(data) { 
+    var title = data.title;
+    var heading = data.heading;
+    var date = data.date;
+    var content = data.content;
+    var template =  `
+
+        <html>
+        <head>
+            <title>
+                ${title}
+            </title>
+            <meta name="view-port" content="width=device-width, initial-scale=1/">
+            <!--<link type="text/css" rel="stylesheet" href="ui/style.css"/>-->
+            <style>
+                body{
+                    background-color: lightgrey;
+                    padding: 0px 20px 0px 20px ;
+                }
+
+                .container {
+                    max-width: 800px;
+                    font-family: 'Roboto', sans-serif;
+                    padding: 60px 40px 40px 40px;
+                    margin: 0 auto;
+                    background-color: #ffffff;
+                }
+
+                .heading{
+                    color: #f45f42;
+                }
+
+                .date{
+                    color: #4286f4;
+                }
+
+                .center {
+                    text-align: center;
+                }
+
+                .text-big {
+                    font-size: 300%;
+                }
+
+                .bold {
+                    font-weight: bold;
+                }
+
+                .img-medium {
+                    height: 200px;
+                }
+            </style>
+            <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+        </head>
+        <body>
+            <div class="container">
+                <div>
+                    <a href="/">Home</a>
+                </div>
+                <hr/>
+                <h2 class="heading">
+                    ${heading}
+                </h2>
+                <div class="date">
+                    ${date.toDateString()}
+                </div>
+                <div>
+                    ${content}
+                </div>
+                <hr />
+                <div class="comments">
+                    <h3>Comments</h3>
+                    <hr />
+                    <textarea maxlength=150></textarea> <br>
+                    <input type="submit" id="submit-comm">
+                    <input type="reset" id="clear">
+                </div>
+            </div>
+        </body>
+    </html>
+    `;
+    return template;
+};
+
+app.get('/articles/:articleName', function(req, res){
+    //aticleName create the object as per the url typed by user.
+
+    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/style.css', function (req, res) {
   res.sendFile(path.join(__dirname, 'ui', 'style.css'));
 });
 
+app.get('/ui/main.js', function (req, res) {
+  res.sendFile(path.join(__dirname, 'ui', 'main.js'));
+});
+
 app.get('/ui/madi.png', function (req, res) {
   res.sendFile(path.join(__dirname, 'ui', 'madi.png'));
 });

ui/index.html

@@ -2,16 +2,34 @@
 <html>
     <head>
         <link href="/ui/style.css" rel="stylesheet" />
+        <style>
+            ul li{
+                display: inline;
+                margin: 0px 10px 0px 10px;
+            }
+        </style>
     </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://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAo2AAAAJDRlNTgyMzUxLTQ0YmUtNGUwZi05NmRkLTVmZTFjZGIwNTNmNQ.jpg" class="img-medium"/>
+            </div>
+            <hr />
+            <div>
+                <h3>Personal</h3>
+                Hi! I am Saka Sai Trinath and this is my webapp.
+            </div>
+            <hr />
+            <div class="footer" id="user-session-area">
+                <!-- <h3>Login into your account</h3>
+                <input type="text" id="username" placeholder="Username">
+                <input type="text" id="password">
+                <button id="login">Login</button>
+                <button id="register">Register</button> -->
+            </div>
+            <hr />
         </div>
         <script type="text/javascript" src="/ui/main.js">
         </script>
     </body>
-</html>
+</html>

ui/main.js

@@ -1 +1,103 @@
-console.log('Loaded!');
+
+function loginForm() {
+    var region = document.getElementById('user-session-area');
+    region.innerHTML = `
+        <h3>Login into your account</h3>
+        <input type="text" id="username" placeholder="Username">
+        <input type="text" id="password">
+        <br>
+        <button id="login">Login</button>
+        <button id="register">Register</button>
+    `;
+}
+
+loginForm();
+
+function loggedForm() {
+    var region = document.getElementById('user-session-area');
+    region.innerHTML = `
+        <h3> Hi </h3>
+        <a href="/logout">Logout</a>
+    `;
+}
+
+var login = document.getElementById('login');
+login.onclick = function() {
+
+   var request = new XMLHttpRequest();
+
+
+  //capture the response and store in a variable
+  request.onreadystatechange = function() {
+      if(request.readyState === XMLHttpRequest.DONE){
+          //Take some action
+          if(request.status === 200) {
+              checkLogin();
+          } else if(request.status === 403) {
+              alert('Username/Password is incorrect!');
+          } else if(request.status === 500) {
+              alert('Something went wrong on the server side.');
+          }
+      }
+  };
+
+  //make a request
+   var username = document.getElementById('username').value;  
+   var password = document.getElementById('password').value;  
+
+  request.open('POST', 'http://ssttrinath.imad.hasura-app.io/login', true);
+  request.setRequestHeader('Content-Type', 'application/json');
+  console.log(username);
+  console.log(password);
+  request.send(JSON.stringify({username: username, password: password}));
+};
+
+var register = document.getElementById('register');
+register.onclick = function() {
+   var request = new XMLHttpRequest();
+
+
+  //capture the response and store in a variable
+  request.onreadystatechange = function() {
+      if(request.readyState === XMLHttpRequest.DONE){
+          //Take some action
+          if(request.status === 200) {
+              console.log('user is successfully registered.');
+              alert('Registration successfull.');
+          } else if(request.status === 500) {
+              alert('Problem at the server side.');
+          } 
+      }
+  };
+
+  //make a request
+   var username = document.getElementById('username').value;  
+   var password = document.getElementById('password').value;  
+
+  request.open('POST', 'http://ssttrinath.imad.hasura-app.io/create-user', true);
+  request.setRequestHeader('Content-Type', 'application/json');
+  request.send(JSON.stringify({username: username, password: password})); 
+};
+
+function checkLogin() {
+    var request = new XMLHttpRequest();
+
+
+  //capture the response and store in a variable
+  request.onreadystatechange = function() {
+      if(request.readyState === XMLHttpRequest.DONE){
+          //Take some action
+          if(request.status === 200) {
+              if(request.responseText === 'yes') {
+                  loggedForm();
+              } else if(request.responseText === 'no') {
+                  loginForm();
+              }
+          } 
+      }
+  };
+
+  //make a request
+  request.open('GET', 'http://ssttrinath.imad.hasura-app.io/check-login', true);
+  request.send(null);  
+}