@blaze-cms/react-page-builder 0.125.0-f-admin-updates.0 → 0.125.0

package/src/components/Login/LoginForm.js

@@ -1,81 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import Input from '@blaze-react/input';
-import Button from '@blaze-react/button';
-import { Checkbox } from '@blaze-react/checkboxes';
-import { EMAIL, PASSWORD, LOGIN_FORM } from '../../constants';
-
-const LoginForm = ({ errorMessageToDisplay, loginMutation, modifier }) => {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [rememberMe, setRememberMe] = useState(false);
-
-  const handleChange = ({ event }) => {
-    const {
-      target: { name: iName, value: iValue }
-    } = event;
-
-    if (iName === EMAIL) setEmail(iValue);
-    if (iName === PASSWORD) setPassword(iValue);
-  };
-
-  const isDisabled = !email || !password;
-
-  return (
-    <>
-      <form
-        id={LOGIN_FORM}
-        className={modifier}
-        onSubmit={e => {
-          e.preventDefault();
-          if (isDisabled) return;
-          loginMutation({
-            variables: { input: { identity: email, password, rememberMe } }
-          });
-        }}>
-        <Input
-          key="email"
-          type="email"
-          name="email"
-          placeholder="example@email.com"
-          label="Email"
-          required
-          onChange={handleChange}
-          value={email}
-        />
-        <Input
-          key="password"
-          type="password"
-          name="password"
-          label="Password"
-          required
-          onChange={handleChange}
-          value={password}
-        />
-        <Checkbox
-          checked={rememberMe}
-          label="Remember Me"
-          name="rememberme"
-          id="remember-me"
-          onChange={({ value: { checked } }) => setRememberMe(checked)}
-        />
-        {!!errorMessageToDisplay && <div className="error_message">{errorMessageToDisplay}</div>}
-      </form>
-      <Button type="submit" name="button" form={LOGIN_FORM} disabled={isDisabled}>
-        Login
-      </Button>
-    </>
-  );
-};
-
-LoginForm.propTypes = {
-  errorMessageToDisplay: PropTypes.string,
-  modifier: PropTypes.string.isRequired,
-  loginMutation: PropTypes.func.isRequired
-};
-
-LoginForm.defaultProps = {
-  errorMessageToDisplay: PropTypes.string.isRequired
-};
-
-export default LoginForm;

package/src/components/Login/helpers/check-gtm-children.js

@@ -1,30 +0,0 @@
-const checkGtmChildren = (children, handleOnSuccess) => {
-  let hasOnSuccessChildren = false;
-  if (!children || Array.isArray(children)) return [hasOnSuccessChildren, children];
-  const {
-    props: {
-      children: [, allChildren]
-    }
-  } = children;
-
-  if (allChildren && allChildren.length) {
-    allChildren.forEach(({ props }) => {
-      let { component: { settings: { gtmEvents } } = {} } = props;
-      if (gtmEvents) {
-        gtmEvents = gtmEvents.map(gtmEvent => {
-          const updatedEvent = gtmEvent;
-          if (gtmEvent.eventTrigger === 'onSuccess') {
-            updatedEvent.handleOnSuccess = handleOnSuccess;
-            hasOnSuccessChildren = true;
-          }
-
-          return updatedEvent;
-        });
-      }
-    });
-  }
-
-  return [hasOnSuccessChildren, children];
-};
-
-export default checkGtmChildren;

package/src/components/Login/helpers/get-url-to-use.js

@@ -1,6 +0,0 @@
-const getUrlToUse = ({ redirectUrl, url, asPath }) => {
-  const singleRedirectUrl = Array.isArray(redirectUrl) ? redirectUrl[0] : redirectUrl;
-  return singleRedirectUrl || url || asPath;
-};
-
-export default getUrlToUse;

package/src/components/Login/helpers/index.js

@@ -1,4 +0,0 @@
-import getUrlToUse from './get-url-to-use';
-import checkGtmChildren from './check-gtm-children';
-
-export { getUrlToUse, checkGtmChildren };

package/src/components/Login/index.js

@@ -1,3 +0,0 @@
-import Login from './Login';
-
-export default Login;

package/src/components/PasswordReset/PasswordReset.js

