← Voltar

🎯 Visualizador - Sistema de Admin

👤 Estado do Usuário Normal

Autenticação

Role: user

Email: funcionario@inventario.com

Classe CSS no Body

class="..." is-admin: ❌ NAO
is-guest: ❌ NAO

Elementos Visíveis

Painel Admin ❌ OCULTO

Color Picker ❌ OCULTO

Presets (Cores) ❌ OCULTO

Botão Logout ❌ ADMIN ONLY

Timer Principal ✅ VISÍVEL

Frase Motivacional ✅ VISÍVEL

CSS Applied

body { class: "" // Sem is-admin // Sem is-guest }

📊 Fluxo Completo de Autenticação

🔑 PASSO CRÍTICO - ONDE O MAGIC ACONTECE

No arquivo auth-system.js, na classe AuthManager:

            login(email, password) { if (email === 'admin@inventario.com' &&
            password === '123456') { // ⭐ AQUI DEFINE O ROLE ⭐
            this.currentUser = new User(email, 'admin'); // Salva no
            localStorage com role = 'admin' this.saveUser(); } }
          

1️⃣ Login com Credenciais Admin

Você digita: admin@inventario.com / 123456

2️⃣ Sistema Valida

Compara email e senha com credenciais pré-definidas

3️⃣ Define Role = 'admin'

Cria objeto de usuário com role: 'admin'

4️⃣ Salva no localStorage

Persiste dados para próxima recarga

5️⃣ Redireciona para sistema.html

SweetAlert mostra sucesso e redirecion

6️⃣ application-ui.js Carrega

Lê localStorage e encontra role: 'admin'

7️⃣ Aplica Classe CSS

document.body.classList.add('is-admin')

8️⃣ CSS Mostra Painel Admin

body.is-admin .admin-panel { display: block }

✅ Resultado Final

Painel lateral visível com customizações

🎨 CSS Rules (Onde a Mágica Acontece)

Estes CSS rules controlam o que aparece:

/* Quando é admin, mostra o painel */ body.is-admin .admin-panel {
          display: flex !important; animation: slideInRight 0.3s ease-out; } /*
          Quando é admin, mostra elementos específicos */ body.is-admin
          [data-admin-only], body.is-admin .admin-only { display: block
          !important; visibility: visible !important; } /* Quando é guest,
          escurece recursos */ body.is-guest [data-guest-restricted],
          body.is-guest .guest-restricted { opacity: 0.4 !important;
          pointer-events: none !important; }

📋 Comparação Completa

Aspecto	👤 Usuário	👨‍💼 Admin
Email	funcionario@inventario.com	admin@inventario.com
Role	user	admin
Classe CSS	-	is-admin
Painel Lateral	❌ Não	✅ Sim
Color Picker	❌ Não	✅ Sim
Presets Cores	❌ Não	✅ Sim
Botão Logout	❌ Não Específico	✅ Sim
Timer	✅ Sim	✅ Sim
Frases	✅ Sim	✅ Sim
Fullscreen	✅ Sim	✅ Sim

💡 Entendimento Chave

1. O "role" é a chave: Ele determina quem é admin ou não

2. localStorage persiste o role: Mesmo após uma recarga, continua sabendo que é admin

3. CSS faz a mágica: Ele mostra/esconde elementos baseado na classe do body

4. Logout limpa tudo: Remove role, localStorage e redireciona para login