add make login page functional using federation layer and enforce login in router

frontend/src/components/BaseLayout.vue

@@ -6,6 +6,11 @@
                 <a class="sidebar-toggle d-flex" @click="toggleSidebar">
                     <i class="hamburger align-self-center"></i>
                 </a>
+                <div class="navbar-collapse collapse">
+                    <ul class="navbar-nav navbar-align">
+                        <UserDropdown/>
+                    </ul>
+                </div>
             </nav>
             <slot></slot>
             <Footer/>
@@ -14,12 +19,15 @@
 </template>
 
 <script>
+/* global closeAllDropdowns */
 import Footer from "@/components/Footer.vue";
 import Sidebar from "@/components/Sidebar.vue";
+import UserDropdown from "@/components/UserDropdown.vue";
 
 export default {
     name: 'BaseLayout',
     components: {
+        UserDropdown,
         Footer,
         Sidebar
     },
@@ -68,6 +76,10 @@ export default {
     box-shadow: 0 0 2rem var(--bs-shadow)
 }
 
+.navbar-align {
+    margin-left: auto;
+}
+
 .navbar-bg {
     background: var(--bs-white);
 }

frontend/src/components/UserDropdown.vue

@@ -0,0 +1,47 @@
+<template>
+    <li class="nav-item dropdown">
+        <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" @click="toggleDropdown">
+            <i class="align-middle" data-feather="settings"></i>
+            <b-icon-person class="bi-valign-middle"></b-icon-person>
+        </a>
+
+        <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" @click="toggleDropdown">
+            <span class="text-dark">
+                {{ username }}
+            </span>
+        </a>
+
+        <div class="dropdown-menu dropdown-menu-right" id="userDropdown">
+            <a class="dropdown-item" href="#" @click="logout"> Log out</a>
+        </div>
+    </li>
+</template>
+
+<script>
+import * as BIcons from 'bootstrap-icons-vue';
+import {mapMutations, mapState} from "vuex";
+
+export default {
+    name: "UserDropdown",
+    components: {
+        ...BIcons
+    },
+    methods: {
+        ...mapMutations(['logout']),
+        toggleDropdown() {
+            closeAllDropdowns();
+            document.getElementById("userDropdown").classList.toggle("show");
+        }
+    },
+    computed: {
+        ...mapState(['user']),
+        username() {
+            return this.user;
+        },
+    }
+}
+</script>
+
+<style scoped>
+
+</style>