improve error handling for lookup user (#142)

- disable "Find User" when input is empty
- return 404 instead of 500 when not found
- skip axios error notification interceptor and manually handle error
- fix error message

app/Http/Controllers/UserController.php

@@ -185,7 +185,7 @@ public function userLookup(Request $request) {
         } else if (count($outputArray) == 0) {
             $returnData['status'] = "Error";
             $returnData['message'] = "We couldn't find that user.";
-            $code = 500;
+            $code = 404;
         } else {
             $returnData['status'] = "Partial";
             $returnData['users'] = $outputArray;

resources/js/components/UserLookup.vue

@@ -41,7 +41,13 @@
 
     <div class="form-group row">
       <div class="col-sm-3">
-        <button class="btn btn-primary" @click="lookupUser">Find User</button>
+        <button
+          class="btn btn-primary"
+          :disabled="!userLookupId"
+          @click="lookupUser"
+        >
+          Find User
+        </button>
       </div>
     </div>
     <div class="row">
@@ -59,6 +65,7 @@
 <script>
 import Modal from "./Modal.vue";
 import PersonSearch from "./PersonSearch.vue";
+import { axios } from "@/utils";
 
 export default {
   components: {
@@ -96,8 +103,18 @@ export default {
       });
     },
     lookupUser: function () {
+      if (!this.userLookupId) {
+        return;
+      }
+
       axios
-        .post("/api/user/lookup", { users: this.userLookupId })
+        .post(
+          "/api/user/lookup",
+          { users: this.userLookupId },
+          {
+            skipErrorNotifications: true,
+          },
+        )
         .then((res) => {
           if (res.data.users.length == 1) {
             this.$router.push({
@@ -114,7 +131,7 @@ export default {
           }
         })
         .catch((err) => {
-          this.findUserError = err.response.data.message;
+          this.findUserError = err.data.message;
         });
     },
   },