Skip to content

Commit f91ba21

Browse files
ThroyerThroyer
committed
Modal about me
1 parent bfa7065 commit f91ba21

File tree

7 files changed

+179
-85
lines changed

7 files changed

+179
-85
lines changed

‎src/main/java/com/github/throyer/common/springboot/controllers/app/AppController.java

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
package com.github.throyer.common.springboot.controllers.app;
22

3-
import com.github.throyer.common.springboot.domain.repositories.UserRepository;
4-
import static com.github.throyer.common.springboot.domain.services.security.SecurityService.authorized;
5-
import org.springframework.beans.factory.annotation.Autowired;
63
import org.springframework.stereotype.Controller;
74
import org.springframework.ui.Model;
85
import org.springframework.web.bind.annotation.GetMapping;
@@ -12,15 +9,8 @@
129
@RequestMapping("/app")
1310
public class AppController {
1411

15-
@Autowired
16-
private UserRepository repository;
17-
1812
@GetMapping
19-
public String index(Model model) {
20-
authorized()
21-
.ifPresent(session -> repository.findNameById(session.getId())
22-
.ifPresent(name -> model.addAttribute("name", name)));
23-
13+
public String index(Model model) {
2414
return "app/index";
2515
}
2616
}

‎src/main/java/com/github/throyer/common/springboot/domain/models/security/Authorized.java

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,13 @@ public class Authorized extends User {
1111

1212
private static final long serialVersionUID = 1L;
1313

14-
private Long id;
14+
private final Long id;
15+
private final String name;
1516

1617
public Authorized(Long id, List<Role> authorities) {
1718
super("USERNAME", "SECRET", authorities);
1819
this.id = id;
20+
this.name = "";
1921
}
2022

2123
public Authorized(com.github.throyer.common.springboot.domain.models.entity.User user) {
@@ -29,12 +31,17 @@ public Authorized(com.github.throyer.common.springboot.domain.models.entity.User
2931
user.getRoles()
3032
);
3133
this.id = user.getId();
34+
this.name = user.getName();
3235
}
3336

3437
public Long getId() {
3538
return id;
3639
}
3740

41+
public String getName() {
42+
return name;
43+
}
44+
3845
public UsernamePasswordAuthenticationToken getAuthentication() {
3946
return new UsernamePasswordAuthenticationToken(this, null, getAuthorities());
4047
}

‎src/main/resources/static/css/styles.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@media (min-width: 768px) {
2+
.animate {
3+
animation-duration : 0.3s;
4+
-webkit-animation-duration : 0.3s;
5+
animation-fill-mode : both;
6+
-webkit-animation-fill-mode: both;
7+
}
8+
}
9+
10+
@keyframes slideIn {
11+
0% {
12+
transform: translateY(1rem);
13+
opacity : 0;
14+
}
15+
16+
100% {
17+
transform: translateY(0rem);
18+
opacity : 1;
19+
}
20+
21+
0% {
22+
transform: translateY(1rem);
23+
opacity : 0;
24+
}
25+
}
26+
27+
@-webkit-keyframes slideIn {
28+
0% {
29+
-webkit-transform: transform;
30+
-webkit-opacity : 0;
31+
}
32+
33+
100% {
34+
-webkit-transform: translateY(0);
35+
-webkit-opacity : 1;
36+
}
37+
38+
0% {
39+
-webkit-transform: translateY(1rem);
40+
-webkit-opacity : 0;
41+
}
42+
}
43+
44+
.slideIn {
45+
-webkit-animation-name: slideIn;
46+
animation-name : slideIn;
47+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,10 @@
4949
th:replace="${modals}">
5050
</th:block>
5151

52+
<th:block
53+
th:replace="~{app/fragments/me :: me}">
54+
</th:block>
55+
5256
<!-- default scripts -->
5357
<script
5458
th:replace="~{app/fragments/imports :: default-javascript}">

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<div th:fragment="me" class="modal fade" tabindex="-1" role="dialog" id="me">
2+
<div class="modal-dialog" role="document">
3+
<div class="modal-content rounded-6 shadow">
4+
<div class="modal-header border-bottom-0">
5+
<h5 class="modal-title"><i class="fas fa-user-alt"></i> About me</h5>
6+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
7+
</div>
8+
<div class="modal-body py-0" sec:authorize="isAuthenticated()" th:object="${#authentication.principal}">
9+
<p>
10+
<span class="fs-3">Name: </span>
11+
<span class="fs-5 fw-light" th:if="*{name}" th:text="*{name}"></span>
12+
</p>
13+
<p>
14+
<span class="fs-3">Roles: </span>
15+
<code th:each="role : *{authorities}">
16+
<span th:text="${role}" class="fs-5"></span>
17+
</code>
18+
</p>
19+
</div>
20+
<div class="modal-footer flex-column border-top-0">
21+
<button type="button" class="btn btn-lg btn-light w-100 mx-0" data-bs-dismiss="modal">Close</button>
22+
</div>
23+
</div>
24+
</div>
25+
</div>

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

Lines changed: 88 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,89 @@
1-
<nav th:fragment="navbar" class="py-2 bg-light border-bottom">
2-
<div class="container d-flex flex-wrap">
3-
<ul class="nav me-auto">
4-
<li class="nav-item">
5-
<a
6-
th:href="@{/app}"
7-
class="nav-link link-dark px-2 active"
8-
aria-current="page"
9-
>
10-
<i class="fas fa-home"></i>
11-
Home
12-
</a>
13-
</li>
14-
<li class="nav-item">
15-
<a
16-
th:href="@{/swagger-ui/index.html?configUrl=/documentation/schemas/swagger-config}"
17-
class="nav-link link-dark px-2 active"
18-
aria-current="page"
19-
>
20-
<i class="fas fa-scroll"></i>
21-
Swagger docs
22-
</a>
23-
</li>
24-
<li class="nav-item">
25-
<a
26-
href="https://github.com/Throyer/springboot-api-crud#spring-boot-api-crud"
27-
class="nav-link link-dark px-2 active"
28-
aria-current="page"
29-
>
30-
<i class="fab fa-github-alt"></i>
31-
Repository
32-
</a>
33-
</li>
34-
</ul>
35-
<ul sec:authorize="isAuthenticated()" class="nav">
36-
<li class="nav-item">
37-
<a th:href="@{/app/logout}" class="nav-link link-dark px-2">
38-
<i class="fas fa-door-open"></i>
39-
Sign out
40-
</a>
41-
</li>
42-
</ul>
43-
<ul sec:authorize="!isAuthenticated()" class="nav">
44-
<li class="nav-item">
45-
<a th:href="@{/app/login}" class="nav-link link-dark px-2">
46-
<i class="fas fa-door-closed"></i>
47-
Login
48-
</a>
49-
</li>
50-
<li class="nav-item">
51-
<a th:href="@{/app/register}" class="nav-link link-dark px-2">
52-
<i class="fas fa-certificate"></i>
53-
Sign up
54-
</a>
55-
</li>
56-
</ul>
57-
</div>
1+
<nav
2+
class="navbar navbar-expand-lg shadow-sm navbar-light bg-light"
3+
th:fragment="navbar">
4+
<div class="container-fluid">
5+
6+
<button
7+
class="navbar-toggler"
8+
type="button"
9+
data-bs-toggle="collapse"
10+
data-bs-target="#navbar"
11+
aria-controls="navbarTogglerDemo02"
12+
aria-expanded="false"
13+
aria-label="Toggle navigation"
14+
>
15+
<span class="navbar-toggler-icon"></span>
16+
</button>
17+
18+
<div class="container collapse navbar-collapse" id="navbar">
19+
20+
<ul class="navbar-nav me-auto">
21+
<li class="nav-item">
22+
<a
23+
th:href="@{/app}"
24+
class="nav-link link-dark px-2 active"
25+
>
26+
<i class="fas fa-home"></i>
27+
Home
28+
</a>
29+
</li>
30+
<li class="nav-item">
31+
<a
32+
th:href="@{/swagger-ui/index.html?configUrl=/documentation/schemas/swagger-config}"
33+
class="nav-link link-dark px-2"
34+
>
35+
<i class="fas fa-scroll"></i>
36+
Swagger docs
37+
</a>
38+
</li>
39+
<li class="nav-item">
40+
<a
41+
href="https://github.com/Throyer/springboot-api-crud#spring-boot-api-crud"
42+
class="nav-link link-dark px-2"
43+
>
44+
<i class="fab fa-github-alt"></i>
45+
Repository
46+
</a>
47+
</li>
48+
</ul>
49+
50+
<ul class="navbar-nav ml-auto">
51+
<li sec:authorize="!isAuthenticated()" class="nav-item">
52+
<a th:href="@{/app/login}" class="nav-link link-dark px-2">
53+
<i class="fas fa-door-closed"></i>
54+
Login
55+
</a>
56+
</li>
57+
<li sec:authorize="!isAuthenticated()" class="nav-item">
58+
<a th:href="@{/app/register}" class="nav-link link-dark px-2">
59+
<i class="fas fa-certificate"></i>
60+
Sign up
61+
</a>
62+
</li>
63+
<li sec:authorize="isAuthenticated()" class="nav-item dropdown">
64+
<a class="nav-link dropdown-toggle" href="#" id="show-more" role="button" data-bs-toggle="dropdown"
65+
aria-expanded="false">
66+
Show more
67+
</a>
68+
<ul class="dropdown-menu border-0 shadow bg-light animate slideIn" aria-labelledby="show-more">
69+
<li>
70+
<a data-bs-toggle="modal" data-bs-target="#me" class="dropdown-item" href="#">
71+
<i class="fas fa-user-circle"></i>
72+
Me
73+
</a>
74+
</li>
75+
<li>
76+
<hr class="dropdown-divider">
77+
</li>
78+
<li>
79+
<a th:href="@{/app/logout}" class="dropdown-item" href="#">
80+
<i class="fas fa-door-open"></i>
81+
Sign out
82+
</a>
83+
</li>
84+
</ul>
85+
</li>
86+
</ul>
87+
</div>
88+
</div>
5889
</nav>

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

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,13 @@
44
<link rel="stylesheet" type="text/css" th:href="@{/css/home.css}">
55
</links>
66
<section>
7-
<div
8-
class="col-lg-8 mx-auto p-3 py-md-3 border-bottom"
9-
sec:authorize="isAuthenticated()"
10-
th:object="${#authentication.principal}">
11-
<p>
12-
<span class="fs-2">Welcome: </span>
13-
<span class="fs-2 fw-light" th:if="${name}" th:text="${name}"></span>
14-
</p>
15-
<p>
16-
<span class="fs-2">Roles: </span>
17-
<code th:each="role : *{authorities}">
18-
<span th:text="${role}" class="fs-5"></span>
19-
</code>
20-
</p>
21-
</div>
227
<div class="col-lg-8 mx-auto p-3 py-md-3">
23-
<h1>Simple Spring Boot API <code class="fs-1">C.R.U.D</code></h1>
8+
<h1>
9+
Simple Spring Boot API
10+
<span class="badge bg-light fs-5 font-monospace text-danger fw-light shadow-sm align-top">
11+
<small>C.R.U.D</small>
12+
</span>
13+
</h1>
2414
<p class="fs-5 col-md-8">
2515
This is a simple API and WEB APP.
2616
</p>

0 commit comments

Comments
 (0)