Added alerts to login and signup pate

This commit is contained in:
Luke Else 2024-01-05 13:56:46 +00:00
parent f1065b8150
commit c6ef411930
5 changed files with 101 additions and 10 deletions

View File

@ -15,22 +15,25 @@ def welcome_page():
### LOGIN FUNCTIONALITY ### LOGIN FUNCTIONALITY
# Function responsible for delivering the Login page for the site # Function responsible for delivering the Login page for the site
@blueprint.route('/login') @blueprint.route('/login')
def display_login(): def display_login(error: str = None):
return render_template('index.html', content="login.html", user = session.get('user')) return render_template('index.html', content="login.html", user = session.get('user'), error = error)
# Function responsible for handling logins to the site # Function responsible for handling logins to the site
@blueprint.post('/login') @blueprint.post('/login')
def login(): def login():
database = UserController() database = UserController()
user = database.read(request.form['username']) user = database.read(request.form['username'])
error = None
# No user found # No user found
if user == None: if user == None:
return redirect("/login") error = "No user found with the username " + request.form['username']
return display_login(error)
# Incorrect Password # Incorrect Password
if sha512(request.form['password'].encode()).hexdigest() != user.password: if sha512(request.form['password'].encode()).hexdigest() != user.password:
return redirect("/login") error = "Incorrect Password"
return display_login(error)
session['user'] = user.username session['user'] = user.username
return redirect("/") return redirect("/")
@ -39,8 +42,8 @@ def login():
### SIGNUP FUNCTIONALITY ### SIGNUP FUNCTIONALITY
# Function responsible for delivering the Signup page for the site # Function responsible for delivering the Signup page for the site
@blueprint.route('/signup') @blueprint.route('/signup')
def display_signup(): def display_signup(error: str = None):
return render_template('index.html', content="signup.html", user = session.get('user')) return render_template('index.html', content="signup.html", user = session.get('user'), error = error)
# Function responsible for handling signups to the site # Function responsible for handling signups to the site
@blueprint.post('/signup') @blueprint.post('/signup')

70
static/css/alerts.css Normal file
View File

@ -0,0 +1,70 @@
.alert {
position: relative;
top: 10;
left: 0;
width: auto;
height: auto;
padding: 10px;
margin: 10px;
line-height: 1.8;
border-radius: 5px;
cursor: hand;
cursor: pointer;
font-family: sans-serif;
font-weight: 400;
}
.alertCheckbox {
display: none;
}
:checked + .alert {
display: none;
}
.alertText {
display: table;
margin: 0 auto;
text-align: center;
font-size: 16px;
}
.alertClose {
float: right;
padding-top: 5px;
font-size: 10px;
}
.clear {
clear: both;
}
.info {
background-color: #EEE;
border: 1px solid #DDD;
color: #999;
}
.success {
background-color: #EFE;
border: 1px solid #DED;
color: #9A9;
}
.notice {
background-color: #EFF;
border: 1px solid #DEE;
color: #9AA;
}
.warning {
background-color: #FDF7DF;
border: 1px solid #FEEC6F;
color: #C9971C;
}
.error {
background-color: #FEE;
border: 1px solid #EDD;
color: #A66;
}

View File

@ -4,6 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}" /> <link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}" />
<link rel="stylesheet" href="{{url_for('static', filename='css/loginform.css')}}" />
<link rel="stylesheet" href="{{url_for('static', filename='css/alerts.css')}}" />
<link href="http://fonts.cdnfonts.com/css/uk-number-plate" rel="stylesheet"> <link href="http://fonts.cdnfonts.com/css/uk-number-plate" rel="stylesheet">
<title>WMGZON</title> <title>WMGZON</title>
</head> </head>

View File

@ -1,5 +1,3 @@
<link rel="stylesheet" href="{{url_for('static', filename='css/loginform.css')}}" />
<div id="login-form-wrap"> <div id="login-form-wrap">
<h2>Login</h2> <h2>Login</h2>
<form class="login-form" method="POST"> <form class="login-form" method="POST">
@ -7,6 +5,16 @@
<input type="password" id="password" name="password" placeholder="Password" required> <input type="password" id="password" name="password" placeholder="Password" required>
<input type="submit" id="login" value="Login"> <input type="submit" id="login" value="Login">
</form> </form>
{% if error != None %}
<label>
<input type="checkbox" class="alertCheckbox" autocomplete="off" />
<div class="alert error">
<span class="alertClose">X</span>
<span class="alertText">{{error}}
<br class="clear"/></span>
</div>
</label>
{% endif %}
<div id="create-account-wrap"> <div id="create-account-wrap">
<p>Not a member? <a href="signup">Create Account</a><p> <p>Not a member? <a href="signup">Create Account</a><p>
</div> </div>

View File

@ -1,5 +1,3 @@
<link rel="stylesheet" href="{{url_for('static', filename='css/loginform.css')}}" />
<div id="login-form-wrap"> <div id="login-form-wrap">
<h2>Sign Up</h2> <h2>Sign Up</h2>
<form class="login-form" method="POST"> <form class="login-form" method="POST">
@ -10,6 +8,16 @@
<input type="password" id="password" name="password" minlength=8 placeholder="Password" required> <input type="password" id="password" name="password" minlength=8 placeholder="Password" required>
<input type="submit" id="Sign Up" value="Sign Up"> <input type="submit" id="Sign Up" value="Sign Up">
</form> </form>
{% if error != None %}
<label>
<input type="checkbox" class="alertCheckbox" autocomplete="off" />
<div class="alert error">
<span class="alertClose">X</span>
<span class="alertText">{{error}}
<br class="clear"/></span>
</div>
</label>
{% endif %}
<div id="create-account-wrap"> <div id="create-account-wrap">
<p>Already have an account? <a href="login">Login</a><p> <p>Already have an account? <a href="login">Login</a><p>
</div> </div>