2025-08-16

WEB užkarda

Reikalavimai

Gerai, metas sukurti paprastai amžiaus verifikacijos užkardai. Tad ko tam reikia? Galbūt pasikartosiu, bet reikalavimai paprasti:

• Reikia paprasto HTML5 dialogo lango
• Vieno laukelio suvesti gimimo metams
• Vienos konfirmacijos dėžutės
• Programinio kodo patikrinančio ar lankytojas pilnametis, ar ne
• Jei lankytojas pilnametis, tai sukurti atitinkamą vardų porų reikšmę (raktažodis, laiko žymė)
• Išsaugoti vardų porų reikšmę, jei lankytojo amžius didesnis arba lygus 18 metų

Amžiaus verifikacija (Verification.astro)

Programinis kodas

<dialog id="age-dialog" style="width:100%;height:100vh;position:fixed;left:0;top:0;">
  <form method="dialog" id="age-form" style="width:50%;position:fixed;margin-left:25%;height:auto;top:22vh;text-align:center;align-items:center;">
    <h2 style="display:block;text-align:center;width:100%;color:#000 !important;">🔞 Age Verification</h2>
    <p>Please enter your birth year to continue:</p>
    <input type="number" id="birth-year" placeholder="e.g. 2005" required style="padding:1rem;border-radius:8px;" />

    <div style="margin-top:1rem;">
      <label style="display:block;margin-top:1rem;">
        <input type="checkbox" id="confirm-checkbox" />
        I confirm that I am 18 or older.
      </label>
    </div>

    <div style="margin-top: 1rem;">
      <button type="submit" id="submit-btn" style="padding:1rem;border-radius:8px;font-size:1.2rem;" disabled>Submit</button>
    </div>

    <p id="error-msg" style="color: red; display: none;">Invalid or underage, or confirmation not checked.</p>
  </form>
</dialog>

<script>
  const legalAge = 18;
  const storageKey = "ageVerified_artefaktas_eu";
  const storageTimestampKey = `${storageKey}_timestamp`;
  const validityDurationMs = 1 * 60 * 60 * 1000; // 1 hours

  const dialog = document.getElementById("age-dialog");
  const form = document.getElementById("age-form");
  const errorMsg = document.getElementById("error-msg");
  const checkbox = document.getElementById("confirm-checkbox");
  const submitBtn = document.getElementById("submit-btn");

  function isVerificationStillValid() {
    const stored = localStorage.getItem(storageKey);
    const timestamp = localStorage.getItem(storageTimestampKey);
    if (stored !== "true" || !timestamp) return false;

    const elapsed = Date.now() - parseInt(timestamp, 10);
    return elapsed < validityDurationMs;
  }

  function saveVerificationStatus() {
    localStorage.setItem(storageKey, "true");
    localStorage.setItem(storageTimestampKey, Date.now().toString());
  }

  // Run age check on load
  window.addEventListener("DOMContentLoaded", () => {
    if (isVerificationStillValid()) return;
    dialog.showModal();
  });

  // Enable/disable submit button based on checkbox
  checkbox.addEventListener("change", () => {
    submitBtn.disabled = !checkbox.checked;
  });

  form.addEventListener("submit", (event) => {
    event.preventDefault();
    const birthYear = parseInt(document.getElementById("birth-year").value, 10);
    const currentYear = new Date().getFullYear();
    const age = currentYear - birthYear;

    if (!birthYear || isNaN(birthYear) || age < legalAge || !checkbox.checked) {
      errorMsg.style.display = "block";
      return;
    }

    saveVerificationStatus();
    dialog.close();
  });
</script>

Vyšnaitė ant torto - Google Sign in (GoogleAuth.astro)

O tam, jog autorizacija nebūtų pernelyg nuobodi ar paprasta, galima pridėti ir paprastą Google Sign in mygtuką, kurio dėka nebūtų renkami papildomi duomenys, išskyrus prisijungimo konfirmacijos faktą.

Vartotojui prisijungus prie paskyros pakanka tiesiog sukurti atitinkamą vardų porų reikšmę localstorage (vietinėje) naršyklės saugykloje (daugiau apie tai localstorage property: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).

<style>
  dialog#auth-modal {
    border: none;
    padding: 0;
    background: transparent;
    width: 100%;
    height: 100vh;
    word-wrap:wrap !important;
  }

  #auth-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  #auth-content {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    width: 100%;
    height: 100vh;
    min-width: 100%;
  }

  #auth-content h2 {
    margin: 1rem 0 2rem;
    color: #000 !important;
    margin-top:26vh;
  }

  .g_id_signin {
    display: inline-block;
    margin: 0 auto;
  }
</style>

<!-- Google Identity Services -->
<script src="https://accounts.google.com/gsi/client" async defer></script>

<dialog id="auth-modal">
  <div id="auth-backdrop">
    <div id="auth-content">
      <div id="g_id_onload"
           data-client_id="paste your google sign in id here https://console.cloud.google.com/apis/credentials - OAuth 2.0 Client IDs"
           data-context="signin"
           data-callback="handleCredentialResponse"
           data-auto_prompt="false">
      </div>

      <h2>Sign in to access the blog</h2>

      <div class="g_id_signin"
           data-type="standard"
           data-shape="rectangular"
           data-theme="outline"
           data-text="sign_in_with"
           data-size="large"
           data-logo_alignment="left">
      </div>
    </div>
  </div>
</dialog>

<style>
  #toast {
    visibility: hidden;
    min-width: 250px;
    background: #333;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 1rem;
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    z-index: 10000;
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.5s, bottom 0.5s;
  }

  #toast.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px;
  }
</style>

<div id="toast">Successfully signed in!</div>

<script>
  const STORAGE_KEY = "artefaktasblogAuthExpiry";
  const EXPIRY_DURATION = 60 * 60 * 1000; // 1 hour in ms

  function isUserLoggedIn() {
    const expiry = localStorage.getItem(STORAGE_KEY);
    if (!expiry) return false;
    return Date.now() < parseInt(expiry, 10);
  }

  function setUserLoggedIn() {
    const expiryTime = Date.now() + EXPIRY_DURATION;
    localStorage.setItem(STORAGE_KEY, expiryTime);
  }

  function showToast(message) {
    const toast = document.getElementById("toast");
    toast.textContent = message;
    toast.classList.add("show");

    setTimeout(() => {
      toast.classList.remove("show");
    }, 3000); // hides after 3 seconds
  }

  // Google callback
  window.handleCredentialResponse = function(response) {
    console.log("Encoded JWT ID token:", response.credential);
    setUserLoggedIn();
    document.getElementById('auth-modal').close();
    showToast("✅ Successfully signed in!");
  };

  window.addEventListener('DOMContentLoaded', () => {
    const modal = document.getElementById('auth-modal');
    if (!isUserLoggedIn()) {
      modal.showModal();
    }
  });
</script>

#	Žymos
	#post #artefaktas_eu #personal #opinion #web #wall #google #signin

Asmeninė nuomonė.

Linktree link: https://linktr.ee/artefaktas

Tinklaraštį galima prenumeruoti net keletu skirtingų būdų:

- Naudojant RSS sklaidos kanalo nuorodą: https://artefaktas.eu/rss.xml

- Naudojantis follow.it forma

🔞 Age Verification

Please enter your birth year to continue:

I confirm that I am 18 or older.

Submit

Invalid or underage, or confirmation not checked.

Close this ad