cisco-vpn-rdp-connecter/dist/components/SetupCredentials.js

Connect to Cisco AnyConnect VPN and open a Microsoft Remote Desktop (RDP) window

import { Text, Box, useStdin, useInput, } from 'ink';
import React, { useState, useEffect } from 'react';
import SelectInput from 'ink-select-input';
import { getAllCiscoVpnGroups } from '../index.js';
import SuccessMessage from './SuccessMessage.js';
import TextAndInputBox from './TextAndInputBox.js';
import LoadingMessage from './LoadingMessage.js';
const STEPS = {
    VPN_SERVER: 0,
    GROUP: 1,
    USERNAME: 2,
    PASSWORD: 3,
    ONLY_VPN: 4,
    RDP_SERVER: 5,
};
const yesNoOptions = [
    {
        label: 'No',
        value: 'no',
    },
    {
        label: 'Yes',
        value: 'yes',
    },
];
const isMacOs = process.platform === 'darwin';
export default function SetupCredentials({ onComplete, defaultCredentials }) {
    const [vpnServer, setVpnServer] = useState('');
    const [group, setGroup] = useState({ label: '', value: '' });
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [rdpServer, setRdpServer] = useState(defaultCredentials?.rdp.server || '');
    const [onlyVpn, setOnlyVpn] = useState(false);
    const [step, setStep] = useState(STEPS.VPN_SERVER);
    const [vpnGroups, setVpnGroups] = useState([]);
    const { setRawMode } = useStdin();
    const [isRetrievingVpnGroups, setIsRetrievingVpnGroups] = useState(false);
    useEffect(() => {
        if (step <= STEPS.RDP_SERVER)
            return;
        onComplete({
            vpn: {
                server: vpnServer,
                group: group.value,
                groupName: group.label,
                username,
                password,
            },
            rdp: {
                server: rdpServer,
            },
            onlyVpn,
        });
    }, [step]);
    const goToNextStep = () => {
        setStep(step + 1);
        /*
        TODO: without this it moves the input down a line after the `SelectInput` field.
        It also requires another `enter` keypress to continue.
        Remove this when fixed.
        */
        setRawMode(true);
    };
    const goToPreviousStep = () => {
        setStep(step - 1);
    };
    useInput((_input, key) => {
        const hasPressedBackspace = key.backspace || (isMacOs && key.delete);
        const canGoBack = step > STEPS.VPN_SERVER;
        if (hasPressedBackspace && canGoBack) {
            goToPreviousStep();
        }
    });
    const onServerSet = async (inputServer) => {
        setVpnServer(inputServer);
        // Show loader when fetching Cisco groups
        setIsRetrievingVpnGroups(true);
        const fetchedCiscoGroups = await getAllCiscoVpnGroups(inputServer);
        const ciscoGroups = fetchedCiscoGroups.map(vpnGroup => ({
            value: vpnGroup.number,
            label: vpnGroup.name,
        }));
        setVpnGroups(ciscoGroups);
        setIsRetrievingVpnGroups(false);
        goToNextStep();
    };
    const handleGroupSet = (inputGroup) => {
        setGroup(inputGroup);
        goToNextStep();
    };
    const onUsernameSet = (inputUsername) => {
        setUsername(inputUsername);
        goToNextStep();
    };
    const onPasswordSet = (inputPassword) => {
        setPassword(inputPassword);
        goToNextStep();
    };
    const handleOnlyVpnSet = (inputOnlyVpn) => {
        setOnlyVpn(inputOnlyVpn.value === 'yes');
        // If user only wants VPN, skip RDP server step
        if (inputOnlyVpn.value === 'yes') {
            setStep(step + 2);
            return;
        }
        goToNextStep();
    };
    const onRdpServerSet = (inputRdpServer) => {
        setRdpServer(inputRdpServer);
        goToNextStep();
    };
    // If all steps are completed show "completed" message
    if (step > STEPS.RDP_SERVER) {
        return React.createElement(SuccessMessage, { message: "Setup completed" });
    }
    return (React.createElement(React.Fragment, null,
        step >= STEPS.VPN_SERVER && (React.createElement(React.Fragment, null,
            React.createElement(TextAndInputBox, { text: "VPN server", defaultText: defaultCredentials?.vpn.server, onSubmit: onServerSet, newCompletionState: step >= STEPS.GROUP }),
            isRetrievingVpnGroups && (React.createElement(LoadingMessage, { isCompleted: false, loadingMessage: "Retrieving VPN groups for given server", loadedMessage: "" })))),
        step >= STEPS.GROUP && (step === STEPS.GROUP ? (React.createElement(Box, null,
            React.createElement(Text, null, "Group: "),
            React.createElement(SelectInput, { items: vpnGroups, initialIndex: Math.min(Number(defaultCredentials?.vpn.group), vpnGroups.length - 1), onSelect: handleGroupSet }))) : (React.createElement(Text, null, `Group: ${group.label}`))),
        step >= STEPS.USERNAME && (React.createElement(TextAndInputBox, { text: "Username", defaultText: defaultCredentials?.vpn.username, onSubmit: onUsernameSet, newCompletionState: step >= STEPS.PASSWORD })),
        step >= STEPS.PASSWORD && (React.createElement(TextAndInputBox, { text: "Password", defaultText: defaultCredentials?.vpn.password, onSubmit: onPasswordSet, mask: "*", newCompletionState: step >= STEPS.RDP_SERVER })),
        step >= STEPS.ONLY_VPN && (React.createElement(Box, null,
            React.createElement(Text, null, "Only connect to VPN: "),
            React.createElement(SelectInput, { items: yesNoOptions, initialIndex: defaultCredentials?.onlyVpn === true ? 1 : 0, onSelect: handleOnlyVpnSet }))),
        step >= STEPS.RDP_SERVER && (React.createElement(TextAndInputBox, { text: "RDP server", defaultText: defaultCredentials?.rdp.server, onSubmit: onRdpServerSet, newCompletionState: step >= STEPS.ONLY_VPN }))));
}