feat: hydrate wizard steps from API

Components/WizardSteps/WizardStep2/WizardStep2.js

@@ -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;
+    const { HOSTNAME, SSH_SERVER_PORT } = lanCommandOption(
-    let SSH_SERVER_PORT;
+        wizardEnv,
-    let UNIX_USER = process.env.NEXT_PUBLIC_UNIX_USER;
+        props.selectedOption.lanCommand
-    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;
-    }
 
     return (
         <div className={classes.container}>
@@ -125,20 +118,17 @@ function WizardStep2(props) {
                 connect :
                 <li>
                     <span className={classes.sshPublicKey}>
-                        ECDSA :{' '}
+                        ECDSA : {wizardEnv.SSH_SERVER_FINGERPRINT_ECDSA}
-                        {process.env.NEXT_PUBLIC_SSH_SERVER_FINGERPRINT_ECDSA}
                     </span>
                 </li>
                 <li>
                     <span className={classes.sshPublicKey}>
-                        ED25519 :{' '}
+                        ED25519 : {wizardEnv.SSH_SERVER_FINGERPRINT_ED25519}
-                        {process.env.NEXT_PUBLIC_SSH_SERVER_FINGERPRINT_ED25519}
                     </span>
                 </li>
                 <li>
                     <span className={classes.sshPublicKey}>
-                        RSA :{' '}
+                        RSA : {wizardEnv.SSH_SERVER_FINGERPRINT_RSA}
-                        {process.env.NEXT_PUBLIC_SSH_SERVER_FINGERPRINT_RSA}
                     </span>
                 </li>
             </div>

Components/WizardSteps/WizardStep3/WizardStep3.js

@@ -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;
+    const { HOSTNAME, SSH_SERVER_PORT } = lanCommandOption(
-    let SSH_SERVER_PORT;
+        wizardEnv,
-    let UNIX_USER = process.env.NEXT_PUBLIC_UNIX_USER;
+        props.selectedOption.lanCommand
-    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;
-    }
 
     return (
         <div className={classes.container}>

Components/WizardSteps/WizardStep4/WizardStep4.js

@@ -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;
+    const { HOSTNAME, SSH_SERVER_PORT } = lanCommandOption(
-    let SSH_SERVER_PORT;
+        wizardEnv,
-    let UNIX_USER = process.env.NEXT_PUBLIC_UNIX_USER;
+        props.selectedOption.lanCommand
-    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 configBorgmatic = `location:
     # List of source directories to backup.

Containers/SetupWizard/SetupWizard.js

@@ -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}
+                />
+            );
         }
     };
 

helpers/functions/lanCommandOption.js

@@ -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 };
+}