Replit displays a blank page when I use my form to login.
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():
2 Likes
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
2 Likes
otto18
December 24, 2023, 6:08pm
31
Hi – please help me with my various issues:
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?
details = logins[form[“username”]] – what is this line of code doing, and why can “form” be called from within “logins”?
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.
1 Like
Welcome!
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.
1 Like
There is nothing wrong with your code! You just need to open the website in a new tab for it to work.
6 Likes
Well, two hours lost for nothing…
Thank you so much for your help!!
1 Like
Hello. So the program works perfectly until the end. Whatever input used for login the code only jumsto the [except] denied access message, in either case where the info is correc or incorrec.
from flask import Flask, request
app = Flask(__name__,static_url_path = "/static")
access = {}
access["alpha"] = {'username':'user','password':'drownssap','email':'m@m.com'}
access["beta"] = {'username':'tu','password':'you','email':'t@t.com'}
access["omega"] = {"username":"yo","password":"me","email":"l@l.com"}
yup = """<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="/static/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p class = "new">Welcome User 🥳</p>
</body>
</html>"""
ney = """<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="/static/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p class = "new">Away with you tresspaser 🤖</p>
</body>
</html>"""
@app.route("/login", methods = ["POST"])
def login():
page = ""
form = request.form
exist = False
data = {}
try:
data["username"] = access[form["username"]]
exist = True
except:
page = ney
return page
if form["email"] == data['email'] and form["password"] == data['password']:
page = yup
return page
else:
page = ney
return page
@app.route('/')
def index():
page = ""
f = open("static/login.html","r")
page = f.read()
f.close()
return page
app.run(host='0.0.0.0', port=81)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="/static/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>Log-In</h1>
<form method = "post" action = "/login">
<p class = "new">User: <input type = "username" name = "username" required></p>
<p class = "new">Password: <input type = "password" name = "password" required></p>
<input type = "hidden" name = "password" value = "password"></p>
<p class = "new">Email: <input type = "email" name = "email" required></p>
<button type = "submit">Log-In</button>
</form>
<script src="script.js"></script>
<!--
This script places a badge on your repl's full-browser view back to your repl's cover
page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green,
teal, blue, blurple, magenta, pink!
-->
<script src="https://replit.com/public/js/replit-badge.js" theme="white" defer></script>
</body>
</html>
