@orangelogic/orange-dam-content-browser-sdk 2.1.54 → 2.1.55

package/src/page/Authenticate/Authenticate.tsx

@@ -1,232 +0,0 @@
-import { FormEventHandler, useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { GlobalConfigContext } from '@/GlobalConfigContext';
-import { AppDispatch } from '@/store';
-import { authErrorSelector, oAuth, setUseSession, siteUrlSelector } from '@/store/auth/auth.slice';
-import { checkCorrectSiteUrl } from '@/utils/api';
-import { LOGIN_GRAPHICS_TOP_COLOR_BASE64 } from '@/utils/constants';
-import { useDebounceState } from '@/utils/hooks';
-import { CxChangeEvent, CxInput } from '@/web-component';
-
-const AuthenticatePage = () => {
-  const dispatch = useDispatch<AppDispatch>();
-  const siteUrl = useSelector(siteUrlSelector);
-  const authError = useSelector(authErrorSelector);
-  const { pluginInfo, useSession } = useContext(GlobalConfigContext);
-  const [isDefined, setIsDefined] = useState(false);
-  const [url, setUrl] = useState(siteUrl);
-  const [urlError, setUrlError] = useState<string | null>(null);
-  const [checkingSite, setCheckingSite] = useDebounceState(false, 1000); // debounce to avoid flashing when check site connect too fast
-  const [showUseSessionInput, setShowUseSessionInput] = useState(false);
-  const [session, setSession] = useState(useSession);
-  const oAuthForm = useRef<HTMLFormElement>(null);
-  const siteInputRef = useRef<CxInput>(null);
-  const sessionInputRef = useRef<CxInput>(null);
-  const hiddenBoxRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    Promise.all([customElements.whenDefined('cx-input')]).then(() => {
-      setIsDefined(true);
-    });
-  }, []);
-
-  useEffect(() => {
-    const input = siteInputRef.current;
-    if (!input || !isDefined) return;
-    const onInput = (e: CxChangeEvent) => {
-      setUrl((e.target as HTMLInputElement).value);
-      setUrlError(null);
-    };
-    input.addEventListener('cx-input', onInput);
-
-    return () => {
-      input.removeEventListener('cx-input', onInput);
-    };
-  }, [isDefined]);
-
-  useEffect(() => {
-    const input = sessionInputRef.current;
-    if (!input || !isDefined) return;
-    const onInput = (e: CxChangeEvent) => {
-      setSession((e.target as HTMLInputElement).value);
-    };
-    input.addEventListener('cx-input', onInput);
-
-    return () => {
-      input.removeEventListener('cx-input', onInput);
-    };
-  }, [dispatch, isDefined, showUseSessionInput]);
-
-  const onSubmit: FormEventHandler<HTMLFormElement> = useCallback((e) => {
-    e.preventDefault();
-    setCheckingSite(true, true);
-    const urlWithProtocol = url.indexOf('://') === -1 ? `https://${url}` : url;
-    checkCorrectSiteUrl(urlWithProtocol)
-      .then(() => {
-        dispatch(oAuth({ siteUrl: urlWithProtocol }));
-        if (session) {
-          dispatch(setUseSession(session));
-        }
-      })
-      .catch(() => {
-        const errorMessage = 'The site is currently not available. Please verify your Site URL and check your Internet connection.';
-        setUrlError(errorMessage);
-      },
-      )
-      .finally(() => setCheckingSite(false));
-  }, [dispatch, session, setCheckingSite, url]);
-
-  const cancelConnect = useCallback(() => {
-    setCheckingSite(false, true);
-    setUrlError(null);
-  }, [setCheckingSite]);
-
-  useEffect(() => {
-    // If the user clicks the hidden box 5 times in 2 second, show the session input
-    if (showUseSessionInput) return;
-    let clickCount = 0;
-    let clickTimeout: NodeJS.Timeout | null = null;
-
-    const handleClick = () => {
-      clickCount++;
-      if (clickCount === 5) {
-        setShowUseSessionInput(true);
-        if (clickTimeout) clearTimeout(clickTimeout);
-        return;
-      }
-      if (clickTimeout) clearTimeout(clickTimeout);
-      clickTimeout = setTimeout(() => {
-        clickCount = 0;
-      }, 2000);
-    };
-
-    const hiddenBox = hiddenBoxRef.current;
-    if (hiddenBox) {
-      hiddenBox.addEventListener('click', handleClick);
-    }
-
-    return () => {
-      if (hiddenBox) {
-        hiddenBox.removeEventListener('click', handleClick);
-      }
-      if (clickTimeout) clearTimeout(clickTimeout);
-    };
-  }, [showUseSessionInput]);
-
-  let buttonText = 'Connect';
-  if (checkingSite) {
-    buttonText = 'Connecting...';
-  } else if (urlError) {
-    buttonText = 'Retry';
-  }
-
-  return (
-    <div
-      style={{
-        background: `url(${LOGIN_GRAPHICS_TOP_COLOR_BASE64})`,
-        backgroundPositionX: 'center',
-        backgroundPositionY: 'top',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: 'contain',
-        display: 'flex',
-        inset: 0,
-        padding: 'var(--cx-spacing-x-small)',
-        position: 'absolute',
-      }}
-    >
-      <form
-        onSubmit={onSubmit}
-        ref={oAuthForm}
-        style={{
-          display: 'flex',
-          height: '100%',
-          alignItems: 'center',
-          justifyContent: 'center',
-          textAlign: 'center',
-          width: '100%',
-        }}
-      >
-        <cx-space direction="vertical" spacing="medium" align-items="center">
-          {pluginInfo.pluginName && (
-            <cx-typography variant="h2">
-              Welcome to the {pluginInfo.pluginName}
-            </cx-typography>
-          )}
-          {pluginInfo.publicApplicationName && (
-            <cx-typography variant="h4">
-              for {pluginInfo.publicApplicationName}
-            </cx-typography>
-          )}
-          {authError && (
-            <cx-alert open variant="danger">
-              <cx-icon slot="icon" name="error"></cx-icon>
-              {authError}
-            </cx-alert>
-          )}
-          <cx-input
-            ref={siteInputRef}
-            label="Site URL"
-            placeholder="Enter your site URL"
-            value={url}
-            help-text={urlError ?? undefined}
-            style={{
-              width: '100%',
-            }}
-          ></cx-input>
-          {
-            showUseSessionInput && (
-              <cx-input
-                ref={sessionInputRef}
-                label="Session ID"
-                placeholder="Enter your session ID"
-                value={useSession}
-                style={{
-                  width: '100%',
-                }}
-              ></cx-input>
-            )
-          }
-          <cx-space
-            justify-content="flex-end"
-            style={{
-              width: '100%',
-            }}
-          >
-            <cx-space spacing="small" wrap="nowrap">
-              {checkingSite && (
-                <cx-button variant="default" onClick={cancelConnect}>
-                  Cancel
-                </cx-button>
-              )}
-              <cx-button
-                disabled={url === '' || checkingSite}
-                variant="primary"
-                type="submit"
-                style={{
-                  width: '100%',
-                }}
-              >
-                {buttonText}
-              </cx-button>
-            </cx-space>
-          </cx-space>
-        </cx-space>
-      </form>
-      <button
-        ref={hiddenBoxRef}
-        tabIndex={-1}
-        style={{
-          position: 'absolute',
-          left: 0,
-          bottom: 0,
-          opacity: 0,
-          width: '32px',
-          height: '32px',
-        }}
-      ></button>
-    </div>
-  );
-};
-
-export default AuthenticatePage;

