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

Author: SerVitasik

adminforth/commands/createApp/templates/index.ts.hbs

@@ -3,6 +3,7 @@ import AdminForth from 'adminforth';
 import usersResource from "./resources/adminuser.js";
 import { fileURLToPath } from 'url';
 import path from 'path';
+import { Filters } from 'adminforth';
 
 const ADMIN_BASE_URL = '';
 
@@ -15,6 +16,12 @@ export const admin = new AdminForth({
     rememberMeDays: 30,
     loginBackgroundImage: 'https://images.unsplash.com/photo-1534239697798-120952b76f2b?q=80&w=3389&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
     loginBackgroundPosition: '1/2',
+    loginPromptHTML: async () => { 
+      const adminforthUserExists = await admin.resource("adminuser").count(Filters.EQ('email', 'adminforth')) > 0;
+      if (adminforthUserExists) {
+        return "Please use <b>adminforth</b> as username and <b>adminforth</b> as password"
+      }
+    },
   },
   customization: {
     brandName: "{{appName}}",

adminforth/commands/createCustomComponent/configLoader.js

@@ -2,7 +2,10 @@ import fs from 'fs/promises';
 import path from 'path';
 import chalk from 'chalk';
 import jiti from 'jiti';
+import dotenv from "dotenv";
 
+dotenv.config({ path: '.env.local', override: true });
+dotenv.config({ path: '.env', override: true });
 
 export async function loadAdminForthConfig() {
   const configFileName = 'index.ts';

adminforth/documentation/blog/2024-10-01-ai-blog/index.md

@@ -72,6 +72,7 @@ Go to bucket settings, Permissions, Object ownership and select "ACLs Enabled" a
             "*"
         ],
         "AllowedMethods": [
+            "HEAD",
             "PUT"
         ],
         "AllowedOrigins": [

adminforth/documentation/docs/tutorial/03-Customization/03-virtualColumns.md

@@ -235,21 +235,4 @@ Hook still has access to the virtual field `updates.password`, and we use built-
 After hook is executed, `updates.password` will be removed from the record since it is virtual, so password itself will not be saved to the database.
 
 
-### Backend-only fields
-
-Another important point is that `hashed_password` field should never be passed to frontend due to security reasons.
-
-To do it we have 2 options:
-
-1) Do not list `password_hash` in the `columns` array of the resource. If AdminForth knows nothing about field
-it will never pass this field to frontend.
-2) Define `password_hash` in columns way but set `backendOnly`. The scond option is more explicit and should be preferrred
-
-```ts
-{
-  name: 'password_hash',
-  type: AdminForthDataTypes.STRING,
-  showIn: { all: false },
-  backendOnly: true,  // will never go to frontend
-}
-```
+  

adminforth/documentation/docs/tutorial/03-Customization/06-customPages.md

@@ -306,11 +306,14 @@ Open `index.ts` file and add the following code *BEFORE* `admin.express.serve(`
 
 ```ts title="/index.ts"
 
+import type { IAdminUserExpressRequest } from 'adminforth';
+import express from 'express';
+
 ....
 
 app.get(`${ADMIN_BASE_URL}/api/dashboard/`,
   admin.express.authorize(
-    async (req:any, res:any) => {
+    async (req:IAdminUserExpressRequest, res: express.Response) => {
       const days = req.body.days || 7;
       const apartsByDays = admin.resource('aparts').dataConnector.client.prepare(
         `SELECT 

adminforth/documentation/docs/tutorial/03-Customization/08-pageInjections.md

@@ -98,9 +98,14 @@ Now create file `ApartsPie.vue` in the `custom` folder of your project:
 Also we have to add an Api to get percentages:
 
 ```ts title="./index.ts"
+import type { IAdminUserExpressRequest } from 'adminforth';
+import express from 'express';
+
+....
+
   app.get(`${ADMIN_BASE_URL}/api/aparts-by-room-percentages/`,
     admin.express.authorize(
-      async (req, res) => {
+      async (req: IAdminUserExpressRequest, res: express.Response) => {
         const roomPercentages = await admin.resource('aparts').dataConnector.client.prepare(
           `SELECT 
             number_of_rooms, 

adminforth/documentation/docs/tutorial/03-Customization/09-Actions.md

@@ -95,6 +95,10 @@ To implement this limitation use `allowed`:
 If you want to prohibit the use of bulk action for user, you can do it this way:
 
 ```ts title="./resources/apartments.ts"
+import { admin } from '../index';
+
+....
+
 bulkActions: [
   {
     label: 'Mark as listed',

adminforth/documentation/docs/tutorial/03-Customization/12-security.md

@@ -140,4 +140,72 @@ server {
         proxy_set_header X-Forwarded-For $remote_addr;
     }
 }
-```
+```
+
+
+
+### Backend-only fields
+
+Some fields should never be accessed on frontend. For example, `hashed_password` field which is always created using CLI initial app, should never be passed to frontend due to security reasons.
+If any user of system can read `hashed_password` of another user, it can lead to account compromise.
+
+To eliminate it we have 2 options:
+
+1) Do not list `password_hash` in the `columns` array of the resource. If AdminForth knows nothing about field
+it will never pass this field to frontend!
+2) Define `password_hash` in columns way but set `backendOnly`. 
+
+The second option is more explicit and should be preferred. This option is used by default in CLI-bootstrapped projects:
+
+```ts
+{
+  name: 'password_hash',
+  type: AdminForthDataTypes.STRING,
+  showIn: { all: false },
+  backendOnly: true,  // will never go to frontend
+}
+```
+
+#### Dynamically hide fields depending on user ACL / role
+
+You can use `column.showIn` to show or hide column for user depending on his role.
+
+However even if `showIn` value (or value returned by showIn function) is `false`, record value will still go to frontend and will be
+visible in the Network tab, so advanced user can still access field value. We did it in this way to provide AdminForth developers with ability to quickly use any record field in custom components.
+
+However if you need securely hide only certain fields depending on role, you should use `column.backendOnly` and pass function there.
+
+Let's consider example:
+
+```ts
+{
+  name: 'email',
+  type: AdminForthDataTypes.STRING,
+  showIn: { 
+//diff-add
+    all: false, 
+//diff-add
+    list: ({ adminUser }: { adminUser: AdminUser }) => adminUser.dbUser.role === 'superadmin',
+  },
+}
+```
+
+So if you will configure the email column in user resource like this, only superadmin will be able to see emails, and only in the list view.
+However, the email will still be present in the record and can be accessed by advanced users through the Network tab.
+
+So to completely hide the email field from all users apart superadmins, you should use `column.backendOnly` and pass a function there.
+
+```ts
+{
+  name: 'email',
+  type: AdminForthDataTypes.STRING,
+//diff-add
+  backendOnly: ({ adminUser }: { adminUser: AdminUser }) => adminUser.dbUser.role === 'superadmin',
+  showIn: { 
+    all: false, 
+    list: ({ adminUser }: { adminUser: AdminUser }) => adminUser.dbUser.role === 'superadmin',
+  },
+}
+```
+
+So if you will configure the email column in user resource like this, only superadmin will be able to see emails, and only in the list view.

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

@@ -362,6 +362,31 @@ const enable = ref(false)
   </div>
 </div>
 
+
+## Toggle
+
+<div class="split-screen" >
+  <div >
+
+```ts
+import Toggle from '@/afcl/Toggle.vue';
+```
+
+
+```html
+  <Toggle 
+    :disabled="false" 
+    @update:modelValue="toggleSwitchHandler"> 
+    <p>Click me</p> 
+  </Toggle>
+```
+  </div>
+  <div>
+  ![AFCL Checkbox](image-94.png)
+  </div>
+</div>
+
+
 ## Dialog (Pop-up)
 
 <div class="split-screen" >
@@ -1758,8 +1783,34 @@ import { JsonViever } from '@/afcl'
   ```
 </div>
   <div>
-    ![Mixed Chart](image-93.png)
+    ![JSON Viewer](image-93.png)
   </div>
 </div>
 
+## Date picker
+
+```ts
+import { DatePicker } from '@/afcl';
+const datePickerValue = ref()
+```
+
+### Basic
+<div class="split-screen" >
+
+<div>
+```html
+<DatePicker
+  v-model:datePickerValue="datePickerValue"
+  :column="{ type: 'datetime' }"
+  label="Pick start"
+/>
+```
+</div>
+  <div>
+    ![Date Picker](image-95.png)
+  </div>
+</div>
+
+
+