Develop Reference

Flask flash - use bootstrap toast

I am using Boostrap-Flask (not Flask-Bootstrap) with Bootstrap 5.
When I save a form I can use Flash to display an alert using the Bootstrap-Flask macro render_messages
This works fine. However, I'd like to use a Toast rather than an Alert.
I tried doing this via Javascript rather than using flash. This triggers when I hit the submit button. But the toast flashes very fast due to the Flask page reloading on save, I only actually see it if I put an alert("saved") before it in my javascript which delays the page reload just long enough to see the toast flash up. So it is displaying but vanishes immediately on the page refresh. I don't understand why an alert can be sent and displayed but a toast cannot.
function validateForm() {
let toastAlert = document.getElementById('toastAlert');
let toastBody = document.getElementById('toastBody');
let toasticon = document.getElementById('toasticon');
let requested_by = document.forms["form"]["requested_by"].value;
option = {"autohide": false};
toasticon.classList = "h4 bi bi-check2-circle align-middle";
toastAlert.classList = "toast align-items-center text-white bg-success border";
toastBody.innerHTML = " Ticket Saved!";
let toast = new bootstrap.Toast(toastAlert, option);
toast.show();
return true;
};
I have also tried this in my html page:
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Message</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
{{ message }}
</div>
</div>
</div>
{% endfor %}
{% endif %}
{% endwith %}
as per this SO answer Is there a way to use Bootstrap toast in Flask flashing natively?
But it does not work.
Is this possible?

I got this working by putting the following code into an HTML file and importing this into my base.html
<!-- Begin alerts -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<script>
option = {"autohide": true, timeout:1500};
toastAlert.classList = "toast align-items-center text-white bg-{{category}} border";
toasticon.classList = "toast-icon-{{category}}"; <!-- defined in styles.css -->
toastBody.innerHTML = "{{ message }}";
let toast = new bootstrap.Toast(toastAlert, option);
toast.show();
</script>
{% endfor %}
{% endif %}
{% endwith %}
<!-- End alerts -->
I also have this in a separate HTML file that I import in my base.html
<!-- Toast Notification t-->
<div id="toast-pos" class="toast-container position-fixed top-0 start-50 translate-middle-x p-3" style="z-index: 1099">
<div id="toastAlert" class="toast align-items-center text-white bg-danger border" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
<div class="hstack gap-3">
<span id="toasticon" class="toast-icon-danger"></span>
<span id="toastBody" class="ms-auto h5 text-center align-middle" >Hello, world! This is a toast message.</span>
</div>
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
I created some css to change the icons depending on the Flash category:
.toast-icon-success::before {
font-size: 3rem;
content: "\F26A";
font-family: 'bootstrap-icons';
}
.toast-icon-danger::before {
font-size: 3rem;
content: "\F336";
font-family: 'bootstrap-icons';
}
.toast-icon-info::before {
font-size: 3rem;
content: "\F332";
font-family: 'bootstrap-icons';
}
.toast-icon-warning {
font-size: 3rem;
content: "\F33A";
font-family: 'bootstrap-icons';
}
I can now Flash messages from Flask and they are displayed as Bootstrap toasts.

Is it possible to edit a crispy form using styles.css? Like change the background color, etc.? Because I can't make mine work. Thanks

I am a beginner in studying Python Django and I am trying to create a login page for my website using crispy forms. But I can't control the styling of it, I am wondering if it is possible and if it is, how can I possibly do it? Thanks.
Here is the Django HTML codes:
{% extends 'users/base.html' %}
{% load crispy_forms_tags %}
{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'users/register.css' %}">
<div class="register-container">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">
Create An Acount
</legend>
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">
Sign Up
</button>
</div>
</form>
<div class="border-top pt-3">
<small class="text-muted">
Already Have An Account?
<a class="ml-2" href="#">Log In</a>
</small>
</div>
</div>
{% endblock content %}
CSS:
base.css
transition: margin-left .5s;
padding: 16px;
background: rgb(255,255,255);
background: radial-gradient(circle,
rgba(255,255,255,1) 0%,
rgba(33,208,178,1) 100%);
}

