https://yannick.services/apps/validation-email-telephone/Recent content in Validation Email & Téléphone on yannick.servicesHugo -- gohugo.iofrcontact@yannick.services (Yannick)contact@yannick.services (Yannick)https://yannick.services/apps/validation-email-telephone/app/Mon, 01 Jan 0001 00:00:00 +0000contact@yannick.services (Yannick)https://yannick.services/apps/validation-email-telephone/app/<script> document.addEventListener('alpine:init', () => { 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> .ys-navbar { display: flex; align-items: center; justify-content: center; gap: 0.25rem; max-width: 720px; margin: 0 auto 1.5rem; padding: 0.5rem 0.75rem; flex-wrap: wrap; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .dark .ys-navbar { background: #1f2937; border-color: #374151; } .ys-navbar-btn { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: none; background: transparent; color: #374151; font-size: 0.8125rem; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 0.1s; } .ys-navbar-btn:hover { background: rgba(31,41,55,0.07); } .dark .ys-navbar-btn { color: #d1d5db; } .dark .ys-navbar-btn:hover { background: rgba(255,255,255,0.08); } .ys-navbar-btn i { font-size: 0.875rem; color: #6b7280; } .dark .ys-navbar-btn i { color: #9ca3af; } .ys-navbar-btn svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; } .ys-navbar-btn-label { display: none; } @media (min-width: 480px) { .ys-navbar-btn-label { display: inline; } } .ys-navbar-sep { border: 0; background: rgba(31,41,55,0.12); align-self: stretch; width: 1px; margin: 0.375rem 0.125rem; display: none; } @media (min-width: 480px) { .ys-navbar-sep { display: block; } } .dark .ys-navbar-sep { background: rgba(255,255,255,0.12); } .ys-navbar-panel { position: absolute; left: 0; min-width: 13rem; border-radius: 0.5rem; border: 1px solid #e5e7eb; background: #fff; padding: 0.375rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-top: 0.5rem; z-index: 50; outline: none; } .dark .ys-navbar-panel { background: #1f2937; border-color: #374151; } .ys-navbar-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.4375rem 0.5rem; border-radius: 0.375rem; border: none; background: transparent; color: #374151; font-size: 0.8125rem; text-align: left; cursor: pointer; text-decoration: none; transition: background 0.1s; } .ys-navbar-item:hover, .ys-navbar-item:focus-visible { background: #f3f4f6; } .dark .ys-navbar-item { color: #d1d5db; } .dark .ys-navbar-item:hover, .dark .ys-navbar-item:focus-visible { background: #374151; } .ys-navbar-item i { width: 1rem; text-align: center; font-size: 0.8125rem; color: #9ca3af; } .ys-navbar-panel-divider { border: 0; border-top: 1px solid #e5e7eb; margin: 0.25rem 0; } .dark .ys-navbar-panel-divider { border-top-color: #374151; } .ys-navbar-item-disabled { opacity: 0.5; pointer-events: none; } .ys-navbar-item-danger { color: #dc2626; } .ys-navbar-item-danger:hover { background: rgba(220,38,38,0.07); } .dark .ys-navbar-item-danger { color: #fca5a5; } .dark .ys-navbar-item-danger:hover { background: rgba(220,38,38,0.15); } .ys-navbar-item-danger i { color: #dc2626; } .dark .ys-navbar-item-danger i { color: #fca5a5; } </style> <div x-popover:group class="ys-navbar"> <div x-data x-popover class="relative"> <button x-popover:button type="button" class="ys-navbar-btn"> <i class="fa-solid fa-envelope-circle-check"></i> <span class="ys-navbar-btn-label">Validation</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg> </button> <div x-popover:panel x-transition.origin.top.left class="ys-navbar-panel" x-cloak> <a href="https://yannick.services/apps/validation-email-telephone/app/" class="ys-navbar-item"><i class="fa-solid fa-upload"></i> Nouvelle validation</a> <a href="https://yannick.services/apps/validation-email-telephone/" class="ys-navbar-item"><i class="fa-solid fa-cart-shopping"></i> Acheter des crédits</a> </div> </div> <div role="none" class="ys-navbar-sep"></div> <div x-data x-popover class="relative"> <button x-popover:button type="button" class="ys-navbar-btn"> <i class="fa-solid fa-grid-2"></i> <span class="ys-navbar-btn-label">Applications</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg> </button> <div x-popover:panel x-transition.origin.top.left class="ys-navbar-panel" x-cloak> <a href="https://yannick.services/apps/url-courte/app/" class="ys-navbar-item"><i class="fa-solid fa-link"></i> Liens courts</a> <a href="https://yannick.services/apps/validation-email-telephone/app/" class="ys-navbar-item"><i class="fa-solid fa-envelope-circle-check"></i> Validation Email</a> <hr class="ys-navbar-panel-divider"> <a href="https://yannick.services/apps/" class="ys-navbar-item"><i class="fa-solid fa-grid-2"></i> Toutes les applications</a> </div> </div> <div role="none" class="ys-navbar-sep"></div> <div x-data x-popover class="relative"> <button x-popover:button type="button" class="ys-navbar-btn"> <i class="fa-solid fa-clipboard-check"></i> <span class="ys-navbar-btn-label">Diagnostics</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg> </button> <div x-popover:panel x-transition.origin.top.left class="ys-navbar-panel" x-cloak> <a href="https://yannick.services/diagnostics/diagnostic-maturite-numerique/" class="ys-navbar-item"><i class="fa-solid fa-chart-radar"></i> Maturité numérique</a> <hr class="ys-navbar-panel-divider"> <a href="https://yannick.services/compte/" class="ys-navbar-item"><i class="fa-solid fa-clock-rotate-left"></i> Mes résultats</a> </div> </div> <div role="none" class="ys-navbar-sep"></div> <div x-data x-popover class="relative"> <button x-popover:button type="button" class="ys-navbar-btn"> <i class="fa-solid fa-user"></i> <span class="ys-navbar-btn-label">Compte</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg> </button> <div x-popover:panel x-transition.origin.top.left class="ys-navbar-panel" x-cloak> <a href="https://yannick.services/compte/" class="ys-navbar-item"><i class="fa-solid fa-user"></i> Mon profil</a> <hr class="ys-navbar-panel-divider"> <button type="button" @click="Alpine.store('auth').logout()" class="ys-navbar-item ys-navbar-item-danger"><i class="fa-solid fa-right-from-bracket"></i> Déconnexion</button> </div> </div> </div> <style> .vea-container { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } .vea-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 1.25rem; } .dark .vea-card { background: #1f2937; border-color: #374151; } .vea-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .vea-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; } .vea-btn:disabled { opacity: 0.5; cursor: not-allowed; } .vea-btn-primary { background: #2563eb; color: #fff; } .vea-btn-primary:hover:not(:disabled) { background: #1d4ed8; } .vea-btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; } .vea-btn-secondary:hover:not(:disabled) { background: #e5e7eb; } .dark .vea-btn-secondary { background: #374151; color: #d1d5db; border-color: #4b5563; } .vea-btn-danger { background: transparent; color: #dc2626; border: 1px solid #fecaca; } .vea-btn-danger:hover:not(:disabled) { background: #fef2f2; } .dark .vea-btn-danger { border-color: #7f1d1d; color: #fca5a5; } .dark .vea-btn-danger:hover:not(:disabled) { background: #450a0a; } .vea-btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; } </style> <style> .vea-credits-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 1.25rem; border-radius: 0.75rem; background: #f0fdf4; border: 1px solid #bbf7d0; } .dark .vea-credits-bar { background: #052e16; border-color: #166534; } .vea-credits-value { display: flex; align-items: center; gap: 0.5rem; } .vea-upload-zone { border: 2px dashed #d1d5db; border-radius: 0.75rem; padding: 2rem; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .vea-upload-zone:hover, .vea-upload-zone.vea-dragover { border-color: #2563eb; background: #eff6ff; } .dark .vea-upload-zone { border-color: #4b5563; } .dark .vea-upload-zone:hover, .dark .vea-upload-zone.vea-dragover { border-color: #3b82f6; background: #1e3a5f; } .vea-upload-icon { font-size: 2rem; color: #9ca3af; margin-bottom: 0.5rem; } .vea-radio-group { display: flex; gap: 0.75rem; flex-wrap: wrap; } .vea-radio-label { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; cursor: pointer; font-size: 0.875rem; transition: border-color 0.15s, background 0.15s; } .vea-radio-label:hover { border-color: #2563eb; } .vea-radio-label.vea-radio-active { border-color: #2563eb; background: #eff6ff; } .dark .vea-radio-label { border-color: #4b5563; color: #d1d5db; } .dark .vea-radio-label:hover { border-color: #3b82f6; } .dark .vea-radio-label.vea-radio-active { border-color: #3b82f6; background: #1e3a5f; } .vea-radio-label input { margin: 0; } </style> <style> .vea-preview-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; overflow-x: auto; display: block; } .vea-preview-table th, .vea-preview-table td { padding: 0.375rem 0.5rem; border: 1px solid #e5e7eb; white-space: nowrap; text-align: left; } .dark .vea-preview-table th, .dark .vea-preview-table td { border-color: #374151; } .vea-preview-table th { background: #f9fafb; font-weight: 600; } .dark .vea-preview-table th { background: #111827; } .vea-select { padding: 0.25rem 0.5rem; border: 1px solid #d1d5db; border-radius: 0.375rem; font-size: 0.75rem; background: #fff; color: #111827; } .dark .vea-select { background: #1f2937; border-color: #4b5563; color: #d1d5db; } .vea-recap { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem; border-radius: 0.5rem; background: #f9fafb; border: 1px solid #e5e7eb; } .dark .vea-recap { background: #111827; border-color: #374151; } .vea-recap-item { display: flex; flex-direction: column; } .vea-jobs-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; } .vea-jobs-table th, .vea-jobs-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #e5e7eb; text-align: left; } .dark .vea-jobs-table th, .dark .vea-jobs-table td { border-bottom-color: #374151; } .vea-jobs-table th { font-weight: 600; font-size: 0.75rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; } .dark .vea-jobs-table th { color: #9ca3af; } .vea-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 500; } .vea-badge-processing { background: #dbeafe; color: #1e40af; } .dark .vea-badge-processing { background: #1e3a5f; color: #93c5fd; } .vea-badge-completed { background: #dcfce7; color: #166534; } .dark .vea-badge-completed { background: #14532d; color: #86efac; } .vea-badge-partial { background: #ffedd5; color: #9a3412; } .dark .vea-badge-partial { background: #431407; color: #fdba74; } .vea-badge-failed { background: #fecaca; color: #991b1b; } .dark .vea-badge-failed { background: #450a0a; color: #fca5a5; } .vea-badge-pending { background: #f3f4f6; color: #374151; } .dark .vea-badge-pending { background: #374151; color: #d1d5db; } </style> <style> .vea-apikey-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; } .dark .vea-apikey-item { border-color: #374151; } .vea-apikey-value { font-family: monospace; font-size: 0.8125rem; color: #374151; background: #f9fafb; padding: 0.25rem 0.5rem; border-radius: 0.25rem; } .dark .vea-apikey-value { background: #111827; color: #d1d5db; } .vea-spinner { width: 1.25rem; height: 1.25rem; border: 2px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: vea-spin 0.6s linear infinite; display: inline-block; } @keyframes vea-spin { to { transform: rotate(360deg); } } .vea-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 12rem; gap: 1rem; } .vea-error { padding: 0.75rem 1rem; border-radius: 0.5rem; background: #fef2f2; border: 1px solid #fecaca; } .dark .vea-error { background: #450a0a; border-color: #7f1d1d; } .vea-success-msg { padding: 0.75rem 1rem; border-radius: 0.5rem; background: #f0fdf4; border: 1px solid #bbf7d0; } .dark .vea-success-msg { background: #052e16; border-color: #166534; } .vea-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem 1rem; text-align: center; } @media (max-width: 640px) { .vea-credits-bar { flex-direction: column; align-items: flex-start; } .vea-radio-group { flex-direction: column; } .vea-recap { flex-direction: column; align-items: flex-start; } .vea-jobs-table { font-size: 0.75rem; } .vea-jobs-table th, .vea-jobs-table td { padding: 0.375rem 0.5rem; } .vea-apikey-item { flex-direction: column; align-items: flex-start; } } [x-cloak] { display: none !important; } </style> <div x-data="validationEmailApp()" x-init="init()" x-cloak class="vea-container"> <template x-if="loading"> <div class="vea-loading"> <span class="vea-spinner"></span> <p class="text-sm text-neutral-500">Chargement...</p>