From 9d8635ee763bcb2292aa43697e68506d76a2313c Mon Sep 17 00:00:00 2001
From: Gang Li <ligangty@users.noreply.github.com>
Date: Thu, 7 Dec 2023 10:28:41 +0800
Subject: [PATCH] RemoteEdit: add controle of proxy, auth and x509 input

---
 .../components/content/remote/RemoteEdit.jsx  | 86 ++++++++++---------
 1 file changed, 46 insertions(+), 40 deletions(-)

diff --git a/src/main/webui/src/app/components/content/remote/RemoteEdit.jsx b/src/main/webui/src/app/components/content/remote/RemoteEdit.jsx
index fa0a66d..aeff95f 100644
--- a/src/main/webui/src/app/components/content/remote/RemoteEdit.jsx
+++ b/src/main/webui/src/app/components/content/remote/RemoteEdit.jsx
@@ -18,7 +18,7 @@ import React, {useState, useEffect} from 'react';
 import {useLocation, useParams} from 'react-router-dom';
 import {PropTypes} from 'prop-types';
 import {StoreEditControlPanel as EditControlPanel} from '../common/StoreControlPanels.jsx';
-import {DisableTimeoutHint, DurationHint, PrefetchHint, Hint} from '../common/Hints.jsx';
+import {DisableTimeoutHint, DurationHint, Hint} from '../common/Hints.jsx';
 import {PackageTypeSelect} from '../common/PackageTypeSelect.jsx';
 // import ViewJsonDebugger from './Debugger.jsx';
 import {Utils} from '#utils/AppUtils.js';
@@ -31,7 +31,7 @@ const CertificateSection = ({store, handleValueChange}) => <div className="sub-f
     store.useAuth &&
     <div className="detail-field">
       <label>Client Key Password:</label>
-      <input type="password" value={store.key_password} onChange={e => handleValueChange(e, "key_password")}/><Hint hintKey="client_key" />
+      <input type="password" defaultValue={store.key_password} onChange={e => handleValueChange(e, "key_password")}/><Hint hintKey="client_key" />
     </div>
   }
     <div className="fieldset two-col">
@@ -44,7 +44,7 @@ const CertificateSection = ({store, handleValueChange}) => <div className="sub-f
           {
             // 64 columns is the original PEM line-length spec
           }
-          <textarea className="cert" cols="68" value={store.key_certificate_pem} onChange={e=>handleValueChange(e, "key_certificate_pem")}></textarea>
+          <textarea className="cert" cols="68" defaultValue={store.key_certificate_pem} onChange={e=>handleValueChange(e, "key_certificate_pem")}></textarea>
         </div>
       }
       <div className="right-col">
@@ -54,7 +54,7 @@ const CertificateSection = ({store, handleValueChange}) => <div className="sub-f
         {
           // 64 columns is the original PEM line-length spec
         }
-        <textarea className="cert" cols="68" value={store.server_certificate_pem} onChange={e=>handleValueChange(e, "server_certificate_pem")}></textarea>
+        <textarea className="cert" cols="68" defaultValue={store.server_certificate_pem} onChange={e=>handleValueChange(e, "server_certificate_pem")}></textarea>
       </div>
     </div>
 </div>;
@@ -69,8 +69,12 @@ export default function RemoteEdit() {
     store: {},
     storeView: {}
   });
+  const [useProxy, setUseProxy] = useState(false);
+  const [useAuth, setUseAuth] = useState(false);
+  const [useX509, setUseX509] = useState(false);
   const location = useLocation();
   const {packageType, name} = useParams();
+
   const path = location.pathname;
   const mode = path.match(/.*\/new$/u)? 'new':'edit';
   let [pkgType, storeName] = ["",""];
@@ -105,6 +109,9 @@ export default function RemoteEdit() {
             storeView: cloned,
             store: raw
           });
