refactor: improve ui of logout page

application/src/main/java/run/halo/app/security/LogoutSecurityConfigurer.java

@@ -11,6 +11,8 @@
 import org.springframework.http.MediaType;
 import org.springframework.security.config.web.server.ServerHttpSecurity;
 import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.ReactiveSecurityContextHolder;
+import org.springframework.security.core.context.SecurityContext;
 import org.springframework.security.web.server.WebFilterExchange;
 import org.springframework.security.web.server.authentication.logout.DelegatingServerLogoutHandler;
 import org.springframework.security.web.server.authentication.logout.RedirectServerLogoutSuccessHandler;
@@ -21,6 +23,7 @@
 import org.springframework.web.reactive.function.server.RouterFunctions;
 import org.springframework.web.reactive.function.server.ServerResponse;
 import reactor.core.publisher.Mono;
+import run.halo.app.core.user.service.UserService;
 import run.halo.app.security.authentication.SecurityConfigurer;
 import run.halo.app.security.authentication.rememberme.RememberMeServices;
 
@@ -55,13 +58,18 @@ public LogoutSuccessHandler(ServerLogoutHandler... logoutHandler) {
         }
 
         @Bean
-        RouterFunction<ServerResponse> logoutPage() {
+        RouterFunction<ServerResponse> logoutPage(UserService userService) {
             return RouterFunctions.route()
                 .GET("/logout", request -> {
+                    var user = ReactiveSecurityContextHolder.getContext()
+                        .map(SecurityContext::getAuthentication)
+                        .map(Authentication::getName)
+                        .flatMap(userService::getUser);
                     var exchange = request.exchange();
                     var contextPath = exchange.getRequest().getPath().contextPath().value();
                     return ServerResponse.ok().render("logout", Map.of(
-                        "action", contextPath + "/logout"
+                        "action", contextPath + "/logout",
+                        "user", user
                     ));
                 })
                 .build();

application/src/main/resources/templates/gateway_modules/form_fragments.html

@@ -237,9 +237,31 @@
 </form>
 
 <form th:fragment="logout" class="halo-form" id="logout-form" name="logout-form" th:action="@{/logout}" method="post">
+    <div
+        style="
+            display: flex;
+            margin-bottom: 2em;
+            align-items: center;
+            gap: 1em;
+            border: 1px dashed #d1d9e0b3;
+            border-radius: 0.5em;
+            padding: 0.5em;
+        "
+        th:object="${user}"
+    >
+        <img th:if="*{spec.avatar}" th:src="*{spec.avatar}" style="width: 4em; border-radius: 100%" />
+        <div style="display: flex; flex-direction: column; gap: 0.5em; font-size: 0.875em">
+            <span>当前登录的用户</span>
+            <span style="font-weight: 500" th:text="|*{spec.displayName}(@*{metadata.name})|"></span>
+        </div>
+    </div>
     <div class="form-item">
         <button type="submit" th:text="#{form.logout.submit}"></button>
     </div>
+
+    <div class="form-item">
+        <a href="javascript:history.back()">取消</a>
+    </div>
 </form>
 
 <form
@@ -294,4 +316,4 @@
             <button type="submit" th:text="#{form.passwordReset.submit}"></button>
         </div>
     </form>
-</th:block>
+</th:block>

application/src/main/resources/templates/logout.html

@@ -5,6 +5,7 @@
 >
     <th:block th:fragment="body">
         <div class="gateway-wrapper">
+            <div th:replace="~{gateway_modules/common_fragments::haloLogo}"></div>
             <div class="halo-form-wrapper">
                 <h1 class="form-title" th:text="#{form.title}"></h1>
                 <form th:replace="~{gateway_modules/form_fragments::logout}"></form>