Skip to content

Commit a2da9c5

Browse files
topi314topi314
authored
implement custom login page (#2)
1 parent ccee253 commit a2da9c5

File tree

6 files changed

+221
-59
lines changed

6 files changed

+221
-59
lines changed

‎build.gradle.kts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ application {
1616
mainClass = "dev.lavalink.config.server.Launcher"
1717
}
1818

19+
java {
20+
sourceCompatibility = JavaVersion.VERSION_17
21+
targetCompatibility = JavaVersion.VERSION_17
22+
}
23+
1924
repositories {
2025
mavenCentral()
2126
}
@@ -25,6 +30,7 @@ dependencies {
2530
implementation("org.springframework.boot:spring-boot-starter-security:3.3.0")
2631
implementation("org.springframework.boot:spring-boot-starter-web:3.3.0")
2732
implementation("org.springframework.cloud:spring-cloud-config-server:4.1.5")
33+
implementation("org.springframework.boot:spring-boot-starter-thymeleaf:3.3.0")
2834
implementation("ch.qos.logback:logback-classic:1.5.6")
2935
}
3036

‎src/main/java/dev/lavalink/config/server/SecurityConfig.java‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
package dev.lavalink.config.server;
2+
3+
import org.springframework.context.annotation.Bean;
4+
import org.springframework.context.annotation.Configuration;
5+
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
6+
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
7+
import org.springframework.security.web.SecurityFilterChain;
8+
9+
@Configuration
10+
@EnableWebSecurity
11+
public class SecurityConfig {
12+
13+
@Bean
14+
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
15+
return http
16+
.formLogin(form -> form.loginPage("/login").permitAll())
17+
.authorizeHttpRequests(auth -> auth
18+
.requestMatchers("/style.css", "/lavalink.svg").permitAll()
19+
.anyRequest().authenticated())
20+
.build();
21+
}
22+
}

‎src/main/java/dev/lavalink/config/server/controller/LoginController.java‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
package dev.lavalink.config.server.controller;
2+
3+
import org.springframework.stereotype.Controller;
4+
import org.springframework.web.bind.annotation.GetMapping;
5+
6+
@Controller
7+
public class LoginController {
8+
9+
@GetMapping(value = "/login", produces = "text/html;charset=UTF-8")
10+
public String login() {
11+
return "login";
12+
}
13+
14+
}

‎src/main/resources/static/index.html‎

