Added login to the application to make authenticated api requests.

assets/js/api/user.js

@@ -0,0 +1,13 @@
+import axios from 'axios';
+
+export default {
+    login: function (email, password) {
+        return axios.post('/login_api', {
+            email: email,
+            password: password
+        });
+    },
+    getUserData: function (userIri) {
+        return axios.get(userIri);
+    },
+}

assets/js/components/loginform.vue

@@ -0,0 +1,47 @@
+<template>
+  <form v-on:submit.prevent="handleSubmit">
+    <div v-if="error" class="alert alert-danger">
+      {{ error }}
+    </div>
+    <div class="form-group">
+      <label for="exampleInputEmail1">Email address</label>
+      <input type="email" v-model="email" class="form-control" id="exampleInputEmail1"
+             aria-describedby="emailHelp" placeholder="Enter email">
+    </div>
+    <div class="form-group">
+      <label for="exampleInputPassword1">Password</label>
+      <input type="password" v-model="password" class="form-control"
+             id="exampleInputPassword1" placeholder="Password">
+    </div>
+    <div class="form-check">
+      <input type="checkbox" class="form-check-input" id="exampleCheck1">
+      <label class="form-check-label" for="exampleCheck1">I like cheese</label>
+    </div>
+    <button type="submit" class="btn btn-primary" v-bind:class="{ disabled: isLoading }">Log in</button>
+  </form>
+</template>
+
+<script>
+import {mapActions} from "vuex";
+
+export default {
+  data() {
+    return {
+      email: '',
+      password: '',
+      error: '',
+      isLoading: false
+    }
+  },
+  props: ['user'],
+  methods: {
+    ...mapActions('usermodule', ['login']),
+    handleSubmit() {
+      this.login({'email': this.email, 'password': this.password});
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+</style>

assets/js/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import booksmodule from './modules/books';
 import bookprogressmodule from './modules/bookprogress';
 import filemodule from './modules/filemodule';
+import usermodule from './modules/usermodule';
 
 Vue.use(Vuex)
 
@@ -10,7 +11,8 @@ export default new Vuex.Store({
     modules:{
         booksmodule,
         bookprogressmodule,
-        filemodule
+        filemodule,
+        usermodule
     }
 })
 

assets/js/store/modules/usermodule.js

@@ -0,0 +1,81 @@
+import UserApi from "../../api/user";
+import {
+    LOGIN_START,
+    LOGIN_SUCCESS,
+    LOGIN_ERROR,
+    STORE_USER_INFO,
+} from '../mutation-types.js'
+
+export default {
+    namespaced: true,
+    state: {
+        isLoading: false,
+        error: null,
+        user: null,
+        userUri: null,
+    },
+    getters: {
+        isLoading(state) {
+            return state.isLoading;
+        },
+        hasError(state) {
+            return state.error !== null;
+        },
+        error(state) {
+            return state.error;
+        }
+    },
+    mutations: {
+        [LOGIN_START](state) {
+            state.isLoading = true;
+            state.error = null;
+            state.user = null;
+        },
+        [LOGIN_SUCCESS](state, userUri) {
+            state.isLoading = false;
+            state.error = null;
+            state.userUri = userUri;
+        },
+        [STORE_USER_INFO](state, user) {
+            state.isLoading = false;
+            state.error = null;
+            state.user = user;
+        },
+        [LOGIN_ERROR](state, error) {
+            state.isLoading = false;
+            state.error = error;
+            state.user = null;
+        },
+    },
+    actions: {
+        async login({dispatch, commit}, data) {
+            console.info(data.email);
+            console.info(data.password);
+            commit(LOGIN_START);
+            let response = await UserApi.login(data.email, data.password)
+                .then(response => {
+                    console.log(response.data);
+                    console.log(response.headers.location);
+                    // commit(LOGIN_SUCCESS,response.data);
+                    dispatch('getUserInfo', response.headers.location)
+                    commit(LOGIN_SUCCESS, response.headers.location);
+                    //this.$emit('user-authenticated', userUri);
+                    //this.email = '';
+                    //this.password = '';
+                }).catch(error => {
+                    if (error.response.data.error) {
+
+                        commit(LOGIN_ERROR, error.response.data.error);
+                        console.log(error.response.data.error);
+                    }
+
+                }).finally(() => {
+                    // this.isLoading = false;
+                })
+        },
+        async getUserInfo({commit}, userUri) {
+            let userInfo = await UserApi.getUserData(userUri);
+            commit(STORE_USER_INFO, userInfo.data);
+        }
+    }
+};

assets/js/store/mutation-types.js

@@ -8,5 +8,10 @@ export const
     FETCHING_FILES = "FETCHING_FILES",
     FETCHING_FILES_SUCCESS = "FETCHING_FILES_SUCCESS",
     FETCHING_FILES_ERROR = "FETCHING_FILES_ERROR",
-    REMOVE_FILE_FROM_LIST = "REMOVE_FILE_FROM_LIST"
+    REMOVE_FILE_FROM_LIST = "REMOVE_FILE_FROM_LIST",
+
+    LOGIN_START = "LOGIN_START",
+    LOGIN_SUCCESS = "LOGIN_SUCCESS",
+    LOGIN_ERROR = "LOGIN_ERROR",
+    STORE_USER_INFO = "STORE_USER_INFO"
 ;

assets/js/user.js

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import Loginform from "./components/loginform";
+import store from "./store/index";
+
+Vue.component('Loginform', Loginform);
+new Vue({store}).$mount('#app');

config/packages/security.yaml

@@ -14,6 +14,10 @@ security:
             pattern: ^/(_(profiler|wdt)|css|images|js)/
             security: false
         main:
+            json_login:
+                check_path: app_login_api
+                username_path: email
+                password_path: password
             lazy: true
             provider: app_user_provider
             custom_authenticator: App\Security\CustomAuthenticator

src/Controller/IndexController.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Annotation\Route;
+
+class IndexController extends AbstractController
+{
+    #[Route('/', name: 'app_index')]
+    public function index(): Response
+    {
+        return $this->render('index/index.html.twig', [
+            'controller_name' => 'IndexController',
+        ]);
+    }
+}

src/Controller/SecurityController.php

@@ -2,19 +2,22 @@
 
 namespace App\Controller;
 
+use ApiPlatform\Core\Api\IriConverterInterface;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
 use Symfony\Component\Security\Http\Authentication\AuthenticationUtils;
+use Symfony\Component\Validator\Constraints\Json;
 
 class SecurityController extends AbstractController
 {
     #[Route(path: '/login', name: 'app_login')]
     public function login(AuthenticationUtils $authenticationUtils): Response
     {
-        // if ($this->getUser()) {
-        //     return $this->redirectToRoute('target_path');
-        // }
+        if ($this->getUser()) {
+            return $this->redirectToRoute('app_book_index');
+        }
 
         // get the login error if there is one
         $error = $authenticationUtils->getLastAuthenticationError();
@@ -24,9 +27,23 @@ class SecurityController extends AbstractController
         return $this->render('security/login.html.twig', ['last_username' => $lastUsername, 'error' => $error]);
     }
 
+    #[Route(path: '/login_api', name: 'app_login_api', methods: ['POST'])]
+    public function login_api(IriConverterInterface $iriConverter): Response
+    {
+        return new Response(null, 204, [
+            'Location' => $iriConverter->getIriFromItem($this->getUser())
+        ]);
+//        return $this->json([
+//            'user' => $this->getUser() ? $this->getUser()->getId() : null
+//        ]);
+    }
+
+
     #[Route(path: '/logout', name: 'app_logout')]
     public function logout(): void
     {
-        throw new \LogicException('This method can be blank - it will be intercepted by the logout key on your firewall.');
+        throw new \LogicException(
+            'This method can be blank - it will be intercepted by the logout key on your firewall.'
+        );
     }
 }

src/Entity/User.php

@@ -2,11 +2,13 @@
 
 namespace App\Entity;
 
+use ApiPlatform\Core\Annotation\ApiResource;
 use App\Repository\UserRepository;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Security\Core\User\PasswordAuthenticatedUserInterface;
 use Symfony\Component\Security\Core\User\UserInterface;
 
+#[ApiResource]
 #[ORM\Entity(repositoryClass: UserRepository::class)]
 #[ORM\Table(name: '`user`')]
 class User implements UserInterface, PasswordAuthenticatedUserInterface

src/Security/CustomAuthenticator.php

@@ -49,9 +49,7 @@ class CustomAuthenticator extends AbstractLoginFormAuthenticator
             return new RedirectResponse($targetPath);
         }
 
-        // For example:
-        // return new RedirectResponse($this->urlGenerator->generate('some_route'));
-        throw new \Exception('TODO: provide a valid redirect inside '.__FILE__);
+        return new RedirectResponse($this->urlGenerator->generate('app_book_index'));
     }
 
     protected function getLoginUrl(Request $request): string

templates/index/index.html.twig

@@ -0,0 +1,27 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Hello IndexController!{% endblock %}
+
+{% block body %}
+    <style>
+        .example-wrapper {
+            margin: 1em auto;
+            max-width: 800px;
+            width: 95%;
+            font: 18px/1.5 sans-serif;
+        }
+
+        .example-wrapper code {
+            background: #F5F5F5;
+            padding: 2px 6px;
+        }
+    </style>
+
+    <div id="app">
+        <loginform></loginform>
+    </div>
+{% endblock %}
+
+{% block javascripts %}
+    {{ encore_entry_script_tags('user') }}
+{% endblock %}

webpack.config.js

@@ -23,6 +23,7 @@ Encore
     .addEntry('app', './assets/js/app.js')
     .addEntry('files', './assets/js/files.js')
     .addEntry('book', './assets/js/book.js')
+    .addEntry('user', './assets/js/user.js')
 
     // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
     .enableStimulusBridge('./assets/controllers.json')