chore: more preparations

web/README.md

@@ -1,42 +1,2 @@
-# 
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Recommended Browser Setup
-
-- Chromium-based browsers (Chrome, Edge, Brave, etc.):
-  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
-  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
-- Firefox:
-  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
-  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
+# MusicPlayer Webapp
+More notes to come

web/src/router/index.ts

@@ -1,10 +1,64 @@
+import {
+    useAuthStore
+} from '@/stores/authstore';
 import {
     createRouter, createWebHistory
 } from 'vue-router';
 
 const router = createRouter( {
     'history': createWebHistory( import.meta.env.BASE_URL ),
-    'routes': []
+    'routes': [
+        {
+            'path': '/',
+            'name': 'home',
+            'component': () => import( '@/views/StartPage.vue' ),
+            'meta': {
+                'title': 'Home',
+                'auth': false
+            }
+        },
+        {
+            'path': '/app',
+            'name': 'app',
+            'component': () => import( '@/views/AppView.vue' ),
+            'meta': {
+                'title': 'Player',
+                'auth': true
+            }
+        },
+        {
+            'path': '/:pathMatch(.*)*',
+            'name': 'NotFound',
+            'component': () => import( '@/views/404View.vue' ),
+            'meta': {
+                'title': '404 :: Page not found',
+                'transition': 'scale'
+            }
+        }
+    ]
+} );
+
+router.beforeEach( ( to, from ) => {
+    const store = useAuthStore();
+
+    if ( to.meta.authRequired && !store.isAuth ) {
+        return {
+            'name': 'login'
+        };
+    } else if ( ( to.name === 'login' && store.isAuth ) || ( to.name === 'signup' && store.isAuth ) ) {
+        return {
+            'name': 'app-home'
+        };
+    }
+} );
+
+router.afterEach( to => {
+    window.scrollTo( {
+        'top': 0,
+        'behavior': 'smooth'
+    } );
+    document.title = to.meta.title ? to.meta.title + ' - MusicPlayer' : 'MusicPlayer';
+    // NProgress.done();
 } );
 
 export default router;

web/src/stores/authstore.ts

@@ -0,0 +1,14 @@
+import {
+    defineStore
+} from 'pinia';
+import {
+    ref
+} from 'vue';
+
+export const useAuthStore = defineStore( 'authstore', () => {
+    const isAuth = ref( false );
+
+    return {
+        isAuth
+    };
+} );

web/src/stores/counter.ts

@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})

web/src/views/404View.vue

@@ -1,7 +1,10 @@
 <template>
-    <div class="home-view">
-        <img src="https://github.com/simplePCBuilding/MusicPlayerV2/raw/master/assets/logo.png" alt="MusicPlayer Logo" class="logo">
+    <div class="not-found-view">
         <h1>404</h1>
+        <p>Page not found</p>
+        <RouterLink to="/" class="button primary">
+            Home
+        </RouterLink>
     </div>
 </template>
 
@@ -10,15 +13,11 @@
 </script>
 
 <style scoped>
-    .home-view {
+    .not-found-view {
         height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
     }
-
-    .logo {
-        height: 50vh;
-    }
 </style>

web/src/views/AppView.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <h1>Player</h1>
+    </div>
+</template>

web/src/views/StartPage.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <h1>MusicPlayer</h1>
+    </div>
+</template>