117 lines
3.2 KiB
JavaScript
Executable File
117 lines
3.2 KiB
JavaScript
Executable File
// src/pages/Security.jsx
|
|
import React, { useState } from 'react';
|
|
|
|
const Security = () => {
|
|
// Estado para armazenar se MFA está habilitado e os métodos de autenticação
|
|
const [isMFAEnabled, setIsMFAEnabled] = useState(false);
|
|
const [authMethods, setAuthMethods] = useState({
|
|
RFID: false,
|
|
App: false,
|
|
Password: true,
|
|
});
|
|
const [users, setUsers] = useState([
|
|
{ username: 'admin', role: 'Administrator' },
|
|
{ username: 'user1', role: 'User' },
|
|
]);
|
|
|
|
const handleMFAChange = (e) => {
|
|
setIsMFAEnabled(e.target.checked);
|
|
};
|
|
|
|
const handleAuthMethodChange = (method) => {
|
|
setAuthMethods({
|
|
...authMethods,
|
|
[method]: !authMethods[method],
|
|
});
|
|
};
|
|
|
|
const handleUserRoleChange = (username, newRole) => {
|
|
setUsers(users.map((user) =>
|
|
user.username === username ? { ...user, role: newRole } : user
|
|
));
|
|
};
|
|
|
|
const addUser = (username, role) => {
|
|
setUsers([...users, { username, role }]);
|
|
};
|
|
|
|
const removeUser = (username) => {
|
|
setUsers(users.filter((user) => user.username !== username));
|
|
};
|
|
|
|
return (
|
|
<div className="security-container">
|
|
<h1 className="security-title">Segurança e Autorização</h1>
|
|
|
|
{/* MFA Checkbox */}
|
|
<div className="security-item">
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={isMFAEnabled}
|
|
onChange={handleMFAChange}
|
|
/>
|
|
Ativar Autenticação Multifatorial (MFA)
|
|
</label>
|
|
</div>
|
|
|
|
{/* Métodos de Autorização */}
|
|
<div className="security-item">
|
|
<h2>Métodos de Autorização</h2>
|
|
<div className="auth-methods">
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={authMethods.RFID}
|
|
onChange={() => handleAuthMethodChange('RFID')}
|
|
/>
|
|
RFID
|
|
</label>
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={authMethods.App}
|
|
onChange={() => handleAuthMethodChange('App')}
|
|
/>
|
|
Aplicativo
|
|
</label>
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={authMethods.Password}
|
|
onChange={() => handleAuthMethodChange('Password')}
|
|
/>
|
|
Senha
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Usuários */}
|
|
<div className="security-item">
|
|
<h2>Usuários</h2>
|
|
<ul>
|
|
{users.map((user, index) => (
|
|
<li key={index}>
|
|
<span>{user.username} - {user.role}</span>
|
|
<select
|
|
value={user.role}
|
|
onChange={(e) => handleUserRoleChange(user.username, e.target.value)}
|
|
>
|
|
<option value="Administrator">Administrador</option>
|
|
<option value="User">Usuário</option>
|
|
<option value="Maintenance">Manutenção</option>
|
|
</select>
|
|
<button onClick={() => removeUser(user.username)}>Remover</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="add-user">
|
|
<button onClick={() => addUser('newuser', 'User')}>Adicionar Novo Usuário</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Security;
|