Merge pull request #6157 from weseek/feat/98987-grant-alert

create PageGrantAlert

packages/app/src/components/PageAlert/PageAlerts.tsx

@@ -1,4 +1,5 @@
-import {FixPageGrantAlert} from "./FixPageGrantAlert";
+import { FixPageGrantAlert } from "./FixPageGrantAlert";
+import { PageGrantAlert } from "./PageGrantAlert";
 
 
 export const PageAlerts = (): JSX.Element => {
@@ -9,6 +10,8 @@ export const PageAlerts = (): JSX.Element => {
       <div className="col-sm-12">
         {/* alerts */}
         <FixPageGrantAlert/>
+
+        <PageGrantAlert/>
       </div>
     </div>
   );

packages/app/src/components/PageAlert/PageGrantAlert.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useSWRxCurrentPage } from '~/stores/page';
+import { useXss } from '~/stores/xss';
+import { useTranslation } from 'react-i18next';
+
+
+export const PageGrantAlert = (): JSX.Element => {
+  const { t } = useTranslation();
+  const { data: pageData } = useSWRxCurrentPage();
+  const { data: xss } = useXss();
+
+  if ( pageData == null || pageData.grant == null || pageData.grant == 1 || xss == null) {
+    return <></>
+  }
+
+  const renderAlertContent = () => {
+    const getGrantLabel = () => {
+      if (pageData.grant == 2) {
+        return (
+          <>
+            <i className="icon-fw icon-link"></i><strong>{t('Anyone with the link')} only</strong>
+          </>
+        )
+      }
+      if (pageData.grant == 4) {
+        return (
+          <>
+            <i className="icon-fw icon-lock"></i><strong>{t('Only me')} only</strong>
+          </>
+        )
+      }
+      if (pageData.grant == 5) {
+        return (
+          <>
+            <i className="icon-fw icon-organization"></i><strong>{xss.process(pageData.grantedGroup.name)} only</strong>
+          </>
+        )
+      }
+    };
+    return (
+      <>
+        {getGrantLabel()} ({t('Browsing of this page is restricted')})
+      </>
+    );
+  };
+
+
+  return (
+    <p className="alert alert-primary py-3 px-4">
+      {renderAlertContent()}
+    </p>
+  );
+}

packages/app/src/pages/[[...path]].page.tsx

@@ -19,6 +19,7 @@ import { IPageWithMeta } from '~/interfaces/page';
 import { serializeUserSecurely } from '~/server/models/serializers/user-serializer';
 import { useSWRxCurrentPage, useSWRxPageInfo } from '~/stores/page';
 import loggerFactory from '~/utils/logger';
+import Xss from '~/services/xss';
 
 // import { isUserPage, isTrashPage, isSharedPage } from '~/utils/path-utils';
 
@@ -41,6 +42,8 @@ import {
   useCurrentPageId
 } from '../stores/context';
 
+import { useXss } from '../stores/xss'
+
 import { CommonProps, getServerSideCommonProps, useCustomTitle } from './commons';
 import { PageModel } from '~/server/models/page';
 import { isValidObjectId } from 'mongoose';
@@ -92,6 +95,7 @@ const GrowiPage: NextPage<Props> = (props: Props) => {
   // commons
   useAppTitle(props.appTitle);
   useSiteUrl(props.siteUrl);
+  useXss(new Xss())
   // useEditorConfig(props.editorConfig);
   useConfidential(props.confidential);
   useCsrfToken(props.csrfToken);

packages/app/src/stores/xss.ts

@@ -0,0 +1,8 @@
+
+import { useStaticSWR } from './use-static-swr';
+import { SWRResponse } from 'swr';
+import Xss from '~/services/xss';
+
+export const useXss = (initialData?: Xss): SWRResponse<Xss, Error> => {
+  return useStaticSWR<Xss, Error>('xss', initialData);
+};