From 6d5a02e2a8ee562253db3b399d3833f3d5b12aad Mon Sep 17 00:00:00 2001
From: Jannat Patel <pateljannat2308@gmail.com>
Date: Tue, 29 Apr 2025 18:39:22 +0530
Subject: [PATCH] feat: read only mode

---
 frontend/index.html                           |  1 +
 frontend/src/components/CourseCardOverlay.vue |  9 +++++----
 frontend/src/components/DesktopLayout.vue     | 14 ++++++++++++++
 frontend/src/main.js                          |  2 ++
 frontend/src/pages/Courses.vue                |  1 +
 frontend/src/utils/index.js                   |  7 ++++++-
 lms/www/lms.py                                |  1 +
 7 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 8150b401..67477511 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -32,6 +32,7 @@
 		<script>
 			document.getElementById('seo-content').style.display = 'none';
 			window.csrf_token = '{{ csrf_token }}'
+			window.read_only_mode = '{{ read_only }}'
 		</script>
 		<script type="module" src="/src/main.js"></script>
 	</body>
diff --git a/frontend/src/components/CourseCardOverlay.vue b/frontend/src/components/CourseCardOverlay.vue
index 1b344616..1847182e 100644
--- a/frontend/src/components/CourseCardOverlay.vue
+++ b/frontend/src/components/CourseCardOverlay.vue
@@ -48,12 +48,13 @@
 					</span>
 				</Button>
 			</router-link>
-			<div
+			<Badge
 				v-else-if="course.data.disable_self_learning"
-				class="bg-surface-blue-2 text-blue-900 text-sm rounded-md py-1 px-3"
+				theme="blue"
+				size="lg"
 			>
 				{{ __('Contact the Administrator to enroll for this course.') }}
-			</div>
+			</Badge>
 			<Button
 				v-else
 				@click="enrollStudent()"
@@ -140,7 +141,7 @@
 <script setup>
 import { BookOpen, Users, Star, GraduationCap } from 'lucide-vue-next'
 import { computed, inject } from 'vue'
-import { Button, createResource, Tooltip } from 'frappe-ui'
+import { Badge, Button, createResource } from 'frappe-ui'
 import { showToast, formatAmount } from '@/utils/'
 import { capture } from '@/telemetry'
 import { useRouter } from 'vue-router'
diff --git a/frontend/src/components/DesktopLayout.vue b/frontend/src/components/DesktopLayout.vue
index b673cdd5..cc0a62e6 100644
--- a/frontend/src/components/DesktopLayout.vue
+++ b/frontend/src/components/DesktopLayout.vue
@@ -8,6 +8,18 @@
 					<AppSidebar />
 				</div>
 				<div class="w-full overflow-auto" id="scrollContainer">
+					<div
+						v-if="readOnlyMode"
+						class="right-0 top-0 mb-3 bg-surface-gray-2 py-3 text-sm text-ink-gray-5"
+					>
+						<div class="mx-auto px-10">
+							{{
+								__(
+									'This site is running in read-only mode. Full functionality will be restored soon.'
+								)
+							}}
+						</div>
+					</div>
 					<slot />
 				</div>
 			</div>
@@ -16,4 +28,6 @@
 </template>
 <script setup>
 import AppSidebar from './AppSidebar.vue'
+
+const readOnlyMode = window.read_only_mode
 </script>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 6acb764d..47fcd254 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -26,5 +26,7 @@ app.mount('#app')
 const { userResource, allUsers } = usersStore()
 app.provide('$user', userResource)
 app.provide('$allUsers', allUsers)
+
 app.config.globalProperties.$user = userResource
 app.config.globalProperties.$dialog = createDialog
+app.config.globalProperties.readOnlyMode = window.read_only_mode
diff --git a/frontend/src/pages/Courses.vue b/frontend/src/pages/Courses.vue
index fc0e4cd4..e68f9eb7 100644
--- a/frontend/src/pages/Courses.vue
+++ b/frontend/src/pages/Courses.vue
@@ -121,6 +121,7 @@ const certification = ref(false)
 const filters = ref({})
 const currentTab = ref('Live')
 const { brand } = sessionStore()
+const readOnlyMode = window.read_only_mode
 
 onMounted(() => {
 	identifyUserPersona()
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index d50488ae..8aca97e5 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -16,6 +16,8 @@ import SimpleImage from '@editorjs/simple-image'
 import Table from '@editorjs/table'
 import { usersStore } from '../stores/user'
 
+const readOnlyMode = window.read_only_mode
+
 export function createToast(options) {
 	toast({
 		position: 'bottom-right',
@@ -543,5 +545,8 @@ export const escapeHTML = (text) => {
 
 export const canCreateCourse = () => {
 	const { userResource } = usersStore()
-	return userResource.data?.is_instructor || userResource.data?.is_moderator
+	return (
+		!readOnlyMode &&
+		(userResource.data?.is_instructor || userResource.data?.is_moderator)
+	)
 }
diff --git a/lms/www/lms.py b/lms/www/lms.py
index a01e9371..dc1b1068 100644
--- a/lms/www/lms.py
+++ b/lms/www/lms.py
@@ -20,6 +20,7 @@ def get_context():
 
 	context = frappe._dict()
 	context.csrf_token = csrf_token
+	context.read_only = frappe.flags.read_only
 	context.meta = get_meta(app_path, title, favicon)
 	capture("active_site", "lms")
 	context.title = title