Pull request #2: [TMS-7] Add login page and dashboard-draft page

Merge in TOOL/tms from login_and_dashboard to dev

Squashed commit of the following:

commit 975f967022a84c5da8e079b85f191b6ccbe1a0a7
Author: e.efremova <[email protected]>
Date:   Tue Oct 11 14:51:18 2022 +0300

    Fixes after review

commit 4775a958527a32ba2ed3e897789b66ff4bea281a
Author: e.efremova <[email protected]>
Date:   Tue Oct 11 14:42:33 2022 +0300

    Fix static path

commit 150ba5ed406fa1a58da00be0559c6b63eca1505c
Author: e.efremova <[email protected]>
Date:   Tue Oct 11 14:05:07 2022 +0300

    Add base page for content

commit 8d6bf4e289b76051c6776ba2a54321bd42e55a87
Author: e.efremova <[email protected]>
Date:   Tue Oct 11 13:36:49 2022 +0300

    Updates

commit a392d12cffe1802e3b3d6acc3f7bec9bf0556c30
Merge: 8d70621 14f087c
Author: e.efremova <[email protected]>
Date:   Tue Oct 11 13:15:55 2022 +0300

    Merge remote-tracking branch 'origin/dev' into login

    # Conflicts:
    #	tms/tms/urls.py

commit 8d706211a8934ab966929cb6263d45981f96a9dc
Author: Dmitry Tkach <[email protected]>
Date:   Mon Oct 10 16:21:55 2022 +0300

    Changed Index function view to class-based view

commit bf7e0afc0d5191b5a559650cd387f6b22d27f503
Author: Dmitry Tkach <[email protected]>
Date:   Fri Oct 7 13:09:35 2022 +0300

    Update base and dashboard templates

commit a338162e5a2169390437b472c9d31e7fab09caf9
Author: e.efremova <[email protected]>
Date:   Thu Oct 6 19:00:07 2022 +0300

    Add selector for project list

commit f9f26a7a9a9d36d5f7a9f485170db353a4c426f9
Author: e.efremova <[email protected]>
Date:   Thu Oct 6 11:51:03 2022 +0300

    Move static/templates dirs, change urls

commit 3a5fc63cf34b1d7045c3abc7d548763cd7a9c22f
Merge: 45c3bba 93cd88b
Author: e.efremova <[email protected]>
Date:   Thu Oct 6 11:11:40 2022 +0300

    Merge remote-tracking branch 'origin/dev' into login_and_dashboard

commit 45c3bba4b4695b8b9fdb4e7050b8a90ec1781358
Author: e.efremova <[email protected]>
Date:   Mon Oct 3 19:55:53 2022 +0300

    Add login page and dashboard-draft page

tms/core/selectors/projects.py

@@ -0,0 +1,10 @@
+from django.db.models import QuerySet
+
+from core.models import Project
+
+
+class ProjectSelector:
+
+    @staticmethod
+    def project_list() -> QuerySet[Project]:
+        return QuerySet(model=Project).order_by('name')

tms/templates/tms/auth.html

@@ -0,0 +1,51 @@
+{% extends 'tms/base.html' %}
+
+{% block content %}
+  <section class="stars vh-100">
+    <div class="container">
+      <form action="{% url 'index' %}" method="post">
+        {% csrf_token %}
+        <div class="row d-flex justify-content-center align-items-center vh-100">
+          <div class="col-5">
+            <div class="card bg-dark bg-opacity-25 text-white" style="border-radius: 1rem;">
+              <div class="card-body p-5 text-center">
+                <div class="mb-md-5 mt-md-4">
+                  <h2 class="h2 mb-3 pb-5 fw-light"> Test Management System </h2>
+
+                  {% if login_form.non_field_errors %}
+                  <div class="alert alert-danger">
+                    {% for error in login_form.non_field_errors %}
+                      <p class="fw-light"> {{ error }} </p>
+                    {% endfor %}
+                  </div>
+                  {% endif %}
+
+                  <div class="form-outline form-white mb-4">
+                    <input name="username" class="form-control" id="username" placeholder="USERNAME">
+                    {% if login_form.username.errors %}
+                      {% for error in login_form.username.errors %}
+                        <small class="help-block">{{ error }}</small>
+                      {% endfor %}
+                    {% endif %}
+                  </div>
+                  <div class="form-outline form-white mb-4">
+                    <input name="password" type="password" class="form-control" id="password" placeholder="PASSWORD">
+                    {% if login_form.password.errors %}
+                      {% for error in login_form.password.errors %}
+                        <small class="help-block">{{ error }}</small>
+                      {% endfor %}
+                    {% endif %}
+                  </div>
+
+                  <div class="form-outline form-white mb-4">
+                    <button class="btn btn-lg btn-outline-light text-uppercase mt-3 px-5" type="submit">Login</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </section>
+{% endblock %}

tms/templates/tms/base.html

