首次登入修改密碼
阿新 • • 發佈：2020-08-06
1、index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>XXXXXXX</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all"> </head> <body class="layui-layout-body"> <div id="LAY_app"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <!-- 頭部區域 --> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item layadmin-flexible" lay-unselect> <a href="javascript:;" layadmin-event="flexible" title="側邊伸縮"> <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i> </a> </li> <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="../../index.html" target="_blank" title="前臺"> <i class="layui-icon layui-icon-website"></i> </a> </li> <li class="layui-nav-item" lay-unselect> <a href="javascript:;" layadmin-event="refresh" title="重新整理"> <i class="layui-icon layui-icon-refresh-3"></i> </a> </li> </ul> <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right"> <!-- <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="javascript:;" layadmin-event="note"> <i class="layui-icon layui-icon-note"></i> </a> </li> --> <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="javascript:;" layadmin-event="fullscreen"> <i class="layui-icon layui-icon-screen-full"></i> </a> </li> <li class="layui-nav-item" lay-unselect> <a href="javascript:;"> <cite id="userName"></cite> </a> <dl class="layui-nav-child"> <dd><a lay-href="set/user/info.html">基本資料</a></dd> <dd><a lay-href="set/user/password.html">修改密碼</a></dd> <hr> <dd layadmin-event="logout" style="text-align: center;"><a onclick="LogoutF()">退出</a></dd> </dl> </li> <li class="layui-nav-item layui-hide-xs" lay-unselect> <a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a> </li> <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect> <a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a> </li> </ul> </div> <!-- 側邊選單 --> <div class="layui-side layui-side-menu"> <div class="layui-side-scroll"> <div class="layui-logo" lay-href="welcome.html"> <span>電力大資料聯盟</span> </div> <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu"> </ul> </div> </div> <div id='modalContent' class="layui-fluid" style="margin:0;width:400px;height:192px; top:30%;left:30%; display:none;"> <div class="layui-row layui-col-space15"> <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header">請修改密碼後重新登入</div> <div class="layui-card-body" pad15> <div class="layui-form" lay-filter=""> <div class="layui-form-item"> <label class="layui-form-label">當前密碼</label> <div class="layui-input-inline"> <input type="password" name="oldPassword" lay-verify="required" lay-verType="tips" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">新密碼</label> <div class="layui-input-inline"> <input type="password" name="password" lay-verify="pass" lay-verType="tips" autocomplete="off" id="LAY_password" class="layui-input"> </div> <div class="layui-form-mid layui-word-aux">8到16個字元</div> </div> <div class="layui-form-item"> <label class="layui-form-label">確認新密碼</label> <div class="layui-input-inline"> <input type="password" name="repassword" lay-verify="repass" lay-verType="tips" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="setmypass">確認修改</button> </div> </div> </div> </div> </div> </div> </div> </div> <!-- 遮罩層DIV --> <div id="overlay" class="overlay"></div> <!-- 模擬模態視窗DIV --> <div class="modal" id="modalDiv"></div> <!-- 頁面標籤 --> <div class="layadmin-pagetabs" id="LAY_app_tabs"> <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div> <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div> <div class="layui-icon layadmin-tabs-control layui-icon-down"> <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav"> <li class="layui-nav-item" lay-unselect> <a href="javascript:;"></a> <dl class="layui-nav-child layui-anim-fadein"> <dd layadmin-event="closeThisTabs"><a href="javascript:;">關閉當前標籤頁</a></dd> <dd layadmin-event="closeOtherTabs"><a href="javascript:;">關閉其它標籤頁</a></dd> <dd layadmin-event="closeAllTabs"><a href="javascript:;">關閉全部標籤頁</a></dd> </dl> </li> </ul> </div> <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs"> <ul class="layui-tab-title" id="LAY_app_tabsheader"> <li lay-id="home/console.html" lay-attr="home/console.html" class="layui-this" style="display: none"> <i class="layui-icon layui-icon-home"></i> </li> </ul> </div> </div> <!-- 主體內容 --> <div class="layui-body" id="LAY_app_body"> <div class="layadmin-tabsbody-item layui-show"> <iframe src="welcome.html" frameborder="0" class="layadmin-iframe"></iframe> </div> </div> <!-- 輔助元素，一般用於移動裝置下遮罩 --> <div class="layadmin-body-shade" layadmin-event="shade"></div> </div> </div> <script src="../layuiadmin/layui/layui.js"></script> <script src="../layuiadmin/modules/index.js"></script> <script type="text/javascript" src="../froala_editor_2.8.5/jquery.min.js"></script <!--中文字型包，注意要放在最下面，不然會報錯--> <script type="text/javascript" src="../froala_editor_2.8.5/languages/zh_cn.js"></script> <script type="text/javascript" src="../../front/js/crypto-js.js"></script> <script src="../layuiadmin/modules/common.js"></script> <script src="../views/set/user/password.js"></script> <script> </script> </body> <script type="text/javascript"> function LogoutF(){ $.ajax({ url: ENERGY_DATA_BACK_END_DOMAIN + "/log/logout", async: false, type: "get", headers: { 'Authorization': localStorage.getItem("token"), }, complete: function() { localStorage.removeItem('token') localStorage.removeItem('menu') window.parent.location = '/biosphereFront/login.html'; } }); } </script> </html>
2.index.js
function getParams(key) { var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) { return unescape(r[2]); } return null; }; var TYPE = getParams("type") || ""; var QUERYPARAMS = {}; layui.use(['layer', 'form', 'jquery', 'laypage', 'table', 'laydate', 'upload', 'element'], function () { var form = layui.form, layer = parent.layer === undefined ? layui.layer : parent.layer, laypage = layui.laypage, table = layui.table, upload = layui.upload, laydate = layui.laydate, $ = layui.jquery; var element = layui.element; //導航的hover效果、二級選單等功能，需要依賴element模組 //監聽導航點選 element.on('nav(demo)', function (elem) { //console.log(elem) layer.msg(elem.text()); }); var MENU = JSON.parse(localStorage.getItem('menu')) || []; var USER; $.ajax({ url: ENERGY_DATA_BACK_END_DOMAIN + "/log/me", async: false, type: "get", headers: { 'Authorization': localStorage.getItem("token"), }, success: function (result) { USER = result; }, error: function (xhr, textStatus, errorThrown) { if (xhr.status == 401) { window.parent.location = ENERGY_FRONT_LOGIN_PAGE; } } }); if (MENU.length == 0) { // initmenu(); } else { renderMenu(MENU); } $("#userName").empty().html(USER.userName); function initmenu() { $.ajax({ url: ENERGY_DATA_BACK_END_DOMAIN + "/end/menu/getSelfTree", dataType: "json", type: "POST", data: { roleId: USER.userRole }, headers: { 'Authorization': localStorage.getItem("token"), }, success: function (result) { var data = result.data; if(data.length == 0) { layer.alert("您沒有許可權訪問任何頁面，如需訪問請聯絡管理員"); } renderMenu(data); }, error: function (xhr, textStatus, errorThrown) { if (xhr.status == 401) { window.parent.location = '/biosphereFront/login.html'; } } }); } function renderMenu(data) { $('#LAY-system-side-menu').html(""); var menuhtml = ""; for (var i = 0; i < data.length; i++) { var npath = data[i].path || ""; var name = data[i].id; if (data[i].children) { menuhtml += ' <li data-name="' + name + '" class="layui-nav-item ">' + '<a href="javascript:;" lay-tips="' + data[i].title + '" lay-direction="2">' + '<i class="layui-icon ' + data[i].icon + '"></i>' + '<cite>' + data[i].title + '</cite></a>'; var child = data[i].children; menuhtml += '<dl class="layui-nav-child">'; for (var j = 0; j < child.length; j++) { var path = child[j].path || ""; menuhtml += '<dd data-name="' + name + '" >' + '<a lay-href="' + path + '">' + child[j].title + '</a>' + '</dd>'; } menuhtml += '</dl>'; } else { menuhtml += ' <li data-name="' + name + '" class="layui-nav-item ">' + '<a href="javascript:;" lay-href="' + npath + '" lay-tips="' + data[i].title + '" lay-direction="2">' + '<i class="layui-icon ' + data[i].icon + '"></i>' + '<cite>' + data[i].title + '</cite></a>'; } menuhtml += '</li>'; } $('#LAY-system-side-menu').html(menuhtml); element.init(); } // 瀏覽器相容 取得瀏覽器可視區高度 function getWindowInnerHeight() { var winHeight = window.innerHeight || (document.documentElement && document.documentElement.clientHeight) || (document.body && document.body.clientHeight); return winHeight; } // 瀏覽器相容 取得瀏覽器可視區寬度 function getWindowInnerWidth() { var winWidth = window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || (document.body && document.body.clientWidth); return winWidth; } /** * 顯示遮罩層 */ function showOverlay() { // 遮罩層寬高分別為頁面內容的寬高 $('.overlay').css({'height':$(document).height(),'width':$(document).width()}); $('.overlay').show(); } $('.showModal').on('click', function () { // 呼叫父視窗方法模擬彈出模態視窗 showModal($('#modalContent').html()); }) function checkIsFirstLogin(){ var isFirstLogin = USER.isFirstLogin; if(isFirstLogin == 0){ showModal(showModal($('#modalContent').html())); } else if(!USER.kennwortUpdate) { showModal(showModal($('#modalContent').html())); } else { //獲取預警資訊 $.ajax({ url: ENERGY_DATA_BACK_END_DOMAIN + "/end/health", async: false, type: "get", headers: { 'Authorization': localStorage.getItem("token"), }, success: function (result) { if(result && result.memoryUsage){ setTimeout(function(){ var nr = ""; var url ="~/rest/yjAndDbxx/findYjAndDbxx"; var getResult = { tdxxcdwhsj : 100 }; var condition = ""; if(result.memoryUsage * 100 > 80) { condition = "<span style='color:red;'>危險</span>"; } else { condition = "<span style=''>正常</span>"; } nr += "<p style='margin-top:20px;'>記憶體使用率" + Number(result.memoryUsage * 100).toFixed(2) + "% " + condition + "</p>"; var $div = $("<div id='tsxx' hidden='hidden' style='border-radius: 8px;z-index:999;width:360px;height:300px;position:fixed;border:1px solid #ccc;bottom:30px;padding:10px 10px 10px 10px;right:15px;background-color: rgb(90,152,222);'>" + "<div id='tstitle' style='position: relative;top:-7px;height:27px;width:100%;line-height:28px;font-size:18px;color:white;'> 系統提示<input style='width: 40px;cursor: pointer;position: absolute;background:rgb(90,152,222);right: -8px;border: 0px solid #707070;color:white;' type='button' value='×' /></div>" + "<div id='tsbody' style='border-radius: 6px;padding-bottom: 10px;padding-right: 10px;padding-left:20px;position: relative;height:250px;width:92%;overflow: auto;background:white;font-size:18px;'>" + nr+ "</div>" + "</div>"); if(nr != ""){ $(document.body).append($div); } $("#tsxx").slideToggle(2000); for ( var i = 0; i < document.querySelectorAll("a.yjhover").length; i++) { document.querySelectorAll("a.yjhover")[i].onmouseover=function(e){ e.path[0].style='font-size:18px;color:red;'; } document.querySelectorAll("a.yjhover")[i].onmouseout=function(e){ e.path[0].style='font-size:18px;color:black;'; } } $("#tsxx #tstitle input").on("click",function(){ $("#tsxx").hide(); }); },1000); } }, error: function() { } }); } } checkIsFirstLogin(); $('.closeModal').on('click', function () { // 呼叫父視窗方法模擬關閉模態視窗 $('.overlay').hide(); $('#modalDiv').hide(); $('#modalDiv').html(''); }) function showModal(innerHtml) { // 取得顯示模擬模態視窗用DIV var dialog = $('#modalDiv'); // 設定內容 dialog.html(innerHtml); // 模態視窗DIV視窗居中 dialog.css({ 'top' : (getWindowInnerHeight() - dialog.height()) / 2 + 'px', 'left' : (getWindowInnerWidth() - dialog.width()) / 2 + 'px' }); // 視窗DIV圓角 dialog.find('.modal-container').css('border-radius','6px'); // 模態視窗關閉按鈕事件 dialog.find('.btn-close').click(function(){ closeModal(); }); // 顯示遮罩層 showOverlay(); // 顯示遮罩層 dialog.show(); } /** * 模擬關閉模態視窗DIV */ function closeModal() { $('.overlay').hide(); $('#modalDiv').hide(); $('#modalDiv').html(''); } }); function formatName(name) { let newStr; if (name.length === 4) { newStr = name.substr(0, 3) + '*'; } else if (name.length > 4) { let char = ''; for (let i = 0, len = name.length - 4; i < len; i=i+2) { char += '*'; } newStr = name.substr(0, 2) + char + name.substr(-1, 3); } else { newStr = name; } return newStr; } layui.config({ base: '../layuiadmin/' //靜態資源所在路徑 }).extend({ index: 'lib/index' //主入口模組 }).use('index');