Adding user picture and username to navbar.

When the user is logged into Hotails, they'll see their profile picture,
and their username in every page on Hotails on the navbar.

Signed-off-by: Ofir Matasas <[email protected]>
Signed-off-by: tamirmatok <[email protected]>

Hotails/settings.py

@@ -41,6 +41,7 @@
     'review.apps.ReviewConfig',
     'orders.apps.OrdersConfig',
     'message.apps.MessageConfig',
+    'crispy_forms',
 ]
 
 MIDDLEWARE = [
@@ -66,6 +67,7 @@
                 'django.template.context_processors.request',
                 'django.contrib.auth.context_processors.auth',
                 'django.contrib.messages.context_processors.messages',
+                'main.context_processors.navbar_extras'
             ],
         },
     },
@@ -121,7 +123,10 @@
     BASE_DIR / "static",
 ]
 
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+LOGIN_REDIRECT_URL = 'index'
+LOGIN_URL = 'login'

Hotails/urls.py

@@ -15,10 +15,15 @@
 """
 from django.contrib import admin
 from django.urls import path, include
-
+from main import views
+from django.contrib.auth import views as auth_views
 
 urlpatterns = [
     path('admin/', admin.site.urls),
-    path('', include('main.urls')),
-
+    path('', views.index, name='index'),
+    path('login/', auth_views.LoginView.as_view(template_name='main/login.html',
+                                                redirect_authenticated_user=True), name='login'),
+    path('homepage/', views.homepage, name='homepage'),
+    path('logout/', views.logout_view, name='logout'),
+    path('about/', views.about, name='about'),
 ]

Pipfile

@@ -5,6 +5,7 @@ name = "pypi"
 
 [packages]
 django = "*"
+django-crispy-forms = "*"
 pytest = "*"
 
 [dev-packages]

main/context_processors.py

@@ -0,0 +1,21 @@
+from daycare.models import DayCare, Image
+from dogowner.models import DogOwner
+
+
+def navbar_extras(request):
+    navbar_picture_url = navbar_name = None
+    if request.user.is_authenticated:
+        if DogOwner.objects.filter(user=request.user).exists():
+            dog_owner = DogOwner.objects.filter(user=request.user).first()
+            navbar_picture_url = dog_owner.dog_picture_url
+            navbar_name = dog_owner.first_name + ' ' + dog_owner.last_name
+
+        elif DayCare.objects.filter(user=request.user).exists():
+            daycare = DayCare.objects.filter(user=request.user).first()
+            navbar_picture_url = Image.objects.filter(daycare_id=daycare).first().url
+            navbar_name = daycare.name
+    context = {
+        'navbar_picture_url': navbar_picture_url,
+        'navbar_name': navbar_name,
+    }
+    return context

main/templates/main/base_template.html

@@ -12,32 +12,43 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
         integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+    <link rel="stylesheet" href="{% static 'css/sidebar.css' %}">
     {% block stylesheets %}
     {% endblock %}
 </head>
 <header>
-    <nav class="navbar navbar-expand-lg navbar-light bg-dark">
+    <nav class="navbar navbar-expand-lg navbar-light bg-dark" style="padding: 0 10px 0 10px;">
         <a class="navbar-brand" href="..\">
-            <img src="..\..\..\static\images\Hotails-logo-smaller.png" style="width:50px; height:50px;" class="d-inline-block align-top" loading="lazy"></a>
-        <button class="navbar-toggler" type="button" data-target="#navbarText"
-            aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
-        </button>
-            <ul class="navbar-nav mr-auto">
+            <img src="{% static 'images/Hotails-logo-smaller.png' %}" style="width:50px; height:50px;" class="d-inline-block align-top" loading="lazy">
+        </a>
+        <button class="navbar-toggler" type="button" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"></button>
+        <ul class="navbar-nav mr-auto">
+            {% if request.user.is_authenticated %}
                 <li class="nav-item"><a class="nav-link text-white" href="">Profile</a></li>
                 <li class="nav-item"><a class="nav-link text-white" href="">Orders</a></li>
                 <li class="nav-item"><a class="nav-link text-white" href="">Search</a></li>
                 <li class="nav-item"><a class="nav-link text-white" href="">Chats</a></li>
-                <li class="nav-item"><a class="nav-link text-white" href="/about">About</a></li>
-            </ul>
+            {% endif %}
+            <li class="nav-item"><a class="nav-link text-white" href="/about">About</a></li>
+        </ul>
+        {% if request.user.is_authenticated %}
         <ul class="nav navbar-nav navbar-right">
-            <li class="nav-item"><a class="nav-link text-white" style="font-size:1.3rem" href="#">Logout</a></li>
+            <li class="nav-item"><img src="{{ navbar_picture_url }}" alt="{{ name }} image" class="card-img-top sidebar-profile-img"></li>
+            <li class="nav-item">
+                <span id="welcomeMsg">Welcome, {{ navbar_name }}!</span><a class="nav-link" id="logoutHref" href="/logout">Logout</a>
+            </li>
         </ul>
+        {% endif %}
     </nav>
 </header>
-
 <body>
-    {% block content %}
-    {% endblock %}
+    <div class="row">
+        <div class="col-12 col-lg-12">
+            {% block content %}
+            {% endblock %}
+        </div>
+    </div>
+
 </body>
 
 </html>

main/templates/main/homepage.html

@@ -1,6 +1,5 @@
 {% extends "main/base_template.html" %}
+{% load static %}
 {% block content %}
-
-<h1>Coming soon...</h1>
-
+    <h1>Coming soon...</h1>
 {% endblock %}

main/templates/main/login.html

@@ -0,0 +1,38 @@
+{% extends "main/base_template.html" %}
+{% load crispy_forms_tags %}
+{%  load static %}
+
+{% block stylesheets %}
+    <!-- Bootstrap core CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}">
+    <title>Hotails.com - Login!</title>
+{% endblock %}
+
+{% block content %}
+
+    <section>
+        <div class="text-box">
+            <h1>Login now!</h1>
+            <div class="card" style="color: rgb(0, 0, 0); background: rgba(252, 252, 252, 0.3); width: 500px;">
+                <div class="card-body">
+                    <form method="POST">
+                        {% csrf_token %}
+                        <fieldset class="form-group">
+                            {{form|crispy}}
+                        </fieldset>
+                        <div class="form-group">
+                            <button class="btn btn-primary mt-3" type="submit">Lets Go!</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
+    crossorigin="anonymous"></script>
+
+{% endblock %}

main/tests.py

@@ -1,14 +1,97 @@
 import pytest
+from dogowner.models import DogOwner
+
+
+@pytest.fixture
+def create_dog_owner_user():
+    return DogOwner.create(email='[email protected]',
+                           username='dogOwnerUser01',
+                           password='password123',
+                           dog_name='dog name',
+                           first_name='test',
+                           last_name='user',
+                           phone_number=1234567890,
+                           dog_race='dog race',
+                           dog_picture_url='https://www.google.com/user1.jpg',
+                           dog_age=4,
+                           dog_weight=2,
+                           dog_gender='M'
+                           )
 
 
 @pytest.mark.django_db
-class TestViews:
+class TestAboutView:
     def test_redirected_to_about_section(self, client):
         response = client.get('/about')
         assert response.status_code == 301
         response = client.get(response.url)
         assert response.status_code == 200
 
-    def test_redirected_to_homepage(self, client):
-        response = client.get('')
+
+@pytest.mark.django_db
+class TestLoginView:
+    def test_enter_login_page(self, client):
+        response = client.get('/login/')
         assert response.status_code == 200
+
+    def test_valid_login_dog_owner_user_info(self, client, create_dog_owner_user):
+        previous_logged_user = client.get('/').wsgi_request.user
+        form = {'username': 'dogOwnerUser01',
+                'password': 'password123',
+                }
+
+        response = client.post('/login/', form, follow=True)
+        current_log_user = response.wsgi_request.user
+        assert current_log_user == create_dog_owner_user.user
+        assert previous_logged_user != current_log_user
+
+    def test_invalid_login_dog_owner_user_info(self, client):
+        form = {'username': "[email protected]",
+                'password': "incorrect",
+                }
+        response = client.post('/login/', form, follow=True)
+        assert response.wsgi_request.user.is_anonymous
+
+    def test_block_logged_user_from_login_page(self, client, create_dog_owner_user):
+        client.force_login(user=create_dog_owner_user.user)
+        response = client.get("/login/")
+        assert response['Location'] == '/'
+
+
+@pytest.mark.django_db
+class TestLogoutView:
+    def test_successful_logout(self, client, create_dog_owner_user):
+        client.force_login(user=create_dog_owner_user.user)
+        logged_user = client.get('/').wsgi_request.user
+        response = client.get('/logout/')
+        assert response['Location'] == '/login/'
+        assert response.wsgi_request.user != logged_user
+
+
+@pytest.mark.django_db
+class TestIndexView:
+    def test_root_entrypoint_redirection_unlogged_user(self, client):
+        response = client.get("/")
+        assert response.status_code == 302
+        assert response['Location'] == '/login/'
+
+    def test_root_entrypoint_redirection_logged_user(self, client, create_dog_owner_user):
+        client.force_login(user=create_dog_owner_user.user)
+        response = client.get("/")
+        assert response.status_code == 302
+        assert response['Location'] == '/homepage/'
+
+
+class TestHomepageView:
+    def test_unlogged_user_access_to_homepage(self, client):
+        response = client.get("/homepage/")
+        assert response.status_code == 302
+        assert response['Location'] == '/login/?next=/homepage/'
+
+
+class TestAboutView:
+    def test_redirected_to_about_section(self, client):
+        response = client.get('/about')
+        assert response.status_code == 301
+        response = client.get(response.url)
+        assert response.status_code == 200

main/urls.py

@@ -1,7 +1,12 @@
 from django.urls import path
+from django.contrib.auth import views as auth_views
 from . import views
 
 urlpatterns = [
-    path('', views.homepage, name='homepage'),
-    path('about/', views.about, name='about'),
+
+    path('', views.index, name='index'),
+    path('homepage/', views.homepage, name='homepage'),
+    path('login/', auth_views.LoginView.as_view(template_name='main/login.html',
+                                                redirect_authenticated_user=True), name='login'),
+    path('logout/', views.logout_view, name='logout')
 ]