Link login front and back ends

server/api/user.py

@@ -49,11 +49,14 @@ def user_logout():
 @blueprint.route("/login", methods=["POST"])
 @api_wrapper
 def user_login():
-    username = request.form["username"]
+    email = request.form["email"]
     password = request.form["password"]
-    user = Users.query.filter_by(username=username).first()
+    user = Users.query.filter_by(email=email).first()
+    if user is None:
+        return { "success": 0, "message": "Invalid credentials." }
+
     if utils.check_password(user.password, password):
-        session["username"] = username
+        session["username"] = user.username
         session["admin"] = user.admin
         return { "success": 1, "message": "Success!" }
     else:

server/app.py

@@ -19,6 +19,9 @@ app.secret_key = config.SECRET
 app.config["SQLALCHEMY_DATABASE_URI"] = config.SQLALCHEMY_DATABASE_URI
 app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = config.SQLALCHEMY_TRACK_MODIFICATIONS
 
+app.register_blueprint(api.admin.blueprint, url_prefix="/api/admin")
+app.register_blueprint(api.user.blueprint, url_prefix="/api/user")
+
 @app.route("/api")
 def api_main():
 	return json.dumps({ "success": 1, "message": "The API is online." })
@@ -30,8 +33,5 @@ if __name__ == "__main__":
 		args = parser.parse_args()
 		keyword_args, _ = dict(args._get_kwargs()), args._get_args()
 
-		app.register_blueprint(api.admin.blueprint, url_prefix="/api/admin")
-		app.register_blueprint(api.user.blueprint, url_prefix="/api/user")
-
 		app.debug = keyword_args["debug"]
 		app.run(host="0.0.0.0", port=8000)

web/js/login.js

@@ -0,0 +1,16 @@
+$("#login-form").on("submit", function(e) {
+    e.preventDefault();
+    login($("#email").val(), $("#password").val());
+});
+
+function login(email, password) {
+    $.post("/api/user/login", {
+        email: email,
+        password: password
+    }, function(data) {
+        $("#status").text(data.message);
+        if (data.success == 1) {
+            // wait then redirect or whatever
+        }
+    });
+}

web/pages/login.html

@@ -4,28 +4,30 @@
 			<img src="assets/images/logo.png" class="image">
 			<div class="content">Log-in to your account</div>
 		</h2>
-		<form class="ui large form">
+		<form id="login-form" class="ui large form">
 			<div class="ui stacked segment">
 				<div class="field">
 					<div class="ui left icon input">
 						<i class="user icon"></i>
-						<input type="text" name="email" placeholder="E-mail address">
+						<input type="text" id="email" name="email" placeholder="E-mail address">
 					</div>
 				</div>
 				<div class="field">
 					<div class="ui left icon input">
 						<i class="lock icon"></i>
-						<input type="password" name="password" placeholder="Password">
+						<input type="password" id="password" name="password" placeholder="Password">
 					</div>
 				</div>
-				<div class="ui fluid large teal submit button">Login</div>
+                <input type="submit" class="ui fluid large teal submit button" value="Login">
 			</div>
 
 			<div class="ui error message"></div>
 		</form>
+                <div id="status"></div>
 		<div class="ui message">
 			<a href="#register" class="item">Register</a>
 			<a href="#forgot_password" class="item">Forgot Password?</a>
 		</div>
 	</div>
 </div>
+<script src="js/login.js"></script>