fix(admin-welcome-screen): hide links from unauthorized users. (#1078)

webiny · Jul 6, 2020 · d3a0546 · d3a0546
1 parent abf97b2
commit d3a0546
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 22 deletions.
diff --git a/packages/app-form-builder/src/admin/plugins/welcomeScreenWidget.tsx b/packages/app-form-builder/src/admin/plugins/welcomeScreenWidget.tsx
@@ -19,6 +19,7 @@ const buttonStyle = css({
 const plugin: AdminWelcomeScreenWidgetPlugin = {
     type: "admin-welcome-screen-widget",
     name: "admin-welcome-screen-widget-form-builder",
+    scopes: ["forms:form:crud"],
     widget: {
         cta: (
             <Link to="/forms" className={linkStyle}>
@@ -28,6 +29,5 @@ const plugin: AdminWelcomeScreenWidgetPlugin = {
         description: "Create forms using a drag and drop interface and track conversions.",
         title: "Form Builder"
     }
-};
-
+}
 export default plugin;
diff --git a/packages/app-headless-cms/src/admin/plugins/welcomeScreenWidget.tsx b/packages/app-headless-cms/src/admin/plugins/welcomeScreenWidget.tsx
@@ -19,6 +19,7 @@ const buttonStyle = css({
 const plugin: AdminWelcomeScreenWidgetPlugin = {
     type: "admin-welcome-screen-widget",
     name: "admin-welcome-screen-widget-headless-cms",
+    scopes: [],
     widget: {
         cta: (
             <Link to="/cms/content-models" className={linkStyle}>

diff --git a/packages/app-page-builder/src/admin/plugins/welcomeScreenWidget.tsx b/packages/app-page-builder/src/admin/plugins/welcomeScreenWidget.tsx
@@ -19,6 +19,7 @@ const buttonStyle = css({
 const plugin: AdminWelcomeScreenWidgetPlugin = {
     type: "admin-welcome-screen-widget",
     name: "admin-welcome-screen-widget-page-builder",
+    scopes: ["pb:page:crud"],
     widget: {
         cta: (
             <Link to="/page-builder/pages" className={linkStyle}>

diff --git a/packages/app-plugin-admin-welcome-screen/src/components/Welcome.tsx b/packages/app-plugin-admin-welcome-screen/src/components/Welcome.tsx
@@ -21,6 +21,9 @@ import TwitterIcon from "../icons/twitter-logo.svg";
 import TextbookIcon from "../icons/textbook.svg";
 import LaptopIcon from "../icons/laptop.svg";
 import { AdminWelcomeScreenWidgetPlugin } from "../types";
+import { SecureView } from "@webiny/app-security/components";
+
+import { hasScopes } from "@webiny/app-security"; 
 
 const linkStyle = css({
     textDecoration: "none",
@@ -104,6 +107,10 @@ const Welcome = () => {
 
     const { fullName } = security.user;
 
+    const canSeeAnyWidget = getPlugins<AdminWelcomeScreenWidgetPlugin>(
+        "admin-welcome-screen-widget"
+    ).some(pl => hasScopes(pl.scopes, { forceBoolean: true }));
+
     return (
         <Grid>
             <Cell span={12}>
@@ -113,9 +120,16 @@ const Welcome = () => {
                         <ContentTheme>
                             <Cell span={12}>
                                 <Typography use={"headline6"}>
-                                    <p className={pGetStartedStyle}>
-                                        To get started - pick one of the actions below:
-                                    </p>
+                                    {canSeeAnyWidget && 
+                                        <p className={pGetStartedStyle}>
+                                            To get started - pick one of the actions below:
+                                        </p>
+                                    }
+                                    {!canSeeAnyWidget && 
+                                        <p className={pGetStartedStyle}>
+                                            Please contact administrator for permission to use the site's actions.
+                                        </p>
+                                    }
                                     <br />
                                 </Typography>
                             </Cell>
@@ -124,23 +138,25 @@ const Welcome = () => {
                                     "admin-welcome-screen-widget"
                                 ).map(pl => {
                                     return (
-                                        <Widget key={pl.name}>
-                                            <Elevation z={2} style={{ padding: 10 }}>
-                                                <Typography use={"headline6"}>
-                                                    <p className={widgetTitleStyle}>
-                                                        {pl.widget.title}
-                                                    </p>
-                                                </Typography>
-                                                <Typography use={"body1"}>
-                                                    <p className={widgetDescriptionStyle}>
-                                                        {pl.widget.description}
-                                                    </p>
-                                                </Typography>
-                                                <div className={widgetButtonStyle}>
-                                                    {pl.widget.cta}
-                                                </div>
-                                            </Elevation>
-                                        </Widget>
+                                        <SecureView scopes={pl.scopes}>
+                                            <Widget key={pl.name}>
+                                                <Elevation z={2} style={{ padding: 10 }}>
+                                                    <Typography use={"headline6"}>
+                                                        <p className={widgetTitleStyle}>
+                                                            {pl.widget.title}
+                                                        </p>
+                                                    </Typography>
+                                                    <Typography use={"body1"}>
+                                                        <p className={widgetDescriptionStyle}>
+                                                            {pl.widget.description}
+                                                        </p>
+                                                    </Typography>
+                                                    <div className={widgetButtonStyle}>
+                                                        {pl.widget.cta}
+                                                    </div>
+                                                </Elevation>
+                                            </Widget>
+                                        </SecureView>
                                     );
                                 })}
                             </div>