{"id":481,"date":"2025-06-27T08:31:24","date_gmt":"2025-06-27T08:31:24","guid":{"rendered":"http:\/\/localhost\/ahwordpress\/?page_id=481"},"modified":"2025-12-18T07:05:53","modified_gmt":"2025-12-18T07:05:53","slug":"login-page-updated","status":"publish","type":"page","link":"https:\/\/my-iot-ai.com\/Sunway\/","title":{"rendered":"Login page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"481\" class=\"elementor elementor-481\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e6e3512 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"e6e3512\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fb9df28 elementor-widget elementor-widget-html\" data-id=\"fb9df28\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<?php\r\nif ( ! defined( 'ABSPATH' ) ) exit;\r\n\r\nclass Custom_Login_Widget extends \\Elementor\\Widget_Base {\r\n\r\n    public function get_name() {\r\n        return 'custom_login_box';\r\n    }\r\n\r\n    public function get_title() {\r\n        return __( 'Custom Login Box', 'clw' );\r\n    }\r\n\r\n    public function get_icon() {\r\n        return 'eicon-lock-user';\r\n    }\r\n\r\n    public function get_categories() {\r\n        return [ 'general' ];\r\n    }\r\n\r\n    protected function render() {\r\n        ?>\r\n\r\n        <div class=\"clw-login-box\">\r\n\r\n            <div class=\"login-logo\">\r\n                <img decoding=\"async\" src=\"https:\/\/my-iot-ai.com\/Sunway\/wp-content\/uploads\/2025\/11\/Sunway_logo-Edited-1-scaled.png\">\r\n            <\/div>\r\n\r\n            <h2>Sunway Microgrid System<\/h2>\r\n\r\n            <form id=\"clw-login-form\" autocomplete=\"off\">\r\n\r\n                <input type=\"text\" name=\"username\" placeholder=\"Username\" required>\r\n\r\n                <!-- PASSWORD FIELD -->\r\n                <div class=\"clw-input-wrapper\">\r\n                    <input\r\n                        type=\"password\"\r\n                        name=\"password\"\r\n                        class=\"clw-password\"\r\n                        placeholder=\"Password\"\r\n                        required\r\n                    >\r\n                    <span class=\"clw-eye\"><\/span>\r\n                <\/div>\r\n\r\n                <label class=\"clw-remember\">\r\n                    <input type=\"checkbox\"> Keep me logged in\r\n                <\/label>\r\n\r\n                <div class=\"clw-buttons\">\r\n                    <button type=\"submit\" class=\"login-btn\">Log In<\/button>\r\n                <\/div>\r\n\r\n            <\/form>\r\n\r\n            <div id=\"clw-message\" class=\"clw-message\"><\/div>\r\n        <\/div>\r\n\r\n        <!-- ================= JS ================= -->\r\n        <script>\r\n        jQuery(document).ready(function ($) {\r\n\r\n            \/* ===== PASSWORD EYE TOGGLE (ELEMENTOR SAFE) ===== *\/\r\n            $(document).on('click', '.clw-eye', function () {\r\n\r\n                const $wrapper = $(this).closest('.clw-input-wrapper');\r\n                const $input   = $wrapper.find('input');\r\n                const isPwd    = $input.attr('type') === 'password';\r\n\r\n                $input.attr('type', isPwd ? 'text' : 'password');\r\n                $(this).toggleClass('active');\r\n\r\n            });\r\n\r\n            \/* ===== AJAX LOGIN ===== *\/\r\n            $('#clw-login-form').on('submit', function (e) {\r\n                e.preventDefault();\r\n\r\n                $('#clw-message')\r\n                    .text('Authenticating...')\r\n                    .css('color','#ffeb99');\r\n\r\n                $.ajax({\r\n                    url: clw_ajax.ajax_url,\r\n                    type: 'POST',\r\n                    dataType: 'json',\r\n                    data: {\r\n                        action: 'clw_authenticate_user',\r\n                        username: $('input[name=\"username\"]').val(),\r\n                        password: $('.clw-password').val()\r\n                    },\r\n                    success: function (res) {\r\n                        if (res.success) {\r\n                            $('#clw-message')\r\n                                .text('Login successful')\r\n                                .css('color','#90ee90');\r\n                            setTimeout(() => {\r\n                                window.location.href = res.data.redirect;\r\n                            }, 1200);\r\n                        } else {\r\n                            $('#clw-message')\r\n                                .text(res.data.message)\r\n                                .css('color','#ff6666');\r\n                        }\r\n                    }\r\n                });\r\n            });\r\n\r\n        });\r\n        <\/script>\r\n\r\n        <!-- ================= CSS ================= -->\r\n        <style>\r\n        \/* ===== BOX ===== *\/\r\n        .clw-login-box {\r\n            width: 340px;\r\n            background: #1b1e3b;\r\n            padding: 35px;\r\n            border-radius: 14px;\r\n            color: #fff;\r\n            text-align: center;\r\n            margin: auto;\r\n        }\r\n\r\n        h2 {\r\n            color: #4da6ff;\r\n            margin-bottom: 25px;\r\n        }\r\n\r\n        \/* ===== INPUTS ===== *\/\r\n        input[type=\"text\"],\r\n        input[type=\"password\"] {\r\n            width: 100%;\r\n            padding: 12px 42px 12px 12px;\r\n            border-radius: 8px;\r\n            border: none;\r\n            background: #eef3ff;\r\n            font-size: 14px;\r\n            margin-bottom: 15px;\r\n            outline: none;\r\n        }\r\n\r\n        \/* ===== INPUT + EYE ===== *\/\r\n        .clw-input-wrapper {\r\n            position: relative;\r\n        }\r\n\r\n        .clw-eye {\r\n            position: absolute;\r\n            right: 14px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            cursor: pointer;\r\n            user-select: none;\r\n        }\r\n\r\n       \/* ===== EYE CONTAINER ===== *\/\r\n\/* ===== INPUT WRAPPER ===== *\/\r\n.clw-input-wrapper {\r\n    position: relative;\r\n}\r\n\r\n\/* ===== EYE: CENTER-RIGHT OF PLACEHOLDER TEXT ===== *\/\r\n.clw-eye {\r\n    position: absolute;\r\n    right: 14px;                \/* same as input padding *\/\r\n    top: 40%;\r\n    transform: translateY(-56%); \/* fine-tuned for placeholder baseline *\/\r\n    cursor: pointer;\r\n    user-select: none;\r\n    width: 20px;\r\n    height: 20px;\r\n    z-index: 2;\r\n}\r\n\r\n\/* \ud83d\udc41 EYE ICON *\/\r\n.clw-eye::after {\r\n    content: \"\ud83d\udc41\";\r\n    font-size: 18px;\r\n    color: #666;\r\n    position: absolute;\r\n    inset: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n\/* ===== ANIMATED SLASH ===== *\/\r\n.clw-eye::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    width: 2px;\r\n    height: 0;\r\n    background: #666;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%) rotate(-45deg);\r\n    border-radius: 2px;\r\n    transition: height 0.25s ease;\r\n}\r\n\r\n\/* PASSWORD HIDDEN *\/\r\n.clw-eye:not(.active)::before {\r\n    height: 24px;\r\n}\r\n\r\n\/* PASSWORD VISIBLE *\/\r\n.clw-eye.active::before {\r\n    height: 0;\r\n}\r\n\r\n\/* ACTIVE COLOR *\/\r\n.clw-eye.active::after {\r\n    color: #0056ff;\r\n}\r\n\r\n.clw-eye.active::before {\r\n    background: #0056ff;\r\n}\r\n\r\n\r\n\r\n        \/* ===== REMEMBER ===== *\/\r\n        .clw-remember {\r\n            font-size: 13px;\r\n            display: flex;\r\n            align-items: center;\r\n            margin-bottom: 18px;\r\n        }\r\n\r\n        .clw-remember input {\r\n            margin-right: 8px;\r\n        }\r\n\r\n        \/* ===== BUTTON ===== *\/\r\n        .login-btn {\r\n            width: 100%;\r\n            background: #0056ff;\r\n            border: none;\r\n            padding: 12px;\r\n            border-radius: 8px;\r\n            color: #fff;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n        }\r\n\r\n        .login-btn:hover {\r\n            background: #003fcc;\r\n        }\r\n\r\n        \/* ===== MESSAGE ===== *\/\r\n        .clw-message {\r\n            margin-top: 12px;\r\n            font-size: 14px;\r\n            min-height: 20px;\r\n        }\r\n\r\n        .login-logo img {\r\n            max-width: 240px;\r\n            margin-bottom: 15px;\r\n            margin-left: 15px;\r\n        }\r\n        <\/style>\r\n\r\n        <?php\r\n    }\r\n}\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Sunway Microgrid System Keep me logged in Log In<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-481","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/my-iot-ai.com\/Sunway\/wp-json\/wp\/v2\/pages\/481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/my-iot-ai.com\/Sunway\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/my-iot-ai.com\/Sunway\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/my-iot-ai.com\/Sunway\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/my-iot-ai.com\/Sunway\/wp-json\/wp\/v2\/comments?post=481"}],"version-history":[{"count":233,"href":"https:\/\/my-iot-ai.com\/Sunway\/wp-json\/wp\/v2\/pages\/481\/revisions"}],"predecessor-version":[{"id":5280,"href":"https:\/\/my-iot-ai.com\/Sunway\/wp-json\/wp\/v2\/pages\/481\/revisions\/5280"}],"wp:attachment":[{"href":"https:\/\/my-iot-ai.com\/Sunway\/wp-json\/wp\/v2\/media?parent=481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}