218 lines
10 KiB
HTML
218 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MVP - Minha Conta</title>
|
|
<style>
|
|
body { font-family: Arial, Helvetica, sans-serif; background-color: #f4f4f9; color: #333; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; }
|
|
.container { background-color: #ffffff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); max-width: 500px; width: 100%; margin-top: 20px;}
|
|
h1 { color: #2c3e50; text-align: center; border-bottom: 2px solid #ecf0f1; padding-bottom: 10px; margin-bottom: 30px; }
|
|
.form-group { margin-bottom: 20px; }
|
|
label { display: block; margin-bottom: 8px; font-weight: bold; color: #555; }
|
|
input[type="email"], input[type="password"] {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
button {
|
|
width: 100%;
|
|
padding: 12px;
|
|
background-color: #3498db; /* Cor principal azul */
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-top: 20px;
|
|
position: relative;
|
|
transition: background-color 0.3s;
|
|
overflow: hidden; /* Garante que os elementos internos não ultrapassem as bordas arredondadas */
|
|
}
|
|
button:hover:not(:disabled) { background-color: #2980b9; }
|
|
button:disabled { cursor: wait; }
|
|
|
|
/* Estilos para o preview da imagem */
|
|
.photo-upload-container { text-align: center; margin-bottom: 30px; }
|
|
#image_preview {
|
|
width: 150px;
|
|
height: 150px;
|
|
border: 3px solid #ecf0f1;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
}
|
|
#image_preview:hover { transform: scale(1.05); }
|
|
#profile_image_input { display: none; }
|
|
|
|
/* Estilos para os estados do botão */
|
|
.button-content { display: flex; justify-content: center; align-items: center; }
|
|
.button-text, .button-loader, .button-success-icon { transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; }
|
|
|
|
.button-loader {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid rgba(255, 255, 255, 0.5);
|
|
border-top-color: #ffffff;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
.button-success-icon {
|
|
position: absolute;
|
|
opacity: 0;
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
}
|
|
|
|
button.sending { background-color: #95a5a6; }
|
|
button.sending .button-text { opacity: 0; transform: translateY(-10px); }
|
|
button.sending .button-loader { opacity: 1; }
|
|
|
|
button.success { background-color: #27ae60; }
|
|
button.success .button-loader { opacity: 0; }
|
|
button.success .button-success-icon { opacity: 1; transform: scale(1.2); }
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<form id="profile-form">
|
|
<h1>Minha Conta</h1>
|
|
|
|
<div class="form-group photo-upload-container">
|
|
<img id="image_preview" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 24 24' fill='%23f0f0f1' stroke='%23ccc' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E" alt="Preview da foto de perfil" title="Clique para selecionar uma nova foto de perfil">
|
|
<input type="file" id="profile_image_input" name="ImagePath" accept="image/png, image/jpeg">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="user_email">E-mail</label>
|
|
<input type="email" id="user_email" name="UserEmail" placeholder="seu.usuario@dominio.com" required title="Seu e-mail de login. Não pode ser alterado.">
|
|
</div>
|
|
|
|
<hr style="border: 1px solid #f0f0f0; margin: 30px 0;">
|
|
|
|
<div class="form-group">
|
|
<label for="old_password">Senha Atual</label>
|
|
<input type="password" id="old_password" name="OldPassword" placeholder="Necessária para salvar" required title="Sua senha atual é necessária para confirmar qualquer alteração.">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="new_password">Nova Senha</label>
|
|
<input type="password" id="new_password" name="NewPassword" placeholder="Deixe em branco para não alterar" title="Insira sua nova senha. Mínimo de 8 caracteres.">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="confirm_password">Confirmar Nova Senha</label>
|
|
<input type="password" id="confirm_password" name="ConfirmNewPassword" placeholder="Repita a nova senha" title="As senhas devem ser idênticas.">
|
|
</div>
|
|
|
|
<button type="submit" id="submit-button">
|
|
<span class="button-content">
|
|
<span class="button-text">Salvar Alterações</span>
|
|
<span class="button-loader"></span>
|
|
<span class="button-success-icon">✓</span>
|
|
</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
const profileForm = document.getElementById('profile-form');
|
|
const imagePreview = document.getElementById('image_preview');
|
|
const imageInput = document.getElementById('profile_image_input');
|
|
const submitButton = document.getElementById('submit-button');
|
|
// A constante agora guarda o SVG embutido para poder restaurá-lo após o refresh.
|
|
const placeholderImage = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 24 24' fill='%23f0f0f1' stroke='%23ccc' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E";
|
|
|
|
// --- Lógica para o Preview da Imagem ---
|
|
imagePreview.addEventListener('click', () => imageInput.click());
|
|
|
|
imageInput.addEventListener('change', (event) => {
|
|
const file = event.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => { imagePreview.src = e.target.result; };
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
|
|
// --- Lógica Unificada de Submissão do Formulário ---
|
|
profileForm.addEventListener('submit', (event) => {
|
|
event.preventDefault();
|
|
|
|
// Coleta de dados
|
|
const email = document.getElementById('user_email').value;
|
|
const oldPassword = document.getElementById('old_password').value;
|
|
const newPassword = document.getElementById('new_password').value;
|
|
const confirmPassword = document.getElementById('confirm_password').value;
|
|
const fileSelected = imageInput.files.length > 0;
|
|
|
|
// Validações
|
|
if (!email || !oldPassword) {
|
|
console.warn('VALIDAÇÃO FALHOU: E-mail e Senha Atual são obrigatórios.');
|
|
return;
|
|
}
|
|
if (newPassword && newPassword !== confirmPassword) {
|
|
console.warn('VALIDAÇÃO FALHOU: A nova senha e a confirmação não são idênticas.');
|
|
return;
|
|
}
|
|
if (!fileSelected && !newPassword) {
|
|
console.info('INFO: Nenhuma alteração detectada (foto ou senha). O envio foi cancelado.');
|
|
return;
|
|
}
|
|
|
|
// 1. Inicia a animação de envio
|
|
submitButton.classList.add('sending');
|
|
submitButton.disabled = true;
|
|
console.log(`%c[${new Date().toLocaleTimeString()}] INICIANDO ENVIO...`, 'color: #3498db; font-weight: bold;');
|
|
|
|
// 2. Simula um delay de rede de 2 segundos
|
|
setTimeout(() => {
|
|
// Log de simulação no console
|
|
const samAccountName = email.split('@')[0];
|
|
let actions = [];
|
|
if (fileSelected) actions.push({ action: "Atualização de Foto de Perfil", file: imageInput.files[0].name, script: "muda-imagem-perfil.ps1" });
|
|
if (newPassword) actions.push({ action: "Alteração de Senha", validation: "SUCESSO (simulado)", script: "muda-senha-usuario.ps1" });
|
|
|
|
console.group(`%c[${new Date().toLocaleTimeString()}] RESPOSTA DA SIMULAÇÃO DE BACKEND`, 'color: #27ae60; font-weight: bold;');
|
|
console.log("DESTINO: API de Atualização de Perfil");
|
|
console.log("USUÁRIO:", samAccountName);
|
|
console.log("AÇÕES EXECUTADAS:");
|
|
console.table(actions);
|
|
console.groupEnd();
|
|
|
|
// 3. Transição para o estado de "sucesso"
|
|
submitButton.classList.remove('sending');
|
|
submitButton.classList.add('success');
|
|
|
|
// 4. Aguarda 1.5s no estado de "sucesso" e depois faz o refresh
|
|
setTimeout(() => {
|
|
submitButton.classList.remove('success');
|
|
submitButton.disabled = false;
|
|
|
|
// Limpa os campos do formulário (refresh)
|
|
document.getElementById('new_password').value = '';
|
|
document.getElementById('confirm_password').value = '';
|
|
document.getElementById('old_password').value = '';
|
|
imageInput.value = ''; // Limpa a seleção do arquivo
|
|
imagePreview.src = placeholderImage; // Restaura a imagem padrão
|
|
|
|
console.log(`%c[${new Date().toLocaleTimeString()}] INTERFACE ATUALIZADA E PRONTA.`, 'color: #9b59b6;');
|
|
}, 1500);
|
|
|
|
}, 2000);
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |