introducing login and user management

Author: cnichte

README.md

@@ -3,6 +3,7 @@
 * A minimalistic (as possible) startingpoint, following the official guides, and avoiding some pitfalls.
 * It was important to me that all dependent packages are up to date.
 * I didn't test the app for all possible and impossible scenarios, only for my very specific requirements.
+* It ist my public playground, where i test out concepts and implementations for my apps.
 
 Goals
 
@@ -33,6 +34,11 @@ If you also want to build an app with this setup, this could be a good starting
 * Catalog-Module for local and remote pouchdb stores.
   * local stores can be backuped to zip archives.
   * switch between stores on the fly.
+* User-Management and Login
+  * Provide a Login-form
+  * Provide User-Management / Users and Roles (add, remove)
+  * Encrypt and decrypt data to store them localy via Elecron-Conf
+  * persist current user, for automatic login.
 
 ## React Pitfalls
 
@@ -42,19 +48,23 @@ If you also want to build an app with this setup, this could be a good starting
 
 Database. Settings and switch. This is an example for a `List`. The Name of the active catalog shows up in the Application-Title.
 
-![Screenshot Database Settings and Switch](readme-images/screenshot-001.png)
+![login Screen](readme-images/screenshot-001.png)
+
+Session stays open if you with so,  so you will logged in automatically on next startup.
+
+![Screenshot Database Settings and Switch](readme-images/screenshot-002.png)
 
 IPC Ping-Pong. Note that the header buttons can also be hidden/deactivated.
 
-![Screenshot IPC Ping-Pong](readme-images/screenshot-002.png)
+![Screenshot IPC Ping-Pong](readme-images/screenshot-003.png)
 
 Example-Module User-`View`. THis is a non-editable view of a single entry from the list.
 
-![Screenshot Example-Module User-View](readme-images/screenshot-003.png)
+![Screenshot Example-Module User-View](readme-images/screenshot-004.png)
 
 Example-Module User-`Form`. A Formular, to create, or update Data:
 
-![Screenshot Example-Module User-Form](readme-images/screenshot-004.png)
+![Screenshot Example-Module User-Form](readme-images/screenshot-005.png)
 
 ## Use the Repo
 
@@ -140,7 +150,7 @@ git init
 # restore the backuped .gitignore
 ```
 
-run the commands:
+### run the commands
 
 ```bash
 #start the app
@@ -158,6 +168,11 @@ npm run make
 * Inspect the code for further reference.
 * Have fun and success with your project.
 
+## Login
+
+Login with username = `f_mueller` and password `f_mueller`.
+Example Users with different roles have username quals password.
+
 ## Update outdated packages
 
 > [!IMPORTANT]
@@ -425,6 +440,20 @@ npm install zip-a-folder
 npm install dayjs
 ```
 
+### User Management and Login
+
+* Encrypt and decrypt data to store them localy via Elecron-Conf
+* Users and Roles
+
+### SVG Support
+
+Display an SVG Image in this environment - used on the Login Page.
+
+* `npm install @svgr/webpack --save-dev`
+* add to `webpack.rules.ts`
+* create `custom.d.ts`
+* add to `tsconfig.json`
+
 ### Sign the App
 
 pending

assets/docs-json/users.json

@@ -1,18 +1,30 @@
 [
     {
         "_id": "e0c9b078-3782-444a-baf7-6ac1e7873313",
-        "name": "Fritz Schmitz"
+        "name": "Fritz Müller-Admin",
+        "userid": "f_mueller",
+        "password":"$2a$10$vN6Wg9ilv2pohqd5WKpAHOYDJ7AOgc72wmvl7iHzxM8JBPuNpsHbi",
+        "userrights": "admin"
     },
     {
         "_id": "4e6969dd-a75c-40fb-a6c7-7c722fc5cdde",
-        "name": "Hugo Roundup"
+        "name": "Hugo ReadWrite",
+        "userid": "h_readwrite",
+        "password":"$2a$10$.lMO1kE/uwAtNYpmR7wZF.GQ.65gdfksOLu1.N8nS11LmXSDEG3Su",
+        "userrights": "read-write"
     },
     {
         "_id": "6d41e4f0-13a6-4a5a-9db5-2fab339fc430",
-        "name": "Margarete Marksman"
+        "name": "Margarete Readonly",
+        "userid": "m_readonly",
+        "password":"$2a$10$s6c0UcOi1WwrERcXmZhsB.0eMUdVEBN6U4KZZ3cQIZ5KREb1RdGx2",
+        "userrights": "read-only"
     },
     {
         "_id": "fcf301fe-e098-42a2-9b67-3d0ec1b74379",
-        "name": "Heribert Nothingnes"
+        "name": "Heribert None",
+        "userid": "h_none",
+        "password":"$2a$10$EL8me4QUmeCWSAmLUJLsOOR/HYwDLui8X3MxFv66v/cTe6cODqy9K",
+        "userrights": "none"
     }
 ]

custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    export default content;
+  }