Merge pull request #23 from AnimalFoodBank:feature/20231106-login-ui

Add login endpoint with templates and pinia

.pre-commit-config.yaml

@@ -18,6 +18,7 @@ repos:
       - id: end-of-file-fixer
       - id: check-yaml
       - id: check-added-large-files
+        args: ['--maxkb=1000']
 
   - repo: https://github.com/psf/black
     rev: 22.10.0

README.md

@@ -70,6 +70,11 @@ https://vuejs.org/guide/scaling-up/tooling.html#project-scaffolding
 
     # run the development server with a specific host
     $ ./manage.py runserver
+
+    # With django-extensions installed, you can run the
+    # development server with Werkzeug's debugger.
+    # https://werkzeug.palletsprojects.com/en/3.0.x/
+    $ ./manage.py runserver_plus
 ```
 
 

apps/api/afb/settings.py

@@ -50,6 +50,7 @@
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
+    "corsheaders",
     "django_extensions",  # add this for 'python manage.py runserver_plus'
     "rest_framework",  # add DRF
     "django_filters",  # add DRF filters
@@ -60,6 +61,14 @@
 
 VITE_APP_DIR = BASE_DIR.parent / "ui"
 
+# https://github.com/adamchainz/django-cors-headers
+CORS_ALLOW_HEADERS = "*"
+CORS_ORIGIN_WHITELIST = [
+    "http://127.0.0.1:3000",  # ViteJS dev server
+    "http://127.0.0.1:3001",  # ViteJS dev server
+    "http://localhost:3000",
+]
+
 # correspond to your build.outDir in your ViteJS configuration.
 DJANGO_VITE_ASSETS_PATH = VITE_APP_DIR / "dist"
 
@@ -127,12 +136,6 @@
     ],
 }
 
-# https://github.com/django-crispy-forms/crispy-tailwind
-CRISPY_ALLOWED_TEMPLATE_PACKS = "tailwind"
-
-CRISPY_TEMPLATE_PACK = "tailwind"
-
-
 PHONENUMBER_DB_FORMAT = "INTERNATIONAL"
 PHONENUMBER_DEFAULT_FORMAT = "E164"
 PHONENUMBER_DEFAULT_REGION = "CA"
@@ -141,6 +144,7 @@
 MIDDLEWARE = [
     "django.middleware.security.SecurityMiddleware",
     "django.contrib.sessions.middleware.SessionMiddleware",
+    "corsheaders.middleware.CorsMiddleware",
     "django.middleware.common.CommonMiddleware",
     "django.middleware.csrf.CsrfViewMiddleware",
     "django.contrib.auth.middleware.AuthenticationMiddleware",

apps/api/afb/urls.py

@@ -29,4 +29,5 @@
     path("api/", include(router.urls)),
     path("api/auth/", include("rest_framework.urls", namespace="rest_framework")),
     path("api/auth/register/", users.RegisterView.as_view(), name="auth_register"),
+    path("api/auth/login/", users.LoginView.as_view(), name="auth_login"),
 ]

apps/api/requirements.in

@@ -59,3 +59,4 @@ pytest
 pytest-django
 coverage
 ipdb
+Werkzeug

apps/api/requirements.txt

@@ -7,7 +7,9 @@
 appnope==0.1.3
     # via ipython
 asgiref==3.7.2
-    # via django
+    # via
+    #   django
+    #   django-cors-headers
 asttokens==2.4.1
     # via stack-data
 build==1.0.3
@@ -27,13 +29,16 @@ distlib==0.3.7
 django==4.2.7
     # via
     #   -r requirements.in
+    #   django-cors-headers
     #   django-extensions
     #   django-filter
     #   django-model-utils
     #   django-phonenumber-field
     #   django-unfold
     #   django-vite
     #   djangorestframework
+django-cors-headers==4.3.1
+    # via -r requirements.in
 django-extensions==3.2.3
     # via -r requirements.in
 django-filter==23.3
@@ -64,6 +69,8 @@ jedi==0.19.1
     # via ipython
 markdown==3.5.1
     # via -r requirements.in
+markupsafe==2.1.3
+    # via werkzeug
 matplotlib-inline==0.1.6
     # via ipython
 nodeenv==1.8.0
@@ -120,6 +127,8 @@ virtualenv==20.24.6
     # via pre-commit
 wcwidth==0.2.9
     # via prompt-toolkit
+werkzeug==3.0.1
+    # via -r requirements.in
 wheel==0.41.3
     # via pip-tools
 

apps/ui/.env.empty

@@ -0,0 +1,13 @@
+# https://vitejs.dev/guide/env-and-mode.html#env-files
+#
+# This env file is loaded for all commands. See order of
+# precedence in the vite docs above.
+#
+#   e.g. in main.ts you can access the env variables like
+#       this: import.meta.env.VITE_BASE_URL.
+#
+# Note: only variables that start with VITE_ will be made
+# available in your code. To expose a system env variable
+# you can prefix it with VITE_ like VITE_NODE_ENV=production.
+
+VITE_BASE_URL=http://127.0.0.1:8000

apps/ui/index.html

@@ -1,13 +1,13 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="h-full">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>AFB - Animal Food Bank</title>
 
   </head>
-  <body>
+  <body class="h-full">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>

apps/ui/package.json

@@ -2,10 +2,10 @@
   "name": "afb-ui",
   "version": "0.1.0",
   "private": true,
-  "license": "UNLICENSED",
+  "license": "PRIVATE",
   "scripts": {
     "build": "vue-tsc --noEmit && vite build",
-    "dev": "vite",
+    "dev": "pwd && vite --port 3000",
     "TODO": "postcss e.g. postcss styles.css -o src/styles.css",
     "preview": "vite preview"
   },
@@ -14,13 +14,19 @@
     "@heroicons/vue": "^2.0.18",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.6",
+    "@types/axios": "^0.14.0",
     "@types/vue-router": "^2.0.0",
     "@vueform/vueform": "^1.5.4",
+    "axios": "^1.6.0",
+    "pinia": "^2.1.7",
+    "ts-node": "^10.9.1",
     "vue": "^3.3.7",
     "vue-router": "^4.2.5",
     "vue-service": "^1.0.3"
   },
   "devDependencies": {
+    "@types/node": "^20.9.0",
+    "@types/postcss-import": "^14.0.3",
     "@vitejs/plugin-vue": "^2.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-service": "^5.0.8",

apps/ui/postcss.config.ts

@@ -0,0 +1,36 @@
+/**
+ * PostCSS configuration file
+ *
+ * re: vite issue #11894 - TypeScript and ESM support
+ *
+ * Workaround is applied in tsconfig.json. The issue is
+ * that PostCSS does not support ESM syntax, and the
+ * workaround is to use CommonJS syntax in the config
+ * file, which is transpiled to ESM syntax by TypeScript.
+ * This is not ideal, but it works.
+ *
+ * More info:
+ * TypeScript is a statically typed superset of JavaScript,
+ * adding type safety to the language. ECMAScript Modules
+ * (ESM) is a module system in JavaScript, introducing
+ * import and export syntax for modular code. TypeScript
+ * supports ESM syntax and can transpile it to other
+ * module systems for compatibility.
+ *
+ * @see
+ * https://github.com/vitejs/vite/issues/11894
+ * https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-typescript-support
+ * https://github.com/postcss/postcss-load-config/issues/239 - workaround
+ * https://github.com/postcss/postcss-load-config/issues/246
+ */
+import postcssImport from 'postcss-import';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+
+export default {
+  plugins: [
+    postcssImport,
+    tailwindcss,
+    autoprefixer,
+  ]
+}