@@ -0,0 +1,27 @@
+{% load static %}
+
+<html lang="en">
+<head>
+    <!-- Required meta tags -->
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" type="text/css" href="{% static 'tms/css/bootstrap.min.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'tms/css/bootstrap-grid.min.css' %}">
+    <!-- Custom CSS -->
+    <link rel="stylesheet" type="text/css" href="{% static 'tms/css/base.css' %}">
+    <title>TMS | {% block title %}Base template{% endblock %}</title>
+</head>
+<body>
+    {% block header %}{% endblock %}
+    <div class="content-wrap">
+        {% block content %}{% endblock %}
+    </div>
+    {% block javascripts %}
+        <script src="{% static 'tms/js/bootstrap.bundle.min.js' %}"></script>
+    {% endblock %}
+</body>
+</html>

tms/templates/tms/base_page.html

@@ -0,0 +1,21 @@
+{% extends 'tms/base.html' %}
+
+{% block header %}
+    {% include "tms/components/header.html" %}
+{% endblock %}
+
+{% block content %}
+    <div class="content p-2">
+        <div class="page-content-header">
+            {% block page-content-header %}{% endblock %}
+        </div>
+
+        <div class="page-content-tabs">
+            {% block page-content-tabs %}{% endblock %}
+        </div>
+
+        <div class="page-content-body p-2">
+            {% block page-content %}{% endblock %}
+        </div>
+    </div>
+{% endblock %}

tms/templates/tms/components/card.html

@@ -0,0 +1,21 @@
+{% load static %}
+
+<div class="card mb-2 bg-light">
+    <div class="card-body align-items-stretch">
+        <div class="d-flex">
+            <div class="align-self-center flex-shrink-0">
+                <img src="{% static 'tms/images/project.svg' %}" style="width: 32px">
+            </div>
+
+            <div class="flex-grow-1 ms-3">
+                <h5 class="card-title">{{ project.name }}</h5>
+                <h6 class="card-subtitle mb-2 fw-light text-muted">{{ project.description|linebreaks }}</h6>
+
+                <a href="#" class="card-link fw-light text-decoration-none">Test Runs</a>
+                <div class="vr p-0"></div>
+                <a href="#" class="card-link fw-light text-decoration-none">Test Suites</a>
+            </div>
+            <a href="#" class="stretched-link"></a>
+        </div>
+    </div>
+</div>

tms/templates/tms/components/header.html

@@ -0,0 +1,30 @@
+{% load static %}
+
+<header>
+  <nav class="navbar navbar-expand navbar-dark p-0" >
+    <div class="container-fluid bg-dark px-3">
+        <a class="navbar-brand fw-light" style="font-size: 2em;" href="{% url 'index' %}"> TMS </a>
+      <div class="collapse navbar-collapse">
+        <ul class="navbar-nav me-auto">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="{% url 'index' %}"> Dashboard </a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#"> Administration </a>
+          </li>
+        </ul>
+          <ul class="navbar-nav">
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle text-white" href="#"
+                 id="navbarUserProfileDropdown" role="button" data-bs-toggle="dropdown">
+                {{ user.username }}
+              </a>
+              <ul class="dropdown-menu dropdown-menu-end ng-light" aria-labelledby="navbarUserProfileDropdown">
+                <li><a class="dropdown-item" href="{% url 'logout' %}"> Logout </a></li>
+              </ul>
+            </li>
+          </ul>
+      </div>
+    </div>
+  </nav>
+</header>

tms/templates/tms/dashboard.html

@@ -0,0 +1,32 @@
+{% extends 'tms/base_page.html' %}
+
+{% block page-content %}
+
+<div class="content">
+    <div class="container-fluid">
+        <div class="card border-0 mt-3 mb-5">
+            <div class="card-body text-center px-0" style="min-height: 250px; background: #ddd;">
+                Reserved for graph...
+            </div>
+        </div>
+
+        <div class="card border-0">
+            <nav class="navbar navbar-light">
+                <a class="navbar-brand">Projects</a>
+                <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">New project</button>
+            </nav>
+            <hr class="my-0">
+            <div class="card-body px-0">
+                <div class="row">
+                    <div class="list-group">
+                        {% for project in projects %}
+                            {% include "tms/components/card.html" with project=project %}
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}

tms/tms/settings/common.py

@@ -56,7 +56,9 @@
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [
+            os.path.join(BASE_DIR, 'templates'),
+        ],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -83,6 +85,10 @@
     }
 }
 
+LOGIN_URL = '/'
+LOGIN_REDIRECT_URL = '/'
+LOGOUT_REDIRECT_URL = '/'
+
 # Password validation
 # https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators
 
@@ -123,6 +129,10 @@
 
 STATIC_URL = '/static/'
 
+STATICFILES_DIRS = [
+    BASE_DIR / 'tms_static',
+]
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
 

tms/tms/urls.py

@@ -16,8 +16,14 @@
 from django.contrib import admin
 from django.urls import include, path
 from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView
+from django.contrib.auth import views as auth_views
+
+import views
 
 urlpatterns = [
+    path('', views.IndexView.as_view(), name='index'),
+    path('logout/', auth_views.LogoutView.as_view(), name='logout'),
+
     # API
     path('api/', include('tms.api.urls', namespace='api')),
     path('api/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),

tms/tms_static/tms/css/base.css

@@ -0,0 +1,8 @@
+.stars {
+    background: #000 url(../images/stars.png) repeat top center;
+    z-index: 0;
+}
+
+.icon {
+    color: #FFF;
+}

tms/views.py

@@ -0,0 +1,28 @@
+from django.contrib.auth import login
+from django.contrib.auth.forms import AuthenticationForm
+from django.shortcuts import render, redirect, resolve_url
+
+from core.selectors.projects import ProjectSelector
+from tms.settings.common import LOGIN_REDIRECT_URL
+from django.views import View
+
+
+class IndexView(View):
+    form_class = AuthenticationForm
+    auth_template = 'tms/auth.html'
+    dashboard_template = 'tms/dashboard.html'
+
+    def get(self, request, *args, **kwargs):
+        if not request.user.is_authenticated:
+            return render(request, self.auth_template)
+
+        projects = ProjectSelector.project_list()
+        return render(request, self.dashboard_template, {'projects': projects})
+
+    def post(self, request, *args, **kwargs):
+        login_form = self.form_class(request=request, data=request.POST)
+        if login_form.is_valid():
+            login(request, login_form.get_user())
+            return redirect(resolve_url(LOGIN_REDIRECT_URL))
+        else:
+            return render(request, self.auth_template, {'login_form': login_form})