https://yannick.services/apps/url-courte/Recent content in Raccourcisseur d'URL on yannick.servicesHugo -- gohugo.iofrcontact@yannick.services (Yannick)contact@yannick.services (Yannick)https://yannick.services/apps/url-courte/creer/Mon, 01 Jan 0001 00:00:00 +0000contact@yannick.services (Yannick)https://yannick.services/apps/url-courte/creer/<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.accessToken; 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() { 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> .cpc-container { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } .cpc-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 1.5rem; } .dark .cpc-card { background: #1f2937; border-color: #374151; } .cpc-quota { padding: 0.75rem 1rem; border-radius: 0.5rem; background: #f0f9ff; border: 1px solid #bae6fd; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; } .dark .cpc-quota { background: #0c4a6e; border-color: #075985; } .cpc-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; } .cpc-btn:disabled { opacity: 0.5; cursor: not-allowed; } .cpc-btn-primary { background: #2563eb; color: #fff; } .cpc-btn-primary:hover:not(:disabled) { background: #1d4ed8; } .cpc-btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; } .dark .cpc-btn-secondary { background: #374151; color: #d1d5db; border-color: #4b5563; } .cpc-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; } .cpc-input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.1); } .dark .cpc-input { background: #111827; border-color: #4b5563; color: #f9fafb; } .cpc-label { display: block; font-size: 0.75rem; font-weight: 500; color: #6b7280; margin-bottom: 0.25rem; } .dark .cpc-label { color: #9ca3af; } .cpc-field { margin-bottom: 1rem; } .cpc-row { display: flex; gap: 0.75rem; flex-wrap: wrap; } .cpc-spinner { width: 1.25rem; height: 1.25rem; border: 2px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: cpc-spin 0.6s linear infinite; display: inline-block; } @keyframes cpc-spin { to { transform: rotate(360deg); } } .cpc-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 20vh; gap: 1rem; } .cpc-result { padding: 1rem; border-radius: 0.5rem; margin-top: 1rem; } .cpc-result-success { background: #dcfce7; border: 1px solid #86efac; } .dark .cpc-result-success { background: #14532d; border-color: #166534; } .cpc-result-pending { background: #fef3c7; border: 1px solid #fcd34d; } .dark .cpc-result-pending { background: #451a03; border-color: #92400e; } .cpc-disabled-msg { padding: 2rem 1.5rem; text-align: center; border-radius: 0.75rem; border: 1px solid #e5e7eb; background: #f9fafb; } .dark .cpc-disabled-msg { background: #111827; border-color: #374151; } .cpc-plans { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; } .cpc-plan-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1.25rem 1rem; background: #fff; min-width: 160px; flex: 1; max-width: 220px; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; } .dark .cpc-plan-card { background: #1f2937; border-color: #374151; } .cpc-plan-card-popular { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb; } .dark .cpc-plan-card-popular { border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6; } .cpc-plan-badge-pop { position: absolute; top: -0.625rem; left: 50%; transform: translateX(-50%); background: #2563eb; color: #fff; font-size: 0.625rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.05em; } .cpc-plan-features { list-style: none; padding: 0; margin: 0.75rem 0; text-align: left; display: flex; flex-direction: column; gap: 0.375rem; } .cpc-plan-features li { font-size: 0.75rem; color: #4b5563; display: flex; align-items: center; gap: 0.375rem; } .dark .cpc-plan-features li { color: #9ca3af; } .cpc-plan-features li i { color: #16a34a; font-size: 0.625rem; } .cpc-btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; } .cpc-toggle { position: relative; display: inline-flex; height: 1.25rem; width: 2rem; align-items: center; border-radius: 9999px; background: rgba(31,41,55,0.2); border: none; cursor: pointer; transition: background 0.2s; outline-offset: 2px; } .cpc-toggle-on { background: #2563eb; } .dark .cpc-toggle { background: rgba(255,255,255,0.2); } .dark .cpc-toggle-on { background: #3b82f6; } .cpc-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; } .cpc-toggle-dot-on { transform: translateX(15px); } </style> <div x-data="clicplusCreate()" x-init="init()"> <template x-if="loading"> <div class="cpc-loading"> <div class="cpc-spinner" style="width:1.5rem;height:1.5rem;"></div> <p class="text-sm text-neutral-500">Chargement...</p>https://yannick.services/apps/url-courte/detail/Mon, 01 Jan 0001 00:00:00 +0000contact@yannick.services (Yannick)https://yannick.services/apps/url-courte/detail/<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.accessToken; 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() { 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> .cpdt-container { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } .cpdt-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; padding: 1.25rem; } .dark .cpdt-card { background: #1f2937; border-color: #374151; } .cpdt-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .cpdt-header-info { flex: 1; min-width: 0; } .cpdt-short-url { font-size: 1.125rem; font-weight: 700; color: #2563eb; text-decoration: none; word-break: break-all; } .dark .cpdt-short-url { color: #60a5fa; } .cpdt-long-url { font-size: 0.875rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.25rem; } .dark .cpdt-long-url { color: #9ca3af; } .cpdt-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; } .cpdt-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 500; } .cpdt-badge-active { background: #dcfce7; color: #166534; } .dark .cpdt-badge-active { background: #14532d; color: #86efac; } .cpdt-badge-pending { background: #fef3c7; color: #92400e; } .dark .cpdt-badge-pending { background: #451a03; color: #fcd34d; } .cpdt-badge-suspended { background: #fecaca; color: #991b1b; } .dark .cpdt-badge-suspended { background: #450a0a; color: #fca5a5; } .cpdt-tag { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; background: #e0e7ff; color: #3730a3; } .dark .cpdt-tag { background: #312e81; color: #a5b4fc; } .cpdt-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; } .cpdt-btn:disabled { opacity: 0.5; cursor: not-allowed; } .cpdt-btn-primary { background: #2563eb; color: #fff; } .cpdt-btn-primary:hover:not(:disabled) { background: #1d4ed8; } .cpdt-btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; } .dark .cpdt-btn-secondary { background: #374151; color: #d1d5db; border-color: #4b5563; } .cpdt-btn-danger { background: #fff; color: #dc2626; border: 1px solid #fecaca; } .cpdt-btn-danger:hover:not(:disabled) { background: #fef2f2; } .dark .cpdt-btn-danger { background: #1f2937; color: #fca5a5; border-color: #7f1d1d; } .cpdt-btn-sm { padding: 0.375rem 0.75rem; font-size: 0.75rem; } .cpdt-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; } .cpdt-input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,0.1); } .dark .cpdt-input { background: #111827; border-color: #4b5563; color: #f9fafb; } .cpdt-label { display: block; font-size: 0.75rem; font-weight: 500; color: #6b7280; margin-bottom: 0.25rem; } .dark .cpdt-label { color: #9ca3af; } .cpdt-chart-wrap { position: relative; width: 100%; height: 250px; } .cpdt-table { width: 100%; font-size: 0.75rem; border-collapse: collapse; } .cpdt-table th { text-align: left; padding: 0.5rem 0.25rem; color: #6b7280; font-weight: 500; border-bottom: 1px solid #e5e7eb; } .dark .cpdt-table th { color: #9ca3af; border-bottom-color: #374151; } .cpdt-table td { padding: 0.375rem 0.25rem; color: #111827; } .dark .cpdt-table td { color: #f9fafb; } .cpdt-section-title { font-size: 0.875rem; font-weight: 600; color: #111827; margin-bottom: 0.75rem; } .dark .cpdt-section-title { color: #f9fafb; } .cpdt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 640px) { .cpdt-grid { grid-template-columns: 1fr; } } .cpdt-screenshot { border-radius: 0.5rem; border: 1px solid #e5e7eb; max-width: 100%; height: auto; margin-top: 0.75rem; } .dark .cpdt-screenshot { border-color: #374151; } .cpdt-spinner { width: 1.5rem; height: 1.5rem; border: 2px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: cpdt-spin 0.6s linear infinite; } @keyframes cpdt-spin { to { transform: rotate(360deg); } } .cpdt-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 20vh; gap: 1rem; } .cpdt-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; padding: 0.75rem 1.25rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; background: #111827; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 9999; } .dark .cpdt-toast { background: #f9fafb; color: #111827; } .cpdt-edit-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; } .dark .cpdt-edit-section { border-top-color: #374151; } .cpdt-mod-counter { font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem; } .dark .cpdt-mod-counter { color: #9ca3af; } </style> <div x-data="clicplusDetail()" x-init="init()"> <template x-if="loading"> <div class="cpdt-loading"> <div class="cpdt-spinner"></div> <p class="text-sm text-neutral-500">Chargement...</p>