Source: data/WebAuthnRegistration.js

import React, { useEffect, useState } from "react";
import { useWebAuthn } from "../../_core";
import { Template, useSpinnerContext } from "../..";

/**
 * Componente que renderiza un link para registrarse con WebAuthn. El usuario debe estar logueado para usar este componente.
 * @name Reactor.Components.Data.WebAuthnRegistration
 * @param {BooleanString} [save_token = "false"] determina si se va a guardar en localStorage el jwt
 * @param {string} [default_error = "Se produjo un error al registrarse"] establece un mensaje de error cuando Orquesta no puede responder
 * @class
 * @example
<webauthn_registration> 
  <!--icono de huella digital-->
  <i></i>
</webauthn_registration>
*/

export const WebAuthnRegistration = ({ save_token = "false", default_error = "Se produjo un error al registrarse.", children, ...props }) => {

  const [ error, setError ] = useState();
  const spinner = useSpinnerContext();
  const { registration } = useWebAuthn();

  useEffect(()=>{
    if(error){
      setError(null);
    }
  }, [error]);

  const handleSubmit = async (event) => {
    event?.preventDefault();
    spinner.show();
    registration()
      .then(response => {
        console.log({response});
      })
      .catch(error => {
        setError(default_error);
        console.warn(error);
      })
      .finally(()=>{spinner.hide();});
  }

  return (
    <>
      {/*error && <Template content={{titulo: "Error!", mensaje: error, template: "sysmodalerror"}}/>*/}    
      <form 
        action="/"
        onSubmit={handleSubmit}
        method="post"
      >
        {children}
      </form>
    </>
  )

}