Skip to content

Commit 706a574

Browse files
lawson89lawson89
committed
style login and logout pages to match new look
1 parent 5241af5 commit 706a574

File tree

2 files changed

+137
-127
lines changed

2 files changed

+137
-127
lines changed

‎src/main/webapp/WEB-INF/pages/login.jsp‎

Lines changed: 72 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -2,84 +2,85 @@
22
<html>
33
<head>
44
<title>Login Page</title>
5-
<!-- Latest compiled and minified CSS -->
6-
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
7-
<style type="text/css">
8-
body {
9-
padding-top: 40px;
10-
padding-bottom: 40px;
11-
background-color: #f5f5f5;
12-
}
5+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
6+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
7+
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
8+
<!--[if gt IE 8]><!-->
139

14-
.form-signin {
15-
max-width: 300px;
16-
padding: 19px 29px 29px;
17-
margin: 0 auto 20px;
18-
background-color: #fff;
19-
border: 1px solid #e5e5e5;
20-
-webkit-border-radius: 5px;
21-
-moz-border-radius: 5px;
22-
border-radius: 5px;
23-
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
24-
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
25-
box-shadow: 0 1px 2px rgba(0,0,0,.05);
26-
}
27-
.form-signin .form-signin-heading,
28-
.form-signin .checkbox {
29-
margin-bottom: 10px;
30-
}
31-
.form-signin input[type="text"],
32-
.form-signin input[type="password"] {
33-
font-size: 16px;
34-
height: auto;
35-
margin-bottom: 15px;
36-
padding: 7px 9px;
37-
}
10+
<!-- CSS -->
11+
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
12+
<!-- Bootstrap core CSS -->
13+
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css"/>
14+
<!-- Fonts from Font Awsome -->
15+
<link rel="stylesheet" href="css/font-awesome.min.css"/>
16+
<!-- CSS Animate -->
17+
<link rel="stylesheet" href="css/animate.css"/>
18+
<!-- Custom styles for this theme -->
19+
<link rel="stylesheet" href="css/main.css"/>
20+
<!-- end of CSS -->
3821

39-
</style>
40-
</head>
41-
<body onload='document.loginForm.username.focus();'>
4222

43-
<div class="container">
44-
<c:if test="${not empty error}">
45-
<div class="error">${error}</div>
46-
</c:if>
47-
<c:if test="${not empty msg}">
48-
<div class="msg">${msg}</div>
49-
</c:if>
50-
<form class="form-signin" name='loginForm'
51-
action="<c:url value='j_spring_security_check' />" method='POST'>
52-
<h2 class="form-signin-heading">Please sign in</h2>
53-
<input type="text" class="input-block-level" placeholder="Email address" name='username'>
54-
<input type="password" class="input-block-level" placeholder="Password" name='password'>
23+
</style>
24+
</head>
25+
<body onload='document.loginForm.username.focus();'>
26+
<section id="container" ng-controller="goatLesson">
27+
<header id="header">
28+
<!--logo start-->
29+
<div class="brand">
30+
<a href="${pageContext.request.contextPath}/start.mvc" class="logo"><span>Web</span>Goat</a>
31+
</div>
32+
<!--logo end-->
33+
<div class="toggle-navigation toggle-left">
5534

56-
<input type="hidden" name="${_csrf.parameterName}"
57-
value="${_csrf.token}" />
58-
<button class="btn btn-large btn-primary" type="submit">Sign in</button>
59-
</form>
60-
<div class="panel panel-info" style="max-width: 300px; margin: 0 auto 20px;">
61-
<div class="panel-heading">
62-
Login with one of the following accounts
63-
</div>
64-
<div class="panel-body">
65-
<!-- Table -->
66-
<table class="table table-bordered">
67-
<thead>
68-
<tr><td>Account</td><td>User</td><td>Password</td></tr>
69-
</thead>
70-
<tbody>
71-
<tr><td>Webgoat User</td><td>guest</td><td>guest</td></tr>
72-
<tr><td>Webgoat Admin</td><td>webgoat</td><td>webgoat</td></tr>
73-
<tr><td>Server Admin</td><td>server</td><td>server</td></tr>
74-
</tbody>
75-
</table>
35+
</div><!--toggle navigation end-->
36+
<div class="lessonTitle" >
37+
<h1 id="lessonTitle">Please login</h1>
38+
</div><!--lesson title end-->
7639

