@jjlmoya/utils-developer 1.16.0 → 1.17.0

package/src/tool/jwtDecoder/jwt-decoder-parser-and-claims-inspector.css

@@ -0,0 +1,358 @@
+.jwt-root {
+  width: 100%;
+}
+
+.jwt-card {
+  display: grid;
+  gap: 1rem;
+  width: 100%;
+  padding: 1rem;
+  overflow: hidden;
+  background:
+    linear-gradient(135deg, rgba(14, 165, 233, 0.14), transparent 34%),
+    linear-gradient(315deg, rgba(22, 163, 74, 0.13), transparent 36%),
+    #fff;
+  border: 1px solid rgb(219, 234, 254);
+  border-radius: 1.5rem;
+  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
+}
+
+.theme-dark .jwt-card {
+  background:
+    linear-gradient(135deg, rgba(14, 165, 233, 0.18), transparent 34%),
+    linear-gradient(315deg, rgba(34, 197, 94, 0.15), transparent 36%),
+    rgb(9, 12, 22);
+  border-color: rgb(30, 41, 59);
+  box-shadow: none;
+}
+
+.jwt-input-panel,
+.jwt-json-panel,
+.jwt-claims-panel {
+  background: rgba(255, 255, 255, 0.82);
+  border: 1px solid rgba(148, 163, 184, 0.28);
+  border-radius: 1rem;
+  backdrop-filter: blur(16px);
+}
+
+.theme-dark .jwt-input-panel,
+.theme-dark .jwt-json-panel,
+.theme-dark .jwt-claims-panel {
+  background: rgba(15, 23, 42, 0.78);
+  border-color: rgba(71, 85, 105, 0.62);
+}
+
+.jwt-input-panel {
+  display: grid;
+  gap: 0.85rem;
+  padding: 1rem;
+}
+
+.jwt-token-field {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.jwt-label {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  font-size: 0.9rem;
+  font-weight: 750;
+  color: rgb(15, 23, 42);
+}
+
+.theme-dark .jwt-label {
+  color: rgb(226, 232, 240);
+}
+
+.jwt-label-icon,
+.jwt-button-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.jwt-label-icon {
+  color: rgb(2, 132, 199);
+}
+
+.jwt-token-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 8.5rem;
+  padding: 0.9rem;
+  font-size: 0.82rem;
+  line-height: 1.55;
+  color: rgb(15, 23, 42);
+  resize: vertical;
+  background: rgb(248, 250, 252);
+  border: 1px solid rgb(203, 213, 225);
+  border-radius: 0.85rem;
+}
+
+.jwt-token-input:focus {
+  border-color: rgb(14, 165, 233);
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.14);
+}
+
+.theme-dark .jwt-token-input {
+  color: rgb(226, 232, 240);
+  background: rgb(15, 23, 42);
+  border-color: rgb(51, 65, 85);
+}
+
+.jwt-action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+}
+
+.jwt-action,
+.jwt-copy {
+  display: inline-flex;
+  gap: 0.45rem;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.3rem;
+  color: rgb(15, 23, 42);
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid rgb(203, 213, 225);
+  border-radius: 0.7rem;
+}
+
+.jwt-action {
+  padding: 0 0.8rem;
+  font-weight: 750;
+}
+
+.jwt-action-primary {
+  color: #fff;
+  background: rgb(2, 132, 199);
+  border-color: rgb(2, 132, 199);
+}
+
+.theme-dark .jwt-action,
+.theme-dark .jwt-copy {
+  color: rgb(226, 232, 240);
+  background: rgb(15, 23, 42);
+  border-color: rgb(51, 65, 85);
+}
+
+.theme-dark .jwt-action-primary {
+  color: #fff;
+  background: rgb(14, 165, 233);
+  border-color: rgb(14, 165, 233);
+}
+
+.jwt-status {
+  padding: 0.7rem 0.85rem;
+  margin: 0;
+  font-weight: 750;
+  border-radius: 0.8rem;
+}
+
+.jwt-status-waiting {
+  color: rgb(51, 65, 85);
+  background: rgb(241, 245, 249);
+}
+
+.jwt-status-valid {
+  color: rgb(20, 83, 45);
+  background: rgb(220, 252, 231);
+}
+
+.jwt-status-invalid,
+.jwt-status-expired {
+  color: rgb(127, 29, 29);
+  background: rgb(254, 226, 226);
+}
+
+.jwt-status-unsigned {
+  color: rgb(120, 53, 15);
+  background: rgb(254, 243, 199);
+}
+
+.theme-dark .jwt-status-waiting {
+  color: rgb(203, 213, 225);
+  background: rgb(30, 41, 59);
+}
+
+.jwt-privacy {
+  margin: 0;
+  font-size: 0.82rem;
+  line-height: 1.45;
+  color: rgb(71, 85, 105);
+}
+
+.theme-dark .jwt-privacy {
+  color: rgb(148, 163, 184);
+}
+
+.jwt-output-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.jwt-json-panel {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.jwt-panel-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.85rem 0.95rem;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
+}
+
+.jwt-panel-heading h2,
+.jwt-claims-panel h2 {
+  margin: 0;
+  font-size: 0.95rem;
+  color: rgb(15, 23, 42);
+}
+
+.theme-dark .jwt-panel-heading h2,
+.theme-dark .jwt-claims-panel h2 {
+  color: rgb(226, 232, 240);
+}
+
+.jwt-copy {
+  position: relative;
+  width: 2.15rem;
+  height: 2.15rem;
+}
+
+.jwt-copy svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.jwt-copy[data-copied]::after {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 0.3rem);
+  padding: 0.25rem 0.45rem;
+  font-size: 0.72rem;
+  color: #fff;
+  white-space: nowrap;
+  content: attr(data-copied);
+  background: rgb(15, 23, 42);
+  border-radius: 0.45rem;
+}
+
+.jwt-code {
+  min-height: 9rem;
+  max-height: 21rem;
+  padding: 1rem;
+  margin: 0;
+  overflow: auto;
+  font-size: 0.78rem;
+  line-height: 1.55;
+  color: rgb(30, 41, 59);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.jwt-signature-code {
+  color: rgb(7, 89, 133);
+}
+
+.theme-dark .jwt-code {
+  color: rgb(203, 213, 225);
+}
+
+.theme-dark .jwt-signature-code {
+  color: rgb(125, 211, 252);
+}
+
+.jwt-claims-panel {
+  padding: 1rem;
+}
+
+.jwt-claims {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.55rem;
+  margin: 0.85rem 0 0;
+}
+
+.jwt-claims div {
+  display: grid;
+  grid-template-columns: minmax(7rem, 0.55fr) 1fr;
+  gap: 0.65rem;
+  padding: 0.65rem 0.75rem;
+  background: rgba(248, 250, 252, 0.82);
+  border-radius: 0.75rem;
+}
+
+.theme-dark .jwt-claims div {
+  background: rgba(30, 41, 59, 0.78);
+}
+
+.jwt-claims dt {
+  font-size: 0.76rem;
+  font-weight: 800;
+  color: rgb(71, 85, 105);
+}
+
+.jwt-claims dd {
+  min-width: 0;
+  margin: 0;
+  font-size: 0.82rem;
+  color: rgb(15, 23, 42);
+  overflow-wrap: anywhere;
+}
+
+.theme-dark .jwt-claims dt {
+  color: rgb(148, 163, 184);
+}
+
+.theme-dark .jwt-claims dd {
+  color: rgb(226, 232, 240);
+}
+
+@media (min-width: 860px) {
+  .jwt-card {
+    grid-template-columns: minmax(20rem, 0.92fr) minmax(0, 1.08fr);
+    padding: 1.25rem;
+  }
+
+  .jwt-input-panel,
+  .jwt-claims-panel {
+    grid-column: 1;
+  }
+
+  .jwt-output-grid {
+    grid-row: span 2;
+    grid-column: 2;
+  }
+}
+
+@media (min-width: 1180px) {
+  .jwt-output-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .jwt-json-panel-main {
+    grid-column: span 2;
+  }
+}
+
+@media (max-width: 520px) {
+  .jwt-card {
+    padding: 0.7rem;
+    border-radius: 1rem;
+  }
+
+  .jwt-action {
+    flex: 1 1 100%;
+  }
+
+  .jwt-claims div {
+    grid-template-columns: 1fr;
+  }
+}

package/src/tool/jwtDecoder/logic.ts

@@ -0,0 +1,96 @@
+export interface DecodedJwt {
+  header: Record<string, unknown>;
+  payload: Record<string, unknown>;
+  signature: string;
+  valid: boolean;
+  unsigned: boolean;
+  expired: boolean;
+  error?: 'invalid-segments' | 'invalid-json';
+}
+
+const textDecoder = new TextDecoder();
+
+function decodeBase64Url(segment: string): string {
+  const normalized = segment.replace(/-/g, '+').replace(/_/g, '/');
+  const padded = normalized.padEnd(Math.ceil(normalized.length / 4) * 4, '=');
+  const binary = atob(padded);
+  const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
+
+  return textDecoder.decode(bytes);
+}
+
+function parseJsonSegment(segment: string): Record<string, unknown> {
+  const decoded = decodeBase64Url(segment);
+  const parsed = JSON.parse(decoded) as unknown;
+
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+    throw new Error('invalid-json');
+  }
+
+  return parsed as Record<string, unknown>;
+}
+
+function invalidJwt(error: DecodedJwt['error']): DecodedJwt {
+  return {
+    header: {},
+    payload: {},
+    signature: '',
+    valid: false,
+    unsigned: false,
+    expired: false,
+    error,
+  };
+}
+
+function hasValidSegments(parts: string[]): boolean {
+  return parts.length === 3 && Boolean(parts[0]) && Boolean(parts[1]);
+}
+
+function buildDecodedJwt(header: Record<string, unknown>, payload: Record<string, unknown>, signature: string): DecodedJwt {
+  const unsigned = signature.length === 0 || header['alg'] === 'none';
+  const exp = typeof payload['exp'] === 'number' ? payload['exp'] : undefined;
+
+  return {
+    header,
+    payload,
+    signature,
+    valid: true,
+    unsigned,
+    expired: typeof exp === 'number' && exp * 1000 < Date.now(),
+  };
+}
+
+export function decodeJwt(token: string): DecodedJwt {
+  const parts = token.trim().split('.');
+
+  if (!hasValidSegments(parts)) return invalidJwt('invalid-segments');
+
+  try {
+    const header = parseJsonSegment(parts[0]);
+    const payload = parseJsonSegment(parts[1]);
+    return buildDecodedJwt(header, payload, parts[2] ?? '');
+  } catch {
+    return invalidJwt('invalid-json');
+  }
+}
+
+export function formatJson(value: Record<string, unknown>): string {
+  return JSON.stringify(value, null, 2);
+}
+
+export function formatClaimDate(value: unknown): string | null {
+  if (typeof value !== 'number') return null;
+
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'medium',
+    timeStyle: 'medium',
+  }).format(new Date(value * 1000));
+}
+
+export function formatClaimValue(value: unknown): string | null {
+  if (value === undefined || value === null || value === '') return null;
+  if (Array.isArray(value)) return value.map(String).join(', ');
+  if (typeof value === 'object') return JSON.stringify(value);
+
+  return String(value);
+}

