feat: hydrate wizard steps from API

This commit is contained in:
Ravinou 2023-09-05 22:53:23 +02:00
parent 28115f3506
commit 1e7917041d
No known key found for this signature in database
GPG key ID: EEEE670C40F6A4D7
5 changed files with 71 additions and 51 deletions

View file

@ -3,24 +3,17 @@ import React from 'react';
import classes from '../WizardStep1/WizardStep1.module.css';
import { IconTool, IconAlertCircle } from '@tabler/icons-react';
import CopyButton from '../../UI/CopyButton/CopyButton';
import lanCommandOption from '../../../helpers/functions/lanCommandOption';
function WizardStep2(props) {
////Vars
const wizardEnv = props.wizardEnv;
const UNIX_USER = wizardEnv.UNIX_USER;
//Needed to generate command for borg over LAN instead of WAN if env vars are set and option enabled.
let HOSTNAME;
let SSH_SERVER_PORT;
let UNIX_USER = process.env.NEXT_PUBLIC_UNIX_USER;
if (
props.selectedOption.lanCommand &&
process.env.NEXT_PUBLIC_HOSTNAME_LAN &&
process.env.NEXT_PUBLIC_SSH_SERVER_PORT_LAN
) {
HOSTNAME = process.env.NEXT_PUBLIC_HOSTNAME_LAN;
SSH_SERVER_PORT = process.env.NEXT_PUBLIC_SSH_SERVER_PORT_LAN;
} else {
HOSTNAME = process.env.NEXT_PUBLIC_HOSTNAME;
SSH_SERVER_PORT = process.env.NEXT_PUBLIC_SSH_SERVER_PORT;
}
const { HOSTNAME, SSH_SERVER_PORT } = lanCommandOption(
wizardEnv,
props.selectedOption.lanCommand
);
return (
<div className={classes.container}>
@ -125,20 +118,17 @@ function WizardStep2(props) {
connect :
<li>
<span className={classes.sshPublicKey}>
ECDSA :{' '}
{process.env.NEXT_PUBLIC_SSH_SERVER_FINGERPRINT_ECDSA}
ECDSA : {wizardEnv.SSH_SERVER_FINGERPRINT_ECDSA}
</span>
</li>
<li>
<span className={classes.sshPublicKey}>
ED25519 :{' '}
{process.env.NEXT_PUBLIC_SSH_SERVER_FINGERPRINT_ED25519}
ED25519 : {wizardEnv.SSH_SERVER_FINGERPRINT_ED25519}
</span>
</li>
<li>
<span className={classes.sshPublicKey}>
RSA :{' '}
{process.env.NEXT_PUBLIC_SSH_SERVER_FINGERPRINT_RSA}
RSA : {wizardEnv.SSH_SERVER_FINGERPRINT_RSA}
</span>
</li>
</div>

View file

@ -3,24 +3,17 @@ import React from 'react';
import classes from '../WizardStep1/WizardStep1.module.css';
import { IconChecks, IconPlayerPlay } from '@tabler/icons-react';
import CopyButton from '../../UI/CopyButton/CopyButton';
import lanCommandOption from '../../../helpers/functions/lanCommandOption';
function WizardStep3(props) {
////Vars
const wizardEnv = props.wizardEnv;
const UNIX_USER = wizardEnv.UNIX_USER;
//Needed to generate command for borg over LAN instead of WAN if env vars are set and option enabled.
let HOSTNAME;
let SSH_SERVER_PORT;
let UNIX_USER = process.env.NEXT_PUBLIC_UNIX_USER;
if (
props.selectedOption.lanCommand &&
process.env.NEXT_PUBLIC_HOSTNAME_LAN &&
process.env.NEXT_PUBLIC_SSH_SERVER_PORT_LAN
) {
HOSTNAME = process.env.NEXT_PUBLIC_HOSTNAME_LAN;
SSH_SERVER_PORT = process.env.NEXT_PUBLIC_SSH_SERVER_PORT_LAN;
} else {
HOSTNAME = process.env.NEXT_PUBLIC_HOSTNAME;
SSH_SERVER_PORT = process.env.NEXT_PUBLIC_SSH_SERVER_PORT;
}
const { HOSTNAME, SSH_SERVER_PORT } = lanCommandOption(
wizardEnv,
props.selectedOption.lanCommand
);
return (
<div className={classes.container}>

View file

@ -3,24 +3,17 @@ import React from 'react';
import classes from '../WizardStep1/WizardStep1.module.css';
import { IconWand } from '@tabler/icons-react';
import CopyButton from '../../UI/CopyButton/CopyButton';
import lanCommandOption from '../../../helpers/functions/lanCommandOption';
function WizardStep4(props) {
////Vars
const wizardEnv = props.wizardEnv;
const UNIX_USER = wizardEnv.UNIX_USER;
//Needed to generate command for borg over LAN instead of WAN if env vars are set and option enabled.
let HOSTNAME;
let SSH_SERVER_PORT;
let UNIX_USER = process.env.NEXT_PUBLIC_UNIX_USER;
if (
props.selectedOption.lanCommand &&
process.env.NEXT_PUBLIC_HOSTNAME_LAN &&
process.env.NEXT_PUBLIC_SSH_SERVER_PORT_LAN
) {
HOSTNAME = process.env.NEXT_PUBLIC_HOSTNAME_LAN;
SSH_SERVER_PORT = process.env.NEXT_PUBLIC_SSH_SERVER_PORT_LAN;
} else {
HOSTNAME = process.env.NEXT_PUBLIC_HOSTNAME;
SSH_SERVER_PORT = process.env.NEXT_PUBLIC_SSH_SERVER_PORT;
}
const { HOSTNAME, SSH_SERVER_PORT } = lanCommandOption(
wizardEnv,
props.selectedOption.lanCommand
);
const configBorgmatic = `location:
# List of source directories to backup.

View file

@ -20,6 +20,7 @@ function SetupWizard(props) {
const [list, setList] = useState([]);
const [listIsLoading, setListIsLoading] = useState(true);
const [step, setStep] = useState();
const [wizardEnv, setWizardEnv] = useState({});
const [selectedOption, setSelectedOption] = useState({
id: '#id',
repository: 'repo',
@ -44,6 +45,21 @@ function SetupWizard(props) {
}
};
repoList();
//Fetch wizardEnv to hydrate Wizard' steps
const fetchWizardEnv = async () => {
try {
const response = await fetch('/api/account/getWizardEnv', {
method: 'GET',
headers: {
'Content-type': 'application/json',
},
});
setWizardEnv((await response.json()).wizardEnv);
} catch (error) {
console.log('Fetching datas error');
}
};
fetchWizardEnv();
}, []);
//Component did update
useEffect(() => {
@ -84,11 +100,26 @@ function SetupWizard(props) {
if (step == 1) {
return <WizardStep1 />;
} else if (step == 2) {
return <WizardStep2 selectedOption={selectedOption} />;
return (
<WizardStep2
selectedOption={selectedOption}
wizardEnv={wizardEnv}
/>
);
} else if (step == 3) {
return <WizardStep3 selectedOption={selectedOption} />;
return (
<WizardStep3
selectedOption={selectedOption}
wizardEnv={wizardEnv}
/>
);
} else {
return <WizardStep4 selectedOption={selectedOption} />;
return (
<WizardStep4
selectedOption={selectedOption}
wizardEnv={wizardEnv}
/>
);
}
};

View file

@ -0,0 +1,13 @@
export default function lanCommandOption(wizardEnv, lanCommand) {
let HOSTNAME;
let SSH_SERVER_PORT;
if (lanCommand && wizardEnv.HOSTNAME_LAN && wizardEnv.SSH_SERVER_PORT_LAN) {
HOSTNAME = wizardEnv.HOSTNAME_LAN;
SSH_SERVER_PORT = wizardEnv.SSH_SERVER_PORT_LAN;
} else {
HOSTNAME = wizardEnv.HOSTNAME;
SSH_SERVER_PORT = wizardEnv.SSH_SERVER_PORT;
}
return { HOSTNAME, SSH_SERVER_PORT };
}