Source: data/Login.js

import React, { useEffect, useRef, useState } from "react";
import { booleanString, useNotificationPushContext, useReactorNavigation } from "../../_core";
import { FormContext, Template, useSpinnerContext } from "../..";
import { getFormData } from "./FormExt";
import { useDispatch } from "react-redux";
import { appActions } from "../../redux";
import { loadMessaging } from "../../firebase/client";

/**
 * Componente que renderiza un formulario de login.
 * Todos los input dentro de Login deben contener la propiedad name con el identificador del campo.
 * 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).
 * La operacion de destino se define en la constante CONSTANTS.END_POINT_LOGIN del archivo config.js
 * @name Reactor.Components.Data.Login
 * @param {}saveToken
 * @param {BooleanString} [save_token = "false"] determina si se va a guardar en localStorage el jwt
 * @param {string} [default_error = "Se produjo un error al iniciar sesión"] establece un mensaje de error cuando Orquesta no puede responder
 * @class
 * @example
<login> 
  <div class="menu-size" style="height:auto;" >
    <div class="content mt-0 mb-2">
      <div class="form-custom form-label form-icon">
        <i class="bi bi-check-circle font-13"></i>
        <input type="usuario" class="form-control rounded-xs" name="usuario" placeholder="">
        <label for="usuario" class="form-label-always-active color-highlight font-11">Usuario</label>
      </div>
      <div class="pb-3"></div>
      <div class="form-custom form-label form-icon">
        <i class="bi bi-hash font-14"></i>
        <input type="password" class="form-control rounded-xs" name="password" placeholder="">
        <label for="password" class="form-label-always-active color-highlight font-11">Password</label>
      </div>
      <div class="pb-3"></div>
      <input type="submit" class="form-control rounded-xs btn btn-full gradient-highlight shadow-bg shadow-bg-s" value="Ingresar" offcanvas_class="rounded-m">
    </div>
  </div>
</login>
*/

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

  const dispatch = useDispatch();
  const [ error, setError ] = useState();
  const { load, notificationPush } = useNotificationPushContext();
  const spinner = useSpinnerContext();
  const navigation = useReactorNavigation({});
  const ref = useRef();

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

  useEffect(()=>{
    load();
  }, []);

  const handleSubmit = (event) => {
    event?.preventDefault();
    spinner.show();
    dispatch(appActions.login({...getFormData(ref.current), notificationPush}, booleanString(save_token)))
      .then(result=>{
        //console.log(result)
        navigation.ToNavigate();
      })
      .catch(error => {
        //console.log(error)
        setError(error?.response?.data || default_error);
      })
      .finally(()=>{
        spinner.hide();
      })   
  }

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

}