kunthawat/moreminimore-redesign
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Activity

Add Back navigation to Security and Domain settings pages (#45)

Browse Source 
* Add Back navigation to Security and Domain settings pages

* changeset

---------

Co-authored-by: Matt Kane <mkane@cloudflare.com>
Co-authored-by: Matt Kane <m@mk.gg>
This commit is contained in:
Flynsarmy
2026-04-06 20:46:22 +10:00
committed by GitHub
parent de251fc039
commit 5f448d1035
3 changed files with 49 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/admin/src/components/settings/AllowedDomainsSettings.tsx
View File

@@ -167,10 +167,21 @@ export function AllowedDomainsSettings() {
}
};
const settingsHeader = (
<div className="flex items-center gap-3">
<Link to="/settings">
<Button variant="ghost" shape="square" aria-label="Back to settings">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<h1 className="text-2xl font-bold">Self-Signup Domains</h1>
</div>
);
if (manifestLoading || isLoading) {
return (
<div className="space-y-6">
<h1 className="text-2xl font-bold">Self-Signup Domains</h1>
{settingsHeader}
<div className="rounded-lg border bg-kumo-base p-6">
<p className="text-kumo-subtle">Loading...</p>
</div>
@@ -182,7 +193,7 @@ export function AllowedDomainsSettings() {
if (isExternalAuth) {
return (
<div className="space-y-6">
<h1 className="text-2xl font-bold">Self-Signup Domains</h1>
{settingsHeader}
<div className="rounded-lg border bg-kumo-base p-6">
<div className="flex items-start gap-3">
<Info className="h-5 w-5 text-kumo-subtle mt-0.5 flex-shrink-0" />
@@ -191,11 +202,6 @@ export function AllowedDomainsSettings() {
User access is managed by an external provider ({manifest?.authMode}). Self-signup
domain settings are not available when using external authentication.
</p>
<Link to="/settings">
<Button variant="outline" size="sm" icon={<ArrowLeft />}>
Back to Settings
</Button>
</Link>
</div>
</div>
</div>
@@ -206,8 +212,8 @@ export function AllowedDomainsSettings() {
if (error) {
return (
<div className="space-y-6">
<h1 className="text-2xl font-bold">Self-Signup Domains</h1>
<div className="rounded-lg border border-kumo-danger/50 bg-kumo-danger/10 p-6">
{settingsHeader}
<div className="rounded-lg border bg-kumo-base p-6">
<p className="text-kumo-danger">
{error instanceof Error ? error.message : "Failed to load allowed domains"}
</p>
@@ -218,23 +224,23 @@ export function AllowedDomainsSettings() {
return (
<div className="space-y-6">
<h1 className="text-2xl font-bold">Self-Signup Domains</h1>
{settingsHeader}
{/* Status message */}
{saveStatus && (
<div
className={`rounded-lg border p-4 flex items-center gap-2 ${
className={`flex items-center gap-2 rounded-lg border p-3 text-sm ${
saveStatus.type === "success"
? "bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-400"
: "bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-400"
? "border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950/30 dark:text-green-200"
: "border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-950/30 dark:text-red-200"
}`}
>
{saveStatus.type === "success" ? (
<CheckCircle className="h-5 w-5" />
<CheckCircle className="h-4 w-4 flex-shrink-0" />
) : (
<WarningCircle className="h-5 w-5" />
<WarningCircle className="h-4 w-4 flex-shrink-0" />
)}
<span>{saveStatus.message}</span>
{saveStatus.message}
</div>
)}

38
packages/admin/src/components/settings/SecuritySettings.tsx
View File

@@ -96,10 +96,21 @@ export function SecuritySettings() {
setSaveStatus({ type: "success", message: "Passkey added successfully" });
};
const settingsHeader = (
<div className="flex items-center gap-3">
<Link to="/settings">
<Button variant="ghost" shape="square" aria-label="Back to settings">
<ArrowLeft className="h-4 w-4" />
</Button>
</Link>
<h1 className="text-2xl font-bold">Security Settings</h1>
</div>
);
if (manifestLoading || isLoading) {
return (
<div className="space-y-6">
<h1 className="text-2xl font-bold">Security Settings</h1>
{settingsHeader}
<div className="rounded-lg border bg-kumo-base p-6">
<p className="text-kumo-subtle">Loading...</p>
</div>
@@ -111,7 +122,7 @@ export function SecuritySettings() {
if (isExternalAuth) {
return (
<div className="space-y-6">
<h1 className="text-2xl font-bold">Security Settings</h1>
{settingsHeader}
<div className="rounded-lg border bg-kumo-base p-6">
<div className="flex items-start gap-3">
<Info className="h-5 w-5 text-kumo-subtle mt-0.5 flex-shrink-0" />
@@ -120,11 +131,6 @@ export function SecuritySettings() {
Authentication is managed by an external provider ({manifest?.authMode}). Passkey
settings are not available when using external authentication.
</p>
<Link to="/settings">
<Button variant="outline" size="sm" icon={<ArrowLeft />}>
Back to Settings
</Button>
</Link>
</div>
</div>
</div>
@@ -135,8 +141,8 @@ export function SecuritySettings() {
if (error) {
return (
<div className="space-y-6">
<h1 className="text-2xl font-bold">Security Settings</h1>
<div className="rounded-lg border border-kumo-danger/50 bg-kumo-danger/10 p-6">
{settingsHeader}
<div className="rounded-lg border bg-kumo-base p-6">
<p className="text-kumo-danger">
{error instanceof Error ? error.message : "Failed to load passkeys"}
</p>
@@ -147,23 +153,23 @@ export function SecuritySettings() {
return (
<div className="space-y-6">
<h1 className="text-2xl font-bold">Security Settings</h1>
{settingsHeader}
{/* Status message */}
{saveStatus && (
<div
className={`rounded-lg border p-4 flex items-center gap-2 ${
className={`flex items-center gap-2 rounded-lg border p-3 text-sm ${
saveStatus.type === "success"
? "bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-400"
: "bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-400"
? "border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950/30 dark:text-green-200"
: "border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-950/30 dark:text-red-200"
}`}
>
{saveStatus.type === "success" ? (
<CheckCircle className="h-5 w-5" />
<CheckCircle className="h-4 w-4 flex-shrink-0" />
) : (
<WarningCircle className="h-5 w-5" />
<WarningCircle className="h-4 w-4 flex-shrink-0" />
)}
<span>{saveStatus.message}</span>
{saveStatus.message}
</div>
)}