From 4eba759bd3be8eb751ee6a0c770ce89757e58177 Mon Sep 17 00:00:00 2001
From: shinn lancelot <945226793@qq.com>
Date: Mon, 10 Sep 2018 17:50:15 +0800
Subject: [PATCH] =?UTF-8?q?1.=20=E6=96=B0=E5=A2=9E=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=91=98=E5=AF=86=E7=A0=81=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=88=E5=89=8D=E7=AB=AF=E9=83=A8=E5=88=86=E5=9F=BA=E6=9C=AC?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=EF=BC=8C=E5=BE=85=E5=81=9A=E5=90=8E=E7=AB=AF?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin.php            |  15 +-
 manageDomainName.php |  10 +-
 manageVerify.php     |  10 +-
 modifyPassword.php   | 467 +++++++++++++++++++++++++++++++++++++++++++
 safeDomainName.php   |  10 +-
 verify.php           |  10 +-
 6 files changed, 502 insertions(+), 20 deletions(-)
 create mode 100644 modifyPassword.php

diff --git a/admin.php b/admin.php
index 2d61d5f..c7a07ec 100644
--- a/admin.php
+++ b/admin.php
@@ -24,7 +24,7 @@
                 padding: 0 3vw;
                 font-size: 4vw;
             }
-            .user-size, .logout-size {
+            .user-size, .modify-password-size, .logout-size {
                 height: 4vw;
                 line-height: 4vw;
                 font-size: 3vw;
@@ -48,7 +48,7 @@
                 padding: 0 calc(640px * 0.03);
                 font-size: calc(640px * 0.04);
             }
-            .user-size, .logout-size {
+            .user-size, .modify-password-size, .logout-size {
                 height: calc(640px * 0.04);
                 line-height: calc(640px * 0.04);
                 font-size: calc(640px * 0.03);
@@ -95,10 +95,11 @@
             color: #36a82e;
         }
 
-        .logout-btn {
+        .modify-password-btn, .logout-btn {
             color: #ddd;
             text-decoration: underline;
             cursor: pointer;
+            user-select: none;
         }
 
         .box {
@@ -157,6 +158,9 @@
     <div class="container">
         <div class="user-box">
             <p class="user user-size"><?php echo $user; ?></p>
+            <a href="./modifyPassword.php">
+                <p class="modify-password-btn modify-password-size">修改密码</p>
+            </a>
             <p class="logout-btn logout-size">退出登录</p>
         </div>
         <div class="box">
@@ -172,11 +176,6 @@
                         <p>添加接口调用安全域名</p>
                     </div>
                 </a>
-                <a href="">
-                    <div class="btn btn-size">
-                        <p>添加管理员账号</p>
-                    </div>
-                </a>
             </div>
         </div>
     </div>
diff --git a/manageDomainName.php b/manageDomainName.php
index 5848dc9..9d43de9 100644
--- a/manageDomainName.php
+++ b/manageDomainName.php
@@ -30,7 +30,7 @@
                 right: 2.5vw;
                 cursor: pointer;
             }
-            .user-size, .logout-size {
+            .user-size, .modify-password-size, .logout-size {
                 height: 4vw;
                 line-height: 4vw;
                 font-size: 3vw;
@@ -84,7 +84,7 @@
                 right: calc(640px * 0.025);
                 cursor: pointer;
             }
-            .user-size, .logout-size {
+            .user-size, .modify-password-size, .logout-size {
                 height: calc(640px * 0.04);
                 line-height: calc(640px * 0.04);
                 font-size: calc(640px * 0.03);
@@ -161,10 +161,11 @@
             color: #36a82e;
         }
 
-        .logout-btn {
+        .modify-password-btn, .logout-btn {
             color: #ddd;
             text-decoration: underline;
             cursor: pointer;
+            user-select: none;
         }
 
         .box {
@@ -193,6 +194,9 @@
         <div class="user-box">
             <a href="./safeDomainName.php"><div class="back" title="返回"></div></a>
             <p class="user user-size"><?php echo $user; ?></p>
+            <a href="./modifyPassword.php">
+                <p class="modify-password-btn modify-password-size">修改密码</p>
+            </a>
             <p class="logout-btn logout-size">退出登录</p>
         </div>
         <div class="box">
diff --git a/manageVerify.php b/manageVerify.php
index 7460877..7603250 100644
--- a/manageVerify.php
+++ b/manageVerify.php
@@ -27,7 +27,7 @@
                 right: 2.5vw;
                 cursor: pointer;
             }
-            .user-size, .logout-size {
+            .user-size, .modify-password-size, .logout-size {
                 height: 4vw;
                 line-height: 4vw;
                 font-size: 3vw;
@@ -81,7 +81,7 @@
                 right: calc(640px * 0.025);
                 cursor: pointer;
             }
-            .user-size, .logout-size {
+            .user-size, .modify-password-size, .logout-size {
                 height: calc(640px * 0.04);
                 line-height: calc(640px * 0.04);
                 font-size: calc(640px * 0.03);
@@ -158,10 +158,11 @@
             color: #36a82e;
         }
 
-        .logout-btn {
+        .modify-password-btn, .logout-btn {
             color: #ddd;
             text-decoration: underline;
             cursor: pointer;
+            user-select: none;
         }
 
         .box {
@@ -190,6 +191,9 @@
         <div class="user-box">
             <a href="./verify.php"><div class="back" title="返回"></div></a>
             <p class="user user-size"><?php echo $user; ?></p>
+            <a href="./modifyPassword.php">
+                <p class="modify-password-btn modify-password-size">修改密码</p>
+            </a>
             <p class="logout-btn logout-size">退出登录</p>
         </div>
         <div class="box">
diff --git a/modifyPassword.php b/modifyPassword.php
new file mode 100644
index 0000000..6ee313c
--- /dev/null
+++ b/modifyPassword.php
@@ -0,0 +1,467 @@
+<?php
+
+session_start();
+$user = isset($_SESSION['wop_admin_user']) ? $_SESSION['wop_admin_user'] : '';
+empty($user) && header('Location: ./login.php');
+
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>修改密码</title>
+    <link rel="shortcut icon" href="./asset/image/favicon.ico">
+    <link rel="stylesheet" href="./asset/css/reset.css">
+    <style>
+        @media screen and (max-width: 640px) {
+            .field {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: 10vw;
+                margin: 3vw auto 0;
+                padding: 0 10vw;
+                box-sizing: border-box;
+                text-align: center;
+                font-size: 4vw;
+                border: 0;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+            .icon-clear {
+                background: url("./asset/image/clear.png") no-repeat center / contain;
+                top: 2.5vw;
+                right: 2.5vw;
+                cursor: pointer;
+            }
+            .user-size, .modify-password-size, .logout-size {
+                height: 4vw;
+                line-height: 4vw;
+                font-size: 3vw;
+                margin-left: 2vw;
+                display: inline-block;
+                vertical-align: top;
+                overflow: hidden;
+            }
+            .home {
+                width: 4vw;
+                height: 4vw;
+                background: url("./asset/image/home.png") no-repeat center / contain;
+                float: left;
+                display: inline-block;
+                vertical-align: top;
+                cursor: pointer;
+            }
+        }
+
+        @media screen and (min-width: 640px) {
+            .field {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+                height: calc(640px * 0.1);
+                margin: calc(640px * 0.03) auto 0;
+                padding: 0 calc(640px * 0.1);
+                box-sizing: border-box;
+                text-align: center;
+                font-size: calc(640px * 0.04);
+                border: 0;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+            .icon-clear {
+                background: url("./asset/image/clear.png") no-repeat center / contain;
+                top: calc(640px * 0.025);
+                right: calc(640px * 0.025);
+                cursor: pointer;
+            }
+            .user-size, .modify-password-size, .logout-size {
+                height: calc(640px * 0.04);
+                line-height: calc(640px * 0.04);
+                font-size: calc(640px * 0.03);
+                margin-left: 2vw;
+                display: inline-block;
+                vertical-align: top;
+                overflow: hidden;
+            }
+            .home {
+                width: calc(640px * 0.04);
+                height: calc(640px * 0.04);
+                background: url("./asset/image/home.png") no-repeat center / contain;
+                float: left;
+                display: inline-block;
+                vertical-align: top;
+                cursor: pointer;
+            }
+        }
+
+        .wrapper {
+            width: 100vw;
+            height: 100vh;
+        }
+
+        .container {
+            margin: 0 auto;
+            width: 100%;
+            max-width: 640px;
+            height: 100vh;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .user-box {
+            width: 100%;
+            padding: 0 2vw;
+            box-sizing: border-box;
+            text-align: right;
+            position: absolute;
+            top: 2vw;
+            left: 0;
+            z-index: 100;
+            font-size: 0;
+        }
+
+        .user {
+            color: #36a82e;
+        }
+
+        .modify-password-btn, .logout-btn {
+            color: #ddd;
+            text-decoration: underline;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .box {
+            width: 100%;
+            height: auto;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            z-index: 10;
+            transform: translate(-50%, -50%);
+            -webkit-transform: translate(-50%, -50%);
+        }
+
+        #form {
+            margin: 0 2vw;
+        }
+
+        #domain_name {
+            background: transparent;
+            border-bottom: 1px solid #eee;
+        }
+
+        #submit_btn {
+            color: #fff;
+            background: #36a82e;
+            cursor: pointer;
+            border-radius: 3px;
+            -moz-user-select: none;
+            -o-user-select:none;
+            -webkit-user-select:none;
+            -ms-user-select:none;
+            user-select: none;
+        }
+
+        #submit_btn p {
+            width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .input-box {
+            position: relative;
+        }
+
+        .disable {
+            background: #ddd !important;
+            cursor: not-allowed !important;
+        }
+
+        .line {
+            border-bottom: 1px solid #36a82e !important;
+        }
+
+        .icon {
+            position: absolute;
+            width: 5vw;
+            height: 5vw;
+            max-width: calc(640px * 0.05);
+            max-height: calc(640px * 0.05);
+            display: none;
+        }
+    </style>
+</head>
+<body>
+<div class="wrapper">
+    <div class="container">
+        <div class="user-box">
+            <a href="./admin.php"><div class="home" title="管理页"></div></a>
+            <p class="user user-size"><?php echo $user; ?></p>
+            <p class="modify-password-btn modify-password-size">修改密码</p>
+            <p class="logout-btn logout-size">退出登录</p>
+        </div>
+        <div class="box">
+            <form id="form">
+                <div class="input-box">
+                    <input type="text" class="field" name="old_password" id="old_password" value="" autocomplete="off" placeholder="请填写旧密码">
+                    <i class="icon icon-clear" title="移除"></i>
+                </div>
+                <div class="input-box">
+                    <input type="text" class="field" name="new_password" id="new_password" value="" autocomplete="off" placeholder="请填写新密码">
+                    <i class="icon icon-clear" title="移除"></i>
+                </div>
+                <div class="input-box">
+                    <input type="text" class="field" name="again_new_password" id="again_new_password" value="" autocomplete="off" placeholder="请再次填写新密码">
+                    <i class="icon icon-clear" title="移除"></i>
+                </div>
+                <div class="field disable" id="submit_btn">
+                    <p>提交</p>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+    var submitBtnObj = document.getElementById('submit_btn'),
+        oldPasswordObj = document.getElementById('old_password'),
+        newPasswordObj = document.getElementById('new_password'),
+        againNewPasswordObj = document.getElementById('again_new_password'),
+        xhr = '',
+        oldPassword = '',
+        newPassword = '',
+        againNewPassword = '',
+        responseObj = '',
+        submitState = 1,
+        submitBtnClass = '',
+        oldPasswordClass = '',
+        newPasswordClass = '',
+        againNewPasswordClass = '',
+        clearIconObjs = document.getElementsByClassName('icon-clear'),
+        formObj = document.getElementById('form'),
+        loginoutBtnObj = document.getElementsByClassName('logout-btn')[0],
+        logoutState = 1;
+
+    if (window.ActiveXObject) {
+        xhr = new ActiveXObject("Microsoft.XMLHTTP");
+    } else if (window.XMLHttpRequest) {
+        xhr = new XMLHttpRequest();
+    }
+
+    var submitFunc = function (e) {
+        e.preventDefault();
+        if (submitState != 1) {
+            return;
+        }
+        submitState = 0;
+
+        oldPassword = oldPasswordObj.value;
+        if (oldPassword == '') {
+            alert('请填写旧密码！');
+            return;
+        }
+        newPassword = newPasswordObj.value;
+        if (newPassword == '') {
+            alert('请填写新密码！');
+            return;
+        }
+        againNewPassword = againNewPasswordObj.value;
+        if (againNewPassword == '') {
+            alert('请再次填写新密码！');
+            return;
+        }
+        if (newPassword != againNewPassword) {
+            alert('两次输入的新密码不一致！请重新填写！');
+            newPasswordObj.value = '';
+            againNewPasswordObj.value = '';
+            return
+        }
+
+        xhr.open('post', './common/modifyPasswordHandle.php', true);
+        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
+        xhr.send('oldPassword=' + oldPassword + '&newPassword=' + newPassword + '&againNewPassword=' + againNewPassword);
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4) {
+                responseObj = JSON.parse(xhr.response);
+                alert(responseObj.message);
+                // responseObj.code == 1 && clearFunc();
+                // responseObj.code == -1 && setTimeout(function() {
+                //     window.location.href = './login.php';
+                // }, 500);
+                // if (responseObj.code != -1) {
+                //     submitState = 1;
+                // }
+            } else {
+                console.log(xhr.readyState);
+            }
+        }
+    }
+
+    var logout = function(e) {
+        e.preventDefault();
+        if (logoutState != 1) {
+            return;
+        }
+        logoutState = 0;
+
+        xhr.open('post', './common/logoutHandle.php', true);
+        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
+        xhr.send('');
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4) {
+                responseObj = JSON.parse(xhr.response);
+                alert(responseObj.message);
+                if (responseObj.code == 1) {
+                    setTimeout(function() {
+                        window.location.href = './login.php';
+                    }, 500);
+                } else {
+                    logoutState = 1;
+                }
+            } else {
+                console.log(xhr.readyState);
+            }
+        }
+    }
+
+    var clearFunc = function (e) {
+        var inputId = this.previousElementSibling.getAttribute('id');
+        if (inputId == 'old_password') {
+            oldPasswordObj.value = '';
+            oldPassword = '';
+        }
+        if (inputId == 'new_password') {
+            newPasswordObj.value = '';
+            newPassword = '';
+        }
+
+        submitBtnClass = submitBtnObj.getAttribute('class');
+        if (submitBtnClass == 'field') {
+            submitBtnObj.setAttribute('class', 'field disable');
+        }
+        submitBtnObj.removeEventListener('click', submitFunc);
+        this.style.display = 'none';
+    }
+
+    oldPasswordObj.addEventListener('input', function (e) {
+        listenInput();
+    });
+
+    newPasswordObj.addEventListener('input', function (e) {
+        listenInput();
+    });
+
+    againNewPasswordObj.addEventListener('input', function (e) {
+        listenInput();
+    });
+
+    loginoutBtnObj.addEventListener('click', function(e) {
+        confirm('您确定要退出吗？') && logout(e);
+    });
+
+    function listenInput() {
+        submitBtnObj.removeEventListener('click', submitFunc);
+        oldPassword = oldPasswordObj.value;
+        newPassword = newPasswordObj.value;
+        againNewPassword = againNewPasswordObj.value;
+        submitBtnClass = submitBtnObj.getAttribute('class');
+        if (oldPassword.length > 0 && newPassword.length > 0 && againNewPasswordObj.length > 0) {
+            if (submitBtnClass == 'field disable') {
+                submitBtnObj.setAttribute('class', 'field');
+            }
+            submitBtnObj.addEventListener('click', submitFunc);
+        } else {
+            if (submitBtnClass == 'field') {
+                submitBtnObj.setAttribute('class', 'field disable');
+            }
+            submitBtnObj.removeEventListener('click', submitFunc);
+        }
+        if (oldPassword.length > 0) {
+            oldPasswordObj.nextElementSibling.style.display = 'block';
+        } else {
+            oldPasswordObj.nextElementSibling.style.display = 'none';
+        }
+        if (newPassword.length > 0) {
+            newPasswordObj.nextElementSibling.style.display = 'block';
+        } else {
+            newPasswordObj.nextElementSibling.style.display = 'none';
+        }
+        if (againNewPassword.length > 0) {
+            againNewPasswordObj.nextElementSibling.style.display = 'block';
+        } else {
+            againNewPasswordObj.nextElementSibling.style.display = 'none';
+        }
+    }
+
+    oldPasswordObj.addEventListener('focusin', function (e) {
+        oldPasswordClass = this.getAttribute('class');
+        if (oldPasswordClass == 'field') {
+            this.setAttribute('class', 'field line');
+        }
+    });
+
+    newPasswordObj.addEventListener('focusin', function (e) {
+        newPasswordClass = this.getAttribute('class');
+        if (newPasswordClass == 'field') {
+            this.setAttribute('class', 'field line');
+        }
+    });
+
+    againNewPasswordObj.addEventListener('focusin', function (e) {
+        againNewPasswordClass = this.getAttribute('class');
+        if (againNewPasswordClass == 'field') {
+            this.setAttribute('class', 'field line');
+        }
+    });
+
+    oldPasswordObj.addEventListener('focusout', function (e) {
+        oldPasswordClass = this.getAttribute('class');
+        if (oldPasswordClass == 'field line') {
+            this.setAttribute('class', 'field');
+        }
+    });
+
+    newPasswordObj.addEventListener('focusout', function (e) {
+        newPasswordClass = this.getAttribute('class');
+        if (newPasswordClass == 'field line') {
+            this.setAttribute('class', 'field');
+        }
+    });
+
+    againNewPasswordObj.addEventListener('focusout', function (e) {
+        againNewPasswordClass = this.getAttribute('class');
+        if (againNewPasswordClass == 'field line') {
+            this.setAttribute('class', 'field');
+        }
+    });
+
+    for (var i = 0; i < clearIconObjs.length; i++) {
+        clearIconObjs[i].addEventListener('click', clearFunc);
+    }
+
+    formObj.addEventListener('keydown', function (e) {
+        oldPassword = oldPasswordObj.value;
+        newPassword = newPasswordObj.value;
+        againNewPassword = againNewPasswordObj.value;
+        if (e.keyCode == 13) {
+            if (oldPassword.length > 0 && newPassword.length > 0 && againNewPassword.length > 0) {
+                loginFunc(e);
+            } else {
+                e.preventDefault();
+            }
+        }
+    });
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/safeDomainName.php b/safeDomainName.php
index 36b0176..ceadd52 100644
--- a/safeDomainName.php
+++ b/safeDomainName.php
@@ -40,7 +40,7 @@
                 right: 2.5vw;
                 cursor: pointer;
             }
-            .user-size, .logout-size {
+            .user-size, .modify-password-size, .logout-size {
                 height: 4vw;
                 line-height: 4vw;
                 font-size: 3vw;
@@ -89,7 +89,7 @@
                 right: calc(640px * 0.025);
                 cursor: pointer;
             }
-            .user-size, .logout-size {
+            .user-size, .modify-password-size, .logout-size {
                 height: calc(640px * 0.04);
                 line-height: calc(640px * 0.04);
                 font-size: calc(640px * 0.03);
@@ -145,10 +145,11 @@
             color: #36a82e;
         }
 
-        .logout-btn {
+        .modify-password-btn, .logout-btn {
             color: #ddd;
             text-decoration: underline;
             cursor: pointer;
+            user-select: none;
         }
 
         .box {
@@ -219,6 +220,9 @@
         <div class="user-box">
             <a href="./admin.php"><div class="home" title="管理页"></div></a>
             <p class="user user-size"><?php echo $user; ?></p>
+            <a href="./modifyPassword.php">
+                <p class="modify-password-btn modify-password-size">修改密码</p>
+            </a>
             <p class="logout-btn logout-size">退出登录</p>
         </div>
         <div class="box">
diff --git a/verify.php b/verify.php
index 1fa413b..3e62069 100644
--- a/verify.php
+++ b/verify.php
@@ -40,7 +40,7 @@
                 right: 2.5vw;
                 cursor: pointer;
             }
-            .user-size, .logout-size {
+            .user-size, .modify-password-size, .logout-size {
                 height: 4vw;
                 line-height: 4vw;
                 font-size: 3vw;
@@ -89,7 +89,7 @@
                 right: calc(640px * 0.025);
                 cursor: pointer;
             }
-            .user-size, .logout-size {
+            .user-size, .modify-password-size, .logout-size {
                 height: calc(640px * 0.04);
                 line-height: calc(640px * 0.04);
                 font-size: calc(640px * 0.03);
@@ -145,10 +145,11 @@
             color: #36a82e;
         }
 
-        .logout-btn {
+        .modify-password-btn, .logout-btn {
             color: #ddd;
             text-decoration: underline;
             cursor: pointer;
+            user-select: none;
         }
 
         .box {
@@ -219,6 +220,9 @@
         <div class="user-box">
             <a href="./admin.php"><div class="home" title="管理页"></div></a>
             <p class="user user-size"><?php echo $user; ?></p>
+            <a href="./modifyPassword.php">
+                <p class="modify-password-btn modify-password-size">修改密码</p>
+            </a>
             <p class="logout-btn logout-size">退出登录</p>
         </div>
         <div class="box">