Login/register api added.

server/package.json

@@ -2,6 +2,7 @@
     "name": "cb-server",
     "dependencies": {
         "@koa/router": "^8.0.8",
+        "bcrypt": "^4.0.1",
         "dotenv": "^8.2.0",
         "fs": "0.0.1-security",
         "koa": "^2.11.0",

server/user/model.js

@@ -129,4 +129,21 @@ userModel.createUserWithDiscord = async (discord_id) =>{
     await db.con.query(sql_text, [discord_id]);
 }
 
+userModel.registerUser = async (username, password) =>{
+    const hashPassword = await crypto.hash(password);
+    console.log(username, hashPassword)
+
+    const sql_text = 'INSERT INTO users (username, password) VALUES (?, ?)';
+    await db.con.query(sql_text, [username, hashPassword])
+}
+
+userModel.loginUser = async (username, password) =>{
+    const hashPassword = await crypto.hash(password);
+    console.log(username, hashPassword)
+    const sql_text = 'SELECT id, username from users WHERE username = ? AND password = ?';
+    const data = await db.con.query(sql_text, [username, hashPassword]);
+
+    return data[0];
+}
+
 module.exports = userModel;
\ No newline at end of file

server/user/route.js

@@ -29,6 +29,44 @@ router.post('/d-login', async (context, next) =>{
     }
 });
 
