dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-21 11:45:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

encrypting password, key is stored on backend in .key file

Browse Source
This commit is contained in:
Jan Prochazka
2021-01-20 18:29:15 +01:00
parent 6a8a47cf03
commit 777c9a99a2
14 changed files with 155 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
packages/web/src/utility/forms.js
View File

@@ -33,7 +33,7 @@ export function FormCondition({ condition, children }) {
export function FormTextFieldRaw({ name, focused = false, ...other }) {
const { values, setFieldValue } = useForm();
const handleChange = event => {
const handleChange = (event) => {
setFieldValue(name, event.target.value);
};
const textFieldRef = React.useRef(null);
@@ -44,6 +44,35 @@ export function FormTextFieldRaw({ name, focused = false, ...other }) {
return <TextField {...other} value={values[name]} onChange={handleChange} editorRef={textFieldRef} />;
}
export function FormPasswordFieldRaw({ name, focused = false, ...other }) {
const { values, setFieldValue } = useForm();
const [showPassword, setShowPassword] = React.useState(false);
const handleChange = (event) => {
setFieldValue(name, event.target.value);
};
const textFieldRef = React.useRef(null);
React.useEffect(() => {
if (textFieldRef.current && focused) textFieldRef.current.focus();
}, [textFieldRef.current, focused]);
const value = values[name];
const isCrypted = value && value.startsWith('crypt:');
return (
<>
<TextField
{...other}
value={isCrypted ? '' : value}
onChange={handleChange}
editorRef={textFieldRef}
placeholder={isCrypted ? '(Password is encrypted)' : undefined}
type={isCrypted || showPassword ? 'text' : 'password'}
/>
{!isCrypted && <FontIcon icon="icon eye" onClick={() => setShowPassword((x) => !x)} />}
</>
);
}
export function FormTextField({ name, label, focused = false, ...other }) {
const FieldTemplate = useFormFieldTemplate();
return (
@@ -55,18 +84,16 @@ export function FormTextField({ name, label, focused = false, ...other }) {
export function FormPasswordField({ name, label, focused = false, ...other }) {
const FieldTemplate = useFormFieldTemplate();
const [showPassword, setShowPassword] = React.useState(false);
return (
<FieldTemplate label={label} type="text">
<FormTextFieldRaw name={name} focused={focused} type={showPassword ? 'text' : 'password'} {...other} />
<FontIcon icon="icon eye" onClick={() => setShowPassword(x => !x)} />
<FormPasswordFieldRaw name={name} focused={focused} {...other} />
</FieldTemplate>
);
}
export function FormCheckboxFieldRaw({ name = undefined, defaultValue = undefined, ...other }) {
const { values, setFieldValue } = useForm();
const handleChange = event => {
const handleChange = (event) => {
setFieldValue(name, event.target.checked);
};
let isChecked = values[name];
@@ -86,7 +113,7 @@ export function FormCheckboxField({ label, ...other }) {
export function FormSelectFieldRaw({ children, name, ...other }) {
const { values, setFieldValue } = useForm();
const handleChange = event => {
const handleChange = (event) => {
setFieldValue(name, event.target.value);
};
return (
@@ -142,7 +169,7 @@ export function FormReactSelect({ options, name, isMulti = false, Component = Se
return (
<Component
theme={t => ({
theme={(t) => ({
...t,
colors: {
...t.colors,
@@ -167,10 +194,12 @@ export function FormReactSelect({ options, name, isMulti = false, Component = Se
options={options}
value={
isMulti
? options.filter(x => values[name] && values[name].includes(x.value))
: options.find(x => x.value == values[name])
? options.filter((x) => values[name] && values[name].includes(x.value))
: options.find((x) => x.value == values[name])
}
onChange={(item) =>
setFieldValue(name, isMulti ? getAsArray(item).map((x) => x.value) : item ? item.value : null)
}
onChange={item => setFieldValue(name, isMulti ? getAsArray(item).map(x => x.value) : item ? item.value : null)}
menuPortalTarget={document.body}
isMulti={isMulti}
closeMenuOnSelect={!isMulti}
@@ -183,7 +212,7 @@ export function FormConnectionSelect({ name }) {
const connections = useConnectionList();
const connectionOptions = React.useMemo(
() =>
(connections || []).map(conn => ({
(connections || []).map((conn) => ({
value: conn._id,
label: conn.displayName || conn.server,
})),
@@ -199,7 +228,7 @@ export function FormDatabaseSelect({ conidName, name }) {
const databases = useDatabaseList({ conid: values[conidName] });
const databaseOptions = React.useMemo(
() =>
(databases || []).map(db => ({
(databases || []).map((db) => ({
value: db.name,
label: db.name,
})),
@@ -215,7 +244,7 @@ export function FormSchemaSelect({ conidName, databaseName, name }) {
const dbinfo = useDatabaseInfo({ conid: values[conidName], database: values[databaseName] });
const schemaOptions = React.useMemo(
() =>
((dbinfo && dbinfo.schemas) || []).map(schema => ({
((dbinfo && dbinfo.schemas) || []).map((schema) => ({
value: schema.schemaName,
label: schema.schemaName,
})),
@@ -232,8 +261,8 @@ export function FormTablesSelect({ conidName, databaseName, schemaName, name })
const tablesOptions = React.useMemo(
() =>
[...((dbinfo && dbinfo.tables) || []), ...((dbinfo && dbinfo.views) || [])]
.filter(x => !values[schemaName] || x.schemaName == values[schemaName])
.map(x => ({
.filter((x) => !values[schemaName] || x.schemaName == values[schemaName])
.map((x) => ({
value: x.pureName,
label: x.pureName,
})),
@@ -249,7 +278,7 @@ export function FormArchiveFilesSelect({ folderName, name }) {
const files = useArchiveFiles({ folder: folderName });
const filesOptions = React.useMemo(
() =>
(files || []).map(x => ({
(files || []).map((x) => ({
value: x.name,
label: x.name,
})),
@@ -265,13 +294,13 @@ export function FormArchiveFolderSelect({ name, additionalFolders = [], ...other
const folders = useArchiveFolders();
const folderOptions = React.useMemo(
() => [
...(folders || []).map(folder => ({
...(folders || []).map((folder) => ({
value: folder.name,
label: folder.name,
})),
...additionalFolders
.filter(x => !(folders || []).find(y => y.name == x))
.map(folder => ({
.filter((x) => !(folders || []).find((y) => y.name == x))
.map((folder) => ({
value: folder,
label: folder,
})),
@@ -279,7 +308,7 @@ export function FormArchiveFolderSelect({ name, additionalFolders = [], ...other
[folders]
);
const handleCreateOption = folder => {
const handleCreateOption = (folder) => {
axios.post('archive/create-folder', { folder });
setFieldValue(name, folder);
};