<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8" />
    <title>Log In | Watify - WhatsApp Automation Tool</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc." />
    <meta name="author" content="Zoyothemes" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- App favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="https://watify.io/assets/img/apple-touch-icon.png">

    <link rel="icon" type="image/png" sizes="32x32" href="https://watify.io/assets/img/favicon-32x32.png">

    <link rel="icon" type="image/png" sizes="16x16" href="https://watify.io/assets/img/favicon-16x16.png">

    <link rel="mask-icon" color="#6366f1" href="https://watify.io/assets/img/favicon.ico">
    <link rel="stylesheet" href="assets/plugins/notifications/css/lobibox.min.css" />
    <!-- App css -->
    <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="app-style" />

    <!-- Icons -->
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />

    <script src="assets/js/head.js"></script>


</head>

<body>
    <!-- Begin page -->
    <div class="account-page">
        <div class="container-fluid p-0">
            <div class="row justify-content-center align-items-center g-0 px-3 py-3 vh-100">

                <div class="col-xl-5">
                    <div class="row">
                        <div class="col-md-8 col-sm-12 mx-auto">
                            <div class="card">
                                <div class="card-body">
                                    <div class="mb-0 p-0 p-lg-3">
                                        <div class="mb-0 border-0 p-md-4 p-lg-0">
                                            <div class="mb-4 p-0 text-lg-start text-center">
                                                <div class="auth-brand">
                                                    <a href="index.html" class="logo logo-light">
                                                        <span class="logo-lg">
                                                            <img src="https://watify.io/assets/watifyLogo.png" alt="" height="50">
                                                        </span>
                                                    </a>
                                                    <a href="index.html" class="logo logo-dark">
                                                        <span class="logo-lg">
                                                            <img src="https://watify.io/assets/watifyLogo.png" alt="" height="50">
                                                        </span>
                                                    </a>
                                                </div>
                                            </div>

                                            <div class="auth-title-section mb-4 text-lg-start text-center">
                                                <h3 class="text-dark fw-semibold mb-3">Set Password</h3>
                                                <p class="text-muted fs-14 mb-0">Protect your account with a strong password. Set it now to keep your data secure and stay one step ahead of threats!</p>
                                            </div>

                                            <div class="pt-0">
                                                <form class="my-4" id="loginForm">
                                                    <div class="form-group mb-3">
                                                        <label for="password" class="form-label">Password</label>
                                                        <input class="form-control" type="password" id="password" required="" placeholder="Enter your password">
                                                    </div>

                                                    <div class="form-group mb-3">
                                                        <label for="confirmpassword" class="form-label">Confirm Password</label>
                                                        <input class="form-control" type="password" required="" id="confirmpassword" placeholder="Confirm Password">
                                                    </div>

                                                    <div class="form-group mb-0 row">
                                                        <div class="col-12">
                                                            <div class="d-grid">
                                                                <button class="btn btn-primary fw-semibold" type="button" id="loginBtn"> Confirm </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- END wrapper -->

    <!-- Vendor -->
    <script src="assets/libs/jquery/jquery.min.js"></script>
    <script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="assets/libs/simplebar/simplebar.min.js"></script>
    <script src="assets/libs/node-waves/waves.min.js"></script>
    <script src="assets/libs/waypoints/lib/jquery.waypoints.min.js"></script>
    <script src="assets/libs/jquery.counterup/jquery.counterup.min.js"></script>
    <script src="assets/libs/feather-icons/feather.min.js"></script>
    <script src="assets/plugins/notifications/js/lobibox.min.js"></script>
    <script src="assets/plugins/notifications/js/notifications.min.js"></script>
    <script src="assets/plugins/notifications/js/notification-custom-script.js"></script>
    <!-- App js-->
    <script src="assets/js/app.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let loginBtn = document.getElementById("loginBtn");

            // Function to extract email from URL
            function getEmailFromUrl() {
                const params = new URLSearchParams(window.location.search);
                return params.get("email"); // Extract email from ?email=...
            }

            function login() {
                let password = document.getElementById("password").value;
                let confirmPasswd = document.getElementById("confirmpassword").value;
                let validationCode = getEmailFromUrl(); // Get email from URL

                if (!validationCode) {
                    round_error_noti("Invalid email. Please use the correct link.");
                    return;
                }

                if (confirmPasswd !== password) {
                    round_error_noti("Please check your password");
                    return; // Stop execution if passwords don't match
                }

                fetch("https://app.watify.io/server/save_new_user_pswd", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify({
                            validationCode,
                            password: password
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === "success") {
                            round_success_noti('password set  Successfully');
                            setTimeout(() => {
                                window.location.href = "https://app.watify.io/auth-login";
                            }, 3000);
                        } else {
                            round_error_noti("An Error Occurred");
                        }
                    })
                    .catch(error => console.error("Error:", error));
            }

            // Click event for login button
            loginBtn.addEventListener("click", login);

            // Enter key event for input fields
            document.addEventListener("keydown", function(event) {
                if (event.key === "Enter") {
                    login();
                }
            });
        });
    </script>

</body>

</html>