adding authentication

Author: Mletter1

web-server/components/SlycatRemoteControls.jsx

@@ -24,7 +24,7 @@ export default class SlycatRemoteControls extends Component {
       remote_hosts: [],
       hostname: display.hostname ? display.hostname : null,
       username: display.username ? display.username : null,
-      session_exists: null,
+      session_exists: this.props.sessionExists ? this.props.sessionExists : false,
       password: "",
       hostnames: [],
       loadingData: this.props.loadingData,

web-server/plugins/slycat-cca/js/components/CCANavItems.tsx

@@ -4,24 +4,35 @@
 import * as React from "react";
 import { CCANavItem } from "./CCANavItem";
 import { useAppSelector } from "./wizard-store/hooks";
-import { selectTab, TabNames } from "./wizard-store/reducers/cCAWizardSlice";
+import { selectDataLocation, selectTab, TabNames } from "./wizard-store/reducers/cCAWizardSlice";
 
 export const CCAWizardNavItems = () => {
   const tabName = useAppSelector(selectTab);
+  const dataLocation = useAppSelector(selectDataLocation);
   return (
     <ul className="nav nav-pills">
       <CCANavItem
         key={"Locate Data"}
         name={"Locate Data"}
         active={tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB}
       />
+      <CCANavItem
+        key={"Authentication"}
+        name={"Authentication"}
+        active={tabName === TabNames.CCA_AUTHENTICATION_TAB}
+        hidden={tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB || dataLocation !== "remote"}
+      />
       <CCANavItem
         key={"Upload Table"}
         name={"Upload Table"}
         active={
-          tabName === TabNames.CCA_LOCAL_BROWSER_TAB || tabName === TabNames.CCA_REMOTE_BROWSER_TAB
+          tabName === TabNames.CCA_LOCAL_BROWSER_TAB ||
+          tabName === TabNames.CCA_REMOTE_BROWSER_TAB
+        }
+        hidden={
+          tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB ||
+          tabName === TabNames.CCA_AUTHENTICATION_TAB
         }
-        hidden={tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB}
       />
       <CCANavItem
         key={"Select Columns"}

web-server/plugins/slycat-cca/js/components/CCAWizardSteps.tsx

@@ -10,6 +10,7 @@ import { CCALocalBrowserTab } from "./wizard-tabs/CCALocalBrowserTab";
 import { CCATableIngestion } from "./wizard-tabs/CCATableIngestion";
 import { CCAModelCreation } from "./wizard-tabs/CCAModelCreation";
 import { CCARemoteBrowserTab } from "./wizard-tabs/CCARemoteBrowser";
+import { CCAAuthenticationTab } from "./wizard-tabs/CCAAuthenticationTab";
 
 export const CCAWizardSteps = () => {
   // The `state` arg is correctly typed as `RootState` already
@@ -20,45 +21,10 @@ export const CCAWizardSteps = () => {
       <div className="tab-content">
         <CCAWizardDataSelectionTab hidden={!(tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB)} />
         <CCALocalBrowserTab hidden={!(tabName === TabNames.CCA_LOCAL_BROWSER_TAB)} />
+        <CCAAuthenticationTab hidden={!(tabName === TabNames.CCA_AUTHENTICATION_TAB)} />
         <CCARemoteBrowserTab hidden={!(tabName === TabNames.CCA_REMOTE_BROWSER_TAB)} />
         <CCATableIngestion hidden={!(tabName === TabNames.CCA_TABLE_INGESTION)} />
         <CCAModelCreation hidden={!(tabName === TabNames.CCA_FINISH_MODEL)}/>
-        <div hidden={true}>
-          <form role="form">
-            {/* <slycat-remote-controls
-                params="
-                hostname:remote.hostname,
-                username:remote.username,
-                password:remote.password,
-                status:remote.status,
-                status_type:remote.status_type,
-                enable:remote.enable,
-                focus:remote.focus,
-                activate:connect,
-                session_exists:remote.session_exists"
-              ></slycat-remote-controls> */}
-          </form>
-        </div>
-
-        <div hidden={true} style={{ height: "400px" }}>
-          <div className="slycat-remote-browser-flex-layout">
-            {/* <slycat-remote-browser
-                params="
-                type:'remote',
-                sid:remote.sid,
-                hostname:remote.hostname,
-                selection:browser.selection,
-                path:browser.path,
-                open_file_callback:load_table,
-                session_exists:remote.session_exists,
-                persistence_id:'cca-table-file',
-                progress:remote.progress,
-                progress_status:remote.progress_status,
-                reauth:reauth,"
-              ></slycat-remote-browser>
-              <slycat-parser-controls params="parser:parser,category:'table'"></slycat-parser-controls> */}
-          </div>
-        </div>
       </div>
     </div>
   );

web-server/plugins/slycat-cca/js/components/CCAWizardUtils.tsx

@@ -9,6 +9,7 @@ import {
   Attribute,
   resetCCAWizard,
   selectAttributes,
+  selectAuthInfo,
   selectDataLocation,
   selectDescription,
   selectFileUploaded,
@@ -19,6 +20,7 @@ import {
   selectScaleInputs,
   selectTab,
   setAttributes,
+  setAuthInfo,
   setFileUploaded,
   setMid,
   setPid,
@@ -28,6 +30,7 @@ import {
 import client from "js/slycat-web-client";
 import fileUploader from "js/slycat-file-uploader-factory";
 import * as dialog from "js/slycat-dialog";
+import { REMOTE_AUTH_LABELS } from "../../../../utils/ui-labels";
 
 /**
  * A hook for controlling how the back and continue buttons work based on the current redux state
@@ -39,6 +42,7 @@ export const useCCAWizardFooter = () => {
   const fileUploaded = useAppSelector(selectFileUploaded);
   const dispatch = useAppDispatch();
   const uploadSelection = useUploadSelection();
+  const handleAuthentication = useHandleAuthentication();
   const finishModel = useFinishModel();
 
   /**
@@ -51,7 +55,12 @@ export const useCCAWizardFooter = () => {
     }
     if (tabName === TabNames.CCA_DATA_WIZARD_SELECTION_TAB && dataLocation === "remote") {
       console.log(dataLocation);
-      dispatch(setTabName(TabNames.CCA_REMOTE_BROWSER_TAB));
+      dispatch(setTabName(TabNames.CCA_AUTHENTICATION_TAB));
+    }
+    if (tabName === TabNames.CCA_AUTHENTICATION_TAB) {
+      console.log(dataLocation);
+      handleAuthentication();
+      // dispatch(setTabName(TabNames.CCA_REMOTE_BROWSER_TAB));
     }
     if (tabName === TabNames.CCA_LOCAL_BROWSER_TAB && fileUploaded) {
       dispatch(setTabName(TabNames.CCA_TABLE_INGESTION));
@@ -62,7 +71,15 @@ export const useCCAWizardFooter = () => {
     if (tabName === TabNames.CCA_FINISH_MODEL) {
       finishModel();
     }
-  }, [dispatch, uploadSelection, fileUploaded, setTabName, tabName, dataLocation]);
+  }, [
+    dispatch,
+    uploadSelection,
+    handleAuthentication,
+    fileUploaded,
+    setTabName,
+    tabName,
+    dataLocation,
+  ]);
 
   /**
    * handle back operation
@@ -233,7 +250,6 @@ export const useHandleLocalFileSubmit = (): [
 ] => {
   const mid = useAppSelector(selectMid);
   const pid = useAppSelector(selectPid);
-  const dispatch = useAppDispatch();
   const fileUploadSuccess = useFileUploadSuccess();
   const [progress, setProgress] = React.useState<number>(0);
   const [progressStatus, setProgressStatus] = React.useState("");
@@ -372,6 +388,50 @@ export const useFinishModel = () => {
   }, [mid, name, description, marking, server_root]);
 };
 
+export const useHandleAuthentication = () => {
+  const authInfo = useAppSelector(selectAuthInfo);
+  const dispatch = useAppDispatch();
+  return React.useCallback(async () => {
+    // this.setState({ loadingData: true });
+    // this.props.callBack(this.state.sessionExists, true);
+    console.log(authInfo);
+    if (!authInfo.password) {
+      alert(`password is empty`);
+      return;
+    }
+    client
+      .post_remotes_fetch({
+        parameters: {
+          hostname: authInfo.hostname,
+          username: authInfo.username,
+          password: atob(authInfo.password),
+        },
+      })
+      .then(async () => {
+        return await client.get_remotes_fetch(authInfo.hostname).then((json: any) => {
+          if (json.status === false) {
+            alert(`connection could not be established`);
+          } else {
+            console.log("dispatching", { ...authInfo, sessionExists: true })
+            dispatch(setAuthInfo({ ...authInfo, sessionExists: true }));
+          }
+        });
+      })
+      .catch((errorResponse: any) => {
+        if (errorResponse.status == 403) {
+          alert(`${errorResponse.statusText} \n\n-${REMOTE_AUTH_LABELS.authErrorForbiddenDescription}
+        \n-${REMOTE_AUTH_LABELS.authErrorForbiddenNote}`);
+        } else if (errorResponse.status == 401) {
+          alert(
+            `${errorResponse.statusText} \n\n-${REMOTE_AUTH_LABELS.authErrorUnauthorizedDescription}`,
+          );
+        } else {
+          alert(`${errorResponse.statusText}`);
+        }
+      });
+  }, [authInfo]);
+};
+
 /**
  * Hook for dealing with submission to the server of the inputs, outputs, and scale inputs to the server.
  * @returns a function for updating inputs and outputs

web-server/plugins/slycat-cca/js/components/wizard-store/reducers/cCAWizardSlice.tsx

@@ -6,15 +6,22 @@ import { RootState } from "../store";
 
 export enum TabNames {
   CCA_DATA_WIZARD_SELECTION_TAB = "CCADataWizardSelectionTab",
-  CCA_LOCAL_BROWSER_TAB = "CCSLocalBrowserTab",
-  CCA_REMOTE_BROWSER_TAB = "CCSRemoteBrowserTab",
+  CCA_LOCAL_BROWSER_TAB = "CCALocalBrowserTab",
+  CCA_AUTHENTICATION_TAB= "CCAAuthenticationTab",
+  CCA_REMOTE_BROWSER_TAB = "CCARemoteBrowserTab",
   CCA_TABLE_INGESTION = "CCATableIngestion",
   CCA_FINISH_MODEL = "CCAFinishModel",
 }
 export enum dataLocationType {
   LOCAL = "local",
   REMOTE = "remote",
 }
+export interface AuthenticationInformation {
+  username: string | undefined;
+  password: string | undefined;
+  hostname: string | undefined;
+  sessionExists: boolean;
+}
 export interface Attribute {
   index: number;
   "Axis Type": string;
@@ -38,6 +45,7 @@ export interface CCAWizardState {
   marking: string | undefined;
   description: string | undefined;
   name: string | undefined;
+  authInfo: AuthenticationInformation;
 }
 const initialState: CCAWizardState = {
   tab: TabNames.CCA_DATA_WIZARD_SELECTION_TAB,
@@ -50,6 +58,12 @@ const initialState: CCAWizardState = {
   marking: undefined,
   description: undefined,
   name: undefined,
+  authInfo: {
+    username: undefined,
+    password: undefined,
+    hostname: undefined,
+    sessionExists: false,
+  },
 };
 export const cCAWizardSlice = createSlice({
   name: "cCAWizard",
@@ -85,6 +99,10 @@ export const cCAWizardSlice = createSlice({
     setName: (state, action: PayloadAction<string>) => {
       state.name = action.payload;
     },
+    setAuthInfo: (state, action: PayloadAction<AuthenticationInformation>) => {
+      console.log(action.payload);
+      state.authInfo = action.payload;
+    },
     resetCCAWizard: () => initialState,
   },
 });
@@ -102,6 +120,7 @@ export const {
   setMarking,
   setDescription,
   setName,
+  setAuthInfo
 } = cCAWizardSlice.actions;
 // Other code such as selectors can use the imported `RootState` type
 export const selectTab = (state: RootState) => state.cCAWizard.tab;
@@ -114,5 +133,6 @@ export const selectScaleInputs = (state: RootState) => state.cCAWizard.scaleInpu
 export const selectMarking = (state: RootState) => state.cCAWizard.marking;
 export const selectDescription = (state: RootState) => state.cCAWizard.marking;
 export const selectName = (state: RootState) => state.cCAWizard.marking;
+export const selectAuthInfo = (state: RootState) => state.cCAWizard.authInfo;
 
 export default cCAWizardSlice.reducer;

web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAAuthenticationTab.tsx

@@ -0,0 +1,41 @@
+/* Copyright (c) 2013, 2018 National Technology and Engineering Solutions of Sandia, LLC . Under the terms of Contract
+ DE-NA0003525 with National Technology and Engineering Solutions of Sandia, LLC, the U.S. Government
+ retains certain rights in this software. */
+import * as React from "react";
+import SlycatRemoteControls from "components/SlycatRemoteControls";
+import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
+import {
+  AuthenticationInformation,
+  selectAuthInfo,
+  setAuthInfo,
+} from "../wizard-store/reducers/cCAWizardSlice";
+export const CCAAuthenticationTab = (props: { hidden?: boolean }) => {
+  const { hidden = false } = props;
+  const dispatch = useAppDispatch();
+  const authInfo = useAppSelector(selectAuthInfo);
+  const callBack = (
+    hostname: string,
+    username: string,
+    password: string,
+    session_exists: boolean,
+  ) => {
+    const authInfo: AuthenticationInformation = {
+      username,
+      password: btoa(password),
+      // decode with atob
+      hostname,
+      sessionExists: session_exists,
+    };
+    dispatch(setAuthInfo(authInfo));
+  };
+  return (
+    <div hidden={hidden}>
+      <SlycatRemoteControls
+        sessionExists={authInfo.sessionExists}
+        loadingData={false}
+        callBack={callBack}
+        showConnectButton={false}
+      />
+    </div>
+  );
+};

web-server/plugins/slycat-cca/js/components/wizard-tabs/CCARemoteBrowser.tsx

@@ -3,9 +3,32 @@
  retains certain rights in this software. */
 import * as React from "react";
 import { useSetUploadStatus } from "../CCAWizardUtils";
-
+import RemoteFileBrowser from "components/RemoteFileBrowser";
+import { useAppDispatch } from "../wizard-store/hooks";
 export const CCARemoteBrowserTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
   const setUploadStatus = useSetUploadStatus();
-  return <div hidden={hidden}>REMOTE</div>;
+  const dispatch = useAppDispatch();
+  const onSelectTableFile = (newPath: any, type: any, file: any) => {
+    console.log(newPath, type, file);
+  };
+  const onSelectParserCallBack = (parser: string) => {
+    console.log('parser',parser);
+  };
+  const onReauth = () => {
+    console.log("onReauth");
+  };
+  // TODO: add remote browser
+  return (
+    <div hidden={hidden}>
+        <RemoteFileBrowser
+          onSelectFileCallBack={onSelectTableFile}
+          onSelectParserCallBack={onSelectParserCallBack}
+          onReauthCallBack={onReauth}
+          hostname={"hostname"}
+          useSMB={false}
+          showSelector={false}
+        />
+    </div>
+  );
 };