feat: complete SSR CRM and refine auth UI
This commit is contained in:
@@ -25,17 +25,17 @@ component SignIn {
|
||||
class = ""
|
||||
}
|
||||
view {
|
||||
<section {...attrs} data-wrnexus-runtime="auth" data-auth-sign-in data-mfa-href='{mfaHref}' class='w-full max-w-md rounded-[var(--wrn-radius-lg)] border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-6 text-[var(--wrn-color-text)] shadow-[var(--wrn-shadow-2)] {class}'>
|
||||
<header class="mb-6 space-y-1.5">
|
||||
<section {...attrs} data-wrnexus-runtime="auth" data-auth-sign-in data-mfa-href='{mfaHref}' class='wrn-auth-sign-in w-full max-w-md rounded-[var(--wrn-radius-lg)] border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-6 text-[var(--wrn-color-text)] shadow-[var(--wrn-shadow-2)] {class}'>
|
||||
<header class="wrn-auth-sign-in__header mb-6 space-y-1.5">
|
||||
<h1 class="m-0 text-2xl font-semibold tracking-tight">{title}</h1>
|
||||
<p class="m-0 text-sm text-[var(--wrn-color-muted)]">{description}</p>
|
||||
</header>
|
||||
<form method="post" action='{action}' data-schema='{schema}' data-redirect='{redirect}' novalidate class="space-y-4">
|
||||
<form method="post" action='{action}' data-schema='{schema}' data-redirect='{redirect}' novalidate class="wrn-auth-sign-in__form">
|
||||
<input type="hidden" name="returnTo" value='{returnTo}' />
|
||||
<input type="hidden" name="deviceFingerprint" value="" />
|
||||
<input type="hidden" name="deviceName" value="" />
|
||||
<Input id="auth-sign-in-identifier" name="identifier" type="text" label="{identifierLabel}" autocomplete="username webauthn" placeholder="{identifierPlaceholder}" icon="icon-[lucide--at-sign]" color="{color}" size="{size}" />
|
||||
<div class="space-y-1.5">
|
||||
<div>
|
||||
<TogglePassword
|
||||
label="{passwordLabel}"
|
||||
cornerHint="Forgot password?"
|
||||
@@ -48,9 +48,7 @@ component SignIn {
|
||||
size="{size}"
|
||||
/>
|
||||
</div>
|
||||
{#if showRemember}
|
||||
<Checkbox id="auth-sign-in-remember" name="rememberDevice" label="Trust this device" color="{color}" size="{size}" />
|
||||
{/if}
|
||||
{#if showRemember}<div class="wrn-auth-sign-in__remember"><Checkbox id="auth-sign-in-remember" name="rememberDevice" label="Trust this device" color="{color}" size="{size}" /></div>{/if}
|
||||
<slot></slot>
|
||||
<p data-error="_form" role="alert" class="m-0 hidden rounded-[var(--wrn-radius-sm)] bg-[color-mix(in_srgb,var(--wrn-color-danger)_10%,transparent)] p-3 text-sm text-[var(--wrn-color-danger)]"></p>
|
||||
<Button type="submit" label="{submitLabel}" variant="solid" color="{color}" size="{size}" fullWidth="true" />
|
||||
@@ -64,4 +62,18 @@ component SignIn {
|
||||
{/if}
|
||||
</section>
|
||||
}
|
||||
|
||||
style {
|
||||
.wrn-auth-sign-in__header { margin-bottom: 1.5rem; }
|
||||
.wrn-auth-sign-in__header h1 { font-size: 1.75rem; line-height: 1.15; }
|
||||
.wrn-auth-sign-in__header p { margin-top: 0.35rem; font-size: 0.9375rem; line-height: 1.5; }
|
||||
.wrn-auth-sign-in__form { display: grid; gap: 1.15rem; }
|
||||
.wrn-auth-sign-in__form > * { margin: 0 !important; }
|
||||
.wrn-auth-sign-in__remember { margin-top: -0.25rem !important; }
|
||||
.wrn-auth-sign-in__form .wrn-next__field-heading label,
|
||||
.wrn-auth-sign-in__form .wrn-next__password-heading { font-size: 0.875rem; font-weight: 650; }
|
||||
.wrn-auth-sign-in__form .wrn-next__field-control > input { min-height: 3rem; font-size: 0.875rem; }
|
||||
.wrn-auth-sign-in__form [data-error]:empty { display: none; }
|
||||
.wrn-auth-sign-in__form .wrn-action[data-full-width="true"] { margin-top: 0.15rem !important; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ component SignUp {
|
||||
<section
|
||||
{...attrs}
|
||||
data-wrnexus-runtime="auth"
|
||||
class='w-full max-w-lg rounded-[var(--wrn-radius-lg)] border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-6 text-[var(--wrn-color-text)] shadow-[var(--wrn-shadow-2)] {class}'
|
||||
class='wrn-auth-sign-up w-full max-w-lg rounded-[var(--wrn-radius-lg)] border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-6 text-[var(--wrn-color-text)] shadow-[var(--wrn-shadow-2)] {class}'
|
||||
>
|
||||
<header
|
||||
class="mb-6 space-y-1.5"
|
||||
@@ -50,7 +50,7 @@ component SignUp {
|
||||
data-schema='{schema}'
|
||||
data-redirect='{redirect}'
|
||||
novalidate
|
||||
class="grid gap-4 sm:grid-cols-2"
|
||||
class="wrn-auth-sign-up__form"
|
||||
>
|
||||
<Input
|
||||
id="auth-sign-up-name"
|
||||
@@ -61,7 +61,6 @@ component SignUp {
|
||||
icon="icon-[lucide--user]"
|
||||
color="{color}"
|
||||
size="{size}"
|
||||
class="sm:col-span-2"
|
||||
/>
|
||||
|
||||
<Input
|
||||
@@ -100,7 +99,6 @@ component SignUp {
|
||||
icon="icon-[lucide--circle-user-round]"
|
||||
color="{color}"
|
||||
size="{size}"
|
||||
class="sm:col-span-2"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -176,15 +174,7 @@ component SignUp {
|
||||
>
|
||||
</p>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
label="{submitLabel}"
|
||||
variant="solid"
|
||||
color="{color}"
|
||||
size="{size}"
|
||||
fullWidth="true"
|
||||
class="wrn-auth-sign-up__wide sm:col-span-2"
|
||||
/>
|
||||
<div class="wrn-auth-sign-up__submit"><Button type="submit" label="{submitLabel}" variant="solid" color="{color}" size="{size}" fullWidth="true" /></div>
|
||||
</form>
|
||||
|
||||
<p
|
||||
@@ -196,9 +186,19 @@ component SignUp {
|
||||
}
|
||||
|
||||
style {
|
||||
.wrn-auth-sign-up > header { margin-bottom: 1.5rem; }
|
||||
.wrn-auth-sign-up > header h1 { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.025em; }
|
||||
.wrn-auth-sign-up > header p { margin-top: 0.35rem; font-size: 0.9375rem; line-height: 1.5; }
|
||||
.wrn-auth-sign-up__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
|
||||
.wrn-auth-sign-up__form .wrn-next__field-heading label,
|
||||
.wrn-auth-sign-up__form .wrn-next--strong-password > label { font-size: 0.875rem; font-weight: 650; }
|
||||
.wrn-auth-sign-up__form .wrn-next__field-control > input { min-height: 3rem; font-size: 0.875rem; }
|
||||
.wrn-auth-sign-up__form [data-error]:empty { display: none; }
|
||||
.wrn-auth-sign-up__wide {
|
||||
grid-column: 1 / -1;
|
||||
min-width: 0;
|
||||
}
|
||||
.wrn-auth-sign-up__submit { width: 100%; margin-top: 0.25rem; }
|
||||
.wrn-auth-sign-up__submit .wrn-btn { min-height: 3rem; font-size: 0.9375rem; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/auth",
|
||||
"version": "0.8.12",
|
||||
"version": "0.8.13",
|
||||
"description": "Complete authentication, account security, MFA, passkeys, recovery, devices, risk, and audit system for WRNexusJS.",
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
|
||||
@@ -72,6 +72,17 @@ test("account forms use the dedicated password components", () => {
|
||||
expect(signUp).not.toContain('id="auth-sign-up-password"');
|
||||
});
|
||||
|
||||
test("account forms own consistent spacing and full-width submit layout", () => {
|
||||
const signIn = readFileSync(join(directory, "SignIn.wrn"), "utf8");
|
||||
const signUp = readFileSync(join(directory, "SignUp.wrn"), "utf8");
|
||||
|
||||
expect(signIn).toContain("wrn-auth-sign-in__form");
|
||||
expect(signIn).toContain("wrn-auth-sign-in__remember");
|
||||
expect(signUp).toContain("wrn-auth-sign-up__form");
|
||||
expect(signUp).toContain("wrn-auth-sign-up__submit");
|
||||
expect(signUp).toContain("grid-template-columns: minmax(0, 1fr)");
|
||||
});
|
||||
|
||||
test("authentication journeys use themed UI form controls", () => {
|
||||
const expected = {
|
||||
"SignIn.wrn": ["<Input", "<TogglePassword", "<Checkbox", "<Button"],
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/cli",
|
||||
"version": "0.8.46",
|
||||
"version": "0.8.47",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
+72
-5
@@ -14,15 +14,23 @@
|
||||
* (`databases.<name>`), with files under `app/db/<name>/`.
|
||||
*/
|
||||
|
||||
import { existsSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
|
||||
import { join, resolve } from "node:path";
|
||||
import { existsSync, readFileSync, readdirSync, statSync, writeFileSync } from "node:fs";
|
||||
import { basename, join, resolve } from "node:path";
|
||||
import { pathToFileURL } from "node:url";
|
||||
import {
|
||||
createPluginRunner,
|
||||
discoverPlugins,
|
||||
type PackageMigrationDefinition,
|
||||
} from "@wrnexus/plugin";
|
||||
import { loadAppConfig, type AppConfig } from "@wrnexus/styles";
|
||||
import {
|
||||
generateQueriesFile,
|
||||
analyzeMigrations,
|
||||
appliedMigrations,
|
||||
applyMigrations,
|
||||
loadMigrations,
|
||||
migrate,
|
||||
parseMigration,
|
||||
parseQueries,
|
||||
rollback,
|
||||
scaffoldMigration,
|
||||
@@ -42,6 +50,55 @@ function dbBaseOf(appDir: string, dbName: string | null): string {
|
||||
return dbName ? join(appDir, "db", dbName) : join(appDir, "db");
|
||||
}
|
||||
|
||||
function packageMigrationName(definition: PackageMigrationDefinition, name?: string): string {
|
||||
const clean = (value: string) => value.trim().replace(/[^a-zA-Z0-9_.-]+/g, "_");
|
||||
return name ? `${clean(definition.id)}__${clean(name)}` : clean(definition.id);
|
||||
}
|
||||
|
||||
function resolvePackageMigrations(
|
||||
definitions: readonly PackageMigrationDefinition[],
|
||||
database?: string,
|
||||
) {
|
||||
return definitions.flatMap((definition) => {
|
||||
if ((definition.database?.trim() || "default") !== (database?.trim() || "default")) return [];
|
||||
if (definition.source !== undefined) {
|
||||
return [parseMigration(packageMigrationName(definition), definition.source)];
|
||||
}
|
||||
if (!definition.entry || !existsSync(definition.entry)) {
|
||||
throw new Error(`WRN-PLUGIN-MIGRATION-MISSING: ${definition.id} has no readable entry.`);
|
||||
}
|
||||
if (statSync(definition.entry).isDirectory()) {
|
||||
return loadMigrations(definition.entry).map((migration) => ({
|
||||
...migration,
|
||||
name: packageMigrationName(definition, migration.name),
|
||||
}));
|
||||
}
|
||||
return [
|
||||
parseMigration(
|
||||
packageMigrationName(definition, basename(definition.entry, ".sql")),
|
||||
readFileSync(definition.entry, "utf8"),
|
||||
),
|
||||
];
|
||||
});
|
||||
}
|
||||
|
||||
async function packageMigrations(root: string, config: AppConfig, database?: string) {
|
||||
const discovered = await discoverPlugins(root, config.plugins, {
|
||||
includeDevDependencies: true,
|
||||
strict: true,
|
||||
});
|
||||
const runner = createPluginRunner(discovered, {
|
||||
root,
|
||||
mode: "development",
|
||||
command: "dev",
|
||||
metadata: new Map(),
|
||||
warn: (message) => console.warn(`[wrnexus:plugin] ${message}`),
|
||||
});
|
||||
await runner.configure(config as Record<string, unknown>);
|
||||
await runner.configResolved(config as Readonly<Record<string, unknown>>);
|
||||
return resolvePackageMigrations((await runner.contributions()).migrations, database);
|
||||
}
|
||||
|
||||
/** List user tables for the connected database (dialect-aware introspection). */
|
||||
async function listTables(db: import("@wrnexus/db").Db): Promise<string[]> {
|
||||
const dialect = db.driver.dialect;
|
||||
@@ -126,6 +183,7 @@ export async function runDbCommand(
|
||||
const dbConfig = dbName ? config.databases?.[dbName] : config.db;
|
||||
const dbBase = dbBaseOf(appDir, dbName);
|
||||
const migrationsDir = join(dbBase, "migrations");
|
||||
const contributedMigrations = await packageMigrations(root, config, dbName ?? undefined);
|
||||
const label = dbName ? ` (db: ${dbName})` : "";
|
||||
const safetyIssues = analyzeMigrations(loadMigrations(migrationsDir));
|
||||
|
||||
@@ -242,7 +300,10 @@ export async function runDbCommand(
|
||||
`WRN-DB-UNSAFE-MIGRATION: ${blockers.length} breaking rollout operation(s) found. Run 'wrnexus db check' and use an expand/contract migration; --allow-breaking explicitly overrides this gate.`,
|
||||
);
|
||||
}
|
||||
const applied = await migrate(db, migrationsDir);
|
||||
const applied = [
|
||||
...(await migrate(db, migrationsDir)),
|
||||
...(await applyMigrations(db, contributedMigrations)),
|
||||
];
|
||||
console.log(
|
||||
applied.length
|
||||
? `✓ Applied ${applied.length}${label}:\n ${applied.join("\n ")}`
|
||||
@@ -257,8 +318,14 @@ export async function runDbCommand(
|
||||
}
|
||||
case "status": {
|
||||
const rows = await status(db, migrationsDir);
|
||||
if (rows.length === 0) console.log(`No migrations found in ${migrationsDir}.`);
|
||||
else for (const r of rows) console.log(` [${r.applied ? "x" : " "}] ${r.name}`);
|
||||
const applied = new Set(await appliedMigrations(db));
|
||||
const packageRows = contributedMigrations.map(({ name }) => ({
|
||||
name,
|
||||
applied: applied.has(name),
|
||||
}));
|
||||
const allRows = [...rows, ...packageRows];
|
||||
if (allRows.length === 0) console.log(`No migrations found in ${migrationsDir}.`);
|
||||
else for (const r of allRows) console.log(` [${r.applied ? "x" : " "}] ${r.name}`);
|
||||
break;
|
||||
}
|
||||
default:
|
||||
|
||||
@@ -23,7 +23,6 @@ import {
|
||||
mkdirSync,
|
||||
readFileSync,
|
||||
readdirSync,
|
||||
rmSync,
|
||||
statSync,
|
||||
writeFileSync,
|
||||
} from "node:fs";
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/dev-server",
|
||||
"version": "0.8.41",
|
||||
"version": "0.8.42",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
|
||||
@@ -1482,13 +1482,27 @@ export function createHandlers(deps: RuntimeDeps): Handlers {
|
||||
});
|
||||
const apiCtx = createContext(apiReq, apiUrl);
|
||||
apiCtx.locals = ctx.locals;
|
||||
apiCtx.user = ctx.user;
|
||||
apiCtx.tenant = ctx.tenant;
|
||||
apiCtx.tracer = ctx.tracer;
|
||||
apiCtx.ip = ctx.ip;
|
||||
apiCtx.lang = ctx.lang;
|
||||
apiCtx.t = ctx.t;
|
||||
apiCtx.params = ctx.params;
|
||||
apiCtx.cookies = ctx.cookies;
|
||||
apiCtx.session = ctx.session;
|
||||
apiCtx.localStorage = ctx.localStorage;
|
||||
|
||||
const apiRes = await handleApi(apiCtx);
|
||||
if (!apiRes.ok) {
|
||||
throw new Error(`API route ${apiUrl.pathname} returned ${apiRes.status}`);
|
||||
const contentType = apiRes.headers.get("content-type") ?? "";
|
||||
const data = contentType.includes("application/json")
|
||||
? await apiRes.json().catch(() => undefined)
|
||||
: await apiRes.text().catch(() => undefined);
|
||||
throw Object.assign(new Error(`API route ${apiUrl.pathname} returned ${apiRes.status}`), {
|
||||
status: apiRes.status,
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
const contentType = apiRes.headers.get("content-type") ?? "";
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
import { afterEach, expect, test } from "bun:test";
|
||||
import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
|
||||
import { tmpdir } from "node:os";
|
||||
import { join } from "node:path";
|
||||
import { buildRouter } from "@wrnexus/router";
|
||||
import { createHandlers, type RuntimeDeps } from "../src/runtime.ts";
|
||||
|
||||
const roots: string[] = [];
|
||||
afterEach(() => roots.splice(0).forEach((root) => rmSync(root, { recursive: true, force: true })));
|
||||
|
||||
test("in-process api failures preserve status and response data for server error sections", async () => {
|
||||
const root = mkdtempSync(join(tmpdir(), "wrnexus-api-error-context-"));
|
||||
roots.push(root);
|
||||
const app = join(root, "app");
|
||||
mkdirSync(join(app, "pages"), { recursive: true });
|
||||
mkdirSync(join(app, "api"), { recursive: true });
|
||||
writeFileSync(join(app, "pages", "probe.ts"), "export default () => '';\n");
|
||||
writeFileSync(join(app, "api", "failure.ts"), "export const GET = () => null;\n");
|
||||
|
||||
const handlers = createHandlers({
|
||||
mode: "production",
|
||||
hmr: false,
|
||||
router: buildRouter(app),
|
||||
loadModule: async (file) =>
|
||||
file.endsWith(`${join("api", "failure")}.ts`)
|
||||
? {
|
||||
GET: () => Response.json({ error: "denied", reason: "policy" }, { status: 403 }),
|
||||
}
|
||||
: {
|
||||
__wrnexusLoad: async (ctx: {
|
||||
__wrnexusCallApi: (path: string, method: string) => Promise<unknown>;
|
||||
}) => {
|
||||
try {
|
||||
await ctx.__wrnexusCallApi("/api/failure", "GET");
|
||||
return { caught: null };
|
||||
} catch (error) {
|
||||
return {
|
||||
caught: {
|
||||
status: (error as { status?: unknown }).status,
|
||||
data: (error as { data?: unknown }).data,
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
default: (ctx: { caught: unknown }) => `<pre>${JSON.stringify(ctx.caught)}</pre>`,
|
||||
},
|
||||
getMiddleware: async () => [],
|
||||
assets: { serve: async () => null },
|
||||
} satisfies RuntimeDeps);
|
||||
|
||||
const response = await handlers.fetch(new Request("https://example.test/probe"), {
|
||||
upgrade: () => false,
|
||||
});
|
||||
|
||||
expect(response?.status).toBe(200);
|
||||
expect(await response?.text()).toContain(
|
||||
JSON.stringify({ status: 403, data: { error: "denied", reason: "policy" } }),
|
||||
);
|
||||
});
|
||||
|
||||
test("in-process api calls inherit authenticated request context", async () => {
|
||||
const root = mkdtempSync(join(tmpdir(), "wrnexus-api-auth-context-"));
|
||||
roots.push(root);
|
||||
const app = join(root, "app");
|
||||
mkdirSync(join(app, "pages"), { recursive: true });
|
||||
mkdirSync(join(app, "api"), { recursive: true });
|
||||
writeFileSync(join(app, "pages", "probe.ts"), "export default () => '';\n");
|
||||
writeFileSync(join(app, "api", "identity.ts"), "export const GET = () => null;\n");
|
||||
|
||||
const handlers = createHandlers({
|
||||
mode: "production",
|
||||
hmr: false,
|
||||
router: buildRouter(app),
|
||||
loadModule: async (file) =>
|
||||
file.endsWith(`${join("api", "identity")}.ts`)
|
||||
? { GET: (ctx: { user?: unknown }) => Response.json({ user: ctx.user }) }
|
||||
: {
|
||||
__wrnexusLoad: async (ctx: {
|
||||
__wrnexusCallApi: (path: string, method: string) => Promise<unknown>;
|
||||
}) => ({ identity: await ctx.__wrnexusCallApi("/api/identity", "GET") }),
|
||||
default: (ctx: { identity: unknown }) => `<pre>${JSON.stringify(ctx.identity)}</pre>`,
|
||||
},
|
||||
getMiddleware: async () => [
|
||||
(ctx, next) => {
|
||||
ctx.user = { id: "authenticated-user" };
|
||||
return next();
|
||||
},
|
||||
],
|
||||
assets: { serve: async () => null },
|
||||
} satisfies RuntimeDeps);
|
||||
|
||||
const response = await handlers.fetch(new Request("https://example.test/probe"), {
|
||||
upgrade: () => false,
|
||||
});
|
||||
|
||||
expect(response?.status).toBe(200);
|
||||
expect(await response?.text()).toContain(JSON.stringify({ user: { id: "authenticated-user" } }));
|
||||
});
|
||||
@@ -32,11 +32,14 @@ component StrongPassword {
|
||||
required: boolean = false
|
||||
invalid: boolean = false
|
||||
validationMessage: string = ""
|
||||
showLabel: string = "Show password"
|
||||
hideLabel: string = "Hide password"
|
||||
class: string = ""
|
||||
}
|
||||
|
||||
state password = value
|
||||
state detailsOpen: boolean = false
|
||||
state revealed: boolean = false
|
||||
|
||||
functions {
|
||||
shared function hasMinimumLength() {
|
||||
@@ -113,6 +116,12 @@ component StrongPassword {
|
||||
return emptyLabel
|
||||
}
|
||||
|
||||
shared function toggleVisibility() {
|
||||
if (!disabled && !readonly) {
|
||||
revealed = !revealed
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
view {
|
||||
@@ -124,10 +133,11 @@ component StrongPassword {
|
||||
>
|
||||
<label for="{name}-strong-password">{label}</label>
|
||||
<div class="wrn-next__strong-password-anchor">
|
||||
<span class="wrn-next__strong-password-leading-icon" aria-hidden="true"></span>
|
||||
<input
|
||||
{...attrs}
|
||||
id="{name}-strong-password"
|
||||
type="password"
|
||||
type="{revealed ? 'text' : 'password'}"
|
||||
name="{name}"
|
||||
value="{password}"
|
||||
placeholder="{placeholder}"
|
||||
@@ -143,6 +153,15 @@ component StrongPassword {
|
||||
@input="password = event.target.value; output.input({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() }); output.strength({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
|
||||
@change="output.change({ value: password, score: score(), maximumScore: maximumScore(), percent: strengthPercent(), level: strengthLevel() })"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="wrn-next__strong-password-toggle"
|
||||
aria-label="{revealed ? hideLabel : showLabel}"
|
||||
title="{revealed ? hideLabel : showLabel}"
|
||||
aria-pressed="{revealed ? 'true' : 'false'}"
|
||||
disabled="{disabled || readonly}"
|
||||
@click="toggleVisibility()"
|
||||
><span aria-hidden="true"></span></button>
|
||||
|
||||
{#if presentation === "popover"}
|
||||
<div
|
||||
@@ -236,19 +255,72 @@ component StrongPassword {
|
||||
|
||||
.wrn-next--strong-password input {
|
||||
width: 100%;
|
||||
min-height: 2.65rem;
|
||||
padding: 0.7rem 0.85rem;
|
||||
min-height: 3rem;
|
||||
padding: 0.75rem 3rem 0.75rem 2.75rem;
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: var(--wrn-radius-sm);
|
||||
outline: 0;
|
||||
color: var(--wrn-color-text);
|
||||
background: var(--wrn-color-surface);
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.wrn-next__strong-password-leading-icon,
|
||||
.wrn-next__strong-password-toggle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 2;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.wrn-next__strong-password-leading-icon {
|
||||
left: 0.9rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: var(--wrn-color-muted);
|
||||
background: currentColor;
|
||||
pointer-events: none;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
}
|
||||
.wrn-next__strong-password-toggle {
|
||||
right: 0.45rem;
|
||||
display: grid;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: calc(var(--wrn-radius-sm) * 0.72);
|
||||
color: var(--wrn-color-muted);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.wrn-next__strong-password-toggle:hover,
|
||||
.wrn-next__strong-password-toggle:focus-visible {
|
||||
color: var(--wrn-component-color);
|
||||
background: color-mix(in srgb, var(--wrn-component-color) 10%, transparent);
|
||||
outline: 0;
|
||||
}
|
||||
.wrn-next__strong-password-toggle > span {
|
||||
width: 1.05rem;
|
||||
height: 1.05rem;
|
||||
background: currentColor;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7C3.7 7.6 7.64 5 12 5c4.36 0 8.3 2.6 9.94 6.65a1 1 0 0 1 0 .7C20.3 16.4 16.36 19 12 19c-4.36 0-8.3-2.6-9.94-6.65Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
}
|
||||
.wrn-next__strong-password-toggle[aria-pressed="true"]::after {
|
||||
position: absolute;
|
||||
width: 1.25rem;
|
||||
height: 0.12rem;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
content: "";
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 0 0 0 1px var(--wrn-color-surface);
|
||||
}
|
||||
|
||||
.wrn-next--strong-password input:focus-visible {
|
||||
border-color: var(--wrn-component-color);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-component-color) 16%, transparent);
|
||||
|
||||
@@ -107,6 +107,7 @@ component TogglePassword {
|
||||
{/if}
|
||||
</div>
|
||||
<div class="wrn-next__password-control">
|
||||
<span class="wrn-next__password-leading-icon" aria-hidden="true"></span>
|
||||
<input
|
||||
{...attrs}
|
||||
id="{name}-password"
|
||||
@@ -229,19 +230,32 @@ component TogglePassword {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 2.75em;
|
||||
padding: 0.65em 3em 0.65em 0.8em;
|
||||
min-height: 3rem;
|
||||
padding: 0.75rem 3rem 0.75rem 2.75rem;
|
||||
border: 1px solid var(--wrn-color-border);
|
||||
border-radius: var(--wrn-radius-sm);
|
||||
outline: 0;
|
||||
color: var(--wrn-color-text);
|
||||
background: var(--wrn-color-bg);
|
||||
background: var(--wrn-color-surface);
|
||||
font: inherit;
|
||||
font-size: 0.8125rem;
|
||||
font-size: 0.875rem;
|
||||
transition:
|
||||
border-color var(--wrn-motion-base) var(--wrn-ease-standard),
|
||||
box-shadow var(--wrn-motion-base) var(--wrn-ease-standard);
|
||||
}
|
||||
|
||||
.wrn-next__password-leading-icon {
|
||||
position: absolute;
|
||||
left: 0.9rem;
|
||||
z-index: 1;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: var(--wrn-color-muted);
|
||||
background: currentColor;
|
||||
pointer-events: none;
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
|
||||
}
|
||||
|
||||
.wrn-next__password-control > input:focus-visible {
|
||||
border-color: var(--wrn-component-color);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wrn-component-color) 18%, transparent);
|
||||
|
||||
@@ -36,6 +36,7 @@ label: string = "Button"
|
||||
view {
|
||||
<span
|
||||
class="wrn-action {fullWidth ? 'w-full' : ''} {class}"
|
||||
data-full-width="{fullWidth ? 'true' : 'false'}"
|
||||
>
|
||||
{#if as === "a" || (as === "" && href)}
|
||||
<a
|
||||
@@ -414,6 +415,11 @@ label: string = "Button"
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.wrn-action[data-full-width="true"],
|
||||
.wrn-action[data-full-width="true"] > .wrn-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wrn-btn--pill {
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ui",
|
||||
"version": "0.8.20",
|
||||
"version": "0.8.21",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -263,6 +263,18 @@ test("auth form uses package schemas, disables native validation, and renders a
|
||||
expect(html).toContain('fullWidth="true"');
|
||||
});
|
||||
|
||||
test("password controls provide matching lock and visibility affordances", () => {
|
||||
const toggle = readFileSync(uiComponentPath("TogglePassword"), "utf8");
|
||||
const strong = readFileSync(uiComponentPath("StrongPassword"), "utf8");
|
||||
const button = readFileSync(uiComponentPath("Button"), "utf8");
|
||||
|
||||
expect(toggle).toContain("wrn-next__password-leading-icon");
|
||||
expect(strong).toContain("wrn-next__strong-password-leading-icon");
|
||||
expect(strong).toContain("wrn-next__strong-password-toggle");
|
||||
expect(strong).toContain("type=\"{revealed ? 'text' : 'password'}\"");
|
||||
expect(button).toContain("data-full-width=\"{fullWidth ? 'true' : 'false'}\"");
|
||||
});
|
||||
|
||||
test("footer supports typed entries, responsive columns, pre/post slots, and events", () => {
|
||||
const source = readFileSync(uiComponentPath("Footer"), "utf8");
|
||||
expect(source).toMatch(/<slot\s+name="pre-footer"\s*>/);
|
||||
|
||||
Reference in New Issue
Block a user