Source: data/WebAuthnLogin.js

import React, { useEffect, useState } from "react";
import { booleanString, localStorageGetItem, useNotificationPushContext, useReactorNavigation, useWebAuthn } from "../../_core";
import { FormContext, Template, useSpinnerContext } from "../..";

/**
 * Componente que renderiza un formulario de login para WebAuthn.
 * Al enviar el form se muestra un spinner y bloquea la pantalla hasta recibir la respuesta, si es un error muestra un templete SysModalError (requerido del lado de Orquesta).
 * @name Reactor.Components.Data.WebAuthLogin
 * @param {BooleanString} [save_token = "false"] determina si se va a guardar en localStorage el jwt
 * @param {BooleanString} [auto_submit = "false"] determina si se va hacer submit automaticamente en el form de login con webauth (para el caso de que vuelva a la app logueado)
 * @param {string} [default_error = "Se produjo un error al registrarse"] establece un mensaje de error cuando Orquesta no puede responder
 * @class
 * @example
<webauthn_login> 
  <!--icono de huella digital-->
  <i></i>
</webauthn_login>
*/

export const WebAuthnLogin = ({ save_token = "false", auto_submit = "false", default_error = "Se produjo un error al iniciar sesión.", children }) => {

  const { load, isLoaded } = useNotificationPushContext();
  const [ error, setError ] = useState();
  const spinner = useSpinnerContext();
  const navigation = useReactorNavigation({});
  const { assertionLogin } = useWebAuthn();
  const [userName, setUserName] = useState();

  useEffect(()=>{
    load();
    setUserName(localStorageGetItem("user"));
  }, []);

  useEffect(()=>{
    booleanString(auto_submit) && !!userName && isLoaded && handleSubmit();
  }, [auto_submit, userName, isLoaded]);

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

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

  return (
    <>
      {!!userName && isLoaded &&
        <>
          {/*error && <Template content={{titulo: "Error!", mensaje: error, template: "sysmodalerror"}}/>*/}    
          <FormContext.Provider value={{submit: handleSubmit, change: ()=>{}}}>
            <form 
              action="/"
              onSubmit={handleSubmit}
            >
              {children}
            </form>
          </FormContext.Provider>
        </>
      }
    </>
  )

}