Improved UI for the ssh key.
This commit is contained in:
Karmaa
@@ -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
|
||||
</FormControl>
|
||||
)}
|
||||
|
||||
{form.authMethod === 'key' && (
|
||||
{form.authMethod === 'key' && form.rememberHost && (
|
||||
<Stack spacing={2}>
|
||||
<FormControl error={!form.privateKey}>
|
||||
<FormLabel>SSH Key</FormLabel>
|
||||
@@ -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 && (
|
||||
<FormControl>
|
||||
<FormLabel>Key Passphrase (optional)</FormLabel>
|
||||
<Input
|
||||
type={showPassphrase ? "text" : "password"}
|
||||
value={form.passphrase || ''}
|
||||
onChange={(e) => setForm(prev => ({ ...prev, passphrase: e.target.value }))}
|
||||
endDecorator={
|
||||
<IconButton onClick={() => setShowPassphrase(!showPassphrase)}>
|
||||
{showPassphrase ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
}
|
||||
/>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Input
|
||||
type={showPassphrase ? "text" : "password"}
|
||||
value={form.passphrase || ''}
|
||||
onChange={(e) => setForm(prev => ({ ...prev, passphrase: e.target.value }))}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.general.primary,
|
||||
color: theme.palette.text.primary,
|
||||
flex: 1
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
onClick={() => setShowPassphrase(!showPassphrase)}
|
||||
sx={{
|
||||
color: theme.palette.text.primary,
|
||||
marginLeft: 1
|
||||
}}
|
||||
>
|
||||
{showPassphrase ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</div>
|
||||
</FormControl>
|
||||
)}
|
||||
</Stack>
|
||||
@@ -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;
|
||||
@@ -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
|
||||
>
|
||||
<Option value="Select Auth" disabled>Select Auth</Option>
|
||||
<Option value="password">Password</Option>
|
||||
<Option value="rsaKey">Public Key</Option>
|
||||
<Option value="key">SSH Key</Option>
|
||||
</Select>
|
||||
</FormControl>
|
||||
@@ -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 && (
|
||||
<FormControl>
|
||||
<FormLabel>Key Passphrase (optional)</FormLabel>
|
||||
<Input
|
||||
type={showPassphrase ? "text" : "password"}
|
||||
value={form.passphrase || ''}
|
||||
onChange={(e) => setForm(prev => ({ ...prev, passphrase: e.target.value }))}
|
||||
endDecorator={
|
||||
<IconButton onClick={() => setShowPassphrase(!showPassphrase)}>
|
||||
{showPassphrase ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
}
|
||||
/>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Input
|
||||
type={showPassphrase ? "text" : "password"}
|
||||
value={form.passphrase || ''}
|
||||
onChange={(e) => setForm(prev => ({ ...prev, passphrase: e.target.value }))}
|
||||
sx={{
|
||||
backgroundColor: theme.palette.general.primary,
|
||||
color: theme.palette.text.primary,
|
||||
flex: 1
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
onClick={() => setShowPassphrase(!showPassphrase)}
|
||||
sx={{
|
||||
color: theme.palette.text.primary,
|
||||
marginLeft: 1
|
||||
}}
|
||||
>
|
||||
{showPassphrase ? <VisibilityOff /> : <Visibility />}
|
||||
</IconButton>
|
||||
</div>
|
||||
</FormControl>
|
||||
)}
|
||||
</Stack>
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user