Yes its possible, you can simply add javascript code which adds class to desired input field and then you can add styling for that class.
For e.g :-
# if you want to add styling to the username input then
# use this javascript
const inp_field = document.querySelector("#input_username"); # enter the id/class of that element
inp_field.classList.add("custom__css");
# css code
.custom__css {
# whatever css you need
}

Modifying django-allauth error messages on a signup form

I'm currently building a website that makes use of django-allauth and I've come across a problem regarding error messages while using a custom User model.
My custom User model is called CustomUser, I've noticed that when django-allauth handles errors regarding the username, it uses the name of the user model as the starting word to the error message's sentence. Example image is linked below.
Image of the error message
How can I change this error message? I'd like to stay away from overriding any django-allauth views if possible, though I'd be happy with any solution!
This is my Django form code that makes use of django-crispy-forms:
<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
{% csrf_token %}
<div class="row">
<div class="col-12 col-lg-7">
{{ form.email|attr:"autofocus"|as_crispy_field }}
</div>
<div class="col-12 col-lg-5">
{{ form.username|as_crispy_field }}
</div>
<div class="col-6 col-lg-4">
{{ form.first_name|as_crispy_field }}
</div>
<div class="col-6 col-lg-4">
{{ form.last_name|as_crispy_field }}
</div>
<div class="col-12 col-lg-4">
{{ form.birthday|as_crispy_field }}
</div>
<div class="col-12 col-sm-6">
{{ form.password1|as_crispy_field }}
</div>
<div class="col-12 col-sm-6">
{{ form.password2|as_crispy_field }}
</div>
<div class="col-12 text-center">
{{ form.captcha|as_crispy_field }}
{% for error in form.captcha.errors %}
{% if error %}
<style>
#div_id_captcha {
margin-bottom: 0px !important;
}
</style>
<span class="invalid-feedback d-block mb-3">
<strong>
You must complete the captcha to register
</strong>
</span>
{% endif %}
{% endfor %}
</div>
</div>
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<button type="submit" class="btn btn-primary btn-light mb-3">Register <i class="fa fa-user-plus fa-fw"></i></button>
<p>Already have an account?<br /><small>Login here</small></p>
</form>

Django parsing values of fields in models - Extracting pk

I'm completely lost on part of my Django website. I finally figured out a way to have the same model create a template and then use that template and create another post. This works and is ideal. Now I need to put them in different locations on the screen so I basically need two for-loops and a way to decipher the two(templates and posts off of templates) apart from each other. The model has a title and a content field. When a template is created the title always starts with "Temp: ". I'm completely lost on this because I need to parse through the model and not just use an HTML parser because the content won't already be on the page and there is more than just the title that needs to be moved. I need a way I think in the views.py file to get the pk of ALL titles that start with "Temp: " and the content field tied with it and return it in a variable to the HTML file. I have been working on this for 3 days now and I just really need help.
views.py
def docpostlistview(request):
field = DocPost.objects.all()
return render(request, 'my_app/docpost_list.html', {'field': field})
HTML
<div class="blocks">
<div class="row">
<div class="col">
TESTESTESTESTESTESTESTES
</div>
{% if user.Doc.all %}
{% for post in user.Doc.all %}
<div class="col">
<div class="card card_template hoverable">
<div class="card-image">
<a href="{% url 'use_template' pk=post.pk %}" style="color: black">
<p>
{{ post.content|safe }}
</p>
</a>
</div>
<div class="card-content">
<p>
</p>
</div>
<div class="card-action">
<div class="bottom_text">
{{ post.title }}
<div class="bottom_button">
<form action="{% url 'use_template' pk=post.pk %}" method="POST">
{% csrf_token %}
<div class="card-body">
<a style="background-color: #2f3d50; border-radius: 18px; height: 30px; position: relative; top: 5px;" href="{% url 'use_template' pk=post.pk %}" class="btn btn-primary"><div style="position: relative; top: -3px;">Create</div></a><!--use_template pk=post.pk - post-list-->
</div>
</form>
</div>
</div>
</div>
</div>
<div class="wrapper">
<ul>
<li><a class="dots_img"> <img src="{% static 'threedots.png' %}" alt=""</a>
<ul>
<div class="edit_drop">
<form action="{% url 'doc-post-update' pk=post.pk %}" method="POST">
{% csrf_token %}
<div class="card-body">
<a style="background-color: #2f3d50; border-radius: 18px;" href="{% url 'doc-post-update' pk=post.pk %}" class="btn btn-primary">EDIT</a>
</div>
</form>
</div>
<div class="delete_drop">
<a style="background-color: #2f3d50; border-radius: 18px;" href="{% url 'delete_post' pk=post.pk %}" class="btn btn-danger">Delete</a>
<!--<form action="{% url 'reset' %}" method="POST">{% csrf_token %}
<button type="submit" class="btn btn-danger">Delete</button>
</form>-->
</div>
</ul>
</li>
</ul>
</div>
</div>
{% endfor %}
<hr class="hline">
{% else %}
<div class="no_template">
<p>Your new templates will appear here!</p>
</div>
<div class="no_post">
<p>Your new documents will appear here!</p>
</div>
<hr class="hline-non">
{% endif %}
<div class="blocks2">
<div class="row">

