Added alerts to login and signup pate

controllers/web/endpoints.py

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

static/css/alerts.css

@@ -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;
+  }

templates/index.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8">
     <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/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">
     <title>WMGZON</title>
 </head>

templates/login.html

@@ -1,5 +1,3 @@
-<link rel="stylesheet" href="{{url_for('static', filename='css/loginform.css')}}" />
-
 <div id="login-form-wrap">
     <h2>Login</h2>
     <form class="login-form" method="POST">
@@ -7,6 +5,16 @@
         <input type="password" id="password" name="password" placeholder="Password" required>
         <input type="submit" id="login" value="Login">
     </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">
         <p>Not a member? <a href="signup">Create Account</a><p>
     </div>

templates/signup.html

@@ -1,5 +1,3 @@
-<link rel="stylesheet" href="{{url_for('static', filename='css/loginform.css')}}" />
-
 <div id="login-form-wrap">
     <h2>Sign Up</h2>
     <form class="login-form" method="POST">
@@ -10,6 +8,16 @@
         <input type="password" id="password" name="password" minlength=8 placeholder="Password" required>
         <input type="submit" id="Sign Up" value="Sign Up">
     </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">
         <p>Already have an account? <a href="login">Login</a><p>
     </div>