Fixed password on inputComponent
This commit is contained in:
Lucas Oliveira
parent
9172dbc895
commit
2f56f3a952
1 changed files with 59 additions and 61 deletions
|
|
@ -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) => {
|
||||||
|
|
@ -104,9 +104,9 @@ export default function InputComponent({
|
||||||
(selectedOption !== "" || !onChange) && setSelectedOption
|
(selectedOption !== "" || !onChange) && setSelectedOption
|
||||||
? selectedOption
|
? selectedOption
|
||||||
: (selectedOptions?.length !== 0 || !onChange) &&
|
: (selectedOptions?.length !== 0 || !onChange) &&
|
||||||
setSelectedOptions
|
setSelectedOptions
|
||||||
? selectedOptions?.join(", ")
|
? selectedOptions?.join(", ")
|
||||||
: value
|
: value
|
||||||
}
|
}
|
||||||
autoFocus={autoFocus}
|
autoFocus={autoFocus}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
|
|
@ -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,59 +306,57 @@ 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 === "" &&
|
<svg
|
||||||
(pwdVisible ? (
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<svg
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
viewBox="0 0 24 24"
|
||||||
fill="none"
|
strokeWidth={1.5}
|
||||||
viewBox="0 0 24 24"
|
stroke="currentColor"
|
||||||
strokeWidth={1.5}
|
className={classNames(
|
||||||
stroke="currentColor"
|
editNode
|
||||||
className={classNames(
|
? "input-component-true-svg"
|
||||||
editNode
|
: "input-component-false-svg",
|
||||||
? "input-component-true-svg"
|
)}
|
||||||
: "input-component-false-svg"
|
>
|
||||||
)}
|
<path
|
||||||
>
|
strokeLinecap="round"
|
||||||
<path
|
strokeLinejoin="round"
|
||||||
strokeLinecap="round"
|
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
|
||||||
strokeLinejoin="round"
|
/>
|
||||||
d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
|
</svg>
|
||||||
/>
|
) : (
|
||||||
</svg>
|
<svg
|
||||||
) : (
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<svg
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
viewBox="0 0 24 24"
|
||||||
fill="none"
|
strokeWidth={1.5}
|
||||||
viewBox="0 0 24 24"
|
stroke="currentColor"
|
||||||
strokeWidth={1.5}
|
className={classNames(
|
||||||
stroke="currentColor"
|
editNode
|
||||||
className={classNames(
|
? "input-component-true-svg"
|
||||||
editNode
|
: "input-component-false-svg",
|
||||||
? "input-component-true-svg"
|
)}
|
||||||
: "input-component-false-svg"
|
>
|
||||||
)}
|
<path
|
||||||
>
|
strokeLinecap="round"
|
||||||
<path
|
strokeLinejoin="round"
|
||||||
strokeLinecap="round"
|
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
|
||||||
strokeLinejoin="round"
|
/>
|
||||||
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
|
<path
|
||||||
/>
|
strokeLinecap="round"
|
||||||
<path
|
strokeLinejoin="round"
|
||||||
strokeLinecap="round"
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||||
strokeLinejoin="round"
|
/>
|
||||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
</svg>
|
||||||
/>
|
)}
|
||||||
</svg>
|
|
||||||
))}
|
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue