all components must have their matching root class

2025-02-19 13:54:25 +01:00 · 2022-06-01 15:24:25 +02:00 · 2022-06-01 15:24:25 +02:00 · 925e109175
commit 925e109175
parent 8770adead4
43 changed files with 72 additions and 66 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -7,8 +7,6 @@
  "rules": {
    "semi": ["error", "always"],
    "no-use-before-define": "off",
-    "fabmanager/component-class-named-as-component": ["error", { "ignoreAbstractKeyword": true }],
-    "import/no-default-export": "error"
  },
  "globals": {
    "Application": true,
@ -48,6 +46,14 @@
        "react/prop-types": "off"
      }
    },
+    {
+      "files": ["app/frontend/src/javascript/components/**/*.tsx"],
+      "rules": {
+        "import/no-default-export": "error",
+        "import/no-unused-modules": ["error", { "missingExports": true }],
+        "fabmanager/component-class-named-as-component": ["error", { "ignoreAbstractKeyword": true }]
+      }
+    },
    {
      "files": ["app/frontend/src/javascript/models/**/*.ts"],
      "rules": {
--- a/app/frontend/src/javascript/components/base/labelled-input.tsx
+++ b/app/frontend/src/javascript/components/base/labelled-input.tsx
@ -15,7 +15,7 @@ interface LabelledInputProps {
 */
 export const LabelledInput: React.FC<LabelledInputProps> = ({ id, type, label, value, onChange }) => {
  return (
-    <div className="input-with-label">
+    <div className="labelled-input">
      <label className="label" htmlFor={id}>{label}</label>
      <input className="input" id={id} type={type} value={value} onChange={onChange} />
    </div>
--- a/app/frontend/src/javascript/components/base/text-editor/fab-text-editor.tsx
+++ b/app/frontend/src/javascript/components/base/text-editor/fab-text-editor.tsx
@ -66,7 +66,7 @@ export const FabTextEditor: React.ForwardRefRenderFunction<FabTextEditorRef, Fab
      Iframe,
      Image.configure({
        HTMLAttributes: {
-          class: 'fab-textEditor-image'
+          class: 'fab-text-editor-image'
        }
      })
    ],
@ -85,14 +85,14 @@ export const FabTextEditor: React.ForwardRefRenderFunction<FabTextEditorRef, Fab
  editorRef.current = editor;

  return (
-    <div className={`fab-textEditor ${disabled && 'is-disabled'}`}>
+    <div className={`fab-text-editor ${disabled && 'is-disabled'}`}>
      <MenuBar editor={editor} paragraphTools={paragraphTools} video={video} image={image} disabled={disabled} />
      <EditorContent editor={editor} />
-      <div className="fab-textEditor-character-count">
+      <div className="fab-text-editor-character-count">
        {editor?.storage.characterCount.characters()} / {limit}
      </div>
      {error &&
-        <div className="fab-textEditor-error">
+        <div className="fab-text-editor-error">
          <WarningOctagon size={24} />
          <p className="">{error}</p>
        </div>
--- a/app/frontend/src/javascript/components/base/text-editor/iframe.tsx
+++ b/app/frontend/src/javascript/components/base/text-editor/iframe.tsx
@ -29,7 +29,7 @@ export default Node.create<IframeOptions>({
    return {
      allowFullscreen: true,
      HTMLAttributes: {
-        class: 'fab-textEditor-video'
+        class: 'fab-text-editor-video'
      }
    };
  },
--- a/app/frontend/src/javascript/components/base/text-editor/menu-bar.tsx
+++ b/app/frontend/src/javascript/components/base/text-editor/menu-bar.tsx
@ -141,7 +141,7 @@ export const MenuBar: React.FC<MenuBarProps> = ({ editor, paragraphTools, video,

  return (
    <>
-      <div className={`fab-textEditor-menu ${disabled ? 'fab-textEditor-menu--disabled' : ''}`}>
+      <div className={`fab-text-editor-menu ${disabled ? 'fab-text-editor-menu--disabled' : ''}`}>
        { paragraphTools &&
        (<>
          <button
@ -228,7 +228,7 @@ export const MenuBar: React.FC<MenuBarProps> = ({ editor, paragraphTools, video,
        }
      </div>

-      <div ref={ref} className={`fab-textEditor-subMenu ${submenu ? 'is-active' : ''}`}>
+      <div ref={ref} className={`fab-text-editor-subMenu ${submenu ? 'is-active' : ''}`}>
        { submenu === 'link' &&
          (<>
            <h6>{t('app.shared.text_editor.add_link')}</h6>
--- a/app/frontend/src/javascript/components/event-themes.tsx
+++ b/app/frontend/src/javascript/components/event-themes.tsx
@ -24,7 +24,7 @@ type selectOption = { value: number, label: string };
 /**
 * This component shows a select input to edit the themes associated with the event
 */
-const EventThemes: React.FC<EventThemesProps> = ({ event, onChange }) => {
+export const EventThemes: React.FC<EventThemesProps> = ({ event, onChange }) => {
  const { t } = useTranslation('shared');

  const [themes, setThemes] = useState<Array<EventTheme>>([]);
--- a/app/frontend/src/javascript/components/form/form-input.tsx
+++ b/app/frontend/src/javascript/components/form/form-input.tsx
@ -44,14 +44,13 @@ export const FormInput = <TFieldValues extends FieldValues, TInputType>({ id, re

  // Compose classnames from props
  const classNames = [
-    'form-input',
    `${className || ''}`,
    `${type === 'hidden' ? 'is-hidden' : ''}`
  ].join(' ');

  return (
    <AbstractFormItem id={id} formState={formState} label={label}
-                      className={classNames} tooltip={tooltip}
+                      className={`form-input ${classNames}`} tooltip={tooltip}
                      disabled={disabled}
                      rules={rules} error={error} warning={warning}>
        {icon && <span className="icon">{icon}</span>}
--- a/app/frontend/src/javascript/components/machines/machines-list.tsx
+++ b/app/frontend/src/javascript/components/machines/machines-list.tsx
@ -24,7 +24,7 @@ interface MachinesListProps {
 /**
 * This component shows a list of all machines and allows filtering on that list.
 */
-const MachinesList: React.FC<MachinesListProps> = ({ onError, onSuccess, onShowMachine, onReserveMachine, onLoginRequested, onEnrollRequested, user, canProposePacks }) => {
+export const MachinesList: React.FC<MachinesListProps> = ({ onError, onSuccess, onShowMachine, onReserveMachine, onLoginRequested, onEnrollRequested, user, canProposePacks }) => {
  // shown machines
  const [machines, setMachines] = useState<Array<Machine>>(null);
  // we keep the full list of machines, for filtering
--- a/app/frontend/src/javascript/components/machines/required-training-modal.tsx
+++ b/app/frontend/src/javascript/components/machines/required-training-modal.tsx
@ -42,7 +42,7 @@ export const RequiredTrainingModal: React.FC<RequiredTrainingModalProps> = ({ is
  const header = (): ReactNode => {
    return (
      <div className="user-info">
-        <Avatar userName={user?.name} avatar={user?.profile_attributes?.user_avatar_attributes?.attachment} />
+        <Avatar userName={user?.name} avatar={user?.profile_attributes?.user_avatar_attributes?.attachment_url} />
        <span className="user-name">{user?.name}</span>
      </div>
    );
--- a/app/frontend/src/javascript/components/payment-schedule/payment-schedules-dashboard.tsx
+++ b/app/frontend/src/javascript/components/payment-schedule/payment-schedules-dashboard.tsx
@ -24,7 +24,7 @@ const PAGE_SIZE = 20;
 * This component shows a list of all payment schedules with their associated deadlines (aka. PaymentScheduleItem) and invoices
 * for the currentUser
 */
-const PaymentSchedulesDashboard: React.FC<PaymentSchedulesDashboardProps> = ({ currentUser, onError, onCardUpdateSuccess }) => {
+export const PaymentSchedulesDashboard: React.FC<PaymentSchedulesDashboardProps> = ({ currentUser, onError, onCardUpdateSuccess }) => {
  const { t } = useTranslation('logged');

  // list of displayed payment schedules
--- a/app/frontend/src/javascript/components/payment-schedule/payment-schedules-list.tsx
+++ b/app/frontend/src/javascript/components/payment-schedule/payment-schedules-list.tsx
@ -25,7 +25,7 @@ const PAGE_SIZE = 20;
 /**
 * This component shows a list of all payment schedules with their associated deadlines (aka. PaymentScheduleItem) and invoices
 */
-const PaymentSchedulesList: React.FC<PaymentSchedulesListProps> = ({ currentUser, onError, onCardUpdateSuccess }) => {
+export const PaymentSchedulesList: React.FC<PaymentSchedulesListProps> = ({ currentUser, onError, onCardUpdateSuccess }) => {
  const { t } = useTranslation('admin');

  // list of displayed payment schedules
--- a/app/frontend/src/javascript/components/payment/card-payment-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/card-payment-modal.tsx
@ -2,7 +2,7 @@ import React, { ReactElement, useEffect, useState } from 'react';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
 import { StripeModal } from './stripe/stripe-modal';
-import { PayZenModal } from './payzen/payzen-modal';
+import { PayzenModal } from './payzen/payzen-modal';
 import { IApplication } from '../../models/application';
 import { ShoppingCart } from '../../models/payment';
 import { User } from '../../models/user';
@ -58,7 +58,7 @@ const CardPaymentModalComponent: React.FC<CardPaymentModalProps> = ({ isOpen, to
   * Render the PayZen payment modal
   */
  const renderPayZenModal = (): ReactElement => {
-    return <PayZenModal isOpen={isOpen}
+    return <PayzenModal isOpen={isOpen}
      toggleModal={toggleModal}
      afterSuccess={afterSuccess}
      onError={onError}
--- a/app/frontend/src/javascript/components/payment/local-payment/local-payment-form.tsx
+++ b/app/frontend/src/javascript/components/payment/local-payment/local-payment-form.tsx
@ -118,7 +118,7 @@ export const LocalPaymentForm: React.FC<GatewayFormProps> = ({ onSubmit, onSucce
  };

  return (
-    <form onSubmit={handleSubmit} id={formId} className={className || ''}>
+    <form onSubmit={handleSubmit} id={formId} className={`local-payment-form ${className || ''}`}>
      {!paymentSchedule && !isFreeOfCharge() && <p className="payment">{t('app.admin.local_payment.about_to_cash')}</p>}
      {!paymentSchedule && isFreeOfCharge() && <p className="payment">{t('app.admin.local_payment.about_to_confirm', { ITEM: mainItemType() })}</p>}
      {paymentSchedule && <div className="payment-schedule">
--- a/app/frontend/src/javascript/components/payment/payzen/payzen-card-update-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/payzen/payzen-card-update-modal.tsx
@ -61,7 +61,7 @@ export const PayzenCardUpdateModal: React.FC<PayzenCardUpdateModalProps> = ({ is
      toggleModal={toggleModal}
      closeButton={false}
      customFooter={logoFooter()}
-      className="payzen-update-card-modal">
+      className="payzen-card-update-modal">
      {schedule && <PayzenForm onSubmit={handleCardUpdateSubmit}
        onSuccess={onSuccess}
        onError={handleCardUpdateError}
--- a/app/frontend/src/javascript/components/payment/payzen/payzen-form.tsx
+++ b/app/frontend/src/javascript/components/payment/payzen/payzen-form.tsx
@ -152,7 +152,7 @@ export const PayzenForm: React.FC<PayzenFormProps> = ({ onSubmit, onSuccess, onE
  };

  return (
-    <form onSubmit={handleSubmit} id={formId} className={className || ''}>
+    <form onSubmit={handleSubmit} id={formId} className={`payzen-form ${className || ''}`}>
      <Loader />
      <div className="container">
        <div id="payzenPaymentForm" />
--- a/app/frontend/src/javascript/components/payment/payzen/payzen-keys-form.tsx
+++ b/app/frontend/src/javascript/components/payment/payzen/payzen-keys-form.tsx
@ -11,7 +11,7 @@ import PayzenAPI from '../../../api/payzen';

 enableMapSet();

-interface PayZenKeysFormProps {
+interface PayzenKeysFormProps {
  onValidKeys: (payZenSettings: Map<SettingName, string>) => void,
  onInvalidKeys: () => void,
 }
@ -28,7 +28,7 @@ let pendingKeysValidation = false;
 /**
 * Form to set the PayZen's username, password and public key
 */
-const PayZenKeysFormComponent: React.FC<PayZenKeysFormProps> = ({ onValidKeys, onInvalidKeys }) => {
+const PayzenKeysFormComponent: React.FC<PayzenKeysFormProps> = ({ onValidKeys, onInvalidKeys }) => {
  const { t } = useTranslation('admin');

  // values of the PayZen settings
@ -205,10 +205,10 @@ const PayZenKeysFormComponent: React.FC<PayZenKeysFormProps> = ({ onValidKeys, o
  );
 };

-export const PayZenKeysForm: React.FC<PayZenKeysFormProps> = ({ onValidKeys, onInvalidKeys }) => {
+export const PayzenKeysForm: React.FC<PayzenKeysFormProps> = ({ onValidKeys, onInvalidKeys }) => {
  return (
    <Loader>
-      <PayZenKeysFormComponent onValidKeys={onValidKeys} onInvalidKeys={onInvalidKeys} />
+      <PayzenKeysFormComponent onValidKeys={onValidKeys} onInvalidKeys={onInvalidKeys} />
    </Loader>
  );
 };
--- a/app/frontend/src/javascript/components/payment/payzen/payzen-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/payzen/payzen-modal.tsx
@ -10,7 +10,7 @@ import mastercardLogo from '../../../../../images/mastercard.png';
 import visaLogo from '../../../../../images/visa.png';
 import { PayzenForm } from './payzen-form';

-interface PayZenModalProps {
+interface PayzenModalProps {
  isOpen: boolean,
  toggleModal: () => void,
  afterSuccess: (result: Invoice|PaymentSchedule) => void,
@ -28,7 +28,7 @@ interface PayZenModalProps {
 * This component should not be called directly. Prefer using <CardPaymentModal> which can handle the configuration
 *  of a different payment gateway.
 */
-export const PayZenModal: React.FC<PayZenModalProps> = ({ isOpen, toggleModal, afterSuccess, onError, cart, currentUser, schedule, customer }) => {
+export const PayzenModal: React.FC<PayzenModalProps> = ({ isOpen, toggleModal, afterSuccess, onError, cart, currentUser, schedule, customer }) => {
  /**
   * Return the logos, shown in the modal footer.
   */
--- a/app/frontend/src/javascript/components/payment/stripe/stripe-card-update-modal.tsx
+++ b/app/frontend/src/javascript/components/payment/stripe/stripe-card-update-modal.tsx
@ -59,7 +59,7 @@ export const StripeCardUpdateModal: React.FC<StripeCardUpdateModalProps> = ({ is
      toggleModal={toggleModal}
      closeButton={false}
      customFooter={logoFooter()}
-      className="stripe-update-card-modal">
+      className="stripe-card-update-modal">
      {schedule && <StripeCardUpdate onSubmit={handleCardUpdateSubmit}
        onSuccess={onSuccess}
        onError={handleCardUpdateError}
--- a/app/frontend/src/javascript/components/payment/stripe/stripe-card-update.tsx
+++ b/app/frontend/src/javascript/components/payment/stripe/stripe-card-update.tsx
@ -95,7 +95,7 @@ export const StripeCardUpdate: React.FC<StripeCardUpdateProps> = ({ onSubmit, on
  };

  return (
-    <form onSubmit={handleSubmit} id="stripe-card" className={className}>
+    <form onSubmit={handleSubmit} id="stripe-card" className={`stripe-card-update ${className}`}>
      <CardElement options={cardOptions} />
      {children}
    </form>
--- a/app/frontend/src/javascript/components/payment/stripe/stripe-form.tsx
+++ b/app/frontend/src/javascript/components/payment/stripe/stripe-form.tsx
@ -125,7 +125,7 @@ export const StripeForm: React.FC<GatewayFormProps> = ({ onSubmit, onSuccess, on
  };

  return (
-    <form onSubmit={handleSubmit} id={formId} className={className || ''}>
+    <form onSubmit={handleSubmit} id={formId} className={`stripe-form ${className || ''}`}>
      <CardElement options={cardOptions} />
      {children}
    </form>
--- a/app/frontend/src/javascript/components/plans/plans-list.tsx
+++ b/app/frontend/src/javascript/components/plans/plans-list.tsx
@ -31,7 +31,7 @@ type PlansTree = Map<number, Map<number, Array<Plan>>>;
 /**
 * This component display an organized list of plans to allow the end-user to select one and subscribe online
 */
-const PlansList: React.FC<PlansListProps> = ({ onError, onPlanSelection, onLoginRequest, operator, customer, subscribedPlanId, canSelectPlan }) => {
+export const PlansList: React.FC<PlansListProps> = ({ onError, onPlanSelection, onLoginRequest, operator, customer, subscribedPlanId, canSelectPlan }) => {
  // all plans
  const [plans, setPlans] = useState<PlansTree>(null);
  // all plan-categories, ordered by weight
--- a/app/frontend/src/javascript/components/pricing/machines/machines-pricing.tsx
+++ b/app/frontend/src/javascript/components/pricing/machines/machines-pricing.tsx
@ -28,7 +28,7 @@ interface MachinesPricingProps {
 /**
 * Interface to set and edit the prices of machines-hours, per group
 */
-const MachinesPricing: React.FC<MachinesPricingProps> = ({ onError, onSuccess }) => {
+export const MachinesPricing: React.FC<MachinesPricingProps> = ({ onError, onSuccess }) => {
  const { t } = useTranslation('admin');

  const [machines, setMachines] = useState<Array<Machine>>(null);
--- a/app/frontend/src/javascript/components/pricing/spaces/configure-extended-price-button.tsx
+++ b/app/frontend/src/javascript/components/pricing/spaces/configure-extended-price-button.tsx
@ -8,7 +8,7 @@ import FormatLib from '../../../lib/format';
 import { EditExtendedPrice } from './edit-extended-price';
 import { DeleteExtendedPrice } from './delete-extended-price';

-interface ConfigureExtendedPriceButtonProps {
+interface ConfigureExtendedPricesButtonProps {
  prices: Array<Price>,
  onError: (message: string) => void,
  onSuccess: (message: string) => void,
@ -21,7 +21,7 @@ interface ConfigureExtendedPriceButtonProps {
 * This component is a button that shows the list of extendedPrices.
 * It also triggers modal dialogs to configure (add/edit/remove) extendedPrices.
 */
-export const ConfigureExtendedPriceButton: React.FC<ConfigureExtendedPriceButtonProps> = ({ prices, onError, onSuccess, groupId, priceableId, priceableType }) => {
+export const ConfigureExtendedPricesButton: React.FC<ConfigureExtendedPricesButtonProps> = ({ prices, onError, onSuccess, groupId, priceableId, priceableType }) => {
  const { t } = useTranslation('admin');

  const [extendedPrices, setExtendedPrices] = useState<Array<Price>>(prices);
--- a/app/frontend/src/javascript/components/pricing/spaces/spaces-pricing.tsx
+++ b/app/frontend/src/javascript/components/pricing/spaces/spaces-pricing.tsx
@ -10,7 +10,7 @@ import { Group } from '../../../models/group';
 import { IApplication } from '../../../models/application';
 import { Space } from '../../../models/space';
 import { EditablePrice } from '../editable-price';
-import { ConfigureExtendedPriceButton } from './configure-extended-price-button';
+import { ConfigureExtendedPricesButton } from './configure-extended-price-button';
 import PriceAPI from '../../../api/price';
 import { Price } from '../../../models/price';
 import { useImmer } from 'use-immer';
@ -26,7 +26,7 @@ interface SpacesPricingProps {
 /**
 * Interface to set and edit the prices of spaces-hours, per group
 */
-const SpacesPricing: React.FC<SpacesPricingProps> = ({ onError, onSuccess }) => {
+export const SpacesPricing: React.FC<SpacesPricingProps> = ({ onError, onSuccess }) => {
  const { t } = useTranslation('admin');

  const [spaces, setSpaces] = useState<Array<Space>>(null);
@ -120,7 +120,7 @@ const SpacesPricing: React.FC<SpacesPricingProps> = ({ onError, onSuccess }) =>
            <td>{space.name}</td>
            {groups?.map(group => <td key={group.id}>
              {prices.length && <EditablePrice price={findPriceBy(space.id, group.id)} onSave={handleUpdatePrice} />}
-              <ConfigureExtendedPriceButton
+              <ConfigureExtendedPricesButton
                prices={findExtendedPricesBy(space.id, group.id)}
                onError={onError}
                onSuccess={onSuccess}
--- a/app/frontend/src/javascript/components/profile-custom-fields/profile-custom-fields-list.tsx
+++ b/app/frontend/src/javascript/components/profile-custom-fields/profile-custom-fields-list.tsx
@ -18,7 +18,7 @@ interface ProfileCustomFieldsListProps {
 /**
 * This component shows a list of all profile custom fields
 */
-const ProfileCustomFieldsList: React.FC<ProfileCustomFieldsListProps> = ({ onSuccess, onError }) => {
+export const ProfileCustomFieldsList: React.FC<ProfileCustomFieldsListProps> = ({ onSuccess, onError }) => {
  const { t } = useTranslation('admin');

  const [profileCustomFields, setProfileCustomFields] = useState<Array<ProfileCustomField>>([]);
--- a/app/frontend/src/javascript/components/proof-of-identity/delete-proof-of-identity-type-modal.tsx
+++ b/app/frontend/src/javascript/components/proof-of-identity/delete-proof-of-identity-type-modal.tsx
@ -30,7 +30,7 @@ export const DeleteProofOfIdentityTypeModal: React.FC<DeleteProofOfIdentityTypeM
      closeButton={true}
      confirmButton={t('app.admin.settings.compte.confirm')}
      onConfirm={handleDeleteProofOfIdentityType}
-      className="proof-of-identity-type-modal">
+      className="delete-proof-of-identity-type-modal">
      <p>{t('app.admin.settings.compte.do_you_really_want_to_delete_this_proof_of_identity_type')}</p>
    </FabModal>
  );
--- a/app/frontend/src/javascript/components/proof-of-identity/proof-of-identity-files.tsx
+++ b/app/frontend/src/javascript/components/proof-of-identity/proof-of-identity-files.tsx
@ -29,7 +29,7 @@ interface FilesType {
 /**
 * This component upload the proof of identity file of member
 */
-const ProofOfIdentityFiles: React.FC<ProofOfIdentityFilesProps> = ({ currentUser, onSuccess, onError }) => {
+export const ProofOfIdentityFiles: React.FC<ProofOfIdentityFilesProps> = ({ currentUser, onSuccess, onError }) => {
  const { t } = useTranslation('admin');

  const maxProofOfIdentityFileSizeMb = (Fablab.maxProofOfIdentityFileSize / 1024 / 1024).toFixed();
--- a/app/frontend/src/javascript/components/select-gateway-modal.tsx
+++ b/app/frontend/src/javascript/components/select-gateway-modal.tsx
@ -7,7 +7,7 @@ import React, { BaseSyntheticEvent, useEffect, useState } from 'react';
 import { react2angular } from 'react2angular';
 import { useTranslation } from 'react-i18next';
 import { StripeKeysForm } from './payment/stripe/stripe-keys-form';
-import { PayZenKeysForm } from './payment/payzen/payzen-keys-form';
+import { PayzenKeysForm } from './payment/payzen/payzen-keys-form';
 import { FabModal, ModalSize } from './base/fab-modal';
 import { Loader } from './base/loader';
 import { User } from '../models/user';
@ -26,7 +26,7 @@ interface SelectGatewayModalModalProps {
  onSuccess: (results: Map<SettingName, SettingBulkResult>) => void,
 }

-const SelectGatewayModal: React.FC<SelectGatewayModalModalProps> = ({ isOpen, toggleModal, onError, onSuccess }) => {
+export const SelectGatewayModal: React.FC<SelectGatewayModalModalProps> = ({ isOpen, toggleModal, onError, onSuccess }) => {
  const { t } = useTranslation('admin');

  const [preventConfirmGateway, setPreventConfirmGateway] = useState<boolean>(true);
@ -117,7 +117,7 @@ const SelectGatewayModal: React.FC<SelectGatewayModalModalProps> = ({ isOpen, to
      isOpen={isOpen}
      toggleModal={toggleModal}
      width={ModalSize.medium}
-      className="gateway-modal"
+      className="select-gateway-modal"
      confirmButton={t('app.admin.invoices.payment.gateway_modal.confirm_button')}
      onConfirm={onGatewayConfirmed}
      preventConfirm={preventConfirmGateway}>
@ -131,7 +131,7 @@ const SelectGatewayModal: React.FC<SelectGatewayModalModalProps> = ({ isOpen, to
        <option value={Gateway.PayZen}>{t('app.admin.invoices.payment.gateway_modal.payzen')}</option>
      </select>
      {selectedGateway === Gateway.Stripe && <StripeKeysForm onValidKeys={handleValidStripeKeys} onInvalidKeys={handleInvalidKeys} />}
-      {selectedGateway === Gateway.PayZen && <PayZenKeysForm onValidKeys={handleValidPayZenKeys} onInvalidKeys={handleInvalidKeys} />}
+      {selectedGateway === Gateway.PayZen && <PayzenKeysForm onValidKeys={handleValidPayZenKeys} onInvalidKeys={handleInvalidKeys} />}
    </FabModal>
  );
 };
--- a/app/frontend/src/javascript/components/settings/boolean-setting.tsx
+++ b/app/frontend/src/javascript/components/settings/boolean-setting.tsx
@ -97,7 +97,7 @@ export const BooleanSetting: React.FC<BooleanSettingProps> = ({ name, label, cla
  };

  return (
-    <div className={`form-group ${className || ''}`}>
+    <div className={`boolean-setting form-group ${className || ''}`}>
      <label htmlFor={`setting-${name}`} className="control-label m-r">{label}</label>
      <Switch checked={value} id={`setting-${name}}`} onChange={handleChanged} className="v-middle"></Switch>
      {!hideSave && <FabButton className="btn btn-warning m-l" onClick={handleSave}>{t('app.admin.check_list_setting.save')}</FabButton> }
@ -105,7 +105,7 @@ export const BooleanSetting: React.FC<BooleanSettingProps> = ({ name, label, cla
  );
 };

-export const BooleanSettingWrapper: React.FC<BooleanSettingProps> = ({ onChange, onSuccess, onError, label, className, name, hideSave, onBeforeSave }) => {
+const BooleanSettingWrapper: React.FC<BooleanSettingProps> = ({ onChange, onSuccess, onError, label, className, name, hideSave, onBeforeSave }) => {
  return (
    <Loader>
      <BooleanSetting label={label} name={name} onError={onError} onSuccess={onSuccess} onChange={onChange} className={className} hideSave={hideSave} onBeforeSave={onBeforeSave} />
--- a/app/frontend/src/javascript/components/settings/check-list-setting.tsx
+++ b/app/frontend/src/javascript/components/settings/check-list-setting.tsx
@ -98,7 +98,7 @@ export const CheckListSetting: React.FC<CheckListSettingProps> = ({ name, label,
  );
 };

-export const CheckListSettingWrapper: React.FC<CheckListSettingProps> = ({ availableOptions, onSuccess, onError, label, className, name, hideSave, defaultValue, onChange }) => {
+const CheckListSettingWrapper: React.FC<CheckListSettingProps> = ({ availableOptions, onSuccess, onError, label, className, name, hideSave, defaultValue, onChange }) => {
  return (
    <Loader>
      <CheckListSetting availableOptions={availableOptions} label={label} name={name} onError={onError} onSuccess={onSuccess} className={className} hideSave={hideSave} defaultValue={defaultValue} onChange={onChange} />
--- a/app/frontend/src/javascript/components/settings/user-validation-setting.tsx
+++ b/app/frontend/src/javascript/components/settings/user-validation-setting.tsx
@ -19,7 +19,7 @@ interface UserValidationSettingProps {
 /**
 * This component allows to configure user validation required setting.
 */
-const UserValidationSetting: React.FC<UserValidationSettingProps> = ({ onSuccess, onError }) => {
+export const UserValidationSetting: React.FC<UserValidationSettingProps> = ({ onSuccess, onError }) => {
  const { t } = useTranslation('admin');

  const [userValidationRequired, setUserValidationRequired] = useState<string>('false');
--- a/app/frontend/src/javascript/components/subscriptions/free-extend-modal.tsx
+++ b/app/frontend/src/javascript/components/subscriptions/free-extend-modal.tsx
@ -26,7 +26,7 @@ interface FreeExtendModalProps {
 /**
 * Modal dialog shown to extend the current subscription of a customer, for free
 */
-const FreeExtendModal: React.FC<FreeExtendModalProps> = ({ isOpen, toggleModal, subscription, customerId, onError, onSuccess }) => {
+export const FreeExtendModal: React.FC<FreeExtendModalProps> = ({ isOpen, toggleModal, subscription, customerId, onError, onSuccess }) => {
  // we do not render the modal if the subscription was not provided
  if (!subscription) return null;

--- a/app/frontend/src/javascript/components/subscriptions/renew-modal.tsx
+++ b/app/frontend/src/javascript/components/subscriptions/renew-modal.tsx
@ -35,7 +35,7 @@ interface RenewModalProps {
 /**
 * Modal dialog shown to renew the current subscription of a customer, for free
 */
-const RenewModal: React.FC<RenewModalProps> = ({ isOpen, toggleModal, subscription, customer, operator, onError, onSuccess }) => {
+export const RenewModal: React.FC<RenewModalProps> = ({ isOpen, toggleModal, subscription, customer, operator, onError, onSuccess }) => {
  // we do not render the modal if the subscription was not provided
  if (!subscription) return null;

--- a/app/frontend/src/javascript/components/subscriptions/subscribe-modal.tsx
+++ b/app/frontend/src/javascript/components/subscriptions/subscribe-modal.tsx
@ -39,7 +39,7 @@ type selectOption = { value: number, label: string };
 /**
 * Modal dialog shown to create a subscription for the given customer
 */
-const SubscribeModal: React.FC<SubscribeModalProps> = ({ isOpen, toggleModal, customer, operator, onError, onSuccess }) => {
+export const SubscribeModal: React.FC<SubscribeModalProps> = ({ isOpen, toggleModal, customer, operator, onError, onSuccess }) => {
  const { t } = useTranslation('admin');

  const [selectedPlan, setSelectedPlan] = useState<Plan>(null);
--- a/app/frontend/src/stylesheets/application.scss
+++ b/app/frontend/src/stylesheets/application.scss
@ -30,8 +30,8 @@
@import "modules/base/labelled-input";
@import "modules/calendar/calendar";
@import "modules/events/event";
+@import "modules/form/abstract-form-item";
@import "modules/form/form-input";
-@import "modules/form/form-item";
@import "modules/form/form-rich-text";
@import "modules/form/form-switch";
@import "modules/group/change-group";
@ -45,10 +45,11 @@
@import "modules/payment-schedule/payment-schedules-table";
@import "modules/payment/local-payment/local-payment-modal";
@import "modules/payment/abstract-payment-modal";
+@import "modules/payment/payzen/payzen-card-update-modal";
@import "modules/payment/payzen/payzen-keys-form";
@import "modules/payment/payzen/payzen-modal";
@import "modules/payment/payzen/payzen-settings";
-@import "modules/payment/payzen/payzen-update-card-modal";
+@import "modules/payment/stripe/stripe-card-update-modal";
@import "modules/payment/stripe/stripe-confirm";
@import "modules/payment/stripe/stripe-keys-form";
@import "modules/payment/stripe/stripe-modal";
--- a/app/frontend/src/stylesheets/modules/base/fab-text-editor.scss
+++ b/app/frontend/src/stylesheets/modules/base/fab-text-editor.scss
@ -1,4 +1,4 @@
-.fab-textEditor {
+.fab-text-editor {
  position: relative;
  margin-bottom: 1.6rem;
  padding-bottom: 1.6rem;
--- a/app/frontend/src/stylesheets/modules/base/labelled-input.scss
+++ b/app/frontend/src/stylesheets/modules/base/labelled-input.scss
@ -1,4 +1,4 @@
-.input-with-label {
+.labelled-input {
  position: relative;
  display: inline-table;
  border-collapse: separate;
--- a/app/frontend/src/stylesheets/modules/payment/payzen/payzen-card-update-modal.scss
+++ b/app/frontend/src/stylesheets/modules/payment/payzen/payzen-card-update-modal.scss
@ -1,4 +1,4 @@
-.payzen-update-card-modal {
+.payzen-card-update-modal {
  .card-form {
    background-color: #f4f3f3;
    border: 1px solid #ddd;
--- a/app/frontend/src/stylesheets/modules/payment/stripe/stripe-card-update-modal.scss
+++ b/app/frontend/src/stylesheets/modules/payment/stripe/stripe-card-update-modal.scss
@ -1,4 +1,4 @@
-.stripe-update-card-modal {
+.stripe-card-update-modal {
  .fab-modal-content {
    .card-form {
      background-color: #f4f3f3;
--- a/app/frontend/src/stylesheets/modules/select-gateway-modal.scss
+++ b/app/frontend/src/stylesheets/modules/select-gateway-modal.scss
@ -1,4 +1,4 @@
-.gateway-modal {
+.select-gateway-modal {
  .info-gateway {
    border: 1px solid #bce8f1;
    border-radius: 4px;
--- a/lib/tasks/fablab/auth.rake
+++ b/lib/tasks/fablab/auth.rake
@ -6,13 +6,13 @@ namespace :fablab do

    desc 'switch the active authentication provider'
    task :switch_provider, [:provider] => :environment do |_task, args|
+      providers = AuthProvider.all.inject('') { |str, item| str + item[:name] + ', ' }
      unless args.provider
-        puts "\e[0;31mERROR\e[0m: You must pass a provider name to activate"
+        puts "\e[0;31mERROR\e[0m: You must pass a provider name to activate. Available providers are: #{providers[0..-3]}"
        next
      end

      if AuthProvider.find_by(name: args.provider).nil?
-        providers = AuthProvider.all.inject('') { |str, item| str + item[:name] + ', ' }
        puts "\e[0;31mERROR\e[0m: the provider '#{args.provider}' does not exists. Available providers are: #{providers[0..-3]}"
        next
      end
--- a/package.json
+++ b/package.json
@ -25,7 +25,7 @@
    "@typescript-eslint/parser": "^5.17.0",
    "eslint": "~8.12.0",
    "eslint-config-standard": "~17.0.0-1",
-    "eslint-plugin-fabmanager": "^0.0.21",
+    "eslint-plugin-fabmanager": "^0.0.23",
    "eslint-plugin-html-erb": "^1.0.1",
    "eslint-plugin-import": "~2.25.4",
    "eslint-plugin-n": "^15.1.0",
--- a/yarn.lock
+++ b/yarn.lock
@ -4082,10 +4082,10 @@ eslint-plugin-es@^4.1.0:
    eslint-utils "^2.0.0"
    regexpp "^3.0.0"

-eslint-plugin-fabmanager@^0.0.21:
-  version "0.0.21"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-fabmanager/-/eslint-plugin-fabmanager-0.0.21.tgz#c2f2ccfbafc2f202adefdf73bb2650604a53541c"
-  integrity sha512-sy8SW7K0NSpm/l8sWJ75NAJfQuMLDZ98LnrYfnHGt119CeulaylgqYniyFnKRxUrYJH2c9dO2vBhiTFgFTeJUg==
+eslint-plugin-fabmanager@^0.0.23:
+  version "0.0.23"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-fabmanager/-/eslint-plugin-fabmanager-0.0.23.tgz#7475999e23f9f658186c172c40a73e15587930e4"
+  integrity sha512-yXxJWPvUyhszBp/jL+aW4I9Qm43kkGH140Pm1EfEBnFkGaC63/U4UX+XSA2ibSocvw2Gqi8igEACEIf6/H4GYw==

 eslint-plugin-html-erb@^1.0.1:
  version "1.0.1"