mdkcontroller 1.4.5 → 1.4.7

package/Cores/file/dk.css

@@ -11,6 +11,7 @@
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -72,21 +73,22 @@
   justify-content: center;
   align-items: center;
 }
-.dk-overlay .dk-overlay_boder > strong {
+
+.dk-overlay .dk-overlay_boder>strong {
   z-index: 10;
 }
 
 .dk-overlay .dk-overlay_boder .dk-overlay_box {
-  border: 2px solid #8f32b0ba;
+  border: 2px solid #7df3ff7a;
   border-radius: 10px;
-  box-shadow: 0 0 9px 6px #8f32b0a3;
+  box-shadow: 0 0 16px 11px #7df3ff7a;
   padding: 15px;
   background-color: white;
   min-width: 380px;
   min-height: 200px;
 }
 
-.dk-overlay .dk-overlay_boder > span {
+.dk-overlay .dk-overlay_boder>span {
   font-size: 40px;
   cursor: pointer;
 }
@@ -94,6 +96,7 @@
 .dk-transiton500 {
   transition: all ease 0.5s;
 }
+
 .dk-transiton300 {
   transition: all ease 0.3s;
-}
+}

package/Cores/file/dk.js

@@ -84,15 +84,15 @@ const DK = {
                 overlay_box.classList.add('dk-overlay_box');
                 if (overlay_box) {
                     const closeX = document.createElement('span');
-                    closeX.innerText = 'X';
+                    closeX.innerHTML = '<img src="' + (DK.varHide.currentScriptPath + '/close.png') + '" style="width:40px; height: 40px; object-fit: cover; position: absolute; margin: -15px;"/>';
                     closeX.onclick = () => {
                         document.body.removeChild(dk_overlay);
                     };
-                    closeX.style.cssText = `font-size: 25px;cursor: pointer;float: right;font-weight: bold;color: #157272a6;margin: -18px -8px 0 0;`;
+                    closeX.style.cssText = `cursor: pointer;float: right;`;
 
                     const divImage = document.createElement('div');
                     divImage.style.cssText = `height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;`;
-                    divImage.innerHTML = `<img style='position: fixed;opacity: 0.1;' src='${(DK.varHide.currentScriptPath + '/' + imageName)}'/>`;
+                    divImage.innerHTML = `<img style='position: fixed;opacity: 0.1; width: 200px;' src='${(DK.varHide.currentScriptPath + '/' + imageName)}'/>`;
                     const overlay_inner = document.createElement('span');
                     overlay_inner.style.cssText = 'font-weight: bold;overflow-wrap: anywhere;max-width: 500px;z-index: 1;overflow: auto;';
                     overlay_inner.classList.add('dk-overlay_inner');
@@ -163,6 +163,112 @@ const DK = {
         scriptJS.src = src;
         if (isModule) scriptJS.type = "module";
         document.getElementsByTagName("head")[0].appendChild(scriptJS);
+    },
+    Login: (username, password) => {
+        let realHost = DK.realHost();
+        fetch(realHost + '/api/users/login', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ userName: username, password: password })
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                if (data.success) {
+                    window.location.href = realHost + '/';
+                } else {
+                    DK.showMessage(data.message, 3);
+                }
+            })
+            .catch(error => {
+                console.error('Login error:', error);
+                DK.showMessage('Login failed. Please try again.', 4);
+            });
+    },
+    RequestLoginBySW: () => {
+        try {
+            let realHost = DK.realHost();
+            DK.showBusy(true, "Connecting to WebSocket service...");
+            let socket = new WebSocket("ws://localhost:6899");
+            socket.onopen = () => {
+                const url = new URL(window.location.href);
+                socket.send(JSON.stringify({
+                    action: "login",
+                    app: url.origin
+                }));
+            };
+
+            socket.onmessage = (event) => {
+                const data = JSON.parse(event.data);
+                if (data.success) {
+                    fetch(realHost + "/api/users/loginByCenter", {
+                        method: "POST",
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({ tokenWS: data.token })
+                    })
+                        .then(response => {
+                            if (response.ok) {
+                                return response.json();
+                            } else {
+                                throw new Error('API request failed');
+                            }
+                        })
+                        .then(data => {
+                            if (data.success) {
+                                window.location.href = realHost + '/';
+                            } else {
+                                DK.showMessage(data.message, 3);
+                                DK.showBusy(false, "Connecting to WebSocket service...");
+                            }
+                        })
+                        .catch(error => {
+                            DK.showMessage(error, 4);
+                        });
+                } else {
+                    DK.showMessage(data.message, 3);
+                }
+            };
+
+            socket.onclose = () => {
+                console.log("Disconnected.");
+            };
+
+            socket.onerror = (error) => {
+                console.error("WebSocket error:", error);
+                DK.showMessage("WebSocket error: " + error.message, 4);
+                DK.showBusy(false, "Connecting to WebSocket service...");
+            };
+        } catch (error) {
+            console.error("Error in WebSocket connection:", error);
+            DK.showMessage("Error connecting to WebSocket service.", 4);
+        }
+    },
+    Logout: () => {
+        // /users/logout
+        let realHost = DK.realHost();
+
+        fetch(realHost + '/api/users/logout', {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+            .then((response) => {
+                window.location.reload();
+            })
+            .catch(error => {
+                console.error('Logout error:', error);
+                DK.showMessage('Logout failed. Please try again.', 4);
+            });
+    },
+    realHost: () => {
+        let realHost = window.location.href;
+        realHost = realHost.substring(0, realHost.toLowerCase().indexOf('/cores/'));
+        realHost = realHost.substring(0, realHost.toLowerCase().indexOf('/pages'));
+        return realHost;
     }
 }
 Object.prototype.forEachExt = function (work) {

package/Cores/login/index.html

@@ -2,145 +2,227 @@
 <html lang="en">
 
 <head>
-    <title>Login V1</title>
+    <!-- Design by foolishdeveloper.com -->
+    <title>DK FORM LOGIN</title>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!--===============================================================================================-->
-    <link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="css/util.css">
-    <link rel="stylesheet" type="text/css" href="css/main.css">
-    <!--===============================================================================================-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../file/iconlogin.png" type="image/x-icon">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">
+    <!--Stylesheet-->
+    <style media="screen">
+        *,
+        *:before,
+        *:after {
+            padding: 0;
+            margin: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            background-color: #080710;
+        }
+
+        .background {
+            width: 430px;
+            height: 520px;
+            position: absolute;
+            transform: translate(-50%, -50%);
+            left: 50%;
+            top: 50%;
+        }
+
+        .background .shape {
+            height: 200px;
+            width: 200px;
+            position: absolute;
+            border-radius: 50%;
+        }
+
+        .shape:first-child {
+            background: linear-gradient(#1845ad,
+                    #23a2f6);
+            left: -80px;
+            top: -80px;
+            animation: move 10s linear infinite alternate;
+        }
+
+        @keyframes move {
+            0% {
+                transform: translateX(0);
+            }
+
+            50% {
+                transform: translateX(50px) translateY(20px);
+                /* Di chuyển nửa đường */
+            }
+
+            100% {
+                transform: translateX(100px);
+                /* Di chuyển đến 100px */
+            }
+        }
+
+        @keyframes move2 {
+            0% {
+                transform: translateX(0);
+            }
+
+            50% {
+                transform: translateX(-80px) translateY(-30px);
+                /* Di chuyển nửa đường */
+            }
+
+            100% {
+                transform: translateX(-50px) translateY(-70px);
+                /* Di chuyển đến 100px */
+            }
+        }
+
+        .shape:last-child {
+            background: linear-gradient(to right,
+                    #ff512f,
+                    #f09819);
+            right: -30px;
+            bottom: -80px;
+            animation: move2 15s linear infinite alternate;
+        }
+
+        form {
+            height: 520px;
+            width: 400px;
+            background-color: rgba(255, 255, 255, 0.13);
+            position: absolute;
+            transform: translate(-50%, -50%);
+            top: 50%;
+            left: 50%;
+            border-radius: 10px;
+            backdrop-filter: blur(10px);
+            border: 2px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
+            padding: 50px 35px;
+        }
+
+        form * {
+            font-family: 'Poppins', sans-serif;
+            color: #ffffff;
+            letter-spacing: 0.5px;
+            outline: none;
+            border: none;
+        }
+
+        form h3 {
+            font-size: 32px;
+            font-weight: 500;
+            line-height: 42px;
+            text-align: center;
+        }
+
+        label {
+            display: block;
+            margin-top: 30px;
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        input {
+            display: block;
+            height: 50px;
+            width: 100%;
+            background-color: rgba(255, 255, 255, 0.07);
+            border-radius: 3px;
+            padding: 0 10px;
+            margin-top: 8px;
+            font-size: 14px;
+            font-weight: 300;
+        }
+
+        ::placeholder {
+            color: #e5e5e5;
+        }
+
+        button {
+            margin-top: 30px;
+            height: 54px;
+            width: 100%;
+            background-color: #ffffff;
+            color: #080710;
+            font-size: 18px;
+            font-weight: 600;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .social {
+            margin-top: 30px;
+            display: flex;
+        }
+
+        .social div {
+            background: red;
+            width: 150px;
+            border-radius: 3px;
+            padding: 5px 10px 10px 5px;
+            background-color: rgba(255, 255, 255, 0.27);
+            color: #eaf0fb;
+            text-align: center;
+        }
+
+        .social div:hover {
+            background-color: rgba(255, 255, 255, 0.47);
+        }
+
+        .social>div:not(:first-child) {
+            margin-left: 20px;
+        }
+
+        .social i {
+            margin-right: 4px;
+        }
+    </style>
 </head>
 
 <body>
+    <div class="background">
+        <div class="shape"></div>
+        <div class="shape"></div>
+    </div>
+    <form id="formLogin" action="/api/users/login">
+        <h3>Login Here</h3>
 
-<div class="limiter">
-    <div class="container-login100">
-        <div class="wrap-login100">
-            <div class="login100-pic js-tilt" data-tilt>
-                <img src="images/img-01.png" alt="IMG">
-            </div>
+        <label for="username">Username</label>
+        <input type="text" placeholder="Email or Phone" id="username" name="userName">
 
-            <form id="formLogin" class="login100-form validate-form" action="../../api/users/login">
-                    <span class="login100-form-title">
-                        Member Login
-                    </span>
-
-                <div class="wrap-input100 validate-input" data-validate="UserName is required">
-                    <input class="input100" type="text" name="userName" placeholder="UserName">
-                    <span class="focus-input100"></span>
-                    <span class="symbol-input100">
-                            <i class="fa fa-envelope" aria-hidden="true"></i>
-                        </span>
-                </div>
-
-                <div class="wrap-input100 validate-input" data-validate="Password is required">
-                    <input class="input100" type="password" name="password" placeholder="Password">
-                    <span class="focus-input100"></span>
-                    <span class="symbol-input100">
-                            <i class="fa fa-lock" aria-hidden="true"></i>
-                        </span>
-                </div>
-
-                <div class="container-login100-form-btn">
-                    <button class="login100-form-btn">
-                        Login
-                    </button>
-                </div>
-
-                <div class="text-center p-t-12">
-                        <span class="txt1">
-                            Forgot
-                        </span>
-                    <a class="txt2" href="#">
-                        Username / Password?
-                    </a>
-                </div>
-
-                <div class="text-center p-t-136">
-                    <a class="txt2" href="register.html">
-                        Create your Account
-                        <i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
-                    </a>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
+        <label for="password">Password</label>
+        <input type="password" placeholder="Password" id="password" name="password">
+
+        <button>Login</button>
 
-<div id="overlay" class="overlay">
-    <div class="overlay_boder">
-        <div class="overlay_box">
-            <div class="overlay_inner">This is a dialog window</div>
+        <div class="social">
+            <div style="display: flex; align-items: center; justify-content: center;"><a href="register.html"><i
+                        class="fas fa-user-plus"></i> SignUp</a></div>
+            <div style="display: flex; align-items: center; justify-content: center;" onclick="loginWithDKService()">
+                <img src="iconAuthen.png" width="40" height="40" /><span>Login WS</span>
+            </div>
         </div>
-        <span onclick="closeDialog()"><i class="fa fa-window-close" aria-hidden="true"></i></span>
-    </div>
-</div>
-
-
-<!--===============================================================================================-->
-<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
-<!--===============================================================================================-->
-<script src="vendor/bootstrap/js/popper.js"></script>
-<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
-<!--===============================================================================================-->
-<script src="vendor/select2/select2.min.js"></script>
-<!--===============================================================================================-->
-<script src="vendor/tilt/tilt.jquery.min.js"></script>
-<script>
-    $('.js-tilt').tilt({
-        scale: 1.1
-    })
-</script>
-<!--===============================================================================================-->
-<script src="js/main.js"></script>
-<script src="../file/dk.js"></script>
-
-<script>
-    $('#formLogin').on('submit', function (event) {
-        if (event.result) {
-            const form = event.currentTarget;
-            const formData = new FormData(form);
-            fetch(form.action, {
-                method: "POST",
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(Object.fromEntries(formData.entries()))
-            })
-                .then(response => {
-                    if (response.ok) {
-                        return response.json();
-                    } else {
-                        throw new Error('API request failed');
-                    }
-                })
-                .then(data => {
-                    if (data.success) {
-                        window.location.href = "../../";
-                    } else {
-                        DK.showMessage(data.message, 3);
-                    }
-                })
-                .catch(error => {
-                    DK.showMessage(error, 4);
-                });
-        }
-        return false;
-    });
-</script>
+    </form>
 
+    <script src="../file/dk.js"></script>
+    <script src="../file/jquery-3.2.1.min.js"></script>
+    <script>
+        function loginWithDKService() {
+            DK.RequestLoginBySW();
+        }
+        $('#formLogin').on('submit', function (event) {
+            if (true) {
+                const form = event.currentTarget;
+                const formData = new FormData(form);
+                DK.Login(formData.get('userName'), formData.get('password'));
+            }
+            return false;
+        });
+    </script>
 </body>
 
 </html>