login signup

README.md

@@ -1,13 +1,7 @@
-# Hướng dẫn cài đặt và chạy dự án web
-
-## Yêu cầu hệ thống
-- Python 3.8 trở lên
-- pip (Python package installer)
-- Git (tùy chọn, để clone repository)
 
 ## Các bước cài đặt
 
-### 1. Clone repository (nếu sử dụng Git)
+### 1. Clone repository 
 ```bash
 git clone <repository-url>
 cd <project-directory>
@@ -51,30 +45,3 @@ python manage.py runserver
 
 ### 8. Truy cập website
 - Mở trình duyệt web và truy cập: `http://127.0.0.1:8000`
-- Đăng nhập với tài khoản superuser đã tạo ở bước 6
-
-## Cấu trúc thư mục
-```
-project/
-├── config/             # Cấu hình chính của dự án
-├── home/              # Ứng dụng chính
-├── static/            # File tĩnh (CSS, JS, images)
-├── templates/         # Templates HTML
-├── manage.py         # Script quản lý Django
-└── requirements.txt  # Danh sách các thư viện cần thiết
-```
-
-## Xử lý lỗi thường gặp
-1. Nếu gặp lỗi "ModuleNotFoundError":
-   - Kiểm tra môi trường ảo đã được kích hoạt chưa
-   - Chạy lại lệnh `pip install -r requirements.txt`
-
-2. Nếu gặp lỗi database:
-   - Kiểm tra cấu hình database trong `settings.py`
-   - Chạy lại các lệnh migration
-
-3. Nếu gặp lỗi static files:
-   - Chạy lệnh `python manage.py collectstatic`
-
-## Liên hệ
-Nếu bạn gặp bất kỳ vấn đề nào trong quá trình cài đặt, vui lòng liên hệ với quản trị viên hệ thống. 

home/views.py

@@ -2,6 +2,10 @@
 from django.contrib.auth import login as auth_login, logout as auth_logout, authenticate
 from django.contrib.auth.models import User
 from django.contrib import messages
+from django.contrib.auth.decorators import user_passes_test
+
+def is_admin(user):
+    return user.is_staff
 
 def home_view(request):
     return render(request, 'home/home.html')
@@ -10,10 +14,17 @@ def login_view(request):
     if request.method == 'POST':
         username = request.POST['username']
         password = request.POST['password']
+        admin_login = request.POST.get('admin_login', False)
+
         user = authenticate(username=username, password=password)
         if user:
+            if admin_login and not user.is_staff:
+                messages.error(request, "This account is not an administrator account!")
+                return render(request, 'home/login.html')
             auth_login(request, user)
             messages.success(request, "Successfully logged in!")
+            if admin_login and user.is_staff:
+                return redirect('/admin/')
             return redirect('home')
         messages.error(request, "Invalid credentials!")
     return render(request, 'home/login.html')

manage.py

@@ -1,11 +1,9 @@
 #!/usr/bin/env python
-"""Django's command-line utility for administrative tasks."""
 import os
 import sys
 
 
 def main():
-    """Run administrative tasks."""
     os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myproject.settings')
     try:
         from django.core.management import execute_from_command_line

static/css/style.css → static/css/main.css

@@ -1,9 +1,23 @@
+/* ==========================================================================
+   Base styles
+   ========================================================================== */
 body {
     background-color: #f8f9fa;
     min-height: 100vh;
     font-family: 'Poppins', sans-serif;
+    margin: 0;
+    padding: 0;
 }
 
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* ==========================================================================
+   Navigation
+   ========================================================================== */
 .navbar {
     background-color: #343a40 !important;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -23,7 +37,9 @@ body {
     color: #007bff !important;
 }
 
