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,20 +1,29 @@
-# nuxt-webapp
+# TheCodeNinjas Webapp
 
-## Build Setup
+## Installation Steps
+
+Follow these steps to build the webapp for production
+
+1. Clone this project
+
+2. Go to the "webapp" folder (Where this README is located)
+
+3. Run these commands
 
 ```bash
-# install dependencies
+
+# Install all necessary dependencies
 $ npm install
 
-# serve with hot reload at localhost:3000
-$ npm run dev
+# Generate the static project
+$ npm run generate
 
-# build for production and launch server
+# Build the app for production
 $ npm run build
+
+# Start the production server
 $ npm run start
 
-# generate static project
-$ npm run generate
+#(Optional) Run the project in a development environment with hot reload
+$ npm run dev
 ```
-
-For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

webapp/components/LoginForm/LoginForm.spec.ts

@@ -0,0 +1,51 @@
+import LoginForm from '~/components/LoginForm/LoginForm.vue'
+import { setupWrapperAndStore } from '~/utils/tests'
+
+jest.mock('~/utils/globals')
+
+describe('Login form tests', () => {
+  it('should set up test utilities properly', () => {
+    const { wrapper, storeAccessor, localVue } = setupWrapperAndStore(LoginForm)
+
+    expect(wrapper).toBeTruthy()
+    expect(storeAccessor).toBeTruthy()
+    expect(localVue).toBeTruthy()
+  })
+
+  describe('Form submit', () => {
+    const { wrapper, storeAccessor, localVue } = setupWrapperAndStore(LoginForm)
+    const inputEmail = wrapper.find('input#input-email')
+    const inputPassword = wrapper.find('input#input-password')
+    const form = wrapper.find('form')
+
+    it('should shows no error', async () => {
+      inputEmail.setValue('[email protected]')
+      inputPassword.setValue('rightPassword')
+
+      await form.trigger('submit')
+      await localVue.nextTick()
+
+      expect(storeAccessor.auth.getError).toBe(null)
+    })
+
+    it('should show  wrong credentials error', async () => {
+      inputEmail.setValue('[email protected]')
+      inputPassword.setValue('wrongPassword')
+
+      await form.trigger('submit')
+      await localVue.nextTick()
+
+      expect(storeAccessor.auth.getError).toBe('Wrong credentials!')
+    })
+
+    it('should show friendly error message', async () => {
+      inputEmail.setValue('[email protected]')
+      inputPassword.setValue('somePassword')
+
+      await form.trigger('submit')
+      await localVue.nextTick()
+
+      expect(storeAccessor.auth.getError).toBe('Oops! Something went wrong.')
+    })
+  })
+})

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,10 +1,11 @@
 <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
+              id="input-email"
               v-model="email"
               class="uk-input"
               type="text"
@@ -16,6 +17,7 @@
         <div class="uk-margin">
           <div class="uk-inline">
             <input
+              id="input-password"
               v-model="password"
               class="uk-input"
               type="password"
@@ -26,69 +28,66 @@
 
         <div>
           <div class="uk-inline">
-            <button class="uk-button" type="submit">Sign in</button>
+            <button class="uk-button" type="submit" :disabled="loading">
+              Sign in
+            </button>
+
+            <div v-if="loading" uk-spinner></div>
           </div>
         </div>
+
+        <div v-if="error" class="uk-alert uk-alert-danger">
+          {{ error }}
+        </div>
       </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
     },
+    error() {
+      return this.$accessor.auth.getError
+    },
+    loading() {
+      return this.$accessor.auth.getLoading
+    },
+  },
+  created() {
+    this.$accessor.auth.setLoading(false)
+    this.$accessor.auth.setError(null)
   },
   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"