🚧 frontend wip

This commit is contained in:
Fred KISSIE
2025-11-11 21:14:10 +01:00
parent 46d60bd090
commit 08e43400e4
8 changed files with 145 additions and 48 deletions

View File

@@ -150,6 +150,7 @@
"resourceAdd": "Add Resource",
"resourceErrorDelte": "Error deleting resource",
"authentication": "Authentication",
"authPages": "Auth Page",
"protected": "Protected",
"notProtected": "Not Protected",
"resourceMessageRemove": "Once removed, the resource will no longer be accessible. All targets associated with the resource will also be removed.",

View File

@@ -10,7 +10,8 @@ const runMigrations = async () => {
await migrate(db as any, {
migrationsFolder: migrationsFolder
});
console.log("Migrations completed successfully.");
console.log("Migrations completed successfully.");
process.exit(0);
} catch (error) {
console.error("Error running migrations:", error);
process.exit(1);

View File

@@ -7,7 +7,8 @@ import {
bigint,
real,
text,
index
index,
uniqueIndex
} from "drizzle-orm/pg-core";
import { InferSelectModel } from "drizzle-orm";
import { randomUUID } from "crypto";
@@ -64,19 +65,23 @@ export const orgDomains = pgTable("orgDomains", {
.references(() => domains.domainId, { onDelete: "cascade" })
});
export const orgAuthPages = pgTable("orgAuthPages", {
orgId: varchar("orgId")
.notNull()
.references(() => orgs.orgId, { onDelete: "cascade" }),
orgAuthPageId: serial("orgAuthPageId").primaryKey(),
logoUrl: text("logoUrl"),
logoWidth: integer("logoWidth"),
logoHeight: integer("logoHeight"),
title: text("title"),
subtitle: text("subtitle"),
resourceTitle: text("resourceTitle"),
resourceSubtitle: text("resourceSubtitle")
});
export const orgAuthPages = pgTable(
"orgAuthPages",
{
orgId: varchar("orgId")
.notNull()
.references(() => orgs.orgId, { onDelete: "cascade" }),
orgAuthPageId: serial("orgAuthPageId").primaryKey(),
logoUrl: text("logoUrl").notNull(),
logoWidth: integer("logoWidth").notNull(),
logoHeight: integer("logoHeight").notNull(),
title: text("title").notNull(),
subtitle: text("subtitle"),
resourceTitle: text("resourceTitle").notNull(),
resourceSubtitle: text("resourceSubtitle")
},
(t) => [uniqueIndex("uniqueAuthPagePerOrgIdx").on(t.orgId)]
);
export const sites = pgTable("sites", {
siteId: serial("siteId").primaryKey(),

View File

@@ -1,6 +1,12 @@
import { randomUUID } from "crypto";
import { InferSelectModel } from "drizzle-orm";
import { sqliteTable, text, integer, index } from "drizzle-orm/sqlite-core";
import {
sqliteTable,
text,
integer,
index,
uniqueIndex
} from "drizzle-orm/sqlite-core";
import { boolean } from "yargs";
export const domains = sqliteTable("domains", {
@@ -66,19 +72,25 @@ export const orgDomains = sqliteTable("orgDomains", {
.references(() => domains.domainId, { onDelete: "cascade" })
});
export const orgAuthPages = sqliteTable("orgAuthPages", {
orgId: text("orgId")
.notNull()
.references(() => orgs.orgId, { onDelete: "cascade" }),
orgAuthPageId: integer("orgAuthPageId").primaryKey({ autoIncrement: true }),
logoUrl: text("logoUrl"),
logoWidth: integer("logoWidth"),
logoHeight: integer("logoHeight"),
title: text("title"),
subtitle: text("subtitle"),
resourceTitle: text("resourceTitle"),
resourceSubtitle: text("resourceSubtitle")
});
export const orgAuthPages = sqliteTable(
"orgAuthPages",
{
orgId: text("orgId")
.notNull()
.references(() => orgs.orgId, { onDelete: "cascade" }),
orgAuthPageId: integer("orgAuthPageId").primaryKey({
autoIncrement: true
}),
logoUrl: text("logoUrl").notNull(),
logoWidth: integer("logoWidth").notNull(),
logoHeight: integer("logoHeight").notNull(),
title: text("title").notNull(),
subtitle: text("subtitle"),
resourceTitle: text("resourceTitle").notNull(),
resourceSubtitle: text("resourceSubtitle")
},
(t) => [uniqueIndex("uniqueAuthPagePerOrgIdx").on(t.orgId)]
);
export const sites = sqliteTable("sites", {
siteId: integer("siteId").primaryKey({ autoIncrement: true }),

View File

@@ -0,0 +1,15 @@
import AuthPageCustomizationForm from "@app/components/AuthPagesCustomizationForm";
import { SettingsContainer } from "@app/components/Settings";
export interface AuthPageProps {
params: Promise<{ orgId: string }>;
}
export default async function AuthPage(props: AuthPageProps) {
const orgId = (await props.params).orgId;
return (
<SettingsContainer>
<AuthPageCustomizationForm orgId={orgId} />
</SettingsContainer>
);
}

View File

@@ -1,7 +1,7 @@
import { internal } from "@app/lib/api";
import { authCookieHeader } from "@app/lib/api/cookies";
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
import { HorizontalTabs } from "@app/components/HorizontalTabs";
import { HorizontalTabs, type TabItem } from "@app/components/HorizontalTabs";
import { verifySession } from "@app/lib/auth/verifySession";
import OrgProvider from "@app/providers/OrgProvider";
import OrgUserProvider from "@app/providers/OrgUserProvider";
@@ -10,7 +10,7 @@ import { GetOrgUserResponse } from "@server/routers/user";
import { AxiosResponse } from "axios";
import { redirect } from "next/navigation";
import { cache } from "react";
import { getTranslations } from 'next-intl/server';
import { getTranslations } from "next-intl/server";
type GeneralSettingsProps = {
children: React.ReactNode;
@@ -19,7 +19,7 @@ type GeneralSettingsProps = {
export default async function GeneralSettingsPage({
children,
params,
params
}: GeneralSettingsProps) {
const { orgId } = await params;
@@ -35,8 +35,8 @@ export default async function GeneralSettingsPage({
const getOrgUser = cache(async () =>
internal.get<AxiosResponse<GetOrgUserResponse>>(
`/org/${orgId}/user/${user.userId}`,
await authCookieHeader(),
),
await authCookieHeader()
)
);
const res = await getOrgUser();
orgUser = res.data.data;
@@ -49,8 +49,8 @@ export default async function GeneralSettingsPage({
const getOrg = cache(async () =>
internal.get<AxiosResponse<GetOrgResponse>>(
`/org/${orgId}`,
await authCookieHeader(),
),
await authCookieHeader()
)
);
const res = await getOrg();
org = res.data.data;
@@ -60,11 +60,16 @@ export default async function GeneralSettingsPage({
const t = await getTranslations();
const navItems = [
const navItems: TabItem[] = [
{
title: t('general'),
title: t("general"),
href: `/{orgId}/settings/general`,
exact: true
},
{
title: t("authPages"),
href: `/{orgId}/settings/general/auth-pages`
}
];
return (
@@ -72,13 +77,11 @@ export default async function GeneralSettingsPage({
<OrgProvider org={org}>
<OrgUserProvider orgUser={orgUser}>
<SettingsSectionTitle
title={t('orgGeneralSettings')}
description={t('orgSettingsDescription')}
title={t("orgGeneralSettings")}
description={t("orgSettingsDescription")}
/>
<HorizontalTabs items={navItems}>
{children}
</HorizontalTabs>
<HorizontalTabs items={navItems}>{children}</HorizontalTabs>
</OrgUserProvider>
</OrgProvider>
</>

View File

@@ -0,0 +1,56 @@
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import * as React from "react";
import { useForm } from "react-hook-form";
import z from "zod";
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage
} from "@app/components/ui/form";
export type AuthPageCustomizationProps = {
orgId: string;
};
const AuthPageFormSchema = z.object({
logoUrl: z.string().url(),
logoWidth: z.number().min(1),
logoHeight: z.number().min(1),
title: z.string(),
subtitle: z.string().optional(),
resourceTitle: z.string(),
resourceSubtitle: z.string().optional()
});
export default function AuthPageCustomizationForm({
orgId
}: AuthPageCustomizationProps) {
const [, formAction, isSubmitting] = React.useActionState(onSubmit, null);
const form = useForm({
resolver: zodResolver(AuthPageFormSchema),
defaultValues: {
title: `Log in to {{orgName}}`,
resourceTitle: `Authenticate to access {{resourceName}}`
}
});
async function onSubmit() {
const isValid = await form.trigger();
if (!isValid) return;
// ...
}
return (
<Form {...form}>
<button>Hello</button>
</Form>
);
}

View File

@@ -8,16 +8,17 @@ import { Badge } from "@app/components/ui/badge";
import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
import { useTranslations } from "next-intl";
export type HorizontalTabs = Array<{
export type TabItem = {
title: string;
href: string;
icon?: React.ReactNode;
showProfessional?: boolean;
}>;
exact?: boolean;
};
interface HorizontalTabsProps {
children: React.ReactNode;
items: HorizontalTabs;
items: TabItem[];
disabled?: boolean;
}
@@ -49,8 +50,11 @@ export function HorizontalTabs({
{items.map((item) => {
const hydratedHref = hydrateHref(item.href);
const isActive =
pathname.startsWith(hydratedHref) &&
(item.exact
? pathname === hydratedHref
: pathname.startsWith(hydratedHref)) &&
!pathname.includes("create");
const isProfessional =
item.showProfessional && !isUnlocked();
const isDisabled =
@@ -88,7 +92,7 @@ export function HorizontalTabs({
variant="outlinePrimary"
className="ml-2"
>
{t('licenseBadge')}
{t("licenseBadge")}
</Badge>
)}
</div>