Comments and more cleanups

distributed-system-analysis · Mar 23, 2023 · c764b6a · c764b6a
1 parent 2c050b3
commit c764b6a
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 126 deletions.
diff --git a/dashboard/src/App.js b/dashboard/src/App.js
@@ -29,8 +29,9 @@ import { useDispatch, useSelector } from "react-redux";
 import { ReactKeycloakProvider } from "@react-keycloak/web";
 
 const eventLogger = (event, error) => {
-  // We might want to consider to refresh the tokens here
-  // if the event === 'onTokenExpired'
+  // Placeholder to perform logging action upon certain Keycloak events.
+  // Keycloak events are described under
+  // https://www.keycloak.org/docs/latest/securing_apps/#javascript-adapter-reference
 };
 
 const tokenLogger = (tokens) => {

diff --git a/dashboard/src/actions/authActions.js b/dashboard/src/actions/authActions.js
@@ -7,23 +7,23 @@ import { SUCCESS } from "assets/constants/overviewConstants";
 import { showToast } from "actions/toastActions";
 
 /**
- * Loop to check if the endpoints are loaded.
+ * Timer to check if the endpoints are loaded.
  * @param {getState} getState object.
  * @return {promise} promise object
  */
 export function waitForKeycloak(getState) {
   const waitStart = Date.now();
-  const maxWait = 10000; // Milliseconds
+  const maxWait = 50000; // Milliseconds
   /**
    * Loop to check if the endpoints are loaded.
    * @param {resolve} resolve object.
    * @param {reject} reject object
    */
   function check(resolve, reject) {
     if (Object.keys(getState().apiEndpoint.endpoints).length !== 0) {
-      resolve("Loaded");
+      resolve("Endpoints loaded");
     } else if (Date.now() - waitStart > maxWait) {
-      reject(new Error("Something went wrong"));
+      reject(new Error("Timed out waiting for endpoints request"));
     } else {
       setTimeout(check, 250, resolve, reject);
     }
@@ -39,20 +39,7 @@ export const authCookies = () => async (dispatch, getState) => {
   const keycloak = getState().apiEndpoint.keycloak;
   if (keycloak.authenticated) {
     Cookies.set("isLoggedIn", true, {
-      expires: keycloak.refreshTokenParsed?.exp,
-    });
-    Cookies.set("username", keycloak.tokenParsed?.preferred_username, {
-      expires: keycloak.refreshTokenParsed?.exp,
-    });
-    const userPayload = {
-      username: keycloak.tokenParsed?.preferred_username,
-      email: keycloak.tokenParsed?.email,
-      first_name: keycloak.tokenParsed?.given_name,
-      last_name: keycloak.tokenParsed?.family_name,
-    };
-    dispatch({
-      type: TYPES.GET_USER_DETAILS,
-      payload: userPayload,
+      expires: new Date(keycloak.refreshTokenParsed.exp * 1000),
     });
     dispatch(showToast(SUCCESS, "Logged in successfully!"));
   }
@@ -69,9 +56,8 @@ export const movePage = (toPage, navigate) => async (dispatch) => {
 
 export const logout = () => async (dispatch, getState) => {
   dispatch({ type: TYPES.LOADING });
-  // const keycloak = useKeycloak();
   const keycloak = getState().apiEndpoint.keycloak;
-  const keys = ["username", "token", "isLoggedIn"];
+  const keys = ["username", "isLoggedIn"];
   for (const key of keys) {
     Cookies.remove(key);
   }

diff --git a/dashboard/src/actions/overviewActions.js b/dashboard/src/actions/overviewActions.js
@@ -5,12 +5,12 @@ import API from "../utils/axiosInstance";
 import { DANGER } from "assets/constants/toastConstants";
 import { findNoOfDays } from "utils/dateFunctions";
 import { showToast } from "./toastActions";
-import Cookies from "js-cookie";
 
 export const getDatasets = () => async (dispatch, getState) => {
   const alreadyRendered = getState().overview.loadingDone;
   try {
-    const username = Cookies.get("username");
+    const keycloak = getState().apiEndpoint.keycloak;
+    const username = keycloak?.idTokenParsed?.preferred_username;
 
     if (alreadyRendered) {
       dispatch({ type: TYPES.LOADING });

diff --git a/dashboard/src/actions/types.js b/dashboard/src/actions/types.js
@@ -15,10 +15,7 @@ export const OPENID_ERROR = "OPENID_ERROR";
 export const DASHBOARD_LOADING = "DASHBOARD_LOADING";
 
 /* USER AUTHENTICATION */
-export const KEEP_USER_LOGGED_IN = "KEEP_USER_LOGGED_IN";
 export const USER_NOTION_ALERTS = "USER_NOTION_ALERTS";
-export const SET_LOGIN_BUTTON = "SET_LOGIN_BUTTON";
-export const SET_SIGNUP_BUTTON = "SET_SIGNUP_BUTTON";
 
 /* NAVBAR OPEN/CLOSE */
 export const NAVBAR_OPEN = "NAVBAR_OPEN";
@@ -30,12 +27,6 @@ export const FAVORITED_DATASETS = "GET_FAVORITE_DATASETS";
 export const UPDATE_PUBLIC_DATASETS = "UPDATE_PUBLIC_DATASETS";
 export const SET_LOGIN_DETAILS = "SET_LOGIN_DETAILS";
 
-/* USER DETAILS */
-export const GET_USER_DETAILS = "GET_USER_DETAILS";
-export const UPDATE_USER_DETAILS = "UPDATE_USER_DETAILS";
-export const RESET_DATA = "RESET_DATA";
-export const SET_USER_DETAILS = "SET_USER_DETAILS";
-
 /* DASHBOARD OVERVIEW */
 export const USER_RUNS = "USER_RUNS";
 export const SAVED_RUNS = "SAVED_RUNS";

diff --git a/dashboard/src/modules/components/HeaderComponent/index.jsx b/dashboard/src/modules/components/HeaderComponent/index.jsx
@@ -31,15 +31,13 @@ import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 
-import Cookies from "js-cookie";
 import { logout } from "actions/authActions";
 import pbenchLogo from "assets/logo/pbench_logo.svg";
 import { useKeycloak } from "@react-keycloak/web";
 import { movePage } from "actions/authActions";
 
 const HeaderToolbar = () => {
   const dispatch = useDispatch();
-  const username = Cookies.get("username");
   const { keycloak } = useKeycloak();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const navigate = useNavigate();
@@ -103,7 +101,7 @@ const HeaderToolbar = () => {
                 isOpen={isDropdownOpen}
                 toggle={
                   <DropdownToggle onToggle={onDropdownToggle}>
-                    {username}
+                    {keycloak.tokenParsed?.preferred_username}
                   </DropdownToggle>
                 }
                 dropdownItems={userDropdownItems}

diff --git a/dashboard/src/modules/components/ProfileComponent/index.jsx b/dashboard/src/modules/components/ProfileComponent/index.jsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { useSelector } from "react-redux";
 import {
   Card,
   CardBody,
@@ -15,9 +14,10 @@ import {
 import { KeyIcon, UserAltIcon } from "@patternfly/react-icons";
 import "./index.less";
 import avatar from "assets/images/avatar.jpg";
+import { useKeycloak } from "@react-keycloak/web";
 
 const ProfileComponent = () => {
-  const user = useSelector((state) => state.userProfile.userDetails);
+  const { keycloak } = useKeycloak();
 
   const formatDate = (date) => {
     const registerDate = new Date(date);
@@ -54,7 +54,7 @@ const ProfileComponent = () => {
                       {
                         <TextContent>
                           <Text component={TextVariants.h5}>
-                            {user?.first_name}
+                            {keycloak.tokenParsed?.given_name}
                           </Text>
                         </TextContent>
                       }
@@ -64,7 +64,7 @@ const ProfileComponent = () => {
                       {
                         <TextContent>
                           <Text component={TextVariants.h5}>
-                            {user?.last_name}
+                            {keycloak.tokenParsed?.family_name}
                           </Text>
                         </TextContent>
                       }
@@ -76,7 +76,7 @@ const ProfileComponent = () => {
                       {
                         <TextContent>
                           <Text component={TextVariants.h5}>
-                            {user?.username}
+                            {keycloak.tokenParsed?.preferred_username}
                           </Text>
                         </TextContent>
                       }
@@ -85,7 +85,9 @@ const ProfileComponent = () => {
                       <div className="item-header">Email</div>
                       {
                         <TextContent>
-                          <Text component={TextVariants.h5}>{user?.email}</Text>
+                          <Text component={TextVariants.h5}>
+                            {keycloak.tokenParsed?.email}
+                          </Text>
                         </TextContent>
                       }
                     </GridItem>
@@ -105,9 +107,10 @@ const ProfileComponent = () => {
                 <Grid>
                   <GridItem span={12} className="subCardDiv">
                     <TextContent>
+                      {/* TODO: How to handle account creation date */}
                       <span>Account creation Date</span>
                       <Text component={TextVariants.h4}>
-                        {formatDate(user?.registered_on)}
+                        {formatDate("MM/DD/YYYY")}
                       </Text>
                     </TextContent>
                   </GridItem>

diff --git a/dashboard/src/reducers/authReducer.js b/dashboard/src/reducers/authReducer.js
@@ -1,48 +1,17 @@
-import {
-  KEEP_USER_LOGGED_IN,
-  USER_NOTION_ALERTS,
-  SET_SIGNUP_BUTTON,
-  SET_LOGIN_BUTTON,
-  SET_LOGIN_DETAILS,
-} from "../actions/types";
+import { USER_NOTION_ALERTS } from "../actions/types";
 
 const initialState = {
-  keepLoggedIn: false,
   alerts: [],
-  isLoginBtnDisabled: true,
-  isSignupBtnDisabled: true,
-  passwordLength: 8,
-  loginDetails: {},
 };
 
 const AuthReducer = (state = initialState, action = {}) => {
   const { type, payload } = action;
   switch (type) {
-    case KEEP_USER_LOGGED_IN:
-      return {
-        ...state,
-        keepLoggedIn: payload,
-      };
     case USER_NOTION_ALERTS:
       return {
         ...state,
         alerts: [...payload],
       };
-    case SET_LOGIN_BUTTON:
-      return {
-        ...state,
-        isLoginBtnDisabled: payload,
-      };
-    case SET_SIGNUP_BUTTON:
-      return {
-        ...state,
-        isSignupBtnDisabled: payload,
-      };
-    case SET_LOGIN_DETAILS:
-      return {
-        ...state,
-        loginDetails: { ...payload },
-      };
     default:
       return state;
   }

diff --git a/dashboard/src/reducers/index.js b/dashboard/src/reducers/index.js
@@ -7,14 +7,12 @@ import OverviewReducer from "./overviewReducer";
 import SidebarReducer from "./sidebarReducer";
 import TableOfContentReducer from "./tableOfContentReducer";
 import ToastReducer from "./toastReducer";
-import UserProfileReducer from "./userProfileReducer";
 import { combineReducers } from "redux";
 
 export default combineReducers({
   toastReducer: ToastReducer,
   loading: LoadingReducer,
   userAuth: AuthReducer,
-  userProfile: UserProfileReducer,
   navOpen: NavbarReducer,
   datasetlist: DatasetListReducer,
   apiEndpoint: EndpointReducer,

diff --git a/dashboard/src/reducers/userProfileReducer.js b/dashboard/src/reducers/userProfileReducer.js
diff --git a/dashboard/src/utils/axiosInstance.js b/dashboard/src/utils/axiosInstance.js
@@ -8,8 +8,8 @@ const axiosInstance = axios.create({ responseType: "json" });
 
 axiosInstance.interceptors.request.use(async (req) => {
   const keycloak = getState().apiEndpoint.keycloak;
-  if (keycloak.authenticated) {
-    req.headers.Authorization = `Bearer ${keycloak.token}`;
+  if (keycloak?.authenticated) {
+    req.headers.Authorization = `Bearer ${keycloak?.token}`;
   }
   return req;
 });