package/src/tool/jwtDecoder/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { jwtDecoder } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await jwtDecoder.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/jwtDecoder/ui.ts

@@ -0,0 +1,38 @@
+export interface JwtDecoderUI extends Record<string, string> {
+  tokenLabel: string;
+  tokenPlaceholder: string;
+  sampleButton: string;
+  clearButton: string;
+  statusWaiting: string;
+  statusValid: string;
+  statusInvalid: string;
+  statusExpired: string;
+  statusUnsigned: string;
+  headerTitle: string;
+  payloadTitle: string;
+  signatureTitle: string;
+  claimsTitle: string;
+  copyHeader: string;
+  copyPayload: string;
+  copySignature: string;
+  copyAll: string;
+  copiedLabel: string;
+  invalidTokenTitle: string;
+  invalidTokenBody: string;
+  invalidSegmentError: string;
+  invalidDecodeError: string;
+  emptyJson: string;
+  signaturePresent: string;
+  signatureMissing: string;
+  algorithmLabel: string;
+  typeLabel: string;
+  issuerLabel: string;
+  subjectLabel: string;
+  audienceLabel: string;
+  issuedAtLabel: string;
+  notBeforeLabel: string;
+  expiresAtLabel: string;
+  claimMissing: string;
+  privacyNote: string;
+  sampleToken: string;
+}

