style login and logout pages to match new look
This commit is contained in:
Rick Lawson
parent
5241af57cc
commit
706a574d5f
@ -2,84 +2,85 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Login Page</title>
|
<title>Login Page</title>
|
||||||
<!-- Latest compiled and minified CSS -->
|
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||||||
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
|
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||||||
<style type="text/css">
|
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||||||
body {
|
<!--[if gt IE 8]><!-->
|
||||||
padding-top: 40px;
|
|
||||||
padding-bottom: 40px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin {
|
<!-- CSS -->
|
||||||
max-width: 300px;
|
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
|
||||||
padding: 19px 29px 29px;
|
<!-- Bootstrap core CSS -->
|
||||||
margin: 0 auto 20px;
|
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css"/>
|
||||||
background-color: #fff;
|
<!-- Fonts from Font Awsome -->
|
||||||
border: 1px solid #e5e5e5;
|
<link rel="stylesheet" href="css/font-awesome.min.css"/>
|
||||||
-webkit-border-radius: 5px;
|
<!-- CSS Animate -->
|
||||||
-moz-border-radius: 5px;
|
<link rel="stylesheet" href="css/animate.css"/>
|
||||||
border-radius: 5px;
|
<!-- Custom styles for this theme -->
|
||||||
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
|
<link rel="stylesheet" href="css/main.css"/>
|
||||||
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
|
<!-- end of CSS -->
|
||||||
box-shadow: 0 1px 2px rgba(0,0,0,.05);
|
|
||||||
}
|
|
||||||
.form-signin .form-signin-heading,
|
|
||||||
.form-signin .checkbox {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.form-signin input[type="text"],
|
|
||||||
.form-signin input[type="password"] {
|
|
||||||
font-size: 16px;
|
|
||||||
height: auto;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding: 7px 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body onload='document.loginForm.username.focus();'>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<c:if test="${not empty error}">
|
|
||||||
<div class="error">${error}</div>
|
|
||||||
</c:if>
|
|
||||||
<c:if test="${not empty msg}">
|
|
||||||
<div class="msg">${msg}</div>
|
|
||||||
</c:if>
|
|
||||||
<form class="form-signin" name='loginForm'
|
|
||||||
action="<c:url value='j_spring_security_check' />" method='POST'>
|
|
||||||
<h2 class="form-signin-heading">Please sign in</h2>
|
|
||||||
<input type="text" class="input-block-level" placeholder="Email address" name='username'>
|
|
||||||
<input type="password" class="input-block-level" placeholder="Password" name='password'>
|
|
||||||
|
|
||||||
<input type="hidden" name="${_csrf.parameterName}"
|
|
||||||
value="${_csrf.token}" />
|
|
||||||
<button class="btn btn-large btn-primary" type="submit">Sign in</button>
|
|
||||||
</form>
|
|
||||||
<div class="panel panel-info" style="max-width: 300px; margin: 0 auto 20px;">
|
|
||||||
<div class="panel-heading">
|
|
||||||
Login with one of the following accounts
|
|
||||||
</div>
|
|
||||||
<div class="panel-body">
|
|
||||||
<!-- Table -->
|
|
||||||
<table class="table table-bordered">
|
|
||||||
<thead>
|
|
||||||
<tr><td>Account</td><td>User</td><td>Password</td></tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr><td>Webgoat User</td><td>guest</td><td>guest</td></tr>
|
|
||||||
<tr><td>Webgoat Admin</td><td>webgoat</td><td>webgoat</td></tr>
|
|
||||||
<tr><td>Server Admin</td><td>server</td><td>server</td></tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</style>
|
||||||
|
</head>
|
||||||
|
<body onload='document.loginForm.username.focus();'>
|
||||||
|
<section id="container" ng-controller="goatLesson">
|
||||||
|
<header id="header">
|
||||||
|
<!--logo start-->
|
||||||
|
<div class="brand">
|
||||||
|
<a href="${pageContext.request.contextPath}/start.mvc" class="logo"><span>Web</span>Goat</a>
|
||||||
</div>
|
</div>
|
||||||
</div> <!-- /container -->
|
<!--logo end-->
|
||||||
|
<div class="toggle-navigation toggle-left">
|
||||||
|
|
||||||
|
</div><!--toggle navigation end-->
|
||||||
|
<div class="lessonTitle" >
|
||||||
|
<h1 id="lessonTitle">Please login</h1>
|
||||||
|
</div><!--lesson title end-->
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<section class="main-content-wrapper">
|
||||||
|
|
||||||
|
<section id="main-content" >
|
||||||
|
<c:if test="${not empty error}">
|
||||||
|
<div class="error">${error}</div>
|
||||||
|
</c:if>
|
||||||
|
<c:if test="${not empty msg}">
|
||||||
|
<div class="msg">${msg}</div>
|
||||||
|
</c:if>
|
||||||
|
<br/><br/>
|
||||||
|
<form role="form" name='loginForm' action="<c:url value='j_spring_security_check' />" method='POST' style="width: 400px;">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="exampleInputEmail1">Username</label>
|
||||||
|
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Username" name='username'>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="exampleInputPassword1">Password</label>
|
||||||
|
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name='password'>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<input type="hidden" name="${_csrf.parameterName}"
|
||||||
|
value="${_csrf.token}" />
|
||||||
|
<button class="btn btn-large btn-primary" type="submit">Sign in</button>
|
||||||
|
</form>
|
||||||
|
<br/><br/>
|
||||||
|
<h4>The following accounts are built into Webgoat</h4>
|
||||||
|
<table class="table table-bordered" style="width:400px;">
|
||||||
|
<thead>
|
||||||
|
<tr class="warning"><th>Account</th><th>User</th><th>Password</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td>Webgoat User</td><td>guest</td><td>guest</td></tr>
|
||||||
|
<tr><td>Webgoat Admin</td><td>webgoat</td><td>webgoat</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<br/><br/>
|
||||||
|
|
||||||
</body>
|
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,59 +1,68 @@
|
|||||||
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Login Page</title>
|
<title>Logout Page</title>
|
||||||
<!-- Latest compiled and minified CSS -->
|
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||||||
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
|
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||||||
<style type="text/css">
|
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||||||
body {
|
<!--[if gt IE 8]><!-->
|
||||||
padding-top: 40px;
|
|
||||||
padding-bottom: 40px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin {
|
<!-- CSS -->
|
||||||
max-width: 300px;
|
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
|
||||||
padding: 19px 29px 29px;
|
<!-- Bootstrap core CSS -->
|
||||||
margin: 0 auto 20px;
|
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css"/>
|
||||||
background-color: #fff;
|
<!-- Fonts from Font Awsome -->
|
||||||
border: 1px solid #e5e5e5;
|
<link rel="stylesheet" href="css/font-awesome.min.css"/>
|
||||||
-webkit-border-radius: 5px;
|
<!-- CSS Animate -->
|
||||||
-moz-border-radius: 5px;
|
<link rel="stylesheet" href="css/animate.css"/>
|
||||||
border-radius: 5px;
|
<!-- Custom styles for this theme -->
|
||||||
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
|
<link rel="stylesheet" href="css/main.css"/>
|
||||||
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
|
<!-- end of CSS -->
|
||||||
box-shadow: 0 1px 2px rgba(0,0,0,.05);
|
|
||||||
}
|
|
||||||
.form-signin .form-signin-heading,
|
|
||||||
.form-signin .checkbox {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.form-signin input[type="text"],
|
|
||||||
.form-signin input[type="password"] {
|
|
||||||
font-size: 16px;
|
|
||||||
height: auto;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding: 7px 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body onload='document.loginForm.username.focus();'>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<c:if test="${not empty error}">
|
|
||||||
<div class="error">${error}</div>
|
|
||||||
</c:if>
|
|
||||||
<c:if test="${not empty msg}">
|
|
||||||
<div class="msg">${msg}</div>
|
|
||||||
</c:if>
|
|
||||||
You have logged out successfully
|
|
||||||
<hr/>
|
|
||||||
Click here to <a href="<c:url value="login.mvc" />" > Login</a>
|
|
||||||
|
|
||||||
</div> <!-- /container -->
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body onload='document.loginForm.username.focus();'>
|
||||||
|
<section id="container" ng-controller="goatLesson">
|
||||||
|
<header id="header">
|
||||||
|
<!--logo start-->
|
||||||
|
<div class="brand">
|
||||||
|
<a href="${pageContext.request.contextPath}/start.mvc" class="logo"><span>Web</span>Goat</a>
|
||||||
|
</div>
|
||||||
|
<!--logo end-->
|
||||||
|
<div class="toggle-navigation toggle-left">
|
||||||
|
|
||||||
</body>
|
</div><!--toggle navigation end-->
|
||||||
|
<div class="lessonTitle" >
|
||||||
|
<h1 id="lessonTitle">Logout</h1>
|
||||||
|
</div><!--lesson title end-->
|
||||||
|
|
||||||
|
</header>
|
||||||
|
<section class="main-content-wrapper">
|
||||||
|
|
||||||
|
<section id="main-content" >
|
||||||
|
<c:if test="${not empty error}">
|
||||||
|
<div class="error">${error}</div>
|
||||||
|
</c:if>
|
||||||
|
<c:if test="${not empty msg}">
|
||||||
|
<div class="msg">${msg}</div>
|
||||||
|
</c:if>
|
||||||
|
<br/><br/>
|
||||||
|
<div class="alert alert-success" role="alert" style="width: 400px;">
|
||||||
|
You have logged out successfully
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<h4>Click here if you would like to log back in: <a href="<c:url value="login.mvc" />" > Login</a></h4>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user