- re done login con uuid;

- re done reset password con uuid;
- re done user management con uuid;
This commit is contained in:
Vitalii Kiiko
2024-10-21 11:14:29 +02:00
parent 250a75e375
commit 3dae98a19e
11 changed files with 163 additions and 80 deletions

View File

@@ -17,6 +17,8 @@ import LogoIcon from '../../icons/LogoIcon';
import { Button } from 'primereact/button';
import { Messages } from 'primereact/messages';
const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
const LoginAdmin = () => {
const navigate = useNavigate();
const token = useStore().main.token();
@@ -28,11 +30,16 @@ const LoginAdmin = () => {
formState: { errors },
} = useForm({ mode: 'onChange' });
const gotToResetPassword = () => {
navigate('/reset-password');
}
const onSubmit = (formData) => {
errorMsgs.current.clear();
setLoading(true);
const request = {
...formData,
hubUuid: APP_HUB_ID,
rememberMe: true
}
@@ -64,10 +71,6 @@ const LoginAdmin = () => {
setLoading(false);
}
const gotToResetPassword = () => {
navigate('/reset-password');
}
useEffect(() => {
if (!isEmpty(token)) {
setLoading(true);

View File

@@ -3,6 +3,7 @@ import { __, sprintf } from '@wordpress/i18n';
import { useForm } from 'react-hook-form';
import { classNames } from 'primereact/utils';
import { isEmpty } from 'ramda';
import { useNavigate } from 'react-router-dom';
// tools
import AuthenticationService from '../../service/authentication-service';
@@ -16,7 +17,10 @@ import LogoIcon from '../../icons/LogoIcon';
import { Button } from 'primereact/button';
import { Messages } from 'primereact/messages';
const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
const ResetPassword = () => {
const navigate = useNavigate();
const token = useStore().main.token();
const [loading, setLoading] = useState(false);
const [resetPassToken, setResetPassToken] = useState('');
@@ -30,14 +34,23 @@ const ResetPassword = () => {
setValue
} = useForm({ mode: 'onChange' });
const gotToLoginAdmin = () => {
navigate('/loginadmin');
}
const onSubmit = (formData) => {
errorMsgs.current.clear();
setLoading(true);
const request = {
...formData
...formData,
hubUuid: APP_HUB_ID
}
AuthenticationService.forgotPassword(request, getCallback, errCallback);
if (request.token && !isEmpty(request.token)) {
AuthenticationService.resetPassword(request, getCallback, errCallback);
} else {
AuthenticationService.forgotPassword(request, getCallback, errCallback);
}
};
const getCallback = (data) => {
@@ -59,7 +72,7 @@ const ResetPassword = () => {
errorMsgs.current.show([
{
sticky: true, severity: 'error', summary: '',
detail: sprintf(__('%s', 'gepafin'), err),
detail: sprintf(__('%s', 'gepafin'), err.message),
closable: true
}
]);
@@ -104,7 +117,7 @@ const ResetPassword = () => {
? <input
type="hidden"
name="token"
{...register('test', {
{...register('token', {
required: true
})}
/> : null}
@@ -144,6 +157,10 @@ const ResetPassword = () => {
<Button
label={__('Invia', 'gepafin')}
disabled={loading}/>
<Button
label={__('Accedi', 'gepafin')}
link onClick={gotToLoginAdmin}/>
</form>
</div>
</div>

View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect} from 'react';
import React, { useState, useEffect } from 'react';
import { __ } from '@wordpress/i18n';
import { is, uniq } from 'ramda';
@@ -26,6 +26,7 @@ import { Calendar } from 'primereact/calendar';
import { Tag } from 'primereact/tag';
import ProperBandoLabel from '../../../../components/ProperBandoLabel';
import { Link } from 'react-router-dom';
import UserService from '../../../../service/user-service';
const AllUsersTable = () => {
@@ -36,48 +37,27 @@ const AllUsersTable = () => {
const [statuses, setStatuses] = useState([]);
useEffect(() => {
storeSet.main.setAsyncRequest();
const sample = [
{
id: 11,
name: 'Mario Rossi',
email: 'mario.rossi@example.com',
role: 'Beneficiario',
status: 'active',
last_access: '2024-08-01 10:30'
},
{
id: 12,
name: 'Mario Rossi2',
email: 'mario.rossi@example.com',
role: 'Beneficiario',
status: 'active',
last_access: '2024-08-01 10:30'
}
];
setItems(sample);
//BandoService.getBandi(getCallback, errGetCallbacks);
setLoading(true);
UserService.getUsers(getCallback, errGetCallbacks);
}, []);
/*const getCallback = (data) => {
const getCallback = (data) => {
if (data.status === 'SUCCESS') {
setItems(getFormattedBandiData(data.data));
setItems(getFormattedData(data.data));
setStatuses(uniq(data.data.map(o => o.status)))
initFilters();
}
storeSet.main.unsetAsyncRequest();
setLoading(false);
}
const errGetCallbacks = (data) => {
console.log('errGetCallbacks', data)
setLoading(false);
storeSet.main.unsetAsyncRequest();
}*/
}
const getFormattedData = (data) => {
return data.map((d) => {
d.last_access = is(String, d.last_access) ? new Date(d.last_access) : (d.last_access ? d.last_access : '');
return d;
});
return data
.filter(o => ['ROLE_SUPER_ADMIN', 'ROLE_PRE_INSTRUCTOR'].includes(o.role.roleType));
};
const clearFilter = () => {
@@ -97,8 +77,14 @@ const AllUsersTable = () => {
const initFilters = () => {
setFilters({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
last_access: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
name: {
operator: FilterOperator.AND,
constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }]
},
lastLogin: {
operator: FilterOperator.AND,
constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }]
},
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
});
setGlobalFilterValue('');
@@ -107,21 +93,32 @@ const AllUsersTable = () => {
const renderHeader = () => {
return (
<div className="appTableHeader">
<Button type="button" icon="pi pi-filter-slash" label={__('Pulisci', 'gepafin')} outlined onClick={clearFilter} />
<Button type="button" icon="pi pi-filter-slash" label={__('Pulisci', 'gepafin')} outlined
onClick={clearFilter}/>
<IconField iconPosition="left">
<InputIcon className="pi pi-search" />
<InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder={__('Cerca', 'gepafin')} />
<InputIcon className="pi pi-search"/>
<InputText value={globalFilterValue} onChange={onGlobalFilterChange}
placeholder={__('Cerca', 'gepafin')}/>
</IconField>
</div>
);
};
const dateLastAccessBodyTemplate = (rowData) => {
return getDateFromISOstring(rowData.last_access);
return getDateFromISOstring(rowData.lastLogin);
};
const dateFilterTemplate = (options) => {
return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)}
dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999"/>;
};
const nameBodyTemplate = (rowData) => {
return `${rowData.firstName} ${rowData.lastName}`;
};
const roleBodyTemplate = (rowData) => {
return rowData.role.roleName;
};
const statusBodyTemplate = (rowData) => {
@@ -129,22 +126,26 @@ const AllUsersTable = () => {
};
const statusFilterTemplate = (options) => {
return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear />;
return <Dropdown value={options.value} options={statuses}
onChange={(e) => options.filterCallback(e.value, options.index)}
itemTemplate={statusItemTemplate} placeholder={__('Scegli uno', 'gepafin')} className="p-column-filter"
showClear/>;
};
const statusItemTemplate = (option) => {
return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)} />;
return <Tag value={getBandoLabel(option)} severity={getBandoSeverity(option)}/>;
};
const actionsBodyTemplate = (rowData) => {
return <Link to={`/utenti/${rowData.id}`}>
<Button severity="info" label={__('Modifica', 'gepafin')} icon="pi pi-pencil" size="small" iconPos="right" />
</Link>
/*return <Link to={`/utenti/${rowData.id}`}>
<Button severity="info" label={__('Modifica', 'gepafin')} icon="pi pi-pencil" size="small" iconPos="right"/>
</Link>*/
return null;
}
const header = renderHeader();
return(
return (
<div className="appPageSection__table">
<DataTable value={items} paginator showGridlines rows={10} loading={loading} dataKey="id"
filters={filters}
@@ -152,16 +153,21 @@ const AllUsersTable = () => {
header={header}
emptyMessage={__('Nessun dato disponibile', 'gepafin')}
onFilter={(e) => setFilters(e.filters)}>
<Column field="name" header={__('Nome utente', 'gepafin')} filter filterPlaceholder="Search by name"
<Column body={nameBodyTemplate}
header={__('Nome utente', 'gepafin')}
filter filterPlaceholder={__('Cerca per nome', 'gepafin')}
style={{ minWidth: '12rem' }}/>
<Column field="email" header={__('Email', 'gepafin')} filter filterPlaceholder="Search by email"
<Column field="email" header={__('Email', 'gepafin')}
filter filterPlaceholder={__('Cerca per email', 'gepafin')}
style={{ minWidth: '12rem' }}/>
<Column field="role" header={__('Ruolo', 'gepafin')}
<Column body={roleBodyTemplate} header={__('Ruolo', 'gepafin')}
style={{ minWidth: '12rem' }}/>
<Column field="status" header={__('Stato', 'gepafin')} filterMenuStyle={{ width: '14rem' }}
style={{ width: '120px' }} body={statusBodyTemplate} filter
filterElement={statusFilterTemplate}/>
<Column header={__('Ultimo accesso', 'gepafin')} filterField="last_access" dataType="date"
<Column field="status" header={__('Stato', 'gepafin')}
filterMenuStyle={{ width: '14rem' }}
style={{ width: '120px' }} body={statusBodyTemplate}
filter filterElement={statusFilterTemplate}/>
<Column header={__('Ultimo accesso', 'gepafin')}
filterField="lastLogin" dataType="date"
style={{ minWidth: '10rem' }}
body={dateLastAccessBodyTemplate} filter filterElement={dateFilterTemplate}/>
<Column header={__('Azioni', 'gepafin')}

View File

@@ -1,6 +1,16 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import { __ } from '@wordpress/i18n';
import { isEmpty, isNil } from 'ramda';
import { klona } from 'klona';
// store
import { storeSet } from '../../store';
// service
import UserService from '../../service/user-service';
// tools
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
// components
import AllUsersTable from './components/AllUsersTable';
@@ -8,13 +18,13 @@ import { Button } from 'primereact/button';
import { InputText } from 'primereact/inputtext';
import { Dropdown } from 'primereact/dropdown';
import { Dialog } from 'primereact/dialog';
import UserService from '../../service/user-service';
import set404FromErrorResponse from '../../helpers/set404FromErrorResponse';
import { storeSet } from '../../store';
import { klona } from 'klona';
import { classNames } from 'primereact/utils';
import { Toast } from 'primereact/toast';
const APP_HUB_ID = process.env.REACT_APP_HUB_ID;
const Users = () => {
const [loading, setLoading] = useState(false);
const [isVisibleEditDialog, setIsVisibleEditDialog] = useState(false);
const [newUserData, setNewUserData] = useState({
firstName: '',
@@ -24,6 +34,7 @@ const Users = () => {
role: ''
});
const [roles, setRoles] = useState([]);
const toast = useRef(null);
const onCreateNewUser = () => {
setIsVisibleEditDialog(true);
@@ -45,7 +56,32 @@ const Users = () => {
}
const saveEditDialog = () => {
setLoading(true);
const body = {
...newUserData,
hubUuid: APP_HUB_ID
}
UserService.createUser(body, createUserCallback, errCreateUserCallback);
}
const createUserCallback = (data) => {
if (data.status === 'SUCCESS') {
}
setLoading(false);
}
const errCreateUserCallback = (data) => {
setLoading(false);
if (toast.current) {
toast.current.show({
severity: 'error',
summary: '',
detail: data.message
});
}
set404FromErrorResponse(data);
}
const onChangeEditItem = (value, key) => {
@@ -59,17 +95,19 @@ const Users = () => {
<Button type="button" label={__('Anulla', 'gepafin')} onClick={hideEditDialog} outlined/>
<Button
type="button"
disabled={isEmpty(newUserData)}
disabled={isEmpty(newUserData) || loading}
label={__('Salva', 'gepafin')} onClick={saveEditDialog}/>
</div>
}
const getRolesCallback = (data) => {
if (data.status === 'SUCCESS') {
const roles = data.data.map(o => ({
name: o.roleName,
value: o.id
}));
const roles = data.data
.filter(o => ['ROLE_SUPER_ADMIN', 'ROLE_PRE_INSTRUCTOR'].includes(o.roleType))
.map(o => ({
name: o.roleName,
value: o.id
}));
setRoles(roles)
}
storeSet.main.unsetAsyncRequest();
@@ -86,13 +124,14 @@ const Users = () => {
}
}, [isVisibleEditDialog]);
return(
return (
<div className="appPage">
<div className="appPage__pageHeader">
<h1>{__('Gestione utenti', 'gepafin')}</h1>
</div>
<div className="appPage__spacer"></div>
<Toast ref={toast} />
<div className="appPageSection">
<div className="appPageSection__actions">
@@ -113,13 +152,15 @@ const Users = () => {
<div className="appPage__spacer"></div>
<div className="appForm__cols">
<div className="appForm__field">
<label className={classNames({ 'p-error': isEmpty(newUserData.firstName) || isNil(newUserData.firstName) })}>{__('Nome', 'gepafin')}*</label>
<label
className={classNames({ 'p-error': isEmpty(newUserData.firstName) || isNil(newUserData.firstName) })}>{__('Nome', 'gepafin')}*</label>
<InputText value={newUserData.firstName}
invalid={isEmpty(newUserData.firstName) || isNil(newUserData.firstName)}
onChange={(e) => onChangeEditItem(e.target.value, 'firstName')}/>
</div>
<div className="appForm__field">
<label className={classNames({ 'p-error': isEmpty(newUserData.lastName) || isNil(newUserData.lastName) })}>{__('Cognome', 'gepafin')}*</label>
<label
className={classNames({ 'p-error': isEmpty(newUserData.lastName) || isNil(newUserData.lastName) })}>{__('Cognome', 'gepafin')}*</label>
<InputText value={newUserData.lastName}
invalid={isEmpty(newUserData.lastName) || isNil(newUserData.lastName)}
onChange={(e) => onChangeEditItem(e.target.value, 'lastName')}/>
@@ -127,20 +168,23 @@ const Users = () => {
</div>
<div className="appForm__cols">
<div className="appForm__field">
<label className={classNames({ 'p-error': isEmpty(newUserData.email) || isNil(newUserData.email) })}>{__('Email', 'gepafin')}*</label>
<label
className={classNames({ 'p-error': isEmpty(newUserData.email) || isNil(newUserData.email) })}>{__('Email', 'gepafin')}*</label>
<InputText value={newUserData.email}
invalid={isEmpty(newUserData.email) || isNil(newUserData.email)}
onChange={(e) => onChangeEditItem(e.target.value, 'email')}/>
</div>
<div className="appForm__field">
<label className={classNames({ 'p-error': isEmpty(newUserData.phoneNumber) || isNil(newUserData.phoneNumber) })}>{__('Telefono', 'gepafin')}</label>
<label
className={classNames({ 'p-error': isEmpty(newUserData.phoneNumber) || isNil(newUserData.phoneNumber) })}>{__('Telefono', 'gepafin')}</label>
<InputText value={newUserData.phoneNumber}
invalid={isEmpty(newUserData.phoneNumber) || isNil(newUserData.phoneNumber)}
onChange={(e) => onChangeEditItem(e.target.value, 'phoneNumber')}/>
</div>
</div>
<div className="appForm__field">
<label className={classNames({ 'p-error': isEmpty(newUserData.role) || isNil(newUserData.role) })}>{__('Ruolo', 'gepafin')}</label>
<label
className={classNames({ 'p-error': isEmpty(newUserData.role) || isNil(newUserData.role) })}>{__('Ruolo', 'gepafin')}</label>
<Dropdown
value={newUserData.role}
invalid={isEmpty(newUserData.role) || isNil(newUserData.role)}