nntrivi2001
750d74a2af
- omp-share.js: an admin's switch (S3) runs omp's own auth broker + gateway as the host on loopback; a member's omp pane reaches it as a scoped client keyed by its pane token (clients file = live omp panes only), runs on --model agenthub/<model>, never holds a credential. - omp catalog: --allow-home, so a workspace at the account's home keeps its sessions there (they were recorded under a temp dir and dropped). - Settings → Appearance → Open Markdown as: Preview (default) or Raw, for Files/Changes, the config viewer and a chat's file panel. - First-login password change and password rules, avatar URLs, Artifacts "Mine" includes installed shared skills/plugins, a member's own hook pages.
65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
/**
|
|
* @file AuthCard.tsx
|
|
* @description The card the signed-out screens share (the login page, the
|
|
* first-login password change in `FirstPasswordPage.tsx`): a centred form
|
|
* with the theme's accent glow and grid behind the brand logo, a title and a
|
|
* subtitle. While it shows, the OS's light/dark applies (`applySystemTheme`),
|
|
* since no account's theme has been chosen for it.
|
|
* @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
|
|
*/
|
|
|
|
import { useLayoutEffect, type FormEvent, type ReactNode } from "react";
|
|
import { BRAND_LOGO } from "../lib/brand";
|
|
import { applySystemTheme } from "../hooks/useTheme";
|
|
|
|
export function AuthCard({
|
|
title,
|
|
subtitle,
|
|
onSubmit,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
subtitle: string;
|
|
onSubmit: (e: FormEvent) => void;
|
|
children: ReactNode;
|
|
}) {
|
|
// Follow the OS, live.
|
|
useLayoutEffect(() => {
|
|
applySystemTheme();
|
|
const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
|
|
mq?.addEventListener?.("change", applySystemTheme);
|
|
return () => mq?.removeEventListener?.("change", applySystemTheme);
|
|
}, []);
|
|
|
|
return (
|
|
<main className="flex min-h-screen items-center justify-center bg-surface-0 p-4">
|
|
<form
|
|
onSubmit={onSubmit}
|
|
className="card relative w-full max-w-md overflow-hidden px-6 pb-8 pt-12 sm:px-10"
|
|
>
|
|
{/* Accent glow and a grid fading out from the top, drawn from the
|
|
theme's own accent so it holds in every theme. */}
|
|
<div
|
|
aria-hidden
|
|
className="pointer-events-none absolute inset-x-0 top-0 h-56"
|
|
style={{
|
|
backgroundImage:
|
|
"linear-gradient(to right, rgb(var(--accent) / 0.12) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--accent) / 0.12) 1px, transparent 1px), radial-gradient(ellipse at top, rgb(var(--accent) / 0.16), transparent 70%)",
|
|
backgroundSize: "48px 48px, 48px 48px, 100% 100%",
|
|
backgroundPosition: "center top",
|
|
maskImage: "radial-gradient(ellipse 70% 100% at top, black 30%, transparent 100%)",
|
|
}}
|
|
/>
|
|
<div className="relative space-y-5">
|
|
<div className="text-center">
|
|
<img src={BRAND_LOGO} alt="SmartGift" className="block h-auto w-full" />
|
|
<h1 className="mt-5 text-3xl font-semibold tracking-tight text-fg-primary">{title}</h1>
|
|
<p className="mt-2 text-sm text-fg-secondary">{subtitle}</p>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</form>
|
|
</main>
|
|
);
|
|
}
|