Laravel - Exibir modal como um alert ao validar login [RESOLVIDO]

Programação
#1

gente, eu não quero utilizar aquelas configurações de erros já definidos no login do laravel. gostaria de exibir uma modal. tentei aqui com javascript porém não funciona, creio eu que isso deve ser tratado no lado do servidor.

vou deixar o código da minha view aqui.

@extends('layouts.app')

@section('content')

        <div class="container"><!--Início do Container-->
            <div class="d-flex justify-content-center h-100">
                <div class="card">
                    <div class="card-header">
                        <h3>Sistema de Gestão para Psicólogos</h3>
                    </div>
                    <div class="card-body">

                    <form  method="POST" action="{{ route('login') }}"><!--Início do form-->
                    @csrf
                        <div class="input-group form-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                            </div>
                            <input onkeypress="DefinirBgUsuario()" type="text" class="form-control" id="usuario" name="username" placeholder="Usuário" value="{{ old('login') }}">
                        </div>
                        <div class="input-group form-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-key"></i></span>
                            </div>  
                            <input onkeypress="DefinirBgSenha()" type="password" class="form-control"  id="senha" name="password" placeholder="Senha">
                        </div>
                        <div class="form-group">
                            <button id="btn" type="submit" value="Entrar" onclick="ValidarLogin()" class="btn float-right btn-primary">
                            {{ __('Login') }}</button>
                        </div>
                    </form><!--Fim do form-->


                    </div>
                    <div class="card-footer">
                        <div class="d-flex justify-content-center links">
                            <a href="#">Esqueceu a sua senha?</a>
                        </div>
                    </div>
            </div>
        </div>
    </div><!--Fim do Container-->

    <!-- Início do Modal -->
        <div class="modal fade" id="exibirmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div id="modal_titulo_div">
                <h5 class="modal-title" id="modal_titulo"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body" id="modal_conteudo"></div>
              <div class="modal-footer">
                <button type="button" data-dismiss="modal" id="modal_btn">Voltar</button>
              </div>
            </div>
          </div>
        </div>
        <!-- Fim do Modal -->
        
    <footer ><!--Início do Footer-->
        <span id="texto">&copy; Copyright todos os direitos reservados</span>
    </footer><!--Fim do Footer-->
@endsection



meu javascript q exibi a modal..


//evitar o reload da página
$(document).ready(()=>{
	$('#btn').on('click',(e)=>{
		usuario = $("#usuario").val();
		senha = $("#senha").val();
		if(usuario=='' || senha==''){
		e.preventDefault();
	}
	})
})

//Validar Preenchimento de Senha
function ValidarLogin(){
	var usuario = document.getElementById('usuario').value;
	var senha = document.getElementById('senha').value;

	if(usuario=='' || senha==''){
	document.getElementById('modal_titulo').innerHTML = 'Erro - Não foi possível realizar a autentificação'
	document.getElementById('modal_titulo_div').className = 'modal-header text-danger'
	document.getElementById('modal_conteudo').innerHTML = '<strong>Os campos usuário e senha são obrigatório!</strong>'
	document.getElementById('modal_btn').innerHTML = 'Voltar'
	document.getElementById('modal_btn').className = 'btn btn-danger'
		if(usuario==''){
			document.getElementById('usuario').style.backgroundColor='#F78181';
		}
		if(senha==''){
			document.getElementById('senha').style.backgroundColor='#F78181';
		}
	//dialog de sucesso
	$('#exibirmodal').modal('show') 
	}

}

//Definir cor branca ao preencher os inputs
function DefinirBgUsuario(){
	document.getElementById('usuario').style.backgroundColor='#FFFFFF';
}

function DefinirBgSenha(){
	document.getElementById('senha').style.backgroundColor="#FFFFFF"
}
#2

Então use PHP puro.

#3

então não tem como fazer isso com o laravel?

#4

Responder uma requisição HTTP pro browser? Sim, é possível, já deve ser o que você mais faz. Se é necessário ou não Laravel, ai vai ser decisão sua. Exibir a modal com a resposta do servidor é no lado client.

#5

eu não sei se essa é a melhor forma… porém aproveitei aquele retorno que o laravel fornece quando possui erro e chamei a minha função js que exibe a modal…

                          @if(Session::has('errors'))
                                <script>
                                   $(document).ready(()=>{
                                         ValidarLogin(1);
                                    })
                                </script>     
                            @endif