codekingpro/portable-devtools

1/////////////////////////////////////////////////////////////2//3// pgAdmin 4 - PostgreSQL Tools4//5// Copyright (C) 2013 - 2024, The pgAdmin Development Team6// This software is released under the PostgreSQL Licence7//8//////////////////////////////////////////////////////////////9 10import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';11import gettext from 'sources/gettext';12import { Box } from '@mui/material';13import { DefaultButton, PrimaryButton } from '../components/Buttons';14import CloseIcon from '@mui/icons-material/CloseRounded';15import CheckRoundedIcon from '@mui/icons-material/CheckRounded';16import PropTypes from 'prop-types';17import { useModalStyles } from '../helpers/ModalProvider';18import { FormFooterMessage, InputCheckbox, InputText, MESSAGE_TYPE } from '../components/FormComponents';19 20export default function ConnectServerContent({closeModal, data, onOK, setHeight}) {21  const classes = useModalStyles();22  const containerRef = useRef();23  const firstEleRef = useRef();24  const okBtnRef = useRef();25  const [formData, setFormData] = useState({26    tunnel_password: '',27    save_tunnel_password: false,28    password: '',29    save_password: false,30  });31 32  const onTextChange = (e, id) => {33    let val = e;34    if(e?.target) {35      val = e.target.value;36    }37    setFormData((prev)=>({...prev, [id]: val}));38  };39 40  const onKeyDown = (e) => {41    // If enter key is pressed then click on OK button42    if (e.key === 'Enter') {43      okBtnRef.current?.click();44    }45  };46 47 48  useLayoutEffect(()=>{49    firstEleRef.current?.focus();50  }, []);51 52  useEffect(()=>{53    setHeight?.(containerRef.current?.offsetHeight);54  }, [containerRef.current]);55 56  if(!data) {57    return <>No data</>;58  }59 60  return (61    <Box display="flex" flexDirection="column" className={classes.container} ref={containerRef}>62      <Box flexGrow="1" p={2}>63        {data.prompt_tunnel_password && <>64          <Box>65            <span style={{fontWeight: 'bold'}}>66              {data.tunnel_identity_file ?67                gettext('Please enter the SSH Tunnel password for the identity file \'%s\' to connect the server "%s"', data.tunnel_identity_file, data.tunnel_host)68                : gettext('Please enter the SSH Tunnel password for the user \'%s\' to connect the server "%s"', data.tunnel_username, data.tunnel_host)69              }70            </span>71          </Box>72          <Box marginTop='12px'>73            <InputText inputRef={firstEleRef} type="password" value={formData['tunnel_password']} controlProps={{maxLength:null, autoComplete:'new-password'}}74              onChange={(e)=>onTextChange(e, 'tunnel_password')} onKeyDown={(e)=>onKeyDown(e)} />75          </Box>76          <Box marginTop='12px' marginBottom='12px'>77            <InputCheckbox controlProps={{label: gettext('Save Password')}} value={formData['save_tunnel_password']}78              onChange={(e)=>onTextChange(e.target.checked, 'save_tunnel_password')} disabled={!data.allow_save_tunnel_password} />79          </Box>80        </>}81        {data.prompt_password && <>82          <Box>83            <span style={{fontWeight: 'bold'}}>84              {data.username ?85                gettext('Please enter the password for the user \'%s\' to connect the server - "%s"', data.username, data.server_label)86                : gettext('Please enter the password for the user to connect the server - "%s"', data.server_label)87              }88            </span>89          </Box>90          <Box marginTop='12px'>91            <InputText inputRef={(ele)=>{92              if(!data.prompt_tunnel_password) {93                /* Set only if no tunnel password asked */94                firstEleRef.current = ele;95              }96            }} type="password" value={formData['password']} controlProps={{maxLength:null, autoComplete:'new-password'}}97            onChange={(e)=>onTextChange(e, 'password')} onKeyDown={(e)=>onKeyDown(e)}/>98          </Box>99          <Box marginTop='12px'>100            <InputCheckbox controlProps={{label: gettext('Save Password')}} value={formData['save_password']}101              onChange={(e)=>onTextChange(e.target.checked, 'save_password')} disabled={!data.allow_save_password} />102          </Box>103        </>}104        <FormFooterMessage type={MESSAGE_TYPE.ERROR} message={_.escape(data.errmsg)} closable={false} style={{105          position: 'unset', padding: '12px 0px 0px'106        }}/>107      </Box>108      <Box className={classes.footer}>109        <DefaultButton data-test="close" startIcon={<CloseIcon />} onClick={()=>{110          closeModal();111        }} >{gettext('Cancel')}</DefaultButton>112        <PrimaryButton ref={okBtnRef} data-test="save" className={classes.margin} startIcon={<CheckRoundedIcon />} onClick={()=>{113          let postFormData = new FormData();114          if(data.prompt_tunnel_password) {115            postFormData.append('tunnel_password', formData.tunnel_password);116            formData.save_tunnel_password &&117              postFormData.append('save_tunnel_password', formData.save_tunnel_password);118          }119          if(data.prompt_password) {120            postFormData.append('password', formData.password);121            formData.save_password &&122              postFormData.append('save_password', formData.save_password);123          }124          onOK?.(postFormData);125          closeModal();126        }} >{gettext('OK')}</PrimaryButton>127      </Box>128    </Box>129  );130}131 132ConnectServerContent.propTypes = {133  closeModal: PropTypes.func,134  data: PropTypes.object,135  onOK: PropTypes.func,136  setHeight: PropTypes.func137};138