From 5472e5af038fa603c227b6c693b29af1d30d6324 Mon Sep 17 00:00:00 2001 From: dnknth Date: Sat, 28 Mar 2026 15:15:33 +0100 Subject: [PATCH 1/4] Refactor frontend --- Makefile | 2 +- README.md | 34 ++++- backend/ldap_ui/__init__.py | 2 +- src/App.vue | 125 +++--------------- src/components/Alert.ts | 5 + src/components/LdifImportDialog.vue | 6 +- src/components/NavBar.vue | 40 +++--- src/components/Notification.vue | 26 ++++ src/components/Provided.ts | 11 -- src/components/SearchResults.vue | 9 +- src/components/TreeView.vue | 29 ++-- .../editor/AddObjectClassDialog.vue | 7 +- src/components/editor/AddPhotoDialog.vue | 7 +- src/components/editor/AttributeRow.vue | 21 ++- src/components/editor/AttributeSearch.vue | 7 +- src/components/editor/DeleteEntryDialog.vue | 13 +- src/components/editor/EntryEditor.vue | 38 ++---- src/components/editor/NewEntryDialog.vue | 9 +- .../editor/PasswordChangeDialog.vue | 20 +-- src/components/schema/AttributeCard.vue | 7 +- src/components/schema/ObjectClassCard.vue | 7 +- src/components/schema/schema.ts | 12 +- src/main.ts | 7 +- src/state.ts | 47 +++++++ 24 files changed, 230 insertions(+), 261 deletions(-) create mode 100644 src/components/Alert.ts create mode 100644 src/components/Notification.vue delete mode 100644 src/components/Provided.ts create mode 100644 src/state.ts diff --git a/Makefile b/Makefile index 7ae4504..40327aa 100644 --- a/Makefile +++ b/Makefile @@ -16,7 +16,7 @@ dist: clean $(SITE) uv build pypi: dist - - uv publish dist/* + uv publish --token `pass token/pypi.org` dist/* deploy: clean $(SITE) rsync -a --delete $(SITE)/ mx:/opt/ldap-ui/venv/lib/python3.12/site-packages/ldap_ui/statics/ diff --git a/README.md b/README.md index 3db2f1f..6579ccc 100644 --- a/README.md +++ b/README.md @@ -93,19 +93,20 @@ Options: Prerequisites: -* [GNU make](https://www.gnu.org/software/make/) * [node.js](https://nodejs.dev) LTS version with NPM -* [Python3](https://www.python.org) ≥ 3.7 -* [pip3](https://packaging.python.org/tutorials/installing-packages/) +* [pnpm](https://pnpm.io) +* [Python](https://www.python.org) ≥ 3.12 +* [uv](https://docs.astral.sh/uv/) * [python-ldap](https://pypi.org/project/python-ldap/); To compile the Python module: * Debian / Ubuntu: `apt-get install libsasl2-dev python-dev libldap2-dev libssl-dev` * RedHat / CentOS: `yum install python-devel openldap-devel` +* [GNU make](https://www.gnu.org/software/make/) `ldap-ui` consists of a Vue frontend and a Python backend that roughly translates a subset of the LDAP protocol to a stateless ReST API. -For the frontend, `npm run build` assembles everything in `backend/ldap_ui/statics`. +`pnpm build` assembles the frontend in `backend/ldap_ui/statics`. -Review the configuration in [settings.py](settings.py). It is short and mostly self-explaining. +Review the configuration in [settings.py](settings.py). It is short and mostly self-explaining (also see notes below). Most settings can (and should) be overridden by environment variables or settings in a `.env` file; see [env.demo](env.demo) or [env.example](env.example). The backend can be run locally with `make`, which will also install dependencies and build the frontend if needed. @@ -122,10 +123,29 @@ The UI always uses a simple `bind` operation to authenticate with the LDAP direc ### Searching -Search uses a (configurable) set of criteria (`cn`, `gn`, `sn`, and `uid`) if the query does not contain `=`. +Search uses a (configurable) set of criteria# +(default: `cn`, `gn`, `sn`, and `uid`) if the query does not contain `=`. Wildcards are supported, e.g. `f*` will match all `cn`, `gn`, `sn`, and `uid` starting with `f`. Additionally, arbitrary attributes can be searched with an LDAP filter specification, for example `sn=F*`. +Apart from the search field in the navigation bar, +searches are also performed in the entry editor for any DN-valued input field. + +### Keyboard navigation + +The editor and modal dialogs focus the first input when opening, so you can the ⇥ key to navigate the form. +Save or dismiss with the ↩ key. + +The following [access keys](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/accesskey#try_it) are defined: + +| Access Key | UI Element | +|------------|---------------------------| +| K | Global search at page top | +| A | Add an atrribute | +| O | Add an object class | +| R | Reset entry modifications | +| S | Save an entry (same as ↩) | + ### Caveats * The software works with [OpenLdap](http://www.openldap.org) using simple bind. Other directories have not been tested much, although [389 DS](https://www.port389.org) works to some extent. @@ -138,7 +158,7 @@ Additionally, arbitrary attributes can be searched with an LDAP filter specifica * Q: Why are some fields not editable? * A: The RDN of an entry is read-only. To change it, rename the entry with a different RDN, then change the old RDN and rename back. To change passwords, click on the question mark icon on the right side. Binary fields (as per schema) are read-only. You do not want to modify them accidentally. * Q: Why did you write this? - * A: [PHPLdapAdmin](http://phpldapadmin.sf.net/) has not seen updates for ages. I needed a replacement, and wanted to try Vue. + * A: [PHPLdapAdmin](http://phpldapadmin.sf.net/) is no longer actively maintained. I needed a replacement, and wanted to try Vue. ## Acknowledgements diff --git a/backend/ldap_ui/__init__.py b/backend/ldap_ui/__init__.py index fee46bd..8e2394f 100644 --- a/backend/ldap_ui/__init__.py +++ b/backend/ldap_ui/__init__.py @@ -1 +1 @@ -__version__ = "0.11.1" +__version__ = "0.12.6" diff --git a/src/App.vue b/src/App.vue index 23f5844..256b7fe 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,34 +1,24 @@