Merge branch 'next' of github.com:devforth/adminforth into inline-create

Author: SerVitasik

adminforth/documentation/blog/2025-03-25-keycloack/index.md

@@ -0,0 +1,106 @@
+---
+slug: keycloak-setup-example
+title: "Setup AdminForth Authorization via Keycloak"
+authors: mpipkun
+tags: [keycloak, auth, authorization]
+description: "The ultimate guide to setting up AdminForth authorization via Keycloak"
+# image: "/ogs/ga-tf-aws.jpg"
+---
+
+Keycloak is an open-source identity and access management solution that provides authentication and authorization services. It can be used to secure applications and services by managing user identities, roles, and permissions.
+
+In this guide, we will walk you through the process of setting up AdminForth authorization via Keycloak. Most important we will show you how to set up Keycloak in a Docker container and configure it to work with AdminForth.
+
+## Prerequisites
+
+- Docker installed on your machine
+- Basic knowledge of Docker and Docker Compose
+
+## Step 1: Create a Docker Compose File
+
+Create a `docker-compose.yml` file in your project directory. This file will define the Keycloak service and its configuration.
+
+```yaml
+services:
+  pg:
+    image: postgres:latest
+    environment:
+      POSTGRES_USER: demo
+      POSTGRES_PASSWORD: demo
+      POSTGRES_DB: demo
+    ports:
+      - "5432:5432"
+    volumes:
+      - pg-data:/var/lib/postgresql/data
+  keycloak:
+    image: quay.io/keycloak/keycloak:latest
+    command: start-dev --import-realm
+    environment:
+      - KEYCLOAK_ADMIN=admin
+      - KEYCLOAK_ADMIN_PASSWORD=admin
+      - DB_VENDOR=postgres
+      - DB_ADDR=pg
+      - DB_DATABASE=demo
+      - DB_USER=demo
+      - DB_PASSWORD=demo
+      - KEYCLOAK_IMPORT=/opt/keycloak/data/import/keycloak-realm.json
+      - KEYCLOAK_CLIENT_ID=${KEYCLOAK_CLIENT_ID} # TODO how to generate this values? Are they needed here at all
+      - KEYCLOAK_CLIENT_SECRET=${KEYCLOAK_CLIENT_SECRET} # TODO  how to generate this values? Are they needed here at all
+      - KEYCLOAK_URL=${KEYCLOAK_URL} # TODO  how to generate this values? Are they needed here at all
+      - KEYCLOAK_REALM=${KEYCLOAK_REALM} # TODO  how to generate this values? Are they needed here at all
+    ports:
+      - "8080:8080"
+    depends_on:
+      - pg
+    volumes:
+      - keycloak-data:/opt/keycloak/data
+      - ./keycloak-realm.json:/opt/keycloak/data/import/keycloak-realm.json
+
+volumes:
+  keycloak-data:
+```
+
+Create `./keycloak-realm.json` file:
+
+```json
+{
+    "id": "AdminforthRealm",
+    "realm": "AdminforthRealm",
+    "enabled": true,
+    "users": [
+      {
+        "username": "testuser",
+        "enabled": true,
+        "credentials": [
+          {
+            "type": "password",
+            "value": "testpassword"
+          }
+        ],
+        "email": "testuser@example.com",
+        "emailVerified": true
+      }
+    ],
+    "clients": [
+        {
+        "clientId": "adminforth-client",
+        "enabled": true,
+        "publicClient": true,
+        "redirectUris": ["*"],
+        "defaultClientScopes": ["openid", "email", "profile"]
+        }
+    ]
+  }
+```
+
+
+Run service:
+
+```bash
+docker compose -p af-dev-demo up -d --build --remove-orphans --wait
+```
+
+
+# TODO 
+
+What to click to generate client ID and secret?

adminforth/documentation/blog/authors.yml

@@ -3,4 +3,3 @@ ivanb:
   title: Maintainer of AdminForth
   url: https://github.com/ivictbor
   image_url: https://avatars.githubusercontent.com/u/1838656?v=4
-

adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md

@@ -519,6 +519,23 @@ Default behavior of the Dialog component will allow user to close it by just cli
   </div>
 </div>
 
+### Dialog open and close
+
+You can open and close dialog by calling `open` and `close` methods.
+
+```ts
+
+const confirmDialog = ref(null);
+
+const openDialog = () => {
+  confirmDialog.value.open();
+}
+
+const closeDialog = () => {
+  confirmDialog.value.close();
+}
+```
+
 ## Dropzone
 
 ```ts

adminforth/documentation/docs/tutorial/05-Plugins/11-oauth.md

@@ -221,7 +221,9 @@ Install Adapter:
 npm install @adminforth/keycloak-oauth-adapter --save
 ```
 
-1. Update your .env file with the following Keycloak configuration:
+If you need a basic Keycloak setup which tested with AdminForth, you can follow [this minimal KeyClock setup example](blog/2025-03-25-keycloack/index.md).
+
+1. Update your `.env` file with the following Keycloak configuration:
 
 ```bash
 KEYCLOAK_CLIENT_ID=adminforth-client
@@ -230,13 +232,7 @@ KEYCLOAK_URL=http://localhost:8080
 KEYCLOAK_REALM=AdminforthRealm
 ```
 
-2. Start Keycloak with Docker:
-
-```bash
-docker compose -p af-dev-demo -f inventory.yml up -d --build --remove-orphans --wait
-```
-
-3. Create a new user from the back office with the same email as the test user (by default:   ```testuser@example.com```)
+2. Create a new user from the back office with the same email as the test user (by default:   ```testuser@example.com```)
 
 Add the adapter to your plugin configuration:
 
@@ -332,7 +328,7 @@ plugins: [
 
 Just fork any existing adapter e.g. [Google](https://github.com/devforth/adminforth-google-oauth-adapter) and adjust it to your needs. 
 
-This is really easy, you have to change several then 10 lines of code in this [file](https://github.com/devforth/adminforth-google-oauth-adapter/blob/main/index.ts)
+This is really easy, you have to change less then 10 lines of code in this [file](https://github.com/devforth/adminforth-google-oauth-adapter/blob/main/index.ts)
 
 Then just publish it to npm and install it in your project.
 

adminforth/spa/src/afcl/Dialog.vue

@@ -98,4 +98,17 @@ onUnmounted(() => {
   modal.value?.destroy();
 })
 
+function open() {
+  modal.value?.show();
+}
+
+function close() {
+  modal.value?.hide();
+}
+
+defineExpose({
+  open: open,
+  close: close,
+})
+
 </script>