@@ -1,120 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import Input from '@blaze-react/input';
-import Button from '@blaze-react/button';
-import { useMutation } from '@apollo/client';
-import { useRouter } from 'next/router';
-import { parseUrl } from 'query-string';
-import { RESET_USER_PASSWORD_MUTATION } from '@blaze-cms/core-auth-ui';
-import { validatePassword } from './helpers';
-import { withTitle } from '../../HOC';
-import {
-  GRAPH_QL_ERROR,
-  PASSWORD_CONFIRM_MESSAGE,
-  PASSWORD_VALIDATION_MESSAGE
-} from '../../constants';
-import { hasChildren } from '../../helpers';
-
-const PasswordReset = ({ children, modifier }) => {
-  const router = useRouter();
-  const { asPath } = router;
-  const { query: { token } = {} } = parseUrl(asPath);
-  const [displayChildren, setShouldDisplayChildren] = useState(false);
-  const [formValues, setFormValues] = useState({ password: '', passwordConfirm: '' });
-  const [validationErrors, setValidationErrors] = useState([]);
-  const [errorMessageToDisplay, setErrorMessage] = useState(null);
-  const { password, passwordConfirm } = formValues;
-
-  const [passwordResetMutation] = useMutation(RESET_USER_PASSWORD_MUTATION, {
-    onCompleted: ({ resetUserPasswordResult }) => {
-      const {
-        result: { extras }
-      } =
-        resetUserPasswordResult || {};
-      const { redirectUrl } = extras || {};
-      setShouldDisplayChildren(true);
-      setErrorMessage(null);
-      setValidationErrors([false, false]);
-      if (redirectUrl) {
-        router.push(`/Resolver`, `${asPath}&redirectUrl=${redirectUrl}`, { shallow: true });
-      }
-    },
-    onError: ({ message }) => {
-      const parsedMessage = message.replace(GRAPH_QL_ERROR, '');
-      setErrorMessage(parsedMessage);
-    }
-  });
-
-  const handleChange = ({ event }) => {
-    const {
-      target: { name: iName, value: iValue }
-    } = event;
-
-    if (iName === 'password') setFormValues({ ...formValues, password: iValue });
-    if (iName === 'passwordConfirm') setFormValues({ ...formValues, passwordConfirm: iValue });
-  };
-
-  const handleSubmit = e => {
-    e.preventDefault();
-    const isPasswordValid = validatePassword(password);
-    if (!isPasswordValid) return setValidationErrors([true, false]);
-    if (password !== passwordConfirm) return setValidationErrors([false, true]);
-    passwordResetMutation({
-      variables: { input: { token, password } }
-    });
-  };
-
-  const isDisabled = !passwordConfirm || !password;
-  const shouldDisplayChildren = displayChildren && hasChildren(children);
-  if (!token) return null;
-
-  return (
-    <div className={modifier}>
-      {!displayChildren && (
-        <form id="passwordReset" onSubmit={handleSubmit}>
-          <Input
-            id="password"
-            type="password"
-            name="password"
-            label="Password"
-            required
-            error={validationErrors[0]}
-            validationMessage={PASSWORD_VALIDATION_MESSAGE}
-            onChange={handleChange}
-            value={password}
-          />
-          <Input
-            id="passwordConfirm"
-            type="password"
-            name="passwordConfirm"
-            label="Confirm New Password"
-            required
-            error={validationErrors[1]}
-            validationMessage={PASSWORD_CONFIRM_MESSAGE}
-            onChange={handleChange}
-            value={passwordConfirm}
-          />
-        </form>
-      )}
-      {!displayChildren && (
-        <Button type="submit" name="button" form="passwordReset" disabled={isDisabled}>
-          Reset Password
-        </Button>
-      )}
-      {!!errorMessageToDisplay && <div className="error_message">{errorMessageToDisplay}</div>}
-      {shouldDisplayChildren && <div>{children}</div>}
-    </div>
-  );
-};
-
-PasswordReset.propTypes = {
-  modifier: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
-};
-
-PasswordReset.defaultProps = {
-  modifier: '',
-  children: null
-};
-
-export default withTitle(PasswordReset);

package/src/components/PasswordReset/helpers/index.js

@@ -1,3 +0,0 @@
-import validatePassword from './validatePassword';
-
-export { validatePassword };

package/src/components/PasswordReset/helpers/validatePassword.js