package/src/page/Authenticate/ConnectingBackground.tsx

@@ -1,44 +0,0 @@
-import React, { CSSProperties, FC } from 'react';
-
-type Props = {
-  children?: React.ReactNode;
-  footer?: React.ReactNode;
-  onCancel?: () => void;
-};
-
-const ConnectingBackground: FC<Props> = ({ children, footer, onCancel }) => {
-  return (
-    <cx-space
-      direction="vertical"
-      spacing="large"
-      align-items="center"
-      justify-content="center"
-      style={{
-        height: '100%',
-        overflowY: 'auto',
-        padding: 'var(--cx-spacing-2x-large)',
-        textAlign: 'center',
-      }}
-    >
-      {children}
-
-      <cx-space direction="vertical" align-items="center">
-        <cx-spinner
-          style={{
-            '--track-width': '0.2rem',
-            fontSize: 'var(--cx-font-size-3x-large)',
-          } as CSSProperties}
-        ></cx-spinner>
-        <cx-typography variant="body3">
-          Waiting to connect
-        </cx-typography>
-        <cx-button onClick={onCancel}>
-          Cancel
-        </cx-button>
-      </cx-space>
-      {footer}
-    </cx-space>
-  );
-};
-
-export default ConnectingBackground;

package/src/page/Authenticate/index.tsx

