https://yannick.services/apps/seo/Recent content in SEO Agents — Analyses SEO intelligentes pour PME on yannick.servicesHugo -- gohugo.iofrcontact@yannick.services (Yannick)contact@yannick.services (Yannick)https://yannick.services/apps/seo/app/Mon, 01 Jan 0001 00:00:00 +0000contact@yannick.services (Yannick)https://yannick.services/apps/seo/app/<script> document.addEventListener('alpine:init', () => { if (Alpine.store('auth')) return; const COGNITO_DOMAIN = 'https:\/\/auth.yannick.services'; const COGNITO_CLIENT_ID = '76sdci6g48222d6olhqrq88529'; const COGNITO_REDIRECT_URI = 'https:\/\/yannick.services\/compte\/callback\/'; const COGNITO_TOKEN_URL = `${COGNITO_DOMAIN}/oauth2/token`; Alpine.store('auth', { accessToken: null, idToken: null, refreshToken: null, init() { this.accessToken = localStorage.getItem('ys_access_token'); this.idToken = localStorage.getItem('ys_id_token'); this.refreshToken = localStorage.getItem('ys_refresh_token'); }, isAuthenticated() { if (!this.accessToken) return false; if (this.isTokenExpired(this.accessToken)) { if (this.refreshToken) return true; return false; } return true; }, isTokenExpired(token) { try { const payload = JSON.parse(atob(token.split('.')[1])); return payload.exp * 1000 < Date.now(); } catch (e) { return true; } }, async refreshIfNeeded() { if (!this.isTokenExpired(this.accessToken)) return true; if (!this.refreshToken) return false; try { const resp = await fetch(COGNITO_TOKEN_URL, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body: new URLSearchParams({ grant_type: 'refresh_token', client_id: COGNITO_CLIENT_ID, refresh_token: this.refreshToken, }), }); if (!resp.ok) throw new Error('refresh_failed'); const data = await resp.json(); this.setTokens(data.access_token, data.id_token, this.refreshToken); return true; } catch (e) { this.logout(); return false; } }, setTokens(access, id, refresh) { this.accessToken = access; this.idToken = id; this.refreshToken = refresh; localStorage.setItem('ys_access_token', access); localStorage.setItem('ys_id_token', id); localStorage.setItem('ys_refresh_token', refresh); }, logout() { this.accessToken = null; this.idToken = null; this.refreshToken = null; localStorage.removeItem('ys_access_token'); localStorage.removeItem('ys_id_token'); localStorage.removeItem('ys_refresh_token'); var logoutUrl = COGNITO_DOMAIN + '/logout?client_id=' + COGNITO_CLIENT_ID + '&logout_uri=' + encodeURIComponent('https://yannick.services/'); window.location.href = logoutUrl; }, async apiFetch(url, options) { if (!options) options = {}; const ok = await this.refreshIfNeeded(); if (!ok) return null; const headers = options.headers || {}; headers['Authorization'] = 'Bearer ' + this.idToken; headers['Content-Type'] = 'application/json'; return fetch(url, { method: options.method || 'GET', headers: headers, body: options.body || undefined, }); }, generateCodeVerifier() { const array = new Uint8Array(32); crypto.getRandomValues(array); return btoa(String.fromCharCode.apply(null, array)) .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''); }, async generateCodeChallenge(verifier) { const encoder = new TextEncoder(); const data = encoder.encode(verifier); const digest = await crypto.subtle.digest('SHA-256', data); return btoa(String.fromCharCode.apply(null, new Uint8Array(digest))) .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''); }, async redirectToLogin() { localStorage.setItem('ys_return_url', window.location.pathname + window.location.search); const verifier = this.generateCodeVerifier(); localStorage.setItem('ys_code_verifier', verifier); const challenge = await this.generateCodeChallenge(verifier); const params = new URLSearchParams({ response_type: 'code', client_id: COGNITO_CLIENT_ID, redirect_uri: COGNITO_REDIRECT_URI, scope: 'openid email', code_challenge: challenge, code_challenge_method: 'S256', lang: 'fr', }); window.location.href = COGNITO_DOMAIN + '/oauth2/authorize?' + params.toString(); }, }); }); </script> <style> .seoa-container { max-width: 780px; margin: 0 auto; } .seoa-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.75rem; } .seoa-credits { font-size: 0.875rem; color: #6b7280; display: flex; align-items: center; gap: 0.5rem; } .seoa-credits-value { font-weight: 700; color: #2563eb; font-size: 1.125rem; } .seoa-buy-btn { padding: 0.5rem 1rem; background: #2563eb; color: #fff; border: none; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 600; cursor: pointer; min-height: 36px; } .seoa-buy-btn:hover { background: #1d4ed8; } .seoa-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid #e5e7eb; margin-bottom: 1.5rem; overflow-x: auto; } .dark .seoa-tabs { border-color: #374151; } .seoa-tab { padding: 0.625rem 1rem; font-size: 0.8125rem; font-weight: 500; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; } .seoa-tab:hover { color: #374151; } .dark .seoa-tab:hover { color: #d1d5db; } .seoa-tab.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; } .seoa-panel { display: none; } .seoa-panel.active { display: block; } .seoa-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 1.5rem; margin-bottom: 1.25rem; } .dark .seoa-card { background: #1f2937; border-color: #374151; } .seoa-form { display: flex; flex-direction: column; gap: 1rem; } .seoa-form-label { font-size: 0.8125rem; font-weight: 500; color: #374151; } .dark .seoa-form-label { color: #d1d5db; } .seoa-form-input { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.9375rem; color: #111827; background: #fff; } .dark .seoa-form-input { background: #111827; border-color: #4b5563; color: #f3f4f6; } .seoa-form-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); } .seoa-form-hint { font-size: 0.75rem; color: #9ca3af; } .seoa-form-submit { padding: 0.75rem 1.5rem; background: #2563eb; color: #fff; border: none; border-radius: 0.5rem; font-weight: 600; font-size: 0.9375rem; cursor: pointer; min-height: 44px; } .seoa-form-submit:hover { background: #1d4ed8; } .seoa-form-submit:disabled { opacity: 0.5; cursor: not-allowed; } .seoa-result { margin-top: 1.5rem; } .seoa-result-loading { text-align: center; padding: 2rem; color: #6b7280; } .seoa-history-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid #f3f4f6; } .dark .seoa-history-item { border-color: #374151; } .seoa-history-item:last-child { border: none; } .seoa-history-type { font-size: 0.75rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 9999px; background: #eff6ff; color: #2563eb; } .seoa-history-domain { font-size: 0.875rem; font-weight: 500; color: #111827; } .dark .seoa-history-domain { color: #f3f4f6; } .seoa-history-date { font-size: 0.75rem; color: #9ca3af; } .seoa-history-btn { font-size: 0.75rem; color: #2563eb; cursor: pointer; text-decoration: underline; } .seoa-error { padding: 0.75rem 1rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 0.5rem; color: #dc2626; font-size: 0.875rem; margin-top: 1rem; } .dark .seoa-error { background: rgba(220,38,38,0.1); border-color: rgba(220,38,38,0.3); } .seoa-login { text-align: center; padding: 3rem 1rem; } .seoa-login-btn { display: inline-block; padding: 0.75rem 1.5rem; background: #2563eb; color: #fff; border-radius: 0.5rem; font-weight: 600; text-decoration: none; } </style> <div x-data="seoApp()" x-cloak class="seoa-container"> <template x-if="!$store.auth.loading && !$store.auth.authenticated"> <div class="seoa-login"> <p style="font-size:1rem;color:#6b7280;margin-bottom:1rem;">Connectez-vous pour accéder aux agents SEO.</p>