dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

Improved UI for the ssh key.

Browse Source
This commit is contained in:
Karmaa
2025-03-16 19:45:12 -05:00
parent ce1ae3fb83
commit ea86bdc513
2 changed files with 80 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/modals/AddHostModal.jsx
View File

@@ -24,7 +24,20 @@ import { useState } from 'react';
import Visibility from '@mui/icons-material/Visibility'; import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff'; 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 [showPassword, setShowPassword] = useState(false);
const [showPassphrase, setShowPassphrase] = useState(false); const [showPassphrase, setShowPassphrase] = useState(false);
const [activeTab, setActiveTab] = useState(0); const [activeTab, setActiveTab] = useState(0);
@@ -62,12 +75,12 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
keyType = 'DSA'; keyType = 'DSA';
} }
setForm({ setForm(prev => ({
...form, ...prev,
privateKey: keyContent, privateKey: keyContent,
keyType: keyType, keyType: keyType,
authMethod: 'key' authMethod: 'key'
}); }));
}; };
reader.readAsText(file); reader.readAsText(file);
} else { } else {
@@ -348,7 +361,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
</FormControl> </FormControl>
)} )}
{form.authMethod === 'key' && ( {form.authMethod === 'key' && form.rememberHost && (
<Stack spacing={2}> <Stack spacing={2}>
<FormControl error={!form.privateKey}> <FormControl error={!form.privateKey}>
<FormLabel>SSH Key</FormLabel> <FormLabel>SSH Key</FormLabel>
@@ -363,7 +376,7 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
alignItems: 'center', alignItems: 'center',
height: '40px', height: '40px',
'&:hover': { '&: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 && ( {form.privateKey && (
<FormControl> <FormControl>
<FormLabel>Key Passphrase (optional)</FormLabel> <FormLabel>Key Passphrase (optional)</FormLabel>
<Input <div style={{ display: 'flex', alignItems: 'center' }}>
type={showPassphrase ? "text" : "password"} <Input
value={form.passphrase || ''} type={showPassphrase ? "text" : "password"}
onChange={(e) => setForm(prev => ({ ...prev, passphrase: e.target.value }))} value={form.passphrase || ''}
endDecorator={ onChange={(e) => setForm(prev => ({ ...prev, passphrase: e.target.value }))}
<IconButton onClick={() => setShowPassphrase(!showPassphrase)}> sx={{
{showPassphrase ? <VisibilityOff /> : <Visibility />} backgroundColor: theme.palette.general.primary,
</IconButton> 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> </FormControl>
)} )}
</Stack> </Stack>
@@ -428,22 +452,8 @@ const AddHostModal = ({ isHidden, form, setForm, handleAddHost, setIsAddHostHidd
AddHostModal.propTypes = { AddHostModal.propTypes = {
isHidden: PropTypes.bool.isRequired, 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, setIsAddHostHidden: PropTypes.func.isRequired,
handleAddHost: PropTypes.func.isRequired,
}; };
export default AddHostModal; export default AddHostModal;

57
src/modals/EditHostModal.jsx
View File

@@ -24,11 +24,24 @@ import theme from '/src/theme';
import Visibility from '@mui/icons-material/Visibility'; import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff'; 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 [showPassword, setShowPassword] = useState(false);
const [showPassphrase, setShowPassphrase] = useState(false);
const [activeTab, setActiveTab] = useState(0); const [activeTab, setActiveTab] = useState(0);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [showPassphrase, setShowPassphrase] = useState(false);
useEffect(() => { useEffect(() => {
if (!isHidden && hostConfig) { if (!isHidden && hostConfig) {
@@ -314,7 +327,6 @@ const EditHostModal = ({ isHidden, form, setForm, handleEditHost, setIsEditHostH
> >
<Option value="Select Auth" disabled>Select Auth</Option> <Option value="Select Auth" disabled>Select Auth</Option>
<Option value="password">Password</Option> <Option value="password">Password</Option>
<Option value="rsaKey">Public Key</Option>
<Option value="key">SSH Key</Option> <Option value="key">SSH Key</Option>
</Select> </Select>
</FormControl> </FormControl>
@@ -403,7 +415,7 @@ const EditHostModal = ({ isHidden, form, setForm, handleEditHost, setIsEditHostH
alignItems: 'center', alignItems: 'center',
height: '40px', height: '40px',
'&:hover': { '&: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 && ( {form.privateKey && (
<FormControl> <FormControl>
<FormLabel>Key Passphrase (optional)</FormLabel> <FormLabel>Key Passphrase (optional)</FormLabel>
<Input <div style={{ display: 'flex', alignItems: 'center' }}>
type={showPassphrase ? "text" : "password"} <Input
value={form.passphrase || ''} type={showPassphrase ? "text" : "password"}
onChange={(e) => setForm(prev => ({ ...prev, passphrase: e.target.value }))} value={form.passphrase || ''}
endDecorator={ onChange={(e) => setForm(prev => ({ ...prev, passphrase: e.target.value }))}
<IconButton onClick={() => setShowPassphrase(!showPassphrase)}> sx={{
{showPassphrase ? <VisibilityOff /> : <Visibility />} backgroundColor: theme.palette.general.primary,
</IconButton> 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> </FormControl>
)} )}
</Stack> </Stack>
@@ -479,11 +502,9 @@ const EditHostModal = ({ isHidden, form, setForm, handleEditHost, setIsEditHostH
EditHostModal.propTypes = { EditHostModal.propTypes = {
isHidden: PropTypes.bool.isRequired, isHidden: PropTypes.bool.isRequired,
form: PropTypes.object.isRequired, hostConfig: PropTypes.object.isRequired,
setForm: PropTypes.func.isRequired,
handleEditHost: PropTypes.func.isRequired,
setIsEditHostHidden: PropTypes.func.isRequired, setIsEditHostHidden: PropTypes.func.isRequired,
hostConfig: PropTypes.object handleEditHost: PropTypes.func.isRequired
}; };
export default EditHostModal; export default EditHostModal;