Pull request for homework 7

.gitignore

@@ -1,3 +1,6 @@
+.nuxt-storybook
+storybook-static
+
 .DS_Store
 node_modules/
 /dist/
@@ -23,4 +26,4 @@ yarn-error.log*
 git-crypt-key
 
 
-backend/.git
+backend/.git

backend/src/datasources/persons.datasource.ts

@@ -12,6 +12,8 @@ export default class PersonsDatasource extends DataSource {
       query($email: String!) {
         person(where: { email: $email }) {
           id
+          name
+          email
           passwordHash
           passwordSalt
         }
@@ -46,6 +48,8 @@ export default class PersonsDatasource extends DataSource {
           }
         ) {
           id
+          name
+          email
         }
       }
     `;

backend/src/jwt-payload.ts

@@ -1,4 +1,6 @@
 export interface JwtPayload {
   id: string;
+  name: string;
+  email: string;
   iat?: number;
 }

backend/src/resolvers/persons.resolver.ts

@@ -47,7 +47,11 @@ export function mutation(subSchemas: GraphQLSchema[], executor: Executor) {
         );
       } else {
         const person: Partial<Person> = result.data.person;
-        const payload: JwtPayload = { id: person.id };
+        const payload: JwtPayload = {
+          id: person.id,
+          name: person.name,
+          email: person.email,
+        };
 
         return jwt.sign(payload, process.env.JWT_SECRET, {
           expiresIn: process.env.JWT_EXPIRES_IN,
@@ -76,7 +80,11 @@ export function mutation(subSchemas: GraphQLSchema[], executor: Executor) {
         const hash = await bcrypt.hash(password, person.passwordSalt);
 
         if (hash === result.data.person.passwordHash) {
-          const payload: JwtPayload = { id: person.id };
+          const payload: JwtPayload = {
+            id: person.id,
+            name: person.name,
+            email: person.email,
+          };
 
           return jwt.sign(payload, process.env.JWT_SECRET, {
             expiresIn: process.env.JWT_EXPIRES_IN,

webapp/README.md

@@ -1,4 +1,4 @@
-# nuxt-webapp
+# webapp
 
 ## Build Setup
 

webapp/components/LoginForm/LoginForm.spec.ts

@@ -0,0 +1,11 @@
+import LoginForm from '~/components/LoginForm/LoginForm.vue'
+import { setupWrapperAndStore } from '~/utils/tests'
+
+describe('Login form tests', () => {
+  it('Tests True', () => {
+    const { wrapper, storeAccessor } = setupWrapperAndStore(LoginForm)
+
+    expect(wrapper).toBeTruthy()
+    expect(storeAccessor).toBeTruthy()
+  })
+})

webapp/components/LoginForm/LoginForm.stories.js

@@ -0,0 +1,27 @@
+import NewsItem from './NewsItem.vue'
+
+const newsItem = {
+  id: 1,
+  title: 'Test News Item',
+  votes: 0,
+}
+
+export default {
+  title: 'NewsItem',
+  component: NewsItem,
+  argTypes: {
+    update: { action: 'down- or upvote event action' },
+    remove: { action: 'remove-event action' },
+  },
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { NewsItem },
+  template: '<NewsItem @update="update" @remove="remove" v-bind="$props" />',
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  newsItem,
+}

webapp/components/LoginForm/LoginForm.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div v-if="!login">
-      <form @submit.prevent="signIn">
+    <div v-if="!isLoggedIn">
+      <form @submit.prevent="login">
         <div class="uk-margin">
           <div class="uk-inline">
             <input
@@ -32,63 +32,42 @@
       </form>
     </div>
     <div v-else>
-      <div class="uk-margin">Hallo {{ userId }}</div>
-
-      <div class="uk-margin">
-        <textarea v-model="jwt" class="uk-textarea" rows="10" />
-      </div>
-
-      <button class="uk-button" @click="signOut">Sign out</button>
+      <h1 class="uk-margin">Hallo {{ user.name }}</h1>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import jwtDecode, { JwtPayload } from 'jwt-decode'
 
 export default Vue.extend({
   name: 'LoginForm',
-  props: {
-    login: {
-      type: Boolean,
-      required: true,
-    },
-  },
-
   data() {
     return {
       email: null,
       password: null,
     }
   },
   computed: {
-    jwt(): string | null {
-      // TODO: get from vuex store
-      // return window.localStorage.getItem('token')
-      return ''
+    isLoggedIn() {
+      return this.$accessor.auth.isLoggedIn
     },
-    userId(): string | null {
-      if (this.jwt) {
-        const payload = jwtDecode<JwtPayload & { id: string }>(this.jwt)
-
-        if (payload) {
-          return payload.id
-        }
-      }
-
-      return null
+    user() {
+      return this.$accessor.auth.getUser
+    },
+    token() {
+      return this.$accessor.auth.getToken
     },
   },
   methods: {
-    signIn() {
+    async login() {
       const email = this.email
       const password = this.password
 
-      this.$emit('signIn', { email, password })
+      await this.$accessor.auth.login({ email, password })
     },
-    signOut() {
-      this.$emit('signOut')
+    async logout() {
+      await this.$accessor.auth.logout()
     },
   },
 })

webapp/components/NewsItem/NewsItem.vue

@@ -23,6 +23,15 @@
         <i class="mdi mdi-18px mdi-thumb-down" aria-hidden="true"></i>
       </button>
     </td>
+    <td v-if="login" class="uk-table-shrink">
+      <button
+        v-if="newsItem.id && isOwner"
+        class="uk-icon-button uk-button-default"
+        aria-label="Edit"
+      >
+        <i class="mdi mdi-18px mdi-pencil" aria-hidden="true"></i>
+      </button>
+    </td>
     <td v-if="login" class="uk-table-shrink">
       <button
         v-if="newsItem.id && isOwner"

webapp/components/NewsList/NewsList.spec.ts

@@ -1,7 +1,9 @@
-import { createLocalVue, mount } from '@vue/test-utils'
-import NewsList from '@/components/NewsList/NewsList.vue'
-import NewsItem from '@/components/NewsItem/NewsItem.vue'
+import { createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
+import NewsItem from '../NewsItem/NewsItem.vue'
+import NewsList from './NewsList.vue'
 import { NewsItemModel } from '~/models/news-item.model'
+import { setupWrapperAndStore } from '~/utils/tests'
 
 const newsItemsMock = [
   new NewsItemModel({
@@ -21,7 +23,7 @@ const newsItemsMock = [
     author: {
       id: '1',
       name: 'Christoph Stach',
-      email: 's0555912@htw-berlin.de',
+      email: 's0555912@htw-berlisn.de',
     },
   }),
   new NewsItemModel({
@@ -38,56 +40,45 @@ const newsItemsMock = [
 
 describe('NewsList', () => {
   const localVue = createLocalVue()
+  localVue.use(Vuex)
 
-  it('exists', () => {
-    const wrapper = mount(NewsList, {
-      localVue,
+  it('should exist', () => {
+    const { wrapper, storeAccessor } = setupWrapperAndStore(NewsList, {
+      newsItems: [],
     })
 
     expect(wrapper).toBeTruthy()
+    expect(storeAccessor).toBeTruthy()
   })
 
   it('renders no news items', () => {
-    const wrapper = mount(NewsList, {
-      localVue,
-      data() {
-        return { newsItems: [] }
-      },
+    const { wrapper, storeAccessor } = setupWrapperAndStore(NewsList, {
+      newsItems: [],
     })
 
     expect(wrapper.findAllComponents(NewsItem)).toHaveLength(0)
   })
 
   it('renders news item', () => {
-    const wrapper = mount(NewsList, {
-      localVue,
-      data() {
-        return { newsItems: newsItemsMock }
-      },
+    const { wrapper, storeAccessor } = setupWrapperAndStore(NewsList, {
+      newsItems: newsItemsMock,
     })
 
     expect(wrapper.findAllComponents(NewsItem)).toHaveLength(3)
   })
 
   it('renders empty list message', () => {
     const emptyMessage = 'No News in the list!'
-
-    const wrapper = mount(NewsList, {
-      localVue,
-      data() {
-        return { newsItems: [] }
-      },
+    const { wrapper, storeAccessor } = setupWrapperAndStore(NewsList, {
+      newsItems: [],
     })
 
     expect(wrapper.text()).toMatch(emptyMessage)
   })
 
   it('check order: check initial order before clicking the toggle-button', () => {
-    const wrapper = mount(NewsList, {
-      localVue,
-      data() {
-        return { newsItems: newsItemsMock }
-      },
+    const { wrapper, storeAccessor } = setupWrapperAndStore(NewsList, {
+      newsItems: newsItemsMock,
     })
 
     const votes = wrapper
@@ -98,11 +89,8 @@ describe('NewsList', () => {
   })
 
   it('toggles between ascending and descending order', async () => {
-    const wrapper = mount(NewsList, {
-      localVue,
-      data() {
-        return { newsItems: newsItemsMock }
-      },
+    const { wrapper, storeAccessor } = setupWrapperAndStore(NewsList, {
+      newsItems: newsItemsMock,
     })
 
     const button = wrapper.find('[data-test-toggle]')