Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RemoteEdit: add controle of proxy, auth and x509 input #115

Merged
merged 1 commit into from
Dec 7, 2023
Merged

RemoteEdit: add controle of proxy, auth and x509 input #115

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 46 additions & 40 deletions src/main/webui/src/app/components/content/remote/RemoteEdit.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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>;
Expand All @@ -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] = ["",""];
Expand Down Expand Up @@ -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({
Expand All @@ -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 (
Expand Down Expand Up @@ -170,75 +174,77 @@ 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 &&
<span className="hint">Set to automatically re-enable at {TimeUtils.timestampToDateFormat(store.disableExpiration)}</span>
}
</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>

<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>


Expand All @@ -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>
Expand All @@ -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">
Expand All @@ -274,60 +280,60 @@ 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>
}
{
// 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>
Expand Down
Loading