morecabinetprojects Testing for All the stuff

Forgot Password

<div class="gl-forgot-page">    <div class="gl-forgot-container">                <a href="/login" class="gl-back-link">            <i class="fas fa-arrow-left"></i> Back to Login        </a>                <div class="gl-forgot-card">                        <div class="gl-forgot-logo">                <i class="fas fa-lock"></i>            </div>                        <h1 class="gl-forgot-title">Forgot Password?</h1>            <p class="gl-forgot-subtitle">Enter your email address and we'll send you a reset code.</p>                        <div id="glFormContainer">                                <form id="forgotPasswordForm" novalidate>                    <div class="form-group">                        <label for="email">Email Address</label>                        <input type="email" class="form-control gl-input" id="email" placeholder="Enter your email address" autocomplete="email">                        <div class="invalid-feedback" id="emailError"></div>                    </div>                    <button type="submit" class="btn btn-primary btn-block gl-btn" id="sendBtn">                        <span class="btn-text">Send Reset Email</span>                        <span class="btn-loading d-none">                            <span class="spinner-border spinner-border-sm"></span>                            Sending...                        </span>                    </button>                </form>            </div>        </div>    </div></div><style>    .gl-forgot-page {        width: 100%;        min-height: 100vh;        padding: 40px 20px;        background: linear-gradient(135deg, #f4f7fb 0%, #eef2f7 100%);    }    .gl-forgot-container {        width: 100%;        max-width: 430px;        margin: 0 auto;    }    .gl-back-link {        display: inline-flex;        align-items: center;        gap: 8px;        margin-bottom: 20px;        text-decoration: none !important;        color: #4a5568;        font-size: 14px;        transition: 0.2s ease;    }    .gl-back-link:hover {        color: #1a202c;    }    .gl-forgot-card {        background: #ffffff;        border-radius: 16px;        padding: 35px;        border: 1px solid #edf2f7;        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);    }    .gl-forgot-logo {        width: 82px;        height: 82px;        border-radius: 14px;        background: #edf2f7;        display: flex;        align-items: center;        justify-content: center;        margin: 0 auto 20px;        font-size: 28px;        color: #4a5568;    }    .gl-forgot-title {        text-align: center;        font-size: 28px;        font-weight: 700;        margin-bottom: 8px;        color: #1a202c;    }    .gl-forgot-subtitle {        text-align: center;        color: #718096;        font-size: 15px;        margin-bottom: 30px;    }    .gl-forgot-card label {        font-size: 14px;        font-weight: 600;        margin-bottom: 8px;        color: #2d3748;    }    .gl-input {        height: 48px;        border-radius: 10px;        border: 1px solid #dce3eb;        padding-left: 15px;        padding-right: 45px;        transition: 0.2s ease;    }    .gl-input:focus {        border-color: #4c6fff;        box-shadow: 0 0 0 0.15rem rgba(76, 111, 255, 0.15);    }    .gl-btn {        height: 50px;        border-radius: 10px;        border: none;        background: #4c6fff;        font-weight: 600;        transition: 0.2s ease;    }    .gl-btn:hover {        background: #3c5ce7;    }    .gl-btn:disabled {        opacity: 0.8;        cursor: not-allowed;    }    .gl-btn>.btn-text {        display: inline-block !important;    }    .spinner-border-sm {        width: 1rem;        height: 1rem;        margin-right: 8px;    }    .invalid-feedback {        display: none;        font-size: 13px;    }    .invalid-feedback.d-block {        display: block;    }    .gl-password-wrapper {        position: relative;    }    .gl-toggle-password {        position: absolute;        top: 50%;        right: 14px;        transform: translateY(-50%);        cursor: pointer;        color: #718096;    }    .gl-toast {        position: fixed;        top: 20px;        right: 20px;        z-index: 99999;        min-width: 320px;        max-width: 400px;        background: #fff;        border-left: 5px solid #28a745;        border-radius: 6px;        padding: 15px;        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);        opacity: 1;        transition: 0.3s ease;    }    .gl-toast-title {        font-weight: 700;        margin-bottom: 5px;    }    @media (max-width: 575px) {        .gl-forgot-page {            padding: 25px 15px;        }        .gl-forgot-card {            padding: 25px;        }    }</style><script>    $(document).ready(function () {        setAppBaseUrl();        console.log("window.APP_BASE_URL", window.APP_BASE_URL);        const glBackLink = document.querySelector(".gl-back-link");        if (window.APP_BASE_URL && glBackLink) {            const targetPath = glBackLink.getAttribute("href") || "/";            glBackLink.href = `${window.APP_BASE_URL.replace(/\/$/, '')}${targetPath}`;        }    });    /* ==========================================    CONSTANTS    ========================================== */    const APP_NAME = getCookie("app_u_app_name") || "";    const API_BASE = `https://api.owlapplicationbuilder.com/appsbuilder/${APP_NAME}/objectsbuilder`;    console.log(APP_NAME);    /* ==========================================    HELPERS    ========================================== */    function getCookie(name) {        const value = `; ${document.cookie}`;        const parts = value.split(`; ${name}=`);        if (parts.length === 2) {            return parts.pop().split(';').shift();        }        return '';    }    function setAppBaseUrl() {        const appsettings = window.__NEXT_DATA__?.props?.pageProps?.contentRes?.app_settings || {};        const NEXTJS_BASE_URL = window.__NEXT_DATA__?.props?.pageProps?.env?.NEXT_PUBLIC_NEXT_URL || "https://next.owlapplicationbuilder.com";        const app_name = getCookie("app_u_app_name") || "";        let domain = String(appsettings.domain || "").trim();        let view_url = String(appsettings.view_url || "").trim();        const finalUrl = domain            ? (/^https?:\/\//i.test(domain)                ? domain : `https://${domain}`)            : (view_url || `${NEXTJS_BASE_URL}/appsbuilder/${app_name}/objectsbuilder`);        window.APP_BASE_URL = finalUrl;        return finalUrl;    }    function isValidEmail(email) {        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;        return emailRegex.test(email);    }    function isStrongPassword(password) {        const hasUpperCase = /[A-Z]/.test(password);        const hasLowerCase = /[a-z]/.test(password);        const hasDigit = /[0-9]/.test(password);        const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);        return hasUpperCase && hasLowerCase && hasDigit && hasSpecialChar;    }    /* ==========================================    TOAST    ========================================== */    function showToast(title, description, type = "success") {        const borderColor = type === "success" ? "#28a745" : "#dc3545";        const toast = document.createElement("div");        toast.className = "gl-toast";        toast.style.borderLeftColor = borderColor;        toast.innerHTML = `            <div class="gl-toast-title">                ${title}            </div>            <div>                ${description}            </div>        `;        document.body.appendChild(toast);        setTimeout(() => {            toast.style.opacity = "0";            setTimeout(() => {                toast.remove();            }, 300);        }, 3000);    }    /* ==========================================    BUTTON LOADING    ========================================== */    function setButtonLoading(button, loading = true) {        const btnText = button.querySelector(".btn-text");        const btnLoading = button.querySelector(".btn-loading");        if (loading) {            button.disabled = true;            btnText.classList.add("d-none");            btnLoading.classList.remove("d-none");        } else {            button.disabled = false;            btnText.classList.remove("d-none");            btnLoading.classList.add("d-none");        }    }    /* ==========================================    SEND RESET EMAIL    ========================================== */    $(document).on("submit", "#forgotPasswordForm", function (e) {        e.preventDefault();        const emailInput = document.getElementById("email");        const emailError = document.getElementById("emailError");        const sendBtn = document.getElementById("sendBtn");        const email = emailInput.value.trim();        emailError.textContent = "";        emailError.classList.remove("d-block");        emailInput.classList.remove("is-invalid");        /* Validate */        if (!email) {            emailInput.classList.add("is-invalid");            emailError.textContent = "Email address is required.";            emailError.classList.add("d-block");            return;        }        if (!isValidEmail(email)) {            emailInput.classList.add("is-invalid");            emailError.textContent = "Please enter a valid email address.";            emailError.classList.add("d-block");            return;        }        setButtonLoading(sendBtn, true);        const app_name = getCookie("app_u_app_name") || "";        const apiKey = getCookie(`${app_name}_apikey`) || "";        fetch(`${API_BASE}/user/forgotpassword`, {            method: "POST",            headers: {                "Accept": "*/*",                "Content-Type": "application/json",                "X-API-KEY": apiKey            },            body: JSON.stringify({                email: email,                etemplate: "forget-password"            })        })            .then((response) => {                if (!response.ok) {                    throw new Error("Network response was not ok");                }                return response.json();            })            .then((data) => {                setButtonLoading(sendBtn, false);                console.log(data);                if (data.status == true) {                    showToast("Email Sent Successfully!", "Please check your email for reset instructions.", "success");                    renderResetPasswordForm(email);                } else {                    showToast("Error", data.message || "Failed to send reset email.", "error");                }            })            .catch((error) => {                console.log(error);                setButtonLoading(sendBtn, false);                showToast("Error", "Failed to send reset email.", "error");            });    });    /* ==========================================    RENDER RESET FORM    ========================================== */    function renderResetPasswordForm(email) {        $("#glFormContainer").html(`            <form id="resetPasswordForm" novalidate>                <div class="form-group">                    <label for="resetCode"> Reset Code </label>                    <input type="text" class="form-control gl-input" id="resetCode" placeholder="Enter reset code">                    <div class="invalid-feedback" id="resetCodeError"></div>                </div>                <div class="form-group">                    <label for="newPassword"> New Password </label>                    <div class="gl-password-wrapper">                        <input type="password" class="form-control gl-input" id="newPassword" placeholder="Enter new password" data-v_eye="1">                        <span class="gl-toggle-password">                            <i class="fas fa-eye"></i>                        </span>                    </div>                    <div class="invalid-feedback" id="newPasswordError"></div>                </div>                <div class="form-group">                    <label for="confirmPassword"> Confirm Password </label>                    <div class="gl-password-wrapper">                        <input type="password" class="form-control gl-input" id="confirmPassword" placeholder="Confirm your password" data-v_eye="1">                        <span class="gl-toggle-password">                            <i class="fas fa-eye"></i>                        </span>                    </div>                    <div class="invalid-feedback" id="confirmPasswordError"></div>                </div>                <button type="submit" class="btn btn-primary btn-block gl-btn" id="resetBtn">                    <span class="btn-text"> Reset Password </span>                    <span class="btn-loading d-none">                        <span class="spinner-border spinner-border-sm"></span> Resetting...</span>                </button>            </form>        `);    }    /* ==========================================    PASSWORD TOGGLE    ========================================== */    $(document).on("click", ".gl-toggle-password", function () {        const input = $(this).siblings("input");        const icon = $(this).find("i");        const type = input.attr("type") === "password" ? "text" : "password";        input.attr("type", type);        icon.toggleClass("fa-eye fa-eye-slash");    });    /* ==========================================    RESET PASSWORD    ========================================== */    $(document).on("submit", "#resetPasswordForm", function (e) {        e.preventDefault();        const resetCode = $("#resetCode").val().trim();        const newPassword = $("#newPassword").val().trim();        const confirmPassword = $("#confirmPassword").val().trim();        let hasError = false;        /* Reset Errors */        $(".invalid-feedback").removeClass("d-block").text("");        $(".gl-input").removeClass("is-invalid");        /* Reset Code */        if (!resetCode) {            $("#resetCode").addClass("is-invalid");            $("#resetCodeError").text("Reset code is required.").addClass("d-block");            hasError = true;        }        /* Password */        if (!newPassword) {            $("#newPassword").addClass("is-invalid");            $("#newPasswordError").text("New password is required.").addClass("d-block");            hasError = true;        } else if (newPassword.length < 6) {            $("#newPassword").addClass("is-invalid");            $("#newPasswordError").text("Password must be at least 6 characters.").addClass("d-block");            hasError = true;        } else if (!isStrongPassword(newPassword)) {            $("#newPassword").addClass("is-invalid");            $("#newPasswordError").text("Password must contain uppercase, lowercase, number & special character.").addClass("d-block");            hasError = true;        }        /* Confirm Password */        if (!confirmPassword) {            $("#confirmPassword").addClass("is-invalid");            $("#confirmPasswordError").text("Please confirm your password.").addClass("d-block");            hasError = true;        } else if (newPassword !== confirmPassword) {            $("#confirmPassword").addClass("is-invalid");            $("#confirmPasswordError").text("Passwords do not match.").addClass("d-block");            hasError = true;        }        if (hasError) return;        const resetBtn = document.getElementById("resetBtn");        setButtonLoading(resetBtn, true);        const app_name = getCookie("app_u_app_name") || "";        const apiKey = getCookie(`${app_name}_apikey`) || "";        fetch(`${API_BASE}/api/v1/resetpassword`, {            method: "POST",            headers: {                "Accept": "*/*",                "Content-Type": "application/json",                "X-API-KEY": apiKey            },            body: JSON.stringify({                password: newPassword,                reset_token: resetCode            })        })            .then((response) => {                if (!response.ok) {                    throw new Error("Network response was not ok");                }                return response.json();            })            .then((data) => {                setButtonLoading(resetBtn, false);                if (data && data.status == true) {                    showToast("Password Reset Successfully!","Redirecting to login page...","success");                    setTimeout(() => {                        if (window.APP_BASE_URL) {                            window.location.href = `${window.APP_BASE_URL.replace(/\/$/, '')}/login`;                        } else {                            window.location.href = "/login";                        }                    }, 2500);                } else {                    showToast("Error",data.message || "Failed to reset password.","error");                }            })            .catch((error) => {                console.log(error);                setButtonLoading(resetBtn, false);                showToast("Error","Failed to reset password.","error");            });    });</script>