@redocly/theme 0.21.2 → 0.22.0

package/src/layouts/OIDCForbidden.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { useSearchParams } from 'react-router-dom';
+
+import { useTranslate } from '@portal/hooks';
+
+export function OIDCForbidden(): JSX.Element {
+  const { translate } = useTranslate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [errorDescription, setErrorDescription] = useState<string>('');
+
+  const translationKeys = {
+    title: 'theme.page.forbidden.title',
+  };
+
+  // use whatever you want here
+  const URL_REGEX =
+    /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
+
+  const renderText = (text: string) =>
+    text.split(' ').map((part: string) =>
+      URL_REGEX.test(part) ? (
+        <ErrorDescriptionLink key={part} href={part}>
+          {part}{' '}
+        </ErrorDescriptionLink>
+      ) : (
+        part + ' '
+      ),
+    );
+
+  useEffect(() => {
+    if (Array.from(searchParams).length) {
+      setErrorDescription(searchParams.get('error_description') || searchParams.get('error') || '');
+      setSearchParams({});
+    }
+  }, [searchParams, setSearchParams]);
+
+  return (
+    <Wrapper data-component-name="Pages/OIDCForbidden">
+      <Header>403</Header>
+      <Description data-translation-key={translationKeys.title}>
+        {translate(translationKeys.title, 'Access forbidden')}
+      </Description>
+      {errorDescription && <ErrorDescription>{renderText(errorDescription)}</ErrorDescription>}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 25px auto;
+  font-family: var(--page-403-font-family);
+  text-align: center;
+`;
+
+const Header = styled.div`
+  color: var(--page-403-header-text-color);
+  margin: var(--page-403-header-margin);
+  font-size: var(--page-403-header-font-size);
+  line-height: var(--page-403-header-line-height);
+  font-weight: var(--page-403-header-font-weight);
+`;
+
+const Description = styled.div`
+  color: var(--page-403-description-text-color);
+  margin: var(--page-403-description-margin);
+  font-size: var(--page-403-description-font-size);
+  line-height: var(--page-403-description-line-height);
+  font-weight: var(--page-403-description-font-weight);
+`;
+
+const ErrorDescription = styled.div`
+  margin: var(--page-403-oidc-description-margin);
+  font-size: var(--page-403-oidc-description-font-size);
+  color: var(--page-403-description-text-color);
+  line-height: var(--page-403-description-line-height);
+  font-weight: var(--page-403-description-font-weight);
+`;
+
+const ErrorDescriptionLink = styled.a`
+  color: var(--link-text-color);
+
+  &:hover {
+    color: var(--link-hover-text-color);
+  }
+`;

package/src/layouts/index.ts

@@ -2,3 +2,4 @@ export * from '@theme/layouts/RootLayout';
 export * from '@theme/layouts/PageLayout';
 export * from '@theme/layouts/NotFound';
 export * from '@theme/layouts/Forbidden';
+export * from '@theme/layouts/OIDCForbidden';

package/src/types/portal/src/shared/constants.ts

@@ -7,6 +7,7 @@ export enum FEEDBACK_TYPES {
   RATING = 'rating',
   SENTIMENT = 'sentiment',
   COMMENT = 'comment',
+  MOOD = 'mood',
 }
 export const DEV_LOGIN_SLUG = '/login/';
 export enum ExternalRoutes {

package/src/types/portal/src/shared/types/feedback.ts

@@ -1,6 +1,6 @@
 import type { FEEDBACK_TYPES } from '../constants';
 
-import type { RatingProps, SentimentProps, CommentProps } from '@theme/components/Feedback';
+import type {RatingProps, SentimentProps, CommentProps, MoodProps} from '@theme/components/Feedback';
 
 export type SubmitFeedbackParams = {
   type: string;
@@ -10,5 +10,5 @@ export type SubmitFeedbackParams = {
 
 export type FeedbackProps = {
   type: FEEDBACK_TYPES;
-  settings: (RatingProps | SentimentProps | CommentProps)['settings'];
+  settings: (RatingProps | SentimentProps | CommentProps | MoodProps)['settings'];
 }