feat: finish bilingual session auth learning lab
This commit is contained in:
Codex
274
web/WEB-INF/views/user/login.jsp
Normal file
274
web/WEB-INF/views/user/login.jsp
Normal file
@@ -0,0 +1,274 @@
|
||||
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
||||
<%@ taglib prefix="s" uri="/struts-tags" %>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Session 登录实验 - Struts2 学习实验台</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
font-family: "Aptos", "Segoe UI", "Microsoft YaHei", sans-serif;
|
||||
background: linear-gradient(135deg, #122c63 0%, #1464c7 52%, #4db5ff 100%);
|
||||
}
|
||||
.shell {
|
||||
width: min(1120px, 100%);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 430px;
|
||||
gap: 18px;
|
||||
}
|
||||
.panel {
|
||||
background: rgba(255,255,255,0.95);
|
||||
border-radius: 28px;
|
||||
padding: 28px;
|
||||
box-shadow: 0 24px 60px rgba(0,0,0,0.22);
|
||||
}
|
||||
.top-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: #1464c7;
|
||||
font-weight: 800;
|
||||
}
|
||||
h1, h2 { margin: 10px 0 12px; }
|
||||
p { margin: 0; color: #566a80; line-height: 1.85; }
|
||||
.btn-ghost, .link-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 14px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #d7e5f7;
|
||||
background: #ffffff;
|
||||
color: #1464c7;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
.note {
|
||||
margin-top: 18px;
|
||||
padding: 16px;
|
||||
border-radius: 18px;
|
||||
background: #edf5ff;
|
||||
border: 1px solid #d7e5f7;
|
||||
}
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.stat {
|
||||
padding: 14px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #d7e5f7;
|
||||
background: #f8fbff;
|
||||
}
|
||||
.stat strong { display: block; margin-bottom: 6px; }
|
||||
.field {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 700;
|
||||
color: #1f3650;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 13px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid #d6e1ed;
|
||||
font: inherit;
|
||||
}
|
||||
button.submit-btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, #1464c7, #3d8ef6);
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
}
|
||||
.error {
|
||||
color: #c53d3d;
|
||||
font-size: 13px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.action-error {
|
||||
margin: 0 0 16px;
|
||||
padding: 14px;
|
||||
border-radius: 14px;
|
||||
background: #fff1f1;
|
||||
color: #b63a3a;
|
||||
border: 1px solid #f1c4c4;
|
||||
}
|
||||
.links {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 18px;
|
||||
}
|
||||
@media (max-width: 860px) {
|
||||
.shell { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="shell">
|
||||
<section class="panel">
|
||||
<div class="top-actions">
|
||||
<div class="eyebrow" id="leftEyebrow">Session 登录章节</div>
|
||||
<button class="btn-ghost" type="button" id="languageBtn">EN</button>
|
||||
</div>
|
||||
<h1 id="leftTitle">用最经典的 Struts2 Session 登录，把后续实验页保护起来</h1>
|
||||
<p id="leftText">这个页面不只是演示登录表单，而是把 Action 校验、写入 Session、拦截器校验和登录后仪表盘串成一个完整章节，适合你系统掌握老项目最常见的鉴权思路。</p>
|
||||
|
||||
<div class="note">
|
||||
<strong id="credentialTitle">演示账号</strong>
|
||||
<p id="credentialBody" style="margin-top: 8px;">用户名：<code>admin</code><br/>密码：<code>123456</code></p>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<strong id="statOneTitle">这一页讲什么</strong>
|
||||
<span id="statOneText">Action 校验、错误回显、Session 写入、登录后跳转。</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<strong id="statTwoTitle">下一步看什么</strong>
|
||||
<span id="statTwoText">登录成功后先看仪表盘，再进入用户表单、校验页和上传页。</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="links">
|
||||
<a class="link-btn" href="../index.action" id="backPortalLink">返回门户</a>
|
||||
<s:if test="#session.demoUser != null">
|
||||
<a class="link-btn" href="../dashboard.action" id="dashboardLink">进入仪表盘</a>
|
||||
<a class="link-btn" href="../logout.action" id="logoutLink">退出登录</a>
|
||||
</s:if>
|
||||
<s:else>
|
||||
<a class="link-btn" href="../hello.action?name=Team" id="helloLink">运行 Hello Action</a>
|
||||
</s:else>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<div class="eyebrow" id="formEyebrow">登录表单</div>
|
||||
<h2 id="formTitle">输入演示账号</h2>
|
||||
|
||||
<s:if test="#session.demoUser != null">
|
||||
<div class="note">
|
||||
<strong id="loggedInTitle">当前已登录</strong>
|
||||
<p id="loggedInText" style="margin-top: 8px;">你已经拥有可访问的 Session，可以直接进入仪表盘或退出后重新体验登录过程。</p>
|
||||
</div>
|
||||
<div class="links">
|
||||
<a class="link-btn" href="../dashboard.action" id="loggedInDashboardLink">打开仪表盘</a>
|
||||
<a class="link-btn" href="../logout.action" id="loggedInLogoutLink">退出后重试</a>
|
||||
</div>
|
||||
</s:if>
|
||||
<s:else>
|
||||
<s:if test="hasActionErrors()">
|
||||
<div class="action-error"><s:actionerror/></div>
|
||||
</s:if>
|
||||
|
||||
<s:form action="login" method="post" namespace="/">
|
||||
<div class="field">
|
||||
<label for="username" id="usernameLabel">用户名</label>
|
||||
<s:textfield id="username" name="username" placeholder="admin"/>
|
||||
<div class="error"><s:fielderror fieldName="username"/></div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="password" id="passwordLabel">密码</label>
|
||||
<s:password id="password" name="password" placeholder="123456" showPassword="true"/>
|
||||
<div class="error"><s:fielderror fieldName="password"/></div>
|
||||
</div>
|
||||
|
||||
<button class="submit-btn" type="submit" id="submitBtn">写入 Session 并进入仪表盘</button>
|
||||
</s:form>
|
||||
</s:else>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="../assets/struts-lab.js"></script>
|
||||
<script>
|
||||
strutsLab.mount({
|
||||
messages: {
|
||||
zh: {
|
||||
pageTitle: "Session 登录实验 - Struts2 学习实验台",
|
||||
text: {
|
||||
leftEyebrow: "Session 登录章节",
|
||||
leftTitle: "用最经典的 Struts2 Session 登录，把后续实验页保护起来",
|
||||
leftText: "这个页面不只是演示登录表单，而是把 Action 校验、写入 Session、拦截器校验和登录后仪表盘串成一个完整章节，适合你系统掌握老项目最常见的鉴权思路。",
|
||||
credentialTitle: "演示账号",
|
||||
statOneTitle: "这一页讲什么",
|
||||
statOneText: "Action 校验、错误回显、Session 写入、登录后跳转。",
|
||||
statTwoTitle: "下一步看什么",
|
||||
statTwoText: "登录成功后先看仪表盘，再进入用户表单、校验页和上传页。",
|
||||
backPortalLink: "返回门户",
|
||||
dashboardLink: "进入仪表盘",
|
||||
logoutLink: "退出登录",
|
||||
formEyebrow: "登录表单",
|
||||
formTitle: "输入演示账号",
|
||||
loggedInTitle: "当前已登录",
|
||||
loggedInText: "你已经拥有可访问的 Session，可以直接进入仪表盘或退出后重新体验登录过程。",
|
||||
loggedInDashboardLink: "打开仪表盘",
|
||||
loggedInLogoutLink: "退出后重试",
|
||||
helloLink: "运行 Hello Action",
|
||||
usernameLabel: "用户名",
|
||||
passwordLabel: "密码",
|
||||
submitBtn: "写入 Session 并进入仪表盘"
|
||||
},
|
||||
html: {
|
||||
credentialBody: "用户名：<code>admin</code><br/>密码：<code>123456</code>"
|
||||
}
|
||||
},
|
||||
en: {
|
||||
pageTitle: "Session Login Lab - Struts2 Learning Lab",
|
||||
text: {
|
||||
leftEyebrow: "Session login chapter",
|
||||
leftTitle: "Use the classic Struts2 session login pattern to protect later lab pages",
|
||||
leftText: "This page is not just a login form. It connects action validation, session writes, interceptor checks, and a post-login dashboard into one complete learning chapter.",
|
||||
credentialTitle: "Demo credentials",
|
||||
statOneTitle: "What this page teaches",
|
||||
statOneText: "Action validation, error echoing, session writes, and post-login routing.",
|
||||
statTwoTitle: "What to open next",
|
||||
statTwoText: "After login, open the dashboard first, then continue to the user form, validation page, and upload page.",
|
||||
backPortalLink: "Back to portal",
|
||||
dashboardLink: "Open dashboard",
|
||||
logoutLink: "Log out",
|
||||
formEyebrow: "Login form",
|
||||
formTitle: "Enter the demo account",
|
||||
loggedInTitle: "Already logged in",
|
||||
loggedInText: "A valid session already exists. You can open the dashboard directly or log out and replay the login flow.",
|
||||
loggedInDashboardLink: "Open dashboard",
|
||||
loggedInLogoutLink: "Log out and retry",
|
||||
helloLink: "Run hello action",
|
||||
usernameLabel: "Username",
|
||||
passwordLabel: "Password",
|
||||
submitBtn: "Write session and enter dashboard"
|
||||
},
|
||||
html: {
|
||||
credentialBody: "Username: <code>admin</code><br/>Password: <code>123456</code>"
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user