From 97d5221c5d1134ef49d51718289d6e90893cc382 Mon Sep 17 00:00:00 2001 From: Sonjoy Datta Date: Mon, 15 Nov 2021 02:34:16 +0600 Subject: [PATCH] major bug fixes --- package.json | 2 +- src/libs/AccessFallback.tsx | 9 - src/libs/AccessFallback/Unauthorised.tsx | 210 +++++++++++++++++++++++ src/libs/AccessFallback/index.tsx | 13 ++ src/libs/AccessFallback/styles.ts | 28 +++ src/libs/types.ts | 14 +- 6 files changed, 259 insertions(+), 17 deletions(-) delete mode 100644 src/libs/AccessFallback.tsx create mode 100644 src/libs/AccessFallback/Unauthorised.tsx create mode 100644 src/libs/AccessFallback/index.tsx create mode 100644 src/libs/AccessFallback/styles.ts diff --git a/package.json b/package.json index 94dbbc3..d581962 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-access-boundary", - "version": "1.0.0", + "version": "2.1.1", "description": "A library for validating user permissions from UI layers", "author": "Sonjoy Datta ", "license": "MIT", diff --git a/src/libs/AccessFallback.tsx b/src/libs/AccessFallback.tsx deleted file mode 100644 index cb08b77..0000000 --- a/src/libs/AccessFallback.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -export const AccessFallback = () => { - return ( -
-

You are not authorised to access this page

-
- ); -}; diff --git a/src/libs/AccessFallback/Unauthorised.tsx b/src/libs/AccessFallback/Unauthorised.tsx new file mode 100644 index 0000000..8ad1714 --- /dev/null +++ b/src/libs/AccessFallback/Unauthorised.tsx @@ -0,0 +1,210 @@ +import React from 'react'; + +const Unauthorized = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default Unauthorized; diff --git a/src/libs/AccessFallback/index.tsx b/src/libs/AccessFallback/index.tsx new file mode 100644 index 0000000..1c101fa --- /dev/null +++ b/src/libs/AccessFallback/index.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Fallback403, Fallback403__Image, Fallback403__Subtitle, Fallback403__Title } from './styles'; +import Unauthorised from './Unauthorised'; + +export const AccessFallback = () => ( +
+
+ +
+

403

+

Sorry, you are not authorized to access this page.

+
+); diff --git a/src/libs/AccessFallback/styles.ts b/src/libs/AccessFallback/styles.ts new file mode 100644 index 0000000..84063ca --- /dev/null +++ b/src/libs/AccessFallback/styles.ts @@ -0,0 +1,28 @@ +import React from 'react'; + +export const Fallback403: React.CSSProperties = { + display: 'block', + padding: '3rem 2rem', +}; + +export const Fallback403__Image: React.CSSProperties = { + width: '15.625rem', + height: '18.438rem', + margin: '0 auto 1.5rem auto', + textAlignLast: 'center', +}; + +export const Fallback403__Title: React.CSSProperties = { + color: 'rgba(0, 0, 0, 0.85)', + fontSize: '1.5rem', + lineHeight: '1.8', + textAlignLast: 'center', + margin: '0', +}; + +export const Fallback403__Subtitle: React.CSSProperties = { + color: 'rgba(0, 0, 0, 0.45)', + fontSize: '0.875rem', + lineHeight: '1.6', + textAlignLast: 'center', +}; diff --git a/src/libs/types.ts b/src/libs/types.ts index c43bb72..b3042c7 100644 --- a/src/libs/types.ts +++ b/src/libs/types.ts @@ -1,18 +1,18 @@ -import { FC } from 'react'; +import React from 'react'; export type Permission = string; export type AccessContextType = { - isAllowedTo: (permission: Permission) => boolean; + isAllowedTo: (permission: Permission) => boolean; }; export type AccessProviderProps = { - children: React.ReactNode; - permissions: Permission[]; + children: React.ReactNode; + permissions: Permission[]; }; export type AccessBoundaryProps = { - to: Permission; - isDefaultFallback?: boolean; - fallback?: FC; + to: Permission; + isDefaultFallback?: boolean; + fallback?: React.ReactNode; };