@kaikybrofc/omnizap-system 2.3.0 → 2.3.2

package/public/js/apps/loginApp.js

@@ -2,6 +2,12 @@
 
 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_STATUS_TEXT = 'Voce ja esta logado neste navegador.';
+const ALREADY_LOGGED_HINT_TEXT = 'Nao e necessario fazer login novamente. Escolha uma opcao abaixo.';
 
 const root = document.getElementById('login-app-root');
 
@@ -13,7 +19,14 @@ if (root) {
     googleArea: document.getElementById('google-login-area'),
     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 +34,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 +44,8 @@ if (root) {
     googleReady: false,
     busy: false,
     authenticated: false,
+    consentAccepted: false,
+    successAnimationTimer: 0,
     botPhone: '',
     sessionOwnerPhone: '',
     hint: readWhatsAppHintFromUrl(window.location.search),
@@ -52,13 +68,67 @@ 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 {}
+  };
+
+  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 formatPhone = (digits) => {
@@ -102,20 +172,67 @@ if (root) {
 
   const canUseGoogleLogin = () => Boolean(state.hint.phone);
 
-  const renderSuccessActions = (sessionData) => {
+  const renderSuccessActions = (sessionData, options = {}) => {
     if (!ui.successActions) return;
     const authenticated = Boolean(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;
+
+    setText(ui.status, ALREADY_LOGGED_STATUS_TEXT);
+    if (ownerPhone) {
+      setText(ui.hint, `Sessao ativa para +${formatPhone(ownerPhone)}.`);
+    } else {
+      setText(ui.hint, ALREADY_LOGGED_HINT_TEXT);
+    }
+
+    showError('');
+    showConsentError('');
+    renderAlreadyLoggedBanner({ visible: true, ownerPhone });
+    hideSuccessCelebration();
+    if (ui.googleArea) ui.googleArea.hidden = true;
+    if (ui.summary) ui.summary.hidden = true;
+    if (ui.whatsappCta) ui.whatsappCta.hidden = true;
+    renderSuccessActions(
+      { authenticated: true },
+      {
+        chatLabel: 'Abrir WPP no bot',
+        homeLabel: 'Voltar para tela inicial',
+        homeHref: '/',
+      },
+    );
+  };
+
   const renderWhatsAppCta = () => {
     if (!ui.whatsappCta || !ui.whatsappCtaLink) return;
 
@@ -146,19 +263,20 @@ 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 = '';
@@ -181,18 +299,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 +355,25 @@ 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('');
+    }
+    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.');
@@ -252,13 +394,15 @@ if (root) {
       if (!sessionData?.authenticated) {
         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);
     }
@@ -314,18 +458,18 @@ if (root) {
       const buttonWidth = Math.max(180, Math.min(320, measuredWidth || 320));
       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 +526,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);
+        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 = () => {
@@ -408,7 +555,10 @@ if (root) {
       ui.googleArea.hidden = !allowed;
     }
     if (!allowed) {
-      setText(ui.status, 'Para fazer login, abra esta pagina pelo link do WhatsApp (envie "iniciar" no bot).');
+      renderAlreadyLoggedBanner({ visible: false });
+    }
+    if (!allowed) {
+      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 +568,11 @@ if (root) {
   };
 
   const init = async () => {
+    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 +581,9 @@ if (root) {
     renderSuccessActions(null);
     const allowGoogleLogin = renderGoogleLoginGate();
     await loadBotPhone();
-    if (!allowGoogleLogin) return;
+    const alreadyLogged = await loadCurrentSession();
+    if (alreadyLogged || !allowGoogleLogin) return;
     await loadConfig();
-    await loadCurrentSession();
     await mountGoogleButton();
   };
 

package/public/js/apps/stickersAdminApp.js

@@ -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

@@ -1729,7 +1729,6 @@ function PackPage({ pack, relatedPacks, onBack, onOpenRelated, onLike, onDislike
   const packLockedByNsfw = isPackMarkedNsfw(pack) && !hasNsfwAccess;
   const cover = packLockedByNsfw ? NSFW_STICKER_PLACEHOLDER_URL : pack?.cover_url || items?.[0]?.asset_url || DEFAULT_STICKER_PLACEHOLDER_URL;
   const whatsappUrl = String(pack?.whatsapp?.url || '').trim();
-  const packApiPath = `/api/sticker-packs/${encodeURIComponent(String(pack?.pack_key || '').trim())}`;
   const engagement = getPackEngagement(pack);
   const hasReactionRequest = Boolean(reactionLoading);
   const [previewIndex, setPreviewIndex] = useState(-1);
@@ -1779,23 +1778,6 @@ function PackPage({ pack, relatedPacks, onBack, onOpenRelated, onLike, onDislike
           </div>
 
           ${pack?.description ? html`<p className="text-sm leading-6 text-slate-300">${pack.description}</p>` : null}
-
-          <section className="rounded-xl border border-cyan-500/25 bg-cyan-500/5 p-3">
-            <p className="text-[11px] uppercase tracking-wide text-cyan-200">Use este pack no seu bot</p>
-            <p className="mt-1 text-sm text-slate-200">Este pack faz parte do módulo de stickers da plataforma OmniZap. Você pode consumir por API e conectar ao seu fluxo de automação WhatsApp.</p>
-            <pre className="mt-2 overflow-auto rounded-lg border border-slate-800 bg-slate-950/60 p-2 text-[11px] text-slate-300">
-GET ${packApiPath}
-POST ${packApiPath}/open
-POST ${packApiPath}/like
-            </pre
-            >
-            <div className="mt-2 flex flex-wrap gap-2">
-              <a href="/api-docs/" className="inline-flex h-8 items-center rounded-lg border border-cyan-500/35 bg-cyan-500/10 px-3 text-[11px] font-semibold text-cyan-100 hover:bg-cyan-500/20"> Ver API e exemplos </a>
-              <a href="/" className="inline-flex h-8 items-center rounded-lg border border-slate-700 bg-slate-900/70 px-3 text-[11px] text-slate-200 hover:bg-slate-800"> Plataforma OmniZap </a>
-              <a href="/stickers/" className="inline-flex h-8 items-center rounded-lg border border-slate-700 bg-slate-900/70 px-3 text-[11px] text-slate-200 hover:bg-slate-800"> Voltar ao catálogo </a>
-            </div>
-          </section>
-
           ${tags.length
             ? html`
                 <div className="space-y-1">
@@ -3765,16 +3747,6 @@ function StickersApp() {
             : currentPackKey
               ? html` ${packLoading ? html`<${PackPageSkeleton} />` : html`<${PackPage} pack=${currentPack} relatedPacks=${relatedPacks} onBack=${goCatalog} onOpenRelated=${openPack} onLike=${handleLike} onDislike=${handleDislike} onTagClick=${openCatalogTagFilter} reactionLoading=${reactionLoading} reactionNotice=${reactionNotice} hasNsfwAccess=${hasNsfwAccess} onRequireLogin=${requestNsfwUnlock} />`} `
               : html`
-                  <section className="rounded-2xl border border-slate-800 bg-slate-900/80 p-3 sm:p-4">
-                    <p className="text-[11px] uppercase tracking-wide text-slate-400">Módulo de stickers da plataforma OmniZap</p>
-                    <h1 className="mt-1 text-lg sm:text-xl font-extrabold tracking-tight text-slate-100">Catálogo de stickers integrável via API</h1>
-                    <p className="mt-1 text-sm text-slate-300">Os stickers são uma feature do OmniZap para bots e automação WhatsApp. Explore packs públicos e integre no seu sistema com endpoints documentados.</p>
-                    <div className="mt-2 flex flex-wrap gap-2">
-                      <a href="/api-docs/" className="inline-flex h-8 items-center rounded-lg border border-cyan-500/35 bg-cyan-500/10 px-3 text-[11px] font-semibold text-cyan-100 hover:bg-cyan-500/20"> Área de Desenvolvedor </a>
-                      <a href="/" className="inline-flex h-8 items-center rounded-lg border border-slate-700 bg-slate-900/70 px-3 text-[11px] text-slate-200 hover:bg-slate-800"> Página principal OmniZap </a>
-                    </div>
-                  </section>
-
                   <div className="lg:grid lg:grid-cols-[220px_minmax(0,1fr)] lg:gap-4">
                     <aside className="hidden lg:block">
                       <div className="sticky top-[72px] space-y-2.5 rounded-2xl border border-slate-800 bg-slate-900/80 p-2.5">