login works

c7930b0d · Martin Lehoux · 0c934fab · c7930b0d · c7930b0d · c7930b0d
Commit c7930b0d authored 6 years ago by Martin Lehoux
--- a/front/package.json
+++ b/front/package.json
@@ -8,8 +8,10 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
+    "axios": "^0.18.0",
    "pug": "^2.0.3",
    "register-service-worker": "^1.5.2",
+    "semantic-ui-vue": "^0.7.0",
    "vue": "^2.5.22",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"

--- a/front/public/img/wallpaper.jpg
+++ b/front/public/img/wallpaper.jpg
--- a/front/public/index.html
+++ b/front/public/index.html
@@ -5,9 +5,11 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css">
    <title>front</title>
  </head>
  <body>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <noscript>
      <strong>We're sorry but front doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>

--- a/front/src/App.vue
+++ b/front/src/App.vue
-<template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view />
-  </div>
+<template lang="pug">
+  .app
+    NavBar
+    .ui.grid
+      .three.wide.column
+      .ten.wide.column
+        router-view
+      .three.wide.column
+      //- notifications
 </template>

-<style>
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
+<script>
+import NavBar from "@/components/NavBar.vue";
+export default {
+  name: "App",
+  components: {
+    NavBar,
+  },
 }
+</script>

-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}

-#nav a.router-link-exact-active {
-  color: #42b983;
-}
+<style>
+
 </style>
--- a/front/src/components/NavBar.vue
+++ b/front/src/components/NavBar.vue
+<template lang="pug">
+  sui-menu(pointing)
+    router-link(is="sui-menu-item", to="/") Home
+    router-link(v-if="user", is="sui-menu-item", to="/characters") Characters
+    sui-menu-menu(v-if="!user", position="right")
+      sui-menu-item
+        sui-input(transparent, type="text", placeholder="username", v-model="username")
+        sui-input(transparent, type="password", placeholder="password", v-model="password")
+        sui-button(@click="login") Login
+    sui-menu-menu(v-else, position="right")
+      sui-menu-item {{ user.username }}
+      sui-menu-item
+        sui-button(@click="logout") Logout
+</template>
+
+<script>
+export default {
+  name: "NavBar",
+  data() {
+    return {
+      username: "",
+      password: "",
+    }
+  },
+  computed: {
+    user() {
+      return this.$store.state.user;
+    }
+  },
+  created() {
+    this.$store.dispatch("login");
+  },
+  methods: {
+    login() {
+      this.$store.dispatch("authRequest", {
+        username: this.username,
+        password: this.password
+      });
+    },
+    logout() {
+      this.$store.dispatch("logout");
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/front/src/http.js
+++ b/front/src/http.js
+import axios from "axios";
+
+export default function() {
+  return axios.create({
+    baseUrl: "http://localhost:3000/",
+    timeout: 1000,
+    headers: {
+      Authorization: localStorage.getItem("token"),
+      "Content-Type": "application/json"
+    }
+  });
+}
--- a/front/src/main.js
+++ b/front/src/main.js
@@ -3,8 +3,10 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import "./registerServiceWorker";
+import SuiVue from "semantic-ui-vue";

 Vue.config.productionTip = false;
+Vue.use(SuiVue);

 new Vue({
  router,

--- a/front/src/store.js
+++ b/front/src/store.js
 import Vue from "vue";
 import Vuex from "vuex";
+import http from "@/http";

 Vue.use(Vuex);

 export default new Vuex.Store({
-  state: {},
-  mutations: {},
-  actions: {}
+  state: {
+    status: "",
+    user: null
+  },
+  getters: {
+    isAuthenticated: state => !!localStorage.getItem("token") && !!state.user,
+    authStatus: state => state.status,
+    user: state => state.user
+  },
+  mutations: {
+    ["AUTH_REQUEST"]: state => (state.status = "loading"),
+    ["AUTH_SUCCESS"]: (state, user) => {
+      state.status = "success";
+      state.user = user;
+    },
+    ["AUTH_ERROR"]: state => (state.status = "error"),
+    ["LOGOUT"]: state => {
+      state.user = null;
+      state.status = "success";
+    }
+  },
+  actions: {
+    authRequest: ({ commit }, credentials) => {
+      commit("AUTH_REQUEST");
+      http()
+        .post("http://localhost:3000/users/authenticate", credentials)
+        .then(res => {
+          localStorage.setItem("token", res.data.token);
+          commit("AUTH_SUCCESS", res.data);
+        })
+        .catch(() => commit("AUTH_ERROR"));
+    },
+    logout: ({ commit }) => {
+      localStorage.removeItem("token");
+      commit("LOGOUT");
+    },
+    login: ({ commit }) => {
+      if (localStorage.getItem("token")) {
+        http()
+          .get("http://localhost:3000/users/me")
+          .then(res => commit("AUTH_SUCCESS", res.data))
+          .catch(() => commit("AUTH_ERROR"));
+      }
+    }
+  }
 });