Improve insufficient permission handling

src/Admin.js

@@ -325,13 +325,13 @@ class Admin extends React.Component {
       const { PageComponent, pageProps } = await this.loadPage(location, route);
       this.mountPage(PageComponent, pageProps);
     } catch (error) {
-      if (error instanceof AnonymousUserError) {
-        this.reboot();
-      } else if (error instanceof PageError) {
+      this.admin.loading(false);
+      if (error instanceof PageError) {
         this.mountErrorPage(t(error.message), error.code);
       } else if (error.response && [401, 403].includes(error.response.status)) {
         try {
           await this.authorize();
+          this.mountErrorPage(t("Permission denied."), error.response.status);
         } catch (authorizeError) {
           if (authorizeError instanceof AnonymousUserError) {
             this.reboot();
@@ -340,7 +340,6 @@ class Admin extends React.Component {
           }
         }
       } else {
-        this.admin.loading(false);
         throw error;
       }
     }

src/pages/ErrorPage.js

@@ -11,7 +11,9 @@ const ErrorPage = ({ title, data }) => {
       <Translate>
         {[404, 501].includes(statusCode)
           ? "We're sorry, but the requested page could not be found."
-          : "There's been an error. It's been reported to the site administrators via email and should be fixed shortly. Thanks for your patience."}
+          : statusCode >= 500
+          ? "There's been an error. It's been reported to the site administrators via email and should be fixed shortly. Thanks for your patience."
+          : ""}
       </Translate>
     </CardPage>
   );

tests/api.mock.js

@@ -36,7 +36,10 @@ export function mockAPI({ anonymous } = {}) {
   // Mock i18n, me and login
   fetchMock
     .get("http://foo.bar/api/v1.0/bananas/i18n/", { body: translations })
-    .get("http://foo.bar/api/v1.0/bananas/me/", { body: user })
+    .get(
+      "http://foo.bar/api/v1.0/bananas/me/",
+      anonymous ? 403 : { body: user }
+    )
     .post("http://foo.bar/api/v1.0/bananas/login/", () => {
       mockAPI(); // Re-mock API as authenticated
       return { body: user };

tests/app.test.js

@@ -145,6 +145,33 @@ test("Can render dashboard and navigate using menu", async () => {
   expect(queryAllByText(user.full_name)).toHaveLength(2);
 });
 
+test("Handles unauthenticated page load", async () => {
+  const { app, container, getByLabelText } = await renderApp();
+  const userListRoute = app.router.getRoute("example.user:list");
+
+  mockAPI({ anonymous: true });
+  fetchMock.get(`http://foo.bar/api/v1.0${userListRoute.path}`, {
+    body: {},
+    status: 403,
+  });
+
+  app.router.route(userListRoute.path);
+  await waitForElement(() => getByLabelText("login"), { container });
+});
+
+test("Handles unauthorized page load", async () => {
+  const { app, container, getByText } = await renderApp();
+  const userListRoute = app.router.getRoute("example.user:list");
+
+  fetchMock.get(`http://foo.bar/api/v1.0${userListRoute.path}`, {
+    body: {},
+    status: 403,
+  });
+
+  app.router.route(userListRoute.path);
+  await waitForElement(() => getByText("Status: 403"), { container });
+});
+
 test("Handles 404", async () => {
   const { app, container, getByText } = await renderApp();
   app.router.route("/foobar/");