-/* Style cho container chứa form */
+/* ==========================================================================
+   Authentication Forms (Login/Register)
+   ========================================================================== */
 .row.justify-content-center {
     min-height: calc(100vh - 76px);
     display: flex;
@@ -48,6 +64,7 @@ body {
     z-index: -1;
 }
 
+/* Card Styles */
 .card {
     background-color: rgba(255, 255, 255, 0.95);
     border: 1px solid #dee2e6;
@@ -70,6 +87,7 @@ body {
     font-size: 1.5rem;
 }
 
+/* Form Elements */
 .form-control {
     background-color: #fff;
     border: 1px solid #dee2e6;
@@ -84,6 +102,14 @@ body {
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }
 
+.form-label {
+    color: #212529;
+    font-weight: 500;
+    margin-bottom: 6px;
+    font-size: 0.9rem;
+}
+
+/* Buttons */
 .btn-primary {
     background-color: #007bff;
     border: none;
@@ -99,10 +125,17 @@ body {
     box-shadow: none;
 }
 
-.form-label {
-    color: #212529;
-    font-weight: 500;
-    margin-bottom: 6px;
+/* Alerts and Messages */
+.alert {
+    padding: 8px 12px;
+    margin-bottom: 16px;
+    border-radius: 4px;
+    font-size: 0.9rem;
+}
+
+/* Typography */
+.text-muted {
+    color: #6c757d !important;
     font-size: 0.9rem;
 }
 
@@ -117,22 +150,29 @@ body {
     text-decoration: underline;
 }
 
-.alert {
-    padding: 8px 12px;
-    margin-bottom: 16px;
-    border-radius: 4px;
-    font-size: 0.9rem;
-}
-
-.text-muted {
-    color: #6c757d !important;
-    font-size: 0.9rem;
-}
-
+/* Spacing */
 .mb-3 {
     margin-bottom: 0.8rem !important;
 }
 
 .mt-3 {
     margin-top: 0.8rem !important;
+}
+
+/* ==========================================================================
+   Responsive Design
+   ========================================================================== */
+@media (max-width: 768px) {
+    .container {
+        width: 100%;
+        padding: 10px;
+    }
+
+    .card {
+        margin: 10px;
+    }
+
+    .row.justify-content-center {
+        padding: 10px;
+    }
 } 

static/css/responsive.css

@@ -16,3 +16,77 @@ footer {
     color: white;
     padding: 10px;
 }
+
+/* ==========================================================================
+   Responsive Design
+   ========================================================================== */
+
+/* Extra small devices (phones, less than 576px) */
+@media (max-width: 575.98px) {
+    .container {
+        width: 100%;
+        padding: 8px;
+    }
+
+    .card {
+        margin: 8px;
+        padding: 10px;
+    }
+
+    .row.justify-content-center {
+        padding: 8px;
+    }
+
+    .card-header h3 {
+        font-size: 1.2rem;
+    }
+
+    .form-control, .btn {
+        font-size: 0.85rem;
+    }
+
+    .navbar-brand {
+        font-size: 1.2rem;
+    }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) and (max-width: 767.98px) {
+    .container {
+        width: 100%;
+        padding: 10px;
+    }
+
+    .card {
+        margin: 10px;
+    }
+
+    .row.justify-content-center {
+        padding: 10px;
+    }
+}
+
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) and (max-width: 991.98px) {
+    .container {
+        max-width: 720px;
+    }
+
+    .card {
+        max-width: 600px;
+    }
+}
+
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) and (max-width: 1199.98px) {
+    .container {
+        max-width: 960px;
+    }
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {
+    .container {
+        max-width: 1140px;
+    }
+}

templates/home/login.html

@@ -27,6 +27,10 @@ <h3>Login</h3>
                         <label for="password" class="form-label">Password</label>
                         <input type="password" name="password" class="form-control" id="password" placeholder="Enter your password" required>
                     </div>
+                    <div class="mb-3 form-check">
+                        <input type="checkbox" class="form-check-input" id="admin_login" name="admin_login">
+                        <label class="form-check-label" for="admin_login">Login as Administrator</label>
+                    </div>
                     <div class="d-grid">
                         <button type="submit" class="btn btn-primary">Login</button>
                     </div>