Add colors and users to admin panel

Add appropriate pages.
Add views.
Add tests.

README.md

@@ -61,9 +61,9 @@ Right now the site offers following features:
 - [x] Logout from user's account.
 - [x] For unknown urls show 404 page.
 - [ ] Admin accounts:
-  - [ ] Admins can see a list of all colors with their info on appropriate separate page.
+  - [x] Admins can see a list of all colors with their info on appropriate separate page.
   - [ ] Admins can add new colors to database from appropriate separate page.
-  - [ ] Admins can see a list of all users with their info on appropriate separate page.
+  - [x] Admins can see a list of all users with their info on appropriate separate page.
   - [ ] Admins can deactivate users from appropriate separate page.
 - [ ] Share link to user's favourite color.
 
@@ -78,9 +78,9 @@ Below is a list of what needs to be done:
 - [ ] Add admin accounts:
   - [x] Add `is_admin` field to `users` table ~~or create completely different table for admins~~.
   - [x] All pages for admin user should look the same as the ones for regular user.
-  - [ ] Allow admin to see a list of all colors with their info (link to appropriate page should be in admin panel).
+  - [x] Allow admin to see a list of all colors with their info (link to appropriate page should be in admin panel).
   - [ ] Allow admin to add colors to `colors` table (link to appropriate page should be in admin panel).
-  - [ ] Allow admin to see a list of all users with their info (link to appropriate page should be in admin panel).
+  - [x] Allow admin to see a list of all users with their info (link to appropriate page should be in admin panel).
   - [ ] Allow admin to deactivate users (link to appropriate page should be in admin panel).
 - [ ] Let users share link to their favourite color. This page should:
   - have the following text at the center oh the screen - "{color} is the favourite color of {username}.";

app/admin/admin.py

@@ -1,26 +1,25 @@
 from flask import Blueprint, render_template
 from flask_login import login_required, current_user
-from app.models import Color
-from app.templates_paths import not_found_template_path, admin_panel_template_path
+from app.models import Color, User
+from app.templates_paths import not_found_template_path, admin_colors_template_path, admin_users_template_path
 
 admin_bp = Blueprint("admin", __name__, template_folder='templates', static_folder='static',
                      static_url_path='/assets', url_prefix='/admin')
 
 
-@admin_bp.route("/", methods=["GET"])
+@admin_bp.route("/colors", methods=["GET"])
 @login_required
-def index():
+def colors():
     if current_user.is_admin is False:
         return render_template(not_found_template_path), 404
 
-    return render_template(admin_panel_template_path, colors=Color.get_all_colors())
+    return render_template(admin_colors_template_path, colors=Color.get_all_colors())
 
 
-@admin_bp.route("/colors", methods=["GET"])
+@admin_bp.route("/users", methods=["GET"])
 @login_required
-def colors():
-    # TODO Update this.
+def users():
     if current_user.is_admin is False:
         return render_template(not_found_template_path), 404
 
-    return render_template(admin_panel_template_path, colors=Color.get_all_colors())
+    return render_template(admin_users_template_path, users=User.get_all_users())

app/admin/static/css/style.css

@@ -0,0 +1,16 @@
+/* Navbar
+-------------------------------------------------- */
+.dropdown-menu {
+  border-radius: 0px !important;
+  margin: 0px !important;
+  padding: 0px !important;
+  #border: 0px !important;
+}
+
+.dropdown-menu a:hover {
+  background: #2572e8 !important; /* Blue on hover */
+}
+
+.dropdown-item {
+  background-color: #337def !important; /* Blue */
+}

app/admin/templates/admin/admin_panel.html → app/admin/templates/admin/admin_colors.html

@@ -26,11 +26,8 @@
 
 {% block main %}
 <div class="content m-auto">
-    <h3 class="color-text">This is admin panel :)</h3>
+    <h3 class="color-text">Available colors</h3>
     <br>
-    <br>
-    <br>
-    <h3 class="color-text">Colors section is <a class="color-text" href="#">here</a>.</h3>
     <table class="table color-text">
         <thead>
             <tr>
@@ -47,15 +44,13 @@ <h3 class="color-text">Colors section is <a class="color-text" href="#">here</a>
                     <td style="background-color:{{ color.color }}" class="align-middle"></td>
                     <td class="align-middle">{{ color.is_active }}</td>
                     <td>
-                        <button class="w-50 btn btn-sm" style="color:#337def;background-color:#fcc729" type="submit">
+                        <button class="w-50 btn btn-sm general-button" type="submit">
                             TBD
                         </button>
                     </td>
                 </tr>
             {% endfor %}
         </tbody>
     </table>
