Feat(user): Add user authentication, Add pagination

- Can now create register new user, login
- some extra frontend like userprofile

Author: onggiabayluon

.gitignore

@@ -11,4 +11,6 @@ htmlcov/
 
 dist/
 build/
-*.egg-info/
+*.egg-info/
+
+.env

requirements.txt

@@ -1,18 +1,30 @@
+import os
 import sys
 from flask import Flask
 from flask_sqlalchemy import SQLAlchemy
 from flask_admin import Admin
+from flask_login import LoginManager
 
-app = Flask(__name__)
+import cloudinary
 
-app.secret_key = b'_5#y2L"F4Q8z\n\xec]/'
+app = Flask(__name__)
 
+app.secret_key = '_5#y2L"F4Q8z\n\xec]/'
 app.config["SQLALCHEMY_DATABASE_URI"] = "mysql+pymysql://root:123456789@localhost/flashsaledb?charset=utf8mb4"
 app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = True
+app.config["PAGE_SIZE"] = 8
 
 db = SQLAlchemy(app)
 
+login_manager = LoginManager(app)
+
 admin = Admin(app, name='ĐiệnMáyXanhLè Admin', template_mode='bootstrap4')
 
+cloudinary.config(
+    cloud_name=os.getenv('CLOUD_NAME'),
+    api_key=os.getenv('API_KEY'), 
+    api_secret=os.getenv('API_SECRET'))
+
+
 if not '-m' in sys.argv:
     from saleapp import routes

saleapp/__init__.py

@@ -1,5 +1,5 @@
 from saleapp import admin, db
-from saleapp.models import Category, Product, Tag
+from saleapp.models import Category, Product, Tag, User
 from flask_admin.contrib.sqla import ModelView
 
 # Custom Views Config 
@@ -14,4 +14,5 @@ class ProductView(ModelView):
 
 admin.add_view(ModelView(Category, db.session))
 admin.add_view(ProductView(Product, db.session))
+admin.add_view(ModelView(User, db.session))
 admin.add_view(ModelView(Tag, db.session))

saleapp/admin.py

@@ -1,11 +1,15 @@
 from datetime import datetime
-from sqlalchemy import Column, Integer, String, Float
+from enum import Enum as UserEnum
+
+from flask_login import UserMixin
+from sqlalchemy import Column, Enum, Float, Integer, String
 from sqlalchemy.orm import backref, relationship
 from sqlalchemy.sql.schema import ForeignKey
-from sqlalchemy.sql.sqltypes import DateTime
+from sqlalchemy.sql.sqltypes import Boolean, DateTime, Enum
 
 from saleapp import db
 
+
 class BaseModel(db.Model):
     # Bảng trung gian cho các bảng khác, và không muốn tạo bảng này khi db.create_all()
     # thì ta phải dùng lệnh __abstract__
@@ -35,6 +39,7 @@ class Product(BaseModel):
     description = Column(String(255), nullable=False)
     price = Column(Float, default=0)
     image = Column(String(255), nullable=False)
+    active = Column(Boolean, default=True)
     created_at = Column(DateTime, default=datetime.now())
     category_id = Column(Integer, ForeignKey(Category.id), nullable=False)
     # lazy=subquery: Truy cập 1 product tự động truy vấn danh sach tags luôn
@@ -51,28 +56,44 @@ def __str__(self):
         return self.name
 
 
+class UserRole(UserEnum):
+    ADMIN = 1
+    USER = 2
+
+
+class User(BaseModel, UserMixin):
+    name = Column(String(50), nullable=False)
+    username = Column(String(50), nullable=False, unique=True)
+    password = Column(String(50), nullable=False)
+    email = Column(String(50), nullable=False)
+    active = Column(Boolean, default=True)
+    created_at = Column(DateTime, default=datetime.now())
+    avatar = Column(String(100))
+    user_role = Column(Enum(UserRole), default=UserRole.USER)
+    def __str__(self):
+        return self.name
 
 
 
 
 if __name__ == '__main__':
