feat: make pages readonly after subscription expired

gustavotoyota · gustavotoyota · commit d4bf8d0a7e5c · 2023-11-19T22:39:56.000-04:00
diff --git a/apps/client/src/code/pages/page/page.ts b/apps/client/src/code/pages/page/page.ts
@@ -214,14 +214,22 @@ export class Page implements IPageRegion {
           return true;
         }
 
+        const userPlan = this.realtimeCtx.hget(
+          'user',
+          authStore().userId,
+          'plan',
+        );
+        const pageIsFree = this.realtimeCtx.hget('page', this.id, 'free');
+
         const groupMemberRole = this.realtimeCtx.hget(
           'group-member',
           `${this.react.groupId}:${authStore().userId}`,
           'role',
         );
 
-        return !(
-          rolesMap()[groupMemberRole]?.permissions.editGroupPages ?? false
+        return (
+          !rolesMap()[groupMemberRole]?.permissions.editGroupPages ||
+          (userPlan !== 'pro' && !pageIsFree)
         );
       }),
 
diff --git a/apps/client/src/code/realtime/client.ts b/apps/client/src/code/realtime/client.ts
@@ -158,8 +158,10 @@ export const RealtimeClient = once(
 
         // Try to get subscribed value
 
+        const fullKey = getFullKey(prefix, suffix, field);
+
         if (this.isSynced(prefix, suffix, field)) {
-          return this.values[getFullKey(prefix, suffix, field)];
+          return this.values[fullKey];
         }
 
         // Add request to buffer
@@ -178,9 +180,7 @@ export const RealtimeClient = once(
         );
         const response = await resolvable;
 
-        this._logger
-          .sub('hget response')
-          .info(`${getFullKey(prefix, suffix, field)} (${response})`);
+        this._logger.sub('hget response').info(`${fullKey} (${response})`);
 
         return response;
       }
