Merge pull request #90 from DDMAL/user-login

Basic UI & functionality for login, logout, change pwd

web-app/django/VIM/apps/main/models.py

@@ -1,3 +1,3 @@
-from django.db import models
-
-# Create your models here.
+from django.db import models
+
+# Create your models here.

web-app/django/VIM/apps/main/static/main/css/login.css

@@ -0,0 +1,58 @@
+.login-form {
+    color: #435334;
+}
+
+input {
+    border: 1px solid #9EB384;
+    border-radius: 4px;
+    background-color: #FAF1E4;
+    padding: 5px;
+    color: #435334;
+    margin: 0 10px;
+}
+
+input:hover {
+    border: 1px solid #435334;
+    background-color: #FAF1E4;
+    color: #435334;
+}
+
+input:focus {
+    border: 1px solid #435334;
+    box-shadow: 0 0 5px #9EB384;
+    outline: none;
+}
+
+input::placeholder {
+    color: #9EB384;
+}
+
+.btn-primary {
+    background-color: #435334;
+    border: 1px solid #435334;
+}
+
+.btn-primary:hover {
+    background-color: #9EB384;
+    border: 1px solid #9EB384;
+}
+
+p {
+    color: #435334;
+}
+
+a {
+    color: #435334;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+a:hover {
+    color: #9EB384;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+.errorlist {
+    color: red;
+}

web-app/django/VIM/apps/main/templates/registration/change_password.html

@@ -0,0 +1,48 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}
+Login
+{% endblock %}
+
+{% block css_files %}
+<link rel="stylesheet" type="text/css" href="{% static 'main/css/login.css' %}">
+{% endblock %}
+
+{% block content %}
+<div class="container">
+    <div class="row">
+        <div class="mr-3 p-4 col-md-8">
+            {% if form.errors %}
+            <div class="alert alert-danger alert-dismissible">
+                {% for field, error in form.errors.items %}
+                    {{ error }}
+                {% endfor %}
+            </div>
+            {% endif %}
+            <div class="col-md mt-4 login-form" id="change-password">
+                <h5 class="mb-4"><strong>Change Password</strong></h5>
+                <form method="post">
+                    {% csrf_token %}
+                    <div class="mb-4">
+                        <label for="exampleInputPassword0" class="form-label">Current Password</label>
+                        {{ form.old_password }}
+                    </div>
+                    <div class="mb-4">
+                        <label for="exampleInputPassword1" class="form-label">New Password</label>
+                        {{ form.new_password1 }}
+                    </div>
+                    <div class="mb-4">
+                        <label for="exampleInputPassword2" class="form-label">Confirm New Password</label>
+                        {{ form.new_password2 }}
+                    </div>
+                    <button type="submit" class="btn btn-primary">Change Password</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block script %}
+{% endblock %}

web-app/django/VIM/apps/main/templates/registration/login.html

@@ -0,0 +1,56 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}
+Login
+{% endblock %}
+
+{% block css_files %}
+<link rel="stylesheet" type="text/css" href="{% static 'main/css/login.css' %}">
+{% endblock %}
+
+{% block content %}
+<div class="container">
+    <div class="row">
+        <div class="mr-3 p-4 col-md-6">
+            {% if messages %}
+            <div class="alert alert-success alert-dismissible">
+                {% for message in messages %}
+                    {{ message }}
+                {% endfor %}
+            </div>
+            {% endif %}
+            {% if form.errors %}
+            <div class="alert alert-danger alert-dismissible">
+                {% for field, error in form.errors.items %}
+                    {{ error }}
+                {% endfor %}
+            </div>
+            {% endif %}
+            <div class="col-md mt-4 login-form" id="login">
+                <h5><strong>Login for Contributors</strong></h5>
+                <form method="post">
+                    {% csrf_token %}
+                    <div class="mt-4 mb-4">
+                        <label for="exampleInputEmail" class="form-label">Email Address</label>
+                        {{ form.username }}
+                    </div>
+                    <div class="mb-4">
+                        <label for="exampleInputPassword" class="form-label">Password</label>
+                        {{ form.password }}
+                    </div>
+                    <button type="submit" class="btn btn-primary">Sign in</button>
+                  </form>
+            </div>
+            <div class="col-md mt-4 create-account-link">
+                <p>Don't have an account? 
+                    <a href="{% url 'main:register' %}">Create a new account</a>
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block script %}
+{% endblock %}

