reset.astro raw

   1  ---
   2  export const prerender = false;
   3  import Base from '../layouts/Base.astro';
   4  ---
   5  <Base title="Нова парола" titleEn="New password">
   6    <main class="reset-page">
   7      <section class="section">
   8        <div class="container">
   9          <div class="reset-card">
  10            <h1 data-i18n="resetTitle">Нова парола</h1>
  11            <form id="reset-form">
  12              <div class="form-group">
  13                <label data-i18n="resetNewPassword" for="reset-password">Нова парола</label>
  14                <input type="password" id="reset-password" minlength="6" placeholder="поне 6 символа" required />
  15              </div>
  16              <button type="submit" class="btn btn-primary" data-i18n="resetSubmit">Запази новата парола</button>
  17            </form>
  18            <p id="reset-message" style="display:none;margin-top:1rem"></p>
  19          </div>
  20        </div>
  21      </section>
  22    </main>
  23  </Base>
  24  
  25  <script>
  26    import { t } from '../lib/i18n';
  27  
  28    const form = document.getElementById('reset-form') as HTMLFormElement;
  29    const msg = document.getElementById('reset-message')!;
  30    const token = new URLSearchParams(window.location.search).get('token') || '';
  31  
  32    if (!token) {
  33      form.style.display = 'none';
  34      msg.style.display = 'block';
  35      msg.style.color = 'red';
  36      msg.textContent = t('resetInvalid');
  37    }
  38  
  39    form.addEventListener('submit', async (e) => {
  40      e.preventDefault();
  41      const password = (document.getElementById('reset-password') as HTMLInputElement).value;
  42      try {
  43        const res = await fetch('/api/auth/reset', {
  44          method: 'POST',
  45          headers: { 'Content-Type': 'application/json' },
  46          body: JSON.stringify({ token, password }),
  47        });
  48        const data = await res.json();
  49        if (res.ok) {
  50          form.style.display = 'none';
  51          msg.style.display = 'block';
  52          msg.style.color = 'var(--primary)';
  53          msg.innerHTML = `${t('resetSuccess')} <a href="/" onclick="document.getElementById('login-btn')?.click();event.preventDefault()">${t('userToLogin')}</a>`;
  54        } else {
  55          msg.style.display = 'block';
  56          msg.style.color = 'red';
  57          msg.textContent = data.error || t('resetInvalid');
  58        }
  59      } catch {
  60        msg.style.display = 'block';
  61        msg.style.color = 'red';
  62        msg.textContent = t('resetInvalid');
  63      }
  64    });
  65  </script>
  66  
  67  <style>
  68    .reset-card {
  69      max-width: 420px;
  70      margin: 0 auto;
  71      background: var(--white);
  72      border-radius: 12px;
  73      box-shadow: var(--shadow);
  74      padding: 2rem;
  75    }
  76    .reset-card h1 { margin-bottom: 1.5rem; font-size: 1.4rem; }
  77    .reset-card input {
  78      width: 100%;
  79      padding: 0.65rem 0.75rem;
  80      border: 2px solid #ddd;
  81      border-radius: 8px;
  82      font-size: 0.95rem;
  83    }
  84    .reset-card .form-group { margin-bottom: 1rem; }
  85    .reset-card .btn { width: 100%; }
  86  </style>
  87