Creé un formulario de inicio de sesión WTF seguro en mi servidor Flask. Me gustaría que apareciera una alerta si la información de inicio de sesión no existe o es incorrecta. Dado que estoy usando Jinja para desempaquetar el formulario de Python en la plantilla (en lugar de HTML), no sé cómo enviar la solicitud a mi función de JavaScript (jQuery) para que active la ventana emergente.
Intenté buscar respuestas y múltiples intentos de redirigir en el servidor y hacer que JS "vea" el Jinja, pero siento que esto equivale a que tendré que desmantelar mi formulario, lo cual no quiero hacer.
Código
#secure login form class LoginForm(FlaskForm): username = StringField(validators=[InputRequired(), Length( min=4, max=20)], render_kw={"placeholder": "Username"}) password = PasswordField(validators=[InputRequired(), Length( min=4, max=20)], render_kw={"placeholder": "password"}) submit = SubmitField("Login") #this is the route in my flask server where I pass the python object to my template @app.route("/login_page") def show_login_page(): """Display the login page""" form = LoginForm() return render_template("login.html", form=form) #logic, if the username/pass is wrong/does not exist #this was my attempt to use JSON to pass to my JS/jQuery to initiate the alert pop up if user_obj == None: bad_login_dict = { "code": "Username or password incorrect" } return jsonify(bad_login_dict) <!-- Jinja object in my template --> <form action="/login_form" method="POST"> {{ form.hidden_tag() }} {{ form.username() }} <br> {{ form.password() }} <br> <button id="login-button" class="btn grnbutton recipe-jump-button">Login</button> </form> <br> <br> <form action="/register_user"> // this is my last attempt at creating the alert // this does not work, it just displays the json dictionary in the browser function alertBadLogin(evt){ evt.preventDefault(); console.log("executing alert for bad login") $.post('/login_form'), res => { alert(res.bad_login_msg)} }
Si puedo entender cómo hacer que Jinja y JS hablen entre ellos, sería de gran ayuda.