UserLoginForm has an extra password confirmation field!

The final result is this:

sign_in_form.html:

{% load django_bootstrap5 %}
{% bootstrap_messages %}

<h2> TEST TEST1 </h2>
<form method="post" class="form">
    {% bootstrap_form form %}
    {% bootstrap_button button_type="submit" content="Sign In" %}    
</form>

sign_up.html: (the main page)

{% load static %}
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0, shrink-to-fit=no" name="viewport"/>
  <title>
   Home - Brand
  </title>
  <link href='{% static "bootstrap\css\bootstrap.min.css" %}' rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css?family=Indie+Flower&amp;display=swap" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
 </head>
 <body>
  <nav class="navbar navbar-light navbar-expand bg-light navigation-clean">
   <div class="container">
    <a class="navbar-brand" href="#" style="font-size: x-large;font-family: 'Indie Flower', serif;color: var(--bs-indigo);">
     <strong>
      Abstract Spacecraft
     </strong>
    </a>
    <button class="navbar-toggler" data-bs-target="#navcol-1" data-bs-toggle="collapse">
    </button>
    <div class="collapse navbar-collapse" id="navcol-1">
     <a class="btn btn-primary ms-auto" data-bs-target="#sign-in-modal" data-bs-toggle="modal" role="button" style="border-radius: 10px;">
      Sign In
     </a>
    </div>
   </div>
  </nav>
  <header class="text-center text-white masthead" style='background: url({% static "img\accounts\pillars_of_creation.jpg" %}) center / cover repeat;height: 679px;'>
   <div class="row" style="height: 457px;">
    <div class="col-xl-9 mx-auto position-relative" style="height: 110px;">
     <h1 class="mb-5">
      Mathematicians, get paid for the content you create.
     </h1>
    </div>
    <div class="col">
     <button class="btn btn-primary" data-bs-target="#sign-up-modal" data-bs-toggle="modal" type="button">
      Sign Up!
     </button>
    </div>
   </div>
   <div class="container">
   </div>
  </header>
  <section class="text-center bg-light features-icons">
   <div class="container">
    <div class="row">
     <div class="col-lg-4">
      <div class="mx-auto features-icons-item mb-5 mb-lg-0 mb-lg-3">
       <div class="d-flex features-icons-icon">
        <i class="icon-screen-desktop m-auto text-primary" data-bss-hover-animate="pulse">
        </i>
       </div>
       <h3>
        Fully Responsive
       </h3>
       <p class="lead mb-0">
        This theme will look great on any device, no matter the size!
       </p>
      </div>
     </div>
     <div class="col-lg-4">
      <div class="mx-auto features-icons-item mb-5 mb-lg-0 mb-lg-3">
       <div class="d-flex features-icons-icon">
        <i class="icon-layers m-auto text-primary" data-bss-hover-animate="pulse">
        </i>
       </div>
       <h3>
        Bootstrap 4 Ready
       </h3>
       <p class="lead mb-0">
        Featuring the latest build of the new Bootstrap 4 framework!
       </p>
      </div>
     </div>
     <div class="col-lg-4">
      <div class="mx-auto features-icons-item mb-5 mb-lg-0 mb-lg-3">
       <div class="d-flex features-icons-icon">
        <i class="icon-check m-auto text-primary" data-bss-hover-animate="pulse">
        </i>
       </div>
       <h3>
        Easy to Use
       </h3>
       <p class="lead mb-0">
        Ready to use with your own content, or customize the source files!
       </p>
      </div>
     </div>
    </div>
   </div>
  </section>
  <section class="showcase">
   <div class="container-fluid p-0">
    <div class="row g-0">
     <div class="col-lg-6 my-auto order-lg-1 showcase-text">
      <h2>
       Fully Responsive Design
      </h2>
      <p class="lead mb-0">
       When you use a theme created with Bootstrap, you know that the theme will look great on any device, whether it's a phone, tablet, or desktop the page will behave responsively!
      </p>
     </div>
    </div>
    <div class="row g-0">
     <div class="col-lg-6 my-auto order-lg-1 showcase-text">
      <h2>
       Updated For Bootstrap 4
      </h2>
      <p class="lead mb-0">
       Newly improved, and full of great utility classes, Bootstrap 4 is leading the way in mobile responsive web development! All of the themes are now using Bootstrap 4!
      </p>
     </div>
    </div>
    <div class="row g-0">
     <div class="col-lg-6 my-auto order-lg-1 showcase-text">
      <h2>
       Easy to Use &amp; Customize
      </h2>
      <p class="lead mb-0">
       Landing Page is just HTML and CSS with a splash of SCSS for users who demand some deeper customization options. Out of the box, just add your content and images, and your new landing page will be ready to go!
      </p>
     </div>
    </div>
   </div>
  </section>
  <section class="text-center bg-light testimonials">
   <div class="container">
    <h2 class="mb-5">
     What people are saying...
    </h2>
    <div class="row">
     <div class="col-lg-4">
      <div class="mx-auto testimonial-item mb-5 mb-lg-0">
       <h5>
        Margaret E.
       </h5>
       <p class="font-weight-light mb-0">
        "This is fantastic! Thanks so much guys!"
       </p>
      </div>
     </div>
     <div class="col-lg-4">
      <div class="mx-auto testimonial-item mb-5 mb-lg-0">
       <h5>
        Fred S.
       </h5>
       <p class="font-weight-light mb-0">
        "Bootstrap is amazing. I've been using it to create lots of super nice landing pages."
       </p>
      </div>
     </div>
     <div class="col-lg-4">
      <div class="mx-auto testimonial-item mb-5 mb-lg-0">
       <h5>
        Sarah W.
       </h5>
       <p class="font-weight-light mb-0">
        "Thanks so much for making these free resources available to us!"
       </p>
      </div>
     </div>
    </div>
   </div>
  </section>
  <section class="text-center text-white call-to-action" style='background:url({% static "img\accounts\bg-masthead.jpg" %}) no-repeat center center;background-size:cover;'>
   <div class="overlay">
   </div>
   <div class="container">
    <div class="row">
     <div class="col-xl-9 mx-auto position-relative">
      <h2 class="mb-4">
       Ready to get started? Sign up now!
      </h2>
     </div>
     <div class="col-md-10 col-lg-8 col-xl-7 mx-auto position-relative">
      <form>
       <div class="row">
        <div class="col-12 col-md-9 mb-2 mb-md-0">
         <input class="form-control form-control-lg" placeholder="Enter your email..." type="email"/>
        </div>
        <div class="col-12 col-md-3">
         <button class="btn btn-primary btn-lg" type="submit">
          Sign up!
         </button>
        </div>
       </div>
      </form>
     </div>
    </div>
   </div>
  </section>
  <footer class="bg-light footer">
   <div class="container">
    <div class="row">
     <div class="col-lg-6 text-center text-lg-start my-auto h-100">
      <ul class="list-inline mb-2">
       <li class="list-inline-item">
        <a href="#">
         About
        </a>
       </li>
       <li class="list-inline-item">
        <span>
         ⋅
        </span>
       </li>
       <li class="list-inline-item">
        <a href="#">
         Contact
        </a>
       </li>
       <li class="list-inline-item">
        <span>
         ⋅
        </span>
       </li>
       <li class="list-inline-item">
        <a href="#">
         Terms of  Use
        </a>
       </li>
       <li class="list-inline-item">
        <span>
         ⋅
        </span>
       </li>
       <li class="list-inline-item">
        <a href="#">
         Privacy Policy
        </a>
       </li>
      </ul>
      <p class="text-muted small mb-4 mb-lg-0">
       © Brand 2021. All Rights Reserved.
      </p>
     </div>
     <div class="col-lg-6 text-center text-lg-end my-auto h-100">
      <ul class="list-inline mb-0">
       <li class="list-inline-item">
        <a href="#">
         <i class="fa fa-facebook fa-2x fa-fw">
         </i>
        </a>
       </li>
       <li class="list-inline-item">
        <a href="#">
         <i class="fa fa-twitter fa-2x fa-fw">
         </i>
        </a>
       </li>
       <li class="list-inline-item">
        <a href="#">
         <i class="fa fa-instagram fa-2x fa-fw">
         </i>
        </a>
       </li>
      </ul>
     </div>
    </div>
   </div>
  </footer>
  <div class="modal fade" id="sign-up-modal" role="dialog" tabindex="-1">
   <div class="modal-dialog" role="document">
    <div class="modal-content">
     <div class="modal-header">
      <h4 class="modal-title">
       Create an Account
      </h4>
      <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button">
      </button>
     </div>
     <div class="modal-body">
      {% include "sign_up_form.html" %}
     </div>
    </div>
   </div>
  </div>
  <div class="modal fade" id="sign-in-modal" role="dialog" tabindex="-1">
   <div class="modal-dialog" role="document">
    <div class="modal-content">
     <div class="modal-header">
      <h4 class="modal-title">
       Account Sign In
      </h4>
      <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button">
      </button>
     </div>
     <div class="modal-body">
      {% include "sign_in_form.html" %}
     </div>
    </div>
   </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
  </script>
  <script src='{% static "js\bs-init.js" %}'>
  </script>
 </body>
