Skip to content

Commit

Permalink
💄 : add custom login page
Browse files Browse the repository at this point in the history
  • Loading branch information
@juwit
juwit committed Aug 20, 2019
1 parent 3aced84 commit 3834fba
Show file tree
Hide file tree
Showing 4 changed files with 308 additions and 1 deletion.
2 changes: 1 addition & 1 deletion src/main/java/io/codeka/gaia/config/SecurityConfig.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ protected void configure(HttpSecurity http) throws Exception {
.antMatchers("/css/**", "/js/**", "/favicon.ico", "/images/**").permitAll()
.antMatchers("/**").authenticated()
.and()
.formLogin().permitAll()
.formLogin().loginPage("/login").permitAll()
.and()
.logout().permitAll();
}
Expand Down
14 changes: 14 additions & 0 deletions src/main/java/io/codeka/gaia/config/WebMvcConfig.java
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
package io.codeka.gaia.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {

@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/login").setViewName("login");
}
}
217 changes: 217 additions & 0 deletions src/main/resources/static/css/login.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,217 @@
h1,h2,h3,h4,h5,h6 {
margin: 0;
}

input {
outline: none;
border: none;
}

button {
outline: none !important;
border: none;
background: transparent;
}

.container-login {
width: 100%;
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 15px;
background: white;
background: -webkit-linear-gradient(-135deg, #BAEB6C, #FFFFFF);
background: -o-linear-gradient(-135deg, #BAEB6C, #FFFFFF);
background: -moz-linear-gradient(-135deg, #BAEB6C, #FFFFFF);
background: linear-gradient(-135deg, #BAEB6C, #FFFFFF);
}

.wrap-login {
width: 960px;
background: #fff;
border-radius: 10px;
overflow: hidden;

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 50px 130px 30px 95px;
}

.login-pic {
width: 316px;
}

.login-pic img {
max-width: 100%;
}


.login-form {
width: 290px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.login-form-title {
font-size: 24px;
color: #333333;
line-height: 1.2;
text-align: center;

width: 100%;
display: block;
}

.wrap-input {
position: relative;
width: 100%;
z-index: 1;
margin-bottom: 10px;
}

.input {
font-size: 15px;
line-height: 1.5;
color: #666666;

display: block;
width: 100%;
background: #e6e6e6;
height: 50px;
border-radius: .25rem;
padding: 0 30px 0 68px;
}


/*------------------------------------------------------------------
[ Focus ]*/
.focus-input {
display: block;
position: absolute;
border-radius: .25rem;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
box-shadow: 0px 0px 0px 0px;
color: rgba(87,184,70, 0.8);
}

.symbol-input {
font-size: 15px;

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
align-items: center;
position: absolute;
border-radius: .25rem;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
padding-left: 35px;
pointer-events: none;
color: #666666;

-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}

.input:focus + .focus-input + .symbol-input {
color: #57b846;
padding-left: 28px;
}

/*------------------------------------------------------------------
[ Button ]*/
.container-login-form-btn {
width: 100%;
justify-content: center;
}

.login-form-btn {
font-size: 15px;
line-height: 1.5;
color: #fff;
text-transform: uppercase;

width: 100%;
height: 50px;
border-radius: .25rem;
background: #96D629;

-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}

.login-form-btn:hover {
background: #57b846;
}



/*------------------------------------------------------------------
[ Responsive ]*/


@media (max-width: 992px) {
.wrap-login {
padding: 177px 90px 33px 85px;
}

.login-pic {
width: 35%;
}

.login-form {
width: 50%;
}
}

@media (max-width: 768px) {
.wrap-login {
padding: 100px 80px 33px 80px;
}

.login-pic {
display: none;
}

.login-form {
width: 100%;
}
}

@media (max-width: 576px) {
.wrap-login {
padding: 100px 15px 33px 15px;
}
}


/*------------------------------------------------------------------
[ Alert validate ]*/

.validate-input {
position: relative;
}
76 changes: 76 additions & 0 deletions src/main/resources/templates/login.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- mobile metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">

<!-- site metas -->
<title>Gaia</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">

<!-- bootstrap css -->
<link rel="stylesheet" href="/webjars/bootstrap/4.3.1/css/bootstrap.min.css" />

<link rel="stylesheet" href="/css/login.css" />

<link rel="stylesheet" href="/webjars/font-awesome/5.8.2/css/all.css" />

</head>
<body>

<div class="limiter">
<div class="container-login">
<div class="wrap-login shadow bg-white rounded">
<div class="login-pic">
<img src="/images/gaia.png" alt="gaia-logo"/>
</div>

<form class="login-form" th:action="@{/login}" method="post">
<h1 class="login-form-title">Gaia - Login</h1>

<div>

<div th:if="${param.error}" class="alert alert-warning">
Invalid username and password.
</div>
<div th:if="${param.logout}" class="alert alert-success">
You have been logged out.
</div>

<div class="wrap-input">
<input class="input" type="text" name="username" placeholder="Username" autofocus/>
<span class="focus-input"></span>
<span class="symbol-input">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>

<div class="wrap-input">
<input class="input" type="password" name="password" placeholder="Password" />
<span class="focus-input"></span>
<span class="symbol-input">
<i class="fa fa-lock" aria-hidden="true"></i>
</span>
</div>

</div>

<div class="container-login-form-btn">
<button type="submit" class="login-form-btn">
Login
</button>
</div>

</form>
</div>
</div>
</div>

</body>
</html>

0 comments on commit 3834fba

Please sign in to comment.