Exercise 7

backend/.gitignore

@@ -1,6 +1,6 @@
 .idea
 node_modules
 lib
-.env
+dev.env
 
-dev.env
+dev.env

backend/test.env

@@ -1,5 +1,5 @@
 TOKEN_SECRET=TEST123456
-NEO4J_URI=bolt://34.239.207.33:32848
+NEO4J_URI=bolt://100.26.212.97:32898
 NEO4J_USER=neo4j
-NEO4J_PASSWORD=discriminations-beginners-tubes
+NEO4J_PASSWORD=journals-knives-employee
 NEO4J_DATABASE=

no-nuxt-pls/.gitignore

@@ -88,3 +88,6 @@ sw.*
 
 # Vim swap files
 *.swp
+
+.nuxt-storybook
+storybook-static

no-nuxt-pls/README.md

@@ -1,20 +1,36 @@
 # no-nuxt-pls
 
-## Build Setup
-
-```bash
-# install dependencies
-$ npm install
-
-# serve with hot reload at localhost:3000
-$ npm run dev
+## Installation
+Run 
+```
+npm install
+```
+to install all depedencies. But be warned it will install ~3200 packages
+that are able to break you project without you beeing able to find the issues
+easily. Your file manager will love it.
 
-# build for production and launch server
-$ npm run build
-$ npm run start
+## Run Developer Mode
+You can start a dev server with hot reload by running:
+```
+npm run dev
+```
 
-# generate static project
-$ npm run generate
+## Build and Deploy
+To build the project for deployment run:
+```
+npm run build
+```
+in your project directory.  
+If you have not generated the static project before run:
+```
+npm run generate
+```
+but be careful it takes 100 hours to generate for a simple hello world site.
+That's called efficency and good design.  
+Finally you can start the project with:
+```
+npm run start
 ```
 
+## Details
 For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

no-nuxt-pls/components/LoginForm/LoginForm.vue

@@ -0,0 +1,89 @@
+<template>
+  <form class="login-form" @submit.prevent="submitLogin">
+    <fieldset>
+      <legend>
+        Login
+      </legend>
+      <div>
+        <label for="email">E-Mail:</label>
+        <input
+          id="email"
+          v-model="email"
+          type="email"
+          name="email"
+          size="25"
+        />
+      </div>
+      <div>
+        <label for="password">Password:</label>
+        <input
+          id="password"
+          v-model="password"
+          type="password"
+          name="password"
+          size="25"
+        />
+      </div>
+      <div v-if="error" class="error">
+        {{ error.message }}
+      </div>
+      <div>
+        <button type="submit">Login</button>
+      </div>
+    </fieldset>
+  </form>
+</template>
+
+<script>
+import gql from 'graphql-tag';
+import { mapActions } from 'vuex';
+
+const LOGIN_MUTATION = gql`mutation ($email: String!, $password: String!){ login(email: $email, password: $password) }`;
+
+export default {
+  data() {
+    return {
+      error: null,
+      email: '',
+      password: '',
+    }
+  },
+
+  methods: {
+    ...mapActions('auth', ['login']),
+    async submitLogin() {
+      const { email, password } = this;
+      const { data } = await this.$apollo.mutate({mutation: LOGIN_MUTATION, variables: { email, password }});
+      if (data.login) {
+        await this.$apolloHelpers.onLogin(data.login);
+        await this.$router.push('/');
+      } else {
+        this.error = { message: 'Oops! Something went wrong.' };
+      }
+    }
+  }
+}
+
+/*
+@Component
+export default class LoginForm extends Vue {
+  @Prop() public token: string = this.$store.state.auth.token;
+  public email: string = '';
+  public password: string = '';
+
+
+  @Action('auth')
+  async submitLogin(): Promise<void> {
+    const { login } = await this.$a
+    const res = await this.$apollo.mutate({mutation: gql`mutation ($email: String!, $password: String!){
+          login(email: $email, password: $password)
+        }`, variables: {email: this.email, password: this.password}}).then((data: any) => data.login as string);
+    await this.$app.$apolloHelpers.onLogin(res);
+    this.$store.commit('login', { email: this.email, password: this.password });
+  }
+}; */
+</script>
+
+<style scoped>
+
+</style>

no-nuxt-pls/components/Menu/Menu.vue

@@ -0,0 +1,52 @@
+<template>
+  <nav class="nav-bar">
+    <div>
+      <nuxt-link to="/Login">Login</nuxt-link>
+    </div>
+    <div>
+      <template v-if="token">
+        <button @click="logout">Logout</button>
+      </template>
+      <template v-else> You are not logged in. </template>
+    </div>
+  </nav>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      token: ''
+    }
+  },
+
+  mounted() {
+    this.setupMenu();
+  },
+
+  methods: {
+    setupMenu(){
+      this.token = this.$apolloHelpers.getToken();
+    },
+    logout() {
+      this.token = null;
+      this.$apolloHelpers.onLogout();
+      window.location.reload(false);
+    },
+  },
+};
+</script>
+
+<style>
+.nav-bar {
+  top: 0;
+  position: fixed;
+  width: 100%;
+  height: 6rem;
+  padding: 2rem;
+  border-bottom: 1px solid black;
+  display: flex;
+  justify-content: space-between;
+}
+</style>

no-nuxt-pls/components/NewsItem/NewsItem.vue

@@ -2,13 +2,32 @@
   <div>
     <h2>{{news.title}} ({{news.votes}})</h2>
     <br>
-    <button @click="updateNews(1)">Upvote</button>
-    <button @click="updateNews(-1)">Downvote</button>
-    <button @click="deleteNews">Remove</button>
+    <button v-if="token" @click="updateNews(1)">Upvote</button>
+    <button v-if="token" @click="updateNews(-1)">Downvote</button>
+    <button v-if="authorId === news.author.id" @click="deleteNews">Delete</button>
+    <button v-if="authorId === news.author.id">Edit</button>
   </div>
 </template>
 
-<script lang="ts">
+<script>
+
+export default {
+  props: {
+    news: Object,
+    token: String,
+    authorId: String,
+  },
+
+  methods: {
+    updateNews(value) {
+      this.$emit('update', this.news);
+    },
+    deleteNews() {
+      this.$emit('remove', this.news);
+    }
+  }
+}
+/*
 import { Vue, Component, Prop, Emit } from 'nuxt-property-decorator';
 import { Item } from '@/interface/item';
 
@@ -27,6 +46,7 @@ export default class NewsItem extends Vue {
   }
 
 }
+*/
 </script>
 
 <style scoped>