A user interface (UI) for the KeyGuard project, developed in Svelte with a Neobrutalism design aesthetic. This style was chosen for its stark, functional aesthetic that emphasizes clarity and direct user interaction, which is crucial for a security-focused application.
A companion project to key-guard: an automatic key management and locking system utilizing RFID tags for enhanced security.
KeyGuard provides a robust solution for managing physical keys securely. Its key features include:
The current prototype runs on a Raspberry Pi system and includes:
websockets
PyPI package.The project leverages modern web technologies and a Python backend:
websocket-as-promised
library wraps the native JavaScript WebSocket API, enabling fluent asynchronous operations using Promises and async
/await
syntax, which simplifies complex async workflows.websockets
PyPI package, ensuring reliable real-time communication between the UI and the Raspberry Pi.Front view with key inserted and user ID card reader location shown:
The following screenshots demonstrate the typical user workflow through the KeyGuard web interface, highlighting key interaction points and system responses.
Instructions:
WebSocket Connection stage:
Login Page:
After logging in (via username/password or User 1's ID card), the user is presented with the option to select a Key Slot to unlock. A selection must be made within 60 seconds, or the user will be automatically logged out. (Note: Unlocking is also possible by presenting a key card to the RFID reader, as demonstrated in the Hardware prototype images.)
Upon selecting Key Slot 1 for key deposit, the user has 3 seconds to prepare.
The key slot then unlocks, providing 5 seconds to deposit the key (or withdraw it, as will be shown later).
After depositing the key, the transaction completes, and a notification is displayed.
After logging in again, the option to withdraw keys becomes available. For now, we will demonstrate depositing the second key.
After logging in again, User 1 is presented with the option to withdraw either key:
However, User 2 is forbidden from accessing the Key to Device Beta:
To withdraw any key, simply click the corresponding button and follow a process similar to the key deposit procedure.
Additionally, any detected malicious activity will trigger a notification on the UI.
Furthermore, the RPi application logs all events for comprehensive auditing.