Update App.vue and Home.vue

src/web/App.vue

@@ -1,19 +1,18 @@
 <template>
   <v-app>
     <v-main>
-      {{ data }}
+      <router-view />
+      <v-footer app class="text-grey">
+        <span class="mr-2">v{{ version }}</span>
+        <v-spacer />
+        <span class="mr-2">SERTI-PP</span>
+      </v-footer>
     </v-main>
   </v-app>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import packageInfo from '../../package.json'
 
-import { trpc } from "./trpc";
+const version = packageInfo.version
-
-const data = ref<string>("");
-
-onMounted(async () => {
-  data.value = await trpc.hello.query();
-});
 </script>

src/web/components/Logo.vue

@@ -0,0 +1,3 @@
+<template>
+  <v-img src="@/assets/logo.png" contain />
+</template>

src/web/components/MainForm.vue

@@ -0,0 +1,90 @@
+<template>
+  <v-form @submit.prevent="submit">
+    <v-card :elevation="12">
+      <v-card-title class="mb-6 pa-6 text-center">
+        <span class="headline font-weight-light text-h4">Trocar senha</span>
+      </v-card-title>
+      <v-card-text>
+        <v-text-field
+          class="mb-8"
+          v-model="username"
+          label="Usuário"
+          :variant="'outlined'"
+          autocomplete="username"
+          hint="SIAPE para servidores, CPF para alunos."
+          prepend-inner-icon="mdi-account"
+          :rules="[v => !!v || 'Campo obrigatório']"
+          required
+        />
+        <v-text-field
+          class="mb-8"
+          v-model="password"
+          label="Senha atual"
+          :type="showCurrent ? 'text' : 'password'"
+          hint="Sua senha atual"
+          :variant="'outlined'"
+          prepend-inner-icon="mdi-form-textbox-password"
+          :append-inner-icon="showCurrent ? 'mdi-eye' : 'mdi-eye-off'"
+          @click:append-inner="showCurrent = !showCurrent"
+          :rules="[v => !!v || 'Campo obrigatório']"
+          required
+        />
+
+        <v-text-field
+          class="mb-4"
+          v-model="newPassword"
+          label="Nova senha"
+          :type="showNew ? 'text' : 'password'"
+          hint="A nova senha que você deseja usar"
+          :variant="'outlined'"
+          prepend-inner-icon="mdi-lock-check"
+          :append-inner-icon="showNew ? 'mdi-eye' : 'mdi-eye-off'"
+          @click:append-inner="showNew = !showNew"
+          :rules="[v => !!v || 'Campo obrigatório']"
+          required
+        />
+        <v-text-field
+          class="mb-8"
+          v-model="confirmPassword"
+          label="Confirme a nova senha"
+          :type="showConfirm ? 'text' : 'password'"
+          hint="Digite a nova senha mais uma vez"
+          :variant="'outlined'"
+          prepend-inner-icon="mdi-lock-check"
+          :append-inner-icon="showConfirm ? 'mdi-eye' : 'mdi-eye-off'"
+          @click:append-inner="showConfirm = !showConfirm"
+          :rules="[v => !!v || 'Campo obrigatório']"
+          required
+        />
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn type="submit" color="primary">Trocar senha</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-form>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const emit = defineEmits<{
+  submit: [{ username: string; currentPassword: string; newPassword: string }]
+}>()
+
+const username = ref('')
+const password = ref('')
+const newPassword = ref('')
+const confirmPassword = ref('')
+
+const showCurrent = ref(false)
+const showNew = ref(false)
+const showConfirm = ref(false)
+
+const submit = () => {
+  emit('submit', {
+    username: username.value,
+    currentPassword: password.value,
+    newPassword: newPassword.value
+  })
+}
+</script>

src/web/views/Home.vue

@@ -1,7 +1,28 @@
 <template>
-  <HelloWorld />
+  <v-container>
+    <v-row>
+      <v-col cols="8" offset="2">
+        <logo class="mx-auto mb-12" :style="{ maxWidth: '256px' }" />
+
+        <main-form @submit="submit" />
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script lang="ts" setup>
-  import HelloWorld from '@/components/HelloWorld.vue'
+import Logo from '../components/Logo.vue'
+import MainForm from '../components/MainForm.vue'
+
+function submit({
+  username,
+  currentPassword,
+  newPassword
+}: {
+  username: string
+  currentPassword: string
+  newPassword: string
+}) {
+  console.log('submit', { username, currentPassword, newPassword })
+}
 </script>