updated oauth2 docs and added create api rule tooltip

ui/src/components/collections/CollectionRulesTab.svelte

@@ -1,6 +1,7 @@
 <script>
     import { slide } from "svelte/transition";
     import { Collection } from "pocketbase";
+    import tooltip from "@/actions/tooltip";
     import CommonHelper from "@/utils/CommonHelper";
     import RuleField from "@/components/collections/RuleField.svelte";
 
@@ -79,15 +80,27 @@
 
 <RuleField label="View rule" formKey="viewRule" {collection} bind:rule={collection.viewRule} />
 
-{#if !collection?.isView}
+{#if !collection?.$isView}
-    <RuleField label="Create rule" formKey="createRule" {collection} bind:rule={collection.createRule} />
+    <RuleField label="Create rule" formKey="createRule" {collection} bind:rule={collection.createRule}>
+        <svelte:fragment slot="afterLabel" let:isAdminOnly>
+            {#if !isAdminOnly}
+                <i
+                    class="ri-information-line link-hint"
+                    use:tooltip={{
+                        text: `The Create rule is executed after a "dry save" of the submitted data, giving you access to the main record fields as in every other rule.`,
+                        position: "top",
+                    }}
+                />
+            {/if}
+        </svelte:fragment>
+    </RuleField>
 
     <RuleField label="Update rule" formKey="updateRule" {collection} bind:rule={collection.updateRule} />
 
     <RuleField label="Delete rule" formKey="deleteRule" {collection} bind:rule={collection.deleteRule} />
 {/if}
 
-{#if collection?.isAuth}
+{#if collection?.$isAuth}
     <RuleField
         label="Manage rule"
         formKey="options.manageRule"

ui/src/components/collections/RuleField.svelte

@@ -61,10 +61,15 @@
     >
         <div class="input-wrapper">
             <label for={uniqueId}>
+                <slot name="beforeLabel" {isAdminOnly} />
+
                 <span class="txt" class:txt-hint={isAdminOnly}>
                     {label}
                     {isAdminOnly ? "- Admins only" : ""}
                 </span>
+
+                <slot name="afterLabel" {isAdminOnly} />
+
                 {#if !isAdminOnly}
                     <button
                         type="button"

ui/src/components/collections/docs/AuthWithOAuth2Docs.svelte

@@ -71,14 +71,14 @@
 
         ...
 
-        // This method initializes a one-off realtime subscription and will
+        // OAuth2 authentication with a single realtime call.
-        // open a popup window with the OAuth2 vendor page to authenticate.
         //
-        // Once the external OAuth2 sign-in/sign-up flow is completed, the popup
+        // Make sure to register ${backendAbsUrl}/api/oauth2-redirect as redirect url.
-        // window will be automatically closed and the OAuth2 data sent back
-        // to the user through the previously established realtime connection.
         const authData = await pb.collection('users').authWithOAuth2({ provider: 'google' });
 
+        // OR authenticate with manual OAuth2 code exchange
+        // const authData = await pb.collection('users').authWithOAuth2Code(...);
+
         // after the above you can also access the auth data from the authStore
         console.log(pb.authStore.isValid);
         console.log(pb.authStore.token);
@@ -95,16 +95,16 @@
 
         ...
 
-        // This method initializes a one-off realtime subscription and will
+        // OAuth2 authentication with a single realtime call.
-        // call the provided urlCallback with the OAuth2 vendor url to authenticate.
         //
-        // Once the external OAuth2 sign-in/sign-up flow is completed, the browser
+        // Make sure to register ${backendAbsUrl}/api/oauth2-redirect as redirect url.
-        // window will be automatically closed and the OAuth2 data sent back
-        // to the user through the previously established realtime connection.
         final authData = await pb.collection('users').authWithOAuth2('google', (url) async {
           await launchUrl(url);
         });
 
+        // OR authenticate with manual OAuth2 code exchange
+        // final authData = await pb.collection('users').authWithOAuth2Code(...);
+
         // after the above you can also access the auth data from the authStore
         print(pb.authStore.isValid);
         print(pb.authStore.token);