Login and register pages uses api functions, new styling and better handling in backend.

api/login.js

@@ -6,42 +6,50 @@ const router = require("express").Router();
 router.get("/", function(req, res) {
   res.sendFile(path.join(__dirname + "/../public/index.html"));
 });
-/*
+
 router.get("/register", function(req, res) {
   res.sendFile(path.join(__dirname + "/../public/index.html"));
 });
 
-router.post("/register", function(req, res, next) {
-  console.log("registering user");
-  User.register(
-    new User({ username: req.body.username }),
-    req.body.password,
-    function(err) {
-      if (err) {
-        console.log("error while user register!", err);
-        return next(err);
-      }
+// router.post("/register", function(req, res, next) {
+//   User.register(
+//     new User({ username: req.body.username }),
+//     req.body.password,
+//     function(err) {
+//       if (err) {
+//         console.log("error while user register!", err);
+//         if (err.name == "UserExistsError")
+//           res.status(409).send({ success: false, message: err.message })
+//         else if (err.name == "MissingUsernameError" || err.name == "MissingPasswordError")
+//           res.status(400).send({ success: false, message: err.message })
+//         return next(err);
+//       }
 
-      console.log("user registered!");
+//       console.log("user registered!", req.body.username);
+
+//       res.redirect("/#/")
+//      }
+//   );
+// });
 
-      res.redirect("/");
-    }
-  );
-});
-*/
 router.get("/login", function(req, res) {
   res.sendFile(path.join(__dirname + "/../public/index.html"));
 });
 
