@punch-in/strapi-admin 1.0.6 → 1.0.8

package/admin/src/containers/AuthPage/components/Login/BaseLogin.js

@@ -1,19 +1,58 @@
-import React from 'react';
-import { Checkbox } from '@buffetjs/core';
+import React, { useReducer, useEffect } from 'react';
+import { Checkbox, Button, Flex, Padded, Separator } from '@punch-in/buffet-modern-core';
+import { LoadingIndicator } from '@punch-in/buffet-modern-styles';
 import { useIntl } from 'react-intl';
 import { get } from 'lodash';
 import PropTypes from 'prop-types';
-import { BaselineAlignment } from 'strapi-helper-plugin';
+import { BaselineAlignment, request } from 'strapi-helper-plugin';
 
-import Button from '../../../../components/FullWidthButton';
+import FullWidthButton from '../../../../components/FullWidthButton';
 import AuthLink from '../AuthLink';
 import Box from '../Box';
 import Input from '../Input';
 import Logo from '../Logo';
 import Section from '../Section';
+import ProviderButton from '../../../../components/ProviderButton';
+
+// Provider fetching hook
+const useAuthProviders = () => {
+  const [state, dispatch] = useReducer((state, action) => {
+    switch (action.type) {
+      case 'GET_DATA':
+        return { ...state, isLoading: true };
+      case 'GET_DATA_SUCCEEDED':
+        return { ...state, data: action.data, isLoading: false };
+      case 'GET_DATA_ERROR':
+        return { ...state, isLoading: false };
+      default:
+        return state;
+    }
+  }, { data: [], isLoading: true });
+
+  useEffect(() => {
+    const fetchAuthProviders = async () => {
+      try {
+        const data = await request('/admin/providers', { method: 'GET' });
+        dispatch({ type: 'GET_DATA_SUCCEEDED', data });
+      } catch (err) {
+        console.error(err);
+        dispatch({ type: 'GET_DATA_ERROR' });
+        strapi.notification.toggle({
+          type: 'warning',
+          message: { id: 'notification.error' },
+          centered: true,
+        });
+      }
+    };
+    fetchAuthProviders();
+  }, []);
+
+  return state;
+};
 
 const Login = ({ children, formErrors, modifiedData, onChange, onSubmit, requestError }) => {
   const { formatMessage } = useIntl();
+  const { isLoading, data: providers } = useAuthProviders();
 
   return (
     <>
@@ -23,6 +62,7 @@ const Login = ({ children, formErrors, modifiedData, onChange, onSubmit, request
       <Section withBackground>
         <BaselineAlignment top size="25px">
           <Box errorMessage={get(requestError, 'errorMessage', null)}>
+            {/* Regular Login Form */}
             <form onSubmit={onSubmit}>
               <Input
                 autoFocus
@@ -52,13 +92,35 @@ const Login = ({ children, formErrors, modifiedData, onChange, onSubmit, request
                 value={modifiedData.rememberMe}
               />
               <BaselineAlignment top size="27px">
-                <Button type="submit" color="primary" textTransform="uppercase">
+                <FullWidthButton type="submit" color="primary" textTransform="uppercase">
                   {formatMessage({ id: 'Auth.form.button.login' })}
-                </Button>
+                </FullWidthButton>
               </BaselineAlignment>
             </form>
             {children}
           </Box>
+          {/* SSO Providers Section */}
+          {!isLoading && providers.length > 0 && (
+            <>
+              <Separator />
+              <Padded top bottom size="smd">
+                <BaselineAlignment top size="3px" />
+              </Padded>
+              <div style={{ 
+                background: '#d2e9fe', 
+                padding: '1.4rem', 
+                boxShadow: 'rgb(221, 221, 221) 12px 12px 9px 0px' }}>
+                <Flex flexWrap="wrap" justifyContent="center" alignItems="center">
+                  <div>{formatMessage({ id: 'Auth.components.sso.info' })}: </div>
+                  {providers.map(provider => (
+                    <div key={provider.uid} style={{ padding: '5px 4px' }}>
+                      <ProviderButton provider={provider} />
+                    </div>
+                  ))}
+                </Flex>
+              </div>
+            </>
+          )}
         </BaselineAlignment>
       </Section>
       <AuthLink label="Auth.link.forgot-password" to="/auth/forgot-password" />

package/admin/src/containers/AuthPage/components/Logo/Img.js

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 
 const Img = styled.img`
-  height: 40px;
 `;
 
 export default Img;

package/admin/src/containers/AuthPage/components/Logo/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import LogoStrapi from '../../../../assets/images/logo_strapi.png';
+import LogoStrapi from '../../../../assets/images/punchinlogo.webp';
 import Img from './Img';
 
 const Logo = () => <Img src={LogoStrapi} alt="strapi-logo" />;

package/admin/src/containers/AuthPage/components/Oops/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, Padded } from '@buffetjs/core';
+import { Text, Padded } from '@punch-in/buffet-modern-core';
 import { useHistory } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import { BaselineAlignment, useQuery } from 'strapi-helper-plugin';

package/admin/src/containers/AuthPage/components/Providers/index.js

@@ -0,0 +1,109 @@
+import React, { useReducer, useEffect } from 'react';
+import { Button, Flex, Padded, Separator } from '@punch-in/buffet-modern-core';
+import { LoadingIndicator } from '@punch-in/buffet-modern-styles';
+import { Redirect, useHistory } from 'react-router-dom';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
+import { BaselineAlignment, request } from 'strapi-helper-plugin';
+
+import Box from '../Box';
+import Logo from '../Logo';
+import Section from '../Section';
+import ProviderButton from '../../../../components/ProviderButton';
+
+const ProviderWrapper = styled.div`
+  padding: 5px 4px;
+`;
+
+// Inline useAuthProviders hook to avoid import issues
+const useAuthProviders = () => {
+  const [state, dispatch] = useReducer((state, action) => {
+    switch (action.type) {
+      case 'GET_DATA':
+        return { ...state, isLoading: true };
+      case 'GET_DATA_SUCCEEDED':
+        return { ...state, data: action.data, isLoading: false };
+      case 'GET_DATA_ERROR':
+        return { ...state, isLoading: false };
+      default:
+        return state;
+    }
+  }, { data: [], isLoading: true });
+
+  useEffect(() => {
+    const fetchAuthProviders = async () => {
+      try {
+        const data = await request('/admin/providers', { method: 'GET' });
+        dispatch({ type: 'GET_DATA_SUCCEEDED', data });
+      } catch (err) {
+        console.error(err);
+        dispatch({ type: 'GET_DATA_ERROR' });
+        strapi.notification.toggle({
+          type: 'warning',
+          message: { id: 'notification.error' },
+          centered: true,
+        });
+      }
+    };
+    fetchAuthProviders();
+  }, []);
+
+  return state;
+};
+
+const Providers = () => {
+  const { push } = useHistory();
+  const { formatMessage } = useIntl();
+  const { isLoading, data: providers } = useAuthProviders();
+
+  const handleClick = () => {
+    push('/auth/login');
+  };
+
+  if (!isLoading && providers.length === 0) {
+    return <Redirect to="/auth/login" />;
+  }
+
+  return (
+    <>
+      <Section textAlign="center">
+        <Logo />
+      </Section>
+      <Section withBackground textAlign="center">
+        <BaselineAlignment top size="25px">
+          <Box withoutError>
+            {isLoading ? (
+              <LoadingIndicator />
+            ) : (
+              <Flex flexWrap="wrap">
+                {providers.map(provider => (
+                  <ProviderWrapper key={provider.uid}>
+                    <ProviderButton provider={provider} />
+                  </ProviderWrapper>
+                ))}
+              </Flex>
+            )}
+            <Padded top bottom size="smd">
+              <BaselineAlignment top size="3px" />
+              <Separator
+                label={formatMessage({
+                  id: 'or',
+                  defaultMessage: 'OR',
+                })}
+              />
+              <BaselineAlignment top size="7px" />
+            </Padded>
+            <Button style={{ width: '100%' }} onClick={handleClick} type="submit" color="secondary">
+              {formatMessage({
+                id: 'Auth.form.button.login.strapi',
+                defaultMessage: 'LOG IN VIA STRAPI',
+              })}
+            </Button>
+          </Box>
+        </BaselineAlignment>
+      </Section>
+    </>
+  );
+};
+
+export default Providers;

package/admin/src/containers/AuthPage/components/Register/CustomLabel.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { Text } from '@buffetjs/core';
+import { Text } from '@punch-in/buffet-modern-core';
 import { useIntl } from 'react-intl';
 
 const CustomLabel = ({ id, onClick, values }) => {

package/admin/src/containers/AuthPage/components/Register/Span.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Text } from '@buffetjs/core';
+import { Text } from '@punch-in/buffet-modern-core';
 
 const Span = styled(Text)`
   color: #0097f7;

package/admin/src/containers/AuthPage/components/Register/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from 'react';
-import { Checkbox, Flex, Padded, Text } from '@buffetjs/core';
+import { Checkbox, Flex, Padded, Text } from '@punch-in/buffet-modern-core';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { get } from 'lodash';
 import PropTypes from 'prop-types';

package/admin/src/containers/AuthPage/components/ResetPassword/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { Padded } from '@buffetjs/core';
+import { Padded } from '@punch-in/buffet-modern-core';
 import { get } from 'lodash';
 import PropTypes from 'prop-types';
 import { BaselineAlignment } from 'strapi-helper-plugin';

package/admin/src/containers/AuthPage/index.js

@@ -3,7 +3,7 @@ import axios from 'axios';
 import { camelCase, get, omit, upperFirst } from 'lodash';
 import { Redirect, useRouteMatch, useHistory } from 'react-router-dom';
 import { BaselineAlignment, auth, useQuery } from 'strapi-helper-plugin';
-import { Padded } from '@buffetjs/core';
+import { Padded } from '@punch-in/buffet-modern-core';
 import PropTypes from 'prop-types';
 import forms from 'ee_else_ce/containers/AuthPage/utils/forms';
 

package/admin/src/containers/AuthPage/utils/forms.js

@@ -4,6 +4,7 @@ import Login from 'ee_else_ce/containers/AuthPage/components/Login';
 import ForgotPassword from '../components/ForgotPassword';
 import ForgotPasswordSuccess from '../components/ForgotPasswordSuccess';
 import Oops from '../components/Oops';
+import Providers from '../components/Providers';
 import Register from '../components/Register';
 import ResetPassword from '../components/ResetPassword';
 
@@ -119,6 +120,14 @@ const forms = {
         .required(translatedErrors.required),
     }),
   },
+  providers: {
+    Component: Providers,
+    endPoint: null,
+    fieldsToDisable: [],
+    fieldsToOmit: [],
+    schema: null,
+    inputsPrefix: '',
+  },
 };
 
 export default forms;

package/admin/src/containers/HomePage/hooks.js

@@ -12,36 +12,7 @@ const useFetch = () => {
   useEffect(() => {
     const CancelToken = axios.CancelToken;
     const source = CancelToken.source();
-
-    const fetchData = async () => {
-      try {
-        const { data } = await axios.get(
-          'https://strapi.io/api/blog-posts?_limit=2&_sort=publishedAt:desc',
-          {
-            cancelToken: source.token,
-          }
-        );
-
-        const posts = data.reduce((acc, curr) => {
-          acc.push({
-            title: curr.seo.metaTitle,
-            link: curr.slug,
-            content: curr.seo.metaDescription,
-          });
-
-          return acc;
-        }, []);
-
-        setState({ isLoading: false, posts, error: false });
-      } catch (err) {
-        if (isMounted.current) {
-          setState({ isLoading: false, error: true, posts: [] });
-        }
-      }
-    };
-
-    fetchData();
-
+    setState({ isLoading: false, error: true, posts: [] });
     return () => {
       isMounted.current = false;
       source.cancel('abort');

package/admin/src/containers/InstalledPluginsPage/Row.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { IconLinks, Text } from '@buffetjs/core';
-import { CustomRow } from '@buffetjs/styles';
+import { IconLinks, Text } from '@punch-in/buffet-modern-core';
+import { CustomRow } from '@punch-in/buffet-modern-styles';
 import { useGlobalContext, PopUpWarning, CheckPermissions } from 'strapi-helper-plugin';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';

package/admin/src/containers/InstalledPluginsPage/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useGlobalContext, request } from 'strapi-helper-plugin';
-import { Header, List } from '@buffetjs/custom';
+import { Header, List } from '@punch-in/buffet-modern-custom';
 import PageTitle from '../../components/PageTitle';
 import ContainerFluid from '../../components/ContainerFluid';
 import ListWrapper from './ListWrapper';

package/admin/src/containers/LeftMenu/Wrapper.js

@@ -8,12 +8,11 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
 const Wrapper = styled.div`
-  position: fixed;
-  float: left;
-  top: 0;
-  left: 0;
   height: 100vh;
-  width: ${props => props.theme.main.sizes.leftMenu.width};
+  width: 6rem;
+  top: 60px;
+  position: fixed;
+  z-index: 10;
   background: ${props => props.theme.main.colors.strapi['light-blue-transparent']};
 
   /* scrollbar overrides */

package/admin/src/containers/LeftMenu/index.js

@@ -4,7 +4,6 @@ import { useLocation } from 'react-router-dom';
 import {
   LeftMenuLinksSection,
   LeftMenuFooter,
-  LeftMenuHeader,
   LinksContainer,
 } from '../../components/LeftMenu';
 import Loader from './Loader';
@@ -45,8 +44,17 @@ const LeftMenu = ({ shouldUpdateStrapi, version, plugins, setUpdateMenu }) => {
   return (
     <Wrapper>
       <Loader show={isLoading} />
-      <LeftMenuHeader />
       <LinksContainer>
+        {pluginsSectionLinks.length > 0 && (
+          <LeftMenuLinksSection
+            section="plugins"
+            name="plugins"
+            links={pluginsSectionLinks}
+            location={location}
+            searchable={false}
+            emptyLinksListMessage="app.components.LeftMenuLinkContainer.noPluginsInstalled"
+          />
+        )}
         {filteredCollectionTypeLinks.length > 0 && (
           <LeftMenuLinksSection
             section="collectionType"
@@ -66,16 +74,6 @@ const LeftMenu = ({ shouldUpdateStrapi, version, plugins, setUpdateMenu }) => {
           />
         )}
 
-        {pluginsSectionLinks.length > 0 && (
-          <LeftMenuLinksSection
-            section="plugins"
-            name="plugins"
-            links={pluginsSectionLinks}
-            location={location}
-            searchable={false}
-            emptyLinksListMessage="app.components.LeftMenuLinkContainer.noPluginsInstalled"
-          />
-        )}
         {generalSectionLinks.length > 0 && (
           <LeftMenuLinksSection
             section="general"
@@ -86,7 +84,6 @@ const LeftMenu = ({ shouldUpdateStrapi, version, plugins, setUpdateMenu }) => {
           />
         )}
       </LinksContainer>
-      <LeftMenuFooter key="footer" version={version} />
     </Wrapper>
   );
 };

package/admin/src/containers/LocaleToggle/Wrapper.js

@@ -41,7 +41,7 @@ const Wrapper = styled.div`
   .localeDropdownContent {
     -webkit-font-smoothing: antialiased;
     span {
-      color: #333740;
+      color: #FFF;
       font-size: 13px;
       font-family: Lato;
       font-weight: 500;

package/admin/src/containers/MarketplacePage/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { LoadingIndicatorPage, useGlobalContext, request } from 'strapi-helper-plugin';
-import { Header } from '@buffetjs/custom';
+import { Header } from '@punch-in/buffet-modern-custom';
 import { useHistory } from 'react-router-dom';
 
 import { useFetchPluginsFromMarketPlace } from '../../hooks';

package/admin/src/containers/NewNotification/Notification/index.js

@@ -1,10 +1,10 @@
 import React, { useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { Padded, Text, Flex } from '@buffetjs/core';
+import { Padded, Text, Flex } from '@punch-in/buffet-modern-core';
 import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Remove } from '@buffetjs/icons';
+import { Remove } from '@punch-in/buffet-modern-icons';
 
 import { HIDE_NEW_NOTIFICATION } from '../constants';
 import { NotificationWrapper, IconWrapper, LinkArrow, RemoveWrapper } from './styledComponents';

package/admin/src/containers/NewNotification/Notification/styledComponents.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Arrow } from '@buffetjs/icons';
+import { Arrow } from '@punch-in/buffet-modern-icons';
 
 const NotificationWrapper = styled.div`
   position: relative;