|
|
@@ -3,6 +3,7 @@
|
|
|
line-height: 34px;
|
|
|
font-size: 14px;
|
|
|
color: #666;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
.modal-content {
|
|
|
width: 409px;
|
|
|
@@ -92,6 +93,20 @@
|
|
|
.password .safe-level >span >span:nth-child(3) {
|
|
|
background: rgb(255,171,44);
|
|
|
}
|
|
|
+ .password .softkeys {
|
|
|
+ position: absolute;
|
|
|
+ background: #eee;
|
|
|
+ z-index: 10000;
|
|
|
+ top: 7px;
|
|
|
+ left: 0;
|
|
|
+ width: 620px;
|
|
|
+ box-shadow: 1px 1px 11px;
|
|
|
+ padding: 10px 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ .modal-dialog {
|
|
|
+ min-height: 500px;
|
|
|
+ }
|
|
|
</style>
|
|
|
<div class="modal-header">
|
|
|
<img src="static/img/user/images/update-password.png" alt="">
|
|
|
@@ -109,8 +124,9 @@
|
|
|
<div class="row line" ng-class="{'has-success': checkSuccess, 'has-error': checkFailed}">
|
|
|
<label class="col-md-3 col-sm-3 col text-right">原密码：</label>
|
|
|
<div class="col-md-8 col-sm-8 col">
|
|
|
- <input ng-model="user.password" class="form-control input-sm" type="password" ng-blur="checkPassword(user.password)" required placeholder="当前密码">
|
|
|
- <img src="static/img/user/images/keyboard.png" alt="">
|
|
|
+ <input ng-model="user.password" name="password" class="form-control input-sm" type="password" ng-blur="checkPassword(user.password)" required placeholder="当前密码">
|
|
|
+ <img src="static/img/user/images/keyboard.png" alt="" ng-click="reloadKeyboard('showPassword');">
|
|
|
+ <div ng-show="showPassword" class="softkeys softkeys1" data-target="input[name='password']"></div>
|
|
|
</div>
|
|
|
<div class="col">
|
|
|
<img ng-show="checkSuccess" src="static/img/user/images/input-check-yes.png" alt="">
|
|
|
@@ -121,9 +137,10 @@
|
|
|
<div class="row new-password" ng-class="{'has-success': checkSuccess1, 'has-error': checkFailed1}">
|
|
|
<label class="col-md-3 col-sm-3 col text-right">新密码：</label>
|
|
|
<div class="col-md-8 col-sm-8 col">
|
|
|
- <input ng-model="user.newPassword" ng-keyup="checkPasswordLevel(user.newPassword)" ng-blur="checkNewPassword(user.newPassword)" class="form-control input-sm" type="password" required placeholder="8~20位字母、数字、符号">
|
|
|
+ <input ng-model="user.newPassword" name="newPassword" ng-keyup="checkPasswordLevel(user.newPassword)" ng-blur="checkNewPassword(user.newPassword)" class="form-control input-sm" type="password" required placeholder="8~20位字母、数字、符号">
|
|
|
<!-- <div>密码复杂度</div> -->
|
|
|
- <img src="static/img/user/images/keyboard.png" alt="">
|
|
|
+ <img src="static/img/user/images/keyboard.png" ng-click="reloadKeyboard('showNewPassword');" alt="">
|
|
|
+ <div ng-show="showNewPassword" class="softkeys softkeys2" data-target="input[name='newPassword']"></div>
|
|
|
</div>
|
|
|
<div class="col">
|
|
|
<img ng-show="checkSuccess1" src="static/img/user/images/input-check-yes.png" alt="">
|
|
|
@@ -142,8 +159,9 @@
|
|
|
<div class="row line" ng-class="{'has-success': checkSuccess2, 'has-error': checkFailed2}">
|
|
|
<label ng-model="user.newPassword1" class="col-md-3 col-sm-3 col text-right">重复新密码：</label>
|
|
|
<div class="col-md-8 col-sm-8 col">
|
|
|
- <input ng-model="user.newPassword1" ng-blur="checkNewPassword1(user.newPassword1)" class="form-control input-sm" type="password" required placeholder="重复新密码">
|
|
|
- <img src="static/img/user/images/keyboard.png" alt="">
|
|
|
+ <input ng-model="user.newPassword1" name="password1" ng-blur="checkNewPassword1(user.newPassword1)" class="form-control input-sm" type="password" required placeholder="重复新密码">
|
|
|
+ <img src="static/img/user/images/keyboard.png" ng-click="reloadKeyboard('showPassword1')" alt="">
|
|
|
+ <div ng-show="showPassword1" class="softkeys softkeys3" data-target="input[name='password1']"></div>
|
|
|
</div>
|
|
|
<div class="col">
|
|
|
<img ng-show="checkSuccess2" src="static/img/user/images/input-check-yes.png" alt="">
|
|
|
@@ -158,3 +176,128 @@
|
|
|
<button ng-disabled="!checkSuccess || !checkSuccess1 || !checkSuccess2" type="submit">确定</button>
|
|
|
</div>
|
|
|
</form>
|
|
|
+<script>
|
|
|
+ $('.softkeys1').softkeys({
|
|
|
+ target : $('.softkeys1').data('target'),
|
|
|
+ layout : [
|
|
|
+ [
|
|
|
+ ['`','~'],
|
|
|
+ ['1','!'],
|
|
|
+ ['2','@'],
|
|
|
+ ['3','#'],
|
|
|
+ ['4','$'],
|
|
|
+ ['5','%'],
|
|
|
+ ['6','^'],
|
|
|
+ ['7','&'],
|
|
|
+ ['8','*'],
|
|
|
+ ['9','('],
|
|
|
+ ['0',')'],
|
|
|
+ ['-', '_'],
|
|
|
+ ['=','+'],
|
|
|
+ 'delete'
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ 'q','w','e','r','t','y','u','i','o','p',
|
|
|
+ ['[','{'],
|
|
|
+ [']','}']
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ 'capslock',
|
|
|
+ 'a','s','d','f','g','h','j','k','l',
|
|
|
+ [';',':'],
|
|
|
+ ["'",'"'],
|
|
|
+ ['\\','|']
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ 'shift',
|
|
|
+ 'z','x','c','v','b','n','m',
|
|
|
+ [',','<'],
|
|
|
+ ['.','>'],
|
|
|
+ ['/','?'],
|
|
|
+ ['@']
|
|
|
+ ]
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ $('.softkeys2').softkeys({
|
|
|
+ target : $('.softkeys2').data('target'),
|
|
|
+ layout : [
|
|
|
+ [
|
|
|
+ ['`','~'],
|
|
|
+ ['1','!'],
|
|
|
+ ['2','@'],
|
|
|
+ ['3','#'],
|
|
|
+ ['4','$'],
|
|
|
+ ['5','%'],
|
|
|
+ ['6','^'],
|
|
|
+ ['7','&'],
|
|
|
+ ['8','*'],
|
|
|
+ ['9','('],
|
|
|
+ ['0',')'],
|
|
|
+ ['-', '_'],
|
|
|
+ ['=','+'],
|
|
|
+ 'delete'
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ 'q','w','e','r','t','y','u','i','o','p',
|
|
|
+ ['[','{'],
|
|
|
+ [']','}']
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ 'capslock',
|
|
|
+ 'a','s','d','f','g','h','j','k','l',
|
|
|
+ [';',':'],
|
|
|
+ ["'",'"'],
|
|
|
+ ['\\','|']
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ 'shift',
|
|
|
+ 'z','x','c','v','b','n','m',
|
|
|
+ [',','<'],
|
|
|
+ ['.','>'],
|
|
|
+ ['/','?'],
|
|
|
+ ['@']
|
|
|
+ ]
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ $('.softkeys3').softkeys({
|
|
|
+ target : $('.softkeys3').data('target'),
|
|
|
+ layout : [
|
|
|
+ [
|
|
|
+ ['`','~'],
|
|
|
+ ['1','!'],
|
|
|
+ ['2','@'],
|
|
|
+ ['3','#'],
|
|
|
+ ['4','$'],
|
|
|
+ ['5','%'],
|
|
|
+ ['6','^'],
|
|
|
+ ['7','&'],
|
|
|
+ ['8','*'],
|
|
|
+ ['9','('],
|
|
|
+ ['0',')'],
|
|
|
+ ['-', '_'],
|
|
|
+ ['=','+'],
|
|
|
+ 'delete'
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ 'q','w','e','r','t','y','u','i','o','p',
|
|
|
+ ['[','{'],
|
|
|
+ [']','}']
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ 'capslock',
|
|
|
+ 'a','s','d','f','g','h','j','k','l',
|
|
|
+ [';',':'],
|
|
|
+ ["'",'"'],
|
|
|
+ ['\\','|']
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ 'shift',
|
|
|
+ 'z','x','c','v','b','n','m',
|
|
|
+ [',','<'],
|
|
|
+ ['.','>'],
|
|
|
+ ['/','?'],
|
|
|
+ ['@']
|
|
|
+ ]
|
|
|
+ ]
|
|
|
+ });
|
|
|
+</script>
|
yangc