Day 080 - Project 80 : Actually logging in!

Replit displays a blank page when I use my form to login.
The console gives me the HTTP 405 status “Method not allowed”
I can’t seem to figure out what I’m doing wrong.

Here’s my main code:

from flask import Flask, request

users = {
    "Jim": "potat0",
    "Marc": "MarcIsCool",
    "Simon": "12345"
}

app = Flask(__name__)

@app.route("/login", methods=["POST"])
def login():
    # page = ""
    # file = open("home.html", "r")
    # page = file.read()
    # file.close()
    # form = request.form
    # print(form)
    # if form["username"] in users:
    #     if form["password"] == users[form["username"]]:
    #         page.replace("{message}", "Welcome home.")
    #     else:
    #         page.replace("{message}", "Wrong password.")
    # else:
    #     page.replace("{message}", "Wrong username.")
    # return page
    page = ""
    form = request.form
    print(form)
    if form["username"] in users:
        if form["password"] == users[form["username"]]:
            page = "Welcome home."
        else:
            page = "Wrong password."
    return page

@app.route('/')
def index():
    page = ""
    file = open("index.html", "r")
    page = file.read()
    file.close()
    return page

app.run(host='0.0.0.0', port=81)

And the index’s html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
</head>

<body>

<div style="display: grid; grid-gap: 10px grid-template-columns: 1fr 1fr 1fr">
    <div>
        .
    </div>
    <div style="display: grid; grid-gap: 10px; grid-template-rows: 1fr 1fr 1fr">
        <div>.</div>
        <div>
            <div style="border: 2px solid black; box-shadow: 3px 3px 3px; corner-radius: 25%;">
                <div style="text-align: center;">
                    <span style="font-size: 2em; font-weight: bold; color: #0F0F0">Welcome to Login.</span>
                    <form method="post" action="/login">
                    <table>
                        <tr>
                            <td>
                                Username: 
                            </td>
                            <td>
                                <input type="text" name="username" required>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Password: 
                            </td>
                            <td>
                                <input type="password" name="password" required>
                            </td>
                        </tr>
                        <tr>
                            <td colspan=2><button type="submit">Login</button></td>
                        </tr>
                    </table>
                    </form>
                </div>
            </div>
        </div>
        <div>.</div>
    </div>
    </div>
    <div>
        .
    </div>

</div>

</body>

</html>

So after some good ol’ internet research, I’ve learned that my /login app.route needed to support the “GET” method as well. The tutorial only mentions “POST” for that bit.

Now that I’ve added “GET” to it, everything works fine.

@app.route("/login", methods=["GET", "POST"])
def login():
1 Like
from flask import Flask, request

app = Flask(__name__)

@app.route("/process", methods=["POST"])
def process():
  validNames = ['Bob01','Sara222','Canada']
  validPasswords = ['Nissan14', 'beautybay789', 'ricmatt1']

  page = ""
  form = request.form

  if form["username"] in validNames and form["password"] in validPasswords:
    page += "You are logged in."
  else:
    page += "Username, email or password incorrect."

  return page


@app.route('/')
def index():
  page = """<form method = "post" action="/process">
    <p>Name: <input type="text" name="username" required> </p>
    <p>Email: <input type="Email" name="email"> </p>
    <p>Password: <input type="password" name="password"> </p>
    <input type="hidden" name="userID" value="232"> </p>

    <button type="submit">Save Data</button>
  </form>


    """
  return page
app.run(host='0.0.0.0', port=81)

Hey @AmandaCunela13!

What seems to be the problem? Can you provide more information, like a link to your Repl?

1 Like

Are we supposed to be able to see the form data when using

def process():
  return request.form

Or is this (the image above) just for us to visualize what it would look like? How does David get it to show in the webview?

I just get a blank page until I change it to

def process():
  page = ""
  form = request.form
  if form["baldies"] == "david":
    page += f"You're alright {form['username']}"
  else:
    page += f"You've picked wrong {form['username']}"
  return page

Hello! I actually don’t have any issues, just wanted to share my code. But thank you
for offering help!

2 Likes

Hi – please help me with my various issues:

  1. when I run this program in the replit browser it returns an error – the replit browser defaults to page ‘srcdoc’. If I pop out of the replit browser, the program seems to run normally. What’s going on?

  2. details = logins[form[“username”]] – what is this line of code doing, and why can “form” be called from within “logins”?

  3. I don’t see any line of code that populates the details{} dictionary with the logins{} dictionary. where is this happening in the code?

I really am having trouble following the logic of the login subroutine, where data is being stored and when it’s moving from one dictionary to another. Can anyone provide a clear explainer? SORRY FOR THE LONG MULTI-PART QUESTION

login subroutine:

@app.route("/login", methods = ["POST"])
def login():
  form = request.form
  details = {}
  isThere = False
  try: 
    details = logins[form["username"]]
    isThere = True
  except: 
    return "Username and/or password incorrect"
  if form["email"] == details["email"] and form["password"] == details["password"]:
    return "You are logged in"
  else: 
    return "Username and/or password incorrect"

Full code below:

from flask import Flask, request

app = Flask(__name__)

logins = {}
logins["otto"] ={"email":"otto@otto.com", "password":"lauren"}
logins["lauren"] ={"email":"lauren@lauren.com", "password":"lauren"}
logins["joan"] ={"email":"joan@joan.com", "password":"lauren"}

@app.route("/login", methods = ["POST"])
def login():
  form = request.form
  details = {}
  isThere = False
  try: 
    details = logins[form["username"]]
    isThere = True
  except: 
    return "Username and/or password incorrect"
  if form["email"] == details["email"] and form["password"] == details["password"]:
    return "You are logged in"
  else: 
    return "Username and/or password incorrect"
  
@app.route('/')
def index():
  page = """ <form method="post" action="/login">
    <p><label>Username: </label><input type="text" name="username" required></p>
    <p><label>Email: </label><input type="email" name="email" required></p>
    <p><label>Password: </label><input type="password" name="password" required></p>

    <button type="submit">Login</button>
  </form>
    """
  return page
  
app.run(host='0.0.0.0', port=81)

I have tried everything but nothing works.
I first had a blank page everytime, then added the “GET” method which made curly brackets appear but I could not go any further than that. I never see any of the inputs and even less anything else in the course.
I have tried dozens of changes in several of the codes but to no success… If anyone can help, it would be greatly appreciated.

1 Like

Welcome!
If it is possible please share the code as I would help us debug the problem.

2 Likes

this is the first code of the tutorial, to which I only added the “get” method :

from flask import Flask, request

app = Flask(__name__)

@app.route("/process", methods=["GET", "POST"])

def process():
  return request.form


@app.route('/')
def index():
  page = """<form method = "post" action="/process">
    <p>Name: <input type="text" name="username" required> </p>
    <p>Email: <input type="Email" name="email"> </p>
    <p>Website: <input type="url" name="website"> </p>
    <p>Age: <input type="number" name="age"> </p>
    <input type="hidden" name="userID" value="232"> </p>

    <p>
      Fave Baldy: 
      <select name="baldies">
        <option>David</option>
        <option>Jean Luc Picard</option>
        <option>Yul Brynner</option>
      </select>
    </p>

    <button type="submit">Save Data</button>
  </form>


    """
  return page
app.run(host='0.0.0.0', port=81)

It launches the /process but only makes {} appear.
Thanks for your answer and I hope you’ll find the solution!

1 Like

There is nothing wrong with your code! You just need to open the website in a new tab for it to work.
image

5 Likes

Well, two hours lost for nothing…

Thank you so much for your help!! :point_up: :pray:

1 Like