Converted login and register functionality to new template.

This commit is contained in:
Ivan Filippov 2016-04-22 18:19:03 -06:00
parent 78500ef7c0
commit e38f716bfa
3 changed files with 219 additions and 187 deletions

View File

@ -1,197 +1,112 @@
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<html>
<head>
<meta charset="utf-8"/>
<title>DNS Management System | Login</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta content="" name="description"/>
<meta content="" name="author"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
<link href="{{ url_for('static', filename='global/plugins/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ url_for('static', filename='global/plugins/simple-line-icons/simple-line-icons.min.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ url_for('static', filename='global/plugins/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ url_for('static', filename='global/plugins/uniform/css/uniform.default.css') }}" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<link href="{{ url_for('static', filename='admin/pages/css/login.css') }}" rel="stylesheet" type="text/css"/>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME STYLES -->
<link href="{{ url_for('static', filename='global/css/components-md.css') }}" id="style_components" rel="stylesheet" type="text/css"/>
<link href="{{ url_for('static', filename='global/css/plugins-md.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ url_for('static', filename='admin/layout/css/layout.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ url_for('static', filename='admin/layout/css/themes/default.css') }}" rel="stylesheet" type="text/css" id="style_color"/>
<link href="{{ url_for('static', filename='admin/layout/css/custom.css') }}" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico"/>
<title>DNS Control Panel - Log In</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/bootstrap/css/bootstrap.min.css') }}">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/dist/css/AdminLTE.min.css') }}">
<!-- iCheck -->
<link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/plugins/iCheck/square/blue.css') }}">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-md login">
<!-- BEGIN SIDEBAR TOGGLER BUTTON -->
<div class="menu-toggler sidebar-toggler">
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="{{ url_for('index') }}"><b>PowerDNS</b>-Admin</a>
</div>
<!-- END SIDEBAR TOGGLER BUTTON -->
<!-- BEGIN LOGO -->
<div class="logo">
<a href="#">
<img src="{{ url_for('static', filename='global/img/be-logo.png') }}" width="15%" height="15%">
</a>
</div>
<!-- END LOGO -->
<!-- BEGIN LOGIN -->
<div class="content">
<!-- BEGIN LOGIN FORM -->
<form class="login-form" action="" method="post">
<h3 class="form-title">Sign In</h3>
<!-- /.login-logo -->
<div class="login-box-body">
{% if error %}
<div class="alert alert-danger">
<button class="close" data-close="alert"></button>
<span>
{{ error }} </span>
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">&times;</button>
{{ error }}
</div>
{% endif %}
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>
Enter any username and password. </span>
<form action="" method="post">
<div class="form-group">
{% if username %}
<input type="text" class="form-control" placeholder="Username" name="username" value="{{ username }}">
{% else %}
<input type="text" class="form-control" placeholder="Username" name="username">
{% endif %}
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Username</label>
<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="username" value="{{ request.form.username }}"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" value="{{ request.form.password }}"/>
{% if password %}
<input type="password" class="form-control" placeholder="Password" name="password" value="{{ password }}">
{% else %}
<input type="password" class="form-control" placeholder="Password" name="password">
{% endif %}
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
{% if ldap_enabled %}
<div class="form-group">
<select class="form-control" name="auth_method">
<option value="LOCAL">Default Authentication</option>
{% if ldap_enabled %}
<option value="LOCAL">Local Authentication</option>
<option value="LDAP">LDAP Authentication</option>
{% endif %}
</select>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success uppercase">Login</button>
<label class="rememberme check">
<input type="checkbox" name="remember" value="1"/>Remember </label>
<a href="javascript:;" id="forget-password" class="forget-password">Forgot Password?</a>
</div>
<div class="create-account">
<p>
<a href="javascript:;" id="register-btn" class="uppercase">Create an account</a>
</p>
</div>
</form>
<!-- END LOGIN FORM -->
<!-- BEGIN FORGOT PASSWORD FORM -->
<form class="forget-form" action="index.html" method="post">
<h3>Forget Password ?</h3>
<p>
Enter your e-mail address below to reset your password.
</p>
{% else %}
<div class="form-group">
<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Email" name="email"/>
<input type="hidden" name="auth_method" value="LOCAL">
</div>
<div class="form-actions">
<button type="button" id="back-btn" class="btn btn-default">Back</button>
<button type="submit" class="btn btn-success uppercase pull-right">Submit</button>
</div>
</form>
<!-- END FORGOT PASSWORD FORM -->
<!-- BEGIN REGISTRATION FORM -->
<form class="register-form" action="" method="post">
<h3>Sign Up</h3>
<p class="hint">
Enter your personal details below:
</p>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">First Name</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="First Name" name="firstname"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Last Name</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Last Name" name="lastname"/>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Email</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Email" name="email"/>
</div>
<p class="hint">
Enter your account details below:
</p>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Username</label>
<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="username"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control placeholder-no-fix" type="password" autocomplete="off" id="register_password" placeholder="Password" name="password"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Re-type Your Password</label>
<input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="Re-type Your Password" name="rpassword"/>
</div>
<div class="form-group margin-top-20 margin-bottom-20">
<label class="check">
<input type="checkbox" name="tnc"/> I agree to the <a href="javascript:;">
Terms of Service </a>
& <a href="javascript:;">
Privacy Policy </a>
{% endif %}
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label>
<input type="checkbox"> Remember Me
</label>
<div id="register_tnc_error">
</div>
</div>
<div class="form-actions">
<button type="button" id="register-back-btn" class="btn btn-default">Back</button>
<button type="submit" id="register-submit-btn" class="btn btn-success uppercase pull-right">Submit</button>
<!-- /.col -->
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>
<!-- END REGISTRATION FORM -->
<a href="{{ url_for('register') }}" class="text-center">Create an account </a>
</div>
<div class="copyright">
2015 © Khanh Ngo
<!-- /.login-box-body -->
<div class="login-box-footer">
<center><p>2016 &copy; Khanh Ngo</p></center>
</div>
<!-- END LOGIN -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="{{ url_for('static', filename='global/plugins/respond.min.js') }}"></script>
<script src="{{ url_for('static', filename='global/plugins/excanvas.min.js') }}"></script>
<![endif]-->
<script src="{{ url_for('static', filename='global/plugins/jquery.min.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='global/plugins/jquery-migrate.min.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='global/plugins/bootstrap/js/bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='global/plugins/jquery.blockui.min.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='global/plugins/uniform/jquery.uniform.min.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='global/plugins/jquery.cokie.min.js') }}" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="{{ url_for('static', filename='global/plugins/jquery-validation/js/jquery.validate.min.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="{{ url_for('static', filename='global/scripts/metronic.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='admin/layout/scripts/layout.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='admin/pages/scripts/login.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
</div>
<!-- /.login-box -->
<!-- jQuery 2.2.0 -->
<script src="{{ url_for('static', filename='adminlte2/plugins/jQuery/jQuery-2.2.0.min.js') }}"></script>
<!-- Bootstrap 3.3.6 -->
<script src="{{ url_for('static', filename='adminlte2/bootstrap/js/bootstrap.min.js') }}"></script>
<!-- iCheck -->
<script src="{{ url_for('static', filename='adminlte2/plugins/iCheck/icheck.min.js') }}"></script>
<script>
jQuery(document).ready(function() {
Metronic.init(); // init metronic core components
Layout.init(); // init current layout
Login.init();
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
});
</script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>

106
app/templates/register.html Normal file
View File

@ -0,0 +1,106 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DNS Control Panel - Register</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/bootstrap/css/bootstrap.min.css') }}">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/dist/css/AdminLTE.min.css') }}">
<!-- iCheck -->
<link rel="stylesheet" href="{{ url_for('static', filename='adminlte2/plugins/iCheck/square/blue.css') }}">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition register-page">
<div class="register-box">
<div class="register-logo">
<a href="{{ url_for('index') }}"><b>PowerDNS</b>-Admin</a>
</div>
<div class="register-box-body">
{% if error %}
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert"
aria-hidden="true">&times;</button>
{{ error }}
</div>
{% endif %}
<p class="login-box-msg">Enter your personal details below</p>
<form action="{{ url_for('login') }}" method="post">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="First Name"
name="firstname"> <span
class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Last name"
name="lastname"> <span
class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="Email"
name="email"> <span
class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<p class="login-box-msg">Enter your account details below</p>
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Username"
name="username"> <span
class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password"
name="password"> <span
class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control"
placeholder="Retype password" name="rpassword"> <span
class="glyphicon glyphicon-log-in form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-4 pull-left">
<button type="button" class="btn btn-block btn-flat"
id="button_back">Back</button>
</div>
<div class="col-xs-4 pull-right">
<button type="submit" class="btn btn-primary btn-block btn-flat">Register</button>
</div>
<!-- /.col -->
</div>
</form>
</div>
<!-- /.form-box -->
<div class="login-box-footer">
<center><p>2016 &copy; Khanh Ngo</p></center>
</div>
</div>
<!-- /.login-box -->
<!-- jQuery 2.2.0 -->
<script src="{{ url_for('static', filename='adminlte2/plugins/jQuery/jQuery-2.2.0.min.js') }}"></script>
<!-- Bootstrap 3.3.6 -->
<script src="{{ url_for('static', filename='adminlte2/bootstrap/js/bootstrap.min.js') }}"></script>
<!-- iCheck -->
<script src="{{ url_for('static', filename='adminlte2/plugins/iCheck/icheck.min.js') }}"></script>
<script>
$(function () {
$('#button_back').click(function(){
window.location.href='{{ url_for('login') }}';
})
});
</script>
</body>
</html>

