Desplegar Flashes (mensajes emergentes)

No se vio en el vídeo pero lo primero que se hizo fue importar flash

from flask import Flask, request, make_response, redirect, render_template, session, url_for, flash```

En Boostrap4 hace falta mas codigo para que funcione el codigo

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>```

Aveces los mensajes pueden ser del tipo success or danger (error) o cualquier otra cosa. Esos son los nombres de las clases CSS para colorear los distintos tipos de alertas.

En flask se puede hacer estos flash() con algo que se llaman categorìas.

Para eso solo basta con usar en nuestra ruta:

flash('Login successful', 'success')

Y despues en los templates:

{% for category, message in get_flashed_messages(with_categories=True) %}

Y solo para continuar con bootstrap-flask dejo las lineas para incluir los javascript de bootstrap:

    {% block scripts %}
        {{ bootstrap.load_js() }}
    {% endblock %}

¡Hola compañeros!
Les comparto este avance. Implementé un mensaje de error en caso de no tener éxito en el registro del usuario.

# Dentro de mi función de LogIn
if auth(login_form):
            flash('Successful sign up', category='success')
            return redirect(url_for('home'))
        else:
            flash('Authentication Error', category='danger')
            return redirect(url_for('login'))

¡Además les muestro un ejemplo de cómo realizar el render de los flashes de manera dinámica! Esto nos permitirá colocar flashes de cualquier categoría:

• success (verde)
• info (azul)
• warning (amarillo)
• danger (rojo)

base.html

{% for category, message in get_flashed_messages(with_categories=true) %}
        <div class="alert alert-{{ category }} alert-dismissible">
            <button type="button" data-dismiss="alert" class="close">&times;</button>
            {{ message }}
        </div>
{% endfor %}

Al usar categorias, pueden darle los nombres de las clases de bootstrap.

flash(f’Nombre registrado {username}’, ‘danger’)
flash(f’Nombre registrado {username}’, ‘success’)

Para que al momento de renderizarlo lo usen en la clase del div y no tener que repetir codigo o usar condiciones.

{% for category, message in get_flashed_messages(with_categories=True) %}
    <div class='alert alert-{{category}} alert-dismissible fade show' role='alert'>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        {{ message }}
    </div>
{% endfor %}

Usar flashes en flask:

1. Importar flash desde flask

   from flask import flash
   

2. Crear el flash

   if login_form.validate_on_submit():
           username = login_form.username.data
           session['username'] = username
   
           **flash('Registro exitoso')**
   
           return redirect(url_for('index'))
   

3. Crear un for para mostrar los flashes en base.html

   {% for message in get_flashed_messages() %}
           <div class="alert alert-success alert-dismissable">
               <button type="button" data-dismiss="alert" class="close">
                   &times;
               </button>
               {{ message }}
           </div>
   {% endfor %}
   

4. Cargar el block de scripts de bootstrap en base.html para que funcione correctamente

   {% block scripts %} 
           {{ super() }}
   {% endblock %}
   

Buenas tardes. No pude con mi genio y le hice una pequeña modificación.

La idea es que si el usuario todavía NO completó el formulario, le pida que lo complete y muestre el form. Si lo completó, que le muestre la leyenda de “Bienvenido…”

{% block content %}

    {%if user_ip%}
        <h3>Tu IP es {{ user_ip }}</h3>
    {% else %}
        <a href="{{ url_for('index') }}">Conseguir IP</a>
    {% endif %}
    
    
    {% if username %}
        <h1>Bienvenido {{ username }}</h1>
    {% else %}
        <h1>Por favor, ingresá tus datos de ingreso.</h1>
        <div class="container">
            {{ wtf.quick_form(login_form) }}   
        </div>
    {% endif %}
    
    
    
    <ul>
        {% for todo in todos %}
            {{macros.render_todo(todo)}}
        {% endfor %}
    <ul>

{% endblock %}

A continuación muestro como implementar messages de error y success.

flash('User registed successfully', category='success')
flash('User registed successfully', category='error')

Simplemente escriben la categoría del message

que bien! Saben si tambien existe algún paquete que ya se integre con https://materializecss.com/ ?

Saludos, les quiero compartir un ejemplo basico de como utilizar flash y cual es su uso:

Simple Flashing

So here is a full example:

from flask import Flask, flash, redirect, render_template, \
     request, url_for

app = Flask(__name__)
app.secret_key = b'_5#y2L"F4Q8z\n\xec]/'

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/login', methods=['GET', 'POST'])
def login():
    error = None
    if request.method == 'POST':
        if request.form['username'] != 'admin' or \
                request.form['password'] != 'secret':
            error = 'Invalid credentials'
        else:
            flash('You were successfully logged in')
            return redirect(url_for('index'))
    return render_template('login.html', error=error)

Mas informacion: flash

Necesite más cosas para bootstrap 4, abajo en los comentarios encontre la respuesta.

yo realmente deje el codigo asi, ya que no funciona el del video creo por la version de Bootsrap

<div class="alert alert-success alert-dismissible" role="alert">
            <button type="button"
                    data-dismiss="alert"
                    class="close"
                    aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
                    
            {{ message }}
        </div>

pueden revisar este repositorio para mayor claridad

https://github.com/jeyfredc/Curso-de-flask#Clase-19-Desplegar-Flashes-mensajes-emergentes

Flash en django

La primera linea del archivo main adicionarle el flash.
Quedaria asi.

from flask import Flask, request, make_response, redirect, render_template, session, url_for, flash

extupendo, cada ves me enamoro de flask

Me pasaba con el botón desplegable en el navbar, faltaba ésto:

    {% block scripts%} 
       {{ super() }} 
    {% endblock %}

Muy bien, que buen framework.

IMPORTANTE Debes importar primero flash antes de usarlo