<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign in - Heaerie SSO</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', 'Arial', sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.login-container {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
padding: 48px 40px 36px;
width: 100%;
max-width: 450px;
}
.logo-container {
text-align: center;
margin-bottom: 16px;
}
.logo {
font-size: 32px;
font-weight: 500;
color: #1a73e8;
letter-spacing: -0.5px;
display: inline-block;
}
.logo-text {
display: inline-block;
}
.logo-heaerie {
color: #202124;
font-weight: 400;
}
.logo-sso {
color: #1a73e8;
font-weight: 500;
}
.title {
text-align: center;
font-size: 24px;
font-weight: 400;
color: #202124;
margin-bottom: 8px;
}
.subtitle {
text-align: center;
font-size: 16px;
color: #5f6368;
margin-bottom: 24px;
}
.error-message {
background-color: #fce8e6;
border: 1px solid #f5c6cb;
border-radius: 4px;
padding: 12px 16px;
margin-bottom: 24px;
color: #d93025;
font-size: 14px;
display: none;
}
.error-message.show {
display: block;
}
.logout-message {
background-color: #e8f5e9;
border: 1px solid #c3e6cb;
border-radius: 4px;
padding: 12px 16px;
margin-bottom: 24px;
color: #1e8e3e;
font-size: 14px;
display: none;
}
.logout-message.show {
display: block;
}
.form-group {
margin-bottom: 24px;
}
.form-group label {
display: block;
font-size: 14px;
color: #202124;
margin-bottom: 8px;
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 13px 15px;
border: 1px solid #dadce0;
border-radius: 4px;
font-size: 16px;
color: #202124;
transition: border-color 0.2s, box-shadow 0.2s;
outline: none;
}
.form-group input:focus {
border-color: #1a73e8;
box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
}
.form-group input::placeholder {
color: #5f6368;
}
.form-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.remember-me {
display: flex;
align-items: center;
font-size: 14px;
color: #202124;
}
.remember-me input[type="checkbox"] {
width: 18px;
height: 18px;
margin-right: 8px;
cursor: pointer;
accent-color: #1a73e8;
}
.forgot-link {
color: #1a73e8;
text-decoration: none;
font-size: 14px;
font-weight: 500;
}
.forgot-link:hover {
text-decoration: underline;
}
.btn-container {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 32px;
}
.btn {
padding: 10px 24px;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s, box-shadow 0.2s;
outline: none;
}
.btn-secondary {
background-color: white;
color: #1a73e8;
border: 1px solid #dadce0;
}
.btn-secondary:hover {
background-color: #f8f9fa;
border-color: #d2e3fc;
}
.btn-primary {
background-color: #1a73e8;
color: white;
min-width: 80px;
}
.btn-primary:hover {
background-color: #1765cc;
box-shadow: 0 1px 2px 0 rgba(26,115,232,0.45), 0 1px 3px 1px rgba(26,115,232,0.3);
}
.btn-primary:active {
background-color: #1557b0;
}
.divider {
display: flex;
align-items: center;
margin: 24px 0;
}
.divider::before,
.divider::after {
content: "";
flex: 1;
height: 1px;
background-color: #dadce0;
}
.divider span {
padding: 0 16px;
color: #5f6368;
font-size: 14px;
}
.help-links {
text-align: center;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid #dadce0;
}
.help-links a {
color: #5f6368;
text-decoration: none;
font-size: 12px;
margin: 0 8px;
}
.help-links a:hover {
color: #202124;
text-decoration: underline;
}
.language-selector {
text-align: center;
margin-top: 16px;
}
.language-selector select {
padding: 8px 12px;
border: 1px solid #dadce0;
border-radius: 4px;
font-size: 14px;
color: #5f6368;
background-color: white;
cursor: pointer;
outline: none;
}
.language-selector select:focus {
border-color: #1a73e8;
}
@media (max-width: 480px) {
.login-container {
padding: 32px 24px 24px;
}
.btn-container {
flex-direction: column-reverse;
}
.btn {
width: 100%;
}
}
</style>
</head>
<body>
<div class="login-container">
<div class="logo-container">
<div class="logo">
<span class="logo-text">
<span class="logo-heaerie">heaerie</span>
<span class="logo-sso"> sso</span>
</span>
</div>
</div>
<h1 class="title">Sign in</h1>
<p class="subtitle">to continue to OAuth 2.1</p>
<div class="error-message" id="errorMessage" th:if="${param.error}">
Invalid username or password
</div>
<div class="logout-message" id="logoutMessage" th:if="${param.logout}">
You have been logged out
</div>
<form method="post" th:action="@{/login}" id="loginForm">
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<div class="form-group">
<label for="username">Email or username</label>
<input
type="text"
id="username"
name="username"
placeholder="Enter your email or username"
required
autofocus
autocomplete="username"
/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
id="password"
name="password"
placeholder="Enter your password"
required
autocomplete="current-password"
/>
</div>
<div class="form-actions">
<label class="remember-me">
<input type="checkbox" name="remember-me" id="remember-me"/>
<span>Remember me</span>
</label>
<a href="#" class="forgot-link">Forgot password?</a>
</div>
<div class="btn-container">
<button type="button" class="btn btn-secondary" onclick="window.location.href='/'">Cancel</button>
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>
<div class="help-links">
<a href="#">Help</a>
<a href="#">Privacy</a>
<a href="#">Terms</a>
</div>
<div class="language-selector">
<select>
<option value="en">English (United States)</option>
<option value="es">Español</option>
<option value="fr">Français</option>
<option value="de">Deutsch</option>
<option value="zh">中文</option>
</select>
</div>
</div>
<script>
// Add smooth focus effect
const inputs = document.querySelectorAll('input[type="text"], input[type="password"]');
inputs.forEach(input => {
input.addEventListener('focus', function() {
this.parentElement.style.transform = 'scale(1.01)';
});
input.addEventListener('blur', function() {
this.parentElement.style.transform = 'scale(1)';
});
});
</script>
</body>
</html>
