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 { useTranslation } from 'react-i18next';
+import Xss from '~/services/xss';
+
+export const PageGrantAlert = (): JSX.Element => {
+  const { t } = useTranslation();
+  const { data: pageData } = useSWRxCurrentPage();
+
+  const xss = new Xss();
+
+  if ( pageData == null || pageData.grant == null || pageData.grant == 1 ) {
+    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>
+  );
+}