Handle login/registration errors more gracefully

ldscavo · Nov 30, 2023 · b70cfef · b70cfef
1 parent cbd9c6a
commit b70cfef
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/client/src/app.vue b/client/src/app.vue
@@ -122,4 +122,8 @@ input.edit-field:focus {
   color: red;
   font-weight: bold;
 }
+.form-error {
+  color: red;
+  font-size: 0.9rem;
+}
 </style>
diff --git a/client/src/components/login.vue b/client/src/components/login.vue
@@ -10,6 +10,9 @@
         <label for="password">Password:</label>
         <input id="password" class="form-input text" v-model="password" type="password" />
       </div>
+      <div class="form-error" v-if="error">
+        <span>{{ error }}</span>
+      </div>
       <div class="form-section">
         <button type="submit" class="form-input">Login &raquo;</button>                
       </div>
@@ -28,7 +31,8 @@ export default {
   data: function() {
     return {
       email: "",
-      password: ""
+      password: "",
+      error: ""
     }
   },
   methods: {
@@ -40,7 +44,7 @@ export default {
         this.$router.push({ path: '/budgets' });
       }
       catch (error) {
-        alert(error.response.data.error)
+        this.error = error.response.data.error;
       }
     }
 }

diff --git a/client/src/components/register.vue b/client/src/components/register.vue
@@ -15,6 +15,9 @@
         <input id="passwordconfirm" class="form-input text" v-model="passwordconfirm" type="password" />
         <div class="warning" v-if="password !== passwordconfirm">Passwords do not match!</div>
       </div>
+      <div class="form-error" v-if="error">
+        <span>{{ error }}</span>
+      </div>
       <div class="form-section">
         <button type="submit" class="form-input">Register &raquo;</button>
       </div>
@@ -31,7 +34,8 @@ export default {
     return {
       email: '',
       password: '',
-      passwordconfirm: ''
+      passwordconfirm: '',
+      error: ''
     }
   },
   methods: {
@@ -43,7 +47,7 @@ export default {
         this.$router.push({ path: '/budgets' });
       }
       catch (error) {
-        alert(error.response.data.error);
+        this.error = error.response.data.error;
       }
     }
   }