40+
</header>
41+
<section class="main-content-wrapper">
42+
43+
<section id="main-content" >
44+
<c:if test="${not empty error}">
45+
<div class="error">${error}</div>
46+
</c:if>
47+
<c:if test="${not empty msg}">
48+
<div class="msg">${msg}</div>
49+
</c:if>
50+
<br/><br/>
51+
<form role="form" name='loginForm' action="<c:url value='j_spring_security_check' />" method='POST' style="width: 400px;">
52+
<div class="form-group">
53+
<label for="exampleInputEmail1">Username</label>
54+
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Username" name='username'>
55+
</div>
56+
<div class="form-group">
57+
<label for="exampleInputPassword1">Password</label>
58+
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name='password'>
59+
</div>
60+
61+
62+
<input type="hidden" name="${_csrf.parameterName}"
63+
value="${_csrf.token}" />
64+
<button class="btn btn-large btn-primary" type="submit">Sign in</button>
65+
</form>
66+
<br/><br/>
67+
<h4>The following accounts are built into Webgoat</h4>
68+
<table class="table table-bordered" style="width:400px;">
69+
<thead>
70+
<tr class="warning"><th>Account</th><th>User</th><th>Password</th></tr>
71+
</thead>
72+
<tbody>
73+
<tr><td>Webgoat User</td><td>guest</td><td>guest</td></tr>
74+
<tr><td>Webgoat Admin</td><td>webgoat</td><td>webgoat</td></tr>
75+
</tbody>
76+
</table>
77+
<br/><br/>
7778

78-
</div>
79-
</div>
80-
</div> <!-- /container -->
8179

80+
</section>
81+
</section>
82+
</section>
8283

8384

84-
</body>
85+
</body>
8586
</html>

‎src/main/webapp/WEB-INF/pages/logout.jsp‎

Lines changed: 65 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,68 @@
11
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
22
<html>
33
<head>
4-
<title>Login Page</title>
5-
<!-- Latest compiled and minified CSS -->
6-
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
7-
<style type="text/css">
8-
body {
9-
padding-top: 40px;
10-
padding-bottom: 40px;
11-
background-color: #f5f5f5;
12-
}
13-
14-
.form-signin {
15-
max-width: 300px;
16-
padding: 19px 29px 29px;
17-
margin: 0 auto 20px;
18-
background-color: #fff;
19-
border: 1px solid #e5e5e5;
20-
-webkit-border-radius: 5px;
21-
-moz-border-radius: 5px;
22-
border-radius: 5px;
23-
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
24-
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
25-
box-shadow: 0 1px 2px rgba(0,0,0,.05);
26-
}
27-
.form-signin .form-signin-heading,
28-
.form-signin .checkbox {
29-
margin-bottom: 10px;
30-
}
31-
.form-signin input[type="text"],
32-
.form-signin input[type="password"] {
33-
font-size: 16px;
34-
height: auto;
35-
margin-bottom: 15px;
36-
padding: 7px 9px;
37-
}
38-
39-
</style>
40-
</head>
41-
<body onload='document.loginForm.username.focus();'>
42-
43-
<div class="container">
44-
<c:if test="${not empty error}">
45-
<div class="error">${error}</div>
46-
</c:if>
47-
<c:if test="${not empty msg}">
48-
<div class="msg">${msg}</div>
49-
</c:if>
50-
You have logged out successfully
51-
<hr/>
52-
Click here to <a href="<c:url value="login.mvc" />" > Login</a>
53-
54-
</div> <!-- /container -->
55-
56-
57-
58-
</body>
59-
</html>
4+
<title>Logout Page</title>
5+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
6+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
7+
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
8+
<!--[if gt IE 8]><!-->
9+
10+
<!-- CSS -->
11+
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
12+
<!-- Bootstrap core CSS -->
13+
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css"/>
14+
<!-- Fonts from Font Awsome -->
15+
<link rel="stylesheet" href="css/font-awesome.min.css"/>
16+
<!-- CSS Animate -->
17+
<link rel="stylesheet" href="css/animate.css"/>
18+
<!-- Custom styles for this theme -->
19+
<link rel="stylesheet" href="css/main.css"/>
20+
<!-- end of CSS -->
21+
22+
23+
</style>
24+
</head>
25+
<body onload='document.loginForm.username.focus();'>
26+
<section id="container" ng-controller="goatLesson">
27+
<header id="header">
28+
<!--logo start-->
29+
<div class="brand">
30+
<a href="${pageContext.request.contextPath}/start.mvc" class="logo"><span>Web</span>Goat</a>
31+
</div>
32+
<!--logo end-->
33+
<div class="toggle-navigation toggle-left">
34+
35+
</div><!--toggle navigation end-->
36+
<div class="lessonTitle" >
37+
<h1 id="lessonTitle">Logout</h1>
38+
</div><!--lesson title end-->
39+
40+
</header>
41+
<section class="main-content-wrapper">
42+
43+
<section id="main-content" >
44+
<c:if test="${not empty error}">
45+
<div class="error">${error}</div>
46+
</c:if>
47+
<c:if test="${not empty msg}">
48+
<div class="msg">${msg}</div>
49+
</c:if>
50+
<br/><br/>
51+
<div class="alert alert-success" role="alert" style="width: 400px;">
52+
You have logged out successfully
53+
</div>
54+
55+
<hr/>
56+
<h4>Click here if you would like to log back in: <a href="<c:url value="login.mvc" />" > Login</a></h4>
57+
58+
59+
</section>
60+
</section>
61+
</section>
62+
63+
64+
</body>
65+
</html>
66+
67+
68+

0 commit comments

Comments
 (0)