From a098f99c2d13d82037d45300f7a8c48b4fb7c4dd Mon Sep 17 00:00:00 2001
From: Simon <simon.davis.dev@gmail.com>
Date: Mon, 1 Jul 2024 20:24:17 -0400
Subject: [PATCH] PasswordField Initial Functionality completed

---
 .../PasswordField/PasswordField.tsx           | 23 +++++++++++--------
 src/components/index.ts                       |  1 +
 2 files changed, 15 insertions(+), 9 deletions(-)
 create mode 100644 src/components/index.ts

diff --git a/src/components/PasswordField/PasswordField.tsx b/src/components/PasswordField/PasswordField.tsx
index ac8fae9..3ca9331 100644
--- a/src/components/PasswordField/PasswordField.tsx
+++ b/src/components/PasswordField/PasswordField.tsx
@@ -1,4 +1,4 @@
-import { TextField, styled } from "@mui/material";
+import { InputAdornment, TextField, TextFieldProps, styled } from "@mui/material";
 import { useState } from 'react'
 
 export const CustomInput = styled(TextField)({
@@ -41,7 +41,7 @@ export const CustomInput = styled(TextField)({
 });
 
 
-export const PasswordField = ({ ...props }) => {
+export const PasswordField: React.FunctionComponent<TextFieldProps> = ({ ...props }) => {
     const [canViewPassword, setCanViewPassword] = useState(false);
     return (
         <div style={{
@@ -50,15 +50,20 @@ export const PasswordField = ({ ...props }) => {
             <CustomInput
                 type={canViewPassword ? 'text' : 'password'}
                 id="standard-adornment-password"
+                InputProps={{
+                    endAdornment: (
+                        <InputAdornment position="end" style={{
+                            cursor: 'pointer'
+                        }} onClick={() => {
+                            setCanViewPassword((prevState) => !prevState)
+                        }}>
+                            {canViewPassword ? '🙀' : '😸'}
+                        </InputAdornment>
+                    )
+                }}
                 {...props}
             />
-            <button type='button' style={{
-                position: 'absolute',
-                right: 0,
-                top: '50%'
-            }} onClick={() => {
-                setCanViewPassword((prevState) => !prevState)
-            }}>{canViewPassword ? '🙀' : '😸'}</button>
+
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..1d947d7
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1 @@
+export * from './PasswordField/PasswordField';
\ No newline at end of file