DEV Community: Gabriel Rowan

Django Debugging - 12 Password Reset Emails being sent with 1 click

Gabriel Rowan — Thu, 24 Apr 2025 15:13:58 +0000

The problem
Is it a browser issue?
Is it a email server issue?
Is it an automatic behaviour issue?
Creating a test project for debugging
Is it a data issue?
Conclusion

The Problem

I've been implementing the user authentication journey for my Django library app focused on fantasy books.

Recently, I've been implementing the password reset page.

The front-end all looked and worked as expected, but there was one problem: every time I clicked on the password reset button, it wouldn't only send 1 email - it would send 12.

This is the problem that has confused me the most since I've been working on personal projects on my own.

I wanted to record my process of how I debugged it and eventually got to the bottom of what was happening.

Is it a browser-based issue?

My first thought was that something was causing the submit button to be clicked multiple times, even though I knew I was only clicking it once.

With using Django, I didn't have any JavaScript up until this point in my code. That's because I was using a lot of the automatic behaviour that comes with Django’s authentication system with its default configuration, like using django.contrib.auth.urls.

urlpatterns = [
    path("accounts/", include("django.contrib.auth.urls")
]

This includes the following URL patterns:


accounts/login/ [name='login']
accounts/logout/ [name='logout']
accounts/password_change/ [name='password_change']
accounts/password_change/done/ [name='password_change_done']
accounts/password_reset/ [name='password_reset']
accounts/password_reset/done/ [name='password_reset_done']
accounts/reset/<uidb64>/<token>/ [name='password_reset_confirm']
accounts/reset/done/ [name='password_reset_complete']

By having this included in my urls.py file, I found that I didn't need write out a view for the 'password reset form' page (password_reset_form.html) to tell it to redirect to my 'password reset done' page (password_reset_done.html) after the form was submitted. This behaviour happened automatically.

As something weird clearly was going on though, I created a JavaScript file and got this to log to the console every time that the password reset button was clicked.


const passwordResetButton = document.querySelector(".password-reset-button")
if (passwordResetButton)
{
    passwordResetButton.addEventListener("click", (e) =>
    {
        console.log("password reset button clicked")
    })
}

When I clicked the password reset button, I found that the event listener was only firing once and only one message was logged to the console. This meant that my first theory that the click event listener was firing multiple times on click couldn't be right. Hmm.

Checking the POST request

Next, I decided to see how many times a POST request was being submitted from my password reset form. I wanted to check if something meant that there were 12 POST requests being sent instead of 1.

When clicking the password reset button, I could see that there was only one POST request:

"GET /accounts/login/ HTTP/1.1" 200 5318
"GET /accounts/password_reset/ HTTP/1.1" 200 4144
"POST /accounts/password_reset/ HTTP/1.1" 302 0
"GET /accounts/password_reset/done/ HTTP/1.1" 200 3717

This meant that I was still very confused about how 12 emails could be sent by 1 action.

Is it an email issue?

Next, I decided to try the theory that the problem could be related to the gmail email server. There are different settings that you can use when sending emails in Django. To send emails, I had been using:


EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_USE_TLS = True
EMAIL_PORT = 587
EMAIL_HOST_USER = os.environ.get(str('EMAIL_USER'))
EMAIL_HOST_PASSWORD = os.environ.get(str('EMAIL_PASSWORD'))

Other options include having the email print to the console instead of sending an email, or having an email appear as a file inside a folder.

Printing to the console:

EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

Saving emails to a folder:

EMAIL_BACKEND = 'django.core.mail.backends.filebased.EmailBackend'
EMAIL_FILE_PATH = BASE_DIR / 'emails'

I switched to using the console method and found that, yep, there were still 12 emails printing to the console with one click. So I knew it couldn't be a gmail issue.

Is it an automatic behaviour issue?

My next port of call was thinking that this 12 email issue was related to me using Django's inbuilt authentication system. It felt strange that I hadn't specified any view logic for what should happen when a POST request was submitted from my password reset form page. I thought that, if I explicitly wrote out in the code that I wanted the password reset form page to redirect to the password reset done page when a POST request was submitted and the form was valid, then it would make sure no odd 12x looping behaviour could happen.

In hindsight, I feel that the troubleshooting steps I'd already taken had shown that this redirect was already happening correctly, but I was at a bit of a loss.

What I wrote in my views.py file looked something like this:


def password_reset_request(request):
    if request.method == "POST":
        form = PasswordResetForm(request.POST)  
        if form.is_valid():
            form.save(
                # save settings here, shortened in this snippet)
            return redirect('password_reset_done')
    else:
        form = PasswordResetForm()

    return render(request, "registration/password_reset_form.html", {"form": form})

After I made this change, I found that the behaviour was exactly the same using this custom view as it was before, so that solution was a no go.

Getting password resets to work in a separate project

At this point, I felt really stuck. I couldn't see that there was any logic in the code that meant that an action was repeating 12 times.

I decided to create a new test django project from scratch which only needed to successfully submit password resets. I didn't spend any time on styling, I just got it the password reset functionality to work.

In getting this test project to work, I came across an issue (not really an issue, it's by design) where the password reset email only sent an email if the email address was already stored in the database.

And that's when I realised there was one debugging step I hadn't looked at - THE DATA!

Is the issue the data?

I remembered that, in testing the sign up process, I had created many (12, in fact) accounts all associated with my email address. This meant that the password reset process was working as expected - but it was sending 1 email for every account that matched the email address being typed in. The mystery was finally solved!

Conclusion

This process taught me a lot about the different steps to follow for how to debug a problem. It also reminded me of a blind spot I had when it comes to debugging Django specifically - I forgot about the User model and how many Users had the same email address because I hadn't needed to define a User model explicitly in my models.py. Django did that for me automatically.

I think it's now something I'm much less likely to overlook next time. This was also the first time I created a test project as part of the debugging process and I'll definitely keep this technique in mind for problems I can't solve through other troubleshooting steps in the future.

Web scraping and analysing foreign languages data

Gabriel Rowan — Mon, 23 Dec 2024 15:04:58 +0000

Recently I decided that I would like to do a quick web scraping and data analysis project. Because my brain likes to come up with big ideas that would take lots of time, I decided to challenge myself to come up with something simple that could viably be done in a few hours.

Here's what I came up with:

As my undergrad degree was originally in Foreign Languages (French and Spanish), I thought it'd be fun to web scrape some language related data. I wanted to use the BeautifulSoup library, which can parse static html but isn't able to deal with dynamic web pages that need onclick events to reveal the whole dataset (ie. clicking on the next page of data if the page is paginated).

I decided on this Wikipedia page of the most commonly spoken languages.

I wanted to do the following:

Get the html for the page and output to a .txt file
Use beautiful soup to parse the html file and extract the table data
Write the table to a .csv file
Come up with 10 questions I wanted to answer for this dataset using data analysis
Answer those questions using pandas and a Jupyter Notebook

I decided on splitting out the project into these steps for separation of concern, but also I wanted to avoid making multiple unnecessary requests to get the html from Wikipedia by rerunning the script. Saving the html file and then working with it in a separate script means that you don't need to keep re-requesting the data, as you already have it.

Project Link

The link to my github repo for this project is: https://github.com/gabrielrowan/Foreign-Languages-Analysis

Getting the html

First, I retrieved and output the html. After working with C# and C++, it's always a novelty to me how short and concise Python code is 😄


url = 'https://en.wikipedia.org/wiki/List_of_languages_by_number_of_native_speakers'

response = requests.get(url)
html = response.text

with open("languages_html.txt", "w", encoding="utf-8") as file:
    file.write(html)

Parsing the html

To parse the html with Beautiful soup and select the table I was interested in, I did:

with open("languages_html.txt", "r", encoding="utf-8") as file:
    soup = BeautifulSoup(file, 'html.parser')

# get table
top_languages_table = soup.select_one('.wikitable.sortable.static-row-numbers')

Then, I got the table header text to get the column names for my pandas dataframe:


# get column names
columns = top_languages_table.find_all("th")
column_titles = [column.text.strip() for column in columns]

After that, I created the dataframe, set the column names, retrieved each table row and wrote each row to the dataframe:

# get table rows
table_data = top_languages_table.find_all("tr")

# define dataframe
df = pd.DataFrame(columns=column_titles)

# get table data
for row in table_data[1:]:
    row_data = row.find_all('td')
    row_data_txt = [row.text.strip() for row in row_data]
    print(row_data_txt)
    df.loc[len(df)] = row_data_txt

Note - without using strip() there were \n characters in the text which weren't needed.

Last, I wrote the dataframe to a .csv.

Analysing the data

In advance, I'd come up with these questions that I wanted to answer from the data:

What is the total number of native speakers across all languages in the dataset?
How many different types of language family are there?
What is the total number of native speakers per language family?
What are the top 3 most common language families?
Create a pie chart showing the top 3 most common language families
What is the most commonly occuring Language family - branch pair?
Which languages are Sino-Tibetan in the table?
Display a bar chart of the native speakers of all Romance and Germanic languages
What percentage of total native speakers is represented by the top 5 languages?
Which branch has the most native speakers, and which has the least?

The Results

While I won't go into the code to answer all of these questions, I will go into the 2 ones that involved charts.

Display a bar chart of the native speakers of all Romance and Germanic languages

First, I created a dataframe that only included rows where the branch name was 'Romance' or 'Germanic'

romance_lang = df[(df['Branch'] == 'Romance') | (df['Branch'] == 'Germanic')]

Then I specified the x axis, y axis and the colour of the bars that I wanted for the chart:

romance_lang.plot.bar(x='Language', y='Native speakers(in millions)', 
color='#26C6DA')

This created:

Create a pie chart showing the top 3 most common language families

To create the pie chart, I retrieved the top 3 most common language families and put these in a dataframe.

This code groups gets the total sum of native speakers per language family, sorts them in descending order, and extracts the top 3 entries.

top_3_lang_families = df.groupby('Language family')['Native speakers(in millions)'].sum().sort_values(ascending=False)[:3]

Then I put the data in a pie chart, specifying the y axis of 'Native Speakers' and a legend, which creates colour coded labels for each language family shown in the chart.


pie_chart_top_3_lang_families = top_3_lang_families.plot.pie(y='Native speakers(in millions)')
pie_chart_top_3_lang_families.legend(
    labels=top_3_lang_families.index,  
    title="Language Families",        
    loc="upper right"                        
)

The code and responses for the rest of the questions can be found here. I used markdown in the notebook to write the questions and their answers.

Next Time:

For my next iteration of a web scraping & data analysis project, I'd like to make things more complicated with:

Web scraping a dynamic page where more data is revealed on click/ scroll
Analysing a much bigger dataset, potentially one that needs some data cleaning work before analysis

Final thoughts

Even though it was a quick one, I enjoyed doing this project. It reminded me how useful short, manageable projects can be for getting the practice reps in 💪 Plus, extracting data from the internet and creating charts from it, even with a small dataset, is fun 😊

Show Dev - My Shopping Cart App

Gabriel Rowan — Tue, 17 Dec 2024 09:41:44 +0000

I've just finished creating a front end shopping cart web app using HTML, CSS & vanilla JavaScript. Because I love buying veg at my local grocers', I based it on a the idea of a farm shop called Finley's Farm Shop.

To click around on the project, the live link is: https://gabrielrowan.github.io/Finleys-Farm-Shop-FE/

With this app, you can:

🍎 Add shop items to the cart
🍐 Change the quantity of a shop item
🍅 View all the items in the cart on a trolley modal
🍑 See the total price of all items in the cart
🍏 See the number of items in the cart
🍊 Keep all of your items in the cart, even if you refresh the page or close the tab and then reopen it

Background for this project

I've mainly worked on back-end applications in jobs so far. This summer, though, I got to work on a Full-Stack project, including designing and implementing the front-end. I really enjoyed it and it made me want to develop my front end skills more.

I wanted to challenge myself to do this project without using a CSS library, not because I think using them is bad, but because reaching for something like Bootstrap is usually my go-to for the front end.

I'd never used browser local storage with JavaScript before so I decided that creating a project would be the best way for me to learn about it in a practical way.

My Goals for the Project

When I first started this project, I had a few aims in mind. These were:

🌽 Responsiveness - I wanted the UI to adapt to mobile, ipad and desktop views
🍐 To create a shopping cart modal without using a CSS library
🍅 To get familiar with using local storage in JavaScript

Future Goals

Creating the front end is part 1 of my plan for this project. The second part is to turn this into a full-stack app using Django so that the shop items come from a database instead of being hardcoded in the HTML.

Making it responsive

Grid

To make the app adaptable to different screen sizes, I used a version of the responsive grid from this video from Kevin Powell.

The CSS for the <div> containing the shop item cards from my project is:

.shop-items {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

The magic is in the grid-template-columns value. It essentially means:
Fit as many columns as possible in this parent container with a minimum size of 12rem and a maximum size of 1 fraction of the available space.

Using this grid, the amount of columns (represented by the amount of shop item cards) can dynamically decrease from 4 down to 1 when going from a wider desktop view to the narrower mobile view, without having to write additional media queries.

Banner Font Size

For the banner title 'Finley's Farm Shop', I used clamp() so that the font size would be able to scale automatically. Without doing this, I found that the font size that worked well for desktop was too big for mobile.

.banner-title {
    font-size: clamp(3.8rem, 5vw, 5.6rem);
}

This means that the font-size will aim to be 5vw (viewport width - aka 5% of the total visible screen width).

The minimum the font-size can be is 3.8rem, so if 5vw is ever equivalent to less than 3.8rem, then the font-size will be 3.8rem instead.

The maximum the font-size can be is set to 5.6rem, so if 5vw is equivalent to more than 5.6rem then the font-size will be 5.6rem instead.

There are ways of precisely calculating the gradient between your minimum and maximum font size, and using that to choose your preferred middle value, but I eye-balled it using the inspector 😃

Here is a CSS Tricks article on working out the exact gradient instead.

Creating the modal

Different Screen Sizes

For the trolley, I wanted a modal that would appear from the right side of the screen on desktop:

On mobile view, I decided it should take up the full screen size:

Cart Item Grid Areas

Most of my time was spent on the CSS for the cart item when it has been added to the cart. I used grid-template-areas so that the different parts of the cart item (the item title ie. 'Apple', the price, the item quantity and the image) took up the allocated space that I had planned for them.


.cart-item {
    display: grid;
    grid-template-areas: "image description description"
        "image price quantity";
    grid-template-columns: min-content 1fr 1fr;
    grid-template-rows: 2.5rem 3.5rem;
}

JavaScript

For the modal javaScript, I was aiming to:

Hide the modal when cart icon is clicked
Close the modal when the close icon is clicked
Disable page scrolling so that it isn't possible to scroll down the main page of shop items when the modal is open

To achieve this, I added event listeners to both icons which called the function toggleModal. This would add a class called .active if it wasn't already added to the modal element, and remove it if it was already there.

In the CSS, I set the modal to be hidden by default, and the .active class was set to display it.

Setting up the CSS:

//Initialising the modal to be hidden by default
.cart-modal-overlay {
    display: none;
}

//When the modal has the active class added, it will be shown
.cart-modal-overlay.active {
    display: block;
}

Toggling the class to show/hide the modal:


const toggleModal = () =>
{
    const modal = document.querySelector(".cart-modal-overlay");
    const body = document.body;
    modal.classList.toggle("active");

    if (modal.classList.contains("active"))
    {
        // if modal is open, disable main page scrolling
        body.style.overflow = "hidden";
    } else
    {
        body.style.overflow = "auto";
    }
};

This meant that the event listeners on the close icon and the cart icon could reuse the same function, because it would display the modal if it wasn't already displayed and hide it if it was already open.

Using local storage

For local storage, I found this video 'JavaScript Cookies vs. Local Storage vs. Session Storage' from Web Dev Simplified especially helpful. It talks through the differences between these three ways of storing data, how to view the data in the Application tab of dev tools and how to add and remove items for each data storage type.

This is what the Application tab for my project looks like after I've added 2 items to the cart:

Separation of Concern

I decided to separate out functions that related to modifying the DOM (adding elements, removing elements, editing elements) from functions relating to local storage. For example, I have a function removeCartItemFromLocalStorage which, well, does what it says on the tin and is different to removeCartItemFromModalDOM which removes the shop item html from the modal.

//removes cart item from modal
const removeCartItemFromModalDOM = (productId) =>
{
    const cartItemList = document.querySelector(".cart-item-list");
    const matchingModalCartItem = cartItemList.querySelector(`[data- 
    id="${productId}"]`);
    if (matchingModalCartItem)
    {
        matchingModalCartItem.remove();
    }

}

//removes cart item from local storage
const removeCartItemFromLocalStorage = (productId) =>
{
    const cart = JSON.parse(localStorage.getItem("cart"));

    // returns new array with all items other than the item with a 
    // matching productid
    let temp = cart.filter(item => item.id != productId);
    localStorage.setItem("cart", JSON.stringify(temp));

}

Both of these need to be called when a shop item is removed from the cart, and having them as separate functions helped me to check off that I'd done both needed parts of the process. Without removing the html from the DOM, the web page wouldn't visually reflect that the item had been deleted from the cart. Without removing the item from local storage, the changes wouldn't be able to persist when the page was refreshed or the tab closed.

Coming across a problem

While I was working on the local storage functions in the JavaScript, I came across a problem that really puzzled me. The steps I'd done so far were:

Set local storage to an empty array on initial page load
When the 'add' button is clicked on a shop item, these functions are called:
- Item is added to local storage
- The HTML for the cart item is added to the trolley modal
Retrieve the total price as the quantity * price of every product in the local storage array
Set the innerText of the price element to be the price retrieved from local storage

I did some clicking around and it also looked great! ... until I refreshed the page. Then, the price was set to the same total as before, but the DOM had completely reverted to what it looked like on initial page load. Visually, it looked like no items were in the cart (the add button displayed, instead of the quantity input controls), but the total was above £0.

Difference between items added and not added to cart

This really confused me and took me a while to figure out. Eventually, I got it. Yes, I was adding the items to local storage. But when the page was reloaded and the DOMContentLoaded event listener was fired, I wasn't rendering the DOM based on what was in the local storage. In fact, I wasn't checking what was in local storage at this stage at all.

After I realised this, I created a function called on DOMContentLoaded that looped through all products in the product array in local storage, found the id of each, and then updated the relevant product's html elements to show the ones that had been added to the cart.

A shortened version of the function is:

const loadCartState = () =>
{
    const cart = JSON.parse(localStorage.getItem("cart"));
    if (!cart)
    {
        cart = [];
        localStorage.setItem("cart", JSON.stringify(cart));
    }

    cart.forEach(product =>
    {
         const shopItem = document.querySelector(`.shop-item[data- 
         id="${product.id}"]`);
         if (shopItem) {
         // add cart item to trolley modal 
         // update display of shop item so that it shows the quantity 
         // controls instead of the 'add button'
        }
    }

}

Deployment

I deployed this app using Github Pages. I hadn't used it for deployment before, but found the process very straightforward. The only issue I ran into was that at first none of the images were showing. I realised this was because of case sensitivity: my images folder is called Img but the image paths were img/ in the html. After this was fixed and I cleared my cache, the website displayed as expected.

Conclusion

I learnt a lot from this project, especially about CSS grid and using local storage with JavaScript. I was very tempted to add more pages and turn it into a full front-end ecommerce app, but I've decided to keep it MVP for now so that I can focus on the next stage of making it into a Django app and hooking it up to a database 😄

DEV Community: Gabriel Rowan

Django Debugging - 12 Password Reset Emails being sent with 1 click

Contents

The Problem

Is it a browser-based issue?

Checking the POST request

Is it an email issue?

Is it an automatic behaviour issue?

Getting password resets to work in a separate project

Is the issue the data?

Conclusion

Web scraping and analysing foreign languages data

Project Link

Getting the html

Parsing the html

Analysing the data

The Results

Display a bar chart of the native speakers of all Romance and Germanic languages

Create a pie chart showing the top 3 most common language families

Next Time:

Final thoughts

Show Dev - My Shopping Cart App

Background for this project

My Goals for the Project

Future Goals

Making it responsive

Grid

Banner Font Size

Creating the modal

Different Screen Sizes

Cart Item Grid Areas

JavaScript

Setting up the CSS:

Toggling the class to show/hide the modal:

Using local storage

Separation of Concern

Coming across a problem

Difference between items added and not added to cart

Deployment

Conclusion