TSK-764 Beautify login screen.

This commit is contained in:
Martin Rojas Miguel Angel 2018-12-20 15:15:38 +01:00 committed by Holger Hagen
parent b4ec24e705
commit dd5010168e
5 changed files with 111 additions and 24 deletions

View File

@ -36,7 +36,13 @@ public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
http.authorizeRequests()
.antMatchers(
"/css/**",
"/img/**")
.permitAll()
.and()
.csrf().disable()
.httpBasic()
.and()
.authenticationProvider(jaasAuthProvider())
@ -99,8 +105,12 @@ public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
.formLogin().loginPage("/login").failureUrl("/login?error")
.permitAll()
.and()
.logout().logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
.logoutSuccessUrl("/login").deleteCookies("JSESSIONID")
.invalidateHttpSession(true);
.logout()
.invalidateHttpSession(true)
.clearAuthentication(true)
.logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
.logoutSuccessUrl("/login?logout")
.deleteCookies("JSESSIONID")
.permitAll();
}
}

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,34 @@
body,html{
height:100%;
}
h1 {
margin-top: 20px;
color: #5fbca1;
}
body:before {
display: block;
width: 100%;
height: 3px;
background-image: linear-gradient(to right, #36bcee 30%, #5fbca1 50%);
content: ' ';
}
.logo{
margin-top: 20px;
width: 100px;
height: 100px;
}
div > form {
margin-top: 150px;
}
@media screen and (max-width: 768px) {
div > form {
margin-top: 75px;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

View File

@ -1,27 +1,63 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Custom Login Page</title>
<title>Taskana login</title>
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap/4.1.3/bootstrap.min.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}"/>
</head>
<body>
<div>
<form name="f" th:action="@{/login}" method="post">
<fieldset>
<legend>Please Login</legend>
<div th:if="${param.error}" class="alert alert-error">
Invalid username and password.
</div>
<div th:if="${param.logout}" class="alert alert-success">
You have been logged out.
</div>
<label for="username">Username</label>
<input type="text" id="username" name="username"/>
<label for="password">Password</label>
<input type="password" id="password" name="password"/>
<div class="form-actions">
<button type="submit" class="btn">Log in</button>
</div>
</fieldset>
</form>
<div class="container">
<h1 class="row justify-content-center">Welcome to Taskana</h1>
<div class="row justify-content-center">
<div>
<img th:src="@{/img/logo.png}" class="logo" alt="memorynotfound logo"/>
</div>
</div>
<div class="row justify-content-center align-items-center">
<div class="col-xs-12 col-md-6">
<form th:action="@{/login}" method="post">
<div th:if="${param.error}">
<div class="alert alert-danger">
Invalid username or password.
</div>
</div>
<div th:if="${param.logout}">
<div class="alert alert-info">
You have been logged out.
</div>
</div>
<div class="form-group">
<label for="username">Username</label>:
<input type="text"
id="username"
name="username"
class="form-control"
autofocus="autofocus"
placeholder="Username">
</div>
<div class="form-group">
<label for="password">Password</label>:
<input type="password"
id="password"
name="password"
class="form-control"
placeholder="Password">
</div>
<div class="form-group">
<div class="row justify-content-center">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit"
name="login-submit"
id="login-submit"
class="form-control btn btn-info"
value="Log In">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>