Add login page

4 years ago · 2b975c212e
6 changed files with 155 additions and 8 deletions
--- a/client/README.md
+++ b/client/README.md
@ -2,4 +2,5 @@

 To configure the client, you need these fields in your `.env` file:

-* API_BASE_PATH - Backend URL
+- API_BASE_PATH - Backend URL
+- FRONTEND_BASE_PATH - Frontend URL
--- a/client/views/Login.jsx
+++ b/client/views/Login.jsx
@ -1,10 +1,44 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Layout from "./layouts/Main";

+const basePath = process.env.API_BASE_PATH;
+const frontendBasePath = process.env.FRONTEND_BASE_PATH;
+
 export default function Index() {
  return (
    <Layout>
-      <div>Login</div>
+      <form
+        action={
+          basePath + "/auth/login" + "?redirect=" + frontendBasePath + "/"
+        }
+        method="POST"
+      >
+        <div className="form-group">
+          <label for="email">Email address</label>
+          <input
+            type="email"
+            name="email"
+            className="form-control"
+            id="email"
+            aria-describedby="emailHelp"
+          />
+          <small id="emailHelp" className="form-text text-muted">
+            We'll never share your email with anyone else.
+          </small>
+        </div>
+        <div className="form-group">
+          <label for="password">Password</label>
+          <input
+            type="password"
+            name="password"
+            className="form-control"
+            id="password"
+          />
+        </div>
+        <button type="submit" className="btn btn-primary">
+          Submit
+        </button>
+      </form>
    </Layout>
  );
 }
--- a/server/app.js
+++ b/server/app.js
@ -1,15 +1,25 @@
 const express = require("express");
 const mongoose = require("mongoose");
 const jwt = require("jsonwebtoken");
+const bodyParser = require("body-parser");

 require("dotenv").config();

 const app = express();

-app.use(require("body-parser").json());
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: true }));
+
+app.use(require("express-form-data").parse());

 app.use(require("cors")());

+app.use((req, res, next) => {
+  console.log(req.query);
+  req.body = { ...req.body, ...req.query };
+  next();
+});
+
 // Logging Middleware
 app.use((req, res, next) => {
  console.log(new Date().toUTCString(), req.method, req.path);
--- a/server/package-lock.json
+++ b/server/package-lock.json
@ -324,6 +324,25 @@
        "xdg-basedir": "^4.0.0"
      }
    },
+    "connect-multiparty": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/connect-multiparty/-/connect-multiparty-2.2.0.tgz",
+      "integrity": "sha512-zKcpA7cuXGEhuw9Pz7JmVCFmp85jzGLGm/iiagXTwyEAJp4ypLPtRS/V4IGuGb9KjjrgHBs6P/gDCpZHnFzksA==",
+      "requires": {
+        "http-errors": "~1.7.0",
+        "multiparty": "~4.2.1",
+        "on-finished": "~2.3.0",
+        "qs": "~6.5.2",
+        "type-is": "~1.6.16"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
+        }
+      }
+    },
    "content-disposition": {
      "version": "0.5.3",
      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
@ -517,6 +536,15 @@
        "vary": "~1.1.2"
      }
    },
+    "express-form-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/express-form-data/-/express-form-data-2.0.14.tgz",
+      "integrity": "sha512-c+6JbNxeS62WNRFOAB1/pO/LUcPuWpu70mnNliKTOgM/4g55Zsu0r+3sUDuo6yZlW5uczxioHWar/iZUzMxfag==",
+      "requires": {
+        "connect-multiparty": "^2.2.0",
+        "fs-extra": "^5.0.0"
+      }
+    },
    "fill-range": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -550,6 +578,16 @@
      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
    },
+    "fs-extra": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-5.0.0.tgz",
+      "integrity": "sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      }
+    },
    "fsevents": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
@ -606,8 +644,7 @@
    "graceful-fs": {
      "version": "4.2.4",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
-      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
-      "dev": true
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
    },
    "has-flag": {
      "version": "3.0.0",
@ -777,6 +814,14 @@
      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=",
      "dev": true
    },
+    "jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "requires": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
    "jsonwebtoken": {
      "version": "8.5.1",
      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz",
@ -1041,6 +1086,45 @@
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
    },
+    "multiparty": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/multiparty/-/multiparty-4.2.2.tgz",
+      "integrity": "sha512-NtZLjlvsjcoGrzojtwQwn/Tm90aWJ6XXtPppYF4WmOk/6ncdwMMKggFY2NlRRN9yiCEIVxpOfPWahVEG2HAG8Q==",
+      "requires": {
+        "http-errors": "~1.8.0",
+        "safe-buffer": "5.2.1",
+        "uid-safe": "2.1.5"
+      },
+      "dependencies": {
+        "http-errors": {
+          "version": "1.8.0",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.0.tgz",
+          "integrity": "sha512-4I8r0C5JDhT5VkvI47QktDW75rNlGVsUf/8hzjCC/wkWI/jdTRmBb9aI7erSG82r1bjKY3F6k28WnsVxB1C73A==",
+          "requires": {
+            "depd": "~1.1.2",
+            "inherits": "2.0.4",
+            "setprototypeof": "1.2.0",
+            "statuses": ">= 1.5.0 < 2",
+            "toidentifier": "1.0.0"
+          }
+        },
+        "inherits": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+        },
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+        },
+        "setprototypeof": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+          "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+        }
+      }
+    },
    "negotiator": {
      "version": "0.6.2",
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@ -1216,6 +1300,11 @@
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
    },
+    "random-bytes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
+      "integrity": "sha1-T2ih3Arli9P7lYSMMDJNt11kNgs="
+    },
    "range-parser": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@ -1558,6 +1647,14 @@
        "is-typedarray": "^1.0.0"
      }
    },
+    "uid-safe": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",
+      "integrity": "sha512-KPHm4VL5dDXKz01UuEd88Df+KzynaohSL9fBh096KWAxSKZQDI2uBrVqtvRM4rwrIrRRKsdLNML/lnaaVSRioA==",
+      "requires": {
+        "random-bytes": "~1.0.0"
+      }
+    },
    "undefsafe": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.3.tgz",
@ -1576,6 +1673,11 @@
        "crypto-random-string": "^2.0.0"
      }
    },
+    "universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+    },
    "unpipe": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
--- a/server/package.json
+++ b/server/package.json
@ -12,6 +12,7 @@
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
+    "express-form-data": "^2.0.14",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^5.10.7"
  },
--- a/server/routes/auth.js
+++ b/server/routes/auth.js
@ -33,7 +33,6 @@ router.post("/register", async (req, res) => {
 router.post("/login", async (req, res) => {
  console.debug("New login attempt:", req.body.email);
  const { email, password } = req.body;
-
  const user = await User.findOne({ email });

  if (!user) {
@ -50,7 +49,7 @@ router.post("/login", async (req, res) => {
  );

  console.debug("Login success for userId:", user.id);
-  res.json({ status: "success", token, id: user.id });
+  res.cookie("token", token).redirect(req.query.redirect);
 });

 router.get("/profile", async (req, res) => {