Add relevant routes

client/app.js

@@ -2,6 +2,8 @@ const express = require("express");
 
 const app = express();
 
+require("dotenv").config();
+
 app.set("views", __dirname + "/views");
 app.set("view engine", "jsx");
 app.use(express.static("public"));
@@ -18,6 +20,22 @@ app.engine(
   })
 );
 
+app.use(require("cookie-parser")());
+
+app.use("/landing", require("./routes/landing"));
+app.use("/auth", require("./routes/auth"));
+
+app.use((req, res, next) => {
+  if (!req.token) res.redirect("/landing");
+  next();
+});
+
+app.use((req, res, next) => {
+  const token = req.cookies.token;
+  req.token = token;
+  next();
+});
+
 app.use("/", require("./routes/index"));
 app.use("/clients", require("./routes/clients"));
 

client/package-lock.json

@@ -3488,6 +3488,15 @@
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
       "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
     },
+    "cookie-parser": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.5.tgz",
+      "integrity": "sha512-f13bPUj/gG/5mDr+xLmSxxDsB9DQiTIfhJS/sqjrmfAWiAN+x2O4i/XguTL9yDZ+/IFDanJ+5x7hC4CXT9Tdzw==",
+      "requires": {
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6"
+      }
+    },
     "cookie-signature": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",

client/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@types/node": "^14.14.6",
     "axios": "^0.20.0",
+    "cookie-parser": "^1.4.5",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "express-react-views": "^0.11.0",

client/routes/auth.js

@@ -0,0 +1,11 @@
+const router = require("express").Router();
+
+router.get("/login", (req, res) => {
+  res.render("Login");
+});
+
+router.get("/register", (req, res) => {
+  res.render("Register");
+});
+
+module.exports = router;

client/routes/clients.js

@@ -1,7 +1,23 @@
 const router = require("express").Router();
+const axios = require("axios");
 
-router.get("/", (req, res) => {
-  res.render("Clients");
+const basePath = process.env.API_BASE_PATH;
+
+router.get("/", async (req, res) => {
+  console.debug(basePath);
+  const clients = await axios.get(
+    basePath + "/clients",
+    {},
+    { headers: { Authorization: "Bearer " + req.token } }
+  );
+  console.log(clients);
+
+  res.render("Clients", {
+    clients: [
+      { id: 1, name: "Foo Bar" },
+      { id: 2, name: "Michael Jackson" },
+    ],
+  });
 });
 
 module.exports = router;

client/routes/landing.js

@@ -0,0 +1,7 @@
+const router = require("express").Router();
+
+router.get("/", (req, res) => {
+  res.render("Landing");
+});
+
+module.exports = router;

client/service/ClientService.js

@@ -1,18 +1,9 @@
-import axios from "axios";
+const axios = require("axios");
 
 const basepath = process.env.API_BASE_PATH;
 
-export interface Client {
-  id: string;
-  name: string;
-}
-
-export interface NewClient {
-  name: string;
-}
-
-export default {
-  getClients(): Promise<Client[]> {
+module.exports = {
+  getClients() {
     return axios
       .get(basepath + "/clients")
       .then((res) => res.data)
@@ -23,34 +14,32 @@ export default {
       );
   },
 
-  addClient(client: NewClient): Promise<Client> {
+  addClient(client) {
     return axios
       .post(basepath + "/clients", client)
       .then((res) => res.data)
       .then((client) => {
         return { ...client, id: client._id };
-      })
-      .then((data) => data as Client);
+      });
   },
 
-  getClientById(id: String): Promise<Client> {
+  getClientById(id) {
     return axios
       .get(basepath + "/clients/" + id)
       .then((res) => res.data)
       .then((client) => {
         return { ...client, id: client._id };
-      })
-      .then((client) => client as Client);
+      });
   },
 
-  updateStatus(id: String, status: String): Promise<String> {
+  updateStatus(id, status) {
     return axios.post(basepath + "/clients/" + id + "/events", {
       eventType: "status_changed",
       value: status,
     });
   },
 
-  deleteMany(ids: String[]): Promise<any> {
+  deleteMany(ids) {
     console.log("To delete:", ids);
     return axios({
       method: "delete",

client/service/api-client.js

@@ -1,9 +1,9 @@
 /* Custom axios instance that adds the token to the headers, if existent */
-import axios from "axios";
-import UserManager from "./UserService";
+const axios = require("axios");
+const UserService = require("./UserService");
 
 axios.interceptors.request.use(function (config) {
-  const token = UserManager.getToken();
+  const token = UserService.getToken();
 
   if (token) {
     config.headers.Authorization = "Bearer " + token;

client/views/Clients.jsx

@@ -1,10 +1,32 @@
 import React from "react";
 import Layout from "./layouts/Main";
 
-export default function Clients() {
+export default function Clients({ clients }) {
+  const clientViews = clients.map((client) => {
+    return (
+      <a
+        href={"/clients/" + client.id}
+        className="list-group-item list-group-item-action"
+      >
+        {client.name}
+      </a>
+    );
+  });
+
   return (
     <Layout>
-      <h1>Clients</h1>
+      <div className="row">
+        <div className="col-4">
+          <a href="/clients/new">
+            <button onClick="console.log('asd')" className="btn btn-primary">
+              New Client
+            </button>
+          </a>
+        </div>
+        <div className="col-8">
+          <div className="list-group">{clientViews}</div>
+        </div>
+      </div>
     </Layout>
   );
 }

client/views/Landing.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import Layout from "./layouts/Main";
+
+export default function Index() {
+  return (
+    <Layout>
+      <a href="/auth/login">Login</a>
+      <a href="/auth/register">Register</a>
+    </Layout>
+  );
+}

client/views/Login.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import Layout from "./layouts/Main";
+
+export default function Index() {
+  return (
+    <Layout>
+      <div>Login</div>
+    </Layout>
+  );
+}

client/views/Register.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import Layout from "./layouts/Main";
+
+export default function Index() {
+  return (
+    <Layout>
+      <div>Register here</div>
+    </Layout>
+  );
+}

client/views/layouts/Main.jsx

@@ -11,7 +11,7 @@ export default function (props) {
       </head>
       <body>
         <Header></Header>
-        {props.children}
+        <div className="container">{props.children}</div>
       </body>
     </>
   );