Hello Everyone,
Here is the content of the .py file:
from flask import Flask, render_template, flash, session, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField,SubmitField
from wtforms.validators import DataRequired
app = Flask(__name__)
app.config['SECRET_KEY'] = 'mysecretkey'
class SimpleForm(FlaskForm):
username = StringField("Username:", validators=[DataRequired()])
password = StringField("Password:", validators=[DataRequired()])
submit = SubmitField("Submit")
@app.route('/', methods = ['GET', 'POST'])
def index():
form = SimpleForm()
if form.validate_on_submit():
session['username'] = form.username.data
session['password'] = form.password.data
return redirect(url_for('index'))
return render_template('Login_Page.html', form=form)
if __name__ == '__main__':
app.run()
The jinja template code looks like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>User Login</title>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='login_style.css') }}">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div align="center" class="main-container">
<form method="POST">
<h1>User Login Page</h1>
<h2>Welcome!</h2>
<br>
{{ form.hidden_tag() }}
{{ form.username.label(class_='uname') }} {{ form.username(placeholder='enter email') }}
<br>
{{ form.password.label(class_='passwd') }} {{ form.password() }}
<br>
<a class="abc" href="Sign_Up.html"><u>SignUp</u></a>
<br>
<a class="abc1" href="Password_Reset.html"><u>Forgot Password?</u></a>
<br>
<br>
{{ form.submit() }}
<br>
<p>"One's destination is never a place, but a new way of seeing things." - Henry Miller</p>
</form>
</div>
I have connected the HTML with css successfully and the background image is visible when running the app through Flask. However, the formatting for the username and password labels/fields is not showing correctly. Below is my CSS file content:
body{
background: url(railway-tracks.jpeg);
background-repeat: no-repeat;
}
h1{
color: black;
}
p{
font-family: 'Anton', sans-serif;
font-size: 200%;
color: black;
}
.uname{
display: inline-block;
min-width: 90px;
color: red;
}
.passwd{
display: inline-block;
min-width: 90px;
color: red;
}
Please advise on what part I might be missing or using incorrectly.
Thank you!
(Last Updated)