jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fixed password on inputComponent

Browse source
This commit is contained in:
Lucas Oliveira 2024-05-06 18:52:36 +01:00
commit 2f56f3a952
1 changed files with 59 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/frontend/src/components/inputComponent/index.tsx
View file

@ -76,7 +76,7 @@ export default function InputComponent({
editNode ? " input-edit-node " : "", editNode ? " input-edit-node " : "",
password && editNode ? "pr-8" : "", password && editNode ? "pr-8" : "",
password && !editNode ? "pr-10" : "", password && !editNode ? "pr-10" : "",
className! className!,
)} )}
placeholder={password && editNode ? "Key" : placeholder} placeholder={password && editNode ? "Key" : placeholder}
onChange={(e) => { onChange={(e) => {
@ -120,7 +120,7 @@ export default function InputComponent({
required={required} required={required}
className={classNames( className={classNames(
password && password &&
selectedOption === "" && (!setSelectedOption || selectedOption === "") &&
!pwdVisible && !pwdVisible &&
value !== "" value !== ""
? " text-clip password " ? " text-clip password "
@ -134,7 +134,7 @@ export default function InputComponent({
? "pr-8" ? "pr-8"
: "", : "",
className! className!,
)} )}
placeholder={password && editNode ? "Key" : placeholder} placeholder={password && editNode ? "Key" : placeholder}
onChange={(e) => { onChange={(e) => {
@ -194,15 +194,15 @@ export default function InputComponent({
setSelectedOption( setSelectedOption(
currentValue === selectedOption currentValue === selectedOption
? "" ? ""
: currentValue : currentValue,
); );
setSelectedOptions && setSelectedOptions &&
setSelectedOptions( setSelectedOptions(
selectedOptions?.includes(currentValue) selectedOptions?.includes(currentValue)
? selectedOptions.filter( ? selectedOptions.filter(
(item) => item !== currentValue (item) => item !== currentValue,
) )
: [...selectedOptions, currentValue] : [...selectedOptions, currentValue],
); );
!setSelectedOptions && setShowOptions(false); !setSelectedOptions && setShowOptions(false);
}} }}
@ -215,7 +215,7 @@ export default function InputComponent({
selectedOption === option || selectedOption === option ||
selectedOptions?.includes(option) selectedOptions?.includes(option)
? "opacity-100" ? "opacity-100"
: "opacity-0" : "opacity-0",
)} )}
> >
<div className="absolute opacity-100 transition-all group-hover:opacity-0"> <div className="absolute opacity-100 transition-all group-hover:opacity-0">
@ -254,7 +254,7 @@ export default function InputComponent({
((selectedOptions?.length !== 0 || !onChange) && ((selectedOptions?.length !== 0 || !onChange) &&
setSelectedOptions) setSelectedOptions)
? "" ? ""
: "hidden" : "hidden",
)} )}
onClick={ onClick={
((selectedOption !== "" || !onChange) && setSelectedOption) || ((selectedOption !== "" || !onChange) && setSelectedOption) ||
@ -275,7 +275,7 @@ export default function InputComponent({
<span <span
className={cn( className={cn(
password && selectedOption === "" ? "right-8" : "right-0", password && selectedOption === "" ? "right-8" : "right-0",
"absolute inset-y-0 flex items-center pr-2.5" "absolute inset-y-0 flex items-center pr-2.5",
)} )}
> >
<button <button
@ -286,7 +286,7 @@ export default function InputComponent({
selectedOption !== "" selectedOption !== ""
? "text-medium-indigo" ? "text-medium-indigo"
: "text-muted-foreground", : "text-muted-foreground",
"hover:text-accent-foreground" "hover:text-accent-foreground",
)} )}
> >
<ForwardedIconComponent <ForwardedIconComponent
@ -298,7 +298,7 @@ export default function InputComponent({
</span> </span>
)} )}
{password && selectedOption === "" && ( {password && (!setSelectedOption || selectedOption === "") && (
<button <button
type="button" type="button"
tabIndex={-1} tabIndex={-1}
@ -306,16 +306,14 @@ export default function InputComponent({
"mb-px", "mb-px",
editNode editNode
? "input-component-true-button" ? "input-component-true-button"
: "input-component-false-button" : "input-component-false-button",
)} )}
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
setPwdVisible(!pwdVisible); setPwdVisible(!pwdVisible);
}} }}
> >
{password && {pwdVisible ? (
selectedOption === "" &&
(pwdVisible ? (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
@ -325,7 +323,7 @@ export default function InputComponent({
className={classNames( className={classNames(
editNode editNode
? "input-component-true-svg" ? "input-component-true-svg"
: "input-component-false-svg" : "input-component-false-svg",
)} )}
> >
<path <path
@ -344,7 +342,7 @@ export default function InputComponent({
className={classNames( className={classNames(
editNode editNode
? "input-component-true-svg" ? "input-component-true-svg"
: "input-component-false-svg" : "input-component-false-svg",
)} )}
> >
<path <path
@ -358,7 +356,7 @@ export default function InputComponent({
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/> />
</svg> </svg>
))} )}
</button> </button>
)} )}
</div> </div>