add: frontend login proto

frontend/src/components/LoginModal.vue

@@ -0,0 +1,45 @@
+<template>
+    <va-modal v-model="showModal" @ok="handleSubmit" @close="$emit('closeModal')">
+        <va-form autofocus tag="form" @submit.prevent="handleSubmit" class="login-form">
+            <va-input label="Username" v-model="username" class="form-item" />
+            <va-input type="password" label="Password" v-model="password" class="form-item" />
+        </va-form>
+    </va-modal>
+</template>
+
+
+<script>
+export default {
+    name: 'login-form',
+    props: {
+        showModal: {
+            type: Boolean,
+            required: true,
+        }
+    },
+    data() {
+        return {
+            username: 'demo',
+            password: 'demo',
+        }
+    },
+    methods: {
+        handleSubmit() {
+            this.$router.push('/admin')
+        }
+    },
+}
+</script>
+
+
+<style lang="css" scoped>
+.login-form {
+    display: flex;
+    flex-direction: column;
+    width: 30rem;
+}
+
+.form-item {
+    margin: 1rem auto;
+}
+</style>

frontend/src/components/LoginScreen.vue

@@ -0,0 +1,45 @@
+<template>
+    <navbar />
+    <va-modal v-model="showModal" :overlay="false" no-dismiss without-transitions hide-default-actions>
+        <va-form autofocus tag="form" @submit.prevent="handleSubmit" class="login-form">
+            <va-input label="Username" v-model="username" class="form-item" />
+            <va-input type="password" label="Password" v-model="password" class="form-item" />
+            <va-button type="submit" class="form-item">Login</va-button>
+        </va-form>
+    </va-modal>
+</template>
+
+
+<script>
+import Navbar from '@/components/Navbar.vue';
+export default {
+    name: 'login-screen',
+    components: { Navbar },
+    data() {
+        return {
+            showModal: true,
+            username: 'demo',
+            password: 'demo',
+        }
+    },
+    methods: {
+        handleSubmit() {
+            this.$router.push('/admin')
+        }
+    },
+}
+</script>
+
+
+<style lang="css" scoped>
+.login-form {
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+    width: 30rem;
+}
+
+.form-item {
+    margin: 1rem auto;
+}
+</style>

frontend/src/components/Navbar.vue

@@ -9,7 +9,7 @@
             </template>
             <template #right>
                 <va-navbar-item class="top-icon">
-                    <va-icon size="3rem" color="gray" name="account_box" @click="$router.push('/admin')" />
+                    <va-icon size="3rem" color="gray" name="account_box" @click="$emit('accountClick')" />
                 </va-navbar-item>
             </template>
         </va-navbar>

frontend/src/router/index.js

@@ -6,6 +6,7 @@ import ActiveSchemaScreen from "@/components/ActiveSchemaScreen";
 import PgwebEmbed from "@/components/PgwebEmbed";
 import UploadScreen from "@/components/UploadScreen";
 import NotFound from "@/components/NotFound";
+import LoginScreen from "@/components/LoginScreen";
 
 
 
@@ -28,6 +29,11 @@ const routes = [
         component: ItemView,
         name: 'item-details',
     },
+    {
+        path: '/login',
+        component: LoginScreen,
+        name: 'login-screen'
+    },
     {
         path: '/:pathMatch(.*)*',
         component: NotFound,

frontend/src/views/AdminView.vue

@@ -1,5 +1,5 @@
 <template>
-    <navbar />
+    <navbar @accountClick="$router.push('/login')" />
 
     <div class="central-view">
         <sidebar>

frontend/src/views/FrontView.vue

@@ -1,5 +1,5 @@
 <template>
-    <navbar>
+    <navbar @accountClick="showModal=!showModal">
         <va-input v-model="searchQuery"></va-input>
     </navbar>
     <div class="central-view">
@@ -10,6 +10,7 @@
             <overview-screen :items="filteredAndSearchedItems" :columns="filteredColumns" @mapClick="applyFilters" />
         </div>
     </div>
+    <login-modal :showModal="showModal" @closeModal="showModal=false" />
 </template>
 
 
@@ -18,9 +19,10 @@ import Navbar from "@/components/Navbar.vue";
 import Sidebar from "@/components/Sidebar.vue";
 import OverviewScreen from "@/components/OverviewScreen.vue";
 import FilterPanel from "@/components/FilterPanel.vue";
+import LoginModal from "@/components/LoginModal.vue";
 export default {
     name: "front-view",
-    components: { Navbar, Sidebar, OverviewScreen, FilterPanel },
+    components: { Navbar, Sidebar, OverviewScreen, FilterPanel, LoginModal },
     data() {
         return {
             items: [],
@@ -48,6 +50,7 @@ export default {
                 "org",
                 "category",
             ],
+            showModal: false,
         }
     },
     methods: {

frontend/src/views/ItemView.vue

@@ -1,5 +1,5 @@
 <template>
-    <navbar />
+    <navbar @accountClick="showModal=!showModal" />
     <div class="central-view">
         <sidebar>
             <item-sidebar-menu :sidebarItems="sidebarItems" />
@@ -8,6 +8,7 @@
             <item-details />
         </div>
     </div>
+    <login-modal :showModal="showModal" @closeModal="showModal=false" />
 </template>
 
 
@@ -16,8 +17,9 @@ import Navbar from "@/components/Navbar.vue";
 import ItemDetails from "@/components/ItemDetails.vue";
 import Sidebar from "@/components/Sidebar.vue";
 import ItemSidebarMenu from "@/components/ItemSidebarMenu.vue";
+import LoginModal from "@/components/LoginModal.vue";
 export default {
-    components: { Navbar, ItemDetails, Sidebar, ItemSidebarMenu },
+    components: { Navbar, ItemDetails, Sidebar, ItemSidebarMenu, LoginModal },
     data() {
         return {
             sidebarItems: [
@@ -53,7 +55,7 @@ export default {
                 },
 
             ],
-
+            showModal: false,
         }
     },