Skip to content

Commit 6206bda

Browse files
ThroyerThroyer
committed
App layout
1 parent bcd001c commit 6206bda

File tree

8 files changed

+145
-110
lines changed

8 files changed

+145
-110
lines changed

‎pom.xml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,19 @@
109109
<artifactId>bootstrap</artifactId>
110110
<version>5.1.3</version>
111111
</dependency>
112+
113+
<dependency>
114+
<groupId>org.thymeleaf.extras</groupId>
115+
<artifactId>thymeleaf-extras-java8time</artifactId>
116+
</dependency>
117+
<dependency>
118+
<groupId>org.springframework.security</groupId>
119+
<artifactId>spring-security-taglibs</artifactId>
120+
</dependency>
121+
<dependency>
122+
<groupId>org.thymeleaf.extras</groupId>
123+
<artifactId>thymeleaf-extras-springsecurity5</artifactId>
124+
</dependency>
112125

113126
<dependency>
114127
<groupId>org.springframework.boot</groupId>

‎src/main/java/com/github/throyer/common/springboot/configurations/SpringSecurityConfiguration.java‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,8 @@ protected void configure(HttpSecurity http) throws Exception {
126126
.authorizeRequests()
127127
.antMatchers(GET, LOGIN_URL)
128128
.permitAll()
129+
.antMatchers(GET, "/app")
130+
.permitAll()
129131
.anyRequest()
130132
.authenticated()
131133
.and()
@@ -145,7 +147,7 @@ protected void configure(HttpSecurity http) throws Exception {
145147
.logout()
146148
.deleteCookies(SESSION_COOKIE_NAME)
147149
.logoutRequestMatcher(new AntPathRequestMatcher(LOGOUT_URL))
148-
.logoutSuccessUrl("/app")
150+
.logoutSuccessUrl(LOGIN_URL)
149151
.and()
150152
.exceptionHandling()
151153
.accessDeniedPage(ACESSO_NEGADO_URL);

‎src/main/resources/application.properties‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,6 @@ spring.mail.properties.mail.smtp.timeout=5000
4343
spring.mail.properties.mail.smtp.writetimeout=5000
4444
spring.mail.properties.mail.smtp.starttls.enable=true
4545

46+
# templates
47+
spring.resources.cache.period=0
48+

‎src/main/resources/templates/app/fragments/footer.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<footer th:fragment="footer" class=" d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
2+
<div class="mx-4 col-md-4 d-flex align-items-center">
3+
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
4+
<img class="d-inline-block align-top" width="30" height="30" src="https://i.imgur.com/UJ9JMCC.png">
5+
</a>
6+
<span class="text-muted">&copy; 2021</span>
7+
</div>
8+
9+
<ul class="mx-4 nav col-md-4 justify-content-end list-unstyled d-flex icon-list">
10+
<li class="ms-3">
11+
<a class="text-muted" href="https://twitter.com/Throyer_" target="_blank">
12+
<i class="fab fa-2x fa-twitter-square"></i>
13+
</a>
14+
</li>
15+
<li class="ms-3">
16+
<a class="text-muted" href="https://github.com/Throyer" target="_blank">
17+
<i class="fab fa-2x fa-github-square"></i>
18+
</a>
19+
</li>
20+
<li class="ms-3">
21+
<a class="text-muted" href="https://www.linkedin.com/in/renato-henrique-horacio/" target="_blank">
22+
<i class="fab fa-2x fa-linkedin"></i>
23+
</a>
24+
</li>
25+
</ul>
26+
</footer>

‎src/main/resources/templates/app/fragments/layout.html‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,11 @@
3131
</nav>
3232

3333
<!-- content container -->
34-
<div class="container">
35-
<div class="row">
36-
<div class="col">
37-
<!-- page content -->
38-
<th:block th:replace="${content}"></th:block>
39-
</div>
40-
</div>
41-
</div>
34+
<th:block th:replace="${content}"></th:block>
35+
36+
<footer
37+
th:replace="~{app/fragments/footer :: footer}">
38+
</footer>
4239

4340
<!-- modals section -->
4441
<th:block

‎src/main/resources/templates/app/fragments/navbar.html‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,30 @@
1010
Home
1111
</a>
1212
</li>
13-
13+
<li class="nav-item">
14+
<a
15+
th:href="@{/documentation/swagger-ui/#/}"
16+
class="nav-link link-dark px-2 active"
17+
aria-current="page"
18+
>
19+
Swagger API
20+
</a>
21+
</li>
1422
</ul>
15-
<ul class="nav">
23+
<ul sec:authorize="isAuthenticated()" class="nav">
1624
<li class="nav-item">
1725
<a th:href="@{/app/logout}" class="nav-link link-dark px-2">
1826
Sign out
1927
</a>
2028
</li>
2129
</ul>
30+
<ul sec:authorize="!isAuthenticated()" class="nav">
31+
<li class="nav-item">
32+
<a th:href="@{/app/login}" class="nav-link link-dark px-2">Login</a>
33+
</li>
34+
<li class="nav-item">
35+
<a th:href="@{/app/register}" class="nav-link link-dark px-2">Sign up</a>
36+
</li>
37+
</ul>
2238
</div>
2339
</nav>

‎src/main/resources/templates/app/index.html‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@
33
<section>
44
<div class="col-lg-8 mx-auto p-3 py-md-5">
55
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
6-
<a th:href="@{/app}" class="d-flex align-items-center text-dark text-decoration-none">
6+
<a th:href="@{/app}" class="d-flex d-flex flex-row container align-items-center justify-content-between text-dark text-decoration-none">
77
<img class="d-inline-block align-top ml-2"
8+
width="500"
89
src="https://github.com/Throyer/springboot-api-crud/raw/master/assets/tecnologias.png">
10+
<span class="fs-1">Simple spring Boot API crud</span>
911
</a>
1012
</header>
1113

@@ -37,7 +39,7 @@ <h1>Explore the project</h1>
3739

3840
<div class="mb-5">
3941
<a href="https://github.com/Throyer/springboot-api-crud#sumario" target="_blank"
40-
class="btn btn-primary btn-lg px-4">See the repository</a>
42+
class="btn btn-primary btn-lg px-4">Repository <i class="fab fa-github"></i></a>
4143
</div>
4244

4345
<hr class="col-3 col-md-2 mb-5">
@@ -91,12 +93,5 @@ <h2>Project features</h2>
9193
</div>
9294
</main>
9395
</div>
94-
<footer class="pt-5 my-5 text-muted border-top">
95-
Throyer &middot; &copy; 2021
96-
</footer>
9796
</section>
98-
<!-- <modal
99-
th:replace="~{views/usuario/fragments/modal-usuario :: modal-usuario}">
100-
</modal>
101-
<script language="javascript" th:src="@{/js/modais/modal-usuario.js}"></script> -->
10297
</layout>

‎src/main/resources/templates/app/login/index.html‎

Lines changed: 73 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,77 @@
1-
<html>
2-
<head>
3-
<title>Login</title>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<th:block th:replace="~{app/fragments/imports :: default-css}"></th:block>
1+
<layout th:replace="~{app/fragments/layout :: layout(~{::title}, ~{::links}, ~{::content}, ~{}, ~{})}">
2+
<title>Login</title>
3+
<links>
74
<link rel="stylesheet" type="text/css" th:href="@{/css/login.css}">
8-
</head>
9-
<body>
10-
<form
11-
class="form mt-5"
12-
th:action="@{/app/login}"
13-
method="POST"
14-
>
15-
<div class="icon">
16-
<i class="fas fa-desktop fa-5x"></i>
17-
</div>
18-
<h1 class="h3 mb-3 font-weight-light text-center mt-2">Fazer login</h1>
19-
20-
<label for="input_email" class="sr-only">Endereço de email</label>
21-
<input
22-
id="input_email"
23-
type="email"
24-
name="email"
25-
class="form-control"
26-
placeholder="Email"
27-
required
28-
autofocus
29-
>
30-
31-
<label
32-
for="input_password"
33-
class="sr-only"
34-
>
35-
Senha
36-
</label>
37-
<input
38-
id="input_password"
39-
type="password"
40-
name="password"
41-
class="form-control"
42-
placeholder="Senha"
43-
required
44-
>
45-
46-
<div class="d-flex justify-content-center mb-2">
47-
<div class="custom-control custom-checkbox">
48-
<input
49-
type="checkbox"
50-
name="remember-me"
51-
class="custom-control-input"
52-
id="input_remember_me"
53-
>
54-
<label
55-
class="custom-control-label"
56-
for="input_remember_me">
57-
Lembrar de mim
58-
</label>
5+
</links>
6+
<content>
7+
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
8+
<div class="row align-items-center g-lg-5 py-5">
9+
<div class="col-lg-7 text-center text-lg-start">
10+
<h1 class="display-4 fw-bold lh-1 mb-3">Lorem ipsum dolor sit amet</h1>
11+
<p class="col-lg-10 fs-4">
12+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
13+
In excepturi deleniti asperiores? Quasi asperiores voluptatum
14+
aut placeat ad nesciunt ut explicabo? Itaque impedit
15+
inventore debitis velit, reiciendis facilis obcaecati
16+
voluptatibus?
17+
</p>
5918
</div>
60-
</div>
19+
<div class="col-md-10 mx-auto col-lg-5">
20+
<form class="form mt-5" th:action="@{/app/login}" method="POST">
21+
<div class="icon mb-3">
22+
<i class="fas fa-database fa-6x"></i>
23+
</div>
24+
<h1 class="h3 mb-3 font-weight-light text-center mt-2">Login</h1>
6125

62-
<div class="d-grid gap-2">
63-
<button class="btn btn-primary" type="submit">Login</button>
64-
</div>
65-
66-
<div
67-
th:if="${param.error}"
68-
class="alert alert-danger alert-dismissible fade show mt-2"
69-
role="alert"
70-
>
71-
<strong>Senha ou usuario invalido!</strong>
72-
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
73-
<span aria-hidden="true">&times;</span>
74-
</button>
75-
</div>
76-
77-
<div
78-
th:if="${param.denied}"
79-
class="alert alert-warning alert-dismissible fade show mt-3 mb-3"
80-
role="alert"
81-
>
82-
<strong>Acesso negado!</strong>
83-
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
84-
<span aria-hidden="true">&times;</span>
85-
</button>
86-
<hr>
87-
Por favor faça o login com outro usuario ou entre em
88-
<a th:href="@{/contato}" class="">contato</a> com o administrador do sistema.
26+
<label for="input_email" class="sr-only">Endereço de email</label>
27+
<input id="input_email" type="email" name="email" class="form-control" placeholder="Email"
28+
required autofocus>
29+
30+
<label for="input_password" class="sr-only">
31+
Senha
32+
</label>
33+
<input id="input_password" type="password" name="password" class="form-control"
34+
placeholder="Senha" required>
35+
36+
<div class="d-flex justify-content-center mb-4">
37+
<div class="custom-control custom-checkbox">
38+
<input type="checkbox" name="remember-me" class="custom-control-input"
39+
id="input_remember_me">
40+
<label class="custom-control-label" for="input_remember_me">
41+
Remember me
42+
</label>
43+
</div>
44+
</div>
45+
46+
<div class="d-grid gap-2">
47+
<button class="btn btn-primary" type="submit">Login</button>
48+
</div>
49+
50+
<div class="mt-4 d-flex justify-content-center mb-2 text-sm">
51+
<a href="">Forgot your password?</a>
52+
</div>
53+
54+
<div th:if="${param.error}" class="alert alert-danger alert-dismissible fade show mt-2"
55+
role="alert">
56+
<strong>Senha ou usuario invalido!</strong>
57+
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
58+
<span aria-hidden="true">&times;</span>
59+
</button>
60+
</div>
61+
62+
<div th:if="${param.denied}" class="alert alert-warning alert-dismissible fade show mt-3 mb-3"
63+
role="alert">
64+
<strong>Acesso negado!</strong>
65+
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
66+
<span aria-hidden="true">&times;</span>
67+
</button>
68+
<hr>
69+
Por favor faça o login com outro usuario ou entre em
70+
<a th:href="@{/contato}" class="">contato</a> com o administrador do sistema.
71+
</div>
72+
</form>
73+
</div>
8974
</div>
90-
</form>
91-
92-
<th:block th:replace="~{app/fragments/imports :: default-javascript}"></th:block>
93-
</body>
94-
</html>
75+
</div>
76+
</content>
77+
</layout>

0 commit comments

Comments
 (0)