View File

@ -56,6 +56,9 @@ def error(code, msg=None):
else:
return render_template('404.html'), 404
@app.route('/register', methods=['GET'])
def register():
return render_template('register.html')
@app.route('/login', methods=['GET', 'POST'])
@login_manager.unauthorized_handler
@ -77,6 +80,7 @@ def login():
firstname = request.form['firstname'] if 'firstname' in request.form else None
lastname = request.form['lastname'] if 'lastname' in request.form else None
email = request.form['email'] if 'email' in request.form else None
rpassword = request.form['rpassword'] if 'rpassword' in request.form else None
if None in [firstname, lastname, email]:
#login case
@ -99,15 +103,22 @@ def login():
else:
# registration case
user = User(username=username, plain_text_password=password, firstname=firstname, lastname=lastname, email=email)
# TODO: Move this into the JavaScript
# validate password and password confirmation
if password != rpassword:
error = "Passsword and confirmation do not match"
return render_template('register.html', error=error)
try:
result = user.create_local_user()
if result == True:
return render_template('login.html')
return render_template('login.html', username=username, password=password)
else:
return render_template('login.html', error=result)
return render_template('register.html', error=result)
except Exception, e:
error = e.message['desc'] if 'desc' in e.message else e
return render_template('login.html', error=error)
return render_template('register.html', error=error)
@app.route('/logout')
def logout():