From 3834fbaba60dff236c3b2185417f25170c0c6cdf Mon Sep 17 00:00:00 2001
From: Julien WITTOUCK <julien.wittouck@gmail.com>
Date: Tue, 20 Aug 2019 11:21:18 +0200
Subject: [PATCH] :lipstick: : add custom login page

---
 .../io/codeka/gaia/config/SecurityConfig.java |   2 +-
 .../io/codeka/gaia/config/WebMvcConfig.java   |  14 ++
 src/main/resources/static/css/login.css       | 217 ++++++++++++++++++
 src/main/resources/templates/login.html       |  76 ++++++
 4 files changed, 308 insertions(+), 1 deletion(-)
 create mode 100644 src/main/java/io/codeka/gaia/config/WebMvcConfig.java
 create mode 100644 src/main/resources/static/css/login.css
 create mode 100644 src/main/resources/templates/login.html

diff --git a/src/main/java/io/codeka/gaia/config/SecurityConfig.java b/src/main/java/io/codeka/gaia/config/SecurityConfig.java
index ec2fd5afc..9b30432d8 100644
--- a/src/main/java/io/codeka/gaia/config/SecurityConfig.java
+++ b/src/main/java/io/codeka/gaia/config/SecurityConfig.java
@@ -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();
     }
diff --git a/src/main/java/io/codeka/gaia/config/WebMvcConfig.java b/src/main/java/io/codeka/gaia/config/WebMvcConfig.java
new file mode 100644
index 000000000..66efa079d
--- /dev/null
+++ b/src/main/java/io/codeka/gaia/config/WebMvcConfig.java
@@ -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");
+    }
+}
diff --git a/src/main/resources/static/css/login.css b/src/main/resources/static/css/login.css
new file mode 100644
index 000000000..437dd3268
--- /dev/null
+++ b/src/main/resources/static/css/login.css
@@ -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;
+}
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
new file mode 100644
index 000000000..849b8d85b
--- /dev/null
+++ b/src/main/resources/templates/login.html
@@ -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>
\ No newline at end of file