feat: add toggle password visibility (#113)

* feature: add toggle password visibility

* separate password into standalone component

Author: vatana7

src/renderer/components/PasswordField/index.tsx

@@ -0,0 +1,38 @@
+import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useState } from 'react';
+import TextField, { TextFieldCommonProps } from 'renderer/components/TextField';
+
+export default function PasswordField({
+  label,
+  value,
+  autoFocus,
+  onChange,
+  placeholder,
+  readOnly,
+}: TextFieldCommonProps) {
+  const props = {
+    label,
+    value,
+    autoFocus,
+    onChange,
+    placeholder,
+    readOnly,
+  };
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <TextField
+      type={showPassword ? 'text' : 'password'}
+      actionClick={() => setShowPassword(!showPassword)}
+      actionIcon={
+        showPassword ? (
+          <FontAwesomeIcon icon={faEye} />
+        ) : (
+          <FontAwesomeIcon icon={faEyeSlash} />
+        )
+      }
+      {...props}
+    />
+  );
+}

src/renderer/components/TextField/index.tsx

@@ -1,17 +1,20 @@
 import { ReactElement } from 'react';
 import styles from './styles.module.scss';
 
-interface TextFieldProps {
+export interface TextFieldCommonProps {
+  readOnly?: boolean;
+  onChange?: (value: string) => void;
   label?: string;
   value?: string;
   autoFocus?: boolean;
   placeholder?: string;
+}
+
+interface TextFieldProps extends TextFieldCommonProps {
   multipleLine?: boolean;
   type?: 'text' | 'password';
-  onChange?: (value: string) => void;
   actionIcon?: ReactElement;
   actionClick?: () => void;
-  readOnly?: boolean;
 }
 
 export default function TextField({

src/renderer/screens/HomeScreen/ConnectionConfigEditor/MySQLConnectionEditor.tsx

@@ -4,6 +4,7 @@ import {
 } from 'drivers/SQLLikeConnection';
 import Stack from 'renderer/components/Stack';
 import TextField from 'renderer/components/TextField';
+import PasswordField from 'renderer/components/PasswordField';
 
 export default function MySQLConnectionEditor({
   config,
@@ -31,8 +32,7 @@ export default function MySQLConnectionEditor({
         value={config?.user}
         onChange={(value) => onChange({ ...config, user: value })}
       />
-      <TextField
-        type="password"
+      <PasswordField
         label="Password"
         value={config?.password}
         onChange={(value) => onChange({ ...config, password: value })}