script.js

// Funktion för att ladda in ikoner fån Ionicons CDN
function loadIonicons() {
  // ESM-versionen (för moderna webbläsare) ESM = EcmaScript Module gör så att man kan importera och exportera moduler i JavaScript från externa filer
  const scriptModule = document.createElement('script'); // Skapa ett script-element
  scriptModule.type = 'module'; // Sätt typ till module för att ladda ESM-versionen, vilket gör att den kan importeras som en modul i JavaScript
  scriptModule.src = 'https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js'; // Sätt källan till ESM-versionen av Ionicons, sourcen är en CDN-länk som pekar på den senaste versionen av Ionicons
  document.head.appendChild(scriptModule); // Lägg till script-elementet i dokumentets head för att ladda det

  // Nomodule-versionen (för äldre webbläsare)
  const scriptNoModule = document.createElement('script');
  scriptNoModule.setAttribute('nomodule', ''); // Sätt nomodule-attributet för att indikera att detta script endast ska laddas i webbläsare som inte stödjer ESM
  scriptNoModule.src = 'https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js';
  document.head.appendChild(scriptNoModule); // Lägg till nomodule-versionen av Ionicons i dokumentets head, vilket säkerställer att äldre webbläsare också kan använda ikonerna
}

loadIonicons();

function showProfile() {
    document.querySelector('#login-view') .style.display = 'none'; // Dölj inloggningsvyn, elementet tas bort helt från sidans layout. Det syns inte och tar ingen plats.
    document.querySelector('#profile-view') .style.display = 'block'; // Visa den personliga sidan, funktionen svisar ett element som tidigare har varit dolt som ett "block-element".
    
}

function clearInputs() {
    document.querySelector('#user-mail').value = ''; // Rensa e-postinputfältet genom att sätta dess värde till en tom sträng
    document.querySelector('#user-password').value = ''; // Rensa lösenordsinputfältet genom att sätta dess värde till en tom sträng
}

function checkLoginStatus() {
    const status = localStorage.getItem("isLoggedIn"); // Hämta värdet från localStorage som indikerar om användaren är inloggad eller inte
    
    if (status === "true") {
        // Om inloggningsstatusen är "true", visa den personliga sidan
        showProfile();
        console.log("Användaren är inloggad.");
    } else {
        console.log("Ingen inloggningsstatus hittades.");
    }
}
// Funktion för att hantera inloggning
const testEmail = "test@example.com"; // hårdkodad e-postadress för testning
const testPassword = "password123"; // hårdkodat lösenord för testning

function handleLogin(event) {
    event.preventDefault(); // Förhindra att formuläret skickas på vanligt sätt

    const email = document.querySelector('#user-mail') .value; // Hämta e-postvärdet från inputfältet
    const password = document.querySelector('#user-password') .value; // Hämta lösenordsvärdet från inputfältet
    // Kontrollera om den angivna e-posten och lösenordet matchar de hårdkodade testvärdena
    if (email === testEmail && password === testPassword) {
        
        localStorage.setItem('isLoggedIn', 'true'); // Spara inloggningsstatus i localStorage
        localStorage.setItem('user-email', email); // Spara inloggad användare i localStorage
        alert("Välkommen, " + email + "!");
        showProfile();
        clearInputs();
    } else {
        alert("Felaktig e-post eller lösenord. Försök igen.");
    }
}

function logout() {
    document.querySelector('#login-view').style.display = 'block'; // Visa inloggningsvyn igen
    document.querySelector('#profile-view').style.display = 'none'; // Dölj den personliga sidan
    localStorage.setItem('isLoggedIn', 'false'); // Uppdatera inloggningsstatus i localStorage
}


checkLoginStatus();