@jjlmoya/utils-tools 1.1.0

package/src/tool/password-generator/component.astro

@@ -0,0 +1,259 @@
+---
+import type { KnownLocale } from "../../types";
+import type { PasswordGeneratorUI } from "./ui";
+import Display from "./components/Display.astro";
+import Strength from "./components/Strength.astro";
+import Config from "./components/Config.astro";
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as PasswordGeneratorUI;
+---
+
+<div class="pg-app-container" data-ui={JSON.stringify(t)}>
+  <div class="pg-card">
+    <div class="pg-card-glow"></div>
+    <div class="pg-card-content">
+      <Display
+        generating={t.generating}
+        copyTitle={t.copyTitle}
+        regenerateTitle={t.regenerateTitle}
+      />
+
+      <Strength labelSecurity={t.labelSecurity} />
+
+      <div class="pg-divider"></div>
+
+      <Config
+        labelLength={t.labelLength}
+        optionUppercase={t.optionUppercase}
+        optionLowercase={t.optionLowercase}
+        optionNumbers={t.optionNumbers}
+        optionSymbols={t.optionSymbols}
+      />
+    </div>
+  </div>
+</div>
+
+<style>
+  .pg-app-container {
+    width: 100%;
+    max-width: 640px;
+    margin: 0 auto;
+    padding: 1rem;
+    perspective: 1000px;
+  }
+
+  .pg-card {
+    position: relative;
+    border-radius: 2rem;
+    padding: 2px;
+    background: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.1),
+      rgba(255, 255, 255, 0.05)
+    );
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+    transition: transform 0.3s ease;
+  }
+
+  :global(.theme-dark) .pg-card {
+    background: linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.05),
+      rgba(0, 0, 0, 0.2)
+    );
+  }
+
+  .pg-card-glow {
+    position: absolute;
+    inset: 0;
+    border-radius: 2rem;
+    background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
+    opacity: 0.1;
+    filter: blur(20px);
+    z-index: -1;
+  }
+
+  .pg-card-content {
+    background: #fff;
+    border-radius: calc(2rem - 2px);
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :global(.theme-dark) .pg-card-content {
+    background: #0f172a;
+  }
+
+  .pg-divider {
+    height: 1px;
+    background: linear-gradient(
+      to right,
+      transparent,
+      rgba(0, 0, 0, 0.05),
+      transparent
+    );
+    margin: 1.5rem 0;
+  }
+
+  :global(.theme-dark) .pg-divider {
+    background: linear-gradient(
+      to right,
+      transparent,
+      rgba(255, 255, 255, 0.05),
+      transparent
+    );
+  }
+
+  @keyframes pulse-success {
+    0% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.05);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  :global(.pg-copied-anim) {
+    animation: pulse-success 0.3s ease-out;
+  }
+</style>
+
+<script>
+  const root = document.querySelector(
+    ".pg-app-container",
+  ) as HTMLElement | null;
+  const t = JSON.parse(root?.dataset.ui ?? "{}") as Record<string, string>;
+
+  const output = document.getElementById("pg-output");
+  const strengthBar = document.getElementById("pg-strength-bar");
+  const strengthText = document.getElementById("pg-strength-text");
+  const lengthInput = document.getElementById("pg-length") as HTMLInputElement;
+  const lengthVal = document.getElementById("pg-length-val");
+  const copyBtn = document.getElementById("pg-copy-btn");
+  const regenBtn = document.getElementById("pg-regen-btn");
+
+  const checkboxes = {
+    uppercase: document.getElementById("pg-uppercase") as HTMLInputElement,
+    lowercase: document.getElementById("pg-lowercase") as HTMLInputElement,
+    numbers: document.getElementById("pg-numbers") as HTMLInputElement,
+    symbols: document.getElementById("pg-symbols") as HTMLInputElement,
+  };
+
+  const CHARS = {
+    uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+    lowercase: "abcdefghijklmnopqrstuvwxyz",
+    numbers: "0123456789",
+    symbols: "!@#$%^&*()_+-=[]{}|;:,.<>?",
+  };
+
+  function generate() {
+    let charset = "";
+    if (checkboxes.uppercase?.checked) charset += CHARS.uppercase;
+    if (checkboxes.lowercase?.checked) charset += CHARS.lowercase;
+    if (checkboxes.numbers?.checked) charset += CHARS.numbers;
+    if (checkboxes.symbols?.checked) charset += CHARS.symbols;
+
+    if (charset === "") {
+      charset = CHARS.lowercase;
+      if (checkboxes.lowercase) checkboxes.lowercase.checked = true;
+    }
+
+    const length = parseInt(lengthInput?.value ?? "16", 10);
+    const array = new Uint32Array(length);
+    crypto.getRandomValues(array);
+
+    let password = "";
+    for (let i = 0; i < length; i++) {
+      const idx = array[i];
+      password +=
+        idx !== undefined ? (charset[idx % charset.length] ?? "") : "";
+    }
+
+    if (output) output.textContent = password;
+    updateStrength(password);
+  }
+
+  function updateStrength(password: string) {
+    let score = 0;
+    if (password.length > 8) score += 10;
+    if (password.length > 12) score += 20;
+    if (password.length >= 16) score += 30;
+    if (/[A-Z]/.test(password)) score += 10;
+    if (/[a-z]/.test(password)) score += 10;
+    if (/[0-9]/.test(password)) score += 10;
+    if (/[^A-Za-z0-9]/.test(password)) score += 10;
+
+    let width = "20%";
+    let bg = "#ef4444";
+    let label = t.strengthWeak ?? "Weak";
+
+    if (score > 90) {
+      width = "100%";
+      bg = "#10b981";
+      label = t.strengthUnbreakable ?? "Unbreakable";
+    } else if (score > 70) {
+      width = "80%";
+      bg = "#22c55e";
+      label = t.strengthStrong ?? "Strong";
+    } else if (score > 50) {
+      width = "60%";
+      bg = "#eab308";
+      label = t.strengthGood ?? "Good";
+    } else if (score > 30) {
+      width = "40%";
+      bg = "#f97316";
+      label = t.strengthFair ?? "Fair";
+    }
+
+    if (strengthBar) {
+      strengthBar.style.width = width;
+      strengthBar.style.background = bg;
+    }
+    if (strengthText) {
+      strengthText.textContent = label;
+      strengthText.style.color = bg;
+    }
+  }
+
+  lengthInput?.addEventListener("input", () => {
+    if (lengthVal) lengthVal.textContent = lengthInput.value;
+    generate();
+  });
+
+  Object.values(checkboxes).forEach((cb) =>
+    cb?.addEventListener("change", generate),
+  );
+  regenBtn?.addEventListener("click", generate);
+
+  copyBtn?.addEventListener("click", () => {
+    const text = output?.textContent;
+    if (!text) return;
+    navigator.clipboard.writeText(text);
+
+    output?.classList.add("pg-copied-anim");
+    setTimeout(() => output?.classList.remove("pg-copied-anim"), 300);
+
+    const svg = copyBtn.querySelector("svg");
+    if (!svg) return;
+    const oldPath = svg.innerHTML;
+    svg.innerHTML =
+      '<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>';
+    svg.style.color = "#10b981";
+    setTimeout(() => {
+      svg.innerHTML = oldPath;
+      svg.style.color = "";
+    }, 1500);
+  });
+
+  generate();
+</script>

package/src/tool/password-generator/components/Config.astro

@@ -0,0 +1,227 @@
+---
+interface Props {
+  labelLength: string;
+  optionUppercase: string;
+  optionLowercase: string;
+  optionNumbers: string;
+  optionSymbols: string;
+}
+
+const { labelLength, optionUppercase, optionLowercase, optionNumbers, optionSymbols } = Astro.props;
+
+const options = [
+  { id: 'pg-uppercase', label: optionUppercase, hint: 'A-Z' },
+  { id: 'pg-lowercase', label: optionLowercase, hint: 'a-z' },
+  { id: 'pg-numbers', label: optionNumbers, hint: '0-9' },
+  { id: 'pg-symbols', label: optionSymbols, hint: '!@#$%^&*' },
+];
+---
+
+<div class="pg-config-card">
+  <div class="pg-config-section">
+    <div class="pg-config-header">
+      <label for="pg-length" class="pg-config-label">{labelLength}</label>
+      <span id="pg-length-val" class="pg-config-value">16</span>
+    </div>
+    <div class="pg-range-container">
+      <input type="range" id="pg-length" class="pg-range-input" min="6" max="64" value="16" />
+      <div class="pg-range-markers">
+        <span>6</span>
+        <span>16</span>
+        <span>32</span>
+        <span>48</span>
+        <span>64</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="pg-options-grid">
+    {options.map((opt) => (
+      <label class="pg-option-item">
+        <input type="checkbox" id={opt.id} class="pg-option-checkbox" checked />
+        <div class="pg-option-content">
+          <div class="pg-option-indicator">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+              <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+          </div>
+          <div class="pg-option-info">
+            <span class="pg-option-label">{opt.label}</span>
+            <span class="pg-option-hint">{opt.hint}</span>
+          </div>
+        </div>
+      </label>
+    ))}
+  </div>
+</div>
+
+<style>
+  .pg-config-card {
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    border-radius: 1.5rem;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  :global(.theme-dark) .pg-config-card {
+    background: rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.05);
+  }
+
+  .pg-config-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .pg-config-label {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #475569;
+  }
+
+  :global(.theme-dark) .pg-config-label {
+    color: #94a3b8;
+  }
+
+  .pg-config-value {
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: #3b82f6;
+  }
+
+  .pg-range-input {
+    width: 100%;
+    margin-bottom: 0.5rem;
+    cursor: pointer;
+    accent-color: #3b82f6;
+  }
+
+  .pg-range-markers {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 4px;
+    font-size: 0.75rem;
+    color: #94a3b8;
+    font-weight: 500;
+  }
+
+  .pg-options-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.75rem;
+  }
+
+  @media (max-width: 480px) {
+    .pg-options-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .pg-option-item {
+    cursor: pointer;
+    position: relative;
+  }
+
+  .pg-option-checkbox {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .pg-option-content {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background: rgba(255, 255, 255, 0.6);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    border-radius: 1rem;
+    transition: all 0.2s ease;
+  }
+
+  :global(.theme-dark) .pg-option-content {
+    background: rgba(30, 41, 59, 0.4);
+    border-color: rgba(255, 255, 255, 0.05);
+  }
+
+  .pg-option-item:hover .pg-option-content {
+    background: rgba(255, 255, 255, 0.8);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  }
+
+  :global(.theme-dark) .pg-option-item:hover .pg-option-content {
+    background: rgba(30, 41, 59, 0.6);
+  }
+
+  .pg-option-checkbox:checked + .pg-option-content {
+    border-color: #10b981;
+    background: rgba(16, 185, 129, 0.05);
+  }
+
+  :global(.theme-dark) .pg-option-checkbox:checked + .pg-option-content {
+    background: rgba(16, 185, 129, 0.1);
+  }
+
+  .pg-option-indicator {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 0.5rem;
+    border: 2px solid #cbd5e1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    color: white;
+  }
+
+  :global(.theme-dark) .pg-option-indicator {
+    border-color: #475569;
+  }
+
+  .pg-option-checkbox:checked + .pg-option-content .pg-option-indicator {
+    background: #10b981;
+    border-color: #10b981;
+    box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
+  }
+
+  .pg-option-indicator svg {
+    width: 0.875rem;
+    height: 0.875rem;
+    opacity: 0;
+    transform: scale(0.5);
+    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+
+  .pg-option-checkbox:checked + .pg-option-content .pg-option-indicator svg {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .pg-option-info {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pg-option-label {
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: #1e293b;
+  }
+
+  :global(.theme-dark) .pg-option-label {
+    color: #e2e8f0;
+  }
+
+  .pg-option-hint {
+    font-size: 0.75rem;
+    color: #94a3b8;
+    font-weight: 500;
+  }
+</style>

package/src/tool/password-generator/components/Display.astro

@@ -0,0 +1,147 @@
+---
+interface Props {
+  generating: string;
+  copyTitle: string;
+  regenerateTitle: string;
+}
+
+const { generating, copyTitle, regenerateTitle } = Astro.props;
+---
+
+<div class="pg-display">
+  <div class="pg-display-glass"></div>
+  <div class="pg-display-content">
+    <div id="pg-output" class="pg-output-text">{generating}</div>
+    <div class="pg-display-divider"></div>
+    <div class="pg-display-controls">
+      <button id="pg-copy-btn" class="pg-control-btn" title={copyTitle} aria-label={copyTitle}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/>
+        </svg>
+      </button>
+      <button id="pg-regen-btn" class="pg-control-btn pg-control-btn-accent" title={regenerateTitle} aria-label={regenerateTitle}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .pg-display {
+    position: relative;
+    width: 100%;
+    margin-bottom: 1.5rem;
+  }
+
+  .pg-display-glass {
+    position: absolute;
+    inset: -2px;
+    background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
+    border-radius: 1.25rem;
+    opacity: 0.15;
+    filter: blur(8px);
+    transition: opacity 0.3s ease;
+  }
+
+  .pg-display:hover .pg-display-glass {
+    opacity: 0.25;
+  }
+
+  .pg-display-content {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    border-radius: 1.25rem;
+    padding: 0.75rem;
+    min-height: 5rem;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
+  }
+
+  :global(.theme-dark) .pg-display-content {
+    background: rgba(15, 23, 42, 0.8);
+    border-color: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
+  }
+
+  .pg-output-text {
+    flex: 1;
+    font-size: 1.75rem;
+    font-weight: 700;
+    text-align: center;
+    letter-spacing: 0.05em;
+    color: #1e293b;
+    word-break: break-all;
+    padding: 0.5rem 1rem;
+    transition: transform 0.2s ease;
+  }
+
+  :global(.theme-dark) .pg-output-text {
+    color: #f8fafc;
+  }
+
+  .pg-display-divider {
+    width: 1px;
+    height: 3rem;
+    background: rgba(0, 0, 0, 0.1);
+    margin: 0 0.5rem;
+  }
+
+  :global(.theme-dark) .pg-display-divider {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .pg-display-controls {
+    display: flex;
+    gap: 0.5rem;
+    padding-right: 0.25rem;
+  }
+
+  .pg-control-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 0.75rem;
+    border: none;
+    background: transparent;
+    color: #64748b;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .pg-control-btn svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .pg-control-btn:hover {
+    background: rgba(0, 0, 0, 0.05);
+    color: #10b981;
+    transform: translateY(-2px);
+  }
+
+  :global(.theme-dark) .pg-control-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .pg-control-btn-accent:hover {
+    color: #3b82f6;
+  }
+
+  .pg-control-btn:active {
+    transform: translateY(0);
+  }
+
+  @media (max-width: 480px) {
+    .pg-output-text {
+      font-size: 1.25rem;
+    }
+  }
+</style>

package/src/tool/password-generator/components/Strength.astro

@@ -0,0 +1,70 @@
+---
+interface Props {
+  labelSecurity: string;
+}
+
+const { labelSecurity } = Astro.props;
+---
+
+<div class="pg-strength-container">
+  <div class="pg-strength-header">
+    <span class="pg-strength-label">{labelSecurity}</span>
+    <span id="pg-strength-text" class="pg-strength-status">-</span>
+  </div>
+  <div class="pg-strength-track">
+    <div id="pg-strength-bar" class="pg-strength-bar"></div>
+  </div>
+</div>
+
+<style>
+  .pg-strength-container {
+    width: 100%;
+    margin-bottom: 2rem;
+  }
+
+  .pg-strength-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-bottom: 0.75rem;
+  }
+
+  .pg-strength-label {
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #94a3b8;
+  }
+
+  .pg-strength-status {
+    font-size: 1rem;
+    font-weight: 700;
+    transition: color 0.3s ease;
+  }
+
+  .pg-strength-track {
+    position: relative;
+    height: 0.5rem;
+    width: 100%;
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 1rem;
+    overflow: hidden;
+  }
+
+  :global(.theme-dark) .pg-strength-track {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .pg-strength-bar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 0;
+    border-radius: 1rem;
+    background: #ef4444;
+    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+</style>