mirror of
https://github.com/astuto/astuto.git
synced 2025-12-15 19:27:52 +01:00
Add users management to site settings (#126)
This commit is contained in:
Riccardo Graziosi
committed by
GitHub
GitHub
parent
bc15140512
commit
37fb99a868
@@ -92,7 +92,7 @@ class BoardsSiteSettingsP extends React.Component<Props> {
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
<h2>{I18n.t('site_settings.boards.title')}</h2>
|
||||
<h2>{ I18n.t('site_settings.boards.title') }</h2>
|
||||
|
||||
{
|
||||
boards.items.length > 0 ?
|
||||
|
||||
157
app/javascript/components/SiteSettings/Users/UserEditable.tsx
Normal file
157
app/javascript/components/SiteSettings/Users/UserEditable.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
import * as React from "react";
|
||||
import Gravatar from 'react-gravatar';
|
||||
import I18n from 'i18n-js';
|
||||
|
||||
import IUser, { UserRoles, USER_ROLE_ADMIN, USER_ROLE_USER, USER_STATUS_ACTIVE, USER_STATUS_BLOCKED, USER_STATUS_DELETED } from "../../../interfaces/IUser";
|
||||
import Separator from "../../common/Separator";
|
||||
import UserForm from "./UserForm";
|
||||
import { MutedText } from "../../common/CustomTexts";
|
||||
|
||||
interface Props {
|
||||
user: IUser;
|
||||
updateUserRole(
|
||||
id: number,
|
||||
role: UserRoles,
|
||||
closeEditMode: Function,
|
||||
): void;
|
||||
updateUserStatus(
|
||||
id: number,
|
||||
status: typeof USER_STATUS_ACTIVE | typeof USER_STATUS_BLOCKED,
|
||||
): void;
|
||||
|
||||
currentUserRole: UserRoles;
|
||||
currentUserEmail: string;
|
||||
}
|
||||
|
||||
interface State {
|
||||
editMode: boolean;
|
||||
}
|
||||
|
||||
class UserEditable extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = { editMode: false };
|
||||
|
||||
this.toggleEditMode = this.toggleEditMode.bind(this);
|
||||
this._handleUpdateUserRole = this._handleUpdateUserRole.bind(this);
|
||||
this._handleUpdateUserStatus = this._handleUpdateUserStatus.bind(this);
|
||||
}
|
||||
|
||||
toggleEditMode() {
|
||||
this.setState({ editMode: !this.state.editMode });
|
||||
}
|
||||
|
||||
_handleUpdateUserRole(newRole: UserRoles) {
|
||||
this.props.updateUserRole(
|
||||
this.props.user.id,
|
||||
newRole,
|
||||
this.toggleEditMode,
|
||||
);
|
||||
}
|
||||
|
||||
_handleUpdateUserStatus() {
|
||||
const { user } = this.props;
|
||||
const currentStatus = user.status;
|
||||
let newStatus: typeof USER_STATUS_ACTIVE | typeof USER_STATUS_BLOCKED;
|
||||
|
||||
if (currentStatus === 'deleted') return;
|
||||
|
||||
if (currentStatus === 'active') newStatus = 'blocked';
|
||||
else newStatus = 'active';
|
||||
|
||||
const confirmationMessage =
|
||||
newStatus === 'blocked' ?
|
||||
I18n.t('site_settings.users.block_confirmation', { name: user.fullName })
|
||||
:
|
||||
I18n.t('site_settings.users.unblock_confirmation', { name: user.fullName });
|
||||
|
||||
const confirmationResponse = confirm(confirmationMessage);
|
||||
|
||||
if (confirmationResponse) {
|
||||
this.props.updateUserStatus(user.id, newStatus);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { user, currentUserRole, currentUserEmail } = this.props;
|
||||
const { editMode } = this.state;
|
||||
|
||||
const editEnabled =
|
||||
user.status === USER_STATUS_ACTIVE &&
|
||||
currentUserRole === USER_ROLE_ADMIN &&
|
||||
currentUserEmail !== user.email;
|
||||
|
||||
const blockEnabled =
|
||||
user.status !== USER_STATUS_DELETED &&
|
||||
(currentUserRole === USER_ROLE_ADMIN || user.role === USER_ROLE_USER) &&
|
||||
currentUserEmail !== user.email;
|
||||
|
||||
return (
|
||||
<li className="userEditable">
|
||||
{
|
||||
editMode === false ?
|
||||
<>
|
||||
<div className="userInfo">
|
||||
<Gravatar email={user.email} size={42} className="gravatar userGravatar" />
|
||||
|
||||
<div className="userFullNameRoleStatus">
|
||||
<span className="userFullName">{ user.fullName }</span>
|
||||
|
||||
<div className="userRoleStatus">
|
||||
<span>
|
||||
<MutedText>{ I18n.t(`site_settings.users.role_${user.role}`) }</MutedText>
|
||||
</span>
|
||||
|
||||
{
|
||||
user.status !== USER_STATUS_ACTIVE ?
|
||||
<>
|
||||
<Separator />
|
||||
<span className={`userStatus userStatus${user.status}`}>
|
||||
{ I18n.t(`site_settings.users.status_${user.status}`) }
|
||||
</span>
|
||||
</>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="userEditableActions">
|
||||
<a
|
||||
onClick={() => editEnabled && this.toggleEditMode()}
|
||||
className={editEnabled ? '' : 'actionDisabled'}
|
||||
>
|
||||
{ I18n.t('common.buttons.edit') }
|
||||
</a>
|
||||
|
||||
<Separator />
|
||||
|
||||
<a
|
||||
onClick={() => blockEnabled && this._handleUpdateUserStatus()}
|
||||
className={blockEnabled ? '' : 'actionDisabled'}
|
||||
>
|
||||
{
|
||||
user.status !== USER_STATUS_BLOCKED ?
|
||||
I18n.t('site_settings.users.block')
|
||||
:
|
||||
I18n.t('site_settings.users.unblock')
|
||||
}
|
||||
</a>
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<UserForm user={user} updateUserRole={this._handleUpdateUserRole} />
|
||||
<a onClick={this.toggleEditMode} className="userEditCancelButton">
|
||||
{ I18n.t('common.buttons.cancel') }
|
||||
</a>
|
||||
</>
|
||||
}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default UserEditable;
|
||||
79
app/javascript/components/SiteSettings/Users/UserForm.tsx
Normal file
79
app/javascript/components/SiteSettings/Users/UserForm.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import * as React from 'react';
|
||||
import Gravatar from 'react-gravatar';
|
||||
import I18n from 'i18n-js';
|
||||
|
||||
import Button from '../../common/Button';
|
||||
import IUser, { UserRoles, USER_ROLE_ADMIN, USER_ROLE_MODERATOR, USER_ROLE_USER } from '../../../interfaces/IUser';
|
||||
|
||||
interface Props {
|
||||
user: IUser;
|
||||
updateUserRole(newRole: UserRoles): void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
role: UserRoles;
|
||||
}
|
||||
|
||||
class UserForm extends React.Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.state = { role: this.props.user.role };
|
||||
|
||||
this._handleUpdateUserRole = this._handleUpdateUserRole.bind(this);
|
||||
}
|
||||
|
||||
_handleUpdateUserRole(selectedRole: UserRoles) {
|
||||
const { user, updateUserRole } = this.props;
|
||||
let confirmation = true;
|
||||
|
||||
if (selectedRole === 'admin') {
|
||||
confirmation = confirm(I18n.t('site_settings.users.role_to_admin_confirmation', { name: user.fullName }));
|
||||
}
|
||||
|
||||
if (confirmation) updateUserRole(selectedRole);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { user } = this.props;
|
||||
const selectedRole = this.state.role;
|
||||
|
||||
return (
|
||||
<div className="userForm">
|
||||
<Gravatar email={user.email} size={42} className="gravatar userGravatar" />
|
||||
|
||||
<div className="userFullNameRoleForm">
|
||||
<span className="userFullName">{ user.fullName }</span>
|
||||
|
||||
<select
|
||||
value={selectedRole || 'Loading...'}
|
||||
onChange={
|
||||
(e: React.FormEvent) => {
|
||||
this.setState({role: (e.target as HTMLSelectElement).value as UserRoles});
|
||||
}}
|
||||
id="selectPickerUserRole"
|
||||
className="selectPicker"
|
||||
>
|
||||
<optgroup label="Roles">
|
||||
<option value={USER_ROLE_USER}>
|
||||
{ I18n.t(`site_settings.users.role_${USER_ROLE_USER}`) }
|
||||
</option>
|
||||
<option value={USER_ROLE_MODERATOR}>
|
||||
{ I18n.t(`site_settings.users.role_${USER_ROLE_MODERATOR}`) }
|
||||
</option>
|
||||
<option value={USER_ROLE_ADMIN}>
|
||||
{ I18n.t(`site_settings.users.role_${USER_ROLE_ADMIN}`) }
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<Button onClick={() => this._handleUpdateUserRole(selectedRole)} className="updateUserButton">
|
||||
{ I18n.t('common.buttons.update') }
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default UserForm;
|
||||
@@ -0,0 +1,103 @@
|
||||
import * as React from 'react';
|
||||
import I18n from 'i18n-js';
|
||||
|
||||
import UserEditable from './UserEditable';
|
||||
import Box from '../../common/Box';
|
||||
import SiteSettingsInfoBox from '../../common/SiteSettingsInfoBox';
|
||||
|
||||
import { UsersState } from '../../../reducers/usersReducer';
|
||||
import { UserRoles, USER_STATUS_ACTIVE, USER_STATUS_BLOCKED } from '../../../interfaces/IUser';
|
||||
import HttpStatus from '../../../constants/http_status';
|
||||
|
||||
interface Props {
|
||||
users: UsersState;
|
||||
settingsAreUpdating: boolean;
|
||||
settingsError: string;
|
||||
|
||||
requestUsers(): void;
|
||||
updateUserRole(
|
||||
id: number,
|
||||
role: UserRoles,
|
||||
authenticityToken: string,
|
||||
): Promise<any>;
|
||||
updateUserStatus(
|
||||
id: number,
|
||||
status: typeof USER_STATUS_ACTIVE | typeof USER_STATUS_BLOCKED,
|
||||
authenticityToken: string,
|
||||
): void;
|
||||
|
||||
currentUserEmail: string;
|
||||
currentUserRole: UserRoles;
|
||||
authenticityToken: string;
|
||||
}
|
||||
|
||||
class UsersSiteSettingsP extends React.Component<Props> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this._handleUpdateUserRole = this._handleUpdateUserRole.bind(this);
|
||||
this._handleUpdateUserStatus = this._handleUpdateUserStatus.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.props.requestUsers();
|
||||
}
|
||||
|
||||
_handleUpdateUserRole(id: number, role: UserRoles, closeEditMode: Function) {
|
||||
this.props.updateUserRole(
|
||||
id,
|
||||
role,
|
||||
this.props.authenticityToken,
|
||||
).then(res => {
|
||||
if (res?.status !== HttpStatus.OK) return;
|
||||
|
||||
closeEditMode();
|
||||
});
|
||||
}
|
||||
|
||||
_handleUpdateUserStatus(id: number, status: typeof USER_STATUS_ACTIVE | typeof USER_STATUS_BLOCKED) {
|
||||
this.props.updateUserStatus(
|
||||
id,
|
||||
status,
|
||||
this.props.authenticityToken,
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
users,
|
||||
settingsAreUpdating,
|
||||
settingsError,
|
||||
currentUserRole,
|
||||
currentUserEmail,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>
|
||||
<h2>{ I18n.t('site_settings.users.title') }</h2>
|
||||
|
||||
<ul className="usersList">
|
||||
{
|
||||
users.items.map((user, i) => (
|
||||
<UserEditable
|
||||
user={user}
|
||||
updateUserRole={this._handleUpdateUserRole}
|
||||
updateUserStatus={this._handleUpdateUserStatus}
|
||||
|
||||
currentUserEmail={currentUserEmail}
|
||||
currentUserRole={currentUserRole}
|
||||
key={i}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</Box>
|
||||
|
||||
<SiteSettingsInfoBox areUpdating={settingsAreUpdating || users.areLoading} error={settingsError} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default UsersSiteSettingsP;
|
||||
39
app/javascript/components/SiteSettings/Users/index.tsx
Normal file
39
app/javascript/components/SiteSettings/Users/index.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import * as React from 'react';
|
||||
import { Provider } from 'react-redux';
|
||||
import { Store } from 'redux';
|
||||
|
||||
import UsersSiteSettings from '../../../containers/UsersSiteSettings';
|
||||
|
||||
import createStoreHelper from '../../../helpers/createStore';
|
||||
import { UserRoles } from '../../../interfaces/IUser';
|
||||
import { State } from '../../../reducers/rootReducer';
|
||||
|
||||
interface Props {
|
||||
currentUserEmail: string;
|
||||
currentUserRole: UserRoles;
|
||||
authenticityToken: string;
|
||||
}
|
||||
|
||||
class UsersSiteSettingsRoot extends React.Component<Props> {
|
||||
store: Store<State, any>;
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
|
||||
this.store = createStoreHelper();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Provider store={this.store}>
|
||||
<UsersSiteSettings
|
||||
currentUserEmail={this.props.currentUserEmail}
|
||||
currentUserRole={this.props.currentUserRole}
|
||||
authenticityToken={this.props.authenticityToken}
|
||||
/>
|
||||
</Provider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default UsersSiteSettingsRoot;
|
||||
Reference in New Issue
Block a user