added RateLimitRule.Audience field

ui/src/components/base/ObjectSelect.svelte

@@ -50,7 +50,17 @@
     }
 </script>
 
-<Select bind:selected {items} {multiple} {labelComponent} {optionComponent} on:show on:hide {...$$restProps}>
+<Select
+    bind:selected
+    {items}
+    {multiple}
+    {labelComponent}
+    {optionComponent}
+    on:show
+    on:hide
+    on:change
+    {...$$restProps}
+>
     <svelte:fragment slot="afterOptions">
         <slot name="afterOptions" />
     </svelte:fragment>

ui/src/components/settings/PageApplication.svelte

@@ -4,6 +4,7 @@
     import tooltip from "@/actions/tooltip";
     import { addSuccessToast } from "@/stores/toasts";
     import { appName, hideControls, pageTitle } from "@/stores/app";
+    import { setErrors } from "@/stores/errors";
     import Field from "@/components/base/Field.svelte";
     import PageWrapper from "@/components/base/PageWrapper.svelte";
     import SettingsSidebar from "@/components/settings/SettingsSidebar.svelte";
@@ -62,6 +63,8 @@
 
             await loadHealthData();
 
+            setErrors({});
+
             addSuccessToast("Successfully saved application settings.");
         } catch (err) {
             ApiClient.error(err);

ui/src/components/settings/RateLimitAccordion.svelte

@@ -5,12 +5,19 @@
     import Accordion from "@/components/base/Accordion.svelte";
     import Field from "@/components/base/Field.svelte";
     import AutocompleteInput from "@/components/base/AutocompleteInput.svelte";
+    import ObjectSelect from "@/components/base/ObjectSelect.svelte";
     import OverlayPanel from "@/components/base/OverlayPanel.svelte";
-    import { errors, setErrors } from "@/stores/errors";
+    import { errors, setErrors, removeError } from "@/stores/errors";
     import { collections, loadCollections } from "@/stores/collections";
 
     export let formSettings;
 
+    const audienceOptions = [
+        { value: "", label: "All" },
+        { value: "@guest", label: "Guest only" },
+        { value: "@auth", label: "Auth only" },
+    ];
+
     const basePredefinedTags = [
         { value: "*:list" },
         { value: "*:view" },
@@ -95,6 +102,7 @@
             label: "",
             maxRequests: 300,
             duration: 10,
+            audience: "",
         });
 
         formSettings.rateLimits.rules = formSettings.rateLimits.rules;
@@ -149,16 +157,17 @@
         <table class="rate-limit-table">
             <thead>
                 <tr>
-                    <th>Rate limit label</th>
-                    <th>Max requests (per IP)</th>
-                    <th>Interval (in seconds)</th>
+                    <th class="col-label">Rate limit label</th>
+                    <th class="col-requests">Max requests<br /><small>(per IP)</small></th>
+                    <th class="col-duration">Interval<br /><small>(in seconds)</small></th>
+                    <th class="col-audience">Targetted users</th>
                     <th></th>
                 </tr>
             </thead>
             <tbody>
                 {#each formSettings.rateLimits.rules || [] as rule, i}
                     <tr class="rate-limit-row">
-                        <td class="col-tag">
+                        <td class="col-label">
                             <Field class="form-field" name={"rateLimits.rules." + i + ".label"} inlineError>
                                 <AutocompleteInput
                                     required
@@ -184,7 +193,7 @@
                                 />
                             </Field>
                         </td>
-                        <td class="col-burst">
+                        <td class="col-duration">
                             <Field
                                 class="form-field"
                                 name={"rateLimits.rules." + i + ".duration"}
@@ -200,6 +209,21 @@
                                 />
                             </Field>
                         </td>
+                        <td class="col-audience">
+                            <Field
+                                class="form-field"
+                                name={"rateLimits.rules." + i + ".audience"}
+                                inlineError
+                            >
+                                <ObjectSelect
+                                    items={audienceOptions}
+                                    bind:keyOfSelected={rule.audience}
+                                    on:change={() => {
+                                        removeError("rateLimits.rules." + i); // reset rule errors
+                                    }}
+                                />
+                            </Field>
+                        </td>
                         <td class="col-action">
                             <button
                                 type="button"

ui/src/scss/_rate_limit.scss

@@ -58,17 +58,21 @@
     }
 
     // cols
-    .col-tag {
-        width: 50%;
+    .col-label {
+        width: 60%;
     }
     .col-requests,
-    .col-burst {
-        width: 25%;
+    .col-duration {
+        width: 15%;
+    }
+    .col-audience {
+        width: 1px;
+        min-width: 120px;
+        white-space: nowrap;
     }
     .col-action {
         width: 1px;
         min-width: 0;
-        white-space: nowrap;
         padding: 0 5px !important;
     }
 }