-    # db.create_all()
-    c1 = Category(name="Mobile")
-    c2 = Category(name="tablet")
+    db.create_all()
+    # c1 = Category(name="Mobile")
+    # c2 = Category(name="tablet")
 
-    p1 = Product(name='Mobile',description='Apple, 32GB, RAM: 3GB, iOS13',price="17000000",image='https://cdn.tgdd.vn/Products/Images/42/78124/iphone-7-plus-gold-400x460-400x460.png',category_id=1)
-    p2 = Product(name='iPad Pro 2020',description='Apple, 128GB, RAM: 6GB',price="37000000",image='https://cdn.tgdd.vn/Products/Images/522/221775/ipad-pro-12-9-inch-wifi-128gb-2020-xam-400x460-1-400x460.png', category_id= 2)
+    # p1 = Product(name='Mobile',description='Apple, 32GB, RAM: 3GB, iOS13',price="17000000",image='https://cdn.tgdd.vn/Products/Images/42/78124/iphone-7-plus-gold-400x460-400x460.png',category_id=1)
+    # p2 = Product(name='iPad Pro 2020',description='Apple, 128GB, RAM: 6GB',price="37000000",image='https://cdn.tgdd.vn/Products/Images/522/221775/ipad-pro-12-9-inch-wifi-128gb-2020-xam-400x460-1-400x460.png', category_id= 2)
 
-    t1 = Tag(name='new')
-    t2 = Tag(name='promotion')
+    # t1 = Tag(name='new')
+    # t2 = Tag(name='promotion')
 
-    db.session.add(c1)
-    db.session.add(c2)
+    # db.session.add(c1)
+    # db.session.add(c2)
 
-    db.session.add(p1)
-    db.session.add(p2)
+    # db.session.add(p1)
+    # db.session.add(p2)
 
-    db.session.add(t1)
-    db.session.add(t2)
+    # db.session.add(t1)
+    # db.session.add(t2)
 
-    db.session.commit()
+    # db.session.commit()

saleapp/models.py

@@ -1,37 +1,43 @@
+import math
+
+import cloudinary.uploader
+from flask import request, url_for
 from flask.templating import render_template
-from flask import request
-from saleapp import app, utils
+from flask_login import login_user, logout_user
+from werkzeug.utils import redirect
+
+from saleapp import app, login_manager, utils
 # Import admin 
 from saleapp.admin import *
 
 
+@app.context_processor
+def inject_categories():
+    return {
+        'categories': utils.load_categories()
+    }
+
+@login_manager.user_loader    
+def inject_user(user_id):
+    return utils.get_user_by_id(user_id=user_id)
+
+
 @app.route('/')
 def home():
-    print(utils.load_products())
     # Load all Products
+    kw = request.args.get('keyword')
+    page = request.args.get('page', 1)
+    cate_id = request.args.get('category_id')
+    products = utils.load_products(category_id=cate_id, name=kw, page=int(page))
+    products_size = utils.count_products()
+    
     return render_template(
         "./pages/home.html",
         title="Tất cả sản phẩm",
-        products=utils.load_products(),
-        categories=utils.load_categories()
-    )
+        products=products,
+        pages=math.ceil(products_size/app.config['PAGE_SIZE']))
 
 
-# products Route
-@app.route('/products', methods=['GET'])
-def products():
-    # get parameters
-    _id = int(request.args.get('category_id', 0))
-
-    # Filter python objects with list comprehensions
-    output_products = utils.load_products_by_categoryId(_id)
-
-    return render_template(
-        "./pages/products.html",
-        title="Products",
-        products=output_products,
-    )
-
 # search Route
 @app.route('/search', methods=['GET'])
 def search():
@@ -43,13 +49,74 @@ def search():
 
     # Filter by name or by price
     if (searchByName):
-        output_products = utils.load_products(keyword)
+        output_products = utils.load_products(name=keyword)
     else:
