Better feedback

src/web/components/IpAlert.vue

@@ -1,11 +1,16 @@
 <template>
-  <v-alert class="text-center" variant="outlined" color="info">
+  <v-alert class="text-center" variant="tonal" color="grey">
     <span v-if="!loadingIpAddress">
-      Seu endereço IP: <code> {{ ipAddress }} </code>
+      Endereço IP deste dispositivo:
+      <strong>
+        <code>
+          {{ ipAddress }}
+        </code>
+      </strong>
     </span>
     <span v-else>
-      <v-progress-circular indeterminate class="mr-2" /> Obtendo seu endereço
-      IP...
+      <v-progress-circular indeterminate class="mr-2" />
+      Obtendo seu endereço IP...
     </span>
   </v-alert>
 </template>

src/web/components/LoggedCard.vue

@@ -1,10 +1,15 @@
 <template>
-  <v-card :title="`Logado como ${loginResult.displayName} `">
+  <v-card title="Login realizado com sucesso!">
     <v-card-text>
-      Usuário: {{ `${loginResult.domain}\\${loginResult.username}` }}
-      <v-alert type="info" variant="outlined" class="mt-4">
-        Os acessos feitos a partir deste dispositivo agora são registrados com
-        seu usuário.
+      <v-alert class="mb-4" type="success" variant="tonal" prominent>
+        Logado como <strong>{{ loginResult.displayName }} </strong><br />
+        Usuário:
+        {{ loginResult.domain.toUpperCase() }}/{{ loginResult.username }}
+      </v-alert>
+
+      <v-alert type="info" variant="tonal" class="mt-4" prominent>
+        A navegação na Internet está liberada neste dispositivo. Os acessos
+        feitos são registrados com seu usuário.
       </v-alert>
     </v-card-text>
     <v-card-actions>
@@ -14,17 +19,30 @@
         @click="onLogout"
         color="secondary"
         size="large"
-        variant="outlined"
+        variant="text"
         prepend-icon="mdi-logout"
-        >Sair</v-btn
       >
+        Sair
+      </v-btn>
+
+      <v-btn
+        class="px-6"
+        variant="flat"
+        color="primary"
+        size="large"
+        @click="onClose"
+      >
+        Fechar
+      </v-btn>
     </v-card-actions>
   </v-card>
 </template>
 
 <script lang="ts" setup>
 import { PropType } from 'vue'
+
 import { trpc } from '../trpc'
+
 import { LoginResult } from '@/server/interfaces/Auth'
 
 const props = defineProps({
@@ -47,4 +65,8 @@ async function onLogout() {
     alert('Não foi possível fazer logout. Tente novamente.')
   }
 }
+
+function onClose() {
+  window.location.href = 'https://www.ifms.edu.br'
+}
 </script>