init

src/main/resources/static/assets/css/consent.css

@@ -0,0 +1,138 @@
+/* Global Styles */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f8f9fa;
+    margin: 0;
+    padding: 0;
+    color: #343a40;
+}
+
+/* Header Section */
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #343a40;
+    color: white;
+    padding: 1rem;
+    height: 80px;
+}
+
+.header__links {
+    display: flex;
+    gap: 1rem;
+}
+
+.header__link {
+    color: white;
+    text-decoration: none;
+}
+
+.header__link:hover {
+    text-decoration: underline;
+}
+
+/* Main Container */
+.main-container {
+    max-width: 600px;
+    margin: 2rem auto;
+    padding: 2rem;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* App Info Section */
+.app-info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1.5rem;
+}
+
+.app-info__icon {
+    width: 50px;
+    height: 50px;
+    border-radius: 8px;
+    margin-right: 1rem;
+}
+
+.app-info__name {
+    font-size: 1.25rem;
+    font-weight: bold;
+}
+
+.app-info__description {
+    margin-top: 0.5rem;
+    font-size: 0.875rem;
+    color: #6c757d;
+}
+
+/* Permissions List */
+.permissions-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.permissions-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.75rem;
+}
+
+.permissions-item__checkbox {
+    margin-right: 0.5rem;
+}
+
+/* Buttons Section */
+.buttons {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.button {
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1rem;
+}
+
+.button--primary {
+    background-color: #dc3545;
+    color: white;
+}
+
+.button--secondary {
+    background-color: #f8f9fa;
+    color: #343a40;
+    border: 1px solid #ced4da;
+}
+
+/* Footer Section */
+.footer {
+    text-align: center;
+    margin-top: 2rem;
+    padding: 1rem;
+    background-color: #f8f9fa;
+    color: #6c757d;
+    font-size: 0.875rem;
+}
+
+.footer__links {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.footer__link a {
+    color: #6c757d;
+    text-decoration: none;
+}
+
+.footer__link a:hover {
+    text-decoration: underline;
+}

src/main/resources/static/assets/css/login.css

@@ -0,0 +1,77 @@
+/* 页面整体布局 */
+body {
+    margin: 0;
+    height: 100vh; /* 设置页面高度为视口高度 */
+    display: flex; /* 使用 Flexbox 布局 */
+    align-items: center; /* 垂直居中 */
+    justify-content: flex-end; /* 水平靠右 */
+    background-color: #f0f2f5; /* 背景颜色 */
+}
+
+/* 登录框样式 */
+.form-signin {
+    max-width: 400px;
+    padding: 15px;
+    background-color: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    margin-right: 20px; /* 右侧留出一定间距 */
+}
+
+.form-signin h1 {
+    text-align: center;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.form-floating > input {
+    border-radius: 5px;
+    font-size: 14px;
+}
+
+.form-floating > label {
+    font-size: 14px;
+}
+
+/* 验证码图片样式 */
+#captchaImage {
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+#captchaImage:hover {
+    transform: scale(1.05);
+}
+
+/* 错误提示样式 */
+.alert {
+    margin-top: 10px;
+    font-size: 14px;
+}
+
+/* 登录按钮样式 */
+.btn-primary {
+    background-color: #007bff;
+    border-color: #007bff;
+    font-size: 16px;
+    padding: 10px;
+}
+
+.btn-primary:hover {
+    background-color: #0056b3;
+    border-color: #0056b3;
+}
+
+/* 响应式设计 - 小屏幕适配 */
+@media (max-width: 768px) {
+    body {
+        justify-content: center; /* 在小屏幕上水平居中 */
+    }
+
+    .form-signin {
+        margin-right: 0; /* 移除右侧间距 */
+        margin-left: 0; /* 确保左右对称 */
+        max-width: 100%; /* 宽度占满容器 */
+        width: 90%; /* 设置宽度为父容器的 90% */
+    }
+}

src/main/resources/static/assets/css/signin.css

@@ -0,0 +1,32 @@
+html,
+body {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  align-items: start;
+  padding-top: 100px;
+  background-color: #f5f5f5;
+}
+
+.form-signin {
+  max-width: 330px;
+  padding: 15px;
+}
+
+.form-signin .form-floating:focus-within {
+  z-index: 2;
+}
+
+.form-signin input[type="username"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-signin input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}

src/main/resources/templates/device-activate.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>统一身份认证服务平台</title>
+    <link rel="stylesheet" href="/assets/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+</head>
+<body>
+<div class="container">
+    <div class="row py-5">
+        <div class="col-md-5">
+            <h2>Device Activation</h2>
+            <p>Enter the activation code to authorize the device.</p>
+            <div class="mt-5">
+                <form th:action="@{/oauth2/device_verification}" method="post">
+                    <div class="mb-3">
+                        <label for="user_code" class="form-label">Activation Code</label>
+                        <input type="text" id="user_code" name="user_code" class="form-control" required autofocus>
+                    </div>
+                    <div class="mb-3">
+                        <button type="submit" class="btn btn-primary">Submit</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <div class="col-md-7">
+            <img src="/assets/img/devices.png" th:src="@{/assets/img/devices.png}" class="img-responsive" alt="Devices">
+        </div>
+    </div>
+</div>
+</body>
+</html>

src/main/resources/templates/device-activated.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>统一身份认证服务平台</title>
+    <link rel="stylesheet" href="/assets/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+</head>
+<body>
+<div class="container">
+    <div class="row py-5">
+        <div class="col-md-5">
+            <h2 class="text-success">Success!</h2>
+            <p>
+                You have successfully activated your device.<br/>
+                Please return to your device to continue.
+            </p>
+        </div>
+        <div class="col-md-7">
+            <img src="/assets/img/devices.png" th:src="@{/assets/img/devices.png}" class="img-responsive" alt="Devices">
+        </div>
+    </div>
+</div>
+</body>
+</html>

src/main/resources/templates/error.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>统一身份认证服务平台</title>
+    <link rel="stylesheet" href="/assets/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+</head>
+<body>
+<div class="container">
+    <div class="row py-5">
+        <div class="col-md-6">
+            <h2 class="text-danger" th:text="${errorTitle}"></h2>
+            <p th:text="${errorMessage}"></p>
+        </div>
+    </div>
+</div>
+</body>
+</html>

src/main/resources/templates/verification-email.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>验证码邮件</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f6fa;
+            color: #333;
+        }
+        .email-container {
+            max-width: 600px;
+            margin: 20px auto;
+            padding: 30px;
+            background-color: #ffffff;
+            border-radius: 12px;
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+            border: 1px solid #e5e7eb;
+        }
+
+        .header {
+            text-align: center;
+            /*margin-bottom: 20px;*/
+        }
+
+        .header img {
+            /*width: 120px;*/
+            height: auto;
+            margin-bottom: 10px;
+        }
+
+        .header h1 {
+            font-size: 24px;
+            color: #1f2937;
+            margin: 0;
+        }
+
+        .header p {
+            font-size: 14px;
+            color: #6b7280;
+            margin: 0;
+        }
+        p {
+            font-size: 16px;
+            line-height: 1.6;
+            margin-bottom: 15px;
+            color: #4b5563;
+        }
+        .code-box {
+            background-color: #e0f2fe;
+            color: #0c4a6e;
+            font-size: 28px;
+            font-weight: bold;
+            text-align: center;
+            padding: 20px;
+            border-radius: 8px;
+            margin: 20px 0;
+            border: 2px solid #bae6fd;
+        }
+        .note {
+            font-size: 14px;
+            color: #6b7280;
+        }
+        .p-note {
+            font-size: 12px;
+            color: #6b7280;
+            margin: 20px 0;
+            text-align: right;
+        }
+        .footer {
+            margin-top: 20px;
+            font-size: 12px;
+            color: #9ca3af;
+            text-align: center;
+        }
+        a {
+            color: #0ea5e9;
+            text-decoration: none;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+
+        .highlight {
+            color: #0ea5e9;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+<div class="email-container">
+    <div class="header">
+        <h2>企业级 统一身份认证服务平台</h2>
+        <p>为您提供安全、便捷的身份验证服务</p>
+    </div>
+    <p>尊敬的用户，您好！</p>
+    <p>您正在登录 <span class="highlight">企业级 统一身份认证服务平台</span> 的服务，请使用以下验证码完成验证：</p>
+    <div class="code-box">[[${code}]]</div>
+    <p class="note">请注意：验证码有效期为 <strong>5 分钟</strong>。请尽快完成验证。</p>
+    <p>如果不是您本人操作，请忽略此邮件或联系我们的客服团队。</p>
+    <p class="p-note">构建于信任之上，确保数据安全与隐私。</p>
+    <div class="footer">
+        如果有任何疑问，请联系客服：<a href="mailto:arrokoth_info@163.com">arrokoth_info@163.com</a>
+    </div>
+</div>
+</body>
+</html>