Emit

src/server/auth/FakeAuth.ts

@@ -0,0 +1,9 @@
+export class FakeAuth implements Auth {
+  constructor() {}
+
+  async login(username: string, password: string): Promise<LoginResult> {
+    if (username == 'test' && password == 'test')
+      return { displayName: 'Test User', username: 'test' }
+    throw new Error('Login failed')
+  }
+}

src/server/lib/login.ts

@@ -11,7 +11,5 @@ export async function login(username: string, password: string) {
 
   const user = await ldapAuth.login(username, password)
 
-  console.log('Login result:', user)
-
   return user
 }

src/web/components/LoginForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-form @submit.prevent="doLogin">
+  <v-form ref="form" @submit.prevent="doLogin">
     <v-card
       class="pa-2"
       title="Fazer login na rede"
@@ -15,6 +15,7 @@
           autocomplete="username"
           hint="SIAPE ou CPF"
           prepend-inner-icon="mdi-account"
+          :rules="[v => !!v || 'Campo obrigatório']"
           required
         />
         <v-text-field
@@ -27,6 +28,7 @@
           prepend-inner-icon="mdi-key"
           :append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
           @click:append-inner="showPassword = !showPassword"
+          :rules="[v => !!v || 'Campo obrigatório']"
           required
         />
         <v-switch
@@ -38,7 +40,15 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn size="x-large" color="primary" :variant="'flat'" type="submit">
+        <v-btn
+          class="px-6"
+          prepend-icon="mdi-login"
+          :disabled="!valid"
+          size="x-large"
+          color="primary"
+          :variant="'flat'"
+          type="submit"
+        >
           Login
         </v-btn>
       </v-card-actions>
@@ -53,8 +63,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { trpc } from '../trpc'
+import { VForm } from 'vuetify/lib/components/index.mjs'
+
+const emit = defineEmits(['login'])
 
 const username = ref('')
 const password = ref('')
@@ -66,15 +79,23 @@ const loading = ref(false)
 
 const error = ref(false)
 
+const form = ref<VForm>()
+
+const valid = computed(() => {
+  return form.value?.isValid || false
+})
+
 async function doLogin() {
   try {
     loading.value = true
     error.value = false
 
-    await trpc.login.mutate({
+    const loginResult = await trpc.login.mutate({
       username: username.value,
       password: password.value
     })
+
+    emit('login', loginResult)
   } catch (e: any) {
     console.log(e.message)
     error.value = true

src/web/views/Login.vue

@@ -3,7 +3,7 @@
     <v-row justify="center">
       <v-col xl="4" lg="5" md="6" sm="10">
         <logo class="mx-auto mb-4" :style="{ maxWidth: '256px' }" />
-        <login-form />
+        <login-form @login="console.log" />
         <ip-alert class="mt-5" />
       </v-col>
     </v-row>