88 lines
2.3 KiB
JavaScript
Executable File
88 lines
2.3 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' },
|
|
{ username: 'user1' },
|
|
]);
|
|
|
|
const handleAuthMethodChange = (method) => {
|
|
setAuthMethods({
|
|
...authMethods,
|
|
[method]: !authMethods[method],
|
|
});
|
|
};
|
|
|
|
|
|
const addUser = (username) => {
|
|
setUsers([...users, { username }]);
|
|
};
|
|
|
|
const removeUser = (username) => {
|
|
setUsers(users.filter((user) => user.username !== username));
|
|
};
|
|
|
|
return (
|
|
<div className="security-container">
|
|
<h1 className="security-title">Segurança</h1>
|
|
|
|
{/* Métodos de Autorização */}
|
|
<div className="security-item">
|
|
<h2>Métodos de Autorização</h2>
|
|
<div className="auth-methods">
|
|
<label className="checkbox-label">
|
|
RFID
|
|
<input
|
|
type="checkbox"
|
|
checked={authMethods.RFID}
|
|
onChange={() => handleAuthMethodChange('RFID')}
|
|
/>
|
|
</label>
|
|
<label className="checkbox-label">
|
|
Aplicativo
|
|
<input
|
|
type="checkbox"
|
|
checked={authMethods.App}
|
|
onChange={() => handleAuthMethodChange('App')}
|
|
/>
|
|
</label>
|
|
<label className="checkbox-label">
|
|
Senha
|
|
<input
|
|
type="checkbox"
|
|
checked={authMethods.Password}
|
|
onChange={() => handleAuthMethodChange('Password')}
|
|
/>
|
|
</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>
|
|
<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;
|