app.js

// Facebook Dashboard Post Functionality

function post() {
    var post = document.getElementById("post");
    var description = document.getElementById("description")
    var image = document.getElementById("file")
    var file =  image.files[0]
    var imgUrl = URL.createObjectURL(file)

    post.innerHTML += `
    <div class="post-box-2 my-3">
                    <div class="d-flex justify-content-between" style="padding: 7px 13px;">
                        <div class="links d-flex align-items-center gap-2 py-1">
                            <img width="40px"
                                src="./assets/user-profile-icon-vector-avatar-600nw-2558760599-removebg-preview.png"
                                alt="">
                            <div class="d-flex flex-column gap-1">
                                <p class="menu-text">Ayan Zaveri</p>
                                <div class="d-flex align-items-center gap-2">
                                    <p class="public">13h</p>
                                    <img height="12px"
                                        src="https://static.xx.fbcdn.net/rsrc.php/v4/y5/r/qop9rFQ_Ys1.png?_nc_eui2=AeHJXVfQv0zgxugaFCigGg6IRdYIPs78prZF1gg-zvymtqzrD4TGfDbEjTtLVLRz-zonVXl9UN-9-PjSVoY5H5jl"
                                        alt="">
                                </div>
                            </div>
                        </div>
                        <div class="post-icons d-flex gap-3 p-2">
                            <svg viewBox="0 0 20 20" width="20" height="20" fill="currentColor"
                                class="x14rh7hd x1lliihq x1tzjh5l x1k90msu x2h7rmj x1qfuztq"
                                style="--x-color: var(--secondary-icon);">
                                <g fill-rule="evenodd" transform="translate(-446 -350)">
                                    <path
                                        d="M458 360a2 2 0 1 1-4 0 2 2 0 0 1 4 0m6 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-12 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0">
                                    </path>
                                </g>
                            </svg>
                            <svg id="remove" viewBox="0 0 20 20" width="20" height="20" fill="currentColor" aria-hidden="true"
                                class="x14rh7hd x1lliihq x1tzjh5l x1k90msu x2h7rmj x1qfuztq"
                                style="--x-color: var(--secondary-icon);">
                                <path
                                    d="M15.543 3.043a1 1 0 1 1 1.414 1.414L11.414 10l5.543 5.542a1 1 0 0 1-1.414 1.415L10 11.414l-5.543 5.543a1 1 0 0 1-1.414-1.415L8.586 10 3.043 4.457a1 1 0 1 1 1.414-1.414L10 8.586l5.543-5.543z">
                                </path>
                            </svg>
                        </div>
                    </div>
                    <div class="main-post">
                        <div style="padding: 0px 13px;">
                            <p> ${description.value} </p>
                        </div>
                        <div class="post-div">
                            <img class="post-img"
                                src="${imgUrl}"
                                alt="">
                        </div>
                    </div>
                </div>
                `;


    description.value = " "
    image.files = " "
}

// Toggle Eye Functionality

let eyeIcon = document.getElementById("togglePassword")
eyeIcon.onclick = passtoggle

function passtoggle() {
    let pass = document.getElementById("password")
    if (pass.type === "password") {
        pass.type = "text"
        eyeIcon.className = "fa-regular fa-eye"
    } else {
        pass.type = "password"
        eyeIcon.className = "fa-regular fa-eye-slash"
    }
}


// Register Functionality

function emptyfields() {
    let firstName = document.getElementById("firstName").value = ""
    let surName = document.getElementById("surName").value = ""
    let day = document.getElementById("day").value = "Day"
    let month = document.getElementById("month").value = "Month"
    let year = document.getElementById("year").value = "Year"
    let gender = document.getElementsByName("gender")
    let email = document.getElementById("email").value = ""
    let password = document.getElementById("password").value = ""
}

function passGen() {
    let char = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
    let numbers = "1234567890"
    let specialChar = "!@#$%^&*()-_=+][{}|;:<>.,?/"
    let passLength = 3
    let pass = ""
    for (let i = 0; i < passLength; i++) {
        let ranIndex1 = Math.floor(Math.random() * char.length)
        let ranIndex2 = Math.floor(Math.random() * numbers.length)
        let ranIndex3 = Math.floor(Math.random() * specialChar.length)
        pass += char[ranIndex1] + numbers[ranIndex2] + specialChar[ranIndex3]
    }

    let password = document.getElementById("password").value = pass
    console.log(password)
}