-
-    <h3 class="color-text">Users section is <a class="color-text" href="#">here</a>.</h3>
 </div>
 {% endblock main %}

app/admin/templates/admin/admin_users.html

@@ -0,0 +1,56 @@
+{% extends "general/structure.html" %}
+
+{% block login %}
+{% endblock login %}
+
+{% block signup %}
+{% endblock signup %}
+
+{% block nav_greeting %}
+{% include 'general/menu_pieces/nav_greeting.html' %}
+{% endblock nav_greeting %}
+
+{% block settings %}
+{% include 'profile/menu_pieces/settings.html' %}
+{% endblock settings %}
+
+{% block admin %}
+    {% if current_user.is_admin %}
+        {% include 'admin/menu_pieces/admin.html' %}
+    {% endif %}
+{% endblock admin %}
+
+{% block logout %}
+{% include 'auth/menu_pieces/logout.html' %}
+{% endblock logout %}
+
+{% block main %}
+<div class="content m-auto">
+    <h3 class="color-text">Available users</h3>
+    <br>
+    <table class="table color-text">
+        <thead>
+            <tr>
+                <th scope="col">Username</th>
+                <th scope="col">Color</th>
+                <th scope="col">Is active</th>
+                <th scope="col">Action</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for user in users %}
+                <tr>
+                    <td scope="row" class="align-middle">{{ user.username }}</td>
+                    <td style="background-color:{{ user.favourite_color }}" class="align-middle"></td>
+                    <td class="align-middle">{{ user.is_active }}</td>
+                    <td>
+                        <button class="w-50 btn btn-sm general-button" type="submit">
+                            TBD
+                        </button>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+{% endblock main %}

app/admin/templates/admin/menu_pieces/admin.html

@@ -1,3 +1,9 @@
-<li class="nav-item">
-    <a class="nav-link color-text" href="{{ url_for('admin.index') }}">[Admin panel]</a>
-</li>
+<li class="nav-item dropdown">
+    <a class="nav-link color-text dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+    [Admin panel]
+    </a>
+    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+        <li><a class="dropdown-item color-text" href="{{ url_for('admin.colors') }}">[Colors]</a></li>
+        <li><a class="dropdown-item color-text" href="{{ url_for('admin.users') }}">[Users]</a></li>
+    </ul>
+</li>

app/auth/templates/auth/login.html

@@ -21,7 +21,7 @@ <h3 class="mb-3 color-text">Please sign in</h3>
         {% endif %}
         {% endwith %}
 
-        <button class="w-100 btn btn-lg" style="color:#337def;background-color:#fcc729" type="submit">Sign in</button>
+        <button class="w-100 btn btn-lg general-button" type="submit">Sign in</button>
     </form>
 </div>
 {% endblock main %}

app/auth/templates/auth/signup.html

@@ -32,8 +32,7 @@ <h3 class="mb-3 color-text">Please sign up</h3>
         {% endif %}
         {% endwith %}
 
-        <button class="w-100 btn btn-lg" style="color:#337def;background-color:#fcc729" type="submit">Sign up</button>
+        <button class="w-100 btn btn-lg general-button" type="submit">Sign up</button>
     </form>
-    <p>{{ url_for('auth.signup') }}</p>
 </div>
 {% endblock main %}

app/general/static/css/style.css

@@ -4,7 +4,7 @@ html {
 }
 
 body {
-  background-color: #337def !important;
+  background-color: #337def !important; /* Blue */
 }
 
 .container {
@@ -27,7 +27,7 @@ h3 {
   border: 20px solid white;
 }
 .color-text {
-  color: #fcc729 !important;
+  color: #fcc729 !important; /* Yellow */
 }
 
 /* Sticky footer
@@ -48,5 +48,15 @@ h3 {
   padding-bottom: 0 !important;
   height: 40px !important;
   min-height: 40px !important;
-  background-color: #337def !important;
+}
+
+.navbar a:hover {
+  background: #2572e8; /* Blue on hover */
+}
+
+/* Buttons
+-------------------------------------------------- */
+.general-button {
+    color: #337def !important; /* Blue */
+    background-color: #fcc729 !important; /* Yellow */
 }

app/general/templates/general/structure.html

@@ -3,6 +3,7 @@
     <head>
         <meta charset="utf-8">
         <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+        <link rel="stylesheet" href="{{ url_for('admin.static', filename='css/style.css') }}">
         <link rel="stylesheet" href="{{ url_for('auth.static', filename='css/style.css') }}">
         <link rel="stylesheet" href="{{ url_for('general.static', filename='css/style.css') }}">
         <link rel="stylesheet" href="{{ url_for('profile.static', filename='css/style.css') }}">

app/models.py

