@blaze-cms/react-page-builder 0.125.0-auth-updates.5 → 0.125.0-core-styles.1

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

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

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

@@ -0,0 +1,8 @@
+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

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

package/src/components/PasswordResetRequest/PasswordResetRequest.js

@@ -0,0 +1,82 @@
+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

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

package/src/components/index.js

@@ -28,13 +28,19 @@ export default {
   ),
   modal: dynamic(() => import(/* webpackChunkName: "blazePbModal" */ './Modal')),
   code: dynamic(() => import(/* webpackChunkName: "blazePbCode" */ './Code')),
+  login: dynamic(() => import(/* webpackChunkName: "blazePbLogin" */ './Login')),
   menu: dynamic(() => import(/* webpackChunkName: "blazePbMenu" */ './Menu')),
   menuitem: dynamic(() => import(/* webpackChunkName: "blazePbMenuItem" */ './MenuItem')),
   submenu: dynamic(() => import(/* webpackChunkName: "blazePbSubMenu" */ './SubMenu')),
   emailconfirm: dynamic(() =>
     import(/* webpackChunkName: "blazePbEmailConfirm" */ './EmailConfirm')
   ),
-
+  passwordreset: dynamic(() =>
+    import(/* webpackChunkName: "blazePbPasswordReset" */ './PasswordReset')
+  ),
+  passwordresetrequest: dynamic(() =>
+    import(/* webpackChunkName: "blazePbPasswordResetRequest" */ './PasswordResetRequest')
+  ),
   breadcrumb: dynamic(() => import(/* webpackChunkName: "blazePbBreadcrumb" */ './Breadcrumb')),
   itemlistbutton: dynamic(() =>
     import(/* webpackChunkName: "blazePbItemListButton" */ './ItemList/ItemListButton')

package/src/constants/index.js

@@ -35,7 +35,10 @@ const CATEGORY_ID = 'categoryId';
 const PUBLISHED = 'published';
 const ID = 'id';
 const LINK = 'link';
+const EMAIL = 'email';
+const PASSWORD = 'password';
 const LOGOUT = 'logout';
+const LOGIN_FORM = 'loginForm';
 const GRAPH_QL_ERROR = 'GraphQL error: ';
 const HOVER = 'hover';
 const MOUSE_ENTER = 'mouseenter';
@@ -127,6 +130,10 @@ const BREAKPOINT_SIZES = {
 
 const MAX_BANNER_HEIGHT = 250;
 const MIN_BANNER_HEIGHT = 90;
+const PASSWORD_REGEX = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,}$/;
+const PASSWORD_VALIDATION_MESSAGE =
+  'Must contain 8 or more characters with a mix of upper & lower case letters, numbers & symbols and no spaces';
+const PASSWORD_CONFIRM_MESSAGE = 'Passwords must match';
 const ALLOWED_BLOCK_TYPES = ['p', 'ul', 'ol'];
 
 const PREHEADER_PROP = 'alternativePreHeader';
@@ -280,6 +287,8 @@ export {
   LOAD_MORE,
   CLASSIC,
   BREAKPOINT_SIZES,
+  EMAIL,
+  PASSWORD,
   LOGOUT,
   MIN_BANNER_HEIGHT,
   MAX_BANNER_HEIGHT,
@@ -296,6 +305,10 @@ export {
   HIDDEN,
   MENU_ITEM,
   SUB_MENU,
+  LOGIN_FORM,
+  PASSWORD_REGEX,
+  PASSWORD_VALIDATION_MESSAGE,
+  PASSWORD_CONFIRM_MESSAGE,
   ELEMENT,
   ALLOWED_BLOCK_TYPES,
   PREHEADER_PROP,

package/src/index.js

@@ -11,7 +11,7 @@ export {
   getSingleEntitySchema,
   getUser
 } from './application/query';
-export { buildPropsQuery, getUnpublishedEntityName, renderChildren, hasChildren } from './helpers';
+export { buildPropsQuery, getUnpublishedEntityName, renderChildren } from './helpers';
 export { withTitle } from './HOC';
 export { useGetEntitySchema, useGetEntitySchemasAsObj, useGetSingleEntitySchema } from './hooks';
 export { summaryComponents } from './components/DataSummary/DataSummaryTypes';

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

@@ -16,17 +16,8 @@ const render = async (Component, props) => {
 };
 
 const CATEGORY = 'category-name';
-
-const propsToDisplay = [
-  {
-    htmlAttribute: 'data-testid'
-  }
-];
-const getMockedParsedProp = children => <>{children}</>;
-const firstPropValue = 'some description';
-const secondPropValue = 'extra props';
-const firstPropToDisplay = getMockedParsedProp(['', '', firstPropValue, '', '']);
-const secondPropToDisplay = getMockedParsedProp(['', '', secondPropValue, '', '']);
+const firstPropToDisplay = 'some description';
+const secondPropToDisplay = 'extra props';
 
 const componentProps = {
   id: 'id',
@@ -50,8 +41,7 @@ const componentProps = {
   displayCategory: true,
   displayThumbnail: true,
   displayTitle: true,
-  propsToDisplay,
-  parsedPropsToDisplay: [firstPropToDisplay, secondPropToDisplay]
+  propsToDisplay: [firstPropToDisplay, secondPropToDisplay]
 };
 
 const preHeaderName = 'Pre header';
@@ -64,8 +54,7 @@ jest.mock('../../../../../src/components/LazyImage', () => ({ src, alt }) => (
 
 describe('Card component', () => {
   it('should render without throwing an error and match snapshot', async () => {
-    const { asFragment, getByTestId } = await render(Card, componentProps);
-    expect(getByTestId(encodeURIComponent(firstPropValue))).toBeDefined();
+    const { asFragment } = await render(Card, componentProps);
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -170,8 +159,8 @@ describe('Card component', () => {
     const { getByText } = await render(Card, componentProps);
 
     await waitFor(() => {
-      expect(getByText(firstPropValue)).toBeInTheDocument();
-      expect(getByText(secondPropValue)).toBeInTheDocument();
+      expect(getByText(firstPropToDisplay)).toBeInTheDocument();
+      expect(getByText(secondPropToDisplay)).toBeInTheDocument();
     });
   });
 
@@ -181,7 +170,7 @@ describe('Card component', () => {
     const { getByText } = await render(Card, { ...componentProps, ...propsToDisplayModifiers });
 
     await waitFor(() => {
-      const span = getByText(firstPropValue).closest('span');
+      const span = getByText(firstPropToDisplay).closest('span');
       expect(span).not.toHaveAttribute(modifier);
     });
   });

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

@@ -44,7 +44,6 @@ exports[`Card component should not render alternative headline if alternativePre
         >
           <span
             class=""
-            data-testid="some%20description"
           >
             some description
           </span>
@@ -113,7 +112,6 @@ exports[`Card component should not render alternative headline if displayCategor
         >
           <span
             class=""
-            data-testid="some%20description"
           >
             some description
           </span>
@@ -188,7 +186,6 @@ exports[`Card component should not render preHeader if alternativeHeadline is no
         >
           <span
             class=""
-            data-testid="some%20description"
           >
             some description
           </span>
@@ -262,7 +259,6 @@ exports[`Card component should render customPreheader and alternativeHeadline in
         >
           <span
             class=""
-            data-testid="some%20description"
           >
             some description
           </span>
@@ -337,7 +333,6 @@ exports[`Card component should render without throwing an error and match snapsh
         >
           <span
             class=""
-            data-testid="some%20description"
           >
             some description
           </span>

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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,103 @@
+// 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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,85 @@
+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();
+    });
+  });
+});

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

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PasswordResetRequest component should render without throwing an error if token is present 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    <form
+      id="passwordReset"
+    >
+      <div
+        class="form-field form-field--input  form-field--password"
+      >
+        <label
+          class="required"
+          for="password"
+        >
+          Password
+        </label>
+        <input
+          data-testid="input"
+          id="password"
+          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--input  form-field--password"
+      >
+        <label
+          class="required"
+          for="passwordConfirm"
+        >
+          Confirm New Password
+        </label>
+        <input
+          data-testid="input"
+          id="passwordConfirm"
+          name="passwordConfirm"
+          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>
+    </form>
+    <button
+      class="button "
+      disabled=""
+      form="passwordReset"
+      name="button"
+      type="submit"
+    >
+      Reset Password
+    </button>
+  </div>
+</DocumentFragment>
+`;