mudanças2
This commit is contained in:
parent
3833764438
commit
97840ebed4
@ -1,206 +1,107 @@
|
||||
// src/pages/ProfilePage.jsx
|
||||
import React, { useState } from 'react';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
// import { useAuth } from '../components/utils/AuthProvider'; // <-- NOVO: Se você puder importar isso.
|
||||
import React, { useState } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import "./style/ProfilePage.css";
|
||||
|
||||
// --- SIMULAÇÃO DE DADOS DE USUÁRIO ---
|
||||
// COMO NÃO PODEMOS IMPORTAR O useAuth SEM MEXER EM OUTROS ARQUIVOS, VAMOS USAR ESTA SIMULAÇÃO:
|
||||
const simulatedUserData = {
|
||||
// ESTA SIMULAÇÃO DEVERIA SER SUBTITUÍDA PELO SEU CONTEXTO DE AUTENTICAÇÃO REAL.
|
||||
// O EMAIL REALMENTE LOGADO VEM DO CONTEXTO DE AUTENTICAÇÃO (useAuth)
|
||||
email: 'admin@squad23.com',
|
||||
role: 'Administrador' // Vamos forçar um valor para fins de visualização
|
||||
email: "admin@squad23.com",
|
||||
role: "Administrador",
|
||||
};
|
||||
|
||||
const ProfilePage = () => {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
// const { user } = useAuth(); // Descomente esta linha e comente o bloco simulatedUserData se puder usar o useAuth!
|
||||
|
||||
// --- Lógica de Cargo (AGORA CORRIGIDA PARA PEGAR DA URL SE O CONTEXTO FALHAR) ---
|
||||
const getRoleFromPath = () => {
|
||||
const path = location.pathname;
|
||||
if (path.includes('/admin')) return 'Administrador';
|
||||
if (path.includes('/secretaria')) return 'Secretária';
|
||||
if (path.includes('/medico')) return 'Médico';
|
||||
if (path.includes('/financeiro')) return 'Financeiro';
|
||||
return 'Usuário Padrão';
|
||||
if (path.includes("/admin")) return "Administrador";
|
||||
if (path.includes("/secretaria")) return "Secretária";
|
||||
if (path.includes("/medico")) return "Médico";
|
||||
if (path.includes("/financeiro")) return "Financeiro";
|
||||
return "Usuário Padrão";
|
||||
};
|
||||
|
||||
// Use a simulação ou o dado real:
|
||||
const userRole = simulatedUserData.role || getRoleFromPath();
|
||||
const userEmail = simulatedUserData.email || 'email.nao.encontrado@mediconnect.com';
|
||||
|
||||
// --- Estados do Componente ---
|
||||
|
||||
// Se o nome do usuário vier do contexto de autenticação, use-o aqui
|
||||
const [userName, setUserName] = useState('Admin Padrão');
|
||||
const userRole = simulatedUserData.role || getRoleFromPath();
|
||||
const userEmail = simulatedUserData.email || "email.nao.encontrado@example.com";
|
||||
|
||||
const [userName, setUserName] = useState("Admin Padrão");
|
||||
const [isEditingName, setIsEditingName] = useState(false);
|
||||
|
||||
// --- Funções de Interação ---
|
||||
|
||||
const handleNameChange = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
setIsEditingName(false);
|
||||
}
|
||||
const handleNameKeyDown = (e) => {
|
||||
if (e.key === "Enter") setIsEditingName(false);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
navigate(-1); // Volta para a página anterior
|
||||
};
|
||||
const handleClose = () => navigate(-1);
|
||||
|
||||
return (
|
||||
<div style={styles.overlay}>
|
||||
<div style={styles.modalContainer}>
|
||||
|
||||
{/* Botão de Fechar (X) */}
|
||||
<button onClick={handleClose} style={styles.closeButton} aria-label="Fechar Perfil">
|
||||
×
|
||||
<div className="profile-overlay" role="dialog" aria-modal="true">
|
||||
<div className="profile-modal">
|
||||
<button
|
||||
className="profile-close"
|
||||
onClick={handleClose}
|
||||
aria-label="Fechar Perfil"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
|
||||
{/* 1. Área da Foto de Perfil (Quadrada) */}
|
||||
<div style={styles.profilePictureContainer}>
|
||||
<div style={styles.profilePicturePlaceholder}></div>
|
||||
</div>
|
||||
|
||||
<div style={styles.infoContainer}>
|
||||
|
||||
{/* 2. Nome do Usuário com Edição */}
|
||||
<div style={styles.nameSection}>
|
||||
{isEditingName ? (
|
||||
<input
|
||||
type="text"
|
||||
value={userName}
|
||||
onChange={(e) => setUserName(e.target.value)}
|
||||
onBlur={() => setIsEditingName(false)}
|
||||
onKeyPress={handleNameChange}
|
||||
autoFocus
|
||||
style={styles.nameInput}
|
||||
/>
|
||||
) : (
|
||||
<h2 style={styles.userName}>{userName}</h2>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => setIsEditingName(!isEditingName)}
|
||||
style={styles.editButton}
|
||||
aria-label="Editar Nome"
|
||||
>
|
||||
<span role="img" aria-label="lapis">✏️</span>
|
||||
</button>
|
||||
<div className="profile-content">
|
||||
<div className="profile-left">
|
||||
<div className="avatar-wrapper">
|
||||
<div className="avatar-square" />
|
||||
<button
|
||||
className="avatar-edit-btn"
|
||||
title="Editar foto"
|
||||
aria-label="Editar foto"
|
||||
type="button"
|
||||
>
|
||||
✏️
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. Email (AGORA EXIBE O VALOR SIMULADO/CORRIGIDO) */}
|
||||
<p style={styles.emailText}>Email: <strong>{userEmail}</strong></p>
|
||||
<div className="profile-right">
|
||||
<div className="profile-name-row">
|
||||
{isEditingName ? (
|
||||
<input
|
||||
className="profile-name-input"
|
||||
value={userName}
|
||||
onChange={(e) => setUserName(e.target.value)}
|
||||
onBlur={() => setIsEditingName(false)}
|
||||
onKeyDown={handleNameKeyDown}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<h2 className="profile-username">{userName}</h2>
|
||||
)}
|
||||
|
||||
{/* 4. Cargo (AGORA EXIBE O VALOR SIMULADO/CORRIGIDO) */}
|
||||
<p style={styles.roleText}>Cargo: <strong>{userRole}</strong></p>
|
||||
<button
|
||||
className="profile-edit-inline"
|
||||
onClick={() => setIsEditingName(!isEditingName)}
|
||||
aria-label="Editar nome"
|
||||
type="button"
|
||||
>
|
||||
✏️
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="profile-email">
|
||||
Email: <strong>{userEmail}</strong>
|
||||
</p>
|
||||
|
||||
<p className="profile-role">
|
||||
Cargo: <strong>{userRole}</strong>
|
||||
</p>
|
||||
|
||||
<div className="profile-actions-row">
|
||||
<button className="btn btn-close" onClick={handleClose}>
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Estilos Atualizados para Aumentar o Tamanho do Modal
|
||||
const styles = {
|
||||
overlay: {
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: 1100,
|
||||
},
|
||||
modalContainer: {
|
||||
position: 'relative',
|
||||
padding: '50px 70px', // Aumentado o padding
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '15px',
|
||||
boxShadow: '0 8px 30px rgba(0, 0, 0, 0.3)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
minWidth: '400px',
|
||||
width: '60%', // Aumentando a largura para cobrir mais a tela
|
||||
maxWidth: '500px', // Limite máximo para não ficar gigante em telas grandes
|
||||
height: 'auto',
|
||||
},
|
||||
closeButton: {
|
||||
position: 'absolute',
|
||||
top: '15px',
|
||||
right: '20px',
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
fontSize: '30px',
|
||||
cursor: 'pointer',
|
||||
color: '#666',
|
||||
lineHeight: '1',
|
||||
},
|
||||
// ... (Os estilos de profilePictureContainer, infoContainer, etc., permanecem iguais)
|
||||
profilePictureContainer: {
|
||||
width: '120px',
|
||||
height: '120px',
|
||||
borderRadius: '15px',
|
||||
overflow: 'hidden',
|
||||
boxShadow: '0 4px 10px rgba(0, 0, 0, 0.15)',
|
||||
marginBottom: '20px',
|
||||
},
|
||||
profilePicturePlaceholder: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
backgroundColor: '#A9A9A9',
|
||||
backgroundImage: 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%23FFFFFF" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm-45.7 48C79.8 304 0 383.8 0 482.3c0 16.7 13.5 30.2 30.2 30.2h387.6c16.7 0 30.2-13.5 30.2-30.2 0-98.5-79.8-178.3-178.3-178.3h-45.7z"/></svg>\')',
|
||||
backgroundSize: '80%',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
},
|
||||
infoContainer: {
|
||||
textAlign: 'center',
|
||||
maxWidth: '400px',
|
||||
width: '100%',
|
||||
},
|
||||
nameSection: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '10px',
|
||||
},
|
||||
userName: {
|
||||
margin: '0 5px 0 0',
|
||||
fontSize: '1.8rem',
|
||||
color: '#333',
|
||||
},
|
||||
nameInput: {
|
||||
fontSize: '1.8rem',
|
||||
padding: '5px',
|
||||
border: '1px solid #ccc',
|
||||
borderRadius: '5px',
|
||||
textAlign: 'center',
|
||||
marginRight: '5px',
|
||||
},
|
||||
editButton: {
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontSize: '1.2rem',
|
||||
marginLeft: '5px',
|
||||
},
|
||||
emailText: {
|
||||
fontSize: '1rem',
|
||||
color: '#666',
|
||||
margin: '5px 0',
|
||||
},
|
||||
roleText: {
|
||||
fontSize: '1.1rem',
|
||||
color: '#333',
|
||||
marginTop: '15px',
|
||||
paddingTop: '10px',
|
||||
borderTop: '1px solid #eee',
|
||||
}
|
||||
};
|
||||
|
||||
export default ProfilePage;
|
||||
export default ProfilePage;
|
||||
|
||||
@ -0,0 +1,178 @@
|
||||
/* src/pages/ProfilePage.css */
|
||||
|
||||
/* Overlay que cobre toda a tela */
|
||||
.profile-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0.65);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 20000; /* acima de header, vlibras, botões de acessibilidade */
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Card central (estilo modal amplo parecido com a 4ª foto) */
|
||||
.profile-modal {
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
padding: 18px;
|
||||
width: min(1100px, 96%);
|
||||
max-width: 1100px;
|
||||
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Botão fechar (X) no canto do card */
|
||||
.profile-close {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 26px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Conteúdo dividido em 2 colunas: esquerda avatar / direita infos */
|
||||
.profile-content {
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
align-items: flex-start;
|
||||
padding: 22px 18px;
|
||||
}
|
||||
|
||||
/* Coluna esquerda - avatar */
|
||||
.profile-left {
|
||||
width: 220px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Avatar quadrado com sombra (estilo da foto 4) */
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.avatar-square {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
background-color: #d0d0d0;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='%23FFFFFF' d='M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm-45.7 48C79.8 304 0 383.8 0 482.3c0 16.7 13.5 30.2 30.2 30.2h387.6c16.7 0 30.2-13.5 30.2-30.2 0-98.5-79.8-178.3-178.3-178.3h-45.7z'/></svg>");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 55%;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
/* Botão editar sobre o avatar — círculo pequeno */
|
||||
.avatar-edit-btn {
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
bottom: -8px;
|
||||
transform: translate(0, 0);
|
||||
border: none;
|
||||
background: #ffffff;
|
||||
padding: 8px 9px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 6px 14px rgba(0,0,0,0.18);
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Coluna direita - informações */
|
||||
.profile-right {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Nome e botão de editar inline */
|
||||
.profile-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.profile-username {
|
||||
margin: 0;
|
||||
font-size: 1.9rem;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.profile-edit-inline {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 1.05rem;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
/* input de edição do nome */
|
||||
.profile-name-input {
|
||||
font-size: 1.6rem;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* email/role */
|
||||
.profile-email,
|
||||
.profile-role {
|
||||
margin: 6px 0;
|
||||
color: #555;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.profile-role {
|
||||
margin-top: 14px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f1f1f1;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* ações (apenas fechar aqui) */
|
||||
.profile-actions-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
/* botões */
|
||||
.btn {
|
||||
padding: 8px 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
background: #f0f0f0;
|
||||
color: #222;
|
||||
border: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
/* responsividade */
|
||||
@media (max-width: 880px) {
|
||||
.profile-content {
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
}
|
||||
.profile-left { width: 100%; }
|
||||
.avatar-wrapper { width: 140px; height: 140px; }
|
||||
.profile-right { width: 100%; text-align: center; }
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user