add token for secured resources

src/api/useHttpRequest.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from "react";
-import { useToast } from "../context/ToastContext";
+import { useToast } from "../contexts/ToastContext";
 
 const useHttpRequest = () => {
   const { error } = useToast();

src/components/App.js

@@ -9,8 +9,8 @@ import Error from "../pages/error";
 import Login from "../pages/login";
 
 // context
-import { useUserState } from "../context/UserContext";
-import { useToast } from "../context/ToastContext";
+import { useUserState } from "../contexts/UserContext";
+import { useToast } from "../contexts/ToastContext";
 import { useTranslation } from "react-i18next";
 
 export default function App() {

src/components/Header/Header.js

@@ -32,8 +32,8 @@ import {
   useLayoutState,
   useLayoutDispatch,
   toggleSidebar
-} from "../../context/LayoutContext";
-import { useUserDispatch, signOut } from "../../context/UserContext";
+} from "../../contexts/LayoutContext";
+import { useUserDispatch, signOut } from "../../contexts/UserContext";
 
 const messages = [
   {

src/components/Layout/Content.js

@@ -17,7 +17,7 @@ import ContentFooter from "./ContentFooter";
 import ResourcesContainer from "../../features/resources/components/ResourcesContainer";
 
 // context
-import { useLayoutState } from "../../context/LayoutContext";
+import { useLayoutState } from "../../contexts/LayoutContext";
 
 // styles
 import useStyles from "./styles";

src/components/Sidebar/Sidebar.js

@@ -16,7 +16,7 @@ import {
   useLayoutState,
   useLayoutDispatch,
   toggleSidebar
-} from "../../context/LayoutContext";
+} from "../../contexts/LayoutContext";
 
 import menu from "./menu";
 

src/contexts/UserContext.js

@@ -7,7 +7,7 @@ var UserDispatchContext = React.createContext();
 function userReducer(state, action) {
   switch (action.type) {
     case "LOGIN_SUCCESS":
-      return { ...state, authenticated: true };
+      return { ...state, ...action.payload, authenticated: true };
     case "SIGN_OUT_SUCCESS":
       return { ...state, authenticated: false };
     case "LOGIN_FAILURE":
@@ -23,8 +23,10 @@ function userReducer(state, action) {
 }
 
 function UserProvider({ children }) {
+  const { valid, token } = validateToken();
   var [state, dispatch] = React.useReducer(userReducer, {
-    authenticated: validateToken() === true
+    authenticated: valid === true,
+    token
   });
 
   return (

src/features/resources/components/ResourcesContainer.js

@@ -13,7 +13,7 @@ import {
   FileCopyOutlined,
   OpenInNewOutlined
 } from "@material-ui/icons";
-import { useToast } from "../../../context/ToastContext";
+import { useToast, useResourceSecurity } from "../../../hooks";
 
 const __ROWS_PER_PAGE_OPTIONS = [10, 20, 50, 100];
 const __RESOURCE_NAME_MAX_LENGTH = 35;
@@ -32,6 +32,7 @@ const ResourcesContainer = () => {
   const { info } = useToast();
   const { getResources } = useResourcesApi();
   const { getResourceCategories } = useDictionariesApi();
+  const { secureUrl } = useResourceSecurity();
 
   useEffect(() => {
     getResourceCategories().then((r) => setResourceCategories(r));
@@ -81,7 +82,8 @@ const ResourcesContainer = () => {
       {
         code: "copy-url",
         effect: (_event, resource) => {
-          navigator.clipboard.writeText(resource.url);
+          const url = resource.secured ? secureUrl(resource.url) : resource.url;
+          navigator.clipboard.writeText(url);
           info(t("Resource.List.Actions.LinkCopiedToClipboard"));
         },
         icon: FileCopyOutlined,
@@ -91,7 +93,8 @@ const ResourcesContainer = () => {
       {
         code: "open-in-new-tab",
         effect: (event, resource) => {
-          window.open(resource.url, "_blank");
+          const url = resource.secured ? secureUrl(resource.url) : resource.url;
+          window.open(url, "_blank");
           event.preventDefault();
         },
         icon: OpenInNewOutlined,
@@ -99,7 +102,7 @@ const ResourcesContainer = () => {
         top: false
       }
     ],
-    [t, info]
+    [t, info, secureUrl]
   );
 
   const columns = useMemo(

src/hooks/index.js

@@ -1 +1,4 @@
-//export { useAuthorizationToken } from "./useAuthorizationToken";
+import { useToast } from "../contexts/ToastContext";
+import useResourceSecurity from "./useResourceSecurity";
+
+export { useToast, useResourceSecurity };

src/hooks/useResourceSecurity.js

@@ -0,0 +1,13 @@
+import { useUserState } from "../contexts/UserContext";
+import { useCallback } from "react";
+
+const useResourceSecurity = () => {
+  const { token } = useUserState();
+  const secureUrl = useCallback((url) => `${url}?token=${token.raw}`, [
+    token.raw
+  ]);
+
+  return { secureUrl };
+};
+
+export default useResourceSecurity;

src/index.js

@@ -5,9 +5,9 @@ import { CssBaseline } from "@material-ui/core";
 import Themes from "./themes";
 import App from "./components/App";
 import * as serviceWorker from "./serviceWorker";
-import { LayoutProvider } from "./context/LayoutContext";
-import { UserProvider } from "./context/UserContext";
-import { ToastProvider } from "./context/ToastContext";
+import { LayoutProvider } from "./contexts/LayoutContext";
+import { UserProvider } from "./contexts/UserContext";
+import { ToastProvider } from "./contexts/ToastContext";
 import "./utils/i18n";
 
 ReactDOM.render(

src/pages/login/Login.js

@@ -20,7 +20,7 @@ import logo from "./logo.svg";
 import google from "../../images/google.svg";
 
 // context
-import { useUserDispatch, loginUser } from "../../context/UserContext";
+import { useUserDispatch, loginUser } from "../../contexts/UserContext";
 
 function Login(props) {
   var classes = useStyles();

src/pages/notifications/Notifications.js

@@ -16,7 +16,7 @@ import Notification from "../../components/Notification";
 import { Typography, Button } from "../../components/Wrappers/Wrappers";
 
 // context
-import { useToast, useToastState } from "../../context/ToastContext";
+import { useToast, useToastState } from "../../contexts/ToastContext";
 
 export default function NotificationsPage(props) {
   const classes = useStyles();

src/utils/identity.js

@@ -33,17 +33,18 @@ const invalidate = () => {
 };
 
 const validateToken = () => {
-  const token = getItem(storageKeys.TOKEN);
+  let token = getItem(storageKeys.TOKEN);
   if (!token) {
-    return false;
+    return { valid: false };
   }
 
   const valid = new Date(token.validUntil) >= new Date();
   if (!valid) {
     invalidate();
+    token = null;
   }
 
-  return valid;
+  return { valid, token };
 };
 
 export { storageKeys, authenticate, invalidate, validateToken };