@@ -93,6 +93,10 @@ def save_favourite_color(self, favourite_color: str):
         db.session.add(self)
         db.session.commit()
 
+    @classmethod
+    def get_all_users(cls) -> List[User]:
+        return cls.query.order_by(cls.username.asc()).all()
+
     @classmethod
     def get_random_user(cls, only_active: bool = True) -> Optional[User]:
         """

app/profile/templates/profile/settings.html

@@ -46,7 +46,7 @@ <h3 class="mb-3 color-text">Please pick up a new color</h3>
         {% endif %}
         {% endwith %}
 
-        <button class="w-100 btn btn-lg" style="color:#337def;background-color:#fcc729" type="submit">Change</button>
+        <button class="w-100 btn btn-lg general-button" type="submit">Change</button>
     </form>
 </div>
 {% endblock main %}

app/templates_paths.py

@@ -1,5 +1,6 @@
 # Admin template paths
-admin_panel_template_path = "admin/admin_panel.html"
+admin_colors_template_path = "admin/admin_colors.html"
+admin_users_template_path = "admin/admin_users.html"
 
 # Auth template paths
 login_template_path = "auth/login.html"

tests/admin/test_admin_view.py → tests/admin/test_colors_view.py

@@ -8,41 +8,40 @@
 from tests import helpers
 
 
-def test_admin_view_regular_user(test_client_with_logged_in_user: FlaskLoginClient):
+def test_admin_colors_view_regular_user(test_client_with_logged_in_user: FlaskLoginClient):
     """
     GIVEN an User
-    WHEN an User sends GET request to `/admin/` page
+    WHEN an User sends GET request to `/admin/colors` page
     THEN `404` error code should be returned along with template for 404 page
     """
-    response = test_client_with_logged_in_user.get(helpers.admin_panel_endpoint)
+    response = test_client_with_logged_in_user.get(helpers.admin_colors_endpoint)
 
     assert response.status_code == 404
     helpers.check_menu(response=response, current_user=current_user)
     assert helpers.page_not_found_h_tag in response.text
 
 
-def test_admin_view_admin_user(test_client_with_logged_in_admin: FlaskLoginClient):
+def test_admin_colors_view_admin_user(test_client_with_logged_in_admin: FlaskLoginClient):
     """
     GIVEN a Admin User
-    WHEN a Admin User sends GET request to `/admin/` page
-    THEN `/admin/` page should be shown
+    WHEN a Admin User sends GET request to `/admin/colors` page
+    THEN `/admin/colors` page should be shown
     """
-    response = test_client_with_logged_in_admin.get(helpers.admin_panel_endpoint)
+    response = test_client_with_logged_in_admin.get(helpers.admin_colors_endpoint)
 
     assert current_user.is_admin is True
     assert response.status_code == 200
     helpers.check_menu(response=response, current_user=current_user)
-    assert '<h3 class="color-text">Colors section is <a class="color-text" href="#">here</a>.</h3>' in response.text
-    assert '<h3 class="color-text">Users section is <a class="color-text" href="#">here</a>.</h3>' in response.text
+    assert '<h3 class="color-text">Available colors</h3>' in response.text
 
 
-def test_admin_view_anonymous_user(test_client: FlaskClient):
+def test_admin_colors_view_anonymous_user(test_client: FlaskClient):
     """
     GIVEN an AnonymousUser
-    WHEN an AnonymousUser sends GET request to `/admin/` page
+    WHEN an AnonymousUser sends GET request to `/admin/colors` page
     THEN redirect to `/auth/login` page should occur
     """
-    response = test_client.get(helpers.admin_panel_endpoint)
+    response = test_client.get(helpers.admin_colors_endpoint)
 
     assert response.status_code == 302
     assert helpers.redirect_h_tag in response.text
@@ -57,14 +56,14 @@ def test_admin_view_anonymous_user(test_client: FlaskClient):
         "test_client_with_logged_in_admin"
     )
 )
-def test_profile_view_post(client: str, request: FixtureRequest):
+def test_admin_colors_view_post(client: str, request: FixtureRequest):
     """
     GIVEN an (AnonymousUser, User, Admin User)
-    WHEN an (AnonymousUser, User, Admin User) sends POST request to `/admin/` page
+    WHEN an (AnonymousUser, User, Admin User) sends POST request to `/admin/colors` page
     THEN `405` error code should be returned along with template for 405 page
     """
     client: Union[FlaskClient, FlaskLoginClient] = request.getfixturevalue(client)
-    response = client.post(helpers.admin_panel_endpoint)
+    response = client.post(helpers.admin_colors_endpoint)
 
     assert response.status_code == 405
     assert helpers.method_not_allowed_h_tag in response.text