You might be interested in field lookups which utilizes the SQL WHERE clause.
https://docs.djangoproject.com/en/3.2/ref/models/querysets/#startswith
https://docs.djangoproject.com/en/3.2/ref/models/querysets/#field-lookups
https://docs.djangoproject.com/en/3.2/topics/db/queries/#field-lookups
Sample:
doc_posts = DocPost.objects.filter(title__startswith="Temp: ")
Here, doc_posts is an iterable QuerySet object containing a sequence of DocPost objects where each item's title starts with "Temp: ".
If all you want are the id and the content fields, you may use values().
https://docs.djangoproject.com/en/3.2/ref/models/querysets/#values
Sample:
id_content_seq = DocPost.objects.filter(title__startswith="Temp: ").values("id", "content")
Here, id_content_seq is an iterable QuerySet object containing a sequence of dict objects containing id and content as keys for all items where the title starts with "Temp: ".

Images not showing up for django-simple-captcha

I am using django-simple-captcha to make a captcha for different contact buttons on a webpage. I think I have it all working except for the fact that the images for the captcha won't show up.
urls.py:
from django.conf.urls import url
from django.conf.urls import include
from . import views
urlpatterns = [
url(r'^$', views.product_landing, name='product_landing'),
url(r'(?P<product_slug>.*)/?$', views.product_detail,
name='product_detail'),url(r'^captcha/', include('captcha.urls'))
]
html for page:
</form>
{% else %} {% if is_valid %}
<div style="margin-top: 70px; margin-bottom: 200px;">
<h1 style="margin-bottom: 25px">Thank you!</h1>
<p style="font-size: 17px; line-height: 32px;;">Your resume has been received and we will be in touch with a decision soon. Please contact us if you have any questions.</p>
</div>
{% else %}
<form action="" method="POST" id="apply-form" enctype="multipart/form-data" class="application-form">
{% csrf_token %}
<div class="firstname {% if form.first_name.errors %}form-error{% endif %}">
<p>FIRST NAME</p>
{{ form.first_name }}
</div>
<div class="lastname {% if form.last_name.errors %}form-error{% endif %}">
<p>LAST NAME</p>
{{ form.last_name }}
</div>
<div class="email {% if form.email.errors %}form-error{% endif %}">
<p>EMAIL</p>
{{ form.email }}
</div>
<div class="phone {% if form.phone.errors %}form-error{% endif %}">
<p>PHONE</p>
{{ form.phone }}
</div>
<div class="resume-container {% if form.resume.errors %}form-error{% endif %}">
<p>ATTACH PDF RESUME</p>
<input class="readonly" type="text" READONLY>
<div class="resume">
{{ form.resume }}
<div id="browse">
<a>BROWSE</a>
</div>
</div>
</div>
<div class="message {% if form.message.errors %}form-error{% endif %}">
<p>MESSAGE</p>
{{ form.message }}
</div>
{{ form.captcha }}
<button class="submit-button" type="submit">
APPLY
</button>
</form>
I've updated my forms and settings according to the documentation so I don't think that's the issue. From what I know so far I figure that it has to have something to do with the imaging libraries but I'm not quite sure. I have Pillow 4.1.1 installed and I'm on a Mac if that helps.

For anyone who stumbles across this, I figured it out. I had to list the captcha url above the product url because it was looking for the image in the wrong place.