@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
10 lines (9 loc) • 1.21 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useState } from 'react';
import { Icon, Input } from '../../../../components';
const PasswordInput = React.forwardRef(({ field, error, ...props }, ref) => {
const [showPassword, setShowPassword] = useState(false);
const handleShowPassword = () => setShowPassword(!showPassword);
return (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-gray-700", children: field.label }), _jsxs("div", { className: "relative", children: [_jsx(Input, { type: showPassword ? 'text' : 'password', ...props, ref: ref, id: field.name, placeholder: field.placeholder, className: `mt-1 block w-full p-2 border ${error ? 'border-red-500' : 'border-gray-300'} rounded-md shadow-sm` }), _jsx("button", { className: "absolute inset-y-0 right-2 pr-3 flex items-center", type: "button", onClick: handleShowPassword, children: showPassword ? _jsx(Icon, { name: 'FaEye', size: 20 }) : _jsx(Icon, { name: 'FaEyeSlash', size: 20 }) })] }), error && _jsx("p", { className: "mt-2 text-sm text-red-500", children: error.message })] }));
});
export default PasswordInput;