@kaikybrofc/omnizap-system 2.3.1 → 2.3.3

package/public/js/apps/loginApp.js

@@ -2,18 +2,32 @@
 
 const GOOGLE_GSI_SCRIPT_SRC = 'https://accounts.google.com/gsi/client';
 const DEFAULT_API_BASE_PATH = '/api/sticker-packs';
+const LOGIN_CONSENT_STORAGE_KEY = 'omnizap_login_terms_consent_v1';
+const LOGIN_CONSENT_HINT = 'Aceite os Termos de Uso e a Politica de Privacidade para continuar.';
+const DEFAULT_SUCCESS_CHAT_LABEL = 'Abrir WhatsApp do bot';
+const DEFAULT_SUCCESS_HOME_LABEL = 'Ir para o painel';
+const ALREADY_LOGGED_HINT_TEXT = 'Nao e necessario fazer login novamente. Escolha uma opcao abaixo.';
 
 const root = document.getElementById('login-app-root');
 
 if (root) {
   const ui = {
+    loginCard: document.getElementById('login-main-card'),
     status: document.getElementById('login-status'),
     hint: document.getElementById('login-hint'),
     error: document.getElementById('login-error'),
     googleArea: document.getElementById('google-login-area'),
+    googleButtonShell: document.getElementById('google-login-button-shell'),
     googleButton: document.querySelector('[data-google-login-button]'),
     googleState: document.getElementById('google-login-state'),
+    consentBox: document.getElementById('login-consent-box'),
+    consentCheckbox: document.getElementById('login-consent-checkbox'),
+    consentError: document.getElementById('login-consent-error'),
+    alreadyLoggedBanner: document.getElementById('already-logged-banner'),
+    alreadyLoggedTitle: document.getElementById('already-logged-title'),
+    alreadyLoggedDetail: document.getElementById('already-logged-detail'),
     summary: document.getElementById('login-summary'),
+    summaryTitle: document.getElementById('login-summary-title'),
     summaryOwner: document.getElementById('login-summary-owner'),
     whatsappCta: document.getElementById('whatsapp-cta'),
     whatsappCtaLink: document.getElementById('whatsapp-cta-link'),
@@ -21,6 +35,7 @@ if (root) {
     successActions: document.getElementById('login-success-actions'),
     successChat: document.getElementById('login-success-chat'),
     successHome: document.getElementById('login-success-home'),
+    successCelebration: document.getElementById('login-success-celebration'),
   };
 
   const state = {
@@ -30,6 +45,8 @@ if (root) {
     googleReady: false,
     busy: false,
     authenticated: false,
+    consentAccepted: false,
+    successAnimationTimer: 0,
     botPhone: '',
     sessionOwnerPhone: '',
     hint: readWhatsAppHintFromUrl(window.location.search),
@@ -43,6 +60,25 @@ if (root) {
     element.textContent = String(value || '');
   };
 
+  const isAuthenticatedFlagEnabled = (value) => {
+    if (value === true || value === 1) return true;
+    if (typeof value === 'string') {
+      const normalized = value.trim().toLowerCase();
+      return normalized === 'true' || normalized === '1';
+    }
+    return false;
+  };
+
+  const isAuthenticatedGoogleSession = (sessionData) => {
+    if (!sessionData || typeof sessionData !== 'object') return false;
+    if (!isAuthenticatedFlagEnabled(sessionData.authenticated)) return false;
+    const provider = String(sessionData.provider || '').trim().toLowerCase();
+    if (provider && provider !== 'google') return false;
+    const ownerJid = String(sessionData.owner_jid || '').trim();
+    const userSub = String(sessionData?.user?.sub || '').trim();
+    return Boolean(ownerJid || userSub);
+  };
+
   const normalizeDigits = (value) => String(value || '').replace(/\D+/g, '');
 
   const showError = (message) => {
@@ -52,13 +88,110 @@ if (root) {
     if (safe) ui.error.textContent = safe;
   };
 
+  const showConsentError = (message) => {
+    if (!ui.consentError) return;
+    const safe = String(message || '').trim();
+    ui.consentError.hidden = !safe;
+    if (safe) ui.consentError.textContent = safe;
+  };
+
+  const persistConsentState = (accepted) => {
+    try {
+      if (accepted) {
+        window.localStorage.setItem(LOGIN_CONSENT_STORAGE_KEY, '1');
+      } else {
+        window.localStorage.removeItem(LOGIN_CONSENT_STORAGE_KEY);
+      }
+    } catch {
+      // Ignore storage errors (private mode or blocked storage).
+    }
+  };
+
+  const readConsentState = () => {
+    try {
+      return window.localStorage.getItem(LOGIN_CONSENT_STORAGE_KEY) === '1';
+    } catch {
+      return false;
+    }
+  };
+
+  const hideSuccessCelebration = () => {
+    if (!ui.successCelebration) return;
+    ui.successCelebration.classList.remove('is-visible');
+    window.setTimeout(() => {
+      if (!ui.successCelebration?.classList.contains('is-visible')) {
+        ui.successCelebration.hidden = true;
+      }
+    }, 320);
+  };
+
+  const playSuccessCelebration = () => {
+    if (!ui.successCelebration) return;
+    if (state.successAnimationTimer) {
+      window.clearTimeout(state.successAnimationTimer);
+      state.successAnimationTimer = 0;
+    }
+
+    ui.successCelebration.hidden = false;
+    ui.successCelebration.classList.remove('is-visible');
+    void ui.successCelebration.offsetWidth;
+    ui.successCelebration.classList.add('is-visible');
+
+    state.successAnimationTimer = window.setTimeout(() => {
+      hideSuccessCelebration();
+      state.successAnimationTimer = 0;
+    }, 2300);
+  };
+
   const setBusy = (value) => {
     state.busy = Boolean(value);
     if (ui.googleButton) {
-      ui.googleButton.style.opacity = state.busy ? '0.55' : '1';
-      ui.googleButton.style.pointerEvents = state.busy ? 'none' : 'auto';
+      const canInteract = !state.busy && state.consentAccepted;
+      ui.googleButton.style.opacity = canInteract ? '1' : '0.55';
+      ui.googleButton.style.pointerEvents = canInteract ? 'auto' : 'none';
     }
-    setText(ui.googleState, state.busy ? 'Finalizando login...' : state.googleReady ? '' : 'Carregando login Google...');
+    setText(ui.googleState, state.busy ? 'Finalizando login...' : state.consentAccepted ? (state.googleReady ? '' : 'Carregando login Google...') : LOGIN_CONSENT_HINT);
+  };
+
+  const renderGoogleLoginControls = () => {
+    const hideLoginControls = state.authenticated;
+    if (ui.consentBox) {
+      ui.consentBox.hidden = hideLoginControls;
+    }
+    if (ui.googleButtonShell) {
+      ui.googleButtonShell.hidden = hideLoginControls || !state.consentAccepted;
+    }
+  };
+
+  const renderLoginCardVisibility = () => {
+    if (!ui.loginCard) return;
+    ui.loginCard.hidden = Boolean(state.authenticated);
+  };
+
+  const resolveGoogleButtonWidth = () => {
+    const directWidth = Math.floor(Number(ui.googleButton?.clientWidth || 0));
+    if (directWidth > 0) {
+      return Math.max(180, Math.min(320, directWidth));
+    }
+
+    const areaWidth = Math.floor(Number(ui.googleArea?.clientWidth || 0));
+    if (areaWidth > 0) {
+      const areaStyles = ui.googleArea ? window.getComputedStyle(ui.googleArea) : null;
+      const shellStyles = ui.googleButtonShell ? window.getComputedStyle(ui.googleButtonShell) : null;
+      const areaPaddingX = areaStyles ? Number.parseFloat(areaStyles.paddingLeft || '0') + Number.parseFloat(areaStyles.paddingRight || '0') : 0;
+      const shellPaddingX = shellStyles ? Number.parseFloat(shellStyles.paddingLeft || '0') + Number.parseFloat(shellStyles.paddingRight || '0') : 16;
+      const shellBorderX = shellStyles ? Number.parseFloat(shellStyles.borderLeftWidth || '0') + Number.parseFloat(shellStyles.borderRightWidth || '0') : 2;
+      const available = Math.floor(areaWidth - areaPaddingX - shellPaddingX - shellBorderX);
+      if (available > 0) {
+        return Math.max(180, Math.min(320, available));
+      }
+    }
+
+    const viewportAvailable = Math.floor(Number(window.innerWidth || 0)) - 96;
+    if (viewportAvailable > 0) {
+      return Math.max(180, Math.min(320, viewportAvailable));
+    }
+    return 280;
   };
 
   const formatPhone = (digits) => {
@@ -102,18 +235,47 @@ if (root) {
 
   const canUseGoogleLogin = () => Boolean(state.hint.phone);
 
-  const renderSuccessActions = (sessionData) => {
+  const renderSuccessActions = (sessionData, options = {}) => {
     if (!ui.successActions) return;
-    const authenticated = Boolean(sessionData?.authenticated);
+    const authenticated = isAuthenticatedFlagEnabled(sessionData?.authenticated);
     ui.successActions.hidden = !authenticated;
     if (!authenticated) return;
 
+    const chatLabel = String(options.chatLabel || DEFAULT_SUCCESS_CHAT_LABEL);
+    const homeLabel = String(options.homeLabel || DEFAULT_SUCCESS_HOME_LABEL);
+    const homeHref = String(options.homeHref || '/user/');
+
     if (ui.successChat) {
       ui.successChat.href = buildWhatsappMenuUrl(state.botPhone);
+      setText(ui.successChat, chatLabel);
     }
     if (ui.successHome) {
-      ui.successHome.href = '/';
+      ui.successHome.href = homeHref;
+      setText(ui.successHome, homeLabel);
+    }
+  };
+
+  const renderAlreadyLoggedBanner = ({ visible = false, ownerPhone = '' } = {}) => {
+    if (!ui.alreadyLoggedBanner) return;
+    ui.alreadyLoggedBanner.hidden = !visible;
+    if (!visible) return;
+    setText(ui.alreadyLoggedTitle, 'Voce ja esta logado neste navegador.');
+    if (ownerPhone) {
+      setText(ui.alreadyLoggedDetail, `Sessao ativa para +${formatPhone(ownerPhone)}. Nao e necessario fazer login novamente.`);
+      return;
     }
+    setText(ui.alreadyLoggedDetail, ALREADY_LOGGED_HINT_TEXT);
+  };
+
+  const renderAlreadyLoggedInState = (sessionData) => {
+    const ownerPhone = String(sessionData?.owner_phone || '').trim();
+    state.authenticated = true;
+    state.sessionOwnerPhone = ownerPhone;
+
+    showError('');
+    showConsentError('');
+    hideSuccessCelebration();
+    renderSessionSummary(sessionData);
   };
 
   const renderWhatsAppCta = () => {
@@ -146,30 +308,35 @@ if (root) {
 
   const renderHint = () => {
     if (!state.hint.hasPayload) {
-      setText(ui.hint, 'Voce abriu esta pagina direto. Por seguranca, gere seu link no WhatsApp clicando no botao abaixo e enviando "iniciar".');
+      setText(ui.hint, 'Abra o link que o bot envia no WhatsApp para liberar o login neste navegador.');
       return;
     }
 
     if (!state.hint.phone) {
-      setText(ui.hint, 'Este link nao trouxe um numero de WhatsApp valido. Ele pode ter sido alterado ou expirado. Gere um novo link enviando "iniciar".');
+      setText(ui.hint, 'Este link nao tem um numero valido. Gere um novo enviando "iniciar" no bot.');
       return;
     }
 
-    setText(ui.hint, `Numero detectado para vinculo: +${formatPhone(state.hint.phone)}.`);
+    setText(ui.hint, `Numero detectado: +${formatPhone(state.hint.phone)}.`);
   };
 
   const renderSessionSummary = (sessionData) => {
+    renderAlreadyLoggedBanner({ visible: false });
     if (!canUseGoogleLogin()) {
       state.authenticated = false;
       state.sessionOwnerPhone = '';
+      renderGoogleLoginControls();
+      renderLoginCardVisibility();
       if (ui.summary) ui.summary.hidden = true;
       renderSuccessActions(null);
       renderWhatsAppCta();
       return;
     }
 
-    const authenticated = Boolean(sessionData?.authenticated);
+    const authenticated = isAuthenticatedGoogleSession(sessionData);
     state.authenticated = authenticated;
+    renderGoogleLoginControls();
+    renderLoginCardVisibility();
     renderSuccessActions(sessionData);
     if (ui.summary) ui.summary.hidden = !authenticated;
     if (!authenticated) {
@@ -181,18 +348,24 @@ if (root) {
     const ownerPhone = String(sessionData?.owner_phone || '').trim();
     state.sessionOwnerPhone = ownerPhone;
     if (ownerPhone) {
-      setText(ui.summaryOwner, `WhatsApp vinculado: +${formatPhone(ownerPhone)}`);
+      if (ui.summary) ui.summary.dataset.state = 'ok';
+      setText(ui.summaryTitle, 'WhatsApp conectado');
+      setText(ui.summaryOwner, `+${formatPhone(ownerPhone)}`);
       renderWhatsAppCta();
       return;
     }
 
     if (state.hint.phone) {
-      setText(ui.summaryOwner, `Numero detectado: +${formatPhone(state.hint.phone)}. Clique no botao do Google para concluir o vinculo.`);
+      if (ui.summary) ui.summary.dataset.state = 'pending';
+      setText(ui.summaryTitle, 'Vinculo em andamento');
+      setText(ui.summaryOwner, `Numero detectado: +${formatPhone(state.hint.phone)}`);
       renderWhatsAppCta();
       return;
     }
 
-    setText(ui.summaryOwner, 'Conta Google ativa. Vincule o WhatsApp abrindo o link pelo "iniciar".');
+    if (ui.summary) ui.summary.dataset.state = 'ok';
+    setText(ui.summaryTitle, 'Conta ativa');
+    setText(ui.summaryOwner, 'Abra o link do WhatsApp para concluir o vinculo.');
     renderWhatsAppCta();
   };
 
@@ -231,7 +404,26 @@ if (root) {
     return payload;
   };
 
+  const syncConsentState = () => {
+    state.consentAccepted = Boolean(ui.consentCheckbox?.checked);
+    persistConsentState(state.consentAccepted);
+    if (ui.consentBox) {
+      ui.consentBox.classList.toggle('is-checked', state.consentAccepted);
+    }
+    if (state.consentAccepted) {
+      showConsentError('');
+    }
+    renderGoogleLoginControls();
+    setBusy(state.busy);
+  };
+
   const handleGoogleCredential = async (credential) => {
+    if (!state.consentAccepted) {
+      showConsentError(LOGIN_CONSENT_HINT);
+      setBusy(false);
+      return;
+    }
+
     const token = String(credential || '').trim();
     if (!token) {
       showError('Falha ao receber token do Google. Tente novamente.');
@@ -249,16 +441,18 @@ if (root) {
         body: JSON.stringify(buildSessionPayload(token)),
       });
       const sessionData = sessionPayload?.data || {};
-      if (!sessionData?.authenticated) {
+      if (!isAuthenticatedGoogleSession(sessionData)) {
         throw new Error('Nao foi possivel criar a sessao Google.');
       }
-      setText(ui.status, 'Login concluido. Seu acesso foi vinculado com sucesso.');
+      setText(ui.status, 'Conta Google detectada');
       renderSessionSummary(sessionData);
       setText(ui.googleState, 'Login Google ativo.');
+      playSuccessCelebration();
     } catch (error) {
       showError(error?.message || 'Falha ao concluir login Google.');
-      setText(ui.status, 'Nao foi possivel concluir o login agora.');
+      setText(ui.status, 'Falha ao validar conta Google');
       renderSessionSummary(null);
+      hideSuccessCelebration();
     } finally {
       setBusy(false);
     }
@@ -310,22 +504,21 @@ if (root) {
       });
 
       ui.googleButton.innerHTML = '';
-      const measuredWidth = Math.floor(Number(ui.googleButton.clientWidth || 0));
-      const buttonWidth = Math.max(180, Math.min(320, measuredWidth || 320));
+      const buttonWidth = resolveGoogleButtonWidth();
       accounts.renderButton(ui.googleButton, {
         type: 'standard',
-        theme: 'filled_black',
+        theme: 'outline',
         size: 'large',
-        text: 'signin_with',
+        text: 'continue_with',
         shape: 'pill',
         width: buttonWidth,
       });
 
       state.googleReady = true;
-      setText(ui.googleState, '');
+      setBusy(state.busy);
     } catch (error) {
       state.googleReady = false;
-      setText(ui.googleState, '');
+      setBusy(state.busy);
       showError(error?.message || 'Falha ao carregar login Google.');
     }
   };
@@ -382,24 +575,27 @@ if (root) {
   };
 
   const loadCurrentSession = async () => {
-    if (!canUseGoogleLogin()) {
-      renderSessionSummary(null);
-      return;
-    }
     try {
       const payload = await fetchJson(sessionApiPath, { method: 'GET' });
       const sessionData = payload?.data || {};
-      if (sessionData?.authenticated) {
-        setText(ui.status, 'Sessao Google ativa neste navegador.');
-        renderSessionSummary(sessionData);
+      if (isAuthenticatedGoogleSession(sessionData)) {
+        renderAlreadyLoggedInState(sessionData);
+        return true;
+      }
+      if (canUseGoogleLogin()) {
+        setText(ui.status, 'Entre com Google para continuar');
       } else {
-        setText(ui.status, 'Use o login Google abaixo para entrar no OmniZap.');
-        renderSessionSummary(null);
+        state.authenticated = false;
+        state.sessionOwnerPhone = '';
       }
+      renderSessionSummary(null);
     } catch {
-      setText(ui.status, 'Nao foi possivel validar sua sessao atual.');
+      if (canUseGoogleLogin()) {
+        setText(ui.status, 'Nao foi possivel validar sua sessao');
+      }
       renderSessionSummary(null);
     }
+    return false;
   };
 
   const renderGoogleLoginGate = () => {
@@ -407,8 +603,12 @@ if (root) {
     if (ui.googleArea) {
       ui.googleArea.hidden = !allowed;
     }
+    renderGoogleLoginControls();
+    if (!allowed) {
+      renderAlreadyLoggedBanner({ visible: false });
+    }
     if (!allowed) {
-      setText(ui.status, 'Para fazer login, abra esta pagina pelo link do WhatsApp (envie "iniciar" no bot).');
+      setText(ui.status, 'Abra o link enviado no WhatsApp para continuar');
       setText(ui.googleState, '');
       if (ui.summary) ui.summary.hidden = true;
       renderSuccessActions(null);
@@ -418,6 +618,12 @@ if (root) {
   };
 
   const init = async () => {
+    renderAlreadyLoggedBanner({ visible: false });
+    if (ui.consentCheckbox) {
+      ui.consentCheckbox.checked = readConsentState();
+      ui.consentCheckbox.addEventListener('change', syncConsentState);
+    }
+    syncConsentState();
     renderHint();
     if (ui.whatsappCta && state.hint.phone) {
       ui.whatsappCta.hidden = true;
@@ -426,9 +632,13 @@ if (root) {
     renderSuccessActions(null);
     const allowGoogleLogin = renderGoogleLoginGate();
     await loadBotPhone();
-    if (!allowGoogleLogin) return;
+    if (!allowGoogleLogin) {
+      renderSessionSummary(null);
+      return;
+    }
+    const alreadyLogged = await loadCurrentSession();
+    if (alreadyLogged) return;
     await loadConfig();
-    await loadCurrentSession();
     await mountGoogleButton();
   };
 

package/public/js/apps/stickersAdminApp.js

@@ -188,7 +188,7 @@ function loadScript(src) {
 
 async function fetchJson(url, options = {}) {
   const response = await fetch(url, {
-    credentials: 'same-origin',
+    credentials: 'include',
     ...options,
   });
 
@@ -890,7 +890,7 @@ function renderSystemTab() {
             <h3 class="panel-title">Autenticacao admin</h3>
           </div>
           <div class="kv-grid">
-            <div class="kv-item"><span class="kv-key">Admin email</span><span class="kv-value break-all">${escapeHtml(state.adminStatus?.admin_email || '-')}</span></div>
+            <div class="kv-item"><span class="kv-key">Login provider</span><span class="kv-value">${escapeHtml(state.adminStatus?.session?.authenticated ? 'Google + senha' : 'Google')}</span></div>
             <div class="kv-item"><span class="kv-key">Google session</span><span class="kv-value">${authGoogle?.authenticated ? 'Ativa' : 'Inativa'}</span></div>
             <div class="kv-item"><span class="kv-key">Elegivel</span><span class="kv-value">${canUnlockAdmin() ? 'Sim' : 'Nao'}</span></div>
             <div class="kv-item"><span class="kv-key">Seu papel</span><span class="kv-value">${escapeHtml(getAdminRole() || 'owner')}</span></div>
@@ -1060,7 +1060,6 @@ function renderUnlockView() {
   const googleSession = google?.user ? google : { authenticated: false };
   const localGoogleCache = readLocalGoogleAuthCache();
   const hasLocalCache = Boolean(localGoogleCache?.user?.sub);
-  const adminEmail = String(adminStatus?.admin_email || 'ADM_EMAIL');
   const googleConfigEnabled = Boolean(state.googleAuthConfig?.enabled && state.googleAuthConfig?.clientId);
 
   return `
@@ -1087,7 +1086,7 @@ function renderUnlockView() {
                 <div class="account-box">
                   <p class="row-title">${escapeHtml(googleSession.user?.name || 'Conta Google')}</p>
                   <p class="row-sub break-all">${escapeHtml(googleSession.user?.email || '')}</p>
-                  <p class="row-meta">${canUnlockAdmin() ? 'Conta elegivel para admin.' : 'Conta Google logada nao bate com ADM_EMAIL.'}</p>
+                  <p class="row-meta">${canUnlockAdmin() ? 'Conta elegivel para admin.' : 'Conta Google logada nao esta elegivel para admin.'}</p>
                 </div>
               `
                 : `
@@ -1117,7 +1116,7 @@ function renderUnlockView() {
             <form data-form="admin-unlock" class="form-grid">
               <input class="search-input" type="password" name="password" placeholder="Digite a senha do painel" autocomplete="current-password" />
               <button class="primary-btn" type="submit" ${state.busy ? 'disabled' : ''}>${state.busy ? 'Validando...' : 'Desbloquear Painel'}</button>
-              ${!canUnlockAdmin() ? `<p class="hint warning">A senha so desbloqueia apos sessao Google elegivel (${escapeHtml(adminEmail)} ou moderador autorizado).</p>` : '<p class="hint">Sessao Google elegivel detectada. Informe a senha correspondente.</p>'}
+              ${!canUnlockAdmin() ? '<p class="hint warning">A senha so desbloqueia apos sessao Google elegivel (owner ou moderador autorizado).</p>' : '<p class="hint">Sessao Google elegivel detectada. Informe a senha correspondente.</p>'}
             </form>
           </article>
         </div>
@@ -1318,8 +1317,6 @@ async function unlockAdmin(password) {
     async () => {
       if (!canUnlockAdmin()) {
         const google = state.adminStatus?.google || {};
-        const adminEmail = String(state.adminStatus?.admin_email || '').trim();
-        const loggedEmail = String(google?.user?.email || '').trim();
         if (!google?.authenticated) {
           const local = readLocalGoogleAuthCache();
           if (local?.user?.email) {
@@ -1327,9 +1324,6 @@ async function unlockAdmin(password) {
           }
           throw new Error('Faca login Google no site com o email admin antes de digitar a senha.');
         }
-        if (loggedEmail && adminEmail && loggedEmail.toLowerCase() !== adminEmail.toLowerCase()) {
-          throw new Error(`Email logado (${loggedEmail}) e diferente do ADM_EMAIL (${adminEmail}).`);
-        }
         throw new Error('Conta Google atual nao esta elegivel para desbloquear o painel.');
       }
 

package/public/js/apps/stickersApp.js

@@ -2293,7 +2293,7 @@ function StickersApp() {
     let attempt = 0;
     while (true) {
       try {
-        const response = await fetch(url, { credentials: 'same-origin', ...opts });
+        const response = await fetch(url, { credentials: 'include', ...opts });
         const rawText = await response.text().catch(() => '');
         let payload = {};
         if (rawText) {