adding router

web-app-vue/package.json

@@ -13,7 +13,8 @@
   "dependencies": {
     "jwt-decode": "^3.1.2",
     "pinia": "^2.0.32",
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",

web-app-vue/src/App.vue

@@ -1,73 +1,11 @@
 <script setup>
-import CardOption from "@/components/CardOption.vue";
-import CardLogin from "@/components/usuario/card-login.vue";
-import NovaMovimentacao from "@/components/movimentacao/nova-movimentacao.vue";
-import ListaMovimentacoes from "@/components/movimentacao/lista-movimentacoes.vue";
-import ListaCategorias from "@/components/categoria/lista-categorias.vue";
-import ListaPlanejamentos from "@/components/planejamento/lista-planejamentos.vue";
-import NovaCarteira from "@/components/conta/nova-conta.vue";
-import ListaCarteiras from "@/components/conta/lista-contas.vue";
-import CardConfiguracoes from "@/components/configuracoes/card-configuracoes.vue";
-import { useCardStore } from "@/stores/cardStore";
-import { useUserStore } from "@/stores/userStore";
-
-const cState = useCardStore();
-const uState = useUserStore();
 
 </script>
 
 <template>
-  <div class="container">
-    <h1>Redline</h1>
-    <card-option v-if="!uState.store.token"
-                 :title="'Login'"
-                 :active="cState.store.activeCard.login"
-                 @onActive="e => cState.toggleCard('login', e)">
-      <CardLogin></CardLogin>
-    </card-option>
-    <card-option v-if="uState.store.token"
-                 :title="'Movimentação'"
-                 :active="cState.store.activeCard.movimentacao"
-                 @onActive="e => cState.toggleCard('movimentacao', e)">
-      <nova-movimentacao></nova-movimentacao>
-      <lista-movimentacoes></lista-movimentacoes>
-    </card-option>
-    <card-option v-if="uState.store.token"
-                 :title="'Carteiras e contas'"
-                 :active="cState.store.activeCard.carteirasContas"
-                 @onActive="e => cState.toggleCard('carteirasContas', e)">
-      <nova-carteira></nova-carteira>
-      <lista-carteiras></lista-carteiras>
-    </card-option>
-    <card-option v-if="uState.store.token"
-                 :title="'Categorias'"
-                 :active="cState.store.activeCard.categorias"
-                 @onActive="e => cState.toggleCard('categorias', e)">
-      <lista-categorias></lista-categorias>
-    </card-option>
-    <card-option v-if="uState.store.token"
-                 :title="'Planejamento'"
-                 :active="cState.store.activeCard.planejamentos"
-                 @onActive="e => cState.toggleCard('planejamentos', e)">
-      <lista-planejamentos></lista-planejamentos>
-    </card-option>
-    <card-option v-if="uState.store.token"
-                 :title="'Configurações'"
-                 :active="cState.store.activeCard.configuracoes"
-                 @onActive="e => cState.toggleCard('configuracoes', e)">
-      <card-configuracoes></card-configuracoes>
-    </card-option>
-  </div>
+  <router-view></router-view>
 </template>
 
 <style scoped>
-.container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-width: 480px;
-    border-radius: 2em;
-    overflow: hidden;
-}
+
 </style>

web-app-vue/src/main.js

@@ -1,12 +1,15 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
+import { router } from './routes/router'
+
 import App from './App.vue'
 
 import './assets/main.css'
 
 const app = createApp(App)
 
 app.use(createPinia())
+app.use(router)
 
 app.mount('#app')

web-app-vue/src/pages/auth-page.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

web-app-vue/src/pages/movimentacao-page.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

web-app-vue/src/routes/router.js

@@ -0,0 +1,22 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import AuthPage from '@/pages/auth-page.vue'
+import MovimentacaoPage from '@/pages/movimentacao-page.vue'
+
+const routes = [
+  { component: AuthPage, path: '/auth' },
+  { component: MovimentacaoPage, path: '/movimentacao' },
+  { path: '/', redirect: '/movimentacao' }
+]
+
+export const router = createRouter({
+  routes,
+  history: createWebHashHistory()
+})
+
+const isAuthenticated = false // TODO check token
+
+router.beforeEach(async (to, from) => {
+  if (!isAuthenticated && to.path !== '/auth') {
+    return { path: '/auth' }
+  }
+})