frontend/src/components/BaseLayout.vue

@@ -6,14 +6,7 @@
                 <a class="sidebar-toggle d-flex">
                     <i class="hamburger align-self-center"></i>
                 </a>
-                <form class="d-none d-sm-inline-block">
-                    <div class="input-group input-group-navbar">
-                        <input type="text" class="form-control" placeholder="Search…" aria-label="Search">
-                        <button class="btn" type="button">
-                            <b-icon-search class="bi-valign-middle"></b-icon-search>
-                        </button>
-                    </div>
-                </form>
+                <SearchBox/>
                 <div class="navbar-collapse collapse">
                     <ul class="navbar-nav navbar-align">
                         <Notifications :notifications="notifications"/>
@@ -30,32 +23,26 @@
 
 <script>
 import {mapGetters, mapMutations, mapState} from 'vuex';
-import * as BIcons from "bootstrap-icons-vue";
 import Notifications from "@/components/Notifications.vue";
 import Messages from "@/components/Messages.vue";
 import Footer from "@/components/Footer.vue";
 import Sidebar from "@/components/Sidebar.vue";
 import UserDropdown from "@/components/UserDropdown.vue";
+import SearchBox from "@/components/SearchBox.vue";
 
 export default {
     name: 'BaseLayout',
     components: {
+        SearchBox,
         UserDropdown,
         Sidebar,
         Footer,
         Messages,
-        Notifications,
-        ...BIcons
+        Notifications
     },
     computed: {
         ...mapState(['messages']),
-        ...mapGetters(['notifications']),
-        username() {
-            return this.$route.params.username
-        },
-    },
-    methods: {
-        ...mapMutations(['logout'])
+        ...mapGetters(['notifications'])
     },
     async mounted() {
     }

frontend/src/components/Messages.vue

@@ -82,7 +82,6 @@
 </template>
 
 <script>
-import {mapGetters, mapMutations} from 'vuex';
 import * as BIcons from "bootstrap-icons-vue";
 
 export default {

frontend/src/components/SearchBox.vue

@@ -0,0 +1,44 @@
+<template>
+    <form class="d-none d-sm-inline-block">
+        <div class="input-group input-group-navbar">
+            <input type="text" class="form-control" placeholder="Search…" aria-label="Search" v-model="query" id="searchText">
+            <button class="btn" type="button" @click.prevent="search">
+                <b-icon-search class="bi-valign-middle"></b-icon-search>
+            </button>
+        </div>
+    </form>
+</template>
+
+<script>
+
+import * as BIcons from "bootstrap-icons-vue";
+
+export default {
+    name: "SearchBox",
+    components: {
+        ...BIcons
+    },
+    data() {
+        return {
+            query: ""
+        }
+    },
+    methods: {
+        search() {
+            if(this.query.length > 0)
+                this.$router.push("/search/" + encodeURIComponent(this.query));
+            else
+                document.getElementById("searchText").focus();
+        }
+    },
+    mounted() {
+        console.log(this.$route)
+        console.log(this.$route.params.query)
+        this.query = decodeURIComponent(this.$route.params.query || encodeURIComponent(""));
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/Sidebar.vue

@@ -26,9 +26,13 @@
 </template>
 
 <script>
+import * as BIcons from "bootstrap-icons-vue";
 
 export default {
-    name: "Sidebar"
+    name: "Sidebar",
+    components: {
+        ...BIcons
+    },
 }
 </script>
 

frontend/src/components/UserDropdown.vue

@@ -8,10 +8,10 @@
 
         <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#"
            data-toggle="dropdown">
-            <!--<img src="/static/assets/img/avatars/avatar.png" class="avatar img-fluid rounded mr-1"
-                 alt="Charles Hall"/>-->
+            <img src="/assets/img/avatars/avatar.png" class="avatar img-fluid rounded mr-1"
+                 alt="Charles Hall"/>
             <span class="text-dark">
-                        <!--{{ request.user.username }}-->
+                        {{ username }}
                     </span>
         </a>
 
@@ -32,12 +32,22 @@
 </template>
 
 <script>
-
-import Messages from "@/components/Messages.vue";
+import * as BIcons from "bootstrap-icons-vue";
+import {mapMutations} from "vuex";
 
 export default {
     name: "UserDropdown",
-    components: {Messages}
+    components: {
+        ...BIcons
+    },
+    methods: {
+        ...mapMutations(['logout'])
+    },
+    computed: {
+        username() {
+            return this.$route.params.username
+        },
+    }
 }
 </script>
 

frontend/src/router.js

@@ -7,6 +7,7 @@ import Profile from '@/views/Profile.vue';
 import Settings from '@/views/Settings.vue';
 import Inventory from '@/views/Inventory.vue';
 import Friends from "@/views/Friends.vue";
+import Search from "@/views/Search.vue";
 import InventoryNew from "@/views/InventoryNew.vue";
 import InventoryEdit from "@/views/InventoryEdit.vue";
 import InventoryDetail from "@/views/InventoryDetail.vue";
@@ -21,6 +22,7 @@ const routes = [
     {path: '/inventory/:id/edit', component: InventoryEdit, meta: {requiresAuth: true}},
     {path: '/inventory/new', component: InventoryNew, meta: {requiresAuth: true}},
     {path: '/friends', component: Friends, meta: {requiresAuth: true}},
+    {path: '/search/:query', component: Search, meta: {requiresAuth: true}},
     {path: '/login', component: Login, meta: {requiresAuth: false}},
     {path: '/register', component: Register, meta: {requiresAuth: false}},
 ]

frontend/src/store.js

@@ -84,7 +84,6 @@ export default createStore({
                 const j = await dispatch('apiLocalGet', {target: '/auth/keys/'})
                 const k = j.key
                 commit('setKey', k)
-                await router.push({path: '/'});
                 return true;
             } else {
                 return false;

frontend/src/views/InventoryDetail.vue

@@ -1,7 +1,3 @@
-<script setup>
-
-</script>
-
 <template>
     <BaseLayout>
         <main class="content">

frontend/src/views/InventoryEdit.vue

@@ -1,7 +1,3 @@
-<script setup>
-
-</script>
-
 <template>
     <BaseLayout>
         <main class="content">

frontend/src/views/InventoryNew.vue

@@ -1,7 +1,3 @@
-<script setup>
-
-</script>
-
 <template>
     <BaseLayout>
         <main class="content">

frontend/src/views/Login.vue

@@ -66,6 +66,7 @@
 
 <script>
 import {mapActions, mapMutations} from 'vuex';
+import router from "@/router";
 
 export default {
     name: 'Login',
@@ -82,7 +83,13 @@ export default {
         ...mapMutations(['setRemember']),
         async do_login(e) {
             e.preventDefault();
-            if (!await this.login({username: this.username, password: this.password, remember: this.remember})) {
+            if (await this.login({username: this.username, password: this.password, remember: this.remember})) {
+                if (this.$route.query.redirect) {
+                    await router.push({path: this.$route.query.redirect});
+                } else {
+                    await router.push({path: '/'});
+                }
+            } else {
                 this.msg = 'Invalid username or password';
             }
 

frontend/src/views/Search.vue

@@ -0,0 +1,41 @@
+<template>
+    <BaseLayout>
+        <main class="content">
+            <div class="container-fluid p-0">
+                <h1 class="h3 mb-3">Blank Page</h1>
+                <div class="row">
+                    <div class="col-12">
+                        <div class="card">
+                            <div class="card-header">
+                                <h5 class="card-title mb-0">Empty card</h5>
+                            </div>
+                            <div class="card-body">
+                                <div class="logo">
+                                    <img src="/src/assets/icons/toolshed-48x48.png" alt="Toolshed logo">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </BaseLayout>
+</template>
+
+<script>
+import {mapGetters, mapMutations} from 'vuex';
+import * as BIcons from "bootstrap-icons-vue";
+import BaseLayout from "@/components/BaseLayout.vue";
+
+export default {
+    name: 'Search',
+    components: {
+        ...BIcons,
+        BaseLayout
+    },
+}
+</script>
+
+<style scoped>
+
+</style>