web-app/django/VIM/apps/main/templates/registration/register.html

@@ -0,0 +1,48 @@
+{% extends "base.html" %}
+{% load static %}
+
+{% block title %}
+Register
+{% endblock %}
+
+{% block css_files %}
+<link rel="stylesheet" type="text/css" href="{% static 'main/css/login.css' %}">
+{% endblock %}
+
+{% block content %}
+<div class="container">
+    <div class="row">
+        <div class="mr-3 p-4 col-md-8">
+            {% if form.errors %}
+            <div class="alert alert-danger alert-dismissible">
+                {% for field, error in form.errors.items %}
+                    {{ error }}
+                {% endfor %}
+            </div>
+            {% endif %}
+            <div class="col-md mt-4 login-form" id="registration">
+                <h5 class="mb-4"><strong>Create a New Account</strong></h5>
+                <form method="post">
+                    {% csrf_token %}
+                    <div class="mt-4 mb-4">
+                        <label for="exampleInputEmail" class="form-label">Email Address</label>
+                        {{ form.username }}
+                    </div>
+                    <div class="mb-4">
+                        <label for="exampleInputPassword1" class="form-label">Password</label>
+                        {{ form.password1 }}
+                    </div>
+                    <div class="mb-4">
+                        <label for="exampleInputPassword2" class="form-label">Confirm Password</label>
+                        {{ form.password2 }}
+                    </div>
+                    <button type="submit" class="btn btn-primary">Register</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block script %}
+{% endblock %}

web-app/django/VIM/apps/main/urls.py

@@ -1,9 +1,34 @@
 from django.urls import path
+from django.contrib.auth import views as auth_views
 from . import views
 
 app_name = "main"
 
 urlpatterns = [
     path("", views.home, name="home"),
     path("about/", views.about, name="about"),
+    path("register/", views.register, name="register"),
+    path(
+        "accounts/logout/",
+        auth_views.LogoutView.as_view(next_page="main:home"),
+        name="logout",
+    ),
+    path(
+        "change-password/",
+        auth_views.PasswordChangeView.as_view(
+            template_name="registration/change_password.html",
+            success_url="/",
+        ),
+        name="change_password",
+    ),
+    path(
+        "accounts/login/",
+        auth_views.LoginView.as_view(
+            template_name="registration/login.html",
+            redirect_authenticated_user=True,
+            redirect_field_name="next",
+            next_page="main:home",
+        ),
+        name="login",
+    ),
 ]

web-app/django/VIM/apps/main/views.py

@@ -1,4 +1,7 @@
+from django.contrib.auth import login
 from django.shortcuts import render
+from django.shortcuts import redirect
+from django.contrib.auth.forms import UserCreationForm
 
 
 def home(request):
@@ -7,3 +10,16 @@ def home(request):
 
 def about(request):
     return render(request, "main/about.html", {"active_tab": "about"})
+
+
+def register(request):
+    if request.method == "POST":
+        form = UserCreationForm(request.POST)
+        if form.is_valid():
+            user = form.save()
+            login(request, user)
+            return redirect("main:home")
+    else:
+        form = UserCreationForm()
+
+    return render(request, "registration/register.html", {"form": form})

web-app/django/VIM/templates/base.html

@@ -37,7 +37,21 @@
         </form>
 
         <div class="text-end d-flex">
-          <button type="button" class="btn me-2 login-btn">Login</button>
+          {% if user.is_authenticated %}
+            <div class="dropdown me-3">
+              <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                {{ user.username }}
+              </button>
+              <ul class="dropdown-menu" aria-labelledby="userDropdown">
+                <li><a class="dropdown-item" href="{% url 'main:change_password' %}">Change Password</a></li>
+                <li><a class="dropdown-item" href="{% url 'main:logout' %}">Log out</a></li>
+              </ul>
+            </div>
+          {% else %}
+            <a href="{% url 'main:login' %}">
+              <button type="button" class="btn me-2 login-btn">Login</button>
+            </a>
+          {% endif %}
           <div id="google_translate_element" class="d-flex align-items-center position-relative">
             <span id="page-language-badge" 
               class="position-absolute top-0 end-0 translate-middle-y badge rounded-pill bg-secondary"