Merge pull request #40 from TheDhejavu/fix-nodecloudweb-issues

Fix nodecloud web issues
cloudlibz · Feb 22, 2020 · 14b91a9 · 14b91a9
2 parents 95c3f26 + 3a806e4
commit 14b91a9
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 135 deletions.
diff --git a/client/src/App/App.js b/client/src/App/App.js
@@ -6,8 +6,7 @@ import { history } from "../_helpers/history.js";
 import { alertActions } from "../_actions/alert.actions.js";
 import { PrivateRoute } from "../_components/PrivateRoute.js";
 import { HomePage } from "../HomePage/HomePage.js";
-import { LoginPage } from "../LoginPage/LoginPage.js";
-import { SignupPage } from "../SignupPage/SignupPage.js";
+import { LoginPage, SignupPage } from "../Auth";
 import { VirtualMachine } from "../CreateServices/VirtualMachine.js";
 import { VirtualNetwork } from "../CreateServices/VirtualNetwork.js";
 import { Database } from "../CreateServices/Database.js";

diff --git a/client/src/LoginPage/LoginPage.js → client/src/Auth/LoginPage/LoginPage.js b/client/src/LoginPage/LoginPage.js → client/src/Auth/LoginPage/LoginPage.js
@@ -2,8 +2,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 
-import { userActions } from "../_actions/user.actions.js";
-import "./LoginPage.css";
+import { userActions } from "../../_actions/user.actions.js";
 
 class LoginPage extends React.Component {
   constructor(props) {
@@ -62,7 +61,7 @@ class LoginPage extends React.Component {
         <div className="innerBox">
           <div className="logoHolder">
             <img
-              src={require("../media/nodecloudlogo.png")}
+              src={require("../../media/nodecloudlogo.png")}
               alt="Nodecloud Logo"
               className="logo"
             />

diff --git a/client/src/SignupPage/SignupPage.js → client/src/Auth/SignupPage/SignupPage.js b/client/src/SignupPage/SignupPage.js → client/src/Auth/SignupPage/SignupPage.js
@@ -2,7 +2,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 
-import { userActions } from "../_actions/user.actions.js";
+import { userActions } from "../../_actions/user.actions.js";
 
 class SignupPage extends React.Component {
   constructor(props) {
@@ -47,7 +47,6 @@ class SignupPage extends React.Component {
       dispatch(userActions.register(user));
     }
   }
-
   handleValidation() {
     const { user } = this.state;
     let isFormValid = true;
@@ -127,7 +126,7 @@ class SignupPage extends React.Component {
         <div className="innerBox">
           <div className="logoHolder">
             <img
-              src={require("../media/nodecloudlogo.png")}
+              src={require("../../media/nodecloudlogo.png")}
               alt="Nodecloud Logo"
               className="logo"
             />

diff --git a/client/src/Auth/index.js b/client/src/Auth/index.js
@@ -0,0 +1,5 @@
+import { LoginPage } from "./LoginPage/LoginPage";
+import { SignupPage } from "./SignupPage/SignupPage";
+import "./style.css";
+
+export { LoginPage, SignupPage };
diff --git a/client/src/LoginPage/LoginPage.css → client/src/Auth/style.css b/client/src/LoginPage/LoginPage.css → client/src/Auth/style.css
@@ -8,17 +8,22 @@
   display: flex;
 }
 .innerBox {
-  width: 65%;
-  height: 60%;
-  background-color: aqua;
-  position: absolute;
+  max-width: 900px;
+  margin: 0 auto;
+  width: 100%;
   border-radius: 22px;
   flex-direction: row;
   display: flex;
+  flex-wrap: wrap;
+}
+@media screen and (max-width: 840px) {
+  .innerBox {
+    margin: 0 20px;
+  }
 }
 .logoHolder {
   width: 40%;
-  height: 100%;
+  min-height: 450px;
   border-top-left-radius: 22px;
   border-bottom-left-radius: 22px;
   background-image: linear-gradient(#009cff, #0080d4);
@@ -28,7 +33,6 @@
 }
 .formHolder {
   width: 60%;
-  height: 100%;
   border-top-right-radius: 22px;
   border-bottom-right-radius: 22px;
   background-color: white;
@@ -39,23 +43,55 @@
   align-items: center;
   display: flex;
 }
+@media screen and (max-width: 640px) {
+  .logoHolder,
+  .formHolder {
+    width: 100%;
+  }
+  .logoHolder {
+    border-radius: 0px;
+    min-height: 200px;
+    border-top-right-radius: 22px;
+    border-top-left-radius: 22px;
+  }
+  .formHolder {
+    border: 1px solid #d2d2d2;
+    border-radius: 0px;
+    padding: 30px 3px;
+    border-bottom-left-radius: 22px;
+    border-bottom-right-radius: 22px;
+  }
+}
+
 .logo {
   width: 100px;
   height: 100px;
   background-color: #fcfcfc;
   border-radius: 50px;
   margin-top: 30%;
 }
+@media screen and (max-width: 640px) {
+  .logo {
+    margin-top: 10%;
+  }
+}
+
 .title {
   font-family: Courier;
   letter-spacing: 1;
   color: white;
   margin-top: 20%;
   font-size: 24px;
 }
+@media screen and (max-width: 640px) {
+  .title {
+    margin-top: 10%;
+  }
+}
 .subtitle {
   font-size: 14px;
   color: #c4daff;
+  padding-bottom: 20px;
 }
 .label {
   align-self: left;

diff --git a/client/src/SignupPage/SignupPage.css b/client/src/SignupPage/SignupPage.css
diff --git a/client/src/_helpers/PageNotFound.js b/client/src/_helpers/PageNotFound.js
@@ -1,7 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { Icon } from "semantic-ui-react";
-import "../LoginPage/LoginPage.css";
 
 class PageNotFound extends React.Component {
   constructor(props) {

diff --git a/client/src/_services/user.services.js b/client/src/_services/user.services.js
@@ -73,7 +73,14 @@ function register(user) {
 
   return fetch(Urls.BASE_URL + Urls.SUB_URL_SIGNUP, requestOptions).then(
     handleResponse
-  );
+  ).then(res => {
+    if (res.success) {
+      // store user details and jwt token in local storage to keep user logged in between page refreshes
+      localStorage.setItem("user", JSON.stringify(res.data));
+      localStorage.setItem("access_token", res.token);
+    }
+    return res;
+  });
 }
 
 function createVirtualMachine(params) {

diff --git a/server/db.js b/server/db.js
@@ -21,10 +21,10 @@ const options = {
   useNullAsDefault: true
 };
 
-const createTableUser = () => {
+const createTableUser = async () => {
 
   const knex = require("knex")(options);
-  if(knex.schema.hasTable("users")) return;
+  if(await knex.schema.hasTable("users")) return;
 
   knex.schema
     .createTable("users", function(t) {
@@ -37,10 +37,10 @@ const createTableUser = () => {
     // db.run("CREATE TABLE IF NOT EXISTS users(id INTEGER PRIMARY KEY AUTOINCREMENT, email TEXT UNIQUE, username TEXT, password TEXT)");
 };
 
-const createTableService = () => {
+const createTableService = async () => {
 
   const knex = require("knex")(options);
-  if(knex.schema.hasTable("services")) return;
+  if(await knex.schema.hasTable("services")) return;
 
   knex.schema
     .createTable("services", function(t) {

diff --git a/server/db.sqlite3 b/server/db.sqlite3
diff --git a/server/knexfile.js b/server/knexfile.js
@@ -3,7 +3,7 @@
 module.exports = {
   client: "sqlite3",
   connection: {
-    filename: "./user.sqlite3"
+    filename: "./db.sqlite3"
   },
   useNullAsDefault: true