feat: add auth and login/logout views

2023-07-21 19:08:48 +02:00 · 2023-07-21 19:08:48 +02:00 · dfec5baeeb
commit dfec5baeeb
parent e5c89a266e
25 changed files with 158 additions and 8 deletions
--- a/app/authentication/init.py
+++ b/app/authentication/init.py
--- a/app/authentication/admin.py
+++ b/app/authentication/admin.py
@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
--- a/app/authentication/apps.py
+++ b/app/authentication/apps.py
@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class AuthenticationConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'authentication'
--- a/app/authentication/forms.py
+++ b/app/authentication/forms.py
--- a/app/authentication/migrations/init.py
+++ b/app/authentication/migrations/init.py
--- a/app/authentication/models.py
+++ b/app/authentication/models.py
@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
--- a/app/authentication/templates/authentication/login.html
+++ b/app/authentication/templates/authentication/login.html
@ -0,0 +1,39 @@
+{% extends 'core/base.html' %}
+{% block content %}
+<div class="flex flex-col justify-center items-center gap-2 py-4">
+  {% if form.errors %}
+    <div class="status-message error">
+      <p>Your username and password didn't match. Please try again.</p>
+    </div>
+  {% endif %}
+
+  {% if next %}
+    <div class="status-message error">
+      {% if user.is_authenticated %}
+        <p>Your account doesn't have access to this page. To proceed,
+          please login with an account that has access.</p>
+      {% else %}
+        <p>Please <a href="{% url 'login' %}">log in</a> to see this page.</p>
+      {% endif %}
+    </div>
+  {% endif %}
+
+  <form method="post" action="{% url 'login' %}">
+    {% csrf_token %}
+    <fieldset class="border border-accent p-4">
+      <legend>Please enter your login details</legend>
+      <div class="grid grid-cols-4 justify-center items-center gap-2">
+        <div class="col-span-1">{{ form.username.label_tag }}</div>
+        <div class="col-span-3">{{ form.username }}</div>
+        <div class="col-span-1">{{ form.password.label_tag }}</div>
+        <div class="col-span-3">{{ form.password }}</div>
+        <input class="col-span-4" type="submit" value="Log In">
+      </div>
+      <input type="hidden" name="next" value="{{ next }}">
+    </fieldset>
+  </form>
+
+  {# Assumes you set up the password_reset view in your URLconf #}
+  {% comment %}<p><a href="{% url 'password_reset' %}">Lost password?</a></p>{% endcomment %}
+</div>
+{% endblock content %}
--- a/app/authentication/templates/authentication/logout.html
+++ b/app/authentication/templates/authentication/logout.html
@ -0,0 +1,4 @@
+{% extends 'core/base.html' %}
+{% block content %}
+  <p>You have been logged out.</p>
+{% endblock content %}
--- a/app/authentication/tests.py
+++ b/app/authentication/tests.py
@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
--- a/app/authentication/urls.py
+++ b/app/authentication/urls.py
@ -0,0 +1,8 @@
+from django.urls import path
+
+from django.contrib.auth import views as auth_views
+
+urlpatterns = [
+    path("login/", auth_views.LoginView.as_view(template_name="authentication/login.html"), name="login"),
+    path("logout/", auth_views.LogoutView.as_view(template_name="authentication/logout.html"), name="logout"),
+]
--- a/app/authentication/views.py
+++ b/app/authentication/views.py
@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.
--- a/app/core/settings.py
+++ b/app/core/settings.py
@ -32,6 +32,8 @@ ALLOWED_HOSTS = []
 # Application definition

 INSTALLED_APPS = [
+    'core',
+    'authentication.apps.AuthenticationConfig',
    'medwings.apps.MedwingsConfig',
    'django.contrib.admin',
    'django.contrib.auth',
@ -104,6 +106,9 @@ AUTH_PASSWORD_VALIDATORS = [
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
 ]
+LOGIN_REDIRECT_URL = 'home'
+LOGIN_URL = 'login'
+LOGOUT_REDIRECT_URL = 'home'


 # Internationalization
--- a/app/medwings/templates/medwings/base.html
+++ b/app/medwings/templates/medwings/base.html
@ -13,14 +13,14 @@
  </head>
  <body class="global">
    <header class="global">
-      {% include 'medwings/navbar.html' %}
+      {% include 'core/navbar.html' %}
    </header>
    <main class="global">
      {% block content %}
      {% endblock content %}
    </main>
    <footer class="global">
-      {% include 'medwings/footer.html' %}
+      {% include 'core/footer.html' %}
    </footer>
    <script src="{% static 'dist/main.js' %}"></script>
  </body>
--- a/app/core/templates/core/footer.html
+++ b/app/core/templates/core/footer.html
@ -0,0 +1,3 @@
+<div class="flex gap-4 justify-center items-center p-2 bg-background-700 text-sm">
+  <p>&copy; 2023 Julian Lobbes</p>
+</div>
--- a/app/medwings/templates/medwings/navbar.html
+++ b/app/medwings/templates/medwings/navbar.html
@ -1,4 +1,4 @@
-<nav class="flex gap-2 p-2 bg-background-800">
+<nav class="flex gap-4 items-center p-2 bg-background-800 font-bold text-2xl">
  <a href="/">
    <div class="bg-background-400 p-2 rounded rounded-xl">
      <svg class="h-8 w-auto" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
@ -44,4 +44,11 @@
      </svg>
    </div>
  </a>
+  <a href="/">Home</a>
+  <div class="grow"></div>
+  {% if request.user.is_authenticated %}
+    <a class="btn-outline text-lg" href="{% url 'logout' %}">Log Out</a>
+  {% else %}
+    <a class="btn text-lg" href="{% url 'login' %}">Log In</a>
+  {% endif %}
 </nav>
--- a/app/core/urls.py
+++ b/app/core/urls.py
@ -3,5 +3,6 @@ from django.urls import include, path

 urlpatterns = [
    path('', include('medwings.urls')),
+    path('auth/', include('authentication.urls')),
    path('admin/', admin.site.urls),
 ]
--- a/app/medwings/templates/medwings/footer.html
+++ b/app/medwings/templates/medwings/footer.html
@ -1,3 +0,0 @@
-<div>
-  <p>Footer stuff.</p>
-</div>
--- a/app/medwings/templates/medwings/index.html
+++ b/app/medwings/templates/medwings/index.html
@ -1,4 +1,4 @@
-{% extends 'medwings/base.html' %}
+{% extends 'core/base.html' %}
 {% load static %}
 {% block title %}
  Medwings | Home
--- a/app/medwings/urls.py
+++ b/app/medwings/urls.py
@ -3,5 +3,5 @@ from django.urls import path
 from . import views

 urlpatterns = [
-    path("", views.index, name="index"),
+    path("", views.index, name="home"),
 ]
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@ -33,6 +33,34 @@ h6 {
  font-size: 1rem;
 }

+input {
+  @apply rounded rounded-md drop-shadow-sm px-2 py-1;
+  @apply bg-accent-100;
+  @apply w-full;
+}
+
+input[type="submit"] {
+  @apply rounded rounded-lg drop-shadow-md px-4 py-2;
+  @apply bg-accent-600;
+  @apply font-semibold;
+  @apply hover:drop-shadow-xl;
+}
+
+a.btn {
+  @apply rounded rounded-lg drop-shadow-md px-4 py-2;
+  @apply bg-accent-600;
+  @apply font-semibold;
+  @apply hover:drop-shadow-xl;
+}
+
+a.btn-outline {
+  @apply rounded rounded-lg drop-shadow-md px-4 py-2;
+  @apply text-accent-600 bg-accent-600/10;
+  @apply border-2 border-accent-600;
+  @apply font-semibold;
+  @apply hover:drop-shadow-xl;
+}
+
 body.global {
  min-height: 100vh;
  width: 100%;
@ -47,3 +75,16 @@ header.global, main.global, footer.global {
 main.global {
  flex-grow: 1;
 }
+
+div.status-message {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+}
+
+div.status-message.error {
+  @apply bg-failure/50;
+}
--- a/assets/main.js
+++ b/assets/main.js
@ -1,2 +1,5 @@
 import './css/styles.css';
+import 'htmx.org';
 import './ts/index.ts';
+
+window.htmx = require('htmx.org');
--- a/assets/ts/index.ts
+++ b/assets/ts/index.ts
@ -1 +1,10 @@

+const navbarToggleButton = document.querySelector('#navbarToggleButton');
+
+button.addEventListener('click', () => {
+  if (button.textContent === 'Click me') {
+    button.textContent = 'Clicked';
+  } else {
+    button.textContent = 'Click me';
+  }
+});
--- a/development.docker-compose.yml
+++ b/development.docker-compose.yml
@ -36,6 +36,7 @@ services:
      - ./app/manage.py:/app/manage.py:ro
      - ./app/requirements.txt:/app/requirements.txt:ro
      - ./app/core/:/app/core:ro
+      - ./app/authentication/:/app/authentication:ro
      - ./app/medwings/:/app/medwings:ro
      - ./app/static/:/app/static:ro
    environment:
--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,9 @@
      "name": "medwings",
      "version": "0.0.1",
      "license": "AGPL-3.0",
+      "dependencies": {
+        "htmx.org": "^1.9.3"
+      },
      "devDependencies": {
        "autoprefixer": "^10.4.14",
        "parcel": "^2.9.3",
@ -2924,6 +2927,14 @@
        "entities": "^3.0.1"
      }
    },
+    "node_modules/htmx.org": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-1.9.3.tgz",
+      "integrity": "sha512-gsOttHnAcs/mXivSSYAIPF7hwksGjobb65MyZ46Csj2sJa1bS21Pfn5iag1DTm3GQ1Gxxx2/hlehKo6qfkW1Eg==",
+      "engines": {
+        "node": "15.x"
+      }
+    },
    "node_modules/import-fresh": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
--- a/package.json
+++ b/package.json
@ -21,5 +21,8 @@
    "parcel": "^2.9.3",
    "postcss": "^8.4.26",
    "tailwindcss": "^3.3.3"
+  },
+  "dependencies": {
+    "htmx.org": "^1.9.3"
  }
 }