refactor/gui-v2 added password login to shared grid view

packages/nc-gui-v2/components/shared-view/AskPassword.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { notification } from 'ant-design-vue'
+import { extractSdkResponseErrorMsg } from '~/utils'
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue'])
+interface Props {
+  modelValue: boolean
+}
+
+const route = useRoute()
+const { loadSharedView } = useSharedView()
+
+const formState = ref({ password: undefined })
+const vModel = useVModel(props, 'modelValue', emit)
+
+const onFinish = async () => {
+  try {
+    await loadSharedView(route.params.viewId as string, formState.value.password)
+    vModel.value = false
+  } catch (e: any) {
+    console.error(e)
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
+  }
+}
+</script>
+
+<template>
+  <a-modal
+    v-model:visible="vModel"
+    :closable="false"
+    width="28rem"
+    centered
+    :footer="null"
+    :mask-closable="false"
+    @close="vModel = false"
+  >
+    <div class="w-full flex flex-col">
+      <a-typography-title :level="4">This shared view is protected</a-typography-title>
+      <a-form ref="formRef" :model="formState" class="mt-2" @finish="onFinish">
+        <a-form-item name="password" :rules="[{ required: true, message: 'Password is required' }]">
+          <a-input-password v-model:value="formState.password" placeholder="Enter password" />
+        </a-form-item>
+        <a-button type="primary" html-type="submit">Unlock</a-button>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+
+<style scoped lang="scss"></style>

packages/nc-gui-v2/components/shared-view/Grid.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import type { TableType } from 'nocodb-sdk/build/main'
+
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
+
+const { sharedView, meta, columns } = useSharedView()
+
+const reloadEventHook = createEventHook<void>()
+provide(ReloadViewDataHookInj, reloadEventHook)
+provide(ReadonlyInj, ref(true))
+provide(MetaInj, meta)
+provide(ActiveViewInj, sharedView)
+provide(FieldsInj, columns)
+provide(IsPublicInj, ref(true))
+
+useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+</script>
+
+<template>
+  <div class="nc-container flex flex-col h-full mt-2 px-6">
+    <SmartsheetToolbar />
+    <SmartsheetGrid />
+  </div>
+</template>
+
+<style scoped>
+.nc-container {
+  height: calc(100% - var(--header-height));
+  flex: 1 1 100%;
+}
+</style>

packages/nc-gui-v2/composables/useSharedView.ts

@@ -1,5 +1,5 @@
 import type { ColumnType, ExportTypes, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
-import { UITypes, isVirtualCol } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
 const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
@@ -9,8 +9,8 @@ const sorts = ref<SortType[]>([])
 const password = ref<string | undefined>()
 
 export function useSharedView() {
-  const meta = ref<TableType>(() => sharedView.value?.model)
-  const columns = ref<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
+  const meta = ref<TableType>(sharedView.value?.model)
+  const columns = ref<ColumnType[]>(sharedView.value?.model?.columns)
   const formColumns = computed(
     () =>
       columns.value
@@ -25,8 +25,14 @@ export function useSharedView() {
   const { $api } = useNuxtApp()
   const { setMeta } = useMetas()
 
-  const loadSharedView = async (viewId: string) => {
-    const viewMeta = await $api.public.sharedViewMetaGet(viewId)
+  const loadSharedView = async (viewId: string, localPassword: string | undefined = undefined) => {
+    const viewMeta = await $api.public.sharedViewMetaGet(viewId, {
+      headers: {
+        'xc-password': localPassword ?? password.value,
+      },
+    })
+
+    if (localPassword) password.value = localPassword
     sharedView.value = viewMeta
 
     meta.value = viewMeta.model
@@ -42,11 +48,19 @@ export function useSharedView() {
     const page = paginationData.value.page || 1
     const pageSize = paginationData.value.pageSize || 25
 
-    const { data } = await $api.public.dataList(sharedView?.value?.uuid, {
+    const { data } = await $api.public.dataList(
+      sharedView?.value?.uuid,
+      {
         offset: (page - 1) * pageSize,
         filterArrJson: JSON.stringify(nestedFilters.value),
         sortArrJson: JSON.stringify(sorts.value),
-    } as any)
+      } as any,
+      {
+        headers: {
+          'xc-password': password.value,
+        },
+      },
+    )
 
     return data
   }
@@ -67,7 +81,7 @@ export function useSharedView() {
         filterArrJson: JSON.stringify(nestedFilters.value),
       },
       headers: {
-        'xc-password': password,
+        'xc-password': password.value,
       },
     })
   }

packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
-import type { TableType } from 'nocodb-sdk/build/main'
-
-import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
+import { ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 
 import { useRoute } from '#imports'
 definePageMeta({
@@ -12,32 +9,24 @@ definePageMeta({
 const route = useRoute()
 
 const reloadEventHook = createEventHook<void>()
-const { sharedView, loadSharedView, meta, columns } = useSharedView()
-
-await loadSharedView(route.params.viewId as string)
-
 provide(ReloadViewDataHookInj, reloadEventHook)
-provide(MetaInj, meta)
-provide(ActiveViewInj, sharedView)
-provide(FieldsInj, columns)
-provide(IsPublicInj, ref(true))
 provide(ReadonlyInj, ref(true))
 
-useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+const { loadSharedView } = useSharedView()
+const showPassword = ref(false)
+
+try {
+  await loadSharedView(route.params.viewId as string)
+} catch (e) {
+  showPassword.value = true
+}
 </script>
 
 <template>
   <NuxtLayout id="content" class="flex">
-    <div class="nc-container flex flex-col h-full mt-2 px-6">
-      <SmartsheetToolbar />
-      <SmartsheetGrid :is-public-view="true" />
+    <div v-if="showPassword">
+      <SharedViewAskPassword v-model="showPassword" />
     </div>
+    <SharedViewGrid v-else />
   </NuxtLayout>
 </template>
-
-<style scoped>
-.nc-container {
-  height: calc(100% - var(--header-height));
-  flex: 1 1 100%;
-}
-</style>