diff --git a/src/modals/AddHostModal.jsx b/src/modals/AddHostModal.jsx index d0110386..ed21a4b7 100644 --- a/src/modals/AddHostModal.jsx +++ b/src/modals/AddHostModal.jsx @@ -24,7 +24,20 @@ import { useState } from 'react'; import Visibility from '@mui/icons-material/Visibility'; import VisibilityOff from '@mui/icons-material/VisibilityOff'; -const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidden }) => { +const AddHostModal = ({ isHidden, setIsAddHostHidden, handleAddHost }) => { + const [form, setForm] = useState({ + name: '', + folder: '', + ip: '', + user: '', + port: 22, + password: '', + privateKey: '', + keyType: '', + passphrase: '', + authMethod: 'Select Auth', + rememberHost: true + }); const [showPassword, setShowPassword] = useState(false); const [showPassphrase, setShowPassphrase] = useState(false); const [activeTab, setActiveTab] = useState(0); @@ -62,12 +75,12 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd keyType = 'DSA'; } - setForm({ - ...form, + setForm(prev => ({ + ...prev, privateKey: keyContent, keyType: keyType, authMethod: 'key' - }); + })); }; reader.readAsText(file); } else { @@ -348,7 +361,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd )} - {form.authMethod === 'key' && ( + {form.authMethod === 'key' && form.rememberHost && ( SSH Key @@ -363,7 +376,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd alignItems: 'center', height: '40px', '&:hover': { - backgroundColor: theme.palette.general.disabled, + backgroundColor: 'rgba(0, 0, 0, 0.3)', }, }} > @@ -378,16 +391,27 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd {form.privateKey && ( Key Passphrase (optional) - setForm(prev => ({ ...prev, passphrase: e.target.value }))} - endDecorator={ - setShowPassphrase(!showPassphrase)}> - {showPassphrase ? : } - - } - /> +
+ setForm(prev => ({ ...prev, passphrase: e.target.value }))} + sx={{ + backgroundColor: theme.palette.general.primary, + color: theme.palette.text.primary, + flex: 1 + }} + /> + setShowPassphrase(!showPassphrase)} + sx={{ + color: theme.palette.text.primary, + marginLeft: 1 + }} + > + {showPassphrase ? : } + +
)}
@@ -428,22 +452,8 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd AddHostModal.propTypes = { isHidden: PropTypes.bool.isRequired, - form: PropTypes.shape({ - name: PropTypes.string, - folder: PropTypes.string, - ip: PropTypes.string.isRequired, - user: PropTypes.string.isRequired, - password: PropTypes.string, - privateKey: PropTypes.string, - keyType: PropTypes.string, - port: PropTypes.number.isRequired, - authMethod: PropTypes.string.isRequired, - rememberHost: PropTypes.bool, - storePassword: PropTypes.bool, - }).isRequired, - setForm: PropTypes.func.isRequired, - handleAddHost: PropTypes.func.isRequired, setIsAddHostHidden: PropTypes.func.isRequired, + handleAddHost: PropTypes.func.isRequired, }; export default AddHostModal; \ No newline at end of file diff --git a/src/modals/EditHostModal.jsx b/src/modals/EditHostModal.jsx index 623b0529..80da2c2b 100644 --- a/src/modals/EditHostModal.jsx +++ b/src/modals/EditHostModal.jsx @@ -24,11 +24,24 @@ import theme from '/src/theme'; import Visibility from '@mui/icons-material/Visibility'; import VisibilityOff from '@mui/icons-material/VisibilityOff'; -const EditHostModal = ({ isHidden, form, setForm, handleEditHost, setIsEditHostHidden, hostConfig }) => { +const EditHostModal = ({ isHidden, hostConfig, setIsEditHostHidden, handleEditHost }) => { + const [form, setForm] = useState({ + name: hostConfig?.name || '', + folder: hostConfig?.folder || '', + ip: hostConfig?.ip || '', + user: hostConfig?.user || '', + port: hostConfig?.port || '', + password: '', + privateKey: hostConfig?.privateKey || '', + keyType: hostConfig?.keyType || '', + passphrase: '', + authMethod: hostConfig?.authMethod || 'Select Auth', + storePassword: true + }); const [showPassword, setShowPassword] = useState(false); + const [showPassphrase, setShowPassphrase] = useState(false); const [activeTab, setActiveTab] = useState(0); const [isLoading, setIsLoading] = useState(false); - const [showPassphrase, setShowPassphrase] = useState(false); useEffect(() => { if (!isHidden && hostConfig) { @@ -314,7 +327,6 @@ const EditHostModal = ({ isHidden, form, setForm, handleEditHost, setIsEditHostH > - @@ -403,7 +415,7 @@ const EditHostModal = ({ isHidden, form, setForm, handleEditHost, setIsEditHostH alignItems: 'center', height: '40px', '&:hover': { - backgroundColor: theme.palette.general.disabled, + backgroundColor: 'rgba(0, 0, 0, 0.3)', }, }} > @@ -431,16 +443,27 @@ const EditHostModal = ({ isHidden, form, setForm, handleEditHost, setIsEditHostH {form.privateKey && ( Key Passphrase (optional) - setForm(prev => ({ ...prev, passphrase: e.target.value }))} - endDecorator={ - setShowPassphrase(!showPassphrase)}> - {showPassphrase ? : } - - } - /> +
+ setForm(prev => ({ ...prev, passphrase: e.target.value }))} + sx={{ + backgroundColor: theme.palette.general.primary, + color: theme.palette.text.primary, + flex: 1 + }} + /> + setShowPassphrase(!showPassphrase)} + sx={{ + color: theme.palette.text.primary, + marginLeft: 1 + }} + > + {showPassphrase ? : } + +
)} @@ -479,11 +502,9 @@ const EditHostModal = ({ isHidden, form, setForm, handleEditHost, setIsEditHostH EditHostModal.propTypes = { isHidden: PropTypes.bool.isRequired, - form: PropTypes.object.isRequired, - setForm: PropTypes.func.isRequired, - handleEditHost: PropTypes.func.isRequired, + hostConfig: PropTypes.object.isRequired, setIsEditHostHidden: PropTypes.func.isRequired, - hostConfig: PropTypes.object + handleEditHost: PropTypes.func.isRequired }; export default EditHostModal; \ No newline at end of file