{"id":52,"date":"2026-03-31T06:35:49","date_gmt":"2026-03-31T06:35:49","guid":{"rendered":"https:\/\/my-iot-ai.com\/transformer_oil\/?page_id=52"},"modified":"2026-04-13T01:45:09","modified_gmt":"2026-04-13T01:45:09","slug":"tnbt-login-2","status":"publish","type":"page","link":"https:\/\/my-iot-ai.com\/transformer_oil\/","title":{"rendered":"tnbt-login"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"52\" class=\"elementor elementor-52\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e7e0508 e-flex e-con-boxed e-con e-parent\" data-id=\"e7e0508\" data-element_type=\"container\" data-e-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-a7e7d51 elementor-widget elementor-widget-html\" data-id=\"a7e7d51\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"tnbt-login-wrapper\" id=\"loginWrapper\">\r\n    <div class=\"tnbt-login-card\">\r\n        <div class=\"top-bar\">\r\n            <h2>Transformer Oil Portal<\/h2>\r\n            <button id=\"darkModeToggle\">\ud83c\udf19<\/button>\r\n        <\/div>\r\n\r\n        <p class=\"subtitle\">Login to access your monitoring dashboard<\/p>\r\n\r\n        <div id=\"tnbt-login-message\"><\/div>\r\n\r\n        <form id=\"tnbt-login\">\r\n            \r\n            <div class=\"input-group\">\r\n                <input type=\"text\" name=\"username\" placeholder=\"Username\" required>\r\n            <\/div>\r\n\r\n            <div class=\"input-group password-group\">\r\n                <input type=\"password\" name=\"password\" id=\"passwordField\" placeholder=\"Password\" required>\r\n                <span class=\"toggle-password\" onclick=\"togglePassword()\">\ud83d\udc41<\/span>\r\n            <\/div>\r\n\r\n            <div class=\"remember-row\">\r\n                <label>\r\n                    <input type=\"checkbox\" name=\"remember\">\r\n                    Remember Me\r\n                <\/label>\r\n            <\/div>\r\n\r\n            <button type=\"submit\" class=\"login-btn\">\r\n                <span class=\"btn-text\">Login<\/span>\r\n                <span class=\"spinner\"><\/span>\r\n            <\/button>\r\n        <\/form>\r\n\r\n        <div class=\"divider\"><\/div>\r\n\r\n        <div class=\"extra-buttons\">\r\n            <button class=\"secondary-btn\"\r\n                onclick=\"window.location.href='https:\/\/my-iot-ai.com\/transformer_oil\/?page_id=57'\">\r\n                Register\r\n            <\/button>\r\n\r\n            <button class=\"secondary-btn\"\r\n                onclick=\"window.location.href='https:\/\/my-iot-ai.com\/transformer_oil\/?page_id=71'\">\r\n                Forgot Password\r\n            <\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.tnbt-login-wrapper {\r\n    min-height: 100vh;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background: linear-gradient(135deg, #0b1f3a, #123c69);\r\n    font-family: 'Segoe UI', sans-serif;\r\n    transition: 0.3s ease;\r\n}\r\n\r\n.tnbt-login-card {\r\n    background: #ffffff;\r\n    width: 100%;\r\n    max-width: 420px;\r\n    padding: 35px;\r\n    border-radius: 14px;\r\n    box-shadow: 0 20px 50px rgba(0,0,0,0.25);\r\n    transition: 0.3s ease;\r\n}\r\n\r\n.top-bar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n\r\n.top-bar h2 {\r\n    margin: 0;\r\n    font-weight: 600;\r\n    color: #123c69;\r\n}\r\n\r\n#darkModeToggle {\r\n    border: none;\r\n    background: transparent;\r\n    font-size: 18px;\r\n    cursor: pointer;\r\n}\r\n\r\n.subtitle {\r\n    font-size: 14px;\r\n    color: #666;\r\n    margin: 15px 0 25px;\r\n}\r\n\r\n.input-group {\r\n    margin-bottom: 18px;\r\n    position: relative;\r\n}\r\n\r\n.input-group input {\r\n    width: 100%;\r\n    padding: 12px;\r\n    border-radius: 6px;\r\n    border: 1px solid #ddd;\r\n    font-size: 14px;\r\n    transition: 0.3s ease;\r\n}\r\n\r\n.input-group input:focus {\r\n    border-color: #123c69;\r\n    outline: none;\r\n    box-shadow: 0 0 0 2px rgba(18,60,105,0.2);\r\n}\r\n\r\n.password-group {\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.toggle-password {\r\n    position: absolute;\r\n    right: 12px;\r\n    cursor: pointer;\r\n    font-size: 14px;\r\n}\r\n\r\n.remember-row {\r\n    margin-bottom: 18px;\r\n    font-size: 13px;\r\n}\r\n\r\n.login-btn {\r\n    width: 100%;\r\n    padding: 12px;\r\n    border: none;\r\n    border-radius: 6px;\r\n    background: linear-gradient(135deg, #123c69, #0b1f3a);\r\n    color: #fff;\r\n    font-size: 15px;\r\n    cursor: pointer;\r\n    position: relative;\r\n    transition: 0.3s ease;\r\n}\r\n\r\n.login-btn:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 10px 25px rgba(0,0,0,0.2);\r\n}\r\n\r\n.spinner {\r\n    display: none;\r\n    width: 16px;\r\n    height: 16px;\r\n    border: 2px solid #fff;\r\n    border-top: 2px solid transparent;\r\n    border-radius: 50%;\r\n    animation: spin 0.7s linear infinite;\r\n    position: absolute;\r\n    right: 15px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n}\r\n\r\n@keyframes spin {\r\n    to { transform: translateY(-50%) rotate(360deg); }\r\n}\r\n\r\n.divider {\r\n    height: 1px;\r\n    background: #eee;\r\n    margin: 25px 0;\r\n}\r\n\r\n.secondary-btn {\r\n    background: #123c69;\r\n    color: #fff;\r\n    border: none;\r\n    padding: 10px 18px;\r\n    border-radius: 6px;\r\n    margin: 5px;\r\n    cursor: pointer;\r\n    font-size: 13px;\r\n    transition: 0.3s ease;\r\n}\r\n\r\n.secondary-btn:hover {\r\n    background: #0b1f3a;\r\n}\r\n\r\n\/* DARK MODE *\/\r\n.dark-mode {\r\n    background: #0a0f1a !important;\r\n}\r\n\r\n.dark-mode .tnbt-login-card {\r\n    background: #1b2433;\r\n    color: #fff;\r\n}\r\n\r\n.dark-mode .subtitle {\r\n    color: #bbb;\r\n}\r\n\r\n.dark-mode input {\r\n    background: #2a3446;\r\n    border: 1px solid #444;\r\n    color: #fff;\r\n}\r\n<\/style>\r\n\r\n<script>\r\nfunction togglePassword(){\r\n    const pass = document.getElementById(\"passwordField\");\r\n    pass.type = pass.type === \"password\" ? \"text\" : \"password\";\r\n}\r\n\r\ndocument.getElementById(\"darkModeToggle\").addEventListener(\"click\", function(){\r\n    document.getElementById(\"loginWrapper\").classList.toggle(\"dark-mode\");\r\n});\r\n\r\ndocument.getElementById('tnbt-login').addEventListener('submit', function(e){\r\n    e.preventDefault();\r\n\r\n    const form = e.target;\r\n    const btn = document.querySelector('.login-btn');\r\n    const spinner = document.querySelector('.spinner');\r\n    const btnText = document.querySelector('.btn-text');\r\n    const msgDiv = document.getElementById('tnbt-login-message');\r\n\r\n    spinner.style.display = \"inline-block\";\r\n    btnText.textContent = \"Logging in...\";\r\n    btn.disabled = true;\r\n\r\n    const data = {\r\n        action: \"login\",\r\n        username: form.username.value.trim(),\r\n        password: form.password.value,\r\n        remember: form.remember.checked\r\n    };\r\n\r\n    fetch('https:\/\/my-iot-ai.com\/transformer_oil\/wp-content\/plugins\/tnbt_login\/API\/login-api.php', {\r\n        method: 'POST',\r\n        headers: { 'Content-Type': 'application\/json' },\r\n        body: JSON.stringify(data)\r\n    })\r\n    .then(res => res.json())\r\n    .then(res => {\r\n\r\n        msgDiv.innerHTML = `<p style=\"color:${res.success ? \"green\":\"red\"};\">${res.message}<\/p>`;\r\n\r\n        if (res.success) {\r\n            setTimeout(() => {\r\n                window.location.href = \"https:\/\/my-iot-ai.com\/transformer_oil\/?page_id=330\";\r\n            }, 1000);\r\n        } else {\r\n            spinner.style.display = \"none\";\r\n            btnText.textContent = \"Login\";\r\n            btn.disabled = false;\r\n        }\r\n    })\r\n    .catch(() => {\r\n        msgDiv.innerHTML = \"<p style='color:red;'>Server error occurred.<\/p>\";\r\n        spinner.style.display = \"none\";\r\n        btnText.textContent = \"Login\";\r\n        btn.disabled = false;\r\n    });\r\n});\r\n<\/script>\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>Transformer Oil Portal \ud83c\udf19 Login to access your monitoring dashboard \ud83d\udc41 Remember Me Login Register Forgot Password<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-52","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/my-iot-ai.com\/transformer_oil\/index.php?rest_route=\/wp\/v2\/pages\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/my-iot-ai.com\/transformer_oil\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/my-iot-ai.com\/transformer_oil\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/my-iot-ai.com\/transformer_oil\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/my-iot-ai.com\/transformer_oil\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=52"}],"version-history":[{"count":55,"href":"https:\/\/my-iot-ai.com\/transformer_oil\/index.php?rest_route=\/wp\/v2\/pages\/52\/revisions"}],"predecessor-version":[{"id":418,"href":"https:\/\/my-iot-ai.com\/transformer_oil\/index.php?rest_route=\/wp\/v2\/pages\/52\/revisions\/418"}],"wp:attachment":[{"href":"https:\/\/my-iot-ai.com\/transformer_oil\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}