Merge pull request #81 from cybertec-postgresql/73-remove-db-password…

…-column-from-databases-grid [*] remove db password column from databases grid, closes #73
cybertec-postgresql · Dec 29, 2022 · 73e152f · 73e152f
2 parents 4f96913 + 234490b
commit 73e152f
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 53 deletions.
diff --git a/src/webui/package.json b/src/webui/package.json
@@ -34,8 +34,8 @@
     "@types/eslint": "^8.4.5",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
     "@types/react-router-dom": "^5.3.3",
     "eslint": "^8.20.0",
     "eslint-config-prettier": "^8.5.0",

diff --git a/src/webui/src/layout/Dashboard/DbsTable/ModalComponent.tsx b/src/webui/src/layout/Dashboard/DbsTable/ModalComponent.tsx
@@ -1,6 +1,8 @@
 import { Dispatch, SetStateAction, useState } from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import DoneIcon from "@mui/icons-material/Done";
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import {
   Box,
   Button,
@@ -10,6 +12,8 @@ import {
   DialogContent,
   DialogTitle,
   FormControlLabel,
+  IconButton,
+  InputAdornment,
   Stack,
   TextField,
 } from "@mui/material";
@@ -20,7 +24,8 @@ import { Controller, FieldPath, FormProvider, SubmitHandler, useForm, useFormCon
 import {
   AutocompleteComponent,
   AutocompleteConfigComponent,
-  AutocompleteSslModeComponent} from "./SelectComponents";
+  AutocompleteSslModeComponent
+} from "./SelectComponents";
 import { dbTypeOptions, passwordEncryptionOptions, presetConfigsOptions, sslModeOptions } from "./SelectComponentsOptions";
 import { MultilineTextField, SimpleTextField } from "./TextFieldComponents";
 
@@ -127,6 +132,9 @@ const getStepError = (step: StepType, errors: string[]): boolean => {
 const ModalContent = () => {
   const { control, formState: { errors }, getValues, setValue, watch } = useFormContext();
   const [activeStep, setActiveStep] = useState<StepType>(defaultStep);
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+
+  const handleClickShowPassword = () => setShowPassword((show: boolean) => !show);
 
   const handleValidate = (val: string) => !!val.toString().trim();
 
@@ -396,9 +404,19 @@ const ModalContent = () => {
             render={({ field }) => (
               <SimpleTextField
                 field={{ ...field }}
-                type="password"
+                type={showPassword ? "text" : "password"}
                 label="DB password"
                 title="NB! By default password is stored in plain-text in the database"
+                endAdornment={(
+                  <InputAdornment position="end">
+                    <IconButton
+                      onClick={handleClickShowPassword}
+                      edge="end"
+                    >
+                      {showPassword ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                )}
               />
             )}
           />

diff --git a/src/webui/src/layout/Dashboard/DbsTable/PasswordTypographyComponent.tsx b/src/webui/src/layout/Dashboard/DbsTable/PasswordTypographyComponent.tsx
diff --git a/src/webui/src/layout/Dashboard/DbsTable/TextFieldComponents.tsx b/src/webui/src/layout/Dashboard/DbsTable/TextFieldComponents.tsx
@@ -9,10 +9,11 @@ type Params = {
   type: "text" | "password" | "number",
   label: string,
   title?: string,
-  disabled?: boolean
+  disabled?: boolean,
+  endAdornment?: React.ReactNode
 }
 
-export const SimpleTextField = ({ field, error, helperText, type, label, title, disabled }: Params) => {
+export const SimpleTextField = ({ field, error, helperText, type, label, title, disabled, endAdornment }: Params) => {
 
   return (
     <TextField
@@ -24,6 +25,9 @@ export const SimpleTextField = ({ field, error, helperText, type, label, title,
       fullWidth
       title={title}
       disabled={disabled}
+      InputProps={{
+        endAdornment
+      }}
     />
   );
 };

diff --git a/src/webui/src/layout/Dashboard/DbsTable/index.tsx b/src/webui/src/layout/Dashboard/DbsTable/index.tsx
@@ -12,7 +12,6 @@ import {
 import { ActionsComponent } from "./ActionsComponent";
 import { GridToolbarComponent } from "./GridToolbarComponent";
 import { ModalComponent } from "./ModalComponent";
-import { PasswordTypography } from "./PasswordTypographyComponent";
 
 const mockRows = [
   {
@@ -129,16 +128,6 @@ export const DbsTable = () => {
       align: "center",
       headerAlign: "center"
     },
-    {
-      field: "md_password",
-      headerName: "DB password",
-      renderCell: (params: GridRenderCellParams<string>) => (
-        <PasswordTypography value={params.value!} />
-      ),
-      width: 150,
-      align: "center",
-      headerAlign: "center"
-    },
     {
       field: "md_password_type",
       headerName: "Password encryption",

diff --git a/src/webui/yarn.lock b/src/webui/yarn.lock
@@ -2312,13 +2312,20 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@^18.0.0", "@types/react-dom@^18.0.6":
+"@types/react-dom@^18.0.0":
   version "18.0.9"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.9.tgz#ffee5e4bfc2a2f8774b15496474f8e7fe8d0b504"
   integrity sha512-qnVvHxASt/H7i+XG1U1xMiY5t+IHcPGUK7TDMDzom08xa7e86eCeKOiLZezwCKVxJn6NEiiy2ekgX8aQssjIKg==
   dependencies:
     "@types/react" "*"
 
+"@types/react-dom@^18.0.10":
+  version "18.0.10"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.10.tgz#3b66dec56aa0f16a6cc26da9e9ca96c35c0b4352"
+  integrity sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-is@^16.7.1 || ^17.0.0":
   version "17.0.3"
   resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
@@ -2350,7 +2357,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.0.15":
+"@types/react@*":
   version "18.0.25"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.25.tgz#8b1dcd7e56fe7315535a4af25435e0bb55c8ae44"
   integrity sha512-xD6c0KDT4m7n9uD4ZHi02lzskaiqcBxf4zi+tXZY98a04wvc0hi/TcCPC2FOESZi51Nd7tlUeOJY8RofL799/g==
@@ -2359,6 +2366,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^18.0.26":
+  version "18.0.26"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.26.tgz#8ad59fc01fef8eaf5c74f4ea392621749f0b7917"
+  integrity sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"