github
/
teleport
mirror of https://github.com/tp4a/teleport
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

找回密码、重置密码等界面布局。

pull/105/head
ApexLiu 2017-11-14 01:29:06 +08:00
parent 367fafdd67
commit f333a51e07
4 changed files with 172 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
server/www/teleport/view/page_single_base.mako
View File

@ -19,6 +19,7 @@
<link href="${ static_url('plugins/bootstrap/css/bootstrap.min.css') }" rel="stylesheet" type="text/css"/>
<link href="${ static_url('plugins/font-awesome/css/font-awesome.min.css') }" rel="stylesheet">
<link href="${ static_url('css/error.css') }" rel="stylesheet" type="text/css"/>
<%block name="extend_css_file"/>
<%block name="embed_css"/>

116
server/www/teleport/view/user/reset-password.mako
View File

@ -1,6 +1,5 @@
<%!
page_title_ = '设置密码'
# page_menu_ = ['error']
%>
<%inherit file="../page_single_base.mako"/>
@ -8,10 +7,19 @@
<a href="http://teleport.eomsoft.net" target="_blank"><span class="logo"></span></a>
</%block>
<%block name="extend_css_file">
<link href="${ static_url('css/error.css') }" rel="stylesheet" type="text/css"/>
</%block>
<%block name="embed_css">
<style type="text/css">
.input-addon-desc {
text-align: right;
font-size: 80%;
color: #707070;
}
.captcha-box {
padding: 0 5px;
}
</style>
</%block>
<div class="page-content">
<div class="error-box">
@ -34,26 +42,85 @@
</div>
<div id="find-my-password" style="display: none;">
find-my-password
<div class="row" style="padding:0 20px;">
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user-circle-o fa-fw"></i></span>
<input data-field="username" type="text" class="form-control mono" placeholder="登录teleport系统的用户名">
</div>
<div class="input-group" style="margin-top:10px;">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input data-field="email" type="text" class="form-control mono" placeholder="用户绑定的电子邮箱">
</div>
<div class="input-group" style="margin-top:10px;">
<span class="input-group-addon"><i class="fa fa-check-square-o fa-fw"></i></span>
<input id="captcha" type="text" class="form-control" placeholder="验证码"
data-toggle="popover" data-trigger="manual" data-placement="top">
<span class="input-group-addon captcha-box"><a href="javascript:;"><img id="captcha-image" src=""></a></span>
</div>
<p class="input-addon-desc">验证码，点击图片可更换</p>
</div>
<div class="col-sm-8">
<div class="alert alert-info">
<p>请填写用户信息，随后一封密码重置确认函将发送到您的邮箱。</p>
<p>请注意，密码重置确认函在24小时内有效！</p>
<p>&nbsp;</p>
<p>如果您的用户账号没有设置关联邮箱，请联系系统管理员为您重置密码。</p>
</div>
</div>
</div>
<div class="row" style="padding:0 20px;margin-top:10px;">
<div class="col-sm-4">
<button type="button" class="btn btn-primary" id="btn-send-email" style="width:100%;"><i class="fa fa-check fa-fw"></i> 重置密码</button>
</div>
<div class="col-sm-8">
<div id="send-result" class="alert alert-danger" style="display: none;"></div>
</div>
</div>
</div>
<div id="password-area" style="display:none;">
<div id="policy" class="alert alert-warning" style="margin-top:10px;">
注意，为增强系统安全，系统启用强密码策略，要求密码至少8位，必须包含大写字母、小写字母以及数字。
</div>
<div class="form-group form-group-sm">
<div class="row" style="padding:0 20px;">
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input data-field="password" type="password" class="form-control mono" placeholder="设置新密码">
<span class="input-group-btn"><button class="btn btn-sm btn-default" type="button" id="btn-switch-password"><i class="fa fa-eye fa-fw"></i></button></span>
<span class="input-group-btn"><button class="btn btn-default" type="button" id="btn-switch-password"><i class="fa fa-eye fa-fw"></i></button></span>
</div>
</div>
<div class="col-sm-8">
<button type="button" class="btn btn-sm btn-primary" id="btn-reset-password"><i class="fa fa-check fa-fw"></i> 重置密码</button>
<div class="alert alert-warning">
<p>注意，系统启用强密码策略，要求密码至少8位，必须包含大写字母、小写字母以及数字。</p>
</div>
</div>
</div>
<div class="clear-float"></div>
<div class="row" style="padding:0 20px;margin-top:10px;">
<div class="col-sm-4">
<button type="button" class="btn btn-primary" id="btn-reset-password" style="width:100%;"><i class="fa fa-check fa-fw"></i> 重置密码</button>
</div>
<div class="col-sm-8">
<div id="reset-result" class="alert alert-danger" style="display: none;"></div>
</div>
</div>
## <div class="form-group form-group-sm">
## <div class="col-sm-4">
## <div class="input-group">
## <input data-field="password" type="password" class="form-control mono" placeholder="设置新密码">
## <span class="input-group-btn"><button class="btn btn-sm btn-default" type="button" id="btn-switch-password"><i class="fa fa-eye fa-fw"></i></button></span>
## </div>
## </div>
## <div class="col-sm-8">
## <button type="button" class="btn btn-sm btn-primary" id="btn-reset-password"><i class="fa fa-check fa-fw"></i> 重置密码</button>
## </div>
## </div>
## <div class="clear-float"></div>
</div>
</div>
</div>
@ -74,35 +141,24 @@
actions: $('#actions'),
find_password_area: $('#find-my-password'),
captcha_image: $('#captcha-image'),
password_area: $('#password-area')
};
if($app.options.mode === 1) {
if ($app.options.mode === 1) {
// show 'find-my-password' page
$app.dom.title.text('找回密码');
$app.dom.captcha_image.attr('src', '/auth/captcha?h=28&rnd=' + Math.random());
$app.dom.find_password_area.show();
} else if($app.options.mode === 2) {
} else if ($app.options.mode === 2) {
// show 'password-expired' page
$app.dom.title.text('更新密码');
} else if($app.options.mode === 3) {
} else if ($app.options.mode === 3) {
// show 'set-new-password' page
$app.dom.title.text('重置密码');
$app.dom.password_area.show();
}
## if($app.options.code !== TPE_OK) {
## $app.dom.message.addClass('alert alert-danger');
##
## if($app.options.code === TPE_EXPIRED)
## $app.dom.message.html('很抱歉，此密码重置链接已过期！');
## else if($app.options.code === TPE_NOT_EXISTS)
## $app.dom.message.html('很抱歉，此密码重置链接是无效的！');
##
## $app.dom.err_area.show();
## $app.dom.actions.show();
## } else {
## $app.dom.password_area.show();
## }
</script>
</%block>

3
server/www/teleport/webroot/app/controller/auth.py
View File

@ -179,7 +179,8 @@ class DoLogoutHandler(TPBaseJsonHandler):
class CaptchaHandler(TPBaseHandler):
def get(self):
code, img_data = tp_captcha_generate_image()
h = int(self.get_argument('h', 36))
code, img_data = tp_captcha_generate_image(h)
self.set_session('captcha', code)
self.set_header('Content-Type', 'image/jpeg')
self.write(img_data)

84
server/www/teleport/webroot/app/logic/auth/captcha.py
View File

@ -19,7 +19,7 @@ from wheezy.captcha.image import warp
_captcha_chars = 'AaCDdEeFfHJjKkLMmNnPpQRTtVvWwXxYy34679'
def tp_captcha_generate_image():
def __tp_captcha_generate_image():
captcha_image_t = captcha(
width=136,
height=36,
@ -55,3 +55,85 @@ def tp_captcha_generate_image():
image.save(out, "jpeg", quality=100)
return ''.join(chars_t), out.getvalue()
def tp_captcha_generate_image(h):
if h >= 32:
captcha_image_t = captcha(
width=136,
height=36,
drawings=[
background(color='#eeeeee'),
# curve(color='#4388d5', width=1, number=10),
curve(color='#4388d5', width=1, number=10),
curve(color='#af6fff', width=3, number=16),
noise(number=80, color='#eeeeee', level=3),
# text(fonts=[
# os.path.join(get_cfg().res_path, 'fonts', '001.ttf')
# ],
# # font_sizes=(28, 34, 36, 32),
# font_sizes=(24, 20, 22, 26),
# color='#cecece',
# # squeeze_factor=1.2,
# squeeze_factor=0.9,
# drawings=[
# # warp(dx_factor=0.05, dy_factor=0.05),
# warp(dx_factor=0.03, dy_factor=0.03),
# rotate(angle=20),
# offset()
# ]),
smooth(),
text(fonts=[
os.path.join(get_cfg().res_path, 'fonts', '001.ttf')
],
# font_sizes=(28, 34, 36, 32),
font_sizes=(h-4, h-2, h, h+1),
color='#63a8f5',
# squeeze_factor=1.2,
squeeze_factor=0.9,
drawings=[
# warp(dx_factor=0.05, dy_factor=0.05),
warp(dx_factor=0.03, dy_factor=0.03),
rotate(angle=20),
offset()
]),
curve(color='#af6fff', width=3, number=16),
noise(number=20, color='#eeeeee', level=2),
smooth(),
])
else:
captcha_image_t = captcha(
width=int(h*3)+8,
height=h,
drawings=[
background(color='#eeeeee'),
# curve(color='#4388d5', width=1, number=10),
curve(color='#4388d5', width=1, number=10),
curve(color='#af6fff', width=3, number=16),
noise(number=40, color='#eeeeee', level=2),
smooth(),
text(fonts=[
os.path.join(get_cfg().res_path, 'fonts', '001.ttf')
],
# font_sizes=(28, 34, 36, 32),
font_sizes=(h-2, h-1, h, h+1),
color='#63a8f5',
# squeeze_factor=1.2,
squeeze_factor=0.9,
drawings=[
# warp(dx_factor=0.05, dy_factor=0.05),
warp(dx_factor=0.03, dy_factor=0.03),
rotate(angle=20),
offset()
]),
curve(color='#4388d5', width=1, number=8),
noise(number=10, color='#eeeeee', level=1),
# smooth(),
])
chars_t = random.sample(_captcha_chars, 4)
image = captcha_image_t(chars_t)
out = io.BytesIO()
image.save(out, "jpeg", quality=100)
return ''.join(chars_t), out.getvalue()