From 76ef520f3edaf2011be87a0c2522d3cc869f977f Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Tue, 24 Oct 2023 07:31:50 -0400
Subject: [PATCH] Error feedback

---
 src/server/lib/login.ts                |  6 +++---
 src/web/components/LoginErrorAlert.vue | 25 +++++++++++++++++++++++++
 src/web/components/LoginForm.vue       | 12 +++++-------
 3 files changed, 33 insertions(+), 10 deletions(-)
 create mode 100644 src/web/components/LoginErrorAlert.vue

diff --git a/src/server/lib/login.ts b/src/server/lib/login.ts
index 3c38770..941eabb 100644
--- a/src/server/lib/login.ts
+++ b/src/server/lib/login.ts
@@ -21,8 +21,8 @@ export async function login(username: string, password: string, ip: string) {
     await pa.login(username, ip, user.domain)
 
     return user
-  } catch (error) {
-    console.log(error)
-    throw new Error('Login failed')
+  } catch (error: any) {
+    console.log(error.message)
+    throw new Error(`Login failed: ${error.message}`)
   }
 }
diff --git a/src/web/components/LoginErrorAlert.vue b/src/web/components/LoginErrorAlert.vue
new file mode 100644
index 0000000..343b612
--- /dev/null
+++ b/src/web/components/LoginErrorAlert.vue
@@ -0,0 +1,25 @@
+<template>
+  <v-alert class="mt-5" type="error" v-if="error" prominent variant="tonal">
+    <div>
+      Não foi possível fazer login. Tente novamente. Se o problema persistir,
+      entre em contato com o SERTI do campus.
+      <a href="" @click.prevent="showDetails = !showDetails" variant="plain">
+        Mostrar detalhes
+      </a>
+    </div>
+
+    <code v-if="showDetails">
+      {{ error }}
+    </code>
+  </v-alert>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+defineProps({
+  error: String
+})
+
+const showDetails = ref(false)
+</script>
diff --git a/src/web/components/LoginForm.vue b/src/web/components/LoginForm.vue
index 0797ee8..141f287 100644
--- a/src/web/components/LoginForm.vue
+++ b/src/web/components/LoginForm.vue
@@ -55,10 +55,7 @@
       </v-card-actions>
     </v-card>
     <v-scale-transition>
-      <v-alert class="mt-5" type="error" v-if="error">
-        Não foi possível fazer login. Tente novamente. Se o problema persistir,
-        entre em contato com o SERTI do campus.
-      </v-alert>
+      <login-error-alert :error="error" />
     </v-scale-transition>
   </v-form>
 </template>
@@ -67,6 +64,7 @@
 import { ref, computed } from 'vue'
 import { trpc } from '../trpc'
 import { VForm } from 'vuetify/lib/components/index.mjs'
+import LoginErrorAlert from './LoginErrorAlert.vue'
 
 const emit = defineEmits(['login'])
 
@@ -78,7 +76,7 @@ const showPassword = ref(false)
 
 const loading = ref(false)
 
-const error = ref(false)
+const error = ref('')
 
 const form = ref<VForm>()
 
@@ -89,7 +87,7 @@ const valid = computed(() => {
 async function doLogin() {
   try {
     loading.value = true
-    error.value = false
+    error.value = ''
 
     const loginResult = await trpc.login.mutate({
       username: username.value,
@@ -99,7 +97,7 @@ async function doLogin() {
     emit('login', loginResult)
   } catch (e: any) {
     console.log(e.message)
-    error.value = true
+    error.value = e.message
   } finally {
     loading.value = false
   }