package/src/tool/serpPixelSimulator/bibliography.astro

@@ -1,7 +1,14 @@
 ---
-import { bibliography } from './bibliography';
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { serpPixelSimulator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await serpPixelSimulator.i18n[locale]?.();
 ---
 
-<ul>
-  {bibliography.map((item) => <li><a href={item.url} rel="nofollow noopener" target="_blank">{item.name}</a></li>)}
-</ul>
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/serpPixelSimulator/index.ts

@@ -1,9 +1,5 @@
-import type { ToolDefinition } from '../../types';
-import type { ToolDefinition } from '../../types';
 import { serpPixelSimulator } from './entry';
-
 export * from './entry';
-
 export const SERP_PIXEL_SIMULATOR_TOOL: ToolDefinition = {
   entry: serpPixelSimulator,
   Component: () => import('./component.astro'),

package/src/tool/serpPixelSimulator/seo.astro

@@ -1,12 +1,15 @@
 ---
-import type { SerpPixelSimulatorUI } from './ui';
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { serpPixelSimulator } from './index';
+import type { KnownLocale } from '../../types';
 
 interface Props {
-  ui?: Record<string, unknown>;
+  locale?: KnownLocale;
 }
 
-const { ui } = Astro.props;
-const t = (ui ?? {}) as SerpPixelSimulatorUI;
+const { locale = 'es' } = Astro.props;
+const content = await serpPixelSimulator.i18n[locale]?.();
+if (!content) return null;
 ---
 
-<section class="tool-seo" aria-label={t.previewLabel}></section>
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tools.ts

@@ -25,5 +25,6 @@ import { GENERADOR_SECURITY_TXT_TOOL } from './tool/generadorSecurityTxt/index';
 import { CALCULADORA_TIEMPO_DATOS_TOOL } from './tool/calculadoraTiempoDatos/index';
 import { CONVERSOR_EXCEL_CSV_HTML_TOOL } from './tool/conversorExcelCsvHtml/index';
 import { SERP_PIXEL_SIMULATOR_TOOL } from './tool/serpPixelSimulator/index';
+import { JWT_DECODER_TOOL } from './tool/jwtDecoder/index';
 
-export const ALL_TOOLS: ToolDefinition[] = [JSON_FORMATTER_TOOL, SVG_TO_CSS_TOOL, ASPECT_RATIO_TOOL, PLACEHOLDER_GENERATOR_TOOL, URL_ENCODER_DECODER_TOOL, DUPLICATE_CSS_REMOVER_TOOL, CSS_TO_INLINE_CONVERTER_TOOL, CSS_SPECIFICITY_CALCULATOR_TOOL, CRON_GENERATOR_TOOL, KEYCODE_TOOL, LLM_COST_CALCULATOR_TOOL, MUSICAL_TYPOGRAPHY_TOOL, MOBILE_MOCKUP_GENERATOR_TOOL, HASH_GENERATOR_TOOL, PROMPT_LIBRARY_TOOL, COLOR_CONVERTER_TOOL, READABILITY_CALCULATOR_TOOL, SVG_SANITIZER_TOOL, UTM_GENERATOR_TOOL, URL_CLEANER_TOOL, INSPECTOR_CERTIFICADOS_SSL_TOOL, GENERADOR_SECURITY_TXT_TOOL, CALCULADORA_TIEMPO_DATOS_TOOL, CONVERSOR_EXCEL_CSV_HTML_TOOL, SERP_PIXEL_SIMULATOR_TOOL];
+export const ALL_TOOLS: ToolDefinition[] = [JSON_FORMATTER_TOOL, SVG_TO_CSS_TOOL, ASPECT_RATIO_TOOL, PLACEHOLDER_GENERATOR_TOOL, URL_ENCODER_DECODER_TOOL, DUPLICATE_CSS_REMOVER_TOOL, CSS_TO_INLINE_CONVERTER_TOOL, CSS_SPECIFICITY_CALCULATOR_TOOL, CRON_GENERATOR_TOOL, KEYCODE_TOOL, LLM_COST_CALCULATOR_TOOL, MUSICAL_TYPOGRAPHY_TOOL, MOBILE_MOCKUP_GENERATOR_TOOL, HASH_GENERATOR_TOOL, PROMPT_LIBRARY_TOOL, COLOR_CONVERTER_TOOL, READABILITY_CALCULATOR_TOOL, SVG_SANITIZER_TOOL, UTM_GENERATOR_TOOL, URL_CLEANER_TOOL, INSPECTOR_CERTIFICADOS_SSL_TOOL, GENERADOR_SECURITY_TXT_TOOL, CALCULADORA_TIEMPO_DATOS_TOOL, CONVERSOR_EXCEL_CSV_HTML_TOOL, SERP_PIXEL_SIMULATOR_TOOL, JWT_DECODER_TOOL];