-router.post(
-  "/login",
-  passport.authenticate("local", {
-    failureRedirect: "/#/login"
-  }),
-  function(req, res) {
-    res.redirect("/#/update");
+router.post("/login", function(req, res, next) {
+  passport.authenticate("local", function(err, user, info) { 
+    if (err) {
+      if (err.name == "MissingUsernameError" || err.name == "MissingPasswordError")
+        return res.status(400).send({ success: false, message: err.message })
+      return next(err);
     }
-);
+
+    if (!user) return res.status(404).send({ success: false, message: "Incorrect username or password" })
+
+    console.log("user logged in:", user)
+    res.redirect("/#/update")
+  })(req, res, next);
+});
 
 router.get("/logout", function(req, res) {
   req.logout();

middleware/mustBeAuthenticated.js

@@ -0,0 +1,13 @@
+
+const mustBeAuthenticated = (req, res, next) => {
+  if (!req.isAuthenticated()) {
+    return res.status(401).send({
+      success: false,
+      message: "Du må være logget inn."
+    })
+  }
+
+  return next()
+}
+
+module.exports = mustBeAuthenticated;

src/components/CreatePage.vue

@@ -1,57 +1,50 @@
 <template>
   <div class="outer">
-    <div>
-      <h2>Vinlottis</h2>
-      <form method="post" action="/register">
-        <input type="text" name="username" placeholder="Brukernavn" />
-        <input type="password" name="password" placeholder="Passord" />
-        <input type="submit" value="registrer bruker" />
-      </form>
+    <h2>Vinlottis brukerregistering</h2>
+    <form aria-label="User registration" @submit.prevent>
+      <div class="label-div">
+        <label>Brukernavn</label>
+        <input type="text" v-model="username" placeholder="Brukernavn" @keyup.enter="login" />
       </div>
+      <div class="label-div row">
+        <label>Passord</label>
+        <input type="password" v-model="password" placeholder="Passord" @keyup.enter="login" />
+      </div>
+
+      <button class="vin-button" @click="register">Registrer bruker</button>
+
+      <p v-if="error" class="error">{{ error }}</p>
+    </form>
   </div>
 </template>
 <script>
-export default {};
+import { register } from "@/api";
+
+export default {
+  data() {
+    return {
+      username: undefined,
+      password: undefined,
+      error: undefined
+    }
+  },
+  methods: {
+    register() {
+      register(this.username, this.password)
+        .then(resp => {
+          if (resp.redirected) { this.$router.push("/") }
+        })
+        .catch(this.registerErrorResponse)
+
+    },
+    registerErrorResponse(error) {
+      console.log("error", error)
+      this.error = error.message || error
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/global.scss";
-@import "../styles/media-queries.scss";
-div {
-  font-family: Arial;
-}
-.outer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  width: 100vw;
-}
-h2 {
-  width: 100vw;
-  text-align: center;
-  font-size: 3rem;
-  font-family: knowit, Arial;
-}
-
-form {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100vw;
-}
-
-input {
-  margin: 20px;
-  width: 30vw;
-  font-size: 3rem;
-  border: none;
-  border-bottom: 1px solid black;
-}
-
-input[type="submit"] {
-  border: 1px solid black;
-}
+@import "../styles/loginAndRegister";
 </style>

src/components/LoginPage.vue

@@ -1,57 +1,49 @@
 <template>
   <div class="outer">
-    <div>
-      <h2>Vinlottis</h2>
-      <form method="post" action="/login">
-        <input type="text" name="username" placeholder="Brukernavn" />
-        <input type="password" name="password" placeholder="Passord" />
-        <input type="submit" value="login" />
-      </form>
+    <h2>Vinlottis brukerinnlogging</h2>
+    <form aria-label="User signin" @submit.prevent>
+      <div class="label-div">
+        <label>Brukernavn</label>
+        <input type="text" v-model="username" placeholder="Brukernavn" @keyup.enter="login" />
       </div>
+      <div class="label-div row">
+        <label>Passord</label>
+        <input type="password" v-model="password" placeholder="Passord" @keyup.enter="login" />
+      </div>
+
+      <button class="vin-button" @click="login">Logg inn</button>
+
+      <div v-if="error" class="error">{{ error }}</div>
+    </form>
   </div>
 </template>
 <script>
-export default {};
+import { login } from "@/api";
+
+export default {
+  data() {
+    return {
+      username: undefined, 
+      password: undefined,
+      error: undefined
+    }
+  },
+  methods: {
+    login() {
+      login(this.username, this.password)
+        .then(resp => {
+          if (resp.redirected) { this.$router.push("update") }
+        })
+        .catch(this.loginErrorResponse)
+
+    },
+    loginErrorResponse(error) {
+      this.error = error.message || error
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/global.scss";
-@import "../styles/media-queries.scss";
-div {
-  font-family: Arial;
-}
-.outer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  width: 100vw;
-}
-h2 {
-  width: 100vw;
-  text-align: center;
-  font-size: 3rem;
-  font-family: knowit, Arial;
-}
-
-form {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100vw;
-}
-
-input {
-  margin: 20px;
-  width: 30vw;
-  font-size: 3rem;
-  border: none;
-  border-bottom: 1px solid black;
-}
-
-input[type="submit"] {
-  border: 1px solid black;
-}
+@import "../styles/loginAndRegister";
 </style>

src/styles/loginAndRegister.scss

@@ -0,0 +1,69 @@
+@import "./media-queries.scss";
+@import "./variables.scss";
+
+.outer {
+  display: flex;
+  flex-direction: column;
+
+  @include desktop {
+    margin-top: 10vh;
+  }
+}
+
+h2 {
+  font-family: knowit, Arial;
+  text-align: center;
+  font-size: 3rem;
+  width: 100vw;
+
+  @include mobile {
+    font-size: 2rem;
+  }
+}
+
+form {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 0 auto;
+  width: 60vw;
+
+  @include mobile {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 0 auto;
+    width: 90vw;
+  }
+
+  .label-div input {
+    font-size: 2rem;
+    min-height: 2rem;
+    line-height: 2rem;
+    border: none;
+    border-bottom: 1px solid black;
+
+    @include mobile {
+      font-size: 2rem;
+      min-height: 2rem;
+      line-height: 2rem;
+
+      margin-bottom: 1.5rem;
+    }
+  }
+}
+
+.vin-button {
+  margin-bottom: 0;
+  margin-top: auto;
+}
+
+.error {
+  padding: 1.25rem;
+  margin: 1.25rem;
+  width: calc(100% - 5rem);
+  background-color: $light-red;
+  color: $red;
+}