Terry Quickle
Terry Quickle

Reputation: 29

flask routes not playing well with bootstrap modal forms, generating form undefined error

When testing the "failed login" error message portion of my page I constantly get a form undefined jinja error. I'm very new to coding with Python/Flask and using bootstrap modals and forms so I'm sure it's something simple I am over looking. Because I am using modals, I needed to add the commands to each page route in the python code and I feel like the error is in the nested If's I'm using there.

I've tried moving the Flask code around so that the Login portion runs first but no matter what I try I get the same error. I am able to login with known, good username/passwords and I can register new usernames with no problem. I apologize if this too much information, I've not posted here before but I have used SO frequently for troubleshooting so I have a good feeling the community here can spot what I'm doing wrong.

Here is the Python

#Define routes
@app.route('/home', methods=['GET', 'POST'])
def index():
    #Allow registry from page
    form = RegisterForm(request.form)
    if request.method == 'POST' and form.validate():
        name = form.name.data
        email = form.email.data
        username = form.username.data
        password = sha256_crypt.encrypt(str(form.password.data))

        # Execute query
        engine.execute("INSERT INTO users(name, email, username, password) VALUES(?, ?, ?, ?)", (name, email, username, password))
        # Changes Auto Commit so there is no need for opening a session or running a commit line.

        flash('You are now registered and can log in', 'success')

        return redirect(url_for('index'))
    else:
         #Allow login from page
        if request.method == 'POST':
            # Get Form Fields
            username = request.form['username']
            password_candidate = request.form['password']
            # Get user by username
            result = engine.execute("SELECT Username, Password FROM users WHERE username = ?", [username])

            # Get stored hash
            data = result.fetchone()
            if data is None:
                error = 'Username not found'
                return render_template('home.html', error=error)

            password = data['Password']

            # Compare Passwords
            if sha256_crypt.verify(password_candidate, password):
                # Passed
                session['logged_in'] = True
                session['username'] = username

                flash('You are now logged in', 'success')

                return redirect(url_for('dashboard'))
            else:
                error = 'Invalid login'
            return render_template('home.html', error=error)
    return render_template('home.html', form=form)

Here is the HTML


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#"><img src="/static/images/kissclipart-sti-logo2.png"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    {% if session.logged_in %}
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="/home"><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/about"><i class="fas fa-chalkboard"></i> About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/articles"><i class="fas fa-book"></i> Articles</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
      {% else %}
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="/home"><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/about"><i class="fas fa-chalkboard"></i> About Us</a>
            </li>
          </ul>
      {% endif %}
      <ul class="navbar-nav navbar-right">
      {% if session.logged_in %}
      <li class="nav-item">
     <!--   <button type="button" class="btn btn-secondary" onclick="window.location.href='/dashboard'"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li> -->
          <a class="nav-link" href="/dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard </a>
      <li class="nav-item">
      <!-- LogOut Modal Button -->
  <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Logout_Modal"><i class="fas fa-sign-out-alt"></i> 
        Log out
      </button> -->
      <a class="nav-link" data-toggle="modal" data-target="#Logout_Modal" href="#Logout_Modal"><i class="fas fa-sign-out-alt"></i> Logout </a>
      <!-- Modal -->
      <div class="modal fade" id="Logout_Modal" tabindex="-1" role="dialog" aria-labelledby="Logout_ModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="Logout_ModalLabel">Log out?</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              Are you sure you want to logout?
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-danger" data-dismiss="modal">No, still working!</button>
              <button type="button" class="btn btn-outline-success" onclick="window.location.href='/logout';">Yup, all done!</button>
            </div>
          </div>
        </div>
      </div>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
        {% else %}
        <li class="nav-item mr-auto">
        <!-- Register Modal Button -->
        <button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#Register_Modal"><i class="fas fa-user-plus"></i>
            Register?
          </button>
          <!-- Modal -->
          <div class="modal fade" id="Register_Modal" role="dialog" aria-labelledby="Register_ModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="Register_ModalLabel">Let's get registered!</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                    <h1>Register</h1>
                    {% from "includes/_formhelpers.html" import render_field %}
                    <form method="POST" action="">
                      <div class="form-group">
                        {{render_field(form.name, class_="form-control")}}
                      </div>
                      <div class="form-group">
                        {{render_field(form.email, class_="form-control")}}
                      </div>
                      <div class="form-group">
                        {{render_field(form.username, class_="form-control")}}
                      </div>
                      <div class="form-group">
                        {{render_field(form.password, class_="form-control")}}
                        <p>Your Password is required to be 6 characters long, a strong password is suggested. Please see the example below</p>
                        <p>Ex: Th1s1s@cceptabl3!</p>
                      </div>
                      <div class="form-group">
                        {{render_field(form.confirm, class_="form-control")}}
                      </div>
                      <p><input type="submit" class="btn btn-outline-success" value="Submit"></p>
                      <button type="button" class="btn btn-outline-danger" data-dismiss="modal">No, I changed my mind!</button>
                    </form>
                </div>
                <div class="modal-footer justify-content-between">
                    <div mr-auto> Already a member? <a href="#" data-toggle="modal" data-target="#Login_Modal" data-dismiss="modal">  Sign in here!</a></div>
              </div>
            </div>
          </div>

        <li class="nav-item mr-auto">
          <!-- Login Modal Button -->
          <button type="button" class="btn btn-outline-light" data-toggle="modal" data-target="#Login_Modal"><i class="fas fa-sign-in-alt"></i> 
            Login
            </button>
            <!-- Modal -->
            <div class="modal fade" id="Login_Modal"  role="dialog" aria-labelledby="Login_ModalLabel" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="Login_ModalLabel">Ready to log in?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                      <form action="" method="POST">
                          <div class="form-group">
                            <label>Username</label>
                            <input type="text" name="username" required placeholder="JSmith" autofocus="autofocus" class="form-control" value={{request.form.username}}>
                          </div>
                          <div class="form-group">
                            <label>Password</label>
                            <input type="password" name="password" required class="form-control" value={{request.form.password}}>
                          </div>
                          <button type="submit" class="btn btn-outline-success">Login!</button>
                          <button type="button" class="btn btn-outline-danger" data-dismiss="modal">Not right now</button>
                        </form>
                  </div>
                  <div class="modal-footer justify-content-between">
                    <div mr-auto> Not a member? <a href="#" data-toggle="modal" data-target="#Register_Modal" data-dismiss="modal">  Sign up here!</a></div>
                  </div>
                </div>
              </div>
            </div>
          </li>
      {% endif %}
    </ul>
  </div>
</nav>

And here is the error I get:

jinja2.exceptions.UndefinedError
jinja2.exceptions.UndefinedError: 'form' is undefined

Traceback (most recent call last)
File "C:\ProgramData\CooperConda\lib\site-packages\flask\app.py", line 2463, in __call__
return self.wsgi_app(environ, start_response)
File "C:\ProgramData\CooperConda\lib\site-packages\flask\app.py", line 2449, in wsgi_app
response = self.handle_exception(e)
File "C:\ProgramData\CooperConda\lib\site-packages\flask\app.py", line 1866, in handle_exception
reraise(exc_type, exc_value, tb)
File "C:\ProgramData\CooperConda\lib\site-packages\flask\_compat.py", line 39, in reraise
raise value
File "C:\ProgramData\CooperConda\lib\site-packages\flask\app.py", line 2446, in wsgi_app
response = self.full_dispatch_request()
File "C:\ProgramData\CooperConda\lib\site-packages\flask\app.py", line 1951, in full_dispatch_request
rv = self.handle_user_exception(e)
File "C:\ProgramData\CooperConda\lib\site-packages\flask\app.py", line 1820, in handle_user_exception
reraise(exc_type, exc_value, tb)
File "C:\ProgramData\CooperConda\lib\site-packages\flask\_compat.py", line 39, in reraise
raise value
File "C:\ProgramData\CooperConda\lib\site-packages\flask\app.py", line 1949, in full_dispatch_request
rv = self.dispatch_request()
File "C:\ProgramData\CooperConda\lib\site-packages\flask\app.py", line 1935, in dispatch_request
return self.view_functions[rule.endpoint](**req.view_args)
File "C:\Users\tlquickl\devel\MyFlaskApp\app.py", line 61, in index
return render_template('home.html', error=error)
File "C:\ProgramData\CooperConda\lib\site-packages\flask\templating.py", line 140, in render_template
ctx.app,
File "C:\ProgramData\CooperConda\lib\site-packages\flask\templating.py", line 120, in _render
rv = template.render(context)
File "C:\ProgramData\CooperConda\lib\site-packages\jinja2\asyncsupport.py", line 76, in render
return original_render(self, *args, **kwargs)
File "C:\ProgramData\CooperConda\lib\site-packages\jinja2\environment.py", line 1008, in render
return self.environment.handle_exception(exc_info, True)
File "C:\ProgramData\CooperConda\lib\site-packages\jinja2\environment.py", line 780, in handle_exception
reraise(exc_type, exc_value, tb)
File "C:\ProgramData\CooperConda\lib\site-packages\jinja2\_compat.py", line 37, in reraise
raise value.with_traceback(tb)
File "C:\Users\tlquickl\devel\MyFlaskApp\templates\home.html", line 1, in top-level template code
{% extends 'layout.html' %}

{% block body %}
  <div class="center">
    <div class="jumbotron text-center">
        <h1>Welcome to My FlaskApp</h1>
File "C:\Users\tlquickl\devel\MyFlaskApp\templates\layout.html", line 23, in top-level template code

    <script type="text/javascript">
        CKEDITOR.replace('editor')
    </script>

    {% include 'includes/_navbar.html' %}
    <div class="container">
        {% include 'includes/_messages.html' %}
        {% block body %}{% endblock %}
    </div>
<script>
File "C:\Users\tlquickl\devel\MyFlaskApp\templates\includes\_navbar.html", line 100, in top-level template code
                <div class="modal-body">
                    <h1>Register</h1>
                    {% from "includes/_formhelpers.html" import render_field %}
                    <form method="POST" action="">
                      <div class="form-group">
                        {{render_field(form.name, class_="form-control")}}
                      </div>
                      <div class="form-group">
                        {{render_field(form.email, class_="form-control")}}
                      </div>
                      <div class="form-group">
File "C:\ProgramData\CooperConda\lib\site-packages\jinja2\environment.py", line 430, in getattr
return getattr(obj, attribute)
jinja2.exceptions.UndefinedError: 'form' is undefined
The debugger caught an exception in your WSGI application. You can now look at the traceback which led to the error.
To switch between the interactive traceback and the plaintext one, you can click on the "Traceback" headline. From the text traceback you can also create a paste of it. For code execution mouse-over the frame you want to debug and click on the console icon on the right side.

You can execute arbitrary Python code in the stack frames and there are some extra helpers available for introspection:

dump() shows all variables in the frame
dump(obj) dumps all that's known about the object
Brought to you by DON'T PANIC, your friendly Werkzeug powered traceback interpreter.

I am expecting to get an error message and to be returned to the Home page but instead I get the included error. I am using Flask, SQLAlchemy and WTForms.

Any help is greatly appreciated!

Upvotes: 1

Views: 1010

Answers (1)

Terry Quickle
Terry Quickle

Reputation: 29

Big thanks to NemoMeMeliorEst!

I changed my code to the below and now it's working! (Minus the **, added those for emphasis to change)

 # Get stored hash
            data = result.fetchone()
            if data is None:
                error = 'Username not found'
                return render_template('home.html', error=error, ***form=form***)
            password = data['Password']
            # Compare Passwords
            if sha256_crypt.verify(password_candidate, password):
                # Passed
                session['logged_in'] = True
                session['username'] = username
                flash('You are now logged in', 'success')
                return redirect(url_for('dashboard'))
            else:
                error = 'Invalid login'
            return render_template('home.html', error=error, ***form=form***)
    return render_template('home.html', form=form)

Upvotes: 1

Related Questions