diff --git a/apps/client/src/layouts/PagesLayout/MainContent/DisplayPage/DisplayPage.vue b/apps/client/src/layouts/PagesLayout/MainContent/DisplayPage/DisplayPage.vue
@@ -45,8 +45,6 @@ watchEffect(() => {
 
   componentLogger.info('Subscribing to required values');
 
-  const userPlan = realtimeCtx.hget('user', authStore().userId, 'plan');
-
   const pageIsDeleted = !!realtimeCtx.hget(
     'page',
     props.page.id,
@@ -58,8 +56,6 @@ watchEffect(() => {
     : new Date() >
       realtimeCtx.hget('page', props.page.id, 'permanent-deletion-date');
 
-  const pageIsFree = !!realtimeCtx.hget('page', props.page.id, 'free');
-
   const groupId = pageGroupIds()(props.page.id).get();
 
   const groupIsDeleted =
@@ -73,11 +69,6 @@ watchEffect(() => {
       : new Date() >
         realtimeCtx.hget('group', groupId, 'permanent-deletion-date');
 
-  const groupIsPersonal =
-    groupId == null
-      ? false
-      : !!realtimeCtx.hget('group', groupId, 'is-personal');
-
   const groupIsPublic =
     groupId == null ? false : realtimeCtx.hget('group', groupId, 'is-public');
 
@@ -186,25 +177,6 @@ watchEffect(() => {
     return;
   }
 
-  componentLogger.info('Checking if user has a Pro plan');
-
-  if (
-    !groupIsPersonal &&
-    !groupIsPublic &&
-    userPlan !== 'pro' &&
-    groupId !== internals.personalGroupId
-  ) {
-    props.page.setStatus('pro-plan-required');
-    return;
-  }
-
-  componentLogger.info('Checking if page is non-free');
-
-  if (!groupIsPublic && userPlan !== 'pro' && !pageIsFree) {
-    props.page.setStatus('non-free-page');
-    return;
-  }
-
   componentLogger.info('Checking if group is password protected');
 
   if (groupContentKeyring?.topLayer === DataLayer.Symmetric) {
diff --git a/apps/client/src/layouts/PagesLayout/MainContent/DisplayPage/DisplayScreens/DisplayScreens.vue b/apps/client/src/layouts/PagesLayout/MainContent/DisplayPage/DisplayScreens/DisplayScreens.vue
@@ -7,12 +7,6 @@
     <DisplayNonExistentScreen
       v-else-if="page.react.status === 'page-nonexistent'"
     />
-    <DisplayProPlanRequiredScreen
-      v-else-if="page.react.status === 'pro-plan-required'"
-    />
-    <DisplayNonFreePageScreen
-      v-else-if="page.react.status === 'non-free-page'"
-    />
     <DisplayPageDeletedScreen
       v-else-if="page.react.status === 'page-deleted'"
     />
@@ -36,10 +30,8 @@ import DisplayErrorScreen from './DisplayErrorScreen.vue';
 import DisplayGroupDeletedScreen from './DisplayGroupDeletedScreen.vue';
 import DisplayInvitedScreen from './DisplayInvitedScreen.vue';
 import DisplayNonExistentScreen from './DisplayNonExistentScreen.vue';
-import DisplayNonFreePageScreen from './DisplayNonFreePageScreen.vue';
 import DisplayPageDeletedScreen from './DisplayPageDeletedScreen.vue';
 import DisplayPasswordScreen from './DisplayPasswordScreen.vue';
-import DisplayProPlanRequiredScreen from './DisplayProPlanRequiredScreen.vue';
 import DisplayRejectedScreen from './DisplayRejectedScreen.vue';
 import DisplayUnauthorizedScreen from './DisplayUnauthorizedScreen.vue';
 import DisplayWorld from './DisplayWorld/DisplayWorld.vue';
diff --git a/apps/client/src/layouts/PagesLayout/MainContent/DisplayUI/DisplayBottomRight.vue b/apps/client/src/layouts/PagesLayout/MainContent/DisplayUI/DisplayBottomRight.vue
@@ -0,0 +1,59 @@
+<template>
+  <div
+    style="
+      position: absolute;
+
+      bottom: 12px;
+      right: 14px;
+
+      text-align: right;
+
+      pointer-events: none;
+
+      font-size: 12px;
+    "
+  >
+    <div
+      v-if="page.selection.react.elems.length > 0"
+      class="selection-count"
+    >
+      {{ page.selection.react.elems.length }}
+      item{{ page.selection.react.elems.length > 1 ? 's' : '' }} selected
+    </div>
+
+    <div
+      v-if="page.react.status === 'success' && page.react.readOnly"
+      style="margin-top: 3px"
+    >
+      Read-only page{{ subscriptionExpired ? ' (Subscription expired)' : '' }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { rolesMap } from '@deeplib/misc';
+import { useRealtimeContext } from 'src/code/realtime/context';
+
+const page = computed(() => internals.pages.react.page);
+
+const realtimeCtx = useRealtimeContext();
+
+const subscriptionExpired = computed(
+  () =>
+    page.value.react.readOnly &&
+    realtimeCtx.hget('user', authStore().userId, 'plan') !== 'pro' &&
+    rolesMap()[
+      realtimeCtx.hget(
+        'group-member',
+        `${page.value.react.groupId}:${authStore().userId}`,
+        'role',
+      )
+    ]?.permissions.editGroupPages,
+);
+</script>
+
+<style scoped lang="scss">
+.selection-count {
+  color: lighten(#006dd2, 23%);
+}
+</style>
diff --git a/apps/client/src/layouts/PagesLayout/MainContent/DisplayUI/DisplaySelectionCount.vue b/apps/client/src/layouts/PagesLayout/MainContent/DisplayUI/DisplaySelectionCount.vue
diff --git a/apps/client/src/layouts/PagesLayout/MainContent/DisplayUI/DisplayUI.vue b/apps/client/src/layouts/PagesLayout/MainContent/DisplayUI/DisplayUI.vue
@@ -12,16 +12,16 @@
 
   <DisplayMobileAltBtn />
   <DisplayUserAvatars />
-  <DisplaySelectionCount />
+  <DisplayBottomRight />
 </template>
 
 <script setup lang="ts">
+import DisplayBottomRight from './DisplayBottomRight.vue';
 import DisplayFindAndReplace from './DisplayFindAndReplace.vue';
 import DisplayHorizontalPath from './DisplayHorizontalPath.vue';
 import DisplayLeftBtns from './DisplayLeftBtns.vue';
 import DisplayMobileAltBtn from './DisplayMobileAltBtn.vue';
 import DisplayRightBtns from './DisplayRightBtns.vue';
-import DisplaySelectionCount from './DisplaySelectionCount.vue';
 import DisplayTopBtns from './DisplayTopBtns.vue';
 import DisplayUserAvatars from './DisplayUserAvatars.vue';
 </script>
diff --git a/apps/collab-server/src/sockets.ts b/apps/collab-server/src/sockets.ts
@@ -130,23 +130,11 @@ export class SocketAuxObject {
         }
 
         if (!groupIsPublic) {
-          const [[userPlan, personalGroupId], groupMemberRole] =
-            await Promise.all([
-              dataAbstraction().hmget('user', this.userId, [
-                'plan',
-                'personal-group-id',
-              ]),
-
-              dataAbstraction().hget(
-                'group-member',
-                `${groupId}:${this.userId}`,
-                'role',
-              ),
-            ]);
-
-          if (userPlan !== 'pro' && groupId !== personalGroupId) {
-            throw new Error('This requires a Pro plan subscription.');
-          }
+          const groupMemberRole = await dataAbstraction().hget(
+            'group-member',
+            `${groupId}:${this.userId}`,
+            'role',
+          );
 
           if (groupMemberRole == null) {
             throw new Error('User is not a member of the group.');
@@ -399,13 +387,13 @@ export class SocketAuxObject {
   }
 
   private async _handleMessage(messageBuffer: ArrayBuffer) {
-    const [groupId, sessionInvalidated] = await Promise.all([
-      dataAbstraction().hget('page', this.room.pageId, 'group-id'),
-
-      ...(this.sessionId != null
-        ? [dataAbstraction().hget('session', this.sessionId, 'invalidated')]
-        : []),
-    ]);
+    const [sessionInvalidated, userPlan, pageGroupId, pageIsFree] =
+      await Promise.all([
+        dataAbstraction().hget('session', this.sessionId!, 'invalidated'),
+        dataAbstraction().hget('user', this.userId!, 'plan'),
+        dataAbstraction().hget('page', this.room.pageId, 'group-id'),
+        dataAbstraction().hget('page', this.room.pageId, 'free'),
+      ]);
 
     // Check if session is invalidated
 
@@ -417,16 +405,16 @@ export class SocketAuxObject {
 
     // Check if has permission to edit
 
-    const role =
-      groupId != null && this.userId != null
-        ? await dataAbstraction().hget(
-            'group-member',
-            `${groupId}:${this.userId}`,
-            'role',
-          )
-        : null;
+    const role = await dataAbstraction().hget(
+      'group-member',
+      `${pageGroupId}:${this.userId}`,
+      'role',
+    );
 
-    if (!rolesMap()[role]?.permissions.editGroupPages) {
+    if (
+      !rolesMap()[role]?.permissions.editGroupPages ||
+      (userPlan !== 'pro' && !pageIsFree)
+    ) {
       moduleLogger.info('Ignored message from unauthorized user');
       return;
     }
diff --git a/packages/@stdlib/data/src/data-abstraction.ts b/packages/@stdlib/data/src/data-abstraction.ts
@@ -311,27 +311,37 @@ export class DataAbstraction<
     return fieldInfos.map((fieldInfo) => fieldInfo.value);
   }
   private async _hmgetLocal(params: HMGetInternalParams) {
-    const { remainingFields, dtrx } = params;
+    const { remainingFields, suffix, dtrx } = params;
 
     // Check local cache
 
     const missedFields: FieldInfo[] = [];
 
-    for (const field of remainingFields) {
-      if (
-        !field.infos?.dontCache &&
-        field.infos?.cacheLocally &&
-        this.localCache.cache[field.fullKey] != null
-      ) {
-        field.value = this.localCache.get(field.fullKey);
-
-        classLogger
-          .sub('hmget')
-          .info(`${field.fullKey}: Found on local cache (%o)`, field.value);
-      } else {
-        missedFields.push(field);
-      }
-    }
+    await Promise.allSettled(
+      remainingFields.map(async (field) => {
+        if (field.fullKey.includes('undefined')) {
+          field.value = await field.infos?.get?.({
+            model: undefined,
+            suffix,
+            dataAbstraction: this,
+          });
+
+          classLogger.sub('hmget').info(`${field.fullKey}: Invalid key`);
+        } else if (
+          !field.infos?.dontCache &&
+          field.infos?.cacheLocally &&
+          this.localCache.cache[field.fullKey] != null
+        ) {
+          field.value = this.localCache.get(field.fullKey);
+
+          classLogger
+            .sub('hmget')
+            .info(`${field.fullKey}: Found on local cache (%o)`, field.value);
+        } else {
+          missedFields.push(field);
+        }
+      }),
+    );
 
     if (missedFields.length > 0) {
       // Load missed values from remote cache