+          setUseProxy(storeView.useProxy);
+          setUseAuth(storeView.useAuth);
+          setUseX509(storeView.useX509);
         }else{
           // TODO: find another way to do error handling
           response.text().then(error=>setState({
@@ -131,18 +138,15 @@ export default function RemoteEdit() {
   const handleValueChange = (event, field) => {
     store[field] = event.target.value;
   };
-  const handleRadioChange = (event, field) => {
-    store[field] = event.target.value;
-  };
 
   const handleUseProxy = event=>{
-    // TODO: need to implement
+    setUseProxy(event.target.checked);
   };
   const handleUseAuth = event => {
-    // TODO: need to implement
+    setUseAuth(event.target.checked);
   };
   const handleUseX509 = event => {
-    // TODO: need to implement
+    setUseX509(event.target.checked);
   };
 
   return (
@@ -170,13 +174,15 @@ export default function RemoteEdit() {
             <label>Name:</label>
             {
               mode==='new'?
-              <span><input type="text" size="25" onChange={e => handleValueChange(e, "name")} /></span>:
+              <span>
+                <input type="text" size="25" onChange={e => handleValueChange(e, "name")} />
+              </span>:
               <span className="key">{store.name}</span>
             }
           </div>
 
           <div className="detail-field">
-            <input type="checkbox" checked={!store.disabled} onChange={e => handleCheckChange(e, "disabled")} />{' '}
+            <input type="checkbox" defaultChecked={!store.disabled} onChange={e => handleCheckChange(e, "disabled")}/>{' '}
             <label>Enabled?</label>
             {
               store.disabled && store.disableExpiration &&
@@ -184,7 +190,7 @@ export default function RemoteEdit() {
             }
           </div>
           <div className="detail-field">
-            <input type="checkbox" checked={store.authoritative_index} onChange={e => handleCheckChange(e, "authoritative_index")} />{' '}
+            <input type="checkbox" defaultChecked={store.authoritative_index} onChange={e => handleCheckChange(e, "authoritative_index")} />{' '}
             <label>Authoritative content Index?</label>
             <span className="hint">Make the content index authoritative to this repository</span>
           </div>
@@ -192,53 +198,53 @@ export default function RemoteEdit() {
           <div className="sub-fields">
             <div className="detail-field">
               <label>Disable Timeout:</label>
-              <input type="text" value={store.disable_timeout} onChange={e => handleValueChange(e, "disable_timeout")} />
+              <input type="text" defaultValue={store.disable_timeout} onChange={e => handleValueChange(e, "disable_timeout")} />
               <DisableTimeoutHint />
             </div>
           </div>
 
           <div className="detail-field">
             <label>Remote URL:</label>
-            <input type="text" value={store.url} size="92"/>
+            <input type="text" defaultValue={store.url} size="92" onChange={e => handleValueChange(e, "url")}/>
           </div>
 
           <div className="sub-fields">
             <div className="detail-field">
-              <input type="checkbox" value={store.is_passthrough} onChange={e => handleCheckChange(e, "is_passthrough")} />{' '}
+              <input type="checkbox" defaultChecked={store.is_passthrough} onChange={e => handleCheckChange(e, "is_passthrough")} />{' '}
               <label>{"Don't Cache Content"}</label>
               <Hint hintKey="passthrough"/>
             </div>
             {!store.is_passthrough && <React.Fragment>
               <div className="detail-field">
                 <label>Content Cache Timeout:</label>
-                <input type="text" value={store.cache_timeout_seconds} onChange={e => handleValueChange(e, "cache_timeout_seconds")} />
+                <input type="text" defaultValue={store.cache_timeout_seconds} onChange={e => handleValueChange(e, "cache_timeout_seconds")} />
                 <DurationHint />
               </div>
               <div className="detail-field">
                 <label>Metadata Cache Timeout:</label>
-                <input type="text" value={store.metadata_timeout_seconds} onChange={e => handleValueChange(e, "metadata_timeout_seconds")} />
+                <input type="text" defaultValue={store.metadata_timeout_seconds} onChange={e => handleValueChange(e, "metadata_timeout_seconds")} />
                 <DurationHint>{'24h 36m 00s. Negative means never timeout, 0 means using default timeout by Indy settings.'}</DurationHint>
               </div>
             </React.Fragment>
             }
           </div>
-
-          <div className="sub-fields">
+          {/* prefetch support has been disabled in new Indy.
+           <div className="sub-fields">
             <div className="detail-field">
               <label>Pre-fetching Priority:</label>
-              <input type="text" value={store.prefetch_priority} onChange={e=>handleValueChange(e,"prefetch_priority")} size="5"/>
+              <input type="text" defaultValue={store.prefetch_priority} onChange={e=>handleValueChange(e,"prefetch_priority")} size="5"/>
               <PrefetchHint />
             </div>
             <div className="detail-field">
-              <span><input type="checkbox" checked={store.prefetch_rescan} onChange={e=>handleCheckChange(e,"prefetch_rescan")} /></span>{' '}
+              <span><input type="checkbox" defaultChecked={store.prefetch_rescan} onChange={e=>handleCheckChange(e,"prefetch_rescan")} /></span>{' '}
               <label>Allow Pre-fetching Rescan?</label>
             </div>
             <div className="detail-field">
               <label>Pre-fetching Listing Type:</label>
-              <input type="radio" checked={store.prefetch_listing_type==="html"} onChange={e=>handleRadioChange(e, "prefetch_listing_type")} value="html"/> <span>html</span>{' '}
-              <input type="radio" checked={store.prefetch_listing_type==="koji"} onChange={e=>handleRadioChange(e, "prefetch_listing_type")} value="koji"/> <span>koji</span>
+              <input type="radio" name="prefetch" defaultChecked={store.prefetch_listing_type==="html"} onChange={e=>handleRadioChange(e, "prefetch_listing_type")} defaultValue="html"/> <span>html</span>{' '}
+              <input type="radio" name="prefetch" defaultChecked={store.prefetch_listing_type==="koji"} onChange={e=>handleRadioChange(e, "prefetch_listing_type")} defaultValue="koji"/> <span>koji</span>
             </div>
-          </div>
+          </div>*/}
         </div>
 
 
@@ -250,11 +256,11 @@ export default function RemoteEdit() {
         <div className="fieldset-caption">Capabilities</div>
         <div className="fieldset">
           <div className="detail-field">
-            <span><input type="checkbox" checked={store.allow_releases} onChange={e=>handleCheckChange(e, "allow_releases")}/></span>{' '}
+            <span><input type="checkbox" defaultChecked={store.allow_releases} onChange={e=>handleCheckChange(e, "allow_releases")}/></span>{' '}
             <label>Allow Releases</label>
           </div>
           <div className="detail-field">
-            <span><input type="checkbox" checked={store.allow_snapshots} onChange={e=>handleCheckChange(e, "allow_snapshots")}/></span>{' '}
+            <span><input type="checkbox" defaultChecked={store.allow_snapshots} onChange={e=>handleCheckChange(e, "allow_snapshots")}/></span>{' '}
             <label>Allow Snapshots</label>
           </div>
         </div>
@@ -263,7 +269,7 @@ export default function RemoteEdit() {
         <div className="fieldset">
           <div className="detail-field">
             <label>Request Timeout:</label>
-            <input type="text" value={store.timeout_seconds} onChange={e=>handleValueChange(e, "timeout_seconds")}/>
+            <input type="text" defaultValue={store.timeout_seconds} onChange={e=>handleValueChange(e, "timeout_seconds")}/>
             <DurationHint />
           </div>
           <div className="detail-hint">
@@ -274,19 +280,19 @@ export default function RemoteEdit() {
             // HTTP Proxy
           }
           <div className="detail-field">
-            <input type="checkbox" checked={store.use_proxy} onChange={e=>handleUseProxy(e)} />{' '}
+            <input type="checkbox" defaultChecked={useProxy} onChange={e=>handleUseProxy(e)} />{' '}
             <label>Use Proxy?</label>
           </div>
           {
-            store.useProxy&&
+            useProxy&&
             <div className="sub-fields">
               <div className="detail-field">
                 <label>Proxy Host:</label>
-                <input type="text" value="raw.proxy_host" onChange={e=>handleValueChange(e,"proxy_host")} size="20"/>
+                <input type="text" defaultValue={store.proxy_host} onChange={e=>handleValueChange(e,"proxy_host")} size="20"/>
               </div>
               <div className="detail-field">
                 <label>Proxy Port:</label>
-                <input type="text" value="raw.proxy_port" onChange={e=>handleValueChange(e,"proxy_port")} size="6"/>
+                <input type="text" defaultValue={store.proxy_port} onChange={e=>handleValueChange(e,"proxy_port")} size="6"/>
               </div>
             </div>
           }
@@ -294,40 +300,40 @@ export default function RemoteEdit() {
             // X.509 / auth
           }
           <div className="detail-field">
-            <input type="checkbox" checked={store.useAuth} onChange={e=>handleUseAuth(e)} />{' '}
+            <input type="checkbox" defaultChecked={useAuth} onChange={e=>handleUseAuth(e)} />{' '}
             <label>Use Authentication?</label>
           </div>
           {
-            store.useAuth &&
+            useAuth &&
             <div className="sub-fields">
               <div className="detail-field">
                 <label>Username:</label>
-                <input type="text" value={store.user} onChange={e=>handleValueChange(e, "user")} size="25"/>
+                <input type="text" defaultValue={store.user} onChange={e=>handleValueChange(e, "user")} size="25"/>
               </div>
               <div className="detail-field">
                 <label>Password:</label>
-                <input type="password" value={store.password} onChange={e=>handleValueChange(e, "password")} size="25"/>
+                <input type="password" defaultValue={store.password} onChange={e=>handleValueChange(e, "password")} size="25"/>
               </div>
               {
                 store.use_proxy && <React.Fragment>
                 <div className="detail-field">
                   <label>Proxy Username:</label>
-                  <input type="text" value={store.proxy_user} onChange={e=>handleValueChange(e, "proxy_user")} size="20"/>
+                  <input type="text" defaultValue={store.proxy_user} onChange={e=>handleValueChange(e, "proxy_user")} size="20"/>
                 </div>
                 <div className="detail-field">
                   <label>Proxy Password:</label>
-                  <input type="password" value={store.proxy_password} onChange={e=>handleValueChange(e, "proxy_password")} size="20"/>
+                  <input type="password" defaultValue={store.proxy_password} onChange={e=>handleValueChange(e, "proxy_password")} size="20"/>
                 </div>
               </React.Fragment>
               }
             </div>
           }
           <div className="detail-field">
-            <input type="checkbox" checked={store.useX509} onChange={e=>handleUseX509(e)} />{' '}
+            <input type="checkbox" defaultChecked={useX509} onChange={e=>handleUseX509(e)} />{' '}
             <label>{`Use Custom X.509 Configuration?`}</label>
           </div>
           {
-            store.useX509 && <CertificateSection store={store} handleValueChange={handleValueChange} />
+            useX509 && <CertificateSection store={store} handleValueChange={handleValueChange} />
           }
         </div>
       </div>