move all components to components dir

server/routers/resource/getResourceAuthInfo.ts

@@ -32,6 +32,7 @@ export type GetResourceAuthInfoResponse = {
     url: string;
     whitelist: boolean;
     skipToIdpId: number | null;
+    orgId: string;
 };
 
 export async function getResourceAuthInfo(
@@ -88,7 +89,8 @@ export async function getResourceAuthInfo(
                 blockAccess: resource.blockAccess,
                 url,
                 whitelist: resource.emailWhitelistEnabled,
-                skipToIdpId: resource.skipToIdpId
+                skipToIdpId: resource.skipToIdpId,
+                orgId: resource.orgId
             },
             success: true,
             error: false,

src/app/[orgId]/page.tsx

@@ -1,8 +1,8 @@
 import { verifySession } from "@app/lib/auth/verifySession";
 import UserProvider from "@app/providers/UserProvider";
 import { cache } from "react";
-import OrganizationLandingCard from "./OrganizationLandingCard";
-import MemberResourcesPortal from "./MemberResourcesPortal";
+import OrganizationLandingCard from "../../components/OrganizationLandingCard";
+import MemberResourcesPortal from "../../components/MemberResourcesPortal";
 import { GetOrgOverviewResponse } from "@server/routers/org/getOrgOverview";
 import { internal } from "@app/lib/api";
 import { AxiosResponse } from "axios";

src/app/[orgId]/settings/access/invitations/page.tsx

@@ -1,13 +1,13 @@
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { AxiosResponse } from "axios";
-import InvitationsTable, { InvitationRow } from "./InvitationsTable";
+import InvitationsTable, { InvitationRow } from "../../../../../components/InvitationsTable";
 import { GetOrgResponse } from "@server/routers/org";
 import { cache } from "react";
 import OrgProvider from "@app/providers/OrgProvider";
 import UserProvider from "@app/providers/UserProvider";
 import { verifySession } from "@app/lib/auth/verifySession";
-import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
+import AccessPageHeaderAndNav from "../../../../../components/AccessPageHeaderAndNav";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { getTranslations } from 'next-intl/server';
 

src/app/[orgId]/settings/access/roles/page.tsx

@@ -5,7 +5,7 @@ import { GetOrgResponse } from "@server/routers/org";
 import { cache } from "react";
 import OrgProvider from "@app/providers/OrgProvider";
 import { ListRolesResponse } from "@server/routers/role";
-import RolesTable, { RoleRow } from "./RolesTable";
+import RolesTable, { RoleRow } from "../../../../../components/RolesTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { getTranslations } from 'next-intl/server';
 

src/app/[orgId]/settings/access/users/page.tsx

@@ -2,13 +2,13 @@ import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { ListUsersResponse } from "@server/routers/user";
 import { AxiosResponse } from "axios";
-import UsersTable, { UserRow } from "./UsersTable";
+import UsersTable, { UserRow } from "../../../../../components/UsersTable";
 import { GetOrgResponse } from "@server/routers/org";
 import { cache } from "react";
 import OrgProvider from "@app/providers/OrgProvider";
 import UserProvider from "@app/providers/UserProvider";
 import { verifySession } from "@app/lib/auth/verifySession";
-import AccessPageHeaderAndNav from "../AccessPageHeaderAndNav";
+import AccessPageHeaderAndNav from "../../../../../components/AccessPageHeaderAndNav";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { getTranslations } from 'next-intl/server';
 

src/app/[orgId]/settings/api-keys/page.tsx

@@ -2,7 +2,7 @@ import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { AxiosResponse } from "axios";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import OrgApiKeysTable, { OrgApiKeyRow } from "./OrgApiKeysTable";
+import OrgApiKeysTable, { OrgApiKeyRow } from "../../../../components/OrgApiKeysTable";
 import { ListOrgApiKeysResponse } from "@server/routers/apiKeys";
 import { getTranslations } from 'next-intl/server';
 
@@ -15,7 +15,7 @@ export const dynamic = "force-dynamic";
 export default async function ApiKeysPage(props: ApiKeyPageProps) {
     const params = await props.params;
     const t = await getTranslations();
-    
+
     let apiKeys: ListOrgApiKeysResponse["apiKeys"] = [];
     try {
         const res = await internal.get<AxiosResponse<ListOrgApiKeysResponse>>(

src/app/[orgId]/settings/clients/[clientId]/layout.tsx

@@ -3,7 +3,7 @@ import { AxiosResponse } from "axios";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { GetClientResponse } from "@server/routers/client";
-import ClientInfoCard from "./ClientInfoCard";
+import ClientInfoCard from "../../../../../components/ClientInfoCard";
 import ClientProvider from "@app/providers/ClientProvider";
 import { redirect } from "next/navigation";
 import { HorizontalTabs } from "@app/components/HorizontalTabs";

src/app/[orgId]/settings/clients/page.tsx

@@ -1,10 +1,10 @@
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { AxiosResponse } from "axios";
-import { ClientRow } from "./ClientsTable";
+import { ClientRow } from "../../../../components/ClientsTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { ListClientsResponse } from "@server/routers/client";
-import ClientsTable from "./ClientsTable";
+import ClientsTable from "../../../../components/ClientsTable";
 
 type ClientsPageProps = {
     params: Promise<{ orgId: string }>;

src/app/[orgId]/settings/domains/page.tsx

@@ -2,7 +2,7 @@ import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { AxiosResponse } from "axios";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import DomainsTable, { DomainRow } from "./DomainsTable";
+import DomainsTable, { DomainRow } from "../../../../components/DomainsTable";
 import { getTranslations } from "next-intl/server";
 import { cache } from "react";
 import { GetOrgResponse } from "@server/routers/org";

src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx

@@ -27,8 +27,8 @@ import {
 } from "@app/components/ui/form";
 import { ListUsersResponse } from "@server/routers/user";
 import { Binary, Key } from "lucide-react";
-import SetResourcePasswordForm from "./SetResourcePasswordForm";
-import SetResourcePincodeForm from "./SetResourcePincodeForm";
+import SetResourcePasswordForm from "../../../../../../components/SetResourcePasswordForm";
+import SetResourcePincodeForm from "../../../../../../components/SetResourcePincodeForm";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import {

src/app/[orgId]/settings/resources/[resourceId]/general/page.tsx

@@ -54,7 +54,7 @@ import DomainPicker from "@app/components/DomainPicker";
 import { Globe } from "lucide-react";
 import { build } from "@server/build";
 import { finalizeSubdomainSanitize } from "@app/lib/subdomain-utils";
-import { DomainRow } from "../../../domains/DomainsTable";
+import { DomainRow } from "../../../../../../components/DomainsTable";
 import { toASCII, toUnicode } from "punycode";
 
 export default function GeneralForm() {
@@ -160,7 +160,7 @@ export default function GeneralForm() {
                 const rawDomains = res.data.data.domains as DomainRow[];
                 const domains = rawDomains.map((domain) => ({
                     ...domain,
-                    baseDomain: toUnicode(domain.baseDomain), 
+                    baseDomain: toUnicode(domain.baseDomain),
                 }));
                 setBaseDomains(domains);
                 setFormKey((key) => key + 1);

src/app/[orgId]/settings/resources/[resourceId]/layout.tsx

@@ -12,7 +12,7 @@ import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { GetOrgResponse } from "@server/routers/org";
 import OrgProvider from "@app/providers/OrgProvider";
 import { cache } from "react";
-import ResourceInfoBox from "./ResourceInfoBox";
+import ResourceInfoBox from "../../../../../components/ResourceInfoBox";
 import { GetSiteResponse } from "@server/routers/site";
 import { getTranslations } from 'next-intl/server';
 

src/app/[orgId]/settings/resources/create/page.tsx

@@ -90,7 +90,7 @@ import { ListTargetsResponse } from "@server/routers/target";
 import { DockerManager, DockerState } from "@app/lib/docker";
 import { parseHostTarget } from "@app/lib/parseHostTarget";
 import { toASCII, toUnicode } from 'punycode';
-import { DomainRow } from "../../domains/DomainsTable";
+import { DomainRow } from "../../../../../components/DomainsTable";
 
 const baseResourceFormSchema = z.object({
     name: z.string().min(1).max(255),

src/app/[orgId]/settings/resources/page.tsx

@@ -3,7 +3,7 @@ import { authCookieHeader } from "@app/lib/api/cookies";
 import ResourcesTable, {
     ResourceRow,
     InternalResourceRow
-} from "./ResourcesTable";
+} from "../../../../components/ResourcesTable";
 import { AxiosResponse } from "axios";
 import { ListResourcesResponse } from "@server/routers/resource";
 import { ListAllSiteResourcesByOrgResponse } from "@server/routers/siteResource";

src/app/[orgId]/settings/share-links/CreateShareLinkForm.tsx

@@ -58,14 +58,14 @@ import { CheckIcon, ChevronsUpDown } from "lucide-react";
 import { Checkbox } from "@app/components/ui/checkbox";
 import { GenerateAccessTokenResponse } from "@server/routers/accessToken";
 import { constructShareLink } from "@app/lib/shareLinks";
-import { ShareLinkRow } from "./ShareLinksTable";
+import { ShareLinkRow } from "@app/components/ShareLinksTable";
 import { QRCodeCanvas, QRCodeSVG } from "qrcode.react";
 import {
     Collapsible,
     CollapsibleContent,
     CollapsibleTrigger
 } from "@app/components/ui/collapsible";
-import AccessTokenSection from "./AccessTokenUsage";
+import AccessTokenSection from "@app/components/AccessTokenUsage";
 import { useTranslations } from "next-intl";
 import { toUnicode } from 'punycode';
 

src/app/[orgId]/settings/share-links/ShareLinksTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { ShareLinksDataTable } from "./ShareLinksDataTable";
+import { ShareLinksDataTable } from "@app/components/ShareLinksDataTable";
 import {
     DropdownMenu,
     DropdownMenuContent,
@@ -31,7 +31,7 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
 import { ArrayElement } from "@server/types/ArrayElement";
 import { ListAccessTokensResponse } from "@server/routers/accessToken";
 import moment from "moment";
-import CreateShareLinkForm from "./CreateShareLinkForm";
+import CreateShareLinkForm from "@app/components/CreateShareLinkForm";
 import { constructShareLink } from "@app/lib/shareLinks";
 import { useTranslations } from "next-intl";
 

src/app/[orgId]/settings/share-links/page.tsx

@@ -7,8 +7,8 @@ import { cache } from "react";
 import { GetOrgResponse } from "@server/routers/org";
 import OrgProvider from "@app/providers/OrgProvider";
 import { ListAccessTokensResponse } from "@server/routers/accessToken";
-import ShareLinksTable, { ShareLinkRow } from "./ShareLinksTable";
-import ShareableLinksSplash from "./ShareLinksSplash";
+import ShareLinksTable, { ShareLinkRow } from "../../../../components/ShareLinksTable";
+import ShareableLinksSplash from "../../../../components/ShareLinksSplash";
 import { getTranslations } from "next-intl/server";
 
 type ShareLinksPageProps = {

src/app/[orgId]/settings/sites/[niceId]/layout.tsx

@@ -6,7 +6,7 @@ import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { HorizontalTabs } from "@app/components/HorizontalTabs";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import SiteInfoCard from "./SiteInfoCard";
+import SiteInfoCard from "../../../../../components/SiteInfoCard";
 import { getTranslations } from "next-intl/server";
 
 interface SettingsLayoutProps {

src/app/[orgId]/settings/sites/page.tsx

@@ -2,9 +2,9 @@ import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { ListSitesResponse } from "@server/routers/site";
 import { AxiosResponse } from "axios";
-import SitesTable, { SiteRow } from "./SitesTable";
+import SitesTable, { SiteRow } from "../../../../components/SitesTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import SitesSplashCard from "./SitesSplashCard";
+import SitesSplashCard from "../../../../components/SitesSplashCard";
 import { getTranslations } from "next-intl/server";
 
 type SitesPageProps = {

src/app/admin/api-keys/page.tsx

@@ -3,7 +3,7 @@ import { authCookieHeader } from "@app/lib/api/cookies";
 import { AxiosResponse } from "axios";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { ListRootApiKeysResponse } from "@server/routers/apiKeys";
-import ApiKeysTable, { ApiKeyRow } from "./ApiKeysTable";
+import ApiKeysTable, { ApiKeyRow } from "../../../components/ApiKeysTable";
 import { getTranslations } from "next-intl/server";
 
 type ApiKeyPageProps = {};

src/app/admin/idp/[idpId]/policies/page.tsx

@@ -31,7 +31,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
 import { InfoIcon, ExternalLink, CheckIcon } from "lucide-react";
-import PolicyTable, { PolicyRow } from "./PolicyTable";
+import PolicyTable, { PolicyRow } from "../../../../../components/PolicyTable";
 import { AxiosResponse } from "axios";
 import { ListOrgsResponse } from "@server/routers/org";
 import {

src/app/admin/idp/page.tsx

@@ -2,7 +2,7 @@ import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { AxiosResponse } from "axios";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import IdpTable, { IdpRow } from "./AdminIdpTable";
+import IdpTable, { IdpRow } from "../../../components/AdminIdpTable";
 import { getTranslations } from "next-intl/server";
 
 export default async function IdpPage() {
@@ -16,7 +16,7 @@ export default async function IdpPage() {
     } catch (e) {
         console.error(e);
     }
-    
+
     const t = await getTranslations();
 
     return (

src/app/admin/license/page.tsx

@@ -6,7 +6,7 @@ import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
 import { formatAxiosError } from "@app/lib/api";
-import { LicenseKeysDataTable } from "./LicenseKeysDataTable";
+import { LicenseKeysDataTable } from "../../../components/LicenseKeysDataTable";
 import { AxiosResponse } from "axios";
 import { Button } from "@app/components/ui/button";
 import {
@@ -49,7 +49,7 @@ import CopyTextBox from "@app/components/CopyTextBox";
 import { Progress } from "@app/components/ui/progress";
 import { MinusCircle, PlusCircle } from "lucide-react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
-import { SitePriceCalculator } from "./components/SitePriceCalculator";
+import { SitePriceCalculator } from "../../../components/SitePriceCalculator";
 import Link from "next/link";
 import { Checkbox } from "@app/components/ui/checkbox";
 import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";

src/app/admin/users/AdminUsersTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { UsersDataTable } from "./AdminUsersDataTable";
+import { UsersDataTable } from "@app/components/AdminUsersDataTable";
 import { Button } from "@app/components/ui/button";
 import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
 import { useRouter } from "next/navigation";

src/app/admin/users/page.tsx

@@ -3,7 +3,7 @@ import { authCookieHeader } from "@app/lib/api/cookies";
 import { AxiosResponse } from "axios";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
 import { AdminListUsersResponse } from "@server/routers/user/adminListUsers";
-import UsersTable, { GlobalUserRow } from "./AdminUsersTable";
+import UsersTable, { GlobalUserRow } from "../../../components/AdminUsersTable";
 import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
 import { InfoIcon } from "lucide-react";
 import { getTranslations } from "next-intl/server";

src/app/auth/idp/[idpId]/oidc/callback/page.tsx

@@ -1,5 +1,5 @@
 import { cookies } from "next/headers";
-import ValidateOidcToken from "./ValidateOidcToken";
+import ValidateOidcToken from "@app/components/ValidateOidcToken";
 import { cache } from "react";
 import { priv } from "@app/lib/api";
 import { AxiosResponse } from "axios";

src/app/auth/login/page.tsx

@@ -2,7 +2,7 @@ import { verifySession } from "@app/lib/auth/verifySession";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { cache } from "react";
-import DashboardLoginForm from "./DashboardLoginForm";
+import DashboardLoginForm from "@app/components/DashboardLoginForm";
 import { Mail } from "lucide-react";
 import { pullEnv } from "@app/lib/pullEnv";
 import { cleanRedirect } from "@app/lib/cleanRedirect";

src/app/auth/reset-password/ResetPasswordForm.tsx

@@ -35,7 +35,7 @@ import {
     ResetPasswordResponse
 } from "@server/routers/auth";
 import { Loader2 } from "lucide-react";
-import { Alert, AlertDescription } from "../../../components/ui/alert";
+import { Alert, AlertDescription } from "@app/components/ui/alert";
 import { toast } from "@app/hooks/useToast";
 import { useRouter } from "next/navigation";
 import { formatAxiosError } from "@app/lib/api";
@@ -210,7 +210,7 @@ export default function ResetPasswordForm({
                     } catch (verificationError) {
                         console.error("Failed to send verification code:", verificationError);
                     }
-                    
+
                     if (redirect) {
                         router.push(`/auth/verify-email?redirect=${redirect}`);
                     } else {
@@ -254,8 +254,8 @@ export default function ResetPasswordForm({
                         {quickstart ? t('completeAccountSetup') : t('passwordReset')}
                     </CardTitle>
                     <CardDescription>
-                        {quickstart 
-                            ? t('completeAccountSetupDescription') 
+                        {quickstart
+                            ? t('completeAccountSetupDescription')
                             : t('passwordResetDescription')
                         }
                     </CardDescription>
@@ -282,8 +282,8 @@ export default function ResetPasswordForm({
                                                 </FormControl>
                                                 <FormMessage />
                                                 <FormDescription>
-                                                    {quickstart 
-                                                        ? t('accountSetupSent') 
+                                                    {quickstart
+                                                        ? t('accountSetupSent')
                                                         : t('passwordResetSent')
                                                     }
                                                 </FormDescription>
@@ -325,8 +325,8 @@ export default function ResetPasswordForm({
                                             render={({ field }) => (
                                                 <FormItem>
                                                     <FormLabel>
-                                                        {quickstart 
-                                                            ? t('accountSetupCode') 
+                                                        {quickstart
+                                                            ? t('accountSetupCode')
                                                             : t('passwordResetCode')
                                                         }
                                                     </FormLabel>
@@ -338,8 +338,8 @@ export default function ResetPasswordForm({
                                                     </FormControl>
                                                     <FormMessage />
                                                     <FormDescription>
-                                                        {quickstart 
-                                                            ? t('accountSetupCodeDescription') 
+                                                        {quickstart
+                                                            ? t('accountSetupCodeDescription')
                                                             : t('passwordResetCodeDescription')
                                                         }
                                                     </FormDescription>
@@ -354,8 +354,8 @@ export default function ResetPasswordForm({
                                         render={({ field }) => (
                                             <FormItem>
                                                 <FormLabel>
-                                                    {quickstart 
-                                                        ? t('passwordCreate') 
+                                                    {quickstart
+                                                        ? t('passwordCreate')
                                                         : t('passwordNew')
                                                     }
                                                 </FormLabel>
@@ -375,8 +375,8 @@ export default function ResetPasswordForm({
                                         render={({ field }) => (
                                             <FormItem>
                                                 <FormLabel>
-                                                    {quickstart 
-                                                        ? t('passwordCreateConfirm') 
+                                                    {quickstart
+                                                        ? t('passwordCreateConfirm')
                                                         : t('passwordNewConfirm')
                                                     }
                                                 </FormLabel>
@@ -490,8 +490,8 @@ export default function ResetPasswordForm({
                                     {isSubmitting && (
                                         <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                                     )}
-                                    {quickstart 
-                                        ? t('accountSetupSubmit') 
+                                    {quickstart
+                                        ? t('accountSetupSubmit')
                                         : t('passwordResetSubmit')
                                     }
                                 </Button>

src/app/auth/reset-password/page.tsx

@@ -1,7 +1,7 @@
 import { verifySession } from "@app/lib/auth/verifySession";
 import { redirect } from "next/navigation";
 import { cache } from "react";
-import ResetPasswordForm from "./ResetPasswordForm";
+import ResetPasswordForm from "@app/components/ResetPasswordForm";
 import Link from "next/link";
 import { cleanRedirect } from "@app/lib/cleanRedirect";
 import { getTranslations } from "next-intl/server";

src/app/auth/resource/[resourceId]/page.tsx

@@ -2,20 +2,20 @@ import {
     GetResourceAuthInfoResponse,
     GetExchangeTokenResponse
 } from "@server/routers/resource";
-import ResourceAuthPortal from "./ResourceAuthPortal";
+import ResourceAuthPortal from "@app/components/ResourceAuthPortal";
 import { internal, priv } from "@app/lib/api";
 import { AxiosResponse } from "axios";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { cache } from "react";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { redirect } from "next/navigation";
-import ResourceNotFound from "./ResourceNotFound";
-import ResourceAccessDenied from "./ResourceAccessDenied";
-import AccessToken from "./AccessToken";
+import ResourceNotFound from "@app/components/ResourceNotFound";
+import ResourceAccessDenied from "@app/components/ResourceAccessDenied";
+import AccessToken from "@app/components/AccessToken";
 import { pullEnv } from "@app/lib/pullEnv";
 import { LoginFormIDP } from "@app/components/LoginForm";
 import { ListIdpsResponse } from "@server/routers/idp";
-import AutoLoginHandler from "./AutoLoginHandler";
+import AutoLoginHandler from "@app/components/AutoLoginHandler";
 
 export const dynamic = "force-dynamic";
 

src/app/auth/signup/page.tsx

@@ -1,4 +1,4 @@
-import SignupForm from "@app/app/auth/signup/SignupForm";
+import SignupForm from "@app/components/SignupForm";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { cleanRedirect } from "@app/lib/cleanRedirect";
 import { pullEnv } from "@app/lib/pullEnv";
@@ -11,7 +11,7 @@ import { getTranslations } from "next-intl/server";
 export const dynamic = "force-dynamic";
 
 export default async function Page(props: {
-    searchParams: Promise<{ 
+    searchParams: Promise<{
         redirect: string | undefined;
         email: string | undefined;
     }>;

src/app/auth/verify-email/page.tsx

@@ -1,4 +1,4 @@
-import VerifyEmailForm from "@app/app/auth/verify-email/VerifyEmailForm";
+import VerifyEmailForm from "@app/components/VerifyEmailForm";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { cleanRedirect } from "@app/lib/cleanRedirect";
 import { pullEnv } from "@app/lib/pullEnv";

src/app/invite/page.tsx

@@ -4,7 +4,7 @@ import { verifySession } from "@app/lib/auth/verifySession";
 import { AcceptInviteResponse } from "@server/routers/user";
 import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
-import InviteStatusCard from "./InviteStatusCard";
+import InviteStatusCard from "../../components/InviteStatusCard";
 import { formatAxiosError } from "@app/lib/api";
 import { getTranslations } from "next-intl/server";
 
@@ -72,14 +72,14 @@ export default async function InvitePage(props: {
     const type = cardType();
 
     if (!user && type === "user_does_not_exist") {
-        const redirectUrl = emailParam 
+        const redirectUrl = emailParam
             ? `/auth/signup?redirect=/invite?token=${params.token}&email=${encodeURIComponent(emailParam)}`
             : `/auth/signup?redirect=/invite?token=${params.token}`;
         redirect(redirectUrl);
     }
 
     if (!user && type === "not_logged_in") {
-        const redirectUrl = emailParam 
+        const redirectUrl = emailParam
             ? `/auth/login?redirect=/invite?token=${params.token}&email=${encodeURIComponent(emailParam)}`
             : `/auth/login?redirect=/invite?token=${params.token}`;
         redirect(redirectUrl);

src/app/s/[accessToken]/page.tsx

@@ -1,4 +1,4 @@
-import AccessToken from "@app/app/auth/resource/[resourceId]/AccessToken";
+import AccessToken from "@app/components/AccessToken";
 
 export default async function ResourceAuthPage(props: {
     params: Promise<{ accessToken: string }>;

src/components/AdminIdpTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { IdpDataTable } from "./AdminIdpDataTable";
+import { IdpDataTable } from "@app/components/AdminIdpDataTable";
 import { Button } from "@app/components/ui/button";
 import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
 import { useState } from "react";

src/components/AdminUsersTable.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { UsersDataTable } from "@app/components/AdminUsersDataTable";
+import { Button } from "@app/components/ui/button";
+import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
+import { toast } from "@app/hooks/useToast";
+import { formatAxiosError } from "@app/lib/api";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useTranslations } from "next-intl";
+import {
+    DropdownMenu,
+    DropdownMenuItem,
+    DropdownMenuContent,
+    DropdownMenuTrigger
+} from "@app/components/ui/dropdown-menu";
+
+export type GlobalUserRow = {
+    id: string;
+    name: string | null;
+    username: string;
+    email: string | null;
+    type: string;
+    idpId: number | null;
+    idpName: string;
+    dateCreated: string;
+    twoFactorEnabled: boolean | null;
+    twoFactorSetupRequested: boolean | null;
+};
+
+type Props = {
+    users: GlobalUserRow[];
+};
+
+export default function UsersTable({ users }: Props) {
+    const router = useRouter();
+    const t = useTranslations();
+
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [selected, setSelected] = useState<GlobalUserRow | null>(null);
+    const [rows, setRows] = useState<GlobalUserRow[]>(users);
+
+    const api = createApiClient(useEnvContext());
+
+    const deleteUser = (id: string) => {
+        api.delete(`/user/${id}`)
+            .catch((e) => {
+                console.error(t("userErrorDelete"), e);
+                toast({
+                    variant: "destructive",
+                    title: t("userErrorDelete"),
+                    description: formatAxiosError(e, t("userErrorDelete"))
+                });
+            })
+            .then(() => {
+                router.refresh();
+                setIsDeleteModalOpen(false);
+
+                const newRows = rows.filter((row) => row.id !== id);
+
+                setRows(newRows);
+            });
+    };
+
+    const columns: ColumnDef<GlobalUserRow>[] = [
+        {
+            accessorKey: "id",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        ID
+                    </Button>
+                );
+            }
+        },
+        {
+            accessorKey: "username",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        {t("username")}
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            }
+        },
+        {
+            accessorKey: "email",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        {t("email")}
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            }
+        },
+        {
+            accessorKey: "name",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        {t("name")}
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            }
+        },
+        {
+            accessorKey: "idpName",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        {t("identityProvider")}
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            }
+        },
+        {
+            accessorKey: "twoFactorEnabled",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        {t("twoFactor")}
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
+            cell: ({ row }) => {
+                const userRow = row.original;
+
+                return (
+                    <div className="flex flex-row items-center gap-2">
+                        <span>
+                            {userRow.twoFactorEnabled ||
+                            userRow.twoFactorSetupRequested ? (
+                                <span className="text-green-500">
+                                    {t("enabled")}
+                                </span>
+                            ) : (
+                                <span>{t("disabled")}</span>
+                            )}
+                        </span>
+                    </div>
+                );
+            }
+        },
+        {
+            id: "actions",
+            cell: ({ row }) => {
+                const r = row.original;
+                return (
+                    <>
+                        <div className="flex items-center justify-end gap-2">
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <Button
+                                        variant="ghost"
+                                        className="h-8 w-8 p-0"
+                                    >
+                                        <span className="sr-only">
+                                            Open menu
+                                        </span>
+                                        <MoreHorizontal className="h-4 w-4" />
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                    <DropdownMenuItem
+                                        onClick={() => {
+                                            setSelected(r);
+                                            setIsDeleteModalOpen(true);
+                                        }}
+                                    >
+                                        {t("delete")}
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                            <Button
+                                variant={"secondary"}
+                                size="sm"
+                                onClick={() => {
+                                    router.push(`/admin/users/${r.id}`);
+                                }}
+                            >
+                                {t("edit")}
+                                <ArrowRight className="ml-2 w-4 h-4" />
+                            </Button>
+                        </div>
+                    </>
+                );
+            }
+        }
+    ];
+
+    return (
+        <>
+            {selected && (
+                <ConfirmDeleteDialog
+                    open={isDeleteModalOpen}
+                    setOpen={(val) => {
+                        setIsDeleteModalOpen(val);
+                        setSelected(null);
+                    }}
+                    dialog={
+                        <div className="space-y-4">
+                            <p>
+                                {t("userQuestionRemove", {
+                                    selectedUser:
+                                        selected?.email ||
+                                        selected?.name ||
+                                        selected?.username
+                                })}
+                            </p>
+
+                            <p>
+                                <b>{t("userMessageRemove")}</b>
+                            </p>
+
+                            <p>{t("userMessageConfirm")}</p>
+                        </div>
+                    }
+                    buttonText={t("userDeleteConfirm")}
+                    onConfirm={async () => deleteUser(selected!.id)}
+                    string={
+                        selected.email || selected.name || selected.username
+                    }
+                    title={t("userDeleteServer")}
+                />
+            )}
+
+            <UsersDataTable columns={columns} data={rows} />
+        </>
+    );
+}

src/components/ApiKeysTable.tsx

@@ -18,7 +18,7 @@ import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import moment from "moment";
-import { ApiKeysDataTable } from "./ApiKeysDataTable";
+import { ApiKeysDataTable } from "@app/components/ApiKeysDataTable";
 import { useTranslations } from "next-intl";
 
 export type ApiKeyRow = {

src/components/ClientsTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { ClientsDataTable } from "./ClientsDataTable";
+import { ClientsDataTable } from "@app/components/ClientsDataTable";
 import {
     DropdownMenu,
     DropdownMenuContent,

src/components/CreateShareLinkForm.tsx

@@ -0,0 +1,549 @@
+"use client";
+
+import { Button } from "@app/components/ui/button";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "@app/components/ui/select";
+import { toast } from "@app/hooks/useToast";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AxiosResponse } from "axios";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import CopyTextBox from "@app/components/CopyTextBox";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "@app/components/Credenza";
+import { useOrgContext } from "@app/hooks/useOrgContext";
+import { formatAxiosError } from "@app/lib/api";
+import { cn } from "@app/lib/cn";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { ListResourcesResponse } from "@server/routers/resource";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
+import { CaretSortIcon } from "@radix-ui/react-icons";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "@app/components/ui/command";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
+import { Checkbox } from "@app/components/ui/checkbox";
+import { GenerateAccessTokenResponse } from "@server/routers/accessToken";
+import { constructShareLink } from "@app/lib/shareLinks";
+import { ShareLinkRow } from "@app/components/ShareLinksTable";
+import { QRCodeCanvas, QRCodeSVG } from "qrcode.react";
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger
+} from "@app/components/ui/collapsible";
+import AccessTokenSection from "@app/components/AccessTokenUsage";
+import { useTranslations } from "next-intl";
+import { toUnicode } from 'punycode';
+
+type FormProps = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    onCreated?: (result: ShareLinkRow) => void;
+};
+
+export default function CreateShareLinkForm({
+    open,
+    setOpen,
+    onCreated
+}: FormProps) {
+    const { org } = useOrgContext();
+
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+
+    const [link, setLink] = useState<string | null>(null);
+    const [accessTokenId, setAccessTokenId] = useState<string | null>(null);
+    const [accessToken, setAccessToken] = useState<string | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [neverExpire, setNeverExpire] = useState(false);
+
+    const [isOpen, setIsOpen] = useState(false);
+    const t = useTranslations();
+
+    const [resources, setResources] = useState<
+        {
+            resourceId: number;
+            name: string;
+            resourceUrl: string;
+        }[]
+    >([]);
+
+    const formSchema = z.object({
+        resourceId: z.number({ message: t('shareErrorSelectResource') }),
+        resourceName: z.string(),
+        resourceUrl: z.string(),
+        timeUnit: z.string(),
+        timeValue: z.coerce.number().int().positive().min(1),
+        title: z.string().optional()
+    });
+
+    const timeUnits = [
+        { unit: "minutes", name: t('minutes') },
+        { unit: "hours", name: t('hours') },
+        { unit: "days", name: t('days') },
+        { unit: "weeks", name: t('weeks') },
+        { unit: "months", name: t('months') },
+        { unit: "years", name: t('years') }
+    ];
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            timeUnit: "days",
+            timeValue: 30,
+            title: ""
+        }
+    });
+
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+
+        async function fetchResources() {
+            const res = await api
+                .get<
+                    AxiosResponse<ListResourcesResponse>
+                >(`/org/${org?.org.orgId}/resources`)
+                .catch((e) => {
+                    console.error(e);
+                    toast({
+                        variant: "destructive",
+                        title: t('shareErrorFetchResource'),
+                        description: formatAxiosError(
+                            e,
+                            t('shareErrorFetchResourceDescription')
+                        )
+                    });
+                });
+
+            if (res?.status === 200) {
+                setResources(
+                    res.data.data.resources
+                        .filter((r) => {
+                            return r.http;
+                        })
+                        .map((r) => ({
+                            resourceId: r.resourceId,
+                            name: r.name,
+                            resourceUrl: `${r.ssl ? "https://" : "http://"}${toUnicode(r.fullDomain || "")}/`
+                        }))
+                );
+            }
+        }
+
+        fetchResources();
+    }, [open]);
+
+    async function onSubmit(values: z.infer<typeof formSchema>) {
+        setLoading(true);
+
+        // convert time to seconds
+        let timeInSeconds = values.timeValue;
+        switch (values.timeUnit) {
+            case "minutes":
+                timeInSeconds *= 60;
+                break;
+            case "hours":
+                timeInSeconds *= 60 * 60;
+                break;
+            case "days":
+                timeInSeconds *= 60 * 60 * 24;
+                break;
+            case "weeks":
+                timeInSeconds *= 60 * 60 * 24 * 7;
+                break;
+            case "months":
+                timeInSeconds *= 60 * 60 * 24 * 30;
+                break;
+            case "years":
+                timeInSeconds *= 60 * 60 * 24 * 365;
+                break;
+        }
+
+        const res = await api
+            .post<AxiosResponse<GenerateAccessTokenResponse>>(
+                `/resource/${values.resourceId}/access-token`,
+                {
+                    validForSeconds: neverExpire ? undefined : timeInSeconds,
+                    title:
+                        values.title ||
+                        t('shareLink', {resource: (values.resourceName || "Resource" + values.resourceId)})
+                }
+            )
+            .catch((e) => {
+                console.error(e);
+                toast({
+                    variant: "destructive",
+                    title: t('shareErrorCreate'),
+                    description: formatAxiosError(
+                        e,
+                        t('shareErrorCreateDescription')
+                    )
+                });
+            });
+
+        if (res && res.data.data.accessTokenId) {
+            const token = res.data.data;
+            const link = constructShareLink(token.accessToken);
+            setLink(link);
+
+            setAccessToken(token.accessToken);
+            setAccessTokenId(token.accessTokenId);
+
+            const resource = resources.find(
+                (r) => r.resourceId === values.resourceId
+            );
+
+            onCreated?.({
+                accessTokenId: token.accessTokenId,
+                resourceId: token.resourceId,
+                resourceName: values.resourceName,
+                title: token.title,
+                createdAt: token.createdAt,
+                expiresAt: token.expiresAt
+            });
+        }
+
+        setLoading(false);
+    }
+
+    function getSelectedResourceName(id: number) {
+        const resource = resources.find((r) => r.resourceId === id);
+        return `${resource?.name}`;
+    }
+
+    return (
+        <>
+            <Credenza
+                open={open}
+                onOpenChange={(val) => {
+                    setOpen(val);
+                    setLink(null);
+                    setLoading(false);
+                    form.reset();
+                }}
+            >
+                <CredenzaContent>
+                    <CredenzaHeader>
+                        <CredenzaTitle>{t('shareCreate')}</CredenzaTitle>
+                        <CredenzaDescription>
+                            {t('shareCreateDescription')}
+                        </CredenzaDescription>
+                    </CredenzaHeader>
+                    <CredenzaBody>
+                        <div className="space-y-4">
+                            {!link && (
+                                <Form {...form}>
+                                    <form
+                                        onSubmit={form.handleSubmit(onSubmit)}
+                                        className="space-y-4"
+                                        id="share-link-form"
+                                    >
+                                        <FormField
+                                            control={form.control}
+                                            name="resourceId"
+                                            render={({ field }) => (
+                                                <FormItem className="flex flex-col">
+                                                    <FormLabel>
+                                                        {t('resource')}
+                                                    </FormLabel>
+                                                    <Popover>
+                                                        <PopoverTrigger asChild>
+                                                            <FormControl>
+                                                                <Button
+                                                                    variant="outline"
+                                                                    role="combobox"
+                                                                    className={cn(
+                                                                        "justify-between",
+                                                                        !field.value &&
+                                                                            "text-muted-foreground"
+                                                                    )}
+                                                                >
+                                                                    {field.value
+                                                                        ? getSelectedResourceName(
+                                                                              field.value
+                                                                          )
+                                                                        : t('resourceSelect')}
+                                                                    <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                                                </Button>
+                                                            </FormControl>
+                                                        </PopoverTrigger>
+                                                        <PopoverContent className="p-0">
+                                                            <Command>
+                                                                <CommandInput placeholder={t('resourceSearch')} />
+                                                                <CommandList>
+                                                                    <CommandEmpty>
+                                                                        {t('resourcesNotFound')}
+                                                                    </CommandEmpty>
+                                                                    <CommandGroup>
+                                                                        {resources.map(
+                                                                            (
+                                                                                r
+                                                                            ) => (
+                                                                                <CommandItem
+                                                                                    value={`${r.name}:${r.resourceId}`}
+                                                                                    key={
+                                                                                        r.resourceId
+                                                                                    }
+                                                                                    onSelect={() => {
+                                                                                        form.setValue(
+                                                                                            "resourceId",
+                                                                                            r.resourceId
+                                                                                        );
+                                                                                        form.setValue(
+                                                                                            "resourceName",
+                                                                                            r.name
+                                                                                        );
+                                                                                        form.setValue(
+                                                                                            "resourceUrl",
+                                                                                            r.resourceUrl
+                                                                                        );
+                                                                                    }}
+                                                                                >
+                                                                                    <CheckIcon
+                                                                                        className={cn(
+                                                                                            "mr-2 h-4 w-4",
+                                                                                            r.resourceId ===
+                                                                                                field.value
+                                                                                                ? "opacity-100"
+                                                                                                : "opacity-0"
+                                                                                        )}
+                                                                                    />
+                                                                                    {`${r.name}`}
+                                                                                </CommandItem>
+                                                                            )
+                                                                        )}
+                                                                    </CommandGroup>
+                                                                </CommandList>
+                                                            </Command>
+                                                        </PopoverContent>
+                                                    </Popover>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+
+                                        <FormField
+                                            control={form.control}
+                                            name="title"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {t('shareTitleOptional')}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input {...field} />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+
+                                        <div className="space-y-4">
+                                            <div className="space-y-2">
+                                                <FormLabel>{t('expireIn')}</FormLabel>
+                                                <div className="grid grid-cols-2 gap-4">
+                                                    <FormField
+                                                        control={form.control}
+                                                        name="timeUnit"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <Select
+                                                                    onValueChange={
+                                                                        field.onChange
+                                                                    }
+                                                                    defaultValue={field.value.toString()}
+                                                                >
+                                                                    <FormControl>
+                                                                        <SelectTrigger className="w-full">
+                                                                            <SelectValue placeholder={t('selectDuration')} />
+                                                                        </SelectTrigger>
+                                                                    </FormControl>
+                                                                    <SelectContent>
+                                                                        {timeUnits.map(
+                                                                            (
+                                                                                option
+                                                                            ) => (
+                                                                                <SelectItem
+                                                                                    key={
+                                                                                        option.unit
+                                                                                    }
+                                                                                    value={
+                                                                                        option.unit
+                                                                                    }
+                                                                                >
+                                                                                    {
+                                                                                        option.name
+                                                                                    }
+                                                                                </SelectItem>
+                                                                            )
+                                                                        )}
+                                                                    </SelectContent>
+                                                                </Select>
+                                                                <FormMessage />
+                                                            </FormItem>
+                                                        )}
+                                                    />
+
+                                                    <FormField
+                                                        control={form.control}
+                                                        name="timeValue"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        type="number"
+                                                                        min={1}
+                                                                        {...field}
+                                                                    />
+                                                                </FormControl>
+                                                                <FormMessage />
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                </div>
+                                            </div>
+
+                                            <div className="flex items-center space-x-2">
+                                                <Checkbox
+                                                    id="terms"
+                                                    checked={neverExpire}
+                                                    onCheckedChange={(val) =>
+                                                        setNeverExpire(
+                                                            val as boolean
+                                                        )
+                                                    }
+                                                />
+                                                <label
+                                                    htmlFor="terms"
+                                                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                                >
+                                                    {t('neverExpire')}
+                                                </label>
+                                            </div>
+
+                                            <p className="text-sm text-muted-foreground">
+                                                {t('shareExpireDescription')}
+                                            </p>
+                                        </div>
+                                    </form>
+                                </Form>
+                            )}
+                            {link && (
+                                <div className="max-w-md space-y-4">
+                                    <p>
+                                        {t('shareSeeOnce')}
+                                    </p>
+                                    <p>
+                                        {t('shareAccessHint')}
+                                    </p>
+
+                                    <div className="h-[250px] w-full mx-auto flex items-center justify-center">
+                                        <QRCodeCanvas value={link} size={200} />
+                                    </div>
+
+                                    <Collapsible
+                                        open={isOpen}
+                                        onOpenChange={setIsOpen}
+                                        className="space-y-2"
+                                    >
+                                        <div className="mx-auto">
+                                            <CopyTextBox
+                                                text={link}
+                                                wrapText={false}
+                                            />
+                                        </div>
+                                        <div className="flex items-center justify-between space-x-4">
+                                            <CollapsibleTrigger asChild>
+                                                <Button
+                                                    variant="text"
+                                                    size="sm"
+                                                    className="p-0 flex items-center justify-between w-full"
+                                                >
+                                                    <h4 className="text-sm font-semibold">
+                                                        {t('shareTokenUsage')}
+                                                    </h4>
+                                                    <div>
+                                                        <ChevronsUpDown className="h-4 w-4" />
+                                                        <span className="sr-only">
+                                                            {t('toggle')}
+                                                        </span>
+                                                    </div>
+                                                </Button>
+                                            </CollapsibleTrigger>
+                                        </div>
+                                        <CollapsibleContent className="space-y-2">
+                                            {accessTokenId && accessToken && (
+                                                <div className="space-y-2">
+                                                    <div className="mx-auto">
+                                                        <AccessTokenSection
+                                                            tokenId={
+                                                                accessTokenId
+                                                            }
+                                                            token={accessToken}
+                                                            resourceUrl={form.getValues(
+                                                                "resourceUrl"
+                                                            )}
+                                                        />
+                                                    </div>
+                                                </div>
+                                            )}
+                                        </CollapsibleContent>
+                                    </Collapsible>
+                                </div>
+                            )}
+                        </div>
+                    </CredenzaBody>
+                    <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">{t('close')}</Button>
+                        </CredenzaClose>
+                        <Button
+                            type="button"
+                            onClick={form.handleSubmit(onSubmit)}
+                            loading={loading}
+                            disabled={link !== null || loading}
+                        >
+                            {t('createLink')}
+                        </Button>
+                    </CredenzaFooter>
+                </CredenzaContent>
+            </Credenza>
+        </>
+    );
+}

src/components/DeleteRoleForm.tsx

@@ -34,7 +34,7 @@ import {
     SelectTrigger,
     SelectValue
 } from "@app/components/ui/select";
-import { RoleRow } from "./RolesTable";
+import { RoleRow } from "@app/components/RolesTable";
 import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";

src/components/DomainsTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { DomainsDataTable } from "./DomainsDataTable";
+import { DomainsDataTable } from "@app/components/DomainsDataTable";
 import { Button } from "@app/components/ui/button";
 import { ArrowUpDown } from "lucide-react";
 import { useState } from "react";
@@ -12,7 +12,7 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
 import { Badge } from "@app/components/ui/badge";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
-import CreateDomainForm from "./CreateDomainForm";
+import CreateDomainForm from "@app/components/CreateDomainForm";
 import { useToast } from "@app/hooks/useToast";
 import { useOrgContext } from "@app/hooks/useOrgContext";
 

src/components/IdpCreateWizard.tsx

@@ -0,0 +1,429 @@
+"use client";
+
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionForm,
+    SettingsSectionGrid,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "@app/components/Settings";
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Input } from "@app/components/ui/input";
+import { Checkbox } from "@app/components/ui/checkbox";
+import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
+import { InfoIcon, ExternalLink } from "lucide-react";
+import { StrategySelect } from "@app/components/StrategySelect";
+import { SwitchInput } from "@app/components/SwitchInput";
+import { Badge } from "@app/components/ui/badge";
+import { useTranslations } from "next-intl";
+
+type CreateIdpFormValues = {
+    name: string;
+    type: "oidc";
+    clientId: string;
+    clientSecret: string;
+    authUrl: string;
+    tokenUrl: string;
+    identifierPath: string;
+    emailPath?: string;
+    namePath?: string;
+    scopes: string;
+    autoProvision: boolean;
+};
+
+type IdpCreateWizardProps = {
+    onSubmit: (data: CreateIdpFormValues) => void | Promise<void>;
+    defaultValues?: Partial<CreateIdpFormValues>;
+    loading?: boolean;
+};
+
+export function IdpCreateWizard({ onSubmit, defaultValues, loading = false }: IdpCreateWizardProps) {
+    const t = useTranslations();
+
+    const createIdpFormSchema = z.object({
+        name: z.string().min(2, { message: t('nameMin', {len: 2}) }),
+        type: z.enum(["oidc"]),
+        clientId: z.string().min(1, { message: t('idpClientIdRequired') }),
+        clientSecret: z.string().min(1, { message: t('idpClientSecretRequired') }),
+        authUrl: z.string().url({ message: t('idpErrorAuthUrlInvalid') }),
+        tokenUrl: z.string().url({ message: t('idpErrorTokenUrlInvalid') }),
+        identifierPath: z
+            .string()
+            .min(1, { message: t('idpPathRequired') }),
+        emailPath: z.string().optional(),
+        namePath: z.string().optional(),
+        scopes: z.string().min(1, { message: t('idpScopeRequired') }),
+        autoProvision: z.boolean().default(false)
+    });
+
+    interface ProviderTypeOption {
+        id: "oidc";
+        title: string;
+        description: string;
+    }
+
+    const providerTypes: ReadonlyArray<ProviderTypeOption> = [
+        {
+            id: "oidc",
+            title: "OAuth2/OIDC",
+            description: t('idpOidcDescription')
+        }
+    ];
+
+    const form = useForm<CreateIdpFormValues>({
+        resolver: zodResolver(createIdpFormSchema),
+        defaultValues: {
+            name: "",
+            type: "oidc",
+            clientId: "",
+            clientSecret: "",
+            authUrl: "",
+            tokenUrl: "",
+            identifierPath: "sub",
+            namePath: "name",
+            emailPath: "email",
+            scopes: "openid profile email",
+            autoProvision: false,
+            ...defaultValues
+        }
+    });
+
+    const handleSubmit = (data: CreateIdpFormValues) => {
+        onSubmit(data);
+    };
+
+    return (
+        <SettingsContainer>
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t('idpTitle')}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t('idpCreateSettingsDescription')}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+                <SettingsSectionBody>
+                    <SettingsSectionForm>
+                        <Form {...form}>
+                            <form
+                                className="space-y-4"
+                                id="create-idp-form"
+                                onSubmit={form.handleSubmit(handleSubmit)}
+                            >
+                                <FormField
+                                    control={form.control}
+                                    name="name"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>{t('name')}</FormLabel>
+                                            <FormControl>
+                                                <Input {...field} disabled={loading} />
+                                            </FormControl>
+                                            <FormDescription>
+                                                {t('idpDisplayName')}
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+
+                                <div className="flex items-start mb-0">
+                                    <SwitchInput
+                                        id="auto-provision-toggle"
+                                        label={t('idpAutoProvisionUsers')}
+                                        defaultChecked={form.getValues(
+                                            "autoProvision"
+                                        )}
+                                        onCheckedChange={(checked) => {
+                                            form.setValue(
+                                                "autoProvision",
+                                                checked
+                                            );
+                                        }}
+                                        disabled={loading}
+                                    />
+                                </div>
+                                <span className="text-sm text-muted-foreground">
+                                    {t('idpAutoProvisionUsersDescription')}
+                                </span>
+                            </form>
+                        </Form>
+                    </SettingsSectionForm>
+                </SettingsSectionBody>
+            </SettingsSection>
+
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t('idpType')}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t('idpTypeDescription')}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+                <SettingsSectionBody>
+                    <StrategySelect
+                        options={providerTypes}
+                        defaultValue={form.getValues("type")}
+                        onChange={(value) => {
+                            form.setValue("type", value as "oidc");
+                        }}
+                        cols={3}
+                    />
+                </SettingsSectionBody>
+            </SettingsSection>
+
+            {form.watch("type") === "oidc" && (
+                <SettingsSectionGrid cols={2}>
+                    <SettingsSection>
+                        <SettingsSectionHeader>
+                            <SettingsSectionTitle>
+                                {t('idpOidcConfigure')}
+                            </SettingsSectionTitle>
+                            <SettingsSectionDescription>
+                                {t('idpOidcConfigureDescription')}
+                            </SettingsSectionDescription>
+                        </SettingsSectionHeader>
+                        <SettingsSectionBody>
+                            <Form {...form}>
+                                <form
+                                    className="space-y-4"
+                                    id="create-idp-form"
+                                    onSubmit={form.handleSubmit(handleSubmit)}
+                                >
+                                    <FormField
+                                        control={form.control}
+                                        name="clientId"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t('idpClientId')}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input {...field} disabled={loading} />
+                                                </FormControl>
+                                                <FormDescription>
+                                                    {t('idpClientIdDescription')}
+                                                </FormDescription>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    <FormField
+                                        control={form.control}
+                                        name="clientSecret"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t('idpClientSecret')}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input
+                                                        type="password"
+                                                        {...field}
+                                                        disabled={loading}
+                                                    />
+                                                </FormControl>
+                                                <FormDescription>
+                                                    {t('idpClientSecretDescription')}
+                                                </FormDescription>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    <FormField
+                                        control={form.control}
+                                        name="authUrl"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t('idpAuthUrl')}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input
+                                                        placeholder="https://your-idp.com/oauth2/authorize"
+                                                        {...field}
+                                                        disabled={loading}
+                                                    />
+                                                </FormControl>
+                                                <FormDescription>
+                                                    {t('idpAuthUrlDescription')}
+                                                </FormDescription>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    <FormField
+                                        control={form.control}
+                                        name="tokenUrl"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t('idpTokenUrl')}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input
+                                                        placeholder="https://your-idp.com/oauth2/token"
+                                                        {...field}
+                                                        disabled={loading}
+                                                    />
+                                                </FormControl>
+                                                <FormDescription>
+                                                    {t('idpTokenUrlDescription')}
+                                                </FormDescription>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </form>
+                            </Form>
+
+                            <Alert variant="neutral">
+                                <InfoIcon className="h-4 w-4" />
+                                <AlertTitle className="font-semibold">
+                                    {t('idpOidcConfigureAlert')}
+                                </AlertTitle>
+                                <AlertDescription>
+                                    {t('idpOidcConfigureAlertDescription')}
+                                </AlertDescription>
+                            </Alert>
+                        </SettingsSectionBody>
+                    </SettingsSection>
+
+                    <SettingsSection>
+                        <SettingsSectionHeader>
+                            <SettingsSectionTitle>
+                                {t('idpToken')}
+                            </SettingsSectionTitle>
+                            <SettingsSectionDescription>
+                                {t('idpTokenDescription')}
+                            </SettingsSectionDescription>
+                        </SettingsSectionHeader>
+                        <SettingsSectionBody>
+                            <Form {...form}>
+                                <form
+                                    className="space-y-4"
+                                    id="create-idp-form"
+                                    onSubmit={form.handleSubmit(handleSubmit)}
+                                >
+                                    <Alert variant="neutral">
+                                        <InfoIcon className="h-4 w-4" />
+                                        <AlertTitle className="font-semibold">
+                                            {t('idpJmespathAbout')}
+                                        </AlertTitle>
+                                        <AlertDescription>
+                                            {t('idpJmespathAboutDescription')}{" "}
+                                            <a
+                                                href="https://jmespath.org"
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                className="text-primary hover:underline inline-flex items-center"
+                                            >
+                                                {t('idpJmespathAboutDescriptionLink')}{" "}
+                                                <ExternalLink className="ml-1 h-4 w-4" />
+                                            </a>
+                                        </AlertDescription>
+                                    </Alert>
+
+                                    <FormField
+                                        control={form.control}
+                                        name="identifierPath"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t('idpJmespathLabel')}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input {...field} disabled={loading} />
+                                                </FormControl>
+                                                <FormDescription>
+                                                    {t('idpJmespathLabelDescription')}
+                                                </FormDescription>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    <FormField
+                                        control={form.control}
+                                        name="emailPath"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t('idpJmespathEmailPathOptional')}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input {...field} disabled={loading} />
+                                                </FormControl>
+                                                <FormDescription>
+                                                    {t('idpJmespathEmailPathOptionalDescription')}
+                                                </FormDescription>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    <FormField
+                                        control={form.control}
+                                        name="namePath"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t('idpJmespathNamePathOptional')}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input {...field} disabled={loading} />
+                                                </FormControl>
+                                                <FormDescription>
+                                                    {t('idpJmespathNamePathOptionalDescription')}
+                                                </FormDescription>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    <FormField
+                                        control={form.control}
+                                        name="scopes"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t('idpOidcConfigureScopes')}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input {...field} disabled={loading} />
+                                                </FormControl>
+                                                <FormDescription>
+                                                    {t('idpOidcConfigureScopesDescription')}
+                                                </FormDescription>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </form>
+                            </Form>
+                        </SettingsSectionBody>
+                    </SettingsSection>
+                </SettingsSectionGrid>
+            )}
+        </SettingsContainer>
+    );
+}

src/components/InvitationsTable.tsx

@@ -9,10 +9,10 @@ import {
 } from "@app/components/ui/dropdown-menu";
 import { Button } from "@app/components/ui/button";
 import { MoreHorizontal } from "lucide-react";
-import { InvitationsDataTable } from "./InvitationsDataTable";
+import { InvitationsDataTable } from "@app/components/InvitationsDataTable";
 import { useState } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
-import RegenerateInvitationForm from "./RegenerateInvitationForm";
+import RegenerateInvitationForm from "@app/components/RegenerateInvitationForm";
 import { useOrgContext } from "@app/hooks/useOrgContext";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient } from "@app/lib/api";

src/components/OrgApiKeysTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { OrgApiKeysDataTable } from "./OrgApiKeysDataTable";
+import { OrgApiKeysDataTable } from "@app/components/OrgApiKeysDataTable";
 import {
     DropdownMenu,
     DropdownMenuContent,

src/components/PolicyTable.tsx

@@ -9,7 +9,7 @@ import {
     Pencil,
     ArrowRight
 } from "lucide-react";
-import { PolicyDataTable } from "./PolicyDataTable";
+import { PolicyDataTable } from "@app/components/PolicyDataTable";
 import { Badge } from "@app/components/ui/badge";
 import {
     DropdownMenu,

src/components/ResetPasswordForm.tsx

@@ -0,0 +1,533 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle
+} from "@/components/ui/card";
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+    InputOTP,
+    InputOTPGroup,
+    InputOTPSlot
+} from "@/components/ui/input-otp";
+import { AxiosResponse } from "axios";
+import {
+    RequestPasswordResetBody,
+    RequestPasswordResetResponse,
+    ResetPasswordBody,
+    ResetPasswordResponse
+} from "@server/routers/auth";
+import { Loader2 } from "lucide-react";
+import { Alert, AlertDescription } from "./ui/alert";
+import { toast } from "@app/hooks/useToast";
+import { useRouter } from "next/navigation";
+import { formatAxiosError } from "@app/lib/api";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+import { passwordSchema } from "@server/auth/passwordSchema";
+import { cleanRedirect } from "@app/lib/cleanRedirect";
+import { useTranslations } from "next-intl";
+
+const requestSchema = z.object({
+    email: z.string().email()
+});
+
+export type ResetPasswordFormProps = {
+    emailParam?: string;
+    tokenParam?: string;
+    redirect?: string;
+    quickstart?: boolean;
+};
+
+export default function ResetPasswordForm({
+    emailParam,
+    tokenParam,
+    redirect,
+    quickstart
+}: ResetPasswordFormProps) {
+    const router = useRouter();
+
+    const [error, setError] = useState<string | null>(null);
+    const [successMessage, setSuccessMessage] = useState<string | null>(null);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const t = useTranslations();
+
+    function getState() {
+        if (emailParam && !tokenParam) {
+            return "request";
+        }
+
+        if (emailParam && tokenParam) {
+            return "reset";
+        }
+
+        return "request";
+    }
+
+    const [state, setState] = useState<"request" | "reset" | "mfa">(getState());
+
+    const api = createApiClient(useEnvContext());
+
+    const formSchema = z
+        .object({
+            email: z.string().email({ message: t('emailInvalid') }),
+            token: z.string().min(8, { message: t('tokenInvalid') }),
+            password: passwordSchema,
+            confirmPassword: passwordSchema
+        })
+        .refine((data) => data.password === data.confirmPassword, {
+            path: ["confirmPassword"],
+            message: t('passwordNotMatch')
+        });
+
+    const mfaSchema = z.object({
+        code: z.string().length(6, { message: t('pincodeInvalid') })
+    });
+
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            email: emailParam || "",
+            token: tokenParam || "",
+            password: "",
+            confirmPassword: ""
+        }
+    });
+
+    const mfaForm = useForm<z.infer<typeof mfaSchema>>({
+        resolver: zodResolver(mfaSchema),
+        defaultValues: {
+            code: ""
+        }
+    });
+
+    const requestForm = useForm<z.infer<typeof requestSchema>>({
+        resolver: zodResolver(requestSchema),
+        defaultValues: {
+            email: emailParam || ""
+        }
+    });
+
+    async function onRequest(data: z.infer<typeof requestSchema>) {
+        const { email } = data;
+
+        setIsSubmitting(true);
+
+        const res = await api
+            .post<AxiosResponse<RequestPasswordResetResponse>>(
+                "/auth/reset-password/request",
+                {
+                    email
+                } as RequestPasswordResetBody
+            )
+            .catch((e) => {
+                setError(formatAxiosError(e, t('errorOccurred')));
+                console.error(t('passwordErrorRequestReset'), e);
+                setIsSubmitting(false);
+            });
+
+        if (res && res.data?.data) {
+            setError(null);
+            setState("reset");
+            setIsSubmitting(false);
+            form.setValue("email", email);
+        }
+    }
+
+    async function onReset(data: any) {
+        setIsSubmitting(true);
+
+        const { password, email, token } = form.getValues();
+        const { code } = mfaForm.getValues();
+
+        const res = await api
+            .post<AxiosResponse<ResetPasswordResponse>>(
+                "/auth/reset-password",
+                {
+                    email,
+                    token,
+                    newPassword: password,
+                    code
+                } as ResetPasswordBody
+            )
+            .catch((e) => {
+                setError(formatAxiosError(e, t('errorOccurred')));
+                console.error(t('passwordErrorReset'), e);
+                setIsSubmitting(false);
+            });
+
+        console.log(res);
+
+        if (res) {
+            setError(null);
+
+            if (res.data.data?.codeRequested) {
+                setState("mfa");
+                setIsSubmitting(false);
+                mfaForm.reset();
+                return;
+            }
+
+            setSuccessMessage(quickstart ? t('accountSetupSuccess') : t('passwordResetSuccess'));
+
+            // Auto-login after successful password reset
+            try {
+                const loginRes = await api.post("/auth/login", {
+                    email: form.getValues("email"),
+                    password: form.getValues("password")
+                });
+
+                if (loginRes.data.data?.codeRequested) {
+                    if (redirect) {
+                        router.push(`/auth/login?redirect=${redirect}`);
+                    } else {
+                        router.push("/auth/login");
+                    }
+                    return;
+                }
+
+                if (loginRes.data.data?.emailVerificationRequired) {
+                    try {
+                        await api.post("/auth/verify-email/request");
+                    } catch (verificationError) {
+                        console.error("Failed to send verification code:", verificationError);
+                    }
+
+                    if (redirect) {
+                        router.push(`/auth/verify-email?redirect=${redirect}`);
+                    } else {
+                        router.push("/auth/verify-email");
+                    }
+                    return;
+                }
+
+                // Login successful, redirect
+                setTimeout(() => {
+                    if (redirect) {
+                        const safe = cleanRedirect(redirect);
+                        router.push(safe);
+                    } else {
+                        router.push("/");
+                    }
+                    setIsSubmitting(false);
+                }, 1500);
+
+            } catch (loginError) {
+                // Auto-login failed, but password reset was successful
+                console.error("Auto-login failed:", loginError);
+                setTimeout(() => {
+                    if (redirect) {
+                        const safe = cleanRedirect(redirect);
+                        router.push(safe);
+                    } else {
+                        router.push("/login");
+                    }
+                    setIsSubmitting(false);
+                }, 1500);
+            }
+        }
+    }
+
+    return (
+        <div>
+            <Card className="w-full max-w-md">
+                <CardHeader>
+                    <CardTitle>
+                        {quickstart ? t('completeAccountSetup') : t('passwordReset')}
+                    </CardTitle>
+                    <CardDescription>
+                        {quickstart
+                            ? t('completeAccountSetupDescription')
+                            : t('passwordResetDescription')
+                        }
+                    </CardDescription>
+                </CardHeader>
+                <CardContent>
+                    <div className="space-y-4">
+                        {state === "request" && (
+                            <Form {...requestForm}>
+                                <form
+                                    onSubmit={requestForm.handleSubmit(
+                                        onRequest
+                                    )}
+                                    className="space-y-4"
+                                    id="form"
+                                >
+                                    <FormField
+                                        control={requestForm.control}
+                                        name="email"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>{t('email')}</FormLabel>
+                                                <FormControl>
+                                                    <Input {...field} />
+                                                </FormControl>
+                                                <FormMessage />
+                                                <FormDescription>
+                                                    {quickstart
+                                                        ? t('accountSetupSent')
+                                                        : t('passwordResetSent')
+                                                    }
+                                                </FormDescription>
+                                            </FormItem>
+                                        )}
+                                    />
+                                </form>
+                            </Form>
+                        )}
+
+                        {state === "reset" && (
+                            <Form {...form}>
+                                <form
+                                    onSubmit={form.handleSubmit(onReset)}
+                                    className="space-y-4"
+                                    id="form"
+                                >
+                                    <FormField
+                                        control={form.control}
+                                        name="email"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>{t('email')}</FormLabel>
+                                                <FormControl>
+                                                    <Input
+                                                        {...field}
+                                                        disabled
+                                                    />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    {!tokenParam && (
+                                        <FormField
+                                            control={form.control}
+                                            name="token"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>
+                                                        {quickstart
+                                                            ? t('accountSetupCode')
+                                                            : t('passwordResetCode')
+                                                        }
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Input
+                                                            type="password"
+                                                            {...field}
+                                                        />
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                    <FormDescription>
+                                                        {quickstart
+                                                            ? t('accountSetupCodeDescription')
+                                                            : t('passwordResetCodeDescription')
+                                                        }
+                                                    </FormDescription>
+                                                </FormItem>
+                                            )}
+                                        />
+                                    )}
+
+                                    <FormField
+                                        control={form.control}
+                                        name="password"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {quickstart
+                                                        ? t('passwordCreate')
+                                                        : t('passwordNew')
+                                                    }
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input
+                                                        type="password"
+                                                        {...field}
+                                                    />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                    <FormField
+                                        control={form.control}
+                                        name="confirmPassword"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {quickstart
+                                                        ? t('passwordCreateConfirm')
+                                                        : t('passwordNewConfirm')
+                                                    }
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <Input
+                                                        type="password"
+                                                        {...field}
+                                                    />
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </form>
+                            </Form>
+                        )}
+
+                        {state === "mfa" && (
+                            <Form {...mfaForm}>
+                                <form
+                                    onSubmit={mfaForm.handleSubmit(onReset)}
+                                    className="space-y-4"
+                                    id="form"
+                                >
+                                    <FormField
+                                        control={mfaForm.control}
+                                        name="code"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormLabel>
+                                                    {t('pincodeAuth')}
+                                                </FormLabel>
+                                                <FormControl>
+                                                    <div className="flex justify-center">
+                                                        <InputOTP
+                                                            maxLength={6}
+                                                            {...field}
+                                                            pattern={
+                                                                REGEXP_ONLY_DIGITS_AND_CHARS
+                                                            }
+                                                        >
+                                                            <InputOTPGroup>
+                                                                <InputOTPSlot
+                                                                    index={0}
+                                                                />
+                                                                <InputOTPSlot
+                                                                    index={1}
+                                                                />
+                                                                <InputOTPSlot
+                                                                    index={2}
+                                                                />
+                                                                <InputOTPSlot
+                                                                    index={3}
+                                                                />
+                                                                <InputOTPSlot
+                                                                    index={4}
+                                                                />
+                                                                <InputOTPSlot
+                                                                    index={5}
+                                                                />
+                                                            </InputOTPGroup>
+                                                        </InputOTP>
+                                                    </div>
+                                                </FormControl>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </form>
+                            </Form>
+                        )}
+
+                        {error && (
+                            <Alert variant="destructive">
+                                <AlertDescription>{error}</AlertDescription>
+                            </Alert>
+                        )}
+
+                        {successMessage && (
+                            <Alert variant="success">
+                                <AlertDescription>
+                                    {successMessage}
+                                </AlertDescription>
+                            </Alert>
+                        )}
+
+                        <div className="space-y-4">
+                            {(state === "reset" || state === "mfa") && (
+                                <Button
+                                    type="submit"
+                                    form="form"
+                                    className="w-full"
+                                    disabled={isSubmitting}
+                                >
+                                    {isSubmitting && (
+                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                    )}
+                                    {state === "reset"
+                                        ? (quickstart ? t('completeSetup') : t('passwordReset'))
+                                        : t('pincodeSubmit2')}
+                                </Button>
+                            )}
+
+                            {state === "request" && (
+                                <Button
+                                    type="submit"
+                                    form="form"
+                                    className="w-full"
+                                    disabled={isSubmitting}
+                                >
+                                    {isSubmitting && (
+                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                    )}
+                                    {quickstart
+                                        ? t('accountSetupSubmit')
+                                        : t('passwordResetSubmit')
+                                    }
+                                </Button>
+                            )}
+
+                            {state === "mfa" && (
+                                <Button
+                                    type="button"
+                                    className="w-full"
+                                    variant="outline"
+                                    onClick={() => {
+                                        setState("reset");
+                                        mfaForm.reset();
+                                    }}
+                                >
+                                    {t('passwordBack')}
+                                </Button>
+                            )}
+
+                            {(state === "mfa" || state === "reset") && (
+                                <Button
+                                    type="button"
+                                    className="w-full"
+                                    variant="outline"
+                                    onClick={() => {
+                                        setState("request");
+                                        form.reset();
+                                    }}
+                                >
+                                    {t('backToEmail')}
+                                </Button>
+                            )}
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

src/components/ResourceAuthPortal.tsx

@@ -38,7 +38,7 @@ import {
     AuthWithPasswordResponse,
     AuthWithWhitelistResponse
 } from "@server/routers/resource";
-import ResourceAccessDenied from "./ResourceAccessDenied";
+import ResourceAccessDenied from "@app/components/ResourceAccessDenied";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";

src/components/RolesTable.tsx

@@ -13,10 +13,10 @@ import { useState } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { useOrgContext } from "@app/hooks/useOrgContext";
 import { toast } from "@app/hooks/useToast";
-import { RolesDataTable } from "./RolesDataTable";
+import { RolesDataTable } from "@app/components/RolesDataTable";
 import { Role } from "@server/db";
-import CreateRoleForm from "./CreateRoleForm";
-import DeleteRoleForm from "./DeleteRoleForm";
+import CreateRoleForm from "@app/components/CreateRoleForm";
+import DeleteRoleForm from "@app/components/DeleteRoleForm";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useTranslations } from "next-intl";

src/components/ShareLinksTable.tsx

@@ -0,0 +1,298 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { ShareLinksDataTable } from "@app/components/ShareLinksDataTable";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from "@app/components/ui/dropdown-menu";
+import { Button } from "@app/components/ui/button";
+import {
+    Copy,
+    ArrowRight,
+    ArrowUpDown,
+    MoreHorizontal,
+    Check,
+    ArrowUpRight,
+    ShieldOff,
+    ShieldCheck
+} from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+// import CreateResourceForm from "./CreateResourceForm";
+import { useState } from "react";
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
+import { formatAxiosError } from "@app/lib/api";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { ArrayElement } from "@server/types/ArrayElement";
+import { ListAccessTokensResponse } from "@server/routers/accessToken";
+import moment from "moment";
+import CreateShareLinkForm from "@app/components/CreateShareLinkForm";
+import { constructShareLink } from "@app/lib/shareLinks";
+import { useTranslations } from "next-intl";
+
+export type ShareLinkRow = {
+    accessTokenId: string;
+    resourceId: number;
+    resourceName: string;
+    title: string | null;
+    createdAt: number;
+    expiresAt: number | null;
+};
+
+type ShareLinksTableProps = {
+    shareLinks: ShareLinkRow[];
+    orgId: string;
+};
+
+export default function ShareLinksTable({
+    shareLinks,
+    orgId
+}: ShareLinksTableProps) {
+    const router = useRouter();
+    const t = useTranslations();
+
+    const api = createApiClient(useEnvContext());
+
+    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+    const [rows, setRows] = useState<ShareLinkRow[]>(shareLinks);
+
+    function formatLink(link: string) {
+        return link.substring(0, 20) + "..." + link.substring(link.length - 20);
+    }
+
+    async function deleteSharelink(id: string) {
+        await api.delete(`/access-token/${id}`).catch((e) => {
+            toast({
+                title: t("shareErrorDelete"),
+                description: formatAxiosError(e, t("shareErrorDeleteMessage"))
+            });
+        });
+
+        const newRows = rows.filter((r) => r.accessTokenId !== id);
+        setRows(newRows);
+
+        toast({
+            title: t("shareDeleted"),
+            description: t("shareDeletedDescription")
+        });
+    }
+
+    const columns: ColumnDef<ShareLinkRow>[] = [
+        {
+            accessorKey: "resourceName",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        {t("resource")}
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
+            cell: ({ row }) => {
+                const r = row.original;
+                return (
+                    <Link href={`/${orgId}/settings/resources/${r.resourceId}`}>
+                        <Button variant="outline" size="sm">
+                            {r.resourceName}
+                            <ArrowUpRight className="ml-2 h-4 w-4" />
+                        </Button>
+                    </Link>
+                );
+            }
+        },
+        {
+            accessorKey: "title",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        {t("title")}
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            }
+        },
+        // {
+        //     accessorKey: "domain",
+        //     header: "Link",
+        //     cell: ({ row }) => {
+        //         const r = row.original;
+        //
+        //         const link = constructShareLink(
+        //             r.resourceId,
+        //             r.accessTokenId,
+        //             r.tokenHash
+        //         );
+        //
+        //         return (
+        //             <div className="flex items-center">
+        //                 <Link
+        //                     href={link}
+        //                     target="_blank"
+        //                     rel="noopener noreferrer"
+        //                     className="hover:underline mr-2"
+        //                 >
+        //                     {formatLink(link)}
+        //                 </Link>
+        //                 <Button
+        //                     variant="ghost"
+        //                     className="h-6 w-6 p-0"
+        //                     onClick={() => {
+        //                         navigator.clipboard.writeText(link);
+        //                         const originalIcon = document.querySelector(
+        //                             `#icon-${r.accessTokenId}`
+        //                         );
+        //                         if (originalIcon) {
+        //                             originalIcon.classList.add("hidden");
+        //                         }
+        //                         const checkIcon = document.querySelector(
+        //                             `#check-icon-${r.accessTokenId}`
+        //                         );
+        //                         if (checkIcon) {
+        //                             checkIcon.classList.remove("hidden");
+        //                             setTimeout(() => {
+        //                                 checkIcon.classList.add("hidden");
+        //                                 if (originalIcon) {
+        //                                     originalIcon.classList.remove(
+        //                                         "hidden"
+        //                                     );
+        //                                 }
+        //                             }, 2000);
+        //                         }
+        //                     }}
+        //                 >
+        //                     <Copy
+        //                         id={`icon-${r.accessTokenId}`}
+        //                         className="h-4 w-4"
+        //                     />
+        //                     <Check
+        //                         id={`check-icon-${r.accessTokenId}`}
+        //                         className="hidden text-green-500 h-4 w-4"
+        //                     />
+        //                     <span className="sr-only">Copy link</span>
+        //                 </Button>
+        //             </div>
+        //         );
+        //     }
+        // },
+        {
+            accessorKey: "createdAt",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        {t("created")}
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
+            cell: ({ row }) => {
+                const r = row.original;
+                return moment(r.createdAt).format("lll");
+            }
+        },
+        {
+            accessorKey: "expiresAt",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        {t("expires")}
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
+            cell: ({ row }) => {
+                const r = row.original;
+                if (r.expiresAt) {
+                    return moment(r.expiresAt).format("lll");
+                }
+                return t("never");
+            }
+        },
+        {
+            id: "delete",
+            cell: ({ row }) => {
+                const resourceRow = row.original;
+                return (
+                    <div className="flex items-center justify-end space-x-2">
+                        {/* <DropdownMenu> */}
+                        {/*     <DropdownMenuTrigger asChild> */}
+                        {/*         <Button variant="ghost" className="h-8 w-8 p-0"> */}
+                        {/*             <span className="sr-only"> */}
+                        {/*                 {t("openMenu")} */}
+                        {/*             </span> */}
+                        {/*             <MoreHorizontal className="h-4 w-4" /> */}
+                        {/*         </Button> */}
+                        {/*     </DropdownMenuTrigger> */}
+                        {/*     <DropdownMenuContent align="end"> */}
+                        {/*         <DropdownMenuItem */}
+                        {/*             onClick={() => { */}
+                        {/*                 deleteSharelink( */}
+                        {/*                     resourceRow.accessTokenId */}
+                        {/*                 ); */}
+                        {/*             }} */}
+                        {/*         > */}
+                        {/*             <button className="text-red-500"> */}
+                        {/*                 {t("delete")} */}
+                        {/*             </button> */}
+                        {/*         </DropdownMenuItem> */}
+                        {/*     </DropdownMenuContent> */}
+                        {/* </DropdownMenu> */}
+                        <Button
+                            variant="secondary"
+                            size="sm"
+                            onClick={() =>
+                                deleteSharelink(row.original.accessTokenId)
+                            }
+                        >
+                            {t("delete")}
+                        </Button>
+                    </div>
+                );
+            }
+        }
+    ];
+
+    return (
+        <>
+            <CreateShareLinkForm
+                open={isCreateModalOpen}
+                setOpen={setIsCreateModalOpen}
+                onCreated={(val) => {
+                    setRows([val, ...rows]);
+                }}
+            />
+
+            <ShareLinksDataTable
+                columns={columns}
+                data={rows}
+                createShareLink={() => {
+                    setIsCreateModalOpen(true);
+                }}
+            />
+        </>
+    );
+}

src/components/SitesTable.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Column, ColumnDef } from "@tanstack/react-table";
-import { SitesDataTable } from "./SitesDataTable";
+import { SitesDataTable } from "@app/components/SitesDataTable";
 import {
     DropdownMenu,
     DropdownMenuContent,

src/components/UsersTable.tsx

@@ -9,7 +9,7 @@ import {
 } from "@app/components/ui/dropdown-menu";
 import { Button } from "@app/components/ui/button";
 import { ArrowRight, ArrowUpDown, Crown, MoreHorizontal } from "lucide-react";
-import { UsersDataTable } from "./UsersDataTable";
+import { UsersDataTable } from "@app/components/UsersDataTable";
 import { useState } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { useOrgContext } from "@app/hooks/useOrgContext";

src/components/VerifyEmailForm.tsx

@@ -30,7 +30,7 @@ import {
 import { AxiosResponse } from "axios";
 import { VerifyEmailResponse } from "@server/routers/auth";
 import { ArrowRight, IdCard, Loader2 } from "lucide-react";
-import { Alert, AlertDescription } from "../../../components/ui/alert";
+import { Alert, AlertDescription } from "./ui/alert";
 import { toast } from "@app/hooks/useToast";
 import { useRouter } from "next/navigation";
 import { formatAxiosError } from "@app/lib/api";