@@ -1,8 +0,0 @@
-import { PASSWORD_REGEX } from '../../../constants';
-
-const validatePassword = password => {
-  if (!password) return false;
-  return PASSWORD_REGEX.test(password);
-};
-
-export default validatePassword;

package/src/components/PasswordReset/index.js

@@ -1,3 +0,0 @@
-import PasswordReset from './PasswordReset';
-
-export default PasswordReset;

package/src/components/PasswordResetRequest/PasswordResetRequest.js

@@ -1,82 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import Input from '@blaze-react/input';
-import Button from '@blaze-react/button';
-import { useMutation } from '@apollo/client';
-import { useRouter } from 'next/router';
-import { checkIfLoggedIn, REQUEST_USER_PASSWORD_RESET_MUTATION } from '@blaze-cms/core-auth-ui';
-import { GRAPH_QL_ERROR } from '../../constants';
-import { hasChildren } from '../../helpers';
-
-const PasswordResetRequest = ({ children, modifier }) => {
-  const { id: userId } = checkIfLoggedIn();
-  const router = useRouter();
-  const { asPath } = router;
-  const [displayChildren, setShouldDisplayChildren] = useState(false);
-  const [errorMessageToDisplay, setErrorMessage] = useState(null);
-  const [email, setEmail] = useState('');
-
-  const [requestUserPasswordResetMutation] = useMutation(REQUEST_USER_PASSWORD_RESET_MUTATION, {
-    onCompleted: () => {
-      setShouldDisplayChildren(true);
-      setErrorMessage(null);
-    },
-    onError: ({ message }) => {
-      const parsedMessage = message.replace(GRAPH_QL_ERROR, '');
-      setErrorMessage(parsedMessage);
-    }
-  });
-
-  const isDisabled = !email;
-  const displayValidChildren = displayChildren && hasChildren(children);
-
-  return (
-    <div className={modifier}>
-      {!displayChildren && (
-        <form
-          id="passwordResetRequest"
-          onSubmit={e => {
-            e.preventDefault();
-            if (isDisabled) return;
-            requestUserPasswordResetMutation({
-              variables: { input: { email, userId, extras: { redirectUrl: asPath } } }
-            });
-          }}>
-          <Input
-            key="email"
-            type="email"
-            name="email"
-            label="Email"
-            required
-            onChange={({ event }) => {
-              const {
-                target: { value }
-              } = event;
-              setEmail(value);
-            }}
-            value={email}
-          />
-        </form>
-      )}
-      {!displayChildren && (
-        <Button type="submit" name="button" form="passwordResetRequest" disabled={isDisabled}>
-          Request Password Reset
-        </Button>
-      )}
-      {!!errorMessageToDisplay && <div className="error_message">{errorMessageToDisplay}</div>}
-      {displayValidChildren && <div>{children}</div>}
-    </div>
-  );
-};
-
-PasswordResetRequest.propTypes = {
-  modifier: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
-};
-
-PasswordResetRequest.defaultProps = {
-  modifier: '',
-  children: null
-};
-
-export default PasswordResetRequest;

package/src/components/PasswordResetRequest/index.js

@@ -1,3 +0,0 @@
-import PasswordResetRequest from './PasswordResetRequest';
-
-export default PasswordResetRequest;

package/tests/unit/src/components/Login/Login.test.js

@@ -1,36 +0,0 @@
-import { render } from '@blaze-cms/tools/test-helpers/test-functions';
-import '@testing-library/jest-dom/extend-expect';
-import Login from '../../../../../src/components/Login';
-
-jest.mock('@blaze-cms/core-auth-ui', () => ({
-  checkIfLoggedIn: jest
-    .fn()
-    .mockImplementationOnce(() => ({ isLoggedIn: false }))
-    .mockImplementationOnce(() => ({ isLoggedIn: true }))
-}));
-
-jest.mock('@apollo/client', () => ({
-  ...jest.requireActual('@apollo/client'),
-  useMutation: jest.fn(() => [variables => variables, { client: { resetStore: null } }])
-}));
-
-jest.mock('next/router', () => ({
-  useRouter: jest.fn().mockImplementation(() => ({
-    asPath: ''
-  }))
-}));
-
-const props = {};
-
-describe('Login component', () => {
-  it('should render without throwing an error and match snapshot', () => {
-    const { asFragment } = render(Login, props);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render rederict link if logged in', () => {
-    const { asFragment, container } = render(Login, props);
-    expect(asFragment()).toMatchSnapshot();
-    expect(container.firstChild).toContainHTML('span');
-  });
-});

