PdxCodeGuild · austenc-id · Jan 6, 2022 · Dec 14, 2021 · Dec 16, 2021 · Dec 16, 2021
diff --git a/4 Django/demo/picster/picster_proj/settings.py b/4 Django/demo/picster/picster_proj/settings.py
@@ -122,10 +122,16 @@
 # direct django to the project-level static folder
 STATICFILES_DIRS = [str(BASE_DIR.joinpath('static'))]
 
+# root directory for media files
+MEDIA_ROOT = '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'
 
 # redefine the default auth user model from our users app
-AUTH_USER_MODEL = 'users_app.User'
+AUTH_USER_MODEL = 'users_app.User'
+
+# tell django where to redirect if not logged in
+LOGIN_URL = '/users/login'
diff --git a/4 Django/demo/picster/static/images/avatars/leaves.jpg b/4 Django/demo/picster/static/images/avatars/leaves.jpg
diff --git a/4 Django/demo/picster/static/images/avatars/winter_forest.jpg b/4 Django/demo/picster/static/images/avatars/winter_forest.jpg
diff --git a/4 Django/demo/picster/templates/base.html b/4 Django/demo/picster/templates/base.html
@@ -33,10 +33,20 @@
     <title>Picster</title>
 </head>
 <body>
+    {% include 'partials/_navbar.html' %}
     <main class="container">
 
         {% if errors %}
-            {{errors}}
+        <div class="row w-100">
+            {% for error in errors %}
+            <div class="col-12 col-lg-6 offset-lg-3">
+                <div class="position-absolute start-50 translate-middle alert alert-danger alert-dismissible fade show d-flex align-items-center" role="alert">
+                    {{error}}
+                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                  </div>
+            </div>
+            {% endfor %}
+        </div>
         {% endif %}
 
         {% block content %}

diff --git a/4 Django/demo/picster/templates/partials/_navbar.html b/4 Django/demo/picster/templates/partials/_navbar.html
@@ -0,0 +1,42 @@
+{%load static%}
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="#">Picster</a>
+        <a href="" class='link-success'>
+            <i class="far fa-plus-square large-icon"></i>
+        </a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav w-100 d-flex justify-content-end">
+                <div class="d-flex gap-2">
+
+                    {% if request.user.is_authenticated %}
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Logout</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">
+                            <img src="{% static user.avatar.url %}" height=40 width=40 alt="{{user.username}}'s avatar">
+                        </a>
+                    </li>
+                </div>
+
+                {% else %}
+                <div class="d-flex gap-2">
+
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Features</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Pricing</a>
+                    </li>
+                </div>
+
+            </ul>
+            {% endif %}
+        </div>
+    </div>
+</nav>
diff --git a/4 Django/demo/picster/templates/users/detail.html b/4 Django/demo/picster/templates/users/detail.html
@@ -0,0 +1,68 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block content %}
+
+<div class="row">
+    <div class="col-12 col-lg-8 offset-lg-2 d-flex gap-3 flex-column align-items-center pt-5">
+        <h1 class="h1 py-2">{{user.username}}</h1>
+        {% if request.user == user %}
+            <a href="{% url 'users_app:update' user.username %}" class='link-secondary'>
+                <i class="fas fa-edit"></i>
+            </a>
+        {% endif %}
+        <img src="{% static user.avatar.url %}" alt="{{user.username}}'s avatar" class="rounded-circle shadow" height=250 width=250>
+    </div>
+
+    <div class="col-8 offset-2 col-lg-4 offset-lg-4 pt-5">
+        <table class="table">
+            <thead>
+              <tr>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">First</th>
+                <td>
+                    {% if user.first_name %}
+                    {{user.first_name}}
+                        {% else %}
+                        Not Provided
+                    {% endif %}
+                </td>
+              </tr>
+              <tr>
+                <th scope="row">Last</th>
+                <td>{% if user.last_name %}
+                    {{user.last_name}}
+                        {% else %}
+                        Not Provided
+                    {% endif %}</td>
+              </tr>
+              <tr>
+                <th scope="row">Joined</th>
+                <td colspan="2">{{user.date_joined|date}}</td>
+              </tr>
+              <tr>
+                <th scope="row">Pics</th>
+                <td colspan="2">0</td>
+              </tr>
+              <tr>
+                <th scope="row">Followers</th>
+                <td colspan="2">0</td>
+              </tr>
+              <tr>
+                <th scope="row">Following</th>
+                <td colspan="2">0</td>
+              </tr>
+            </tbody>
+          </table>
+    </div>
+</div>
+
+<h1 class="h1">Pics</h1>
+<div class="row d-flex justify-content-center pb-5 mb-5">
+    <!-- render user's pics -->
+</div>
+
+
+{% endblock content %}
diff --git a/4 Django/demo/picster/templates/users/login.html b/4 Django/demo/picster/templates/users/login.html
@@ -0,0 +1,25 @@
+{% extends 'base.html' %}
+
+{% block content %}
+    <h1 class="h1 text-center">Log in</h1>
+
+
+    <form action="{% url 'users_app:login' %}" method='POST' class='d-flex flex-column align-items-center gap-3'>
+
+        <!-- {{form}} will render the entire form -->
+        <fieldset>
+            <label for="id_username">{{form.username.label}}</label>
+            {{form.username}}
+        </fieldset>
+
+        <fieldset>
+            <label for="id_password">{{form.password.label}}</label>
+            {{form.password}}
+        </fieldset>
+
+        {% csrf_token %}
+
+        <button type='submit' class='btn btn-success'>Log in</button>
+    </form>
+
+{% endblock content %}
diff --git a/4 Django/demo/picster/templates/users/register.html b/4 Django/demo/picster/templates/users/register.html
@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 
 {% block content %}
