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>
@@ -46,9 +46,9 @@ export default {
         }
     },
     methods: {
-        activeRouteChange(route){
+        activeRouteChange(route) {
             this.sidebarItems.forEach(item => {
-                if(item.route === route){
+                if (item.route === route) {
                     item.active = true
                 }
                 else {

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: {
@@ -58,7 +61,7 @@ export default {
                 .catch((e) => console.log(e))
         },
 
-        async fetchColumns(){
+        async fetchColumns() {
             fetch(`/api/v1/headers/`)
                 .then(res => res.json())
                 .then(data => this.columns = data)
@@ -76,28 +79,28 @@ export default {
             };
         },
     },
-    mounted () {
+    mounted() {
         this.fetchAllItems();
         this.fetchColumns();
     },
     computed: {
         filteredItems() {
             return [...this.items].filter(item => {
-                for (let [filterParam, filterValues]  of Object.entries(this.currentFilters)) {
-                    if(filterParam === "depth"){
-                        if (item.depth_max < filterValues[0] || item.depth_min > filterValues[1]){
+                for (let [filterParam, filterValues] of Object.entries(this.currentFilters)) {
+                    if (filterParam === "depth") {
+                        if (item.depth_max < filterValues[0] || item.depth_min > filterValues[1]) {
                             return false;
                         }
-                    } else if (!filterValues.includes(item[filterParam])){
+                    } else if (!filterValues.includes(item[filterParam])) {
                         return false;
                     }
                 }
                 return true;
             })
         },
-        filteredAndSearchedItems(){
+        filteredAndSearchedItems() {
             return this.filteredItems.filter(item => {
-                if (this.searchQuery.trim() == ''){
+                if (this.searchQuery.trim() == '') {
                     return true
                 }
                 let result = false;
@@ -119,7 +122,7 @@ export default {
             })
         },
 
-        filteredColumns(){
+        filteredColumns() {
             return this.columns
                 .filter(header => this.showColumns.includes(header.database))
                 .sort((header1, header2) => {

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,
         }
     },