From d55e084ab70d6c5467eb2956bd22a7ce225a6e01 Mon Sep 17 00:00:00 2001
From: andrewaltman1 <55675406+andrewaltman1@users.noreply.github.com>
Date: Thu, 13 Apr 2023 18:59:49 -0400
Subject: [PATCH] combined oirigin/destination components to remote

---
 client/components/Remote.js          | 26 +++++++++++++++++---------
 client/components/RemoteContainer.js |  4 +---
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/client/components/Remote.js b/client/components/Remote.js
index b7b1fa7..b574efd 100644
--- a/client/components/Remote.js
+++ b/client/components/Remote.js
@@ -41,7 +41,8 @@ const Remote = (props) => {
       <div className="relative z-0 w-full h-full mb-6 group">
         <div class="grid grid-cols-3 gap-2">
           <h1 class="mx-auto text-sm flex items-center font-mono">
-            {props.remoteType}: {props.displayName}
+            {props.remoteType.charAt(0).toUpperCase()
+  + props.remoteType.slice(1)}: {props.displayName}
           </h1>
           {/* <div>
             <img
@@ -72,17 +73,18 @@ const Remote = (props) => {
           placeholder=" "
           required
           name="accessId"
-          id="originAccessId"
+          id={`${remoteType}AccessId`}
           onChange={(e) => {
             const newState = props.accessIdHandler(e, remote);
             dispatch(updateAccessId({ newState, remoteType }));
           }}
         ></input>
         <label
-          htmlFor="originAccessId"
+          htmlFor={`${remoteType}AccessId`}
           className="peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
         >
-          Access ID{origin.accessId ? <>{' \u2705'}</> : <></>}
+          {remote.name === 'azureblob' ? 'Account ID' : 'Access ID'}
+          {remote.accessId ? <>{' \u2705'}</> : <></>}
         </label>
       </div>
 
@@ -93,10 +95,10 @@ const Remote = (props) => {
           required
           type="key"
           name="secretKey"
-          id="originSecretKey"
+          id={`${remote}SecretKey`}
           onChange={(e) => {
             const newState = props.secretKeyHandler(e, remote);
-            dispatch(updateSecretKey({newState, remoteType}));
+            dispatch(updateSecretKey({ newState, remoteType }));
           }}
         ></input>
 
@@ -104,7 +106,8 @@ const Remote = (props) => {
           htmlFor="secretKey"
           className="peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
         >
-          Secret Key{origin.secretKey ? <>{' \u2705'}</> : <></>}
+          {remote.name === 'azureblob' ? 'Access Key' : 'Secret Key'}
+          {remote.secretKey ? <>{' \u2705'}</> : <></>}
         </label>
       </div>
 
@@ -118,14 +121,19 @@ const Remote = (props) => {
             id="accountId"
             name="accountId"
             onChange={(e) => {
-              dispatch(updateAccountId({accountId: e.target.value.trim(), remoteType}));
+              dispatch(
+                updateAccountId({
+                  accountId: e.target.value.trim(),
+                  remoteType,
+                })
+              );
             }}
           ></input>
           <label
             htmlFor="accountId"
             className="peer-focus:font-medium absolute text-base duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6"
           >
-            Account ID {origin.accountId.length > 1 && <>{'\u2705'}</>}
+            Account ID {remote.accountId.length > 1 && <>{'\u2705'}</>}
           </label>
         </div>
       )}
diff --git a/client/components/RemoteContainer.js b/client/components/RemoteContainer.js
index c015fe8..8a302fb 100644
--- a/client/components/RemoteContainer.js
+++ b/client/components/RemoteContainer.js
@@ -17,7 +17,6 @@ export const RemoteContainer = (props) => {
               remoteType={'origin'}
               accessIdHandler={accessIdHandler}
               secretKeyHandler={secretKeyHandler}
-              accountIdHandler={accountIdHandler}
               displayName={origin.displayName}
             ></Remote>
           )}
@@ -31,7 +30,6 @@ export const RemoteContainer = (props) => {
               remoteType={'destination'}
               accessIdHandler={accessIdHandler}
               secretKeyHandler={secretKeyHandler}
-              accountIdHandler={accountIdHandler}
               displayName={destination.displayName}
             />
           )}
@@ -48,7 +46,7 @@ const accessIdHandler = (e, remote) => {
   );
   const isCloudflareAccessId = /^[a-z0-9]{32}$/.test(accessId);
   const isMicrosoftAccessId =
-    remote.name === 'azureblob' && !isAmazonAccessId && isCloudflareAccessId
+    remote.name === 'azureblob' && !isAmazonAccessId && !isCloudflareAccessId
       ? true
       : false;
   if (isAmazonAccessId || isCloudflareAccessId || isMicrosoftAccessId) {