Feature: Add change password functionality & GitHub repo link (#16)

* Add change password functionality & GitHub repo link + Add password change functionality + Add /manage route, manage_account view urls.py & views.py respectively and manage_account template + Add GitHub Repo Link in Footer with GitHub Icon + Refactor CSS * Adjust position & style of repo link in footer
aqib-m31 · Oct 4, 2024 · ba2d1bc · ba2d1bc
1 parent 29d993e
commit ba2d1bc
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 9 deletions.
diff --git a/drive/static/drive/GitHub_Invertocat_Light.png b/drive/static/drive/GitHub_Invertocat_Light.png
diff --git a/drive/static/drive/styles.css b/drive/static/drive/styles.css
@@ -5,11 +5,6 @@
     font-family: 'Montserrat', sans-serif;
 }
 
-.navbar,
-.navbar:first-child {
-    background: rgba(0, 0, 0, 0.9);
-}
-
 #share-store {
     font-family: 'Bebas Neue', sans-serif;
     font-size: 1.7rem;
@@ -53,4 +48,24 @@
     .sp-width {
         width: 100%;
     }
+}
+
+.github-link {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    top: -27px;
+    background-color: #343a40;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+#gh-logo-footer {
+    width: 25px;
+    height: 25px;
+}
+
+.github-link:hover {
+    background: linear-gradient(90deg, #7FE787, #58A7FE);
+    transform: scale(1.1);
 }
diff --git a/drive/templates/drive/layout.html b/drive/templates/drive/layout.html
@@ -6,6 +6,7 @@
 {% url 'upload' as upload %}
 {% url 'shared' as shared %}
 {% url 'shared_with_me' as shared_with_me %}
+{% url 'manage_account' as manage_account %}
 
 <!doctype html>
 <html lang="en">
@@ -24,7 +25,7 @@
     </head>
 
     <body class="container-fluid min-vh-100 p-0 m-0 d-flex flex-column">
-        <nav class="navbar navbar-expand-lg" data-bs-theme="dark">
+        <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
             <div class="container-fluid">
                 <a class="navbar-brand d-flex" href="{% url 'index' %}">
                     <img src="{% static 'drive/logo.png' %}" alt="Logo" width="40" height="40" class="d-inline-block align-text-top rounded-circle align-self-center">
@@ -49,6 +50,9 @@
                             <li class="nav-item">
                                 <a class="nav-link {% if request.path == shared_with_me %}active{% endif %}" aria-current="page" href="{% url 'shared_with_me' %}">Shared with me</a>
                             </li>
+                            <li class="nav-item">
+                                <a class="nav-link {% if request.path == manage_account %}active{% endif %}" aria-current="page" href="{% url 'manage_account' %}">Manage Account</a>
+                            </li>
                             <li class="nav-item">
                                 <a class="nav-link {% if request.path == logout %}active{% endif %}" aria-current="page" href="{% url 'logout' %}">Logout</a>
                             </li>
@@ -75,7 +79,12 @@
         {% block body %}
         {% endblock %}
 
-        <footer class="footer mt-auto py-2 bg-dark position-sticky bottom-0">
+        <footer class="footer mt-auto py-2 bg-dark d-flex flex-column align-items-center position-sticky bottom-0">
+            <div class="github-link mb-2 d-flex justify-content-center align-items-center position-absolute" title="GitHub Repository">
+                <a href="https://github.com/aqib-m31/ShareStore" target="_blank">
+                    <img src="{% static 'drive/GitHub_Invertocat_Light.png' %}" alt="GitHub Logo" id="gh-logo-footer">
+                </a>
+            </div>
             <div class="container text-center">
                 <span class="text-secondary small">
                     Made with 💖 by <a class="text-secondary text-decoration-none fw-bold" href="https://github.com/aqib-m31" target="_blank">@aqib-m31</a>

diff --git a/drive/templates/drive/manage_account.html b/drive/templates/drive/manage_account.html
@@ -0,0 +1,44 @@
+{% extends 'drive/layout.html' %}
+
+{% load static %}
+{% block body %}
+    <div class="d-flex flex-column align-items-center justify-content-center p-3 flex-grow-1" style="background: black;">
+        <div class="container">
+            <div class="row justify-content-center">
+                <form action="{% url 'manage_account' %}" method="post" class="bg-dark p-4 rounded-3 col-lg-6 col-md-8 col-sm-10">
+                    {% csrf_token %}
+                    {% if message %}
+                        <div class="bg-danger rounded-3 p-1">
+                            <p class="text-center m-0">{{ message }}</p>
+                        </div>
+                    {% endif %}
+                    {% if errors %}
+                        <div class="bg-danger rounded-3 p-1">
+                            {% for error in errors %}
+                                <p class="text-center m-0" style="font-size: 12px;">{{ error }}</p>
+                            {% endfor %}
+                        </div>
+                    {% endif %}
+                    <h1 class="text-center my-3">Change Password</h1>
+                    <div class="mb-3">
+                        <input type="password" class="form-control pwd" id="current_password" name="current_password" placeholder="Current Password">
+                    </div>
+                    <div class="mb-3">
+                        <input type="password" class="form-control pwd" id="new_password" name="new_password" placeholder="New Password">
+                    </div>
+                    <div class="mb-3">
+                        <input type="password" class="form-control pwd" id="confirmation" name="confirmation" placeholder="Confirm New Password">
+                    </div>
+                    <div class="mb-3">
+                        <label for="showPassword"></label>
+                        <input type="checkbox" id="showPassword"> Show Password
+                    </div>
+                    <div class="mb-3 d-grid">
+                        <input type="submit" value="Change Passoword" class="btn btn-outline-light">
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+    <script src="{% static 'drive/showPassword.js' %}"></script>
+{% endblock %}
diff --git a/drive/urls.py b/drive/urls.py
@@ -13,5 +13,6 @@
     path("file/shared-with/<int:id>", views.shared_with, name="shared_with"),
     path("file/<int:id>", views.file, name="file"),
     path("permissions/<int:id>", views.manage_access, name="manage_access"),
-    path("ping", views.ping, name="ping")
+    path("ping", views.ping, name="ping"),
+    path("manage", views.manage_account, name="manage_account")
 ]