+router.post('/login', async (context, next) =>{
+    if(context.session.user_id && userModel.getUserFromId(context.session.user_id)){
+        context.throw(400, 'User is Already Logged In')
+    }
+    const body = context.request.body;
+    if(!body || !body.username || !body.password){
+        context.throw(422, 'Missing parameters');
+    }
+
+    try{
+        const user = await userModel.loginUser(body.username, body.password);
+        if(!user){
+            throw Error('No user found')
+        }
+        console.log(user);
+        context.session.user_id = user.id;
+        context.response.body = {username: user.username};
+        context.status = 200;
+    }catch(error){
+        console.log(error);
+        context.throw(422, 'Login Failed')
+    }
+});
+
+router.post('/register', async(context, next)=>{
+    const body = context.request.body;
+    if(!body || !body.username || !body.password){
+        context.throw(422, 'Missing parameters');
+    }
+    try{
+        await userModel.registerUser(body.username, body.password);
+        context.response.status = 204;
+    }catch(error){
+        console.log(error);
+        context.throw(400, 'Failed to register user')
+    }
+})
+
 
 router.post('/discord-register', async(context, next) =>{
     const body = context.request.body;

server/util/crypto.js

 'use strict'
-
+const bcrypt = require('bcrypt');
+const ENV = require('../settings');
 const crypto = {};
 
 //    """Someday, I will implement encryption and decryption. Today is not that day"""
-crypto.encode = (data) =>{
-    const buff = new Buffer(data);
-    return buff.toString('base64');
-}
-crypto.decode = (enc_data) =>{
-    const buff = new Buffer(enc_data, 'base64');
-    return buff.toString('utf-8');
+crypto.hash = async (data) =>{
+    const hash = await new Promise((resolve, reject) => {
+        bcrypt.hash(data, ENV.PASSWORD_SALT, function(err, hash) {
+          if (err) reject(err)
+          resolve(hash)
+        });
+    })
+    return hash;
 }
 
 module.exports = crypto;
\ No newline at end of file

web/login/controller.js

@@ -11,13 +11,13 @@ class LoginPageController{
 
     async login(credentials){
         try{
-            console.log(credentials)
             if(credentials.username==="" || credentials.password===""){
                 alert("Fields can't be empty")
             }
-            // const user_data = await this.sync.login(credentials);
-            // localStorage.setItem('username', user_data.user_name);
-            // location.replace('/');
+            const user_data = await this.sync.login(credentials);
+            console.log(user_data)
+            localStorage.setItem('username', user_data.username);
+            location.replace('/');
         }catch(error){
             console.log(error);
             alert('Failed to login')
@@ -26,7 +26,6 @@ class LoginPageController{
 
     async register(credentials){
         try{
-            console.log(credentials)
             if(credentials.username==="" || credentials.password==="" || credentials.confirm_password===""){
                 alert("Fields can't be empty")
                 return;
@@ -35,9 +34,9 @@ class LoginPageController{
                 alert("Passwords don't match")
                 return;
             }
-            // const user_data = await this.sync.register(credentials);
-            // localStorage.setItem('username', user_data.user_name);
-            // location.replace('/');
+            await this.sync.register({username: credentials.username, password: credentials.password});
+            alert('Register Successful')
+            location.reload();
         }catch(error){
             console.log(error);
             alert('Failed to register')

web/login/index.html

@@ -32,7 +32,7 @@
                         <input type="text" name="username" placeholder="Geo"/>
                         <input type="password" name="password" placeholder="********"/>
                         <input type="password" name="confirm_password" placeholder="********"/>
-                        <button id="register_button">Log In</button>
+                        <button id="register_button">Register</button>
                     </register-form>
                 </div>
             </center-div>

web/login/register_view.js

 class RegisterView extends EventTarget {
     constructor(element){
         super()
-        this.element = element
-        this.username_field    = this.element.querySelector("[name=username]")
-        this.password_field = this.element.querySelector("[name=password]")
-        this.login_button   = this.element.querySelector("#register_button")
+        this.element                = element
+        this.username_field         = this.element.querySelector("[name=username]")
+        this.password_field         = this.element.querySelector("[name=password]")
+        this.confirm_password_field = this.element.querySelector("[name=confirm_password]");
+        this.login_button           = this.element.querySelector("#register_button")
 
         this.login_button.addEventListener("click", () => {
         this.dispatchEvent(new CustomEvent("register_attempt", {detail: {
             username: this.username_field.value,
-            password: this.password_field.value }
-        }))
+            password: this.password_field.value,
+            confirm_password:  this.confirm_password_field.value
+           }}))
         })
   
     }

web/login/sync.js

@@ -26,9 +26,6 @@ class Sync{
         if(!register_response.ok){
             throw new Error(`Register failed with ${login_response.status}`)
         }
-        const user_data = await register_response.json();
-
-        return user_data;
     }
 }
 

web/navbar/navbar.html

@@ -20,6 +20,13 @@
     </bar-options>
     <bar-user>
         <a href="/login">Login/Register</a>
+        <div class="dropdown" style="display: none;">
+            <p>House</p>
+            <div class="dropdown-content">
+                <a>Profile</a>
+                <a onclick="logOut()">Log Out</a>
+            </div>
+        </div>
     </bar-user>
 </nav-bar>
 <script src="navbar.js"></script>
\ No newline at end of file

web/navbar/navbar.js

@@ -7,11 +7,23 @@ function loadPage(href)
 }
 const nav_placeholder = document.querySelector('nav-placeholder')
 nav_placeholder.innerHTML = loadPage('/navbar/navbar.html')
-const bar_user = document.querySelector('bar-user a');
 const saved_user = localStorage.getItem('username');
 if(saved_user){
-    bar_user.innerText = saved_user;
+    const bar_user_default = document.querySelector('bar-user a');
+    const bar_user_dropdown = document.querySelector('bar-user .dropdown')
+    const bar_user_name = bar_user_dropdown.querySelector('p');
+    bar_user_default.style.display = "none";
+    bar_user_dropdown.style.display = "";
+    bar_user_name.innerText = saved_user;
 }
-function testy(){
-    console.log('asd')
+
+function logOut(){
+    console.log(document.cookie);
+    var cookies = document.cookie.split(";");
+    for (var i = 0; i < cookies.length; i++){   
+        var spcook =  cookies[i].split("=");
+        document.cookie = spcook[0] + "=;expires=Thu, 21 Sep 1979 00:00:01 UTC;";                                
+    }
+    localStorage.removeItem('username');
+    location.reload();
 }
\ No newline at end of file

web/sass/navbar.scss

@@ -66,4 +66,14 @@ bar-user{
 
 bar-user:hover{
     background-color: rgb(95, 26, 26);
+}
+
+bar-user{
+
+    .dropdown{
+        margin-top: -30px;
+    }
+    .dropdown:hover{
+        background-color: rgb(95, 26, 26);;
+    }
 }
\ No newline at end of file

web/stylesheets/main.css

@@ -92,6 +92,13 @@ bar-user:hover {
   background-color: #5f1a1a;
 }
 
+bar-user .dropdown {
+  margin-top: -30px;
+}
+bar-user .dropdown:hover {
+  background-color: #5f1a1a;
+}
+
 content-body {
   grid-area: content;
 }

web/stylesheets/main.css.map

-{"version":3,"sourceRoot":"","sources":["../fontawesome/font_awesome.scss","../sass/navbar.scss","../sass/login.scss","../sass/main.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAmBF;EACI;IAAK;;EACP;IAAO;;;AC1CX;EACI;EACA;EACA;EACA,eACI;EAGJ;;;AAGJ;EAEI;;AACA;EACI;EACA;EAEA;EACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;;AAIR;EACI;;AACA;EACI;;;AAIR;EACI;EACA;EACA;;AACA;EACI;EACA;;;AAIR;EACI;;;ACnEJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EAEA;;AAEA;EACI;EACA;;;AAIN;AACF;EACI;EAEA;EACA;EACA;EACA;EACA;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;EACA;EACA;EACA;;;AAGJ;EACI;AAA0B;;;AAG9B;AACA;EACI;IAAM;;EACN;IAAI;;;AC5DR;EACI;EACA;EACA;EACA;EACA,eACI","file":"main.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../fontawesome/font_awesome.scss","../sass/navbar.scss","../sass/login.scss","../sass/main.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAmBF;EACI;IAAK;;EACP;IAAO;;;AC1CX;EACI;EACA;EACA;EACA,eACI;EAGJ;;;AAGJ;EAEI;;AACA;EACI;EACA;EAEA;EACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;;AAIR;EACI;;AACA;EACI;;;AAIR;EACI;EACA;EACA;;AACA;EACI;EACA;;;AAIR;EACI;;;AAKA;EACI;;AAEJ;EACI;;;AC5ER;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EAEA;;AAEA;EACI;EACA;;;AAIN;AACF;EACI;EAEA;EACA;EACA;EACA;EACA;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;EACA;EACA;EACA;;;AAGJ;EACI;AAA0B;;;AAG9B;AACA;EACI;IAAM;;EACN;IAAI;;;AC5DR;EACI;EACA;EACA;EACA;EACA,eACI","file":"main.css"}
\ No newline at end of file

web/stylesheets/navbar.css

@@ -63,4 +63,11 @@ bar-user:hover {
   background-color: #5f1a1a;
 }
 
+bar-user .dropdown {
+  margin-top: -30px;
+}
+bar-user .dropdown:hover {
+  background-color: #5f1a1a;
+}
+
 /*# sourceMappingURL=navbar.css.map */

web/stylesheets/navbar.css.map

-{"version":3,"sourceRoot":"","sources":["../sass/navbar.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA,eACI;EAGJ;;;AAGJ;EAEI;;AACA;EACI;EACA;EAEA;EACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;;AAIR;EACI;;AACA;EACI;;;AAIR;EACI;EACA;EACA;;AACA;EACI;EACA;;;AAIR;EACI","file":"navbar.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../sass/navbar.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA,eACI;EAGJ;;;AAGJ;EAEI;;AACA;EACI;EACA;EAEA;EACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;;AAIR;EACI;;AACA;EACI;;;AAIR;EACI;EACA;EACA;;AACA;EACI;EACA;;;AAIR;EACI;;;AAKA;EACI;;AAEJ;EACI","file":"navbar.css"}
\ No newline at end of file