fix: Authenticated access UX

frappe · Sep 19, 2024 · ed1ffb3 · ed1ffb3
1 parent 9ea76f7
commit ed1ffb3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/builder/builder/doctype/builder_page/builder_page.py b/builder/builder/doctype/builder_page/builder_page.py
@@ -109,6 +109,7 @@ def on_update(self):
 			self.has_value_changed("dynamic_route")
 			or self.has_value_changed("route")
 			or self.has_value_changed("published")
+			or self.has_value_changed("disable_indexing")
 		):
 			self.clear_route_cache()
 

diff --git a/frontend/src/components/BuilderToolbar.vue b/frontend/src/components/BuilderToolbar.vue
@@ -37,6 +37,13 @@
 									class="h-[14px] w-4"
 									v-if="store.isHomePage(store.activePage)"></FeatherIcon>
 							</Tooltip>
+							<Tooltip text="This page has limited access" :hoverDelay="0.6">
+								<AuthenticatedUserIcon
+									class="size-4 text-text-icons-amber-3"
+									v-if="
+										store.activePage?.published && store.activePage?.authenticated_access
+									"></AuthenticatedUserIcon>
+							</Tooltip>
 							<span class="max-w-48 truncate text-base text-text-icons-gray-8">
 								{{ store?.activePage?.page_title || "My Page" }}
 							</span>
@@ -146,6 +153,7 @@
 	</div>
 </template>
 <script setup lang="ts">
+import AuthenticatedUserIcon from "@/components/Icons/AuthenticatedUser.vue";
 import PlayIcon from "@/components/Icons/Play.vue";
 import SettingsGearIcon from "@/components/Icons/SettingsGear.vue";
 import { webPages } from "@/data/webPage";

diff --git a/frontend/src/components/Settings/PageGeneral.vue b/frontend/src/components/Settings/PageGeneral.vue
@@ -1,10 +1,4 @@
 <template>
-	<div
-		class="flex w-full items-center gap-3 rounded bg-surface-amber-1 p-3 py-2 text-text-icons-amber-3"
-		v-show="store.activePage?.authenticated_access">
-		<AuthenticatedUserIcon></AuthenticatedUserIcon>
-		<span class="text-sm">This page is only accessible to logged-in users</span>
-	</div>
 	<div class="no-scrollbar flex h-full flex-col items-center gap-6 overflow-y-auto">
 		<div class="flex w-full gap-4">
 			<div class="flex flex-1 flex-col gap-6">
@@ -37,9 +31,23 @@
 								<FeatherIcon
 									name="check-circle"
 									class="size-4 text-text-icons-green-3"
-									v-if="store.activePage?.published" />
-								<FeatherIcon name="alert-circle" class="size-4 text-text-icons-gray-4" v-else />
-								{{ store.activePage?.published ? "Published" : "Unpublished" }}
+									v-if="store.activePage?.published && !store.activePage.authenticated_access" />
+								<AuthenticatedUserIcon
+									class="size-4 text-text-icons-amber-3"
+									v-else-if="
+										store.activePage?.published && store.activePage?.authenticated_access
+									"></AuthenticatedUserIcon>
+								<FeatherIcon
+									name="alert-circle"
+									class="size-4 text-text-icons-gray-4"
+									v-else-if="!store.activePage?.published" />
+								{{
+									store.activePage?.published
+										? store.activePage?.authenticated_access
+											? "Published with limited access"
+											: "Published"
+										: "Draft"
+								}}
 							</span>
 							<Tooltip
 								:text="
@@ -116,6 +124,7 @@
 					<Switch
 						size="sm"
 						label="Authenticated Access"
+						:disabled="store.isHomePage(store.activePage)"
 						description="Only logged-in users can access this page"
 						:modelValue="Boolean(store.activePage?.authenticated_access)"
 						@update:modelValue="(val: Boolean) => store.updateActivePage('authenticated_access', val)" />