From 8232067802281ee39a60541695e7426f711f8b8a Mon Sep 17 00:00:00 2001
From: "vatana.sambath" <sambath.vatana19@kit.edu.kh>
Date: Thu, 17 Aug 2023 22:39:44 +0700
Subject: [PATCH 1/2] feature: add toggle password visibility

---
 .../MySQLConnectionEditor.tsx                 | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/renderer/screens/HomeScreen/ConnectionConfigEditor/MySQLConnectionEditor.tsx b/src/renderer/screens/HomeScreen/ConnectionConfigEditor/MySQLConnectionEditor.tsx
index 7027b85..62a5860 100644
--- a/src/renderer/screens/HomeScreen/ConnectionConfigEditor/MySQLConnectionEditor.tsx
+++ b/src/renderer/screens/HomeScreen/ConnectionConfigEditor/MySQLConnectionEditor.tsx
@@ -4,6 +4,13 @@ import {
 } from 'drivers/SQLLikeConnection';
 import Stack from 'renderer/components/Stack';
 import TextField from 'renderer/components/TextField';
+import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useState } from 'react';
+
+interface MySqlConnectionEditorState {
+  showPassword: boolean;
+}
 
 export default function MySQLConnectionEditor({
   config,
@@ -12,6 +19,11 @@ export default function MySQLConnectionEditor({
   config: MySqlConnectionConfig;
   onChange: (value: ConnectionStoreConfig) => void;
 }) {
+  //Using generic states for future configurations on this component
+  const [state, setState] = useState<MySqlConnectionEditorState>({
+    showPassword: false,
+  });
+
   return (
     <Stack vertical>
       <TextField
@@ -32,10 +44,16 @@ export default function MySQLConnectionEditor({
         onChange={(value) => onChange({ ...config, user: value })}
       />
       <TextField
-        type="password"
+        type={state.showPassword ? 'text' : 'password'}
         label="Password"
         value={config?.password}
         onChange={(value) => onChange({ ...config, password: value })}
+        actionIcon={
+          <FontAwesomeIcon icon={state.showPassword ? faEye : faEyeSlash} />
+        }
+        actionClick={() =>
+          setState({ ...state, showPassword: !state.showPassword })
+        }
       />
       <TextField
         label="Database"

From ff00f235344292566c2cf0005b6cfb89653f66b5 Mon Sep 17 00:00:00 2001
From: "vatana.sambath" <sambath.vatana19@kit.edu.kh>
Date: Fri, 18 Aug 2023 00:05:15 +0700
Subject: [PATCH 2/2] separate password into standalone component

---
 .../components/PasswordField/index.tsx        | 38 +++++++++++++++++++
 src/renderer/components/TextField/index.tsx   |  9 +++--
 .../MySQLConnectionEditor.tsx                 | 22 +----------
 3 files changed, 46 insertions(+), 23 deletions(-)
 create mode 100644 src/renderer/components/PasswordField/index.tsx

diff --git a/src/renderer/components/PasswordField/index.tsx b/src/renderer/components/PasswordField/index.tsx
new file mode 100644
index 0000000..8b8255c
--- /dev/null
+++ b/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}
+    />
+  );
+}
diff --git a/src/renderer/components/TextField/index.tsx b/src/renderer/components/TextField/index.tsx
index e5bcf2c..9b57a67 100644
--- a/src/renderer/components/TextField/index.tsx
+++ b/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({
diff --git a/src/renderer/screens/HomeScreen/ConnectionConfigEditor/MySQLConnectionEditor.tsx b/src/renderer/screens/HomeScreen/ConnectionConfigEditor/MySQLConnectionEditor.tsx
index 62a5860..f85c654 100644
--- a/src/renderer/screens/HomeScreen/ConnectionConfigEditor/MySQLConnectionEditor.tsx
+++ b/src/renderer/screens/HomeScreen/ConnectionConfigEditor/MySQLConnectionEditor.tsx
@@ -4,13 +4,7 @@ import {
 } from 'drivers/SQLLikeConnection';
 import Stack from 'renderer/components/Stack';
 import TextField from 'renderer/components/TextField';
-import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useState } from 'react';
-
-interface MySqlConnectionEditorState {
-  showPassword: boolean;
-}
+import PasswordField from 'renderer/components/PasswordField';
 
 export default function MySQLConnectionEditor({
   config,
@@ -19,11 +13,6 @@ export default function MySQLConnectionEditor({
   config: MySqlConnectionConfig;
   onChange: (value: ConnectionStoreConfig) => void;
 }) {
-  //Using generic states for future configurations on this component
-  const [state, setState] = useState<MySqlConnectionEditorState>({
-    showPassword: false,
-  });
-
   return (
     <Stack vertical>
       <TextField
@@ -43,17 +32,10 @@ export default function MySQLConnectionEditor({
         value={config?.user}
         onChange={(value) => onChange({ ...config, user: value })}
       />
-      <TextField
-        type={state.showPassword ? 'text' : 'password'}
+      <PasswordField
         label="Password"
         value={config?.password}
         onChange={(value) => onChange({ ...config, password: value })}
-        actionIcon={
-          <FontAwesomeIcon icon={state.showPassword ? faEye : faEyeSlash} />
-        }
-        actionClick={() =>
-          setState({ ...state, showPassword: !state.showPassword })
-        }
       />
       <TextField
         label="Database"