Modules store and bar (#112)

* Register views globally

* Use global private view in debug route

* Register login route

* Add barebones login form

* Add auth check on routing

* Add tests and extract checkAuth function

* Fix tests of router

* Move stores into subfolders

* Register modules from modules store

* Register name / icon in modules store

* Update module configs

* Render v-button in module sidebar

* Render correct paths in module sidebar

* Add activated style to button

* Use correct color for button in module bar

* Use correct icons for system modules

* Add tests for modules store

* Remove readme in favor of inline comments

src/views/private/_module-bar-logo.vue

@@ -12,7 +12,8 @@
 
 <script lang="ts">
 import { createComponent, ref, computed, watch } from '@vue/composition-api';
-import { useProjectsStore, ProjectWithKey, ProjectError } from '@/stores/projects';
+import { useProjectsStore } from '@/stores/projects';
+import { ProjectWithKey, ProjectError } from '@/stores/projects/types';
 import { useRequestsStore } from '@/stores/requests';
 
 export default createComponent({

src/views/private/_module-bar.vue

@@ -1,27 +1,47 @@
 <template>
 	<div class="module-bar">
 		<module-bar-logo />
+		<v-button v-for="module in modules" :key="module.id" icon x-large :to="module.to">
+			<v-icon :name="module.icon" />
+		</v-button>
 	</div>
 </template>
 
 <script lang="ts">
-import { createComponent } from '@vue/composition-api';
+import { createComponent, computed } from '@vue/composition-api';
 import ModuleBarLogo from './_module-bar-logo.vue';
+import { useModulesStore } from '@/stores/modules/';
+import { useProjectsStore } from '@/stores/projects';
 
 export default createComponent({
 	components: {
 		ModuleBarLogo
 	},
-	setup() {}
+	setup() {
+		const modulesStore = useModulesStore();
+		const projectsStore = useProjectsStore();
+		const { currentProjectKey } = projectsStore.state;
+
+		const modules = computed(() =>
+			modulesStore.state.modules.map(module => ({
+				...module,
+				to: `/${currentProjectKey}/${module.id}/`
+			}))
+		);
+
+		return { modules: modules };
+	}
 });
 </script>
 
 <style lang="scss" scoped>
 .module-bar {
-	display: inline-block;
 	width: 64px;
 	height: 100%;
-	font-size: 1rem;
 	background-color: #263238;
+
+	.v-button {
+		--v-button-color: var(--blue-grey-400);
+	}
 }
 </style>

src/views/private/private-view.vue

@@ -83,6 +83,7 @@ export default createComponent({
 		top: 0;
 		left: 0;
 		z-index: 50;
+		display: flex;
 		height: 100%;
 		font-size: 0;
 		transform: translateX(-100%);

src/views/public/public-view.test.ts

@@ -2,7 +2,8 @@ import Vue from 'vue';
 import VueCompositionAPI from '@vue/composition-api';
 import { mount, createLocalVue, Wrapper } from '@vue/test-utils';
 import VIcon from '@/components/v-icon/';
-import { useProjectsStore, ProjectWithKey } from '@/stores/projects';
+import { useProjectsStore } from '@/stores/projects';
+import { ProjectWithKey } from '@/stores/projects/types';
 import Tooltip from '@/directives/tooltip/tooltip';
 
 const localVue = createLocalVue();

src/views/public/public-view.vue

@@ -17,7 +17,8 @@
 import { version } from '../../../package.json';
 import { createComponent, computed } from '@vue/composition-api';
 import PublicViewLogo from './_logo.vue';
-import { useProjectsStore, ProjectWithKey, ProjectError } from '@/stores/projects';
+import { useProjectsStore } from '@/stores/projects/';
+import { ProjectWithKey, ProjectError } from '@/stores/projects/types';
 
 export default createComponent({
 	components: {