@growy/strapi-plugin-encrypted-field 2.0.7 → 2.0.9

package/admin/src/components/Input.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
-import { Field, Flex, IconButton } from '@strapi/design-system';
+import { Field, IconButton } from '@strapi/design-system';
+import { useNotification } from '@strapi/strapi/admin';
 import { Eye, EyeStriked, Duplicate } from '@strapi/icons';
 
 const Input = (props) => {
@@ -19,6 +20,7 @@ const Input = (props) => {
   } = props;
 
   const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
   const [isVisible, setIsVisible] = useState(false);
 
   const handleChange = (e) => {
@@ -33,7 +35,18 @@ const Input = (props) => {
 
   const handleCopy = async () => {
     if (value) {
-      await navigator.clipboard.writeText(value);
+      try {
+        await navigator.clipboard.writeText(value);
+        toggleNotification({
+          type: 'success',
+          message: 'Copiado al portapapeles',
+        });
+      } catch (err) {
+        toggleNotification({
+          type: 'danger',
+          message: 'Error al copiar',
+        });
+      }
     }
   };
 
@@ -55,30 +68,41 @@ const Input = (props) => {
       <Field.Label action={labelAction}>
         {label}
       </Field.Label>
-      <Flex gap={2}>
+      <div style={{ position: 'relative' }}>
         <Field.Input
           type={isVisible ? 'text' : 'password'}
           placeholder={placeholder}
           value={value}
           onChange={handleChange}
           disabled={disabled}
-          style={{ flex: 1 }}
+          style={{ paddingRight: '80px' }}
         />
-        <IconButton
-          onClick={toggleVisibility}
-          label={isVisible ? 'Ocultar' : 'Mostrar'}
-          disabled={disabled}
-        >
-          {isVisible ? <EyeStriked /> : <Eye />}
-        </IconButton>
-        <IconButton
-          onClick={handleCopy}
-          label="Copiar"
-          disabled={disabled || !value}
-        >
-          <Duplicate />
-        </IconButton>
-      </Flex>
+        <div style={{ 
+          position: 'absolute', 
+          right: '8px', 
+          top: '50%', 
+          transform: 'translateY(-50%)',
+          display: 'flex',
+          gap: '4px'
+        }}>
+          <IconButton
+            onClick={toggleVisibility}
+            label={isVisible ? 'Ocultar' : 'Mostrar'}
+            disabled={disabled}
+            variant="ghost"
+          >
+            {isVisible ? <EyeStriked /> : <Eye />}
+          </IconButton>
+          <IconButton
+            onClick={handleCopy}
+            label="Copiar"
+            disabled={disabled || !value}
+            variant="ghost"
+          >
+            <Duplicate />
+          </IconButton>
+        </div>
+      </div>
       <Field.Hint />
       <Field.Error />
     </Field.Root>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growy/strapi-plugin-encrypted-field",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "Campo personalizado de texto cifrado para Strapi",
   "strapi": {
     "name": "encrypted-field",