Creando la API de login

Si alguno tiene problemas con esto o lo que sigue acá dejo mi repositorio con todo el proyecto finalizado 😃

https://github.com/Ninquiet/ProjectPlz-Wp-Plugin

Hola comunidad, les comparto un aporte

He estado trabajando esto con un tema que ando haciendo en bootstrap 5 y tienen un componente llamado alert.

.
Agregué en mi formulario el siguiente contenido HTML

<div id="liveAlertPlaceholder" class="py-3"></div>

Posterior a eso agregué a la respuesta de mi callback si el logueo era exitoso o no era exitoso:

function dme_login_callback( $request ) {

        $creds = array(
            'user_login'    => $request['email'],
            'user_password' => $request['password'],
            'remember'      => true,
        );
        $user = wp_signon( $creds, false );

        if ( is_wp_error( $user ) ) {
            return array('error' => $user->get_error_message() );
        }

        return array('success'=>$user);
    
    }

También agregué las lineas siguientes a mi archivo .js

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

    const alert = (message, type) => {
        const wrapper = document.createElement('div')
        wrapper.innerHTML = [
            `<div class="alert alert-${type} alert-dismissible" role="alert">`,
            `   <div>${message}</div>`,
            '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
            '</div>'
        ].join('')

        alertPlaceholder.append(wrapper)
    }

Y en la respuesta json del fetch validé si el error existía, entonces lanzaba una alerta, si no simplemente no hago nada.

.then( json => {
    if( json.error ){
         alert(json.error, 'danger')
    }
} )