Lines changed: 1 addition & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -5,65 +5,7 @@
55
<title>Lavalink Config Server</title>
66
<link rel="icon" href="lavalink.svg" type="image/svg+xml">
77
<meta name="darkreader-lock">
8-
<style>
9-
:root {
10-
--font-family: Arial;
11-
--button-border-radius: 20px;
12-
--transition-duration: 0.3s;
13-
}
14-
15-
@media (prefers-color-scheme: dark) {
16-
:root {
17-
--background-color: #1e1e1e;
18-
--text-color: #ffffff;
19-
--button-bg: #ff624a;
20-
--button-hover-bg: #e65c00;
21-
}
22-
}
23-
24-
@media (prefers-color-scheme: light) {
25-
:root {
26-
--background-color: #ffffff;
27-
--text-color: #000000;
28-
--button-bg: #ff624a;
29-
--button-hover-bg: #e65c00;
30-
}
31-
}
32-
33-
body {
34-
background-color: var(--background-color);
35-
color: var(--text-color);
36-
font-family: var(--font-family), sans-serif;
37-
text-align: center;
38-
padding-top: 100px;
39-
transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
40-
}
41-
42-
img {
43-
width: 150px;
44-
margin-bottom: 30px;
45-
}
46-
47-
h1 {
48-
font-size: 36px;
49-
margin-bottom: 20px;
50-
}
51-
52-
a.button {
53-
display: inline-block;
54-
padding: 12px 24px;
55-
background-color: var(--button-bg);
56-
color: #ffffff;
57-
text-decoration: none;
58-
border-radius: var(--button-border-radius);
59-
font-size: 18px;
60-
transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
61-
}
62-
63-
a.button:hover {
64-
background-color: var(--button-hover-bg);
65-
}
66-
</style>
8+
<link rel="stylesheet" href="style.css">
679
</head>
6810
<body>
6911
<img src="lavalink.svg" alt="Lavalink Logo">

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

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
*,
2+
*::before,
3+
*::after {
4+
box-sizing: border-box;
5+
}
6+
:root {
7+
--font-family: Arial;
8+
--button-border-radius: 20px;
9+
--transition-duration: 0.3s;
10+
--primary: #ff624a;
11+
--primary-hover: #fc5827;
12+
13+
--alert-danger: #f8d7da;
14+
--alert-danger-text: #721c24;
15+
--alert-danger-border: #f5c6cb;
16+
17+
--alert-success: #14a936;
18+
--alert-success-text: #154724;
19+
--alert-success-border: #c3e6cb;
20+
}
21+
22+
@media (prefers-color-scheme: dark) {
23+
:root {
24+
--background-color: #1e1e1e;
25+
--background-second-color: #2c2c2c;
26+
--background-third-color: #3c3c3c;
27+
--text-color: #ffffff;
28+
}
29+
}
30+
31+
@media (prefers-color-scheme: light) {
32+
:root {
33+
--background-color: #ffffff;
34+
--background-second-color: #f0f0f0;
35+
--background-third-color: #e0e0e0;
36+
--text-color: #000000;
37+
}
38+
}
39+
40+
body {
41+
background-color: var(--background-color);
42+
color: var(--text-color);
43+
font-family: var(--font-family), sans-serif;
44+
text-align: center;
45+
padding-top: 100px;
46+
transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
47+
}
48+
49+
img {
50+
width: 150px;
51+
margin-bottom: 30px;
52+
}
53+
54+
h1 {
55+
font-size: 36px;
56+
margin-bottom: 20px;
57+
}
58+
59+
a.button {
60+
display: inline-block;
61+
padding: 12px 24px;
62+
background-color: var(--primary);
63+
color: #ffffff;
64+
text-decoration: none;
65+
border-radius: var(--button-border-radius);
66+
font-size: 18px;
67+
transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
68+
}
69+
70+
a.button:hover {
71+
background-color: var(--primary-hover);
72+
}
73+
74+
.container {
75+
margin-right: auto;
76+
margin-left: auto;
77+
padding-right: 15px;
78+
padding-left: 15px;
79+
}
80+
81+
.form-control {
82+
font-size: 16px;
83+
display: block;
84+
border-radius: .25rem;
85+
width: 100%;
86+
padding: 10px;
87+
user-select: none;
88+
outline: none;
89+
border: 2px solid var(--background-third-color);
90+
background-color: var(--background-second-color);
91+
color: var(--text-color);
92+
}
93+
94+
.form-control:focus {
95+
border-color: var(--primary);
96+
}
97+
98+
form {
99+
max-width: 330px;
100+
padding: 15px;
101+
margin: 0 auto;
102+
}
103+
104+
form p {
105+
padding: 0;
106+
}
107+
108+
label {
109+
width: 1px;
110+
height: 1px;
111+
position: absolute;
112+
overflow: hidden;
113+
}
114+
115+
.btn {
116+
width: 100%;
117+
padding: .5rem 1rem;
118+
font-size: 1.25rem;
119+
line-height: 1.5;
120+
border-radius: .3rem;
121+
color: #fff;
122+
border-style: solid;
123+
background-color: var(--primary);
124+
border-color: var(--primary-hover);
125+
cursor: pointer;
126+
transition: background-color var(--transition-duration) ease, color var(--transition-duration) ease;
127+
}
128+
129+
button:hover {
130+
background-color: var(--primary-hover);
131+
}
132+
133+
.alert {
134+
padding: .75rem 1.25rem;
135+
margin-bottom: 1rem;
136+
border: 1px solid transparent;
137+
border-radius: .25rem
138+
}
139+
140+
.alert-danger {
141+
color: var(--alert-danger-text);
142+
background-color: var(--alert-danger);
143+
border-color: var(--alert-danger-border);
144+
}
145+
146+
.alert-success {
147+
color: var(--alert-success-text);
148+
background-color: var(--alert-success);
149+
border-color: var(--alert-success-border);
150+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Please sign in</title>
6+
<link rel="icon" href="lavalink.svg" type="image/svg+xml">
7+
<meta name="darkreader-lock">
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<form class="form-signin" method="post" th:action="@{/login}">
13+
<h2 class="form-signin-heading">Please sign in</h2>
14+
<div th:if="${param.error}" class="alert alert-danger" role="alert">Invalid username and password.</div>
15+
<div th:if="${param.logout}" class="alert alert-success" role="alert">You have been signed out</div>
16+
<p>
17+
<label for="username" class="sr-only">Username</label>
18+
<input type="text" id="username" name="username" class="form-control" placeholder="Username" required autofocus>
19+
</p>
20+
<p>
21+
<label for="password" class="sr-only">Password</label>
22+
<input type="password" id="password" name="password" class="form-control" placeholder="Password" required>
23+
</p>
24+
<button class="btn" type="submit">Sign in</button>
25+
</form>
26+
</div>
27+
</body>
28+
</html>

0 commit comments

Comments
 (0)