I building a social media website I want on error, it should display the error message.
python :
@app.route("/signup-request", methods=['POST'])
def signupRequest():
errors = ["","",""]
# Error 0 => username taken
# Error 1 => email used
# Error 2 => password mismatch
name = request.form["name"]
usrnm = request.form["username"]
email = request.form["email"]
paswd = request.form["password"]
cpswd = request.form["confirm password"]
RacF = open(".\\database\\accounts.csv","rt")
read = csv.reader(RacF)
for rows in read:
if rows[1] == usrnm:
errors[0] = "Username has already been taken"
if rows[2] == email:
errors[1] = "Email has already been registered"
if paswd != cpswd:
errors[2] = "Password and confirm password doesn't match"
RacF.close()
if errors != ["","",""]:
flash(errors)
print("signup failed")
print(errors)
return redirect(request.referrer)
else:
WacF = open(".\\database\\accounts.csv","at")
WacF.write(f'{name},{usrnm},{email},{paswd}\n')
WacF.close()
session["user"] = usrnm
return "<h1>You're registered</h1>"
HTML :
<form action="/signup-request" method="POST" class="form shadow">
{% with message = get_flashed_messages() %}
<p>
<label for="nm">Name :</label><br/>
<input type="text" name="name" id="nm" placeholder="Full Name..." class="wd-lg" required/><br/>
<label for="usrnm">Username :</label><br/>
<input type="text" name="username" id="usrnm" placeholder="Username..." class="wd-lg" required/><br/>
{% if message[0] %}
<span class="cl-rd">{{ message[0] }}</span><br/>
{% endif %}
<label for="email">Email Address :</label><br/>
<input type="email" name="email" id="email" placeholder="E-Mail Address" class="wd-lg" required/><br/>
{% if message[1] %}
<span class="cl-rd">{{ message[1] }}</span><br/>
{% endif %}
Password :<br/>
<input type="password" name="password" id="paswd" placeholder="Password" class="wd-lg" required/><br/>
<input type="password" id="cpaswd" name="confirm password" placeholder="Confirm Password" class="wd-lg" required/>
{% if message[2] %}
<span class="cl-rd">{{ message[2] }}</span><br/>
{% endif %}
</p>
<p>
<input type="checkbox" id="chk" onclick="showPassword()"/>
<label for="chk" style="cursor: pointer;">Show Password</label>
</p>
<p>
<input type="submit" value="Signup" class="btn wd-lg btn-primary"/>
</p>
{% endwith %}
</form>
But the problem which I am facing is, on making an error of password and confirm password mismatch, it is showing:
['','',"Password and confirm password doesn't match"]
at
{% if message[0] %}
<span class="cl-rd">{{ message[0] }}</span><br/>
{% endif %}
While It should print
Password and confirm password doesn't match
at
{% if message[2] %}
<span class="cl-rd">{{ message[2] }}</span><br/>
{% endif %}
Where problem is occuring please let me know. I will be thankful to you.
The function get_flashed_messages() returns a list of all the flashed messages from your server. In this case, there is (sometimes) only one flashed message, errors, which is also a list. So the line:
{% with message = get_flashed_messages() %}
Assigns a list of all the flashed messages to the variable message. So, at this point messages looks like this:
message = [["","","Password and confirm password doesn't match"]]
Now you can see the problem: message[0] is the first element in the list:
message[0] = ["","","Password and confirm password doesn't match"]
While message[0][2] is third element in message[0]:
message[0][2] = "Password and confirm password doesn't match"
message[1] and message[2] will never exist.
One solution would be to keep the flash messages as they are now, and change your template so that it correctly accesses each item in the list, e.g.
{% if message[0][0] %}
<span class="cl-rd">{{ message[0][0] }}</span><br/>
{% endif %}
Keep in mind that you'll have to check if there are any flashed messages first though, or an error will be thrown if there are no flashed messages (trying to access message[0][0] when there is no message[0]). Then, the template becomes:
{% if message[0] %}
{% if message[0][0] %}
<span class="cl-rd">{{ message[0][0] }}</span><br/>
{% endif %}
{% endif %}
Which starts to become a little cumbersome. A simpler solution would be to flash each individual message type, and then check if that message is in the list of messages.
Server-side:
@app.route("/signup-request", methods=['POST'])
def signupRequest():
error = False
name = request.form["name"]
usrnm = request.form["username"]
email = request.form["email"]
paswd = request.form["password"]
cpswd = request.form["confirm password"]
RacF = open(".\\database\\accounts.csv","rt")
read = csv.reader(RacF)
for rows in read:
if rows[1] == usrnm:
flash("usrnm")
error = True
if rows[2] == email:
flash("email")
error = True
if paswd != cpswd:
flash("paswd")
error = True
RacF.close()
if error:
print("signup failed")
return redirect(request.referrer)
else:
# continues...
And on the client side:
<form action="/signup-request" method="POST" class="form shadow">
{% with messages = get_flashed_messages() %}
<p>
<label for="nm">Name :</label><br/>
<input type="text" name="name" id="nm" placeholder="Full Name..." class="wd-lg" required/><br/>
<label for="usrnm">Username :</label><br/>
<input type="text" name="username" id="usrnm" placeholder="Username..." class="wd-lg" required/><br/>
{% if 'usrnm' in messages %}
<span class="cl-rd">Username has already been taken</span><br/>
{% endif %}
<label for="email">Email Address :</label><br/>
<input type="email" name="email" id="email" placeholder="E-Mail Address" class="wd-lg" required/><br/>
{% if 'email' in messages %}
<span class="cl-rd">Email has already been registered}</span><br/>
{% endif %}
Password :<br/>
<input type="password" name="password" id="paswd" placeholder="Password" class="wd-lg" required/><br/>
<input type="password" id="cpaswd" name="confirm password" placeholder="Confirm Password" class="wd-lg" required/>
{% if 'paswd' in messages %}
<span class="cl-rd">Password and confirm password doesn't match</span><br/>
{% endif %}
</p>
<p>
<input type="checkbox" id="chk" onclick="showPassword()"/>
<label for="chk" style="cursor: pointer;">Show Password</label>
</p>
<p>
<input type="submit" value="Signup" class="btn wd-lg btn-primary"/>
</p>
{% endwith %}
</form>