Implemented modal for unauthorized popup

dashboard/src/shared/auth/UnauthorizedPopup.tsx

@@ -1,5 +1,6 @@
 import { Collapse, Snackbar } from "@material-ui/core";
 import { Alert } from "@material-ui/lab";
+import Modal from "main/home/modals/Modal";
 import React from "react";
 import styled from "styled-components";
 import { proxy, useSnapshot } from "valtio";
@@ -17,6 +18,7 @@ const actions = {
   },
   hideUnauthorizedPopup: () => {
     state.showUnauthorizedPopup = false;
+    state.expanded = false;
     state.message = "";
   },
   toggleExpanded: () => {
@@ -29,13 +31,25 @@ export const UnauthorizedPopupActions = actions;
 export const UnauthorizedPopup = () => {
   const { showUnauthorizedPopup, message, expanded } = useSnapshot(state);
 
-  if (expanded) {
-    // TODO: Implement expanded view. Should be a modal with the full message and contact information.
+  if (!showUnauthorizedPopup) {
     return null;
   }
 
-  if (!showUnauthorizedPopup) {
-    return null;
+  if (expanded) {
+    // TODO: Implement expanded view. Should be a modal with the full message and contact information.
+    return (
+      <Modal onRequestClose={actions.toggleExpanded} height="fit-content">
+        <ModalContentWrapper>
+          <ModalTitle>Unauthorized</ModalTitle>
+          <ModalMessage>{message}</ModalMessage>
+          <ModalContact>
+            Please contact your administrator. If you think this is a mistake,
+            please contact us at{" "}
+            <a href="mailto:contact@getporter.dev">contact@getporter.dev</a>
+          </ModalContact>
+        </ModalContentWrapper>
+      </Modal>
+    );
   }
 
   return (
@@ -82,3 +96,28 @@ const ActionButton = styled.button`
     font-size: 18px;
   }
 `;
+
+const ModalContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+`;
+
+const ModalTitle = styled.div`
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 10px;
+`;
+
+const ModalMessage = styled.div`
+  font-size: 14px;
+  margin-bottom: 10px;
+`;
+
+const ModalContact = styled.div`
+  font-size: 14px;
+  margin-bottom: 10px;
+  text-align: center;
+`;

dashboard/src/shared/auth/useAuth.ts

@@ -23,13 +23,17 @@ const useAuth = () => {
       scope: ScopeType,
       resource: string | string[],
       verb: Verbs | Array<Verbs>
-    ) =>
+    ) => {
+      if (!authContext || !authContext.currentPolicy) {
+        return false;
+      }
       // We iterate over all the policies in search for at least one policy that will authorize
       // the user to perform an action.
       authContext.currentPolicy.reduce(
         isAuthorizedReducer(scope, resource, verb),
         false
-      ),
+      );
+    },
     [authContext.currentPolicy]
   );
 

dashboard/src/shared/baseApi.ts

@@ -88,9 +88,10 @@ const apiQueryBuilder = <ParamsType extends {}, PathParamsType = {}>(
   pathParams: PathParamsType
 ) => {
   try {
-    return axios(
+    const res = ((await axios(
       buildAxiosConfig(method, endpoint, token, params, pathParams)
-    ) as AxiosPromise<ResponseType>;
+    )) as unknown) as AxiosPromise<ResponseType>;
+    return res;
   } catch (error) {
     const axiosError = error as AxiosError;