-    <h1 class="h1">Register</h1>
+    <h1 class="h1 text-center">Register</h1>
 
 
     <form action="{% url 'users_app:register' %}" method='POST' class='d-flex flex-column align-items-center gap-3'>

diff --git a/4 Django/demo/picster/templates/users/update.html b/4 Django/demo/picster/templates/users/update.html
@@ -0,0 +1,25 @@
+{% extends 'base.html' %}
+{% load static %}
+
+
+{% block content %}
+
+    <div class="row">
+        <div class="col-12 col-lg-8 offset-lg-2 d-flex flex-column align-items-center pt-5">
+            <h1 class="h1 py-2">{{user.username}}</h1>
+            <img src="{% static user.avatar.url %}" alt="{{user.username}}'s avatar"
+            class='rounded-circle shadow' height=250 width=250>
+        </div>
+
+
+        <div class="col-10 offset-1 col-lg-4 offset-lg-4">
+            <form action="{% url 'users_app:update' user.username %}" enctype='multipart/form-data' method='POST' class='d-flex flex-column gap-2'>
+                {% csrf_token %}
+                {{form}}
+                <button type='submit' class='btn btn-success'>Update</button>
+            </form>
+        </div>
+
+    </div>
+
+{% endblock content %}
diff --git a/4 Django/demo/picster/users_app/urls.py b/4 Django/demo/picster/users_app/urls.py
@@ -4,5 +4,9 @@
 
 app_name = 'users_app'
 urlpatterns = [
-    path('register/', views.register, name='register')
+    path('register/', views.register, name='register'),
+    path('login/', views.login, name='login'),
+    path('logout/', views.logout, name='logout'),
+    path('<str:username>/', views.detail, name='detail'),
+    path('update/<str:username>/', views.update, name='update'),
 ]
diff --git a/4 Django/demo/picster/users_app/views.py b/4 Django/demo/picster/users_app/views.py
@@ -1,4 +1,11 @@
-from django.shortcuts import render, redirect, reverse
+from django.shortcuts import get_object_or_404, render, redirect, reverse
+from django.contrib.auth import (
+    get_user_model, # returns the AUTH_USER_MODEL variable's value from settings.py
+    authenticate,
+    login as django_login,
+    logout as django_logout
+)
+from django.contrib.auth.decorators import login_required
 
 from .forms import UserForm, UserAuthForm
 
@@ -39,7 +46,91 @@ def register(request):
         else:
             context = {
                 'form': UserAuthForm(),
-                'errors': form.errors
+                'errors': [value for value in form.errors.values()]
             }
 
-            return render(request, 'users/register.html', context)
+            return render(request, 'users/register.html', context)
+
+
+def login(request):
+    if request.method == 'GET':
+        # blank form
+        form = UserAuthForm()
+        return render(request, 'users/login.html', {'form': form})
+
+    elif request.method == 'POST':
+        # get the form data from the request
+        form = request.POST
+
+        username = form['username']
+        password = form['password']
+
+        # attempt authentication with the given credentials
+        user = authenticate(request, username=username, password=password)
+
+        # if the form credentials are not valid, render the login page with an error
+        if user is None:
+            context = {
+                'form': UserAuthForm(),
+                'errors': ['Invalid Username or Password']
+            }
+
+            return render(request, 'users/login.html', context)
+
+        else:
+
+            # login the user
+            django_login(request, user)
+
+            # redirect to the user's detail page
+            return redirect(reverse('users_app:detail', kwargs={'username': user.username}))
+
+
+def detail(request, username):
+    # find the desired user
+    user = get_object_or_404(get_user_model(), username=username)
+    return render(request, 'users/detail.html', {'user': user})
+
+@login_required
+def update(request, username):
+    user = get_object_or_404(get_user_model(), username=username)
+
+    if request.method == 'GET':
+        # create a UserForm with the current user data
+        form = UserForm(instance=user)
+
+        return render(request, 'users/update.html', {'form': form})
+
+    elif request.method == 'POST':
+        # create a UserForm with the form data and
+        # the User instance to which to apply the changes
+        form = UserForm(request.POST, instance=user)
+
+        # the file from the form will be within request.FILES 
+        # add the filename to the initial form data
+        new_avatar = request.FILES.get('avatar')
+
+        # if a file was uploaded, add it to the form
+        if new_avatar:
+            form.initial['avatar'] = new_avatar
+
+        if form.is_valid():
+            # update the user instance with the new data
+            form.save()
+
+            # redirect to the user's detail page
+            return redirect(reverse('users_app:detail', kwargs={'username': user.username}))
+
+        else:
+            errors = [value for value in form.errors.values()]
+            context = {
+                'user': user,
+                'errors': errors
+            }
+
+            return render(request, 'users/update.html', context)
+
+def logout(request):
+    django_logout(request)
+
+    return redirect(reverse('users_app:login'))