https://yannick.services/apps/contact-form/Recent content in Formulaire de contact on yannick.servicesHugo -- gohugo.iofrcontact@yannick.services (Yannick)contact@yannick.services (Yannick)https://yannick.services/apps/contact-form/creer/Mon, 01 Jan 0001 00:00:00 +0000contact@yannick.services (Yannick)https://yannick.services/apps/contact-form/creer/<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'; const method = options.method || 'GET'; const response = await fetch(url, { method, headers: headers, body: options.body || undefined, }); if (response && response.status >= 500 && typeof Sentry !== 'undefined') { let errorDetail = ''; try { const b = await response.clone().json(); errorDetail = b.error || JSON.stringify(b); } catch {} Sentry.captureMessage(`API ${response.status}: ${method} ${url} — ${errorDetail}`, { level: 'error', tags: { api_status: response.status, api_method: method }, extra: { url, method, status: response.status, errorDetail }, }); } return response; }, 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> .cfc-container { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } .cfc-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 1.5rem; } .dark .cfc-card { background: #1f2937; border-color: #374151; } .cfc-card-title { font-size: 0.9375rem; font-weight: 600; color: #111827; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .dark .cfc-card-title { color: #f3f4f6; } .cfc-card-title i { color: #6b7280; font-size: 0.875rem; } .dark .cfc-card-title i { color: #9ca3af; } .cfc-field { margin-bottom: 1.25rem; } .cfc-field:last-child { margin-bottom: 0; } .cfc-label { display: block; font-size: 0.75rem; font-weight: 500; color: #6b7280; margin-bottom: 0.375rem; } .dark .cfc-label { color: #9ca3af; } .cfc-input { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.875rem; background: #fff; color: #111827; outline: none; transition: border-color 0.15s; } .cfc-input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.1); } .dark .cfc-input { background: #111827; border-color: #4b5563; color: #f9fafb; } .dark .cfc-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); } .cfc-input-error { border-color: #dc2626 !important; } .cfc-error-text { font-size: 0.75rem; color: #dc2626; margin-top: 0.25rem; } .dark .cfc-error-text { color: #fca5a5; } .cfc-hint { font-size: 0.6875rem; color: #9ca3af; margin-top: 0.25rem; } .dark .cfc-hint { color: #6b7280; } </style> <style> .cfc-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; text-decoration: none; transition: background 0.15s, opacity 0.15s; min-height: 2.5rem; } .cfc-btn:disabled { opacity: 0.5; cursor: not-allowed; } .cfc-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .cfc-btn-primary { background: #2563eb; color: #fff; } .cfc-btn-primary:hover:not(:disabled) { background: #1d4ed8; } .cfc-btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; } .cfc-btn-secondary:hover:not(:disabled) { background: #e5e7eb; } .dark .cfc-btn-secondary { background: #374151; color: #d1d5db; border-color: #4b5563; } .dark .cfc-btn-secondary:hover:not(:disabled) { background: #4b5563; } .cfc-btn-danger { background: transparent; color: #dc2626; border: none; padding: 0.375rem; border-radius: 0.375rem; } .cfc-btn-danger:hover { background: rgba(220,38,38,0.08); } .dark .cfc-btn-danger { color: #fca5a5; } .dark .cfc-btn-danger:hover { background: rgba(220,38,38,0.15); } .cfc-btn-add { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; border-radius: 0.375rem; font-size: 0.75rem; font-weight: 500; cursor: pointer; border: 1px dashed #d1d5db; background: transparent; color: #6b7280; transition: border-color 0.15s; } .cfc-btn-add:hover { border-color: #2563eb; color: #2563eb; } .dark .cfc-btn-add { border-color: #4b5563; color: #9ca3af; } .dark .cfc-btn-add:hover { border-color: #3b82f6; color: #3b82f6; } .cfc-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; } .cfc-row:last-child { margin-bottom: 0; } .cfc-row .cfc-input { flex: 1; } .cfc-checkbox-group { display: flex; flex-wrap: wrap; gap: 0.75rem; } .cfc-checkbox-label { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: #374151; cursor: pointer; } .dark .cfc-checkbox-label { color: #d1d5db; } .cfc-checkbox-label input[type="checkbox"] { accent-color: #2563eb; width: 1rem; height: 1rem; } </style> <style> .cfc-color-row { display: flex; align-items: center; gap: 0.5rem; } .cfc-color-input { width: 2.5rem; height: 2.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; padding: 0.125rem; cursor: pointer; background: #fff; } .dark .cfc-color-input { border-color: #4b5563; background: #111827; } .cfc-range-row { display: flex; align-items: center; gap: 0.75rem; } .cfc-range { flex: 1; accent-color: #2563eb; } .cfc-range-value { font-size: 0.8125rem; font-weight: 500; color: #374151; min-width: 2rem; text-align: center; } .dark .cfc-range-value { color: #d1d5db; } .cfc-toggle { position: relative; display: inline-flex; height: 1.25rem; width: 2.25rem; align-items: center; border-radius: 9999px; background: rgba(31,41,55,0.2); border: none; cursor: pointer; transition: background 0.2s; } .cfc-toggle:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .cfc-toggle-on { background: #2563eb; } .dark .cfc-toggle { background: rgba(255,255,255,0.2); } .dark .cfc-toggle-on { background: #3b82f6; } .cfc-toggle-dot { display: block; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15); transform: translateX(3px); transition: transform 0.2s; } .cfc-toggle-dot-on { transform: translateX(16px); } .cfc-toggle-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: #374151; cursor: pointer; } .dark .cfc-toggle-label { color: #d1d5db; } .cfc-select { padding: 0.625rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.875rem; background: #fff; color: #111827; outline: none; transition: border-color 0.15s; } .cfc-select:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.1); } .dark .cfc-select { background: #111827; border-color: #4b5563; color: #f9fafb; } .cfc-spinner { width: 1.25rem; height: 1.25rem; border: 2px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: cfc-spin 0.6s linear infinite; display: inline-block; } @keyframes cfc-spin { to { transform: rotate(360deg); } } .cfc-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 20vh; gap: 1rem; } .cfc-success { padding: 1.25rem; border-radius: 0.75rem; background: #dcfce7; border: 1px solid #86efac; } .dark .cfc-success { background: #14532d; border-color: #166534; } .cfc-code-block { position: relative; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.75rem; margin-top: 0.75rem; font-family: monospace; font-size: 0.75rem; color: #374151; word-break: break-all; white-space: pre-wrap; } .dark .cfc-code-block { background: #111827; border-color: #374151; color: #d1d5db; } </style> <div x-data="contactFormsCreate()" x-init="init()" x-cloak> <template x-if="loading"> <div class="cfc-loading"> <div class="cfc-spinner" style="width:1.5rem;height:1.5rem;"></div> <p class="text-sm text-neutral-500">Chargement...</p>https://yannick.services/apps/contact-form/detail/Mon, 01 Jan 0001 00:00:00 +0000contact@yannick.services (Yannick)https://yannick.services/apps/contact-form/detail/<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'; const method = options.method || 'GET'; const response = await fetch(url, { method, headers: headers, body: options.body || undefined, }); if (response && response.status >= 500 && typeof Sentry !== 'undefined') { let errorDetail = ''; try { const b = await response.clone().json(); errorDetail = b.error || JSON.stringify(b); } catch {} Sentry.captureMessage(`API ${response.status}: ${method} ${url} — ${errorDetail}`, { level: 'error', tags: { api_status: response.status, api_method: method }, extra: { url, method, status: response.status, errorDetail }, }); } return response; }, 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> .cfd-container { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } .cfd-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 1.25rem; } .dark .cfd-card { background: #1f2937; border-color: #374151; } .cfd-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .cfd-card-title { font-size: 0.875rem; font-weight: 600; color: #111827; display: flex; align-items: center; gap: 0.5rem; } .dark .cfd-card-title { color: #f9fafb; } .cfd-card-title i { color: #6b7280; font-size: 0.8125rem; } .dark .cfd-card-title i { color: #9ca3af; } .cfd-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; text-decoration: none; transition: background 0.15s; } .cfd-btn:disabled { opacity: 0.5; cursor: not-allowed; } .cfd-btn-primary { background: #2563eb; color: #fff; } .cfd-btn-primary:hover:not(:disabled) { background: #1d4ed8; } .cfd-btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; } .dark .cfd-btn-secondary { background: #374151; color: #d1d5db; border-color: #4b5563; } .cfd-btn-secondary:hover:not(:disabled) { background: #e5e7eb; } .dark .cfd-btn-secondary:hover:not(:disabled) { background: #4b5563; } .cfd-btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; } .cfd-label { display: block; font-size: 0.75rem; font-weight: 500; color: #6b7280; margin-bottom: 0.25rem; } .dark .cfd-label { color: #9ca3af; } .cfd-value { font-size: 0.875rem; color: #111827; } .dark .cfd-value { color: #f9fafb; } .cfd-input { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.875rem; background: #fff; color: #111827; outline: none; } .cfd-input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.1); } .dark .cfd-input { background: #111827; border-color: #4b5563; color: #f9fafb; } .cfd-textarea { resize: vertical; min-height: 5rem; } .cfd-snippet-block { position: relative; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; font-family: ui-monospace, monospace; font-size: 0.75rem; line-height: 1.6; word-break: break-all; color: #374151; } .dark .cfd-snippet-block { background: #111827; border-color: #4b5563; color: #d1d5db; } .cfd-snippet-copy { position: absolute; top: 0.5rem; right: 0.5rem; } .cfd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 640px) { .cfd-grid-2 { grid-template-columns: 1fr; } } .cfd-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } @media (max-width: 640px) { .cfd-grid-4 { grid-template-columns: 1fr 1fr; } } .cfd-stat-card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.75rem; text-align: center; } .dark .cfd-stat-card { background: #111827; border-color: #4b5563; } .cfd-stat-value { font-size: 1.25rem; font-weight: 700; color: #111827; } .dark .cfd-stat-value { color: #f9fafb; } .cfd-stat-label { font-size: 0.6875rem; color: #6b7280; margin-top: 0.125rem; } .dark .cfd-stat-label { color: #9ca3af; } .cfd-submission { border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 0.75rem; } .dark .cfd-submission { border-color: #374151; } .cfd-submission:last-child { margin-bottom: 0; } .cfd-submission-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; } .cfd-submission-name { font-size: 0.875rem; font-weight: 600; color: #111827; } .dark .cfd-submission-name { color: #f9fafb; } .cfd-submission-email { font-size: 0.8125rem; color: #2563eb; text-decoration: none; } .dark .cfd-submission-email { color: #60a5fa; } .cfd-submission-email:hover { text-decoration: underline; } .cfd-submission-date { font-size: 0.6875rem; color: #9ca3af; } .cfd-submission-message { font-size: 0.8125rem; color: #374151; margin-top: 0.375rem; line-height: 1.5; } .dark .cfd-submission-message { color: #d1d5db; } .cfd-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 500; background: #dbeafe; color: #1e40af; } .dark .cfd-badge { background: #1e3a5f; color: #93c5fd; } .cfd-back-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: #6b7280; text-decoration: none; } .cfd-back-link:hover { color: #374151; } .dark .cfd-back-link { color: #9ca3af; } .dark .cfd-back-link:hover { color: #d1d5db; } .cfd-spinner { width: 1.5rem; height: 1.5rem; border: 2px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: cfd-spin 0.6s linear infinite; } @keyframes cfd-spin { to { transform: rotate(360deg); } } .cfd-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 20vh; gap: 1rem; } .cfd-field-row { margin-bottom: 1rem; } .cfd-field-row:last-child { margin-bottom: 0; } .cfd-tags-list { display: flex; flex-wrap: wrap; gap: 0.375rem; } .cfd-tag { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; background: #e0e7ff; color: #3730a3; } .dark .cfd-tag { background: #312e81; color: #a5b4fc; } .cfd-color-swatch { display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; border: 1px solid #d1d5db; vertical-align: middle; margin-right: 0.375rem; } .dark .cfd-color-swatch { border-color: #4b5563; } .cfd-edit-actions { display: flex; gap: 0.5rem; margin-top: 1rem; } .cfd-empty { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2rem 1rem; text-align: center; } .cfd-empty-icon { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: #f3f4f6; color: #9ca3af; } .dark .cfd-empty-icon { background: #374151; color: #6b7280; } [x-cloak] { display: none !important; } </style> <div x-data="contactFormDetail()" x-init="init()" x-cloak> <template x-if="loading"> <div class="cfd-loading"> <div class="cfd-spinner"></div> <p class="text-sm text-neutral-500">Chargement...</p>https://yannick.services/apps/contact-form/app/Mon, 01 Jan 0001 00:00:00 +0000contact@yannick.services (Yannick)https://yannick.services/apps/contact-form/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'; const method = options.method || 'GET'; const response = await fetch(url, { method, headers: headers, body: options.body || undefined, }); if (response && response.status >= 500 && typeof Sentry !== 'undefined') { let errorDetail = ''; try { const b = await response.clone().json(); errorDetail = b.error || JSON.stringify(b); } catch {} Sentry.captureMessage(`API ${response.status}: ${method} ${url} — ${errorDetail}`, { level: 'error', tags: { api_status: response.status, api_method: method }, extra: { url, method, status: response.status, errorDetail }, }); } return response; }, 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> .cf-container { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } .cf-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 1.5rem; } .dark .cf-card { background: #1f2937; border-color: #374151; } .cf-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; } .cf-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; text-decoration: none; transition: background 0.15s, opacity 0.15s; } .cf-btn:disabled { opacity: 0.5; cursor: not-allowed; } .cf-btn-primary { background: #2563eb; color: #fff; } .cf-btn-primary:hover:not(:disabled) { background: #1d4ed8; } .cf-btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; } .cf-btn-secondary:hover:not(:disabled) { background: #e5e7eb; } .dark .cf-btn-secondary { background: #374151; color: #d1d5db; border-color: #4b5563; } .dark .cf-btn-secondary:hover:not(:disabled) { background: #4b5563; } .cf-btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; } .cf-btn-ghost-danger { background: transparent; color: #dc2626; border: none; } .cf-btn-ghost-danger:hover:not(:disabled) { background: rgba(220,38,38,0.07); } .dark .cf-btn-ghost-danger { color: #fca5a5; } .dark .cf-btn-ghost-danger:hover:not(:disabled) { background: rgba(220,38,38,0.15); } .cf-form-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } @media (min-width: 540px) { .cf-form-grid { grid-template-columns: repeat(2, 1fr); } } .cf-form-item { padding: 1.25rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #fafafa; display: flex; flex-direction: column; gap: 0.5rem; } .dark .cf-form-item { background: #111827; border-color: #374151; } .cf-form-label { font-size: 0.875rem; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dark .cf-form-label { color: #f9fafb; } .cf-form-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .cf-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 500; } .cf-badge-info { background: #dbeafe; color: #1e40af; } .dark .cf-badge-info { background: #1e3a5f; color: #93c5fd; } .cf-form-date { font-size: 0.75rem; color: #6b7280; } .dark .cf-form-date { color: #9ca3af; } .cf-form-actions { display: flex; align-items: center; gap: 0.25rem; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid #f3f4f6; } .dark .cf-form-actions { border-top-color: #374151; } .cf-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; border: 1px solid #e5e7eb; background: #fff; color: #6b7280; cursor: pointer; transition: background 0.15s, color 0.15s; font-size: 0.75rem; text-decoration: none; } .cf-icon-btn:hover { background: #f3f4f6; color: #111827; } .dark .cf-icon-btn { background: #1f2937; border-color: #374151; color: #9ca3af; } .dark .cf-icon-btn:hover { background: #374151; color: #f9fafb; } .cf-icon-btn-danger { color: #dc2626; } .cf-icon-btn-danger:hover { background: rgba(220,38,38,0.07); color: #991b1b; } .dark .cf-icon-btn-danger { color: #fca5a5; } .dark .cf-icon-btn-danger:hover { background: rgba(220,38,38,0.15); color: #fca5a5; } .cf-quota-bar { display: flex; align-items: center; gap: 0.75rem; } .cf-quota-track { flex: 1; height: 0.375rem; border-radius: 9999px; background: #e5e7eb; overflow: hidden; } .dark .cf-quota-track { background: #374151; } .cf-quota-fill { height: 100%; border-radius: 9999px; background: #2563eb; transition: width 0.3s; } .cf-quota-text { font-size: 0.75rem; color: #6b7280; white-space: nowrap; } .dark .cf-quota-text { color: #9ca3af; } .cf-plan-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; background: #dbeafe; color: #1e40af; text-transform: capitalize; } .dark .cf-plan-badge { background: #1e3a5f; color: #93c5fd; } .cf-empty { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2.5rem 1rem; text-align: center; } .cf-empty-icon { width: 3rem; height: 3rem; border-radius: 50%; background: #f3f4f6; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 1.25rem; } .dark .cf-empty-icon { background: #374151; color: #6b7280; } .cf-spinner { width: 1.5rem; height: 1.5rem; border: 2px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: cf-spin 0.6s linear infinite; } @keyframes cf-spin { to { transform: rotate(360deg); } } .cf-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 20vh; gap: 1rem; } .cf-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.25); } .cf-modal-panel { position: relative; min-width: 20rem; max-width: 28rem; border-radius: 0.75rem; background: #fff; padding: 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,0.15); } .dark .cf-modal-panel { background: #1f2937; } .cf-modal-title { font-size: 1rem; font-weight: 600; color: #111827; margin: 0; } .dark .cf-modal-title { color: #f9fafb; } .cf-modal-message { margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280; } .dark .cf-modal-message { color: #9ca3af; } .cf-modal-footer { margin-top: 1.5rem; display: flex; justify-content: flex-end; gap: 0.5rem; } .cf-modal-btn-cancel { padding: 0.5rem 1rem; border-radius: 0.5rem; border: none; background: transparent; color: #374151; font-size: 0.875rem; font-weight: 500; cursor: pointer; } .cf-modal-btn-cancel:hover { background: rgba(31,41,55,0.1); } .dark .cf-modal-btn-cancel { color: #d1d5db; } .dark .cf-modal-btn-cancel:hover { background: rgba(255,255,255,0.1); } .cf-modal-btn-confirm { padding: 0.5rem 1rem; border-radius: 0.5rem; border: none; background: #dc2626; color: #fff; font-size: 0.875rem; font-weight: 500; cursor: pointer; } .cf-modal-btn-confirm:hover { background: #b91c1c; } [x-cloak] { display: none !important; } </style> <div x-data="contactFormsApp()" x-init="init()" x-cloak> <template x-if="loading"> <div class="cf-loading"> <div class="cf-spinner"></div> <p class="text-sm text-neutral-500">Chargement...</p>