package/tests/unit/src/components/Login/__snapshots__/Login.test.js.snap

@@ -1,103 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Login component should render rederict link if logged in 1`] = `
-<DocumentFragment>
-  <span>
-    You are already logged in please 
-    <a
-      href=""
-    >
-      click here
-    </a>
-     to reload your content access
-  </span>
-</DocumentFragment>
-`;
-
-exports[`Login component should render without throwing an error and match snapshot 1`] = `
-<DocumentFragment>
-  <form
-    class=""
-    id="loginForm"
-  >
-    <div
-      class="form-field form-field--input  "
-    >
-      <label
-        class="required"
-      >
-        Email
-      </label>
-      <input
-        data-testid="input"
-        name="email"
-        placeholder="example@email.com"
-        required=""
-        type="email"
-        value=""
-      />
-    </div>
-    <div
-      class="form-field form-field--input  form-field--password"
-    >
-      <label
-        class="required"
-      >
-        Password
-      </label>
-      <input
-        data-testid="input"
-        name="password"
-        required=""
-        type="password"
-        value=""
-      />
-      <span
-        class="show-hide-password active"
-        data-testid="toggle-input-type"
-        role="button"
-      >
-        Show
-        <i
-          class="material-icons"
-        >
-          visibility_off
-        </i>
-      </span>
-    </div>
-    <div
-      class="form-field form-field--checkbox"
-      role="button"
-    >
-      <input
-        class="form-checkbox"
-        id="remember-me-checkbox"
-        name="rememberme"
-        readonly=""
-        type="checkbox"
-        value=""
-      />
-      <div
-        class=""
-      >
-        <label
-          for="remember-me-checkbox"
-        >
-          <span>
-            Remember Me
-          </span>
-        </label>
-      </div>
-    </div>
-  </form>
-  <button
-    class="button "
-    disabled=""
-    form="loginForm"
-    name="button"
-    type="submit"
-  >
-    Login
-  </button>
-</DocumentFragment>
-`;

package/tests/unit/src/components/Login/helpers/check-gtm-children.test.js

@@ -1,60 +0,0 @@
-import { checkGtmChildren } from '../../../../../../src/components/Login/helpers';
-
-const mockedChildren = [
-  {
-    props: {
-      children: [false, [{ props: { component: { settings: {} } } }]]
-    }
-  },
-  {
-    props: {
-      children: [
-        false,
-        [{ props: { component: { settings: { gtmEvents: [{ eventTrigger: 'onLoad' }] } } } }]
-      ]
-    }
-  },
-  {
-    props: {
-      children: [
-        false,
-        [{ props: { component: { settings: { gtmEvents: [{ eventTrigger: 'onSuccess' }] } } } }]
-      ]
-    }
-  }
-];
-
-describe('checkGtmChildrenhelper', () => {
-  const noParams = checkGtmChildren();
-  const emptyChildren = checkGtmChildren([]);
-  const childrenWithNoGtm = checkGtmChildren(mockedChildren[0]);
-  const childrenWithGtm = checkGtmChildren(mockedChildren[1]);
-  const childrenWithOnSuccessGtm = checkGtmChildren(mockedChildren[2], () => {});
-
-  it('should always return an array with 2 elements', () => {
-    expect(Array.isArray(noParams)).toEqual(true);
-    expect(noParams.length).toEqual(2);
-    expect(Array.isArray(emptyChildren)).toEqual(true);
-    expect(emptyChildren.length).toEqual(2);
-    expect(Array.isArray(childrenWithNoGtm)).toEqual(true);
-    expect(childrenWithNoGtm.length).toEqual(2);
-    expect(Array.isArray(childrenWithGtm)).toEqual(true);
-    expect(childrenWithGtm.length).toEqual(2);
-    expect(Array.isArray(childrenWithOnSuccessGtm)).toEqual(true);
-    expect(childrenWithOnSuccessGtm.length).toEqual(2);
-  });
-
-  it('if no valid onSuccess children are passed the first value in the array should be false', () => {
-    expect(noParams[0]).toEqual(false);
-    expect(emptyChildren[0]).toEqual(false);
-    expect(childrenWithNoGtm[0]).toEqual(false);
-    expect(childrenWithGtm[0]).toEqual(false);
-  });
-
-  it('otherwise first value should be true and children should be updated with the handleOnSuccess function', () => {
-    expect(childrenWithOnSuccessGtm[0]).toEqual(true);
-    expect(
-      childrenWithOnSuccessGtm[1].props.children[1][0].props.component.settings.gtmEvents[0]
-    ).toHaveProperty('handleOnSuccess');
-  });
-});

package/tests/unit/src/components/Login/helpers/get-url-to-use.test.js

@@ -1,15 +0,0 @@
-import { getUrlToUse } from '../../../../../../src/components/Login/helpers';
-
-describe('Get url to use helper', () => {
-  it('should return url to use based on props passed', () => {
-    const singleRedirect = getUrlToUse({ redirectUrl: 'redirect' });
-    const arrayRedirect = getUrlToUse({ redirectUrl: ['multi-redirect'] });
-    const baseUrl = getUrlToUse({ redirectUrl: 'base' });
-    const asPathUrl = getUrlToUse({ redirectUrl: 'asPath' });
-
-    expect(singleRedirect).toEqual('redirect');
-    expect(arrayRedirect).toEqual('multi-redirect');
-    expect(baseUrl).toEqual('base');
-    expect(asPathUrl).toEqual('asPath');
-  });
-});

package/tests/unit/src/components/PasswordReset/PasswordReset.test.js

@@ -1,85 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-import React from 'react';
-import { RESET_USER_PASSWORD_MUTATION } from '@blaze-cms/core-auth-ui';
-import { fireEvent, render, queryByAttribute, waitFor } from '@testing-library/react';
-import { MockedProvider } from '@apollo/client/testing';
-import PasswordReset from '../../../../../src/components/PasswordReset';
-
-jest.mock('next/router', () => ({
-  useRouter: jest.fn(() => ({ asPath: 'test-url?token=123' }))
-}));
-
-const getById = queryByAttribute.bind(null, 'id');
-const validPassword = 'NewPassword$123';
-const mocks = [
-  {
-    request: {
-      query: RESET_USER_PASSWORD_MUTATION,
-      variables: {
-        input: { token: '123', password: validPassword }
-      }
-    },
-    result: {
-      data: {
-        resetUserPasswordResult: {
-          result: { result: true, extras: { redirectUrl: 'redirect-url' } }
-        }
-      }
-    }
-  }
-];
-
-const setup = () => {
-  const resetComponent = render(
-    <MockedProvider mocks={mocks}>
-      <PasswordReset>
-        <div>child</div>
-      </PasswordReset>
-    </MockedProvider>
-  );
-
-  const passWordInput = getById(resetComponent.container, 'password');
-  const passWordConfirmInput = getById(resetComponent.container, 'passwordConfirm');
-  const button = resetComponent.getByText('Reset Password');
-
-  return { resetComponent, button, passWordInput, passWordConfirmInput };
-};
-
-describe('PasswordResetRequest component', () => {
-  it('should render without throwing an error if token is present', () => {
-    const {
-      resetComponent: { asFragment }
-    } = setup();
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('button should be disabled if no passord or passwordConfirm is entered', () => {
-    const { button } = setup();
-    expect(button).toHaveAttribute('disabled');
-  });
-
-  it('button should not be disabled if both password fields have value', () => {
-    const { passWordInput, passWordConfirmInput, button } = setup();
-    fireEvent.change(passWordInput, { target: { value: '123' } });
-    fireEvent.change(passWordConfirmInput, { target: { value: '234' } });
-    expect(button).not.toBeDisabled();
-  });
-
-  it('should call PasswordReset mutation and render children if password and passwordConfirm match', async () => {
-    const { passWordInput, passWordConfirmInput, button, resetComponent } = setup();
-    fireEvent.change(passWordInput, { target: { value: validPassword } });
-    fireEvent.change(passWordConfirmInput, { target: { value: validPassword } });
-    fireEvent(
-      button,
-      new MouseEvent('click', {
-        bubbles: true,
-        cancelable: true
-      })
-    );
-
-    await waitFor(() => {
-      const renderedChildren = resetComponent.getByText('child');
-      expect(renderedChildren).toBeDefined();
-    });
-  });
-});