get users registered

Author: galvez

api.js

@@ -1,4 +1,5 @@
 import { json } from 'body-parser'
+import { addUser } from './db'
 
 export default [
   {
@@ -11,5 +12,17 @@ export default [
   (req, res, next) => {
     res.json = (obj) => res.write(JSON.stringify(obj))
     next()
+  },
+  {
+    path: '/api/users',
+    async handler(req, res, next) {
+      if (req.method === 'POST') {
+        await addUser(req.body)
+        res.json({ success: true })
+        res.end()
+      }
+      res.writeHead(403, 'Forbidden')
+      res.end()
+    }
   }
 ]

db.js

@@ -0,0 +1,20 @@
+
+import bcrypt from 'bcrypt'
+
+function hashPassword(password) {
+  const salt = bcrypt.genSaltSync()
+  return new Promise((resolve) => {
+    bcrypt.hash(password, salt, (err, hash) => {
+      resolve(err ? null : hash)
+    })
+  })
+}
+
+const db = {
+  users: {}
+}
+
+export async function addUser(user) {
+  user.password = await hashPassword(user.password)
+  db.users[user.email] = user
+}

layouts/default.vue

@@ -0,0 +1,34 @@
+<template>
+  <main>
+    <nuxt />
+  </main>
+</template>
+
+<style>
+html, body, #__nuxt, #__layout {
+  font-size: 16px;
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+}
+main {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+main div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+main input, main button {
+  outline: none;
+  display: block;
+  font-size: 16px;
+  margin-bottom: 5px;
+}
+</style>

middleware/auth.js

@@ -1,2 +1,5 @@
 export default function ({ store, route, redirect }) {
+  if (!store.state.user.authenticated) {
+    redirect('/register')
+  }
 }

package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@nuxt/http": "^0.1.1",
+    "bcrypt": "^3.0.6",
     "body-parser": "^1.19.0"
   }
 }

pages/index.vue

@@ -1,30 +1,14 @@
 <template>
-  <div class="login">
-    <input
-      placeholder="Email"
-      :value="form.email">
-    <input
-      placeholder="Password"
-      :value="form.password">
-    <button @click="login">
-      Login
-    </button>
+  <div>
+    Hello, {{ user.name }}!
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
-  data: () => ({
-    form: {}
-  }),
-  async asyncData({ app }) {
-    const response = await app.$http.get('api/ping')
-    return {
-      pongMessage: await response.text()
-    }
-  },
-  mounted() {
-    alert(this.pongMessage)
-  }
+  middleware: 'auth',
+  computed: mapState(['user'])
 }
 </script>

pages/login.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h2>Login</h2>
+    <input
+      placeholder="Email"
+      :value="form.email">
+    <input
+      placeholder="Password"
+      :value="form.password">
+    <button @click="login">
+      Login
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    form: {}
+  }),
+  methods: {
+    login() {
+    }
+  }
+}
+</script>

pages/protected.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h2>Register</h2>
+    <input
+      placeholder="Name"
+      :value="form.name">
+    <input
+      type="email"
+      placeholder="Email"
+      :value="form.email">
+    <input
+      type="password"
+      placeholder="Password"
+      :value="form.password">
+    <button @click="register">
+      Register
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    form: {}
+  }),
+  methods: {
+    async register() {
+      const jsonResponse = await 
+        this.$http.$post('api/users', this.form)
+      if (jsonResponse.success) {
+        this.$router.push('/login')
+      }
+    }
+  }
+}
+</script>

pages/register.vue

@@ -1,3 +1,8 @@
 export const state = () => ({
-
+  user: {
+    authenticated: false,
+    id: null,
+    email: null,
+    name: null
+  }
 })