2021-05-02 12:29:43 +00:00
|
|
|
import { RouteComponentProps } from '@reach/router';
|
2021-09-30 09:57:18 +00:00
|
|
|
import React, { useState } from 'react';
|
2021-09-17 09:55:15 +00:00
|
|
|
import { useTranslation } from 'react-i18next';
|
2021-05-02 12:29:43 +00:00
|
|
|
import { useDispatch } from 'react-redux';
|
2021-09-30 09:57:18 +00:00
|
|
|
import { useModule } from '../../../lib/react-utils';
|
|
|
|
import Stulbe from '../../../lib/stulbe-lib';
|
|
|
|
import apiReducer, { modules } from '../../../store/api/reducer';
|
2021-05-02 12:29:43 +00:00
|
|
|
|
2021-09-30 09:57:18 +00:00
|
|
|
export default function StulbeConfigPage(
|
2021-05-02 12:29:43 +00:00
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
|
|
params: RouteComponentProps<unknown>,
|
|
|
|
): React.ReactElement {
|
2021-09-17 09:55:15 +00:00
|
|
|
const { t } = useTranslation();
|
2021-05-02 12:29:43 +00:00
|
|
|
const [moduleConfig, setModuleConfig] = useModule(modules.moduleConfig);
|
|
|
|
const [stulbeConfig, setStulbeConfig] = useModule(modules.stulbeConfig);
|
2021-09-30 09:57:18 +00:00
|
|
|
const [testResult, setTestResult] = useState<string>(null);
|
2021-05-02 12:29:43 +00:00
|
|
|
const dispatch = useDispatch();
|
|
|
|
|
|
|
|
const busy = moduleConfig === null;
|
|
|
|
const active = moduleConfig?.stulbe ?? false;
|
|
|
|
|
2021-09-30 09:57:18 +00:00
|
|
|
const test = async () => {
|
|
|
|
try {
|
|
|
|
const client = new Stulbe(stulbeConfig.endpoint);
|
|
|
|
await client.auth(stulbeConfig.username, stulbeConfig.auth_key);
|
|
|
|
setTestResult('Connection/Authentication were successful!');
|
|
|
|
} catch (e) {
|
|
|
|
setTestResult(e.message);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2021-05-02 12:29:43 +00:00
|
|
|
return (
|
|
|
|
<>
|
2021-09-30 09:57:18 +00:00
|
|
|
<h1 className="title is-4">{t('backend.config.header')}</h1>
|
2021-05-02 12:29:43 +00:00
|
|
|
<div className="field">
|
|
|
|
<label className="checkbox">
|
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
checked={active}
|
|
|
|
disabled={busy}
|
|
|
|
onChange={(ev) =>
|
|
|
|
dispatch(
|
|
|
|
apiReducer.actions.moduleConfigChanged({
|
|
|
|
...moduleConfig,
|
|
|
|
stulbe: ev.target.checked,
|
|
|
|
}),
|
|
|
|
)
|
|
|
|
}
|
|
|
|
/>{' '}
|
2021-09-30 09:57:18 +00:00
|
|
|
{t('backend.config.enable')}
|
2021-05-02 12:29:43 +00:00
|
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<div className="field">
|
2021-09-30 09:57:18 +00:00
|
|
|
<label className="label">{t('backend.config.endpoint')}</label>
|
2021-05-02 12:29:43 +00:00
|
|
|
<p className="control">
|
|
|
|
<input
|
|
|
|
className="input"
|
|
|
|
type="text"
|
|
|
|
placeholder="https://stulbe.ovo.ovh"
|
|
|
|
disabled={busy || !active}
|
|
|
|
value={stulbeConfig?.endpoint ?? ''}
|
|
|
|
onChange={(ev) =>
|
|
|
|
dispatch(
|
|
|
|
apiReducer.actions.stulbeConfigChanged({
|
|
|
|
...stulbeConfig,
|
|
|
|
endpoint: ev.target.value,
|
|
|
|
}),
|
|
|
|
)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</p>
|
|
|
|
</div>
|
2021-05-07 16:36:23 +00:00
|
|
|
<div className="field">
|
2021-09-30 09:57:18 +00:00
|
|
|
<label className="label">{t('backend.config.username')}</label>
|
2021-05-07 16:36:23 +00:00
|
|
|
<p className="control">
|
|
|
|
<input
|
|
|
|
className="input"
|
|
|
|
type="text"
|
2021-09-30 09:57:18 +00:00
|
|
|
placeholder={t('backend.config.username-placeholder')}
|
2021-05-07 16:36:23 +00:00
|
|
|
disabled={busy || !active}
|
|
|
|
value={stulbeConfig?.username ?? ''}
|
|
|
|
onChange={(ev) =>
|
|
|
|
dispatch(
|
|
|
|
apiReducer.actions.stulbeConfigChanged({
|
|
|
|
...stulbeConfig,
|
|
|
|
username: ev.target.value,
|
|
|
|
}),
|
|
|
|
)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div className="field">
|
2021-09-30 09:57:18 +00:00
|
|
|
<label className="label">{t('backend.config.authkey')}</label>
|
2021-05-07 16:36:23 +00:00
|
|
|
<p className="control">
|
|
|
|
<input
|
|
|
|
className="input"
|
|
|
|
type="password"
|
2021-09-30 09:57:18 +00:00
|
|
|
placeholder={t('backend.config.authkey-placeholder')}
|
2021-05-07 16:36:23 +00:00
|
|
|
disabled={busy || !active}
|
|
|
|
value={stulbeConfig?.auth_key ?? ''}
|
|
|
|
onChange={(ev) =>
|
|
|
|
dispatch(
|
|
|
|
apiReducer.actions.stulbeConfigChanged({
|
|
|
|
...stulbeConfig,
|
|
|
|
auth_key: ev.target.value,
|
|
|
|
}),
|
|
|
|
)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</p>
|
|
|
|
</div>
|
2021-05-02 12:29:43 +00:00
|
|
|
<button
|
|
|
|
className="button"
|
|
|
|
onClick={() => {
|
|
|
|
dispatch(setModuleConfig(moduleConfig));
|
|
|
|
dispatch(setStulbeConfig(stulbeConfig));
|
|
|
|
}}
|
|
|
|
>
|
2021-09-30 09:57:18 +00:00
|
|
|
{t('actions.save')}
|
|
|
|
</button>
|
|
|
|
<button className="button" onClick={test}>
|
|
|
|
{t('actions.test')}
|
2021-05-02 12:29:43 +00:00
|
|
|
</button>
|
2021-09-30 09:57:18 +00:00
|
|
|
{testResult ? (
|
|
|
|
<div className="notification" style={{ marginTop: '1rem' }}>
|
|
|
|
{testResult}
|
|
|
|
</div>
|
|
|
|
) : null}
|
2021-05-02 12:29:43 +00:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|