</html>

forms.py:

from django.contrib.auth.forms import AuthenticationForm, UsernameField
from django import forms


class UserLoginForm(AuthenticationForm):
    def __init__(self, *args, **kwargs):
        super(UserLoginForm, self).__init__(*args, **kwargs)

    username = UsernameField(widget=forms.TextInput(
        attrs={'class': 'form-control', 'placeholder': '', 'id': 'hello'}))
    password = forms.CharField(widget=forms.PasswordInput(
        attrs={
            'class': 'form-control',
            'placeholder': '',
            'id': 'hi',
        }
    ))

urls.py:

from django.contrib import admin
from django.urls import path
from .views import sign_up, user_home
from django.contrib.auth import views
from .forms import UserLoginForm

urlpatterns = [
    path('home', user_home, name='user_home'),
    path('sign-in/', 
         views.LoginView.as_view(
             template_name='sign_in_form.html',
             authentication_form=UserLoginForm),
         name='sign_in'),
    path('sign-up', sign_up, name='sign_up'),
]

From that, how would I begin to even debug such a thing? Complaint: these helper classes that hide everything make it harder to debug what’s wrong with my project’s code…

Okay, it suddenly hit me. I have one Django view loading sign_up and this sends only one form variable to its template which has two modals, one loading the sign up form and the other the sign in, but they’re both using the same form variable. I think I’ll create a separate sign-in page.

def sign_up(request):
    if request.method == 'POST':
        form = UserCreationForm(request.POST)
        if form.is_valid():
            form.save()
            username = form.cleaned_data.get('username')
            raw_password = form.cleaned_data.get('password1')
            user = authenticate(username=username, password=raw_password)
            login(request, user)
            return redirect('user_home')
    else:
        form = UserCreationForm()
    return render(request, 'sign_up.html', {'form': form})

Is what I was doing (from a Vitor Freitas tutorial) :smiley: