Merge pull request wso2#5406 from wso2/revert-5401-fix_password_icon

Fix password visibility toggle issue
Achintha444 · Feb 1, 2024 · bc4a969 · bc4a969
2 parents a663ec5 + ff1e2fe
commit bc4a969
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 49 deletions.
diff --git a/modules/dynamic-forms/package.json b/modules/dynamic-forms/package.json
@@ -30,7 +30,6 @@
     },
     "dependencies": {
         "@oxygen-ui/react": "^1.8.5",
-        "@oxygen-ui/react-icons": "^1.8.5",
         "@mui/material": "^5.13.0",
         "@wso2is/core": "^2.0.33",
         "@wso2is/validation": "^2.0.3",

diff --git a/modules/dynamic-forms/src/components/adapters.tsx b/modules/dynamic-forms/src/components/adapters.tsx
@@ -16,14 +16,11 @@
  * under the License.
  */
 
-import IconButton from "@mui/material/IconButton";
-import InputAdornment from "@mui/material/InputAdornment";
-import { EyeIcon, EyeSlashIcon } from "@oxygen-ui/react-icons";
 import Button from "@oxygen-ui/react/Button";
 import TextField, { TextFieldProps as OuiTextFieldProps } from "@oxygen-ui/react/TextField";
 import { CopyInputField, DangerButton, LinkButton, PrimaryButton } from "@wso2is/react-components";
 import omit from "lodash-es/omit";
-import React, { ReactElement, useState } from "react";
+import React, { ReactElement } from "react";
 import { FieldProps, FieldRenderProps } from "react-final-form";
 import {
     Checkbox,
@@ -113,7 +110,7 @@ export const PasswordFieldAdapter = (props: FieldRenderProps<OuiTextFieldProps>)
         childFieldProps,
         placeholder,
         fullWidth = true,
-        input: { name, value, onChange, onBlur, type, ...restInput },
+        input: { name, value, onChange, onBlur, ...restInput },
         meta,
         required,
         parentFormProps,
@@ -122,18 +119,13 @@ export const PasswordFieldAdapter = (props: FieldRenderProps<OuiTextFieldProps>)
         label
     } = props;
 
-    const [ isPasswordVisible, setIsPasswordVisible ] = useState<boolean>();
-
-    const handleClickShowPassword = () => {
-        setIsPasswordVisible(!isPasswordVisible);
-    };
-
     const { error, submitError } = meta;
     const isError = showError({ meta });
 
     return (
         <TextField
             variant="outlined"
+            type="password"
             placeholder={ placeholder }
             fullWidth={ fullWidth }
             key={ childFieldProps?.testId }
@@ -157,27 +149,12 @@ export const PasswordFieldAdapter = (props: FieldRenderProps<OuiTextFieldProps>)
                     ? meta?.initial
                     : resolveFieldInitailValue(meta, name, parentFormProps?.values) }
             { ...omit(childFieldProps, [ "value", "listen" ]) }
-            inputProps={ {
-                required,
-                type: isPasswordVisible ? "text" : type,
-                ...restInput } }
+            inputProps={ { required, ...restInput } }
             error={
                 ((meta.error || meta.submitError) && meta.touched)
                     ? meta.error || meta.submitError
                     : null
             }
-            InputProps={ {
-                endAdornment: (
-                    <InputAdornment position="end">
-                        <IconButton
-                            aria-label="Toggle password visibility"
-                            onClick={ handleClickShowPassword }
-                        >
-                            { isPasswordVisible ? <EyeSlashIcon /> : <EyeIcon /> }
-                        </IconButton>
-                    </InputAdornment>
-                )
-            } }
         />
     );
 };

diff --git a/modules/dynamic-forms/src/components/dynamic-form.scss b/modules/dynamic-forms/src/components/dynamic-form.scss
@@ -20,7 +20,6 @@
         .MuiOutlinedInput-root {
             border-radius: 8px;
             font-family: Gilmer;
-            padding-right: 0;
         };
 
         .MuiOutlinedInput-input {

diff --git a/modules/dynamic-forms/src/components/field-input.tsx b/modules/dynamic-forms/src/components/field-input.tsx
@@ -1,10 +1,19 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2023-2024, WSO2 LLC. (https://www.wso2.com).
  *
- * This software is the property of WSO2 LLC. and its suppliers, if any.
- * Dissemination of any information or reproduction of any material contained
- * herein in any form is strictly forbidden, unless permitted by WSO2 expressly.
- * You may not alter or remove any copyright or other notice from copies of this content.
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
  */
 
 import FormGroup from "@oxygen-ui/react/FormGroup";
@@ -13,19 +22,19 @@ import { Hint } from "@wso2is/react-components";
 import { FieldState } from "final-form";
 import React, { ReactElement } from "react";
 import { FieldProps, Field as FinalFormField } from "react-final-form";
-import { 
-    CopyFieldAdapter, 
-    PasswordFieldAdapter, 
-    QueryParamsAdapter, 
-    ScopeFieldAdapter, 
-    TextFieldAdapter 
+import {
+    CopyFieldAdapter,
+    PasswordFieldAdapter,
+    QueryParamsAdapter,
+    ScopeFieldAdapter,
+    TextFieldAdapter
 } from "./adapters";
 import { DynamicFieldInputTypes, FieldInputTypes } from "../models";
 import { getValidation } from "../utils/validate";
 
-export interface FieldInputPropsInterface extends Omit<FieldProps<any, any, any>, "component">, 
+export interface FieldInputPropsInterface extends Omit<FieldProps<any, any, any>, "component">,
     IdentifiableComponentInterface, TestableComponentInterface {
-        
+
     /**
      * Name of the input field.
      */
@@ -107,9 +116,13 @@ export const FieldInput = (props: FieldInputPropsInterface): ReactElement => {
             return (
                 <FinalFormField
                     type="password"
-                    render={ ( { input, meta } ) => (
-                        <PasswordFieldAdapter input={ input } meta={ meta } name={ name } { ...rest } />
-                    ) }
+                    render={ ( { input, meta } ) => {
+                        delete input.type;
+
+                        return (
+                            <PasswordFieldAdapter input={ input } meta={ meta } name={ name } { ...rest } />
+                        );
+                    } }
                     validate={ (value: any, allValues: Record<string, unknown>, meta: FieldState<any>) =>
                         getValidation(value, allValues, meta, props.required, validation)
                     }

diff --git a/modules/dynamic-forms/src/components/utils.tsx b/modules/dynamic-forms/src/components/utils.tsx
@@ -73,7 +73,6 @@ export const renderFormFields = (fields: Record<string, any>): ReactElement => {
             key={ index }
             name={ fieldProps.name }
             label={ fieldProps.label }
-            type={ fieldProps.type }
             inputType={ fieldProps.type }
             { ...fieldProps }
         />

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml