Website Not Redirecting to the Specified Page Upon Login

by: scottcom4, 8 years ago


I have been working my way through the Introduction to Practical Flask tutorial and have really enjoyed the way it is presented in the videos and have learnt alot, but have hit a brick wall.

I am presently building a login page, the format of which was obtained from another website.  The page presents well, however, I am unable to get the authentication working as per the video.

As you can see I have created a style.css file, but I would be interested in knowing if there is a better way to achieve the same outcome using Bootstrap, which I intend using for the rest of the site. I am not sure if there is a best practice for integrating the styles within this file into the bootstrap framework.

In addition, I have been attempting to use the flash functionality to display the username and password for testing purposes, however, have been unable to get this to work either.

Thank you for your help.

I am using Python 3.5.2, Flask 0.12.2 and Bootstrap 4.

Login.html


<link rel="stylesheet" href="/static/css/style.css" type="text/css">
{% block body %}
{% if session['logged_in'] %}
<p>You're logged in already!</p>
{% else %}


<form action="/login" method="POST">
    <div class="login">
        <div class="login-screen">
            <div class="app-title">
                <h1>Login</h1>
            </div>

            <div class="login-form">
                <div class="control-group">
                    <input type="text" class="login-field" value="" placeholder="email address" name="email" value="{{request.form.email}}">
                        <label class="login-field-icon fui-user" for="login-name"></label>
                </div>

                <div class="control-group">
                    <input type="password" class="login-field" value="" placeholder="password" name="password" value="{{request.form.password}}">
                        <label class="login-field-icon fui-lock" for="login-pass"></label>
                </div>

                <input type="submit" value="Log in" class="btn btn-primary btn-large btn-block" >
                    <br>
            </div>
        </div>
    </div>
</form>

<p> {{error}} </p>

{% endif %}
{% endblock %}


__init__.py


from flask import Flask, flash, redirect, render_template, request, session, abort, url_for
import os

app = Flask(__name__)

@app.route('/')
def home():
    if not session.get('logged_in'):
        return render_template('login.html')
    else:
        return redirect(url_for('dashboard'))

@app.route('/dashboard/')
def dashboard():
    return  ("dashboard.html")

@app.route('/login/', methods=['GET','POST'])
def do_admin_login():

    error = ''
    try:
        if request.method == "POST":
            attempted_email = request.form['email']
            attempted_password = request.form['password']

            flash(attempted_email)
            flash(attempted_password)

            if attempted_password == 'password' and attempted_email == 'admin':
                return redirect(url_for('dashboard'))
            else:
                error = "Invalid credentials. Please try again"

        return render_template(login.html, error = error)

    except Exception as e:
            return render_template("login.html", error = error)

@app.route("/logout/")
def logout():
    session['logged_in'] = False
    return home()


if __name__ == "__main__":
    app.run()


style.css



* {
    box-sizing: border-box;
}

*:focus {
    outline: none;
}
body {
    font-family: Arial;
    background-color: #D3600A;
    padding: 50px;
}
.login {
    margin: 20px auto;
    width: 300px;
}
.login-screen {
    background-color: #FFF;
    padding: 20px;
    border-radius: 5px
}

.app-title {
    text-align: center;
    color: #777;
}

.login-form {
    text-align: center;
}
.control-group {
    margin-bottom: 10px;
}

input {
    text-align: center;
    background-color: #ECF0F1;
    border: 2px solid transparent;
    border-radius: 3px;
    font-size: 16px;
    font-weight: 200;
    padding: 10px 0;
    width: 250px;
    transition: border .5s;
}




You must be logged in to post. Please login or register an account.



I highly recommend you start fresh with the Flask series. There are many things going wrong with your logic.

The main thing, however, is your error handling has a minor likely typo. You are doing:

    except Exception as e:
        return render_template("login.html", error = error)


You're saying error=error, and, at no point, unless the person puts in invalid credentials, would you get "error" var to be populated.

Well, you might think, hey, no big deal! ... well that would be no big deal if you didn't have an error in your code well before that...which is here:

return render_template(login.html, error = error)


Again, another typo, you need to make login.html a string, which is an error you'd have seen relatively quickly with:

    except Exception as e:
        return render_template("login.html", error = e)


Now, for the Flashes, you don't see flashes because... you never render a page, or you have no code to handle for flashes. I never saw your main index page, so I am not sure if you are handling for them or not.

The reason I suggest you start fresh is because I think you're trying to step out too quickly. What you should try to do is follow along, and make small tweaks slowly. If anything breaks after a tweak, you will know exactly what you changed, and it will be far easier that way to learn where you are going wrong. With this code, it looks to me like you attempted to change quite a few things, and you're doing some odd stuff.

For example:

@app.route("/logout/")
def logout():
    session['logged_in'] = False
    return home()


That's not valid code either. Seems logical...ish, but, even if that did work, you wouldn't want to do that as you'd be displaying the home information on /logout/, which would confuse the heck outta people and search engines I think :P



-Harrison 8 years ago
Last edited 8 years ago

You must be logged in to post. Please login or register an account.