@@ -1,94 +0,0 @@
-import { FC, useCallback, useContext, useMemo } from 'react';
-
-import { GlobalConfigContext } from '@/GlobalConfigContext';
-import { useAppDispatch, useAppSelector } from '@/store';
-import {
-  appAuthUrlSelector, authStateSelector, cancelAuth, setUseSession, siteUrlSelector,
-  USE_SESSION,
-} from '@/store/auth/auth.slice';
-
-import AuthenticatePage from './Authenticate';
-import ConnectingBackground from './ConnectingBackground';
-
-type Props = {
-  onCancel: () => void;
-};
-
-const RestoreSession: FC<Props> = ({ onCancel }) => {
-  const dispatch = useAppDispatch();
-  const localStorageSession = localStorage.getItem(USE_SESSION);
-
-  if (localStorageSession) {
-    dispatch(setUseSession(localStorageSession));
-  }
-  
-  return (
-    <ConnectingBackground onCancel={onCancel}>
-      <cx-typography variant="h3">
-        Trying to restore your previous session
-      </cx-typography>
-    </ConnectingBackground>
-  );
-};
-
-const RequestLogin: FC<Props> = ({ onCancel }) => {
-  const siteUrl = useAppSelector(siteUrlSelector);
-  return (
-    <ConnectingBackground onCancel={onCancel}>
-      <cx-typography variant="h3">
-        Requesting login url from {siteUrl}
-      </cx-typography>
-    </ConnectingBackground>
-  );
-};
-
-const WaitForAuthorize: FC<Props> = ({ onCancel }) => {
-  const appAuthUrl = useAppSelector(appAuthUrlSelector);
-  const { pluginInfo } = useContext(GlobalConfigContext);
-
-  return (
-    <ConnectingBackground
-      footer={
-        <>
-          <cx-typography variant="body2">
-            I was not redirected automatically?
-          </cx-typography>
-
-          <a href={appAuthUrl} target="_blank" rel="noopener noreferrer">{appAuthUrl}</a>
-        </>
-      }
-      onCancel={onCancel}
-    >
-      <cx-typography variant="h3">
-        Please authorize the {pluginInfo.pluginName} plugin
-      </cx-typography>
-      <cx-typography variant="body2">
-        You will be automatically redirected to authorize {pluginInfo.pluginName} {pluginInfo.publicApplicationName ? `in ${pluginInfo.publicApplicationName}` : ''}
-      </cx-typography>
-    </ConnectingBackground>
-  );
-};
-
-const Authenticate = () => {
-  const dispatch = useAppDispatch();
-  const authState = useAppSelector(authStateSelector);
-
-  const onCancel = useCallback(() => {
-    dispatch(cancelAuth());
-  }, [dispatch]);
-
-  return useMemo(() => {
-    switch (authState) {
-      case 'unauthenticated':
-        return <AuthenticatePage />;
-      case 'restoreSession':
-        return <RestoreSession onCancel={onCancel} />;
-      case 'requestLogin':
-        return <RequestLogin onCancel={onCancel} />;
-      case 'waitForAuthorise':
-        return <WaitForAuthorize onCancel={onCancel} />;
-    }
-  }, [authState, onCancel]);
-};
-
-export default Authenticate;

package/src/page/Home/Home.styled.ts

@@ -1,46 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  background-color: var(--cx-color-neutral-0);
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  transition: opacity ease-in 0.2s;
-
-  .icon--large {
-    font-size: var(--cx-input-font-size-large);
-  }
-
-  .search-input{
-    &::part(input) {
-      padding-right: var(--cx-spacing-x-small);
-      padding-left: var(--cx-spacing-x-small);
-    }
-  }
-
-  cx-line-clamp {
-    line-height: var(--cx-line-height-small);
-    &::part(content) {
-      line-height: var(--cx-line-height-small);
-    }
-  }
-
-  .format-loader {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: var(--cx-color-neutral-0);
-    padding: var(--cx-spacing-x-small);
-    border-radius: var(--cx-border-radius-small);
-
-    cx-spinner{
-      --track-width: 0.2rem;
-      font-size: var(--cx-font-size-3x-large);
-    }
-  }
-`;