diff --git a/drive/views.py b/drive/views.py
@@ -5,7 +5,7 @@
 from dotenv import load_dotenv
 from time import time
 
-from django.contrib.auth import authenticate, login, logout
+from django.contrib.auth import authenticate, login, logout, update_session_auth_hash
 from django.contrib.auth.decorators import login_required
 from django.contrib.auth.password_validation import validate_password
 from django.core.exceptions import ValidationError
@@ -475,5 +475,72 @@ def manage_access(request, id):
     return JsonResponse({"error": "POST method required"}, status=400)
 
 
+@login_required(login_url="/login")
+def manage_account(request):
+    """
+    Handle user account management, specifically password change.
+
+    If the request method is POST, validate the current password, new password,
+    and confirmation. If successful, update the password and keep the user logged in.
+    If validation fails, display appropriate error messages.
+    """
+    if request.method == "POST":
+        current_password = request.POST["current_password"]
+        new_password = request.POST["new_password"]
+        confirmation = request.POST["confirmation"]
+
+        # Check if all fields are provided
+        if not len(current_password) or not len(new_password) or not len(confirmation):
+            return render(
+                request,
+                "drive/manage_account.html",
+                {
+                    "message": "All fields are required!",
+                },
+            )
+
+        # Check if new password and confirmation match
+        if new_password != confirmation:
+            return render(
+                request,
+                "drive/manage_account.html",
+                {
+                    "message": "New passwords must match!",
+                },
+            )
+
+        # Validate current password
+        if not request.user.check_password(current_password):
+            return render(
+                request,
+                "drive/manage_account.html",
+                {
+                    "message": "Current password is incorrect!",
+                },
+            )
+
+        # Validate new password
+        try:
+            validate_password(new_password, user=request.user)
+        except ValidationError as e:
+            errors = e.messages
+            return render(
+                request,
+                "drive/manage_account.html",
+                {
+                    "errors": errors,
+                },
+            )
+
+        # Update password & Keep the user logged in
+        request.user.set_password(new_password)
+        request.user.save()
+        update_session_auth_hash(request, request.user)
+
+        return HttpResponseRedirect(reverse("index"))
+
+    return render(request, "drive/manage_account.html")
+
+
 def ping(request):
     return JsonResponse({"msg": "pong", "info": "server is running"})