{% extends "layout.html" %} {% block content %}
<style type="text/css">
	.modify_password {
		background-color: #fff;
		margin: 15px;
		min-height: 500px;
	}

	.modify_password .bt-form {
		width: 380px;
	}

	.modify_password .header {
		font-size: 19px;
		margin-bottom: 15px;
	}

	.modify_password .bt-input-text {
		height: 40px !important;
		line-height: 40px !important;
		border-radius: 2px;
		width: 100% !important;
		font-size: 14px;
	}

	.modify_password_btn {
		width: 340px;
		height: 40px;
		background: #20a53a;
		background: linear-gradient(#20a53a, #189d32);
		box-shadow: inset 0 1px 2px #30ad42;
		color: #fff;
		text-shadow: #00851a 0 -1px 0;
		border: 1px solid #20a53a;
		text-align: center;
		font-size: 14px;
		color: #fff;
		border-radius: 3px;
		cursor: pointer;
	}

	.random_paw {
		position: absolute;
		top: 10px;
		right: 5px;
	}

	.bt-form {
		position: absolute;
		top: 120px;
		left: 50%;
		margin-left: -150px;
		padding: 40px 20px;
	}

	.bt-form .line {
		position: relative;
	}

	.bt-form input {
		margin-bottom: 10px;
	}
</style>
<div class="main-content pb55" style="min-height: 525px">
	<div class="container-fluid modify_password">
		<div class="bt-form" style="text-align: center">
			<span class="header" style="">The panel password has expired, please change the password immediately!</span>
			<div class="line" style="margin-top: 15px">
				<input class="bt-input-text" type="text" name="password1" id="p1" value="" placeholder="New password" style="width: 300px" />
				<span title="Generate" class="btn btn-success btn-sm random_paw" onclick="randPwd(16)">Generate</span>
			</div>
			<div class="line">
				<input class="bt-input-text" type="text" name="password2" id="p2" value="" placeholder="Re-type your new password" style="width: 300px" />
			</div>
			<div>
				<button type="button" class="btn btn-success btn-sm modify_password_btn" onclick="modify_password()">Change now</button>
				<div class="public_key" style="display: block" data="{{data['public_key']}}"></div>
			</div>
		</div>
	</div>
</div>
{% endblock %} {% block scripts %} {{ super() }}
<script type="text/javascript" src="/static/js/jsencrypt.min.js"></script>
<script type="text/javascript">
	function modify_password() {
		p1 = $('#p1').val();
		p2 = $('#p2').val();
		if (p1 == '' || p1.length < 8) {
			layer.msg(lan.bt.pass_err_len, {
				icon: 2,
			});
			return;
		}

		var pdata = {
			password1: rsa.encrypt_public(p1),
			password2: rsa.encrypt_public(p2),
		};

		$.post('/config?action=setPassword', pdata, function (b) {
			if (b.status) {
				layer.msg(b.msg, {
					icon: 1,
				});
				setTimeout(function () {
					location.href = '/';
				}, 3000);
			} else {
				layer.msg(b.msg, {
					icon: 2,
					time: 8000,
				});
			}
		});
	}
</script>

{%endblock %}
