From c179b4c4732b4eed9f44b3ef8e69a824c8791d1a Mon Sep 17 00:00:00 2001
From: Gani Georgiev <gani.georgiev@gmail.com>
Date: Mon, 17 Apr 2023 16:29:56 +0300
Subject: [PATCH] updated oauth2 docs and added create api rule tooltip

---
 .../collections/CollectionRulesTab.svelte     | 19 +++++++++++++++---
 .../components/collections/RuleField.svelte   |  7 ++++++-
 .../docs/AuthWithOAuth2Docs.svelte            | 20 +++++++++----------
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/ui/src/components/collections/CollectionRulesTab.svelte b/ui/src/components/collections/CollectionRulesTab.svelte
index e9e8868d..5c86768b 100644
--- a/ui/src/components/collections/CollectionRulesTab.svelte
+++ b/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}
-    <RuleField label="Create rule" formKey="createRule" {collection} bind:rule={collection.createRule} />
+{#if !collection?.$isView}
+    <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"
diff --git a/ui/src/components/collections/RuleField.svelte b/ui/src/components/collections/RuleField.svelte
index 9d190132..a076028e 100644
--- a/ui/src/components/collections/RuleField.svelte
+++ b/ui/src/components/collections/RuleField.svelte
@@ -61,14 +61,19 @@
     >
         <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"
-                        class="btn  btn-sm btn-transparent btn-hint lock-toggle"
+                        class="btn btn-sm btn-transparent btn-hint lock-toggle"
                         on:click={lock}
                     >
                         <i class="ri-lock-line" />
diff --git a/ui/src/components/collections/docs/AuthWithOAuth2Docs.svelte b/ui/src/components/collections/docs/AuthWithOAuth2Docs.svelte
index 7a18c87e..eb66fe67 100644
--- a/ui/src/components/collections/docs/AuthWithOAuth2Docs.svelte
+++ b/ui/src/components/collections/docs/AuthWithOAuth2Docs.svelte
@@ -71,14 +71,14 @@
 
         ...
 
-        // This method initializes a one-off realtime subscription and will
-        // open a popup window with the OAuth2 vendor page to authenticate.
+        // OAuth2 authentication with a single realtime call.
         //
-        // Once the external OAuth2 sign-in/sign-up flow is completed, the popup
-        // window will be automatically closed and the OAuth2 data sent back
-        // to the user through the previously established realtime connection.
+        // Make sure to register ${backendAbsUrl}/api/oauth2-redirect as redirect url.
         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
-        // call the provided urlCallback with the OAuth2 vendor url to authenticate.
+        // OAuth2 authentication with a single realtime call.
         //
-        // Once the external OAuth2 sign-in/sign-up flow is completed, the browser
-        // window will be automatically closed and the OAuth2 data sent back
-        // to the user through the previously established realtime connection.
+        // Make sure to register ${backendAbsUrl}/api/oauth2-redirect as redirect url.
         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);