Add form logic

Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-08-04 18:10:35 +02:00
parent 23e2c3d171
commit 25cfefc894
6 changed files with 138 additions and 26 deletions

View File

@ -1,12 +1,20 @@
import React from 'react';
import React, { useCallback, useEffect, useMemo, useReducer } from 'react';
import { useIntl } from 'react-intl';
import { Header } from '@buffetjs/custom';
import { FormBloc, SettingsPageTitle, SizedInput } from 'strapi-helper-plugin';
import {
FormBloc,
SettingsPageTitle,
SizedInput,
useUserPermissions,
request,
} from 'strapi-helper-plugin';
import { Container } from 'reactstrap';
import styled from 'styled-components';
import getTrad from '../../utils/getTrad';
import pluginPermissions from '../../permissions';
import { getTrad, getRequestURL } from '../../utils';
import ListBaselineAlignment from '../../components/ListBaselineAlignment';
import form from './utils/form';
import reducer, { initialState } from './reducer';
const ContainerFluid = styled(Container)`
padding: ${({ padding }) => padding};
@ -15,21 +23,77 @@ const ContainerFluid = styled(Container)`
const AdvancedSettingsPage = () => {
const { formatMessage } = useIntl();
const pageTitle = formatMessage({ id: getTrad('HeaderNav.link.advancedSettings') });
const handleSubmit = e => {
const updatePermissions = useMemo(() => {
return { update: pluginPermissions.updateAdvancedSettings };
}, []);
const {
isLoading: isLoadingForPermissions,
allowedActions: { canUpdate },
} = useUserPermissions(updatePermissions);
const [{ isLoading, modifiedData, roles }, dispatch] = useReducer(reducer, initialState);
useEffect(() => {
const getData = async () => {
try {
dispatch({
type: 'GET_DATA',
});
const data = await request(getRequestURL('advanced'), { method: 'GET' });
console.log({ data });
dispatch({
type: 'GET_DATA_SUCCEEDED',
data,
});
} catch (err) {
dispatch({
type: 'GET_DATA_ERROR',
});
console.error(err);
strapi.notification.error('notification.error');
}
};
if (!isLoadingForPermissions) {
getData();
}
}, [isLoadingForPermissions]);
const handleChange = useCallback(({ target }) => {
dispatch({
type: 'ON_CHANGE',
keys: target.name,
value: target.value,
});
}, []);
const handleSubmit = useCallback(e => {
e.preventDefault();
};
}, []);
const showLoader = isLoadingForPermissions || isLoading;
return (
<>
<SettingsPageTitle name={pageTitle} />
<div>
<form onSubmit={handleSubmit}>
<Header title={{ label: pageTitle }} />
<Header title={{ label: pageTitle }} isLoading={showLoader} />
<ContainerFluid padding="0">
<ListBaselineAlignment />
<FormBloc title="Settings">
<FormBloc title="Settings" isLoading={showLoader}>
{form.map(input => {
return <SizedInput key={input.name} {...input} />;
return (
<SizedInput
key={input.name}
{...input}
disabled={!canUpdate}
onChange={handleChange}
options={roles}
value={modifiedData[input.name]}
/>
);
})}
</FormBloc>
</ContainerFluid>

View File

@ -0,0 +1,46 @@
import produce from 'immer';
import { set } from 'lodash';
const initialState = {
isLoading: true,
initialData: {},
modifiedData: {},
roles: [],
};
const reducer = (state, action) =>
// eslint-disable-next-line consistent-return
produce(state, draftState => {
switch (action.type) {
case 'GET_DATA': {
draftState.isLoading = true;
draftState.initialData = {};
draftState.modifiedData = {};
break;
}
case 'GET_DATA_SUCCEEDED': {
draftState.isLoading = false;
draftState.initialData = action.data.settings;
draftState.modifiedData = action.data.settings;
draftState.roles = action.data.roles.map(role => ({ label: role.name, value: role.type }));
break;
}
case 'GET_DATA_ERROR': {
draftState.isLoading = true;
break;
}
case 'ON_CHANGE': {
set(draftState.modifiedData, action.keys.split('.'), action.value);
break;
}
default: {
return draftState;
}
}
});
export default reducer;
export { initialState };

View File

@ -27,8 +27,9 @@ const form = [
description: getTrad('EditForm.inputToggle.description.email-reset-password'),
label: getTrad('EditForm.inputToggle.label.email-reset-password'),
name: 'email_reset_password',
type: 'bool',
size: { xs: 12 },
type: 'text',
size: { xs: 6 },
placeholder: 'ex: https://yourfrontend.com/reset-password',
},
{
description: getTrad('EditForm.inputToggle.description.email-confirmation'),
@ -43,6 +44,7 @@ const form = [
name: 'email_confirmation_redirection',
type: 'text',
size: { xs: 6 },
placeholder: 'ex: https://yourfrontend.com/reset-password',
},
];

View File

@ -13,7 +13,7 @@ const EmailTemplatesPage = () => {
const { formatMessage } = useIntl();
const pageTitle = formatMessage({ id: getTrad('HeaderNav.link.emailTemplates') });
const updatePermissions = useMemo(() => {
return { update: pluginPermissions.updateProviders };
return { update: pluginPermissions.updateEmailTemplates };
}, []);
const [{ isLoading, modifiedData }, dispatch] = useReducer(reducer, initialState);
const emailTemplates = useMemo(() => {

View File

@ -13,7 +13,6 @@ const pluginPermissions = {
// AdvancedSettings
readAdvancedSettings: [
{ action: 'plugins::users-permissions.advanced-settings.read', subject: null },
{ action: 'plugins::users-permissions.advanced-settings.update', subject: null },
],
updateAdvancedSettings: [
{ action: 'plugins::users-permissions.advanced-settings.update', subject: null },

View File

@ -3,22 +3,10 @@
"Controller.input.label": "{label} ",
"Controller.selectAll": "Select all",
"Controller.unselectAll": "Unselect all",
"EditForm.inputSelect.description.role": "It will attach the new authenticated user to the selected role.",
"EditForm.inputSelect.durations.description": "Number of hours during which the user can't subscribe.",
"EditForm.inputSelect.durations.label": "Duration",
"EditForm.inputSelect.label.role": "Default role for authenticated users",
"EditForm.inputSelect.subscriptions.description": "Limit the number of subscriptions per IP per hour.",
"EditForm.inputSelect.subscriptions.label": "Manage subscription quotas",
"EditForm.inputToggle.description.email": "Disallow the user to create multiple accounts using the same email address with different authentication providers.",
"EditForm.inputToggle.description.email-confirmation": "When enabled (ON), new registred users receive a confirmation email.",
"EditForm.inputToggle.description.email-confirmation-redirection": "After confirmed your email, choose where you will be redirected.",
"EditForm.inputToggle.description.email-reset-password": "URL of your application's reset password page",
"EditForm.inputToggle.description.sign-up": "When disabled (OFF), the registration process is forbidden. No one can subscribe anymore no matter the used provider.",
"EditForm.inputToggle.label.email": "One account per email address",
"EditForm.inputToggle.label.email-confirmation": "Enable email confirmation",
"EditForm.inputToggle.label.email-confirmation-redirection": "Redirection url",
"EditForm.inputToggle.label.email-reset-password": "Reset password page",
"EditForm.inputToggle.label.sign-up": "Enable sign-ups",
"EditPage.cancel": "Cancel",
"EditPage.form.roles": "Role details",
"EditPage.form.roles.label.description": "Description",
@ -104,6 +92,19 @@
"notification.success.submit": "Settings have been updated",
"TRANSLATIONS-TO-KEEP": "TRANSLATIONS TO KEEP",
"EditForm.inputSelect.description.role": "It will attach the new authenticated user to the selected role.",
"EditForm.inputSelect.label.role": "Default role for authenticated users",
"EditForm.inputToggle.description.email": "Disallow the user to create multiple accounts using the same email address with different authentication providers.",
"EditForm.inputToggle.label.email": "One account per email address",
"EditForm.inputToggle.description.email-confirmation": "When enabled (ON), new registred users receive a confirmation email.",
"EditForm.inputToggle.description.email-confirmation-redirection": "After confirmed your email, choose where you will be redirected.",
"EditForm.inputToggle.description.email-reset-password": "URL of your application's reset password page",
"EditForm.inputToggle.description.sign-up": "When disabled (OFF), the registration process is forbidden. No one can subscribe anymore no matter the used provider.",
"EditForm.inputToggle.label.email-confirmation": "Enable email confirmation",
"EditForm.inputToggle.label.email-confirmation-redirection": "Redirection url",
"EditForm.inputToggle.label.email-reset-password": "Reset password page",
"EditForm.inputToggle.label.sign-up": "Enable sign-ups",
"List.title.emailTemplates.plural": "{number} email templates are available",
"List.title.emailTemplates.singular": "{number} email template is available",
"HeaderNav.link.advancedSettings": "Advanced settings",