chore: Fix styles

collective · Nov 17, 2023 · 62e5192 · 62e5192
1 parent d32ab22
commit 62e5192
Show file tree

Hide file tree

Showing 16 changed files with 97 additions and 120 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,36 @@
+# EditorConfig Configurtaion file, for more details see:
+# http://EditorConfig.org
+# EditorConfig is a convention description, that could be interpreted
+# by multiple editors to enforce common coding conventions for specific
+# file types
+
+# top-most EditorConfig file:
+# Will ignore other EditorConfig files in Home directory or upper tree level.
+root = true
+
+
+[*]  # For All Files
+# Unix-style newlines with a newline ending every file
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+# Set default charset
+charset = utf-8
+# Indent style default
+indent_style = space
+# Max Line Length - a hard line wrap, should be disabled
+max_line_length = off
+
+[*.{py,cfg,ini}]
+# 4 space indentation
+indent_size = 4
+
+[*.{html,dtml,pt,zpt,xml,zcml,js,jsx,tsx,json,less,css}]
+# 2 space indentation
+indent_size = 2
+
+[{Makefile,.gitmodules}]
+# Tab indentation (no size specified, but view as 4 spaces)
+indent_style = tab
+indent_size = unset
+tab_width = unset
diff --git a/.eslintrc b/.eslintrc
@@ -1,6 +1,6 @@
 {
-  "extends": ["react-app", "prettier", "plugin:jsx-a11y/recommended"],
-  "plugins": ["prettier", "react-hooks", "jsx-a11y"],
+  "extends": ["react-app", "prettier"],
+  "plugins": ["prettier", "react-hooks"],
   "env": {
     "es6": true,
     "browser": true,

diff --git a/.github/workflows/code.yml b/.github/workflows/code.yml
@@ -9,7 +9,7 @@ jobs:
 
     steps:
       - name: Main checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Linting
         run: make lint
diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2.3.1
+        uses: actions/checkout@v4
 
       - name: Generate Storybook
         run: |

diff --git a/.github/workflows/unit.yml b/.github/workflows/unit.yml
@@ -9,7 +9,7 @@ jobs:
 
     steps:
       - name: Main checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Unit tests
         run: make test-ci
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+.storybook
diff --git a/jest-addon-config.js b/jest-addon-config.js
@@ -1,18 +1,14 @@
 module.exports = {
   testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
-  collectCoverageFrom: [
-    'src/addons/**/src/**/*.{js,jsx,ts,tsx}',
-    '!src/**/*.d.ts',
-  ],
+  collectCoverageFrom: ['src/addons/**/src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
   moduleNameMapper: {
     '@plone/volto/cypress': '<rootDir>/node_modules/@plone/volto/cypress',
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@package/(.*)$': '<rootDir>/src/$1',
     '@root/(.*)$': '<rootDir>/src/$1',
     '~/(.*)$': '<rootDir>/src/$1',
-    'load-volto-addons':
-      '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
+    'load-volto-addons': '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
   },
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',

diff --git a/src/components/AuthProvider/AuthProvider.jsx b/src/components/AuthProvider/AuthProvider.jsx
@@ -20,20 +20,10 @@ function AuthProvider({ provider, action, onSelectProvider }) {
   const providerId = provider.id;
   const icon = icons[providerId];
   return (
-    <Button
-      className="authenticationProvider"
-      id={provider.id}
-      title={provider.title}
-      onClick={() => onSelectProvider(provider)}
-    >
+    <Button className="authenticationProvider" id={provider.id} title={provider.title} onClick={() => onSelectProvider(provider)}>
       {icon && <Icon name={icon} title={provider.title} size="32px" />}
-      {action === 'login' && (
-        <FormattedMessage id="Log in with" defaultMessage="Log in with" />
-      )}
-      {action === 'register' && (
-        <FormattedMessage id="Sign up with" defaultMessage="Sign up with" />
-      )}{' '}
-      {provider.title}
+      {action === 'login' && <FormattedMessage id="Log in with" defaultMessage="Log in with" />}
+      {action === 'register' && <FormattedMessage id="Sign up with" defaultMessage="Sign up with" />} {provider.title}
     </Button>
   );
 }

diff --git a/src/components/AuthProviders/AuthProviders.jsx b/src/components/AuthProviders/AuthProviders.jsx
@@ -4,7 +4,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container, Dimmer, Loader } from 'semantic-ui-react';
+import { Container } from 'semantic-ui-react';
 import AuthProvider from '../AuthProvider/AuthProvider';
 
 import './AuthProviders.css';
@@ -16,31 +16,11 @@ import './AuthProviders.css';
  */
 function AuthProviders({ providers, action, onSelectProvider }) {
   return (
-    <>
-      {providers && providers.length > 1 ? (
-        <Container id="authenticationProviders">
-          {providers.map(function (provider, i) {
-            return (
-              provider &&
-              provider.id !== 'oidc' && (
-                <AuthProvider
-                  key={i}
-                  provider={provider}
-                  action={action}
-                  onSelectProvider={onSelectProvider}
-                />
-              )
-            );
-          })}
-        </Container>
-      ) : (
-        <Container id="authenticationProviders">
-          <Dimmer active={true}>
-            <Loader size={'huge'} />
-          </Dimmer>
-        </Container>
-      )}
-    </>
+    <Container id="authenticationProviders">
+      {providers.map(function (provider, i) {
+        return provider && provider.id !== 'oidc' && <AuthProvider key={i} provider={provider} action={action} onSelectProvider={onSelectProvider} />;
+      })}
+    </Container>
   );
 }
 

diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx
@@ -3,11 +3,7 @@
  * @module components/Login/Login
  */
 import React, { useEffect, useState } from 'react';
-import {
-  authomaticRedirect,
-  listAuthOptions,
-  oidcRedirect,
-} from '../../actions';
+import { authomaticRedirect, listAuthOptions, oidcRedirect } from '../../actions';
 import { injectIntl } from 'react-intl';
 import { useSelector, useDispatch } from 'react-redux';
 import LoginForm from './LoginForm';
@@ -59,24 +55,13 @@ function Login({ intl }) {
   }, [startedOIDC, loginOIDCValues]);
 
   useEffect(() => {
-    if (
-      options !== undefined &&
-      options.length === 1 &&
-      options[0].id === 'oidc'
-    ) {
+    if (options !== undefined && options.length === 1 && options[0].id === 'oidc') {
       setStartedOIDC(true);
       dispatch(oidcRedirect('oidc'));
     }
   }, [options, dispatch]);
 
-  return (
-    <LoginForm
-      loading={loading}
-      providers={options}
-      action={'login'}
-      onSelectProvider={onSelectProvider}
-    />
-  );
+  return <LoginForm loading={loading} providers={options} action={'login'} onSelectProvider={onSelectProvider} />;
 }
 
 export default injectIntl(Login);
diff --git a/src/components/Login/LoginForm.jsx b/src/components/Login/LoginForm.jsx
@@ -4,11 +4,15 @@
  */
 import React from 'react';
 import { Helmet } from '@plone/volto/helpers';
-import { Container, Segment } from 'semantic-ui-react';
+import { Container, Segment, Dimmer, Loader } from 'semantic-ui-react';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import AuthProviders from '../AuthProviders/AuthProviders';
 
 const messages = defineMessages({
+  loading: {
+    id: 'Loading',
+    defaultMessage: 'Loading',
+  },
   Login: {
     id: 'Login',
     defaultMessage: 'Login',
@@ -21,6 +25,7 @@ const messages = defineMessages({
  * @returns {JSX.Element} Markup of the Login page.
  */
 function LoginForm({ intl, loading, providers, action, onSelectProvider }) {
+  const validProviders = providers.filter((provider) => provider.id !== 'oidc');
   return (
     <div id="page-login">
       <Helmet title={intl.formatMessage(messages.Login)} />
@@ -30,18 +35,18 @@ function LoginForm({ intl, loading, providers, action, onSelectProvider }) {
             <FormattedMessage id="Log In" defaultMessage="Login" />
           </Segment>
           <Segment secondary>
-            <FormattedMessage
-              id="Select Login Provider"
-              defaultMessage="Select Login Provider"
-            />
+            <FormattedMessage id="Select Login Provider" defaultMessage="Select Login Provider" />
           </Segment>
           <Segment className="form">
-            {!loading && providers && (
-              <AuthProviders
-                providers={providers}
-                action={action}
-                onSelectProvider={onSelectProvider}
-              />
+            {!loading && validProviders && <AuthProviders providers={validProviders} action={action} onSelectProvider={onSelectProvider} />}
+            {(loading || validProviders.length === 0) && (
+              <Dimmer.Dimmable as={Segment} dimmed={true}>
+                <Dimmer active inverted>
+                  <Loader size={'small'} inline="centered">
+                    {intl.formatMessage(messages.loading)}
+                  </Loader>
+                </Dimmer>
+              </Dimmer.Dimmable>
             )}
           </Segment>
         </Segment.Group>

diff --git a/src/components/Login/LoginForm.stories.jsx b/src/components/Login/LoginForm.stories.jsx
@@ -21,8 +21,24 @@ const StoryComponent = injectIntl(({ children, ...args }) => {
   );
 });
 
-export const Form = StoryComponent.bind({});
-Form.args = {
+export const NoProvider = StoryComponent.bind({});
+NoProvider.args = {
+  providers: [],
+  action: 'login',
+  loading: false,
+};
+
+export const OneProvider = StoryComponent.bind({});
+OneProvider.args = {
+  providers: [
+    providers.github,
+  ],
+  action: 'login',
+  loading: false,
+};
+
+export const MultipleProviders = StoryComponent.bind({});
+MultipleProviders.args = {
   providers: [
     providers.facebook,
     providers.github,

diff --git a/src/components/LoginAuthomatic/LoginAuthomatic.jsx b/src/components/LoginAuthomatic/LoginAuthomatic.jsx
@@ -59,14 +59,7 @@ function LoginAuthomatic({ intl }) {
     if (error) {
       history.push('/login');
       if (!toast.isActive('loginFailed')) {
-        toast.error(
-          <Toast
-            error
-            title={intl.formatMessage(messages.oAuthLoginFailed)}
-            content={intl.formatMessage(messages.oAuthLoginFailedContent)}
-          />,
-          { autoClose: false, toastId: 'loginFailed' },
-        );
+        toast.error(<Toast error title={intl.formatMessage(messages.oAuthLoginFailed)} content={intl.formatMessage(messages.oAuthLoginFailedContent)} />, { autoClose: false, toastId: 'loginFailed' });
       }
     }
   }, [error, history, intl]);
@@ -75,9 +68,7 @@ function LoginAuthomatic({ intl }) {
     <div id="page-login">
       <Container text>
         <Dimmer active={isLoading}>
-          <Loader size={'huge'}>
-            {intl.formatMessage(messages.authenticating)}
-          </Loader>
+          <Loader size={'huge'}>{intl.formatMessage(messages.authenticating)}</Loader>
         </Dimmer>
       </Container>
     </div>

diff --git a/src/components/LoginOIDC/LoginOIDC.jsx b/src/components/LoginOIDC/LoginOIDC.jsx
@@ -59,14 +59,7 @@ function LoginOIDC({ intl }) {
     if (error) {
       history.push('/login');
       if (!toast.isActive('loginFailed')) {
-        toast.error(
-          <Toast
-            error
-            title={intl.formatMessage(messages.oAuthLoginFailed)}
-            content={intl.formatMessage(messages.oAuthLoginFailedContent)}
-          />,
-          { autoClose: false, toastId: 'loginFailed' },
-        );
+        toast.error(<Toast error title={intl.formatMessage(messages.oAuthLoginFailed)} content={intl.formatMessage(messages.oAuthLoginFailedContent)} />, { autoClose: false, toastId: 'loginFailed' });
       }
     }
   }, [error, history, intl]);
@@ -75,9 +68,7 @@ function LoginOIDC({ intl }) {
     <div id="page-login">
       <Container text>
         <Dimmer active={isLoading}>
-          <Loader size={'huge'}>
-            {intl.formatMessage(messages.authenticating)}
-          </Loader>
+          <Loader size={'huge'}>{intl.formatMessage(messages.authenticating)}</Loader>
         </Dimmer>
       </Container>
     </div>

diff --git a/src/index.js b/src/index.js
@@ -2,12 +2,7 @@ import Login from './components/Login/Login';
 import LoginAuthomatic from './components/LoginAuthomatic/LoginAuthomatic';
 import LoginOIDC from './components/LoginOIDC/LoginOIDC';
 import Logout from './components/Logout/Logout';
-import {
-  authomaticRedirect,
-  authOptions,
-  oidcLogout,
-  oidcRedirect,
-} from './reducers';
+import { authomaticRedirect, authOptions, oidcLogout, oidcRedirect } from './reducers';
 import { Login as VoltoLogin } from '@plone/volto/components';
 
 const applyConfig = (config) => {
@@ -18,17 +13,8 @@ const applyConfig = (config) => {
     oidcLogout,
     oidcRedirect,
   };
-  config.settings.persistentReducers = [
-    ...config.settings.persistentReducers,
-    'authomaticRedirect',
-    'oidcLogout',
-    'oidcRedirect',
-  ];
-  config.settings.nonContentRoutes = [
-    ...config.settings.nonContentRoutes,
-    /^\/login-authomatic\/.*$/,
-    /^\/login-oidc\/.*$/,
-  ];
+  config.settings.persistentReducers = [...config.settings.persistentReducers, 'authomaticRedirect', 'oidcLogout', 'oidcRedirect'];
+  config.settings.nonContentRoutes = [...config.settings.nonContentRoutes, /^\/login-authomatic\/.*$/, /^\/login-oidc\/.*$/];
   config.addonRoutes.push(
     { path: '/fallback_login', component: VoltoLogin },
     { path: '/login', component: Login },

diff --git a/src/theme/styles.overrides b/src/theme/styles.overrides