Login form OK

src/server/trpc.ts

@@ -6,7 +6,7 @@ import { login } from './lib/login'
 
 // Created for each request
 function createContext({ req, res }: trpcExpress.CreateExpressContextOptions) {
-  return { ip: req.ip, hostname: req.hostname }
+  return { ip: req.ip }
 }
 
 type Context = inferAsyncReturnType<typeof createContext>
@@ -16,9 +16,9 @@ export const t = initTRPC.context<Context>().create()
 export const appRouter = t.router({
   myIp: t.procedure.query(({ ctx }) => {
     const ip = ctx.ip.split(':').slice(-1)[0]
-    console.log(`IP: ${ip}, Hostname: ${ctx.hostname}`)
+    console.log(`IP: ${ip}`)
 
-    return { ip, hostname: ctx.hostname }
+    return ip
   }),
   login: t.procedure
     .input(z.object({ username: z.string(), password: z.string() }))

src/web/components/IpAlert.vue

@@ -0,0 +1,25 @@
+<template>
+  <v-alert class="text-center" variant="outlined" color="info">
+    <span v-if="!loadingIpAddress">
+      Seu endereço IP: <code> {{ ipAddress }} </code>
+    </span>
+    <span v-else>
+      <v-progress-circular indeterminate class="mr-2" /> Obtendo seu endereço
+      IP...
+    </span>
+  </v-alert>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { trpc } from '../trpc'
+
+const ipAddress = ref('')
+const loadingIpAddress = ref(false)
+
+onMounted(async () => {
+  loadingIpAddress.value = true
+  ipAddress.value = await trpc.myIp.query()
+
+  loadingIpAddress.value = false
+})
+</script>

src/web/components/LoginForm.vue

@@ -1,6 +1,6 @@
 <template>
   <v-form @submit.prevent="doLogin">
-    <v-card class="pa-5" title="Fazer login na rede">
+    <v-card class="pa-2" title="Fazer login na rede">
       <v-card-text class="mt-3">
         <v-text-field
           class="mb-3"
@@ -28,6 +28,7 @@
           v-model="autoLogin"
           color="primary"
           label="Logar automaticamente neste dispositivo"
+          hide-details
         />
       </v-card-text>
       <v-card-actions>
@@ -37,19 +38,12 @@
         </v-btn>
       </v-card-actions>
     </v-card>
-    <v-alert class="mt-3 text-center" color="info">
-      Seu endereço IP:
-      <code>
-        {{ ipAddress }}
-      </code>
-    </v-alert>
   </v-form>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue'
 import { trpc } from '../trpc'
-import { hostname } from 'os'
 
 const username = ref('')
 const password = ref('')
@@ -57,19 +51,6 @@ const password = ref('')
 const autoLogin = ref(false)
 const showPassword = ref(false)
 
-const ipAddress = ref('')
-
-const loadingIpAddress = ref(false)
-
-onMounted(async () => {
-  loadingIpAddress.value = true
-  const { ip, hostname } = await trpc.myIp.query()
-
-  ipAddress.value = ip == '127.0.0.1' ? hostname : ip
-
-  loadingIpAddress.value = false
-})
-
 function doLogin() {
   trpc.login.mutate({ username: username.value, password: password.value })
 }

src/web/components/Logo.vue

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

src/web/plugins/vuetify.ts

@@ -14,9 +14,6 @@ import { createVuetify } from 'vuetify'
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   defaults: {
-    VCard: {
-      elevation: 20
-    }
     // VBtn: {
     //   color: 'primary'
     // }

src/web/views/Login.vue

@@ -1,9 +1,15 @@
 <template>
-  <v-container class="align-center justify-center fill-height">
-    <login-form />
+  <v-container class="justify-center fill-height" fluid>
+    <div>
+      <logo class="mx-auto mb-4" :style="{ maxWidth: '256px' }" />
+      <login-form />
+      <ip-alert class="mt-5" />
+    </div>
   </v-container>
 </template>
 
 <script lang="ts" setup>
 import LoginForm from '../components/LoginForm.vue'
+import IpAlert from '../components/IpAlert.vue'
+import Logo from '../components/Logo.vue'
 </script>