login via graphql

frontend/.env.dist

@@ -1,4 +1,4 @@
 LOGIN_API_URL=http://localhost/login_api/
 COMMUNITY_API_URL=http://localhost/api/
 ALLOW_REGISTER=true
-GRAPHQL_URI=http://localhost:4000
+GRAPHQL_URI=http://localhost:4000/graphql

frontend/src/config/index.js

@@ -13,7 +13,7 @@ const environment = {
 const server = {
   LOGIN_API_URL: process.env.LOGIN_API_URL || 'http://localhost/login_api/',
   COMMUNITY_API_URL: process.env.COMMUNITY_API_URL || 'http://localhost/api/',
-  GRAPHQL_URI: process.env.GRAPHQL_URI || 'http://localhost:4000',
+  GRAPHQL_URI: process.env.GRAPHQL_URI || 'http://localhost:4000/graphql',
 }
 
 const CONFIG = {

frontend/src/graphql/queries.js

@@ -0,0 +1,17 @@
+import gql from 'graphql-tag'
+
+export const login = gql`
+  query($email: String!, $password: String!) {
+    login(email: $email, password: $password) {
+      sessionId
+      user {
+        email
+        firstName
+        lastName
+        language
+        username
+        description
+      }
+    }
+  }
+`

frontend/src/views/Pages/Login.spec.js

@@ -1,18 +1,13 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
 import flushPromises from 'flush-promises'
-import loginAPI from '../../apis/loginAPI'
 import Login from './Login'
 
-jest.mock('../../apis/loginAPI')
-
 const localVue = global.localVue
 
-const mockLoginCall = jest.fn()
-mockLoginCall.mockReturnValue({
-  success: true,
-  result: {
-    data: {
-      session_id: 1,
+const loginQueryMock = jest.fn().mockResolvedValue({
+  data: {
+    login: {
+      sessionId: 1,
       user: {
         name: 'Peter Lustig',
       },
@@ -20,8 +15,6 @@ mockLoginCall.mockReturnValue({
   },
 })
 
-loginAPI.login = mockLoginCall
-
 const toastErrorMock = jest.fn()
 const mockStoreDispach = jest.fn()
 const mockRouterPush = jest.fn()
@@ -52,6 +45,9 @@ describe('Login', () => {
     $toasted: {
       error: toastErrorMock,
     },
+    $apollo: {
+      query: loginQueryMock,
+    },
   }
 
   const stubs = {
@@ -147,7 +143,14 @@ describe('Login', () => {
         })
 
         it('calls the API with the given data', () => {
-          expect(mockLoginCall).toBeCalledWith('user@example.org', '1234')
+          expect(loginQueryMock).toBeCalledWith(
+            expect.objectContaining({
+              variables: {
+                email: 'user@example.org',
+                password: '1234',
+              },
+            }),
+          )
         })
 
         it('creates a spinner', () => {
@@ -173,7 +176,9 @@ describe('Login', () => {
 
         describe('login fails', () => {
           beforeEach(() => {
-            mockLoginCall.mockReturnValue({ success: false })
+            loginQueryMock.mockRejectedValue({
+              message: 'Ouch!',
+            })
           })
 
           it('hides the spinner', () => {

frontend/src/views/Pages/Login.vue

@@ -55,10 +55,10 @@
   </div>
 </template>
 <script>
-import loginAPI from '../../apis/loginAPI'
 import CONFIG from '../../config'
 import InputPassword from '../../components/Inputs/InputPassword'
 import InputEmail from '../../components/Inputs/InputEmail'
+import { login } from '../../graphql/queries'
 
 export default {
   name: 'login',
@@ -81,18 +81,26 @@ export default {
       const loader = this.$loading.show({
         container: this.$refs.submitButton,
       })
-      const result = await loginAPI.login(this.form.email, this.form.password)
-      if (result.success) {
-        this.$store.dispatch('login', {
-          sessionId: result.result.data.session_id,
-          user: result.result.data.user,
+      this.$apollo
+        .query({
+          query: login,
+          variables: {
+            email: this.form.email,
+            password: this.form.password,
+          },
+        })
+        .then((result) => {
+          const {
+            data: { login },
+          } = result
+          this.$store.dispatch('login', login)
+          this.$router.push('/overview')
+          loader.hide()
+        })
+        .catch(() => {
+          loader.hide()
+          this.$toasted.error(this.$t('error.no-account'))
         })
-        this.$router.push('/overview')
-        loader.hide()
-      } else {
-        loader.hide()
-        this.$toasted.error(this.$t('error.no-account'))
-      }
     },
   },
 }