started two component remote approach

client/App.js

@@ -1,18 +1,27 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import Remote from './components/Remote';
+import Origin from './components/Origin';
+import Destination from './components/Destination';
 import Button from './components/Button';
 import Overlay from './components/Overlay';
 //import styles if necessary
 //may need to import functions from slices here
 
 const App = (props) => {
- const { render } = useSelector((state) => state.GUI.destination);
+ const { origin, destination } = useSelector((state) => state.GUI);
  return (
  <>
- <Remote provider={'Origin'}></Remote>
+ <Origin
+ name={origin.name}
+ service={origin.service}
+ ></Origin>
  <div>
- {render ? <Remote provider={'Destination'}></Remote> : <h1>Hi</h1>}
+ {destination.render && (
+ <Destination
+ name={destination.name}
+ service={destination.service}
+ ></Destination>
+ )}
  </div>
 
  <Button></Button>

client/components/Button.js

@@ -18,7 +18,7 @@ const Button = (props) => {
  dispatch(migrationStatusChange(true));
  };
 
- return <button onClick={() => changeMigrationStatus()}>Start</button>;
+ return <button onClick={() => changeMigrationStatus()}>Start Migration</button>;
 };
 
 export default Button;

client/components/Destination.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+ updateRemoteCredentials,
+ checkInputCredentials,
+ formatState,
+} from '../slice';
+import { useDispatch, useSelector } from 'react-redux';
+
+const Destination = (props) => {
+ const dispatch = useDispatch();
+ const { origin, destination } = useSelector((state) => state.GUI);
+
+ return (
+ <>
+ <h1>Destination</h1>
+ {props.name && (
+ <h2>
+ {props.name} {props.service}
+ </h2>
+ )}
+ <form
+ onSubmit={(e) => {
+ e.preventDefault();
+ const accessId = e.target.accessId.value;
+ const secretKey = e.target.secretKey.value;
+ const accountId = e.target.accountId
+ ? e.target.accountId.value
+ : null;
+ const results = checkInputCredentials(accessId, secretKey);
+ if (!results) {
+ console.log('Credentials appear to be incorrect');
+ } else {
+ const newState = formatState(
+ results,
+ accessId,
+ secretKey,
+ accountId,
+ origin,
+ destination
+ );
+ dispatch(updateRemoteCredentials(newState));
+ }
+ }}
+ >
+ <div>
+ {' '}
+ <label htmlFor="accessId">Access Id:</label>
+ {origin.accessId && props.provider === 'Origin' ? (
+ <p>'check'</p>
+ ) : (
+ <input name="accessId"></input>
+ )}
+ </div>
+ <div>
+ {' '}
+ <label htmlFor="secretKey">Secret Key:</label>
+ {origin.secretKey && props.provider === 'Origin' ? (
+ <p>'check'</p>
+ ) : (
+ <input name="secretKey"></input>
+ )}
+ </div>
+ {props.name === 'CloudFlare' && (
+ <div>
+ {' '}
+ <label htmlFor="accountId">Account Id:</label>
+ <input name="accountId"></input>
+ </div>
+ )}
+
+ <button type="submit">Submit</button>
+ </form>
+ </>
+ );
+};
+
+export default Destination;

client/components/Remote.js → client/components/Origin.js

@@ -6,13 +6,18 @@ import {
 } from '../slice';
 import { useDispatch, useSelector } from 'react-redux';
 
-const Remote = (props) => {
+const Origin = (props) => {
  const dispatch = useDispatch();
  const { origin, destination } = useSelector((state) => state.GUI);
 
  return (
  <>
- <h1>{props.provider}</h1>
+ <h1>Origin</h1>
+ {props.name && (
+ <h2>
+ {props.name} {props.service}
+ </h2>
+ )}
  <form
  onSubmit={(e) => {
  e.preventDefault();
@@ -40,14 +45,22 @@ const Remote = (props) => {
  <div>
  {' '}
  <label htmlFor="accessId">Access Id:</label>
- <input name="accessId"></input>
+ {origin.accessId && props.provider === 'Origin' ? (
+ <p>'check'</p>
+ ) : (
+ <input name="accessId"></input>
+ )}
  </div>
  <div>
  {' '}
  <label htmlFor="secretKey">Secret Key:</label>
- <input name="secretKey"></input>
+ {origin.secretKey && props.provider === 'Origin' ? (
+ <p>'check'</p>
+ ) : (
+ <input name="secretKey"></input>
+ )}
  </div>
- {destination.name === 'CloudFlare R2' && (
+ {props.name === 'CloudFlare' && (
  <div>
  {' '}
  <label htmlFor="accountId">Account Id:</label>
@@ -61,4 +74,4 @@ const Remote = (props) => {
  );
 };
 
-export default Remote;
+export default Origin;

client/slice.js

@@ -81,21 +81,21 @@ export const formatState = (
  },
  destination: {
  render: true,
- name: 'CloudFlare R2',
+ name: 'CloudFlare',
  secretKey: null,
  accessId: null,
  accountId: null,
- service: null,
+ service: 'R2',
  },
  };
  } else {
  return {
  origin: {
- name: 'CloudFlare R2',
+ name: 'CloudFlare',
  accessId: accessId,
  secretKey: secretKey,
  accountId: null,
- service: null,
+ service: 'R2',
  },
  destination: {
  render: true,