试验 React 内联上下文与原生表单登录流程
This commit is contained in:
@@ -0,0 +1,159 @@
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { useState, useLayoutEffect, type ReactNode } from "react";
|
||||
import "./style.css";
|
||||
|
||||
type PageContext = {
|
||||
step: "identity" | "verification" | "complete";
|
||||
name: string;
|
||||
error: string;
|
||||
action: string;
|
||||
csrf: { name: string; value: string };
|
||||
};
|
||||
|
||||
const context: PageContext = JSON.parse(
|
||||
document.getElementById("login-context")!.textContent!,
|
||||
);
|
||||
|
||||
function Form({ children }: { children: ReactNode }) {
|
||||
const [pending, setPending] = useState(false);
|
||||
return (
|
||||
<form
|
||||
method="post"
|
||||
action={context.action}
|
||||
onSubmit={() => setPending(true)}
|
||||
aria-busy={pending}
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
name={context.csrf.name}
|
||||
value={context.csrf.value}
|
||||
/>
|
||||
{children}
|
||||
<button className="primary" type="submit" disabled={pending}>
|
||||
{pending
|
||||
? "正在继续…"
|
||||
: context.step === "complete"
|
||||
? "重新体验"
|
||||
: "继续"}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
useLayoutEffect(() => { performance.mark("iam-page-ready"); }, []);
|
||||
const [showHelp, setShowHelp] = useState(false);
|
||||
return (
|
||||
<main>
|
||||
<header>
|
||||
<a href="/preview" className="brand" aria-label="IAM 登录体验预览">
|
||||
i<span>am</span>
|
||||
<span className="badge">预览</span>
|
||||
</a>
|
||||
</header>
|
||||
<section className="card" aria-labelledby="title">
|
||||
<div className="eyebrow">登录交互原型</div>
|
||||
<ol className="steps" aria-label="当前步骤">
|
||||
{(["identity", "verification", "complete"] as const).map(
|
||||
(step, i) => (
|
||||
<li
|
||||
key={step}
|
||||
aria-current={context.step === step ? "step" : undefined}
|
||||
>
|
||||
<span>{i + 1}</span>
|
||||
{["填写称呼", "模拟验证", "完成"][i]}
|
||||
</li>
|
||||
),
|
||||
)}
|
||||
</ol>
|
||||
{context.step === "identity" && (
|
||||
<>
|
||||
<h1 id="title">从这里开始</h1>
|
||||
<p className="intro">
|
||||
体验一次完整的页面切换。先告诉我们怎么称呼你。
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
{context.step === "verification" && (
|
||||
<>
|
||||
<h1 id="title">你好，{context.name}</h1>
|
||||
<p className="intro">
|
||||
这是第二步页面。输入演示码 <strong>123456</strong>{" "}
|
||||
继续，也可以试试输入错误的演示码。
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
{context.step === "complete" && (
|
||||
<>
|
||||
<div className="success" aria-hidden="true">
|
||||
✓
|
||||
</div>
|
||||
<h1 id="title">体验完成</h1>
|
||||
<p className="intro">
|
||||
{context.name}
|
||||
，你已走完页面预览。这没有建立登录身份，也没有向任何应用授权。
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
{context.error && (
|
||||
<p className="error" role="alert">
|
||||
{context.error}
|
||||
</p>
|
||||
)}
|
||||
<Form>
|
||||
{context.step === "identity" && (
|
||||
<label>
|
||||
称呼
|
||||
<input
|
||||
name="name"
|
||||
autoComplete="off"
|
||||
autoFocus
|
||||
required
|
||||
maxLength={64}
|
||||
placeholder="例如：小潘"
|
||||
defaultValue={context.name}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
{context.step === "verification" && (
|
||||
<label>
|
||||
演示码
|
||||
<input
|
||||
name="code"
|
||||
inputMode="numeric"
|
||||
autoComplete="off"
|
||||
autoFocus
|
||||
required
|
||||
maxLength={6}
|
||||
pattern="[0-9]{6}"
|
||||
placeholder="123456"
|
||||
aria-invalid={Boolean(context.error)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
</Form>
|
||||
{context.step === "verification" && (
|
||||
<a className="back" href="/preview">
|
||||
返回上一步
|
||||
</a>
|
||||
)}
|
||||
<div className="help">
|
||||
<button
|
||||
type="button"
|
||||
className="link"
|
||||
aria-expanded={showHelp}
|
||||
onClick={() => setShowHelp(!showHelp)}
|
||||
>
|
||||
这是真实登录吗？
|
||||
</button>
|
||||
{showHelp && (
|
||||
<p>不是。这里仅演示页面交互，请勿输入真实密码或 MFA 验证码。</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
<footer>独立 IAM · 页面体验预览</footer>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
createRoot(document.getElementById("root")!).render(<App />);
|
||||
@@ -0,0 +1,240 @@
|
||||
:root {
|
||||
font-family: Inter, "Noto Sans SC", system-ui, sans-serif;
|
||||
color: #182826;
|
||||
background: #f3f5f1;
|
||||
font-synthesis: none;
|
||||
font-size: 16px;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
main {
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px 28px;
|
||||
}
|
||||
header {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.brand {
|
||||
font-size: 32px;
|
||||
font-weight: 750;
|
||||
letter-spacing: -2px;
|
||||
color: #285448;
|
||||
text-decoration: none;
|
||||
}
|
||||
.brand > span:first-child {
|
||||
font-weight: 400;
|
||||
}
|
||||
.badge {
|
||||
font-size: 11px;
|
||||
letter-spacing: 1px;
|
||||
vertical-align: middle;
|
||||
margin-left: 14px;
|
||||
padding: 5px 8px;
|
||||
border: 1px solid #b7c9be;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid #dce4dd;
|
||||
border-radius: 18px;
|
||||
padding: 36px;
|
||||
box-shadow: 0 12px 40px #173f2510;
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 12px;
|
||||
color: #60746a;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.steps {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
margin: 25px 0 32px;
|
||||
gap: 8px;
|
||||
}
|
||||
.steps li {
|
||||
font-size: 12px;
|
||||
color: #718078;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
.steps li span {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
border: 1px solid #ccd7ce;
|
||||
border-radius: 50%;
|
||||
font-size: 11px;
|
||||
}
|
||||
.steps [aria-current] {
|
||||
color: #215542;
|
||||
font-weight: 650;
|
||||
}
|
||||
.steps [aria-current] span {
|
||||
background: #215542;
|
||||
color: white;
|
||||
border-color: #215542;
|
||||
}
|
||||
h1 {
|
||||
font-size: 27px;
|
||||
letter-spacing: -0.5px;
|
||||
line-height: 1.35;
|
||||
margin: 0 0 12px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.intro {
|
||||
font-size: 14px;
|
||||
color: #60716a;
|
||||
line-height: 1.8;
|
||||
margin: 0 0 25px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
input:not([type="hidden"]) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 1px solid #bdccc1;
|
||||
border-radius: 8px;
|
||||
padding: 13px 14px;
|
||||
margin: 9px 0 22px;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
background: #fff;
|
||||
}
|
||||
input:focus {
|
||||
outline: 3px solid #a9cbbc;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
button {
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.primary {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: #245b47;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
padding: 13px;
|
||||
}
|
||||
.primary:hover {
|
||||
background: #194734;
|
||||
}
|
||||
.primary:disabled {
|
||||
opacity: 0.65;
|
||||
cursor: wait;
|
||||
}
|
||||
.error {
|
||||
color: #9e302b;
|
||||
background: #fff0ed;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.back {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
margin-top: 18px;
|
||||
color: #476a58;
|
||||
}
|
||||
.help {
|
||||
border-top: 1px solid #e5ebe6;
|
||||
margin-top: 28px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.link {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: #5b7064;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
.help p {
|
||||
font-size: 13px;
|
||||
line-height: 1.8;
|
||||
color: #6a756e;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
footer {
|
||||
text-align: center;
|
||||
color: #7c887e;
|
||||
font-size: 12px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.success {
|
||||
color: #245b47;
|
||||
font-size: 30px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
a:focus-visible,
|
||||
button:focus-visible {
|
||||
outline: 3px solid #a9cbbc;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
main {
|
||||
padding-top: 24px;
|
||||
}
|
||||
header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.card {
|
||||
padding: 26px 22px;
|
||||
}
|
||||
.steps {
|
||||
gap: 5px;
|
||||
}
|
||||
.steps li {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
background: #14221c;
|
||||
color: #edf4ee;
|
||||
}
|
||||
.card {
|
||||
background: #1e3027;
|
||||
border-color: #344b3d;
|
||||
}
|
||||
.brand,
|
||||
.steps [aria-current],
|
||||
.success {
|
||||
color: #b9ddc8;
|
||||
}
|
||||
.intro,
|
||||
.eyebrow,
|
||||
.help p,
|
||||
.link,
|
||||
.back {
|
||||
color: #acbfb2;
|
||||
}
|
||||
.steps li {
|
||||
color: #98aa9e;
|
||||
}
|
||||
input:not([type="hidden"]) {
|
||||
background: #18271f;
|
||||
border-color: #526657;
|
||||
}
|
||||
.help {
|
||||
border-color: #3a4d40;
|
||||
}
|
||||
.error {
|
||||
background: #492b29;
|
||||
color: #ffc3b9;
|
||||
}
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
Reference in New Issue
Block a user