Improve UI error handling and API error codes

[jescalada]

Is your feature request related to a problem? Please describe.
Right now, the UI handles errors rather inflexibly. Usually, we check for a single error code, and then send out a generic error message based on the code.

This is an example from /src/ui/services/git-push.js:

const rejectPush = async (id, setMessage, setUserAllowedToReject) => {
  const url = `${baseUrl}/push/${id}/reject`;
  let errorMsg = '';
  let isUserAllowedToReject = true;
  await axios.post(url, {}, getAxiosConfig()).catch((error) => {
    if (error.response && error.response.status === 401) {
      errorMsg = 'You are not authorised to reject...';
      isUserAllowedToReject = false;
    }
  });
  await setMessage(errorMsg);
  await setUserAllowedToReject(isUserAllowedToReject);
};

This is the related API endpoint (src/service/routes/push.ts):

router.post('/:id/reject', async (req: Request, res: Response) => {
  if (req.user) {
    const id = req.params.id;

    // Get the push request
    const push = await getValidPushOrRespond(id, res);
    if (!push) return;

    // Get the committer of the push via their email
    const committerEmail = push.userEmail;
    const list = await db.getUsers({ email: committerEmail });

    if (list.length === 0) {
      res.status(401).send({
        message: `There was no registered user with the committer's email address: ${committerEmail}`,
      });
      return;
    }

    if (
      list[0].username.toLowerCase() === (req.user as any).username.toLowerCase() &&
      !list[0].admin
    ) {
      res.status(401).send({
        message: `Cannot reject your own changes`,
      });
      return;
    }

    const isAllowed = await db.canUserApproveRejectPush(id, (req.user as any).username);
    console.log({ isAllowed });

    if (isAllowed) {
      const result = await db.reject(id, null);
      console.log(`user ${(req.user as any).username} rejected push request for ${id}`);
      res.send(result);
    } else {
      res.status(401).send({
        message: 'User is not authorised to reject changes',
      });
    }
  } else {
    res.status(401).send({
      message: 'not logged in',
    });
  }
});

Notice how all errors must be set to 401 in order to get an error message to display on the frontend. On top of that, the actual reason is not passed to the frontend.

Describe the solution you'd like
We could scope this issue down to these core tasks:

• Fixing up the UI error display so that any API error is correctly displayed (popup/toast)
• Fixing up the API call functions in the UI so that errors are caught and their messages are displayed regardless of error code

This might require some deeper refactoring so that we don't rely on callback functions for setting the error messages on the UI. We should probably use some kind of reactive, standalone error components.

Additional context
#1166 (comment)