converting components to vuetify

web-app-vue/package.json

@@ -13,8 +13,10 @@
   "dependencies": {
     "jwt-decode": "^3.1.2",
     "pinia": "^2.0.32",
+    "vite-plugin-vuetify": "^1.0.2",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.2.4",
+    "vuetify": "^3.3.15"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
@@ -24,7 +26,7 @@
     "eslint": "^8.34.0",
     "eslint-plugin-vue": "^9.9.0",
     "jsdom": "^21.1.0",
-    "prettier": "^2.8.4",
+    "prettier": "^2.8.8",
     "vite": "^4.1.4",
     "vite-plugin-vue-devtools": "^1.0.0-rc.3",
     "vitest": "^0.29.1"

web-app-vue/src/App.vue

@@ -3,7 +3,11 @@
 </script>
 
 <template>
-  <router-view></router-view>
+  <v-layout class="rounded rounded-md">
+    <v-main class="d-flex align-center justify-center" style="min-height: 300px;">
+      <router-view></router-view>
+    </v-main>
+  </v-layout>
 </template>
 
 <style scoped>

web-app-vue/src/components/usuario/card-login.vue

@@ -1,51 +1,66 @@
 <template>
-  <form @submit.prevent.stop="doLogin">
-    <label v-if="createMode">Nome</label>
-    <input v-if="createMode" v-model="nome" required />
-    <label>Email</label>
-    <input type="email" v-model="email" required />
-    <label>Senha</label>
-    <input type="password" v-model="senha" required />
-    <hr>
-    <button v-if="!createMode" type="submit">Login</button>
-    <button type="button" aria-roledescription="create-mode" @click="createMode = !createMode">{{createMode ? "Cancelar" : "Criar conta"}}</button>
-    <button v-if="createMode" type="submit">Criar</button>
-  </form>
+  <v-card :title="createMode ? 'Criar conta' : 'Login'">
+    <v-form v-model="valid" @submit.prevent.stop="doLogin" class="auth-form">
+      <v-text-field :rules=[requiredRule] v-if="createMode" v-model="nome" label="Nome" required></v-text-field>
+      <v-text-field :rules=[requiredRule] v-model="email" label="Email" required type="email"></v-text-field>
+      <v-text-field :rules=[requiredRule] v-model="senha" label="Senha" required type="password"></v-text-field>
+      <hr />
+      <v-btn v-if="!createMode" type="submit">Login</v-btn>
+      <v-btn type="button" @click="createMode = !createMode">
+        {{ createMode ? 'Cancelar' : 'Criar conta' }}
+      </v-btn>
+      <v-btn v-if="createMode" type="submit">Criar</v-btn>
+    </v-form>
+  </v-card>
 </template>
 <script setup>
-import { ref } from "vue";
-import { useUserStore } from "@/stores/userStore";
-
-const nome = ref("");
-const email = ref("");
-const senha = ref("");
-const createMode = ref(false);
+import { ref } from 'vue'
+import { useUserStore } from '@/stores/userStore'
+import { router } from "@/routes/router";
 
+const nome = ref('')
+const email = ref('')
+const senha = ref('')
+const createMode = ref(false)
+const valid = ref(false)
 const uState = useUserStore()
 
+const requiredRule = value => {
+  if(value) return true
+  return "Required field"
+}
+
 const doLogin = async () => {
+  if(!valid.value) return
   try {
-    if(createMode.value) {
+    if (createMode.value) {
       await uState.doCreateUser({
-        nome: nome.value, email: email.value, senha: senha.value
+        nome: nome.value,
+        email: email.value,
+        senha: senha.value
       })
     }
-    const result = await uState.doLogin({ email: email.value, senha: senha.value });
+    const result = await uState.doLogin({ email: email.value, senha: senha.value })
     // TODO guardar informação do usuário logado
     uState.setToken(result.token)
+    await router.push("/")
   } catch (e) {
-    console.log(e);
-    alert("Algo deu errado");
+    console.log(e)
+    alert('Algo deu errado')
   }
-};
+}
 </script>
 <style scoped>
-form {
-    display: flex;
-    flex-direction: column;
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  min-width: 300px;
+  padding: 1em;
 }
 
-label, input, button {
-    margin: 0.5em;
+label,
+input,
+button {
+  margin: 0.5em;
 }
 </style>

web-app-vue/src/main.js

@@ -1,15 +1,29 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import { md3 } from 'vuetify/blueprints'
+
 import { router } from './routes/router'
 
 import App from './App.vue'
 
 import './assets/main.css'
 
-const app = createApp(App)
+const vuetify = createVuetify({
+  blueprint: md3,
+  defaults: {
+    global: {
+      variant: 'outlined'
+    }
+  }
+})
+
+export const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
+app.use(vuetify)
 
 app.mount('#app')

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

@@ -1,9 +1,9 @@
 <script setup>
-
+import CardLogin from "@/components/usuario/card-login.vue";
 </script>
 
 <template>
-<h1>Auth</h1>
+  <card-login></card-login>
 </template>
 
 <style scoped>

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

@@ -1,4 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
+import {useUserStore} from '@/stores/userStore'
 import AuthPage from '@/pages/auth-page.vue'
 import NovaMovimentacaoPage from '@/pages/nova-movimentacao-page.vue'
 import CategoriasPage from '@/pages/categorias-page.vue'
@@ -22,13 +23,13 @@ const routes = [
 
 export const router = createRouter({
   routes,
-  history: createWebHashHistory()
+  history: createWebHashHistory(),
 })
 
-const isAuthenticated = false // TODO check token
 
 router.beforeEach(async (to) => {
-  if (!isAuthenticated && to.path !== '/auth') {
+  const userStore = useUserStore()
+  if (!userStore.isLogged() && to.path !== '/auth') {
     return { path: '/auth' }
   }
 })

web-app-vue/src/stores/userStore.js

@@ -33,5 +33,7 @@ export const useUserStore = defineStore("user-store", () => {
     logout();
   };
 
-  return { store, userData, setToken, doLogin, doCreateUser, logout, deleteAccount };
+  const isLogged = () => store.token != null
+
+  return { store, userData, setToken, doLogin, doCreateUser, logout, deleteAccount, isLogged };
 });

web-app-vue/vite.config.js

@@ -3,11 +3,12 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import VueDevtools from 'vite-plugin-vue-devtools'
+import vuetify from "vite-plugin-vuetify";
 
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), VueDevtools()],
+  plugins: [vue(), VueDevtools(), vuetify()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))