Update modals

packages/strapi-helper-plugin/lib/src/components/InputSelectWithErrors/index.js

@@ -14,6 +14,7 @@ import Label from '../Label';
 import InputDescription from '../InputDescription';
 import InputErrors from '../InputErrors';
 import InputSelect from '../InputSelect';
+import InputSpacer from '../InputSpacer';
 
 import styles from './styles.scss';
 
@@ -72,6 +73,7 @@ class InputSelectWithErrors extends React.Component {
       labelClassName,
       labelStyle,
       name,
+      noErrorsDescription,
       onBlur,
       onChange,
       onFocus,
@@ -82,6 +84,12 @@ class InputSelectWithErrors extends React.Component {
       withOptionPlaceholder,
     } = this.props;
 
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
+
+    if (!noErrorsDescription && !isEmpty(this.state.errors)) {
+      spacer = <div />;
+    }
+
     return (
       <div
         className={cn(
@@ -124,6 +132,7 @@ class InputSelectWithErrors extends React.Component {
           name={name}
           style={errorsStyle}
         />
+        {spacer}
       </div>
     );
   }
@@ -148,6 +157,7 @@ InputSelectWithErrors.defaultProps = {
   labelClassName: '',
   labelStyle: {},
   onBlur: false,
+  noErrorsDescription: false,
   onFocus: () => {},
   selectOptions: [],
   style: {},
@@ -189,6 +199,7 @@ InputSelectWithErrors.propTypes = {
   labelClassName: PropTypes.string,
   labelStyle: PropTypes.object,
   name: PropTypes.string.isRequired,
+  noErrorsDescription: PropTypes.bool,
   onBlur: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   onChange: PropTypes.func.isRequired,
   onFocus: PropTypes.func,

packages/strapi-plugin-users-permissions/admin/src/components/EditForm/index.js

@@ -10,7 +10,7 @@ import { get } from 'lodash';
 
 import { InputsIndex as Input, LoadingIndicator } from 'strapi-helper-plugin';
 
-import { Separator, Wrapper } from './Components';
+import { Wrapper } from './Components';
 
 function EditForm({ onChange, showLoaders, values }) {
   const { roles, settings } = values;
@@ -45,9 +45,7 @@ function EditForm({ onChange, showLoaders, values }) {
               type="select"
               value={get(settings, 'default_role')}
             />
-          </div>
-          <Separator />
-          <div className="row">
+            <div className="col-6"></div>
             <Input
               label={{
                 id: 'users-permissions.EditForm.inputToggle.label.email',
@@ -60,9 +58,7 @@ function EditForm({ onChange, showLoaders, values }) {
               type="toggle"
               value={get(settings, 'unique_email')}
             />
-          </div>
-          <Separator />
-          <div className="row">
+            <div className="col-6"></div>
             <Input
               label={{
                 id: 'users-permissions.EditForm.inputToggle.label.sign-up',
@@ -76,9 +72,7 @@ function EditForm({ onChange, showLoaders, values }) {
               type="toggle"
               value={get(settings, 'allow_register')}
             />
-          </div>
-          <Separator />
-          <div className="row">
+            <div className="col-6"></div>
             <Input
               label={{
                 id:
@@ -93,8 +87,7 @@ function EditForm({ onChange, showLoaders, values }) {
               type="toggle"
               value={get(settings, 'email_confirmation')}
             />
-          </div>
-          <div className="row">
+            <div className="col-6"></div>
             <Input
               label={{
                 id:

packages/strapi-plugin-users-permissions/admin/src/components/PopUpForm/index.js

@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 import {
@@ -22,14 +21,21 @@ import {
   take,
   takeRight,
 } from 'lodash';
-import { InputsIndex as Input } from 'strapi-helper-plugin';
+import {
+  ButtonModal,
+  HeaderModal,
+  HeaderModalTitle,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalForm,
+  InputsIndex as Input,
+} from 'strapi-helper-plugin';
 import { HomePageContext } from '../../contexts/HomePage';
 
 // Translations
 import en from '../../translations/en.json';
 
-import { Header, ProviderContainer, Separator, Wrapper } from './Components';
-
 class PopUpForm extends React.Component {
   // eslint-disable-line react/prefer-stateless-function
   state = { enabled: false, isEditing: false };
@@ -135,7 +141,7 @@ class PopUpForm extends React.Component {
 
     if (settingType === 'providers') {
       return (
-        <ProviderContainer className="row">
+        <>
           <Input
             inputDescription={{
               id: 'users-permissions.PopUpForm.Providers.enabled.description',
@@ -150,8 +156,6 @@ class PopUpForm extends React.Component {
             value={get(values, 'enabled', this.state.enabled)}
           />
 
-          {form.length > 1 && <Separator />}
-
           {map(tail(form), (value, key) => (
             <Input
               autoFocus={key === 0}
@@ -205,7 +209,7 @@ class PopUpForm extends React.Component {
               validations={{}}
             />
           )}
-        </ProviderContainer>
+        </>
       );
     }
 
@@ -222,7 +226,7 @@ class PopUpForm extends React.Component {
     };
 
     return (
-      <div className="row">
+      <>
         {map(take(form, 3), (value, key) => (
           <Input
             autoFocus={key === 0}
@@ -271,7 +275,7 @@ class PopUpForm extends React.Component {
             inputStyle={!includes(value, 'object') ? { height: '16rem' } : {}}
           />
         ))}
-      </div>
+      </>
     );
   };
 
@@ -296,39 +300,43 @@ class PopUpForm extends React.Component {
       );
     }
 
-    if (display && en[display]) {
-      header = <FormattedMessage id={`users-permissions.${display}`} />;
-    }
+    let subHeader =
+      display && en[display] ? (
+        <FormattedMessage id={`users-permissions.${display}`} />
+      ) : (
+        <span>{capitalize(dataToEdit)}</span>
+      );
 
     return (
-      <Modal
-        isOpen={isOpen}
-        toggle={this.context.unsetDataToEdit}
-        style={{ marginTop: '16.2rem' }}
-      >
-        <Wrapper>
-          <ModalHeader
-            toggle={this.context.unsetDataToEdit}
-            className="modalHeader"
-          />
-          <Header>{header}</Header>
-          <form onSubmit={onSubmit}>
-            <ModalBody className="modalBody">
-              <div className="container-fluid">{this.renderForm()}</div>
-            </ModalBody>
-            <ModalFooter className="modalFooter">
-              <Button
-                onClick={() => this.context.unsetDataToEdit()}
-                className="secondary"
-              >
-                <FormattedMessage id="users-permissions.PopUpForm.button.cancel" />
-              </Button>
-              <Button type="submit" onClick={onSubmit} className="primary">
-                <FormattedMessage id="users-permissions.PopUpForm.button.save" />
-              </Button>
-            </ModalFooter>
-          </form>
-        </Wrapper>
+      <Modal isOpen={isOpen} onToggle={this.context.unsetDataToEdit}>
+        <HeaderModal>
+          <section>
+            <HeaderModalTitle>{header}</HeaderModalTitle>
+          </section>
+          <section>
+            <HeaderModalTitle>{subHeader}</HeaderModalTitle>
+            <hr />
+          </section>
+        </HeaderModal>
+        <form onSubmit={onSubmit}>
+          <ModalForm>
+            <ModalBody>{this.renderForm()}</ModalBody>
+          </ModalForm>
+          <ModalFooter>
+            <section>
+              <ButtonModal
+                message="components.popUpWarning.button.cancel"
+                onClick={this.context.unsetDataToEdit}
+                isSecondary
+              />
+              <ButtonModal
+                message="form.button.done"
+                onClick={onSubmit}
+                type="submit"
+              />
+            </section>
+          </ModalFooter>
+        </form>
       </Modal>
     );
   }

packages/strapi-plugin-users-permissions/admin/src/containers/HomePage/index.js

@@ -169,6 +169,10 @@ export class HomePage extends React.Component {
     },
   ];
 
+  isAdvanded = () => {
+    return this.getEndPoint() === 'advanced';
+  };
+
   pluginHeaderActions = [
     {
       label: 'users-permissions.EditPage.cancel',
@@ -186,14 +190,13 @@ export class HomePage extends React.Component {
 
   showLoaders = () => {
     const { data, isLoading, modifiedData } = this.props;
-    const isAdvanded = this.getEndPoint() === 'advanced';
 
     return (
       (isLoading &&
         get(data, this.getEndPoint()) === undefined &&
-        !isAdvanded) ||
+        !this.isAdvanded()) ||
       (isLoading &&
-        isAdvanded &&
+        this.isAdvanded() &&
         get(modifiedData, this.getEndPoint()) === undefined)
     );
   };
@@ -216,24 +219,7 @@ export class HomePage extends React.Component {
     const noButtonList =
       match.params.settingType === 'email-templates' ||
       match.params.settingType === 'providers';
-    const component =
-      match.params.settingType === 'advanced' ? (
-        <EditForm
-          onChange={this.props.onChange}
-          values={get(modifiedData, this.getEndPoint(), {})}
-          showLoaders={this.showLoaders()}
-        />
-      ) : (
-        <List
-          data={get(data, this.getEndPoint(), [])}
-          deleteData={this.props.deleteData}
-          noButton={noButtonList}
-          onButtonClick={this.handleButtonClick}
-          settingType={match.params.settingType}
-          showLoaders={this.showLoaders()}
-          values={get(modifiedData, this.getEndPoint(), {})}
-        />
-      );
+    const values = get(modifiedData, this.getEndPoint(), {});
 
     return (
       <HomePageContextProvider
@@ -253,7 +239,23 @@ export class HomePage extends React.Component {
               actions={headerActions}
             />
             <HeaderNav links={this.headerNavLinks} />
-            {component}
+            {!this.isAdvanded() ? (
+              <List
+                data={get(data, this.getEndPoint(), [])}
+                deleteData={this.props.deleteData}
+                noButton={noButtonList}
+                onButtonClick={this.handleButtonClick}
+                settingType={match.params.settingType}
+                showLoaders={this.showLoaders()}
+                values={values}
+              />
+            ) : (
+              <EditForm
+                onChange={this.props.onChange}
+                values={values}
+                showLoaders={this.showLoaders()}
+              />
+            )}
           </Wrapper>
 
           <PopUpForm

packages/strapi-plugin-users-permissions/admin/src/translations/ar.json

@@ -88,7 +88,7 @@
   "PopUpForm.button.save": "حفظ",
   "PopUpForm.header.add.providers": "إضافة موفر جديد",
   "PopUpForm.header.edit.email-templates": "تحرير قوالب البريد الإلكتروني",
-  "PopUpForm.header.edit.providers": "تحرير موفر {provider}",
+  "PopUpForm.header.edit.providers": "تحرير موفر",
   "PopUpForm.inputSelect.providers.label": "اختر الموفر",
 
   "notification.error.delete": "حدث خطأ أثناء محاولة حذف العنصر",

packages/strapi-plugin-users-permissions/admin/src/translations/de.json

@@ -95,7 +95,7 @@
   "PopUpForm.button.save": "Speichern",
   "PopUpForm.header.add.providers": "Neue Methode hinzufügen",
   "PopUpForm.header.edit.email-templates": "E-Mail-Templates bearbeiten",
-  "PopUpForm.header.edit.providers": "Methode {provider} bearbeiten",
+  "PopUpForm.header.edit.providers": "Methode bearbeiten",
   "PopUpForm.inputSelect.providers.label": "Wähle die Methode aus",
 
   "components.Input.error.password.length": "Passwort ist zu kurz",

packages/strapi-plugin-users-permissions/admin/src/translations/en.json

@@ -95,7 +95,7 @@
   "PopUpForm.button.save": "Save",
   "PopUpForm.header.add.providers": "Add New Provider",
   "PopUpForm.header.edit.email-templates": "Edit Email Templates",
-  "PopUpForm.header.edit.providers": "Edit {provider} Provider",
+  "PopUpForm.header.edit.providers": "Edit Provider",
   "PopUpForm.inputSelect.providers.label": "Choose the provider",
 
   "components.Input.error.password.length": "Password is too short",

packages/strapi-plugin-users-permissions/admin/src/translations/es.json

@@ -94,7 +94,7 @@
   "PopUpForm.button.save": "Guardar",
   "PopUpForm.header.add.providers": "Añadir nuevo proveedor",
   "PopUpForm.header.edit.email-templates": "Editar Plantillas de Email",
-  "PopUpForm.header.edit.providers": "Editar Proveedor {provider}",
+  "PopUpForm.header.edit.providers": "Editar Proveedor",
   "PopUpForm.inputSelect.providers.label": "Elija el proveedor",
 
   "components.Input.error.password.length": "Contraseña muy corta",

packages/strapi-plugin-users-permissions/admin/src/translations/fr.json

@@ -96,7 +96,7 @@
   "PopUpForm.button.save": "Sauvegarder",
   "PopUpForm.header.add.providers": "Ajouter un Nouveau Provider",
   "PopUpForm.header.edit.email-templates": "Editer E-mail Templates",
-  "PopUpForm.header.edit.providers": "Editer {provider} Provider",
+  "PopUpForm.header.edit.providers": "Editer le Provider",
   "PopUpForm.inputSelect.providers.label": "Sélectionnez le provider",
 
   "components.Input.error.password.length": "Le mot de passe doit contenir au moins 6 caractères",

packages/strapi-plugin-users-permissions/admin/src/translations/it.json

@@ -86,7 +86,7 @@
   "PopUpForm.button.save": "Salva",
   "PopUpForm.header.add.providers": "Aggiungi nuovo Provider",
   "PopUpForm.header.edit.email-templates": "Modifica il template delle Email",
-  "PopUpForm.header.edit.providers": "Modifica {provider} Provider",
+  "PopUpForm.header.edit.providers": "Modifica Provider",
   "PopUpForm.inputSelect.providers.label": "Scegli il provider",
 
   "eaderNav.link.advancedSettings": "Impostazioni avanzate",

packages/strapi-plugin-users-permissions/admin/src/translations/ja.json

@@ -94,7 +94,7 @@
   "PopUpForm.button.save": "保存",
   "PopUpForm.header.add.providers": "プロバイダーを追加",
   "PopUpForm.header.edit.email-templates": "メールテンプレートの編集",
-  "PopUpForm.header.edit.providers": "{provider}プロバイダを編集",
+  "PopUpForm.header.edit.providers": "プロバイダを編集",
   "PopUpForm.inputSelect.providers.label": "プロバイダの選択",
 
   "components.Input.error.password.length": "パスワードが一致しません",

packages/strapi-plugin-users-permissions/admin/src/translations/ko.json

@@ -88,7 +88,7 @@
   "PopUpForm.button.save": "저장",
   "PopUpForm.header.add.providers": "새 프로바이더(provider) 추가",
   "PopUpForm.header.edit.email-templates": "이메일 템플릿 수정",
-  "PopUpForm.header.edit.providers": "{provider} 프로바이더(Provider) 설정",
+  "PopUpForm.header.edit.providers": "프로바이더(Provider) 설정",
   "PopUpForm.inputSelect.providers.label": "프로바이더(provider) 선택",
 
   "notification.error.delete": "항목을 삭제하는데 에러가 발생했습니다.",

packages/strapi-plugin-users-permissions/admin/src/translations/nl.json

@@ -95,7 +95,7 @@
   "PopUpForm.button.save": "Opslaan",
   "PopUpForm.header.add.providers": "Nieuwe leverancier toevoegen",
   "PopUpForm.header.edit.email-templates": "E-mail sjablonen aanpassen",
-  "PopUpForm.header.edit.providers": "Leverancier {provider} aanpassen",
+  "PopUpForm.header.edit.providers": "Leverancier aanpassen",
   "PopUpForm.inputSelect.providers.label": "Kies een leverancier",
   "components.Input.error.password.length": "Wachtwoord is te kort",
 

packages/strapi-plugin-users-permissions/admin/src/translations/pl.json

@@ -95,7 +95,7 @@
   "PopUpForm.button.save": "Zapisz",
   "PopUpForm.header.add.providers": "Dostawca",
   "PopUpForm.header.edit.email-templates": "Zmień szablony e-mail",
-  "PopUpForm.header.edit.providers": "Edytuj dostawcę {provider}",
+  "PopUpForm.header.edit.providers": "Edytuj dostawcę",
   "PopUpForm.inputSelect.providers.label": "Dostawca",
 
   "components.Input.error.password.length": "Hasło jest za krótkie",

packages/strapi-plugin-users-permissions/admin/src/translations/pt-BR.json

@@ -88,7 +88,7 @@
   "PopUpForm.button.save": "Salvar",
   "PopUpForm.header.add.providers": "Adicionar novo provedor",
   "PopUpForm.header.edit.email-templates": "Editar modelos de email",
-  "PopUpForm.header.edit.providers": "Editar provedor {provider}",
+  "PopUpForm.header.edit.providers": "Editar provedor",
   "PopUpForm.inputSelect.providers.label": "Escolher o provedor",
 
   "notification.error.delete": "Ocorreu um erro ao tentar eliminar o registro",

packages/strapi-plugin-users-permissions/admin/src/translations/pt.json

@@ -94,7 +94,7 @@
   "PopUpForm.button.save": "Guardar",
   "PopUpForm.header.add.providers": "Adicionar novo serviço de autenticação",
   "PopUpForm.header.edit.email-templates": "Editar Modelos de Email",
-  "PopUpForm.header.edit.providers": "Editar o serviço de autenticação {provider}",
+  "PopUpForm.header.edit.providers": "Editar o serviço de autenticação",
   "PopUpForm.inputSelect.providers.label": "Selecionar o serviço de autenticação",
 
   "components.Input.error.password.length": "A password é demasiado curta",

packages/strapi-plugin-users-permissions/admin/src/translations/ru.json

@@ -96,7 +96,7 @@
   "PopUpForm.button.save": "Сохранить",
   "PopUpForm.header.add.providers": "Добавить новый провайдер",
   "PopUpForm.header.edit.email-templates": "Редактировать шаблон письма",
-  "PopUpForm.header.edit.providers": "Редактирование провайдера {provider}",
+  "PopUpForm.header.edit.providers": "Редактирование провайдера",
   "PopUpForm.inputSelect.providers.label": "Выбрать провайдера",
 
   "notification.error.delete": "Возникла ошибка в процессе удаления",

packages/strapi-plugin-users-permissions/admin/src/translations/tr.json

@@ -95,7 +95,7 @@
   "PopUpForm.button.save": "Kaydet",
   "PopUpForm.header.add.providers": "Yeni Sağlayıcı Ekle",
   "PopUpForm.header.edit.email-templates": "E-posta Şablonlarını Düzenle",
-  "PopUpForm.header.edit.providers": "{sağlayıcı} sağlayıcını düzenle",
+  "PopUpForm.header.edit.providers": "sağlayıcını düzenle",
   "PopUpForm.inputSelect.providers.label": "Sağlayıcıyı seçin",
 
   "components.Input.error.password.length": "Şifreniz çok kısa",

packages/strapi-plugin-users-permissions/admin/src/translations/zh-Hans.json

@@ -88,7 +88,7 @@
   "PopUpForm.button.save": "保存",
   "PopUpForm.header.add.providers": "增加新的供应商(Provider)",
   "PopUpForm.header.edit.email-templates": "编辑电子邮件模版",
-  "PopUpForm.header.edit.providers": "编译 {provider} 供应商",
+  "PopUpForm.header.edit.providers": "编译 供应商",
   "PopUpForm.inputSelect.providers.label": "选择供应商",
 
   "notification.error.delete": "删除数据时出错",

packages/strapi-plugin-users-permissions/admin/src/translations/zh.json

@@ -94,7 +94,7 @@
   "PopUpForm.button.save": "儲存",
   "PopUpForm.header.add.providers": "新增驗證方式",
   "PopUpForm.header.edit.email-templates": "編輯郵件範本",
-  "PopUpForm.header.edit.providers": "編輯 {provider} 驗證方式",
+  "PopUpForm.header.edit.providers": "編輯 驗證方式",
   "PopUpForm.inputSelect.providers.label": "選擇驗證方式",
 
   "components.Input.error.password.length": "密碼長度過短",