DataScope26/WEB

1import { useState } from "react";2import { Eye, EyeOff, Loader } from "lucide-react";3import ButtonPrimary from "./ButtonPrimary.jsx";4import PasswordChecklist from "./PasswordChecklist.jsx";5import "./AcceptInviteForm.css";6 7export default function AcceptInviteForm({ onSubmit, isLoading, error }) {8  const [name, setName] = useState("");9  const [password, setPassword] = useState("");10  const [showPassword, setShowPassword] = useState(false);11 12  const handleSubmit = (e) => {13    e.preventDefault();14    onSubmit(name.trim(), password);15  };16 17  return (18    <form onSubmit={handleSubmit}>19      <div className="input-group">20        <label>NOMBRE COMPLETO</label>21        <input22          type="text"23          placeholder="Ingresa tu nombre"24          value={name}25          onChange={(e) => setName(e.target.value)}26          maxLength={50}27          autoFocus28        />29      </div>30 31      <div className="input-group">32        <label>NUEVA CONTRASEÑA</label>33        <div className="input-icon">34          <input35            type={showPassword ? "text" : "password"}36            placeholder="••••••••"37            value={password}38            onChange={(e) => setPassword(e.target.value)}39            maxLength={50}40          />41          {showPassword ? (42            <EyeOff size={18} className="icon" onClick={() => setShowPassword(false)} style={{ cursor: "pointer" }} />43          ) : (44            <Eye size={18} className="icon" onClick={() => setShowPassword(true)} style={{ cursor: "pointer" }} />45          )}46        </div>47        48        <PasswordChecklist password={password} />49      </div>50 51      {error && <p className="error-text error-text--animated">{error}</p>}52 53      <div className="form-actions">54        {isLoading ? (55          <ButtonPrimary type="button" className="full-width-btn disabled-btn">56            <Loader size={18} className="loader-icon-animation" />57          </ButtonPrimary>58        ) : (59          <ButtonPrimary type="submit" className="full-width-btn">60            Crear mi cuenta61          </ButtonPrimary>62        )}63      </div>64    </form>65  );66}