-        output_products = utils.load_products_by_price(from_price, to_price)
+        output_products = utils.load_products(from_price=from_price, to_price=to_price)
 
     return render_template(
         "./pages/search.html",
         title=('%s Giá tốt nhất' % keyword) if searchByName else ('%s VNĐ đến %s VNĐ' % (from_price, to_price)),
         products=utils.load_products(),
         filtered_products=output_products,
     )
+
+
+@app.route('/register', methods=['GET', 'POST'])
+def user_register():
+    err_msg = ""
+    if request.method == 'POST':
+        # lay du lieu trong request form
+        name = request.form['name']
+        username = request.form['username']
+        email = request.form['email']
+        password = request.form['password']
+        confirm = request.form['confirm']
+        avatar = request.files['avatar']
+        avatar_path = None
+
+        # them vao db
+        try:
+            if password == confirm:
+                if avatar:
+                    upload_result = cloudinary.uploader.upload(avatar)
+                    avatar_path = upload_result['secure_url']
+
+                utils.addUser(name=name, username=username, password=password, email=email, avatar=avatar_path)
+                return redirect(url_for('home'))
+            else:
+                err_msg = "Wrong password"
+        except Exception as exception:
+            err_msg = 'Error from server: ' + str(exception)
+
+    return render_template(
+        "./pages/register.html",
+        title="Register New User",
+        err_msg=err_msg
+    )
+
+@app.route('/user-login', methods=['GET', 'POST'])
+def user_login():
+    err_msg = ""
+    if request.method == 'POST':
+        username = request.form['username']
+        password = request.form['password']
+        user = utils.check_login(username=username, password=password)
+        
+        if user:
+            login_user(user)
+            print("logib status:%s" % login_user(user))
+            print(user.name) # output a name
+            return redirect(url_for('home'))
+        else:
+            err_msg = "Wrong username or password"
+
+    return render_template(
+        "./pages/login.html",
+        title="Login",
+        err_msg=err_msg
+    )
+
+@app.route('/user-logout')
+def user_logout():
+    logout_user()
+    return redirect(url_for('user_login'))

saleapp/routes.py

@@ -55,6 +55,101 @@ output::after {
 }
 
 
+/*
+  User Profile
+*/
+
+.dropdown-menu {
+  padding: 0.7rem 0rem;
+  font-size: 0.875rem;
+  line-height: 22px;
+  color: #5c5776;
+  border: none;
+  box-shadow: 0 10px 30px 0 rgba(31, 45, 61, 0.1);
+  border-radius: 0.5rem;
+}
+
+.dropdown-menu {
+  display: block;
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: all 0.3s ease-in;
+}
+
+.dropdown:hover>.dropdown-menu {
+  transform: scaleY(1);
+  opacity: 1;
+  visibility: visible;
+}
+
+.dropdown-submenu:hover>.dropdown-menu {
+  transform: scaleY(1);
+  opacity: 1;
+  visibility: visible;
+}
+
+@media (min-width: 990px) {
+  .dropright-lg {
+      position: relative;
+  }
+
+  .dropright-lg .dropdown-menu {
+      top: 0;
+      right: auto;
+      left: 100%;
+      margin-top: 0;
+      margin-right: 0.125rem;
+  }
+}
+
+.dropdown-toggle::after {
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: ">";
+  border-top: 0rem;
+  border-right: 0rem;
+  border-bottom: 0;
+  border-left: 0rem;
+  float: right;
+}
+
+.avatar-md {
+  width: 56px;
+  height: 56px;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+
+.avatar {
+  position: relative;
+  display: inline-block;
+  width: 3rem;
+  height: 3rem;
+  font-size: 1rem;
+}
+
+.avatar-online:before {
+  background-color: green;
+}
+
+.avatar-indicators:before {
+  content: "";
+  position: absolute;
+  bottom: 0px;
+  right: 5%;
+  width: 30%;
+  height: 30%;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  display: table;
+}
 
 /*
 Footer

saleapp/static/css/style.css

@@ -18,7 +18,7 @@
 
     </main>
 
-    <footer class="footer" id="footer">
+    <footer class="footer mt-4" id="footer">
         {% include './layout/footer.html' %}
     </footer>