main dashboard main dashboardmain dashboardmain dashboardmain dashboardmain dashboardmain dashboard
main dashboard main dashboardmain dashboardmain dashboardmain dashboardmain dashboardmain dashboard
main dashboard main dashboardmain dashboardmain dashboardmain dashboardmain dashboardmain dashboard main dashboard main dashboardmain dashboardmain dashboardmain dashboardmain dashboardmain dashboard
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Login Page</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnH/4f0w7lCgE47l+8L8yby6BjFxl1b6fiQkTcAKcQOCVt+GLzZZkRQW9sxg2HjXAfnV3swBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Poppins:wght@500;700&family=Roboto+Mono:wght@400;500&display=swap');
body {
margin: 0;
font-family: 'Inter', sans-serif;
display: flex;
justify-content: center;
align-items: center;
background: #80510a;
color: #ffffff;
height: 100vh;
overflow: hidden;
background-image:url('https://images.pexels.com/photos/29612112/pexels-photo-29612112/free-photo-of-vibrant-abstract-digital-art-in-gradient-colors.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1') ;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
}
#api-info h3 {
font-family: 'Poppins', sans-serif;
font-size: 1.5rem;
color: whitesmoke;
text-align: center;
margin-bottom: 20px;
}
#automation-quote h2 {
font-family: 'Roboto Mono', monospace;
font-size: 1rem;
font-weight: 500;
color: #2D3436; /* Dark gray for readability */
text-align: center;
line-height: 1.6;
}
#automation-quote p {
font-family: 'Inter', sans-serif;
font-size: 1rem;
font-weight: 400;
color: #636e72; /* Lighter gray for the author text */
text-align: center;
margin-top: 10px;
}
.container {
display: flex;
flex-direction: row;
max-width: 1200px;
height: 80%;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
/* Left Section */
.left {
flex: 1;
background: linear-gradient(135deg, #dba33a, #c89615);
padding: 40px;
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.left h1 {
font-size: 2rem;
margin-bottom: 20px;
font-weight: 600;
}
.left p {
font-size: 1rem;
margin-bottom: 30px;
}
.left button {
background-color: transparent;
border: 2px solid #ffffff;
border-radius: 8px;
padding: 10px 20px;
color: #ffffff;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.left button:hover {
background-color: #ffffff;
color: #dba33a;
}
/* Right Section */
.right {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.right h2 {
font-size: 1.8rem;
margin-bottom: 20px;
color: #dba33a;
font-weight: bolder;
}
.form-group {
margin-bottom: 20px;
font-family: cursive;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: black;
font-weight: bolder;
}
.form-group input {
width: 95%;
padding: 12px;
border: 1px solid #d9d9d9;
border-radius: 8px;
font-size: 1rem;
color: #090909;
}
.form-group input:focus {
outline: none;
border-color: #dba33a;
box-shadow: 0 0 5px rgba(110, 58, 219, 0.5);
}
.checkbox-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.checkbox-container label {
display: flex;
align-items: center;
font-size: 0.9rem;
color: #4B0A80;
}
.checkbox-container input[type="checkbox"] {
margin-right: 8px;
}
.submit{
width: 100%;
padding: 12px;
background-color: #dba33a;
border: none;
border-radius: 8px;
color: #ffffff;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
button.login-btn:hover {
background-color: #dba33a;
}
.footer {
text-align: center;
margin-top: 20px;
font-size: 0.9rem;
color:black;
}
.footer a {
color: #dba33a;
text-decoration: none;
font-weight: 600;
}
.footer a:hover {
text-decoration: underline;
}
.content ul {
list-style-type: none; /* Remove default bullets */
padding: 0;
margin: 0;
}
.content li {
font-size: 18px;
line-height: 1.8;
color: #070707; /* Lighter footer text */
margin: 20px 0; /* Increased space between items */
padding-left: 30px; /* Indent for cleaner look */
position: relative;
font-family: cursive;
font-weight: bolder;
transition: color 0.3s ease;
}
/* Add custom bullet with a circle or any symbol you like */
.content li::before {
content: '\2022'; /* Unicode for bullet */
color: #090909; /* Green color for bullet */
font-size: 28px; /* Larger bullet */
position: absolute;
left: 0; /* Positioning bullet to the left */
top: 50%; /* Center bullet vertically */
transform: translateY(-50%);
}
.content li:hover {
color: #f2f5f2; /* Change text color on hover */
}
.footer {
font-size: 0.9rem;
color: #636e72;
text-align: center;
margin-top: 20px;
border-top: 1px solid #ddd;
padding-top: 10px;
}
.footer a {
color: #007BFF; /* Add a link color if needed */
text-decoration: none; /* Remove underlining from links */
}
.footer a:hover {
text-decoration: underline; /* Underline on hover for better interaction */
}
.eye-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: black;
}
img{
border-radius: 20px;
width: 350px;
margin: 12%;
margin-bottom: 0%;
margin-top: 0%;
}
</style>
</head>
<body>
<div class="container">
<!-- Left Section -->
<div class="left">
<img src="https://t4.ftcdn.net/jpg/03/96/98/33/360_F_396983381_AcuGFHQbNn7D9eercXFpOecN7d7B5F66.jpg" alt="Logo" class="logo">
<div class="content">
<ul>
<li>Simplify operations and enhance efficiency with centralized access.</li>
<li>Monitor and optimize performance seamlessly in real time.</li>
<li>Automate workflows to save time and reduce manual effort.</li>
<li>Deliver innovative solutions to complex challenges effortlessly.</li>
</ul>
</div>
</div>
<!-- Right Section -->
<div class="right">
<h2 style="font-weight: bolder;">DSS Infrastructure Tool</h2>
<form method="post" action="/dssmonitoring/login">
<!-- Username field with icon -->
<div class="form-group">
<label for="username">Username</label>
<div style="position: relative;">
<i class="fas fa-user" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: black; margin-right: 10px;"></i>
<input type="text" id="username" name="username" placeholder="Enter your username" style="padding-left: 30px;">
</div>
</div>
<!-- Password field with icon and toggle visibility -->
<div class="form-group">
<label for="password">Password</label>
<div style="position: relative;">
<i class="fas fa-lock" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: black; margin-right: 10px;"></i>
<input type="password" name="password" id="password" placeholder="Enter your password" style="padding-left: 30px;">
<i class="fas fa-eye eye-icon" id="toggle-password" onclick="togglePasswordVisibility()" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%);"></i>
</div>
</div>
<div class="input-field">
<input type="submit" class="submit" value="Login">
</div>
</form>
<p class="footer">For the best view , set your browser zoom to 90%.</p>
</div>
</div>
<script>
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
window.onload = function () {
if ("${errorMsg}" != "") {
Command: toastr["error"]("${errorMsg}")
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "5000",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
}
// Disable browser back and forward buttons
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
}
function togglePasswordVisibility() {
const passwordField = document.getElementById('password');
const eyeIcon = document.getElementById('toggle-password');
if (passwordField.type === 'password') {
passwordField.type = 'text'; // Show password
eyeIcon.classList.remove('fa-eye'); // Change to 'eye-slash' icon
eyeIcon.classList.add('fa-eye-slash');
} else {
passwordField.type = 'password'; // Hide password
eyeIcon.classList.remove('fa-eye-slash'); // Change back to 'eye' icon
eyeIcon.classList.add('fa-eye');
}
}
</script>
</body>
</html>
in class: public class MySecurityConfig extends WebSecurityConfigurerAdapter the WebSecurityConfigurerAdapter is deprecated, instead you can create class like this:
@Configuration
@EnableWebSecurity
public class WebSecurityConfig {
@Bean
BCryptPasswordEncoder bCryptPasswordEncoder() {
return new BCryptPasswordEncoder();
}
@Bean
SecurityFilterChain filterChain(HttpSecurity http)throws Exception{
http.authorizeHttpRequests(authz -> authz
.requestMatchers(HttpMethod.GET,"/testAPI").permitAll()
.requestMatchers("").permitAll()
.anyRequest().authenticated())
.httpBasic(Customizer.withDefaults());
return http.build();
}
@Bean
UserDetailsService userDetailsService() {
InMemoryUserDetailsManager userDetailsService = new
InMemoryUserDetailsManager();
UserDetails userDetails = User
.withUsername("vinod")
.password(bCryptPasswordEncoder().encode("singh"))
.authorities("read").build();
userDetailsService.createUser(userDetails);
return userDetailsService;
}
}