function signUp() {
    let firstName = document.getElementById("firstName").value
    let surName = document.getElementById("surName").value
    let day = document.getElementById("day").value
    let month = document.getElementById("month").value
    let year = document.getElementById("year").value
    let gender = document.getElementsByName("gender")
    let email = document.getElementById("email").value.trim()
    let emailRegEx = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
    let password = document.getElementById("password").value
    let nunRegEx = /(?=.*\d)/
    let speRegEx = /(?=.*[!@#$%^&()`~\-_'+=,.?":{}|<>])/
    let missing = [];

    if (firstName === "" && surName === "") {
        Swal.fire({
            icon: "error",
            title: "Enter Your Full Name!!!",
            text: "Please Enter Your Full Name!",
        });
        return
    }

    if (firstName.trim() === "") missing.push("First Name")
    if (surName.trim() === "") missing.push("Sur Name")

    if (missing.length > 0) {
        Swal.fire({
            icon: "error",
            title: "Enter Your Full Name Correctly",
            text: "Please Enter Your " + missing.join(", ")
        });
        return;
    }

    if (day === "Day" && month === "Month" && year === "Year") {
        Swal.fire({
            icon: "error",
            title: "Enter Your Date Of Birth!!!",
            text: "Please Enter Your Date Of Birth Correctly!",
        });
        return
    }

    if (day === "Day") missing.push("Day");
    if (month === "Month") missing.push("Month");
    if (year === "Year") missing.push("Year");

    if (missing.length > 0) {
        Swal.fire({
            icon: "error",
            title: "Incomplete Date of Birth",
            text: "Please select: " + missing.join(", ")
        });
        return;
    }

    let userGender = ""
    for (let i = 0; i < gender.length; i++) {
        if (gender[i].checked) {
            userGender = gender[i].value
        }
    }

    if (!userGender) {
        Swal.fire({
            icon: "error",
            title: "Enter Your Gender!!!",
            text: "Please Enter Your Gender Correctly!",
        });
        return
    }

    if (email === "") {
        Swal.fire({
            icon: "error",
            title: "Enter Your Email!!!",
            text: "Please Enter Your Email!",
        });
        return
    }

    if (!emailRegEx.test(email)) {
        Swal.fire({
            icon: "error",
            title: "Enter Correct Email!!!",
            text: "Please Enter Your Email Correctly!",
        });
        return
    }

    if (password === "") {
        Swal.fire({
            icon: "error",
            title: "Enter Your Password!!!",
            text: "Please Enter Your Password!",
        });
        return
    }

    if (password.length < 9) missing.push("Atleast 9 Characters")
    if (!nunRegEx.test(password)) missing.push("Atleast Enter one number")
    if (!speRegEx.test(password)) missing.push("Atleast Enter one Special Character")

    if (missing.length > 0) {
        Swal.fire({
            icon: "error",
            title: "Enter a Stronger PIN!!!",
            html: "Please enter:<br><br>" + missing.join("<br>") + " in your Password",
        });
        return
    }


    let user = true;
    let usersData = JSON.parse(localStorage.getItem("Data"))

    for (let i = 0; i < usersData.length; i++) {
        if (email === usersData[i].email) {
            user = false
            Swal.fire({
                icon: "error",
                title: "User Already Registered",
                text: "Log In",
                footer: '<a class="forgot-link-2" href="./account.html">Log In</a>'
            });
            break
        }
    }
    if (user) {
        Swal.fire({
            icon: "success",
            title: "Succesfully Registered In!!!",
            text: "Congrats!!! You Have Succesfully Registered",
        });

        let data = {
            fName: firstName,
            sName: surName,
            email: email,
            pass: password,
            gender: userGender,
            dob: `${day}-${month}-${year}`
        }

        console.log(data)

        let usersArr = JSON.parse(localStorage.getItem("Data")) || [];
        usersArr.push(data)
        localStorage.setItem("Data", JSON.stringify(usersArr))

        emptyfields()

        setTimeout(function () {
            window.location.href = "/dashboard.html"
        }, 3000)
    }
}

// Login Functionality

function login() {
    let email = document.getElementById("email").value.trim()
    let password = document.getElementById("password").value.trim()
    let usersData = JSON.parse(localStorage.getItem("Data"))
    let user = false
    let missing = []

    if (email === "" && password === "") {
        Swal.fire({
            icon: "error",
            title: "Fill in both the Fields!!!",
            text: "Please Fill in all the Fields!",
            footer: '<a class="forgot-link-2" href="./account.html">Register your account</a>'
        });
        return
    }

    if (password === "") missing.push("Password")
    if (email === "") missing.push("Email")

    if (missing.length > 0) {
        Swal.fire({
            icon: "error",
            title: "Enter your " + missing.join() + "!!!",
            text: "Please Enter your: " + missing.join(),
            footer: '<a class="forgot-link-2" href="./account.html">Register your account</a>'
        });
        return
    }

    for (let i = 0; i < usersData.length; i++) {
        // console.log(usersData[i].email)
        if (email === usersData[i].email && password === usersData[i].pass) {
            user = true
            Swal.fire({
                icon: "success",
                title: "Succesfully Logged In",
                text: "You will be redirected shortly"
            });

            setTimeout(function () {
                window.location.href = "./dashboard.html"
            }, 3000)
            break
        }
        if (!user) {
            Swal.fire({
                icon: "error",
                title: "Invalid Credentials",
                text: "Please Enter correct Email or Password",
                footer: '<a class="forgot-link-2" href="./account.html">Register your account</a>'
            });
        }
    }
}