diff --git a/README.md b/README.md index 5baef277..707c4b7c 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,10 @@ _Your own self-hosted zero trust tunnel._ Full Documentation + | + + Contact Us + @@ -68,41 +72,17 @@ _Sites page of Pangolin dashboard (dark mode) showing multiple tunnels connected ### Easy Deployment - Run on any cloud provider or on-premises. -- Docker Compose based setup for simplified deployment. +- **Docker Compose based setup** for simplified deployment. - Future-proof installation script for streamlined setup and feature additions. -- Use your preferred WireGuard client to connect, or use Newt, our custom user space client for the best experience. +- Use any WireGuard client to connect, or use **Newt, our custom user space client** for the best experience. ### Modular Design -- Extend functionality with existing [Traefik](https://github.com/traefik/traefik) plugins, such as [Fail2Ban](https://plugins.traefik.io/plugins/628c9ebcffc0cd18356a979f/fail2-ban) or [CrowdSec](https://plugins.traefik.io/plugins/6335346ca4caa9ddeffda116/crowdsec-bouncer-traefik-plugin). +- Extend functionality with existing [Traefik](https://github.com/traefik/traefik) plugins, such as [CrowdSec](https://plugins.traefik.io/plugins/6335346ca4caa9ddeffda116/crowdsec-bouncer-traefik-plugin) and [Geoblock](github.com/PascalMinder/geoblock). + - **Automatically install and configure Crowdsec via Pangolin's installer script.** - Attach as many sites to the central server as you wish. -## Screenshots - -
- - - - - - - - - - - - - - - - - - - - - -
Sites ExampleUsers ExampleShare Link Example
SitesUsersShare Link
Authentication ExampleConnectivity Example
AuthenticationConnectivity
-
+Collage ## Deployment and Usage Example @@ -112,7 +92,7 @@ _Sites page of Pangolin dashboard (dark mode) showing multiple tunnels connected > [!TIP] > Many of our users have had a great experience with [RackNerd](https://my.racknerd.com/aff.php?aff=13788). Depending on promotions, you can likely get a **VPS with 1 vCPU, 1GB RAM, and ~20GB SSD for just around $12/year**. That's a great deal! -> We are part of the [RackNerd](https://my.racknerd.com/aff.php?aff=13788) affiliate program, so if you sign up using [our link](https://my.racknerd.com/aff.php?aff=13788), we receive a small commission which helps us maintain the project and keep it free for everyone. +> We are part of the [RackNerd](https://my.racknerd.com/aff.php?aff=13788) affiliate program, so if you purchase through [our link](https://my.racknerd.com/aff.php?aff=13788), we receive a small commission which helps us maintain the project and keep it free for everyone. 2. **Domain Configuration**: @@ -123,10 +103,10 @@ _Sites page of Pangolin dashboard (dark mode) showing multiple tunnels connected - Install Newt or use another WireGuard client on private sites. - Automatically establish a connection from these sites to the central server. -4. **Configure Users & Roles** +4. **Expose Resources**: - - Define organizations and invite users. - - Implement user- or role-based permissions to control resource access. + - Add resources to the central server and configure access control rules. + - Access these resources securely from anywhere. **Use Case Example - Bypassing Port Restrictions in Home Lab**: Imagine private sites where the ISP restricts port forwarding. By connecting these sites to Pangolin via WireGuard, you can securely expose HTTP and HTTPS resources on the private network without any networking complexity. @@ -134,6 +114,11 @@ _Sites page of Pangolin dashboard (dark mode) showing multiple tunnels connected **Use Case Example - IoT Networks**: IoT networks are often fragmented and difficult to manage. By deploying Pangolin on a central server, you can connect all your IoT sites via Newt or another WireGuard client. This creates a simple, secure, and centralized way to access IoT resources without the need for intricate networking setups. + +Resources + +_Resources page of Pangolin dashboard (dark mode) showing HTTPS and TCP resources with access control rules._ + ## Similar Projects and Inspirations **Cloudflare Tunnels**: diff --git a/config/config.example.yml b/config/config.example.yml index d60ab2ba..d7b70a69 100644 --- a/config/config.example.yml +++ b/config/config.example.yml @@ -1,3 +1,6 @@ +# To see all available options, please visit the docs: +# https://docs.fossorial.io/Pangolin/Configuration/config + app: dashboard_url: "http://localhost:3002" log_level: "info" diff --git a/install/config/config.yml b/install/config/config.yml index ff99b1f9..8b21b840 100644 --- a/install/config/config.yml +++ b/install/config/config.yml @@ -1,3 +1,6 @@ +# To see all available options, please visit the docs: +# https://docs.fossorial.io/Pangolin/Configuration/config + app: dashboard_url: "https://{{.DashboardDomain}}" log_level: "info" @@ -26,7 +29,6 @@ traefik: cert_resolver: "letsencrypt" http_entrypoint: "web" https_entrypoint: "websecure" - prefer_wildcard_cert: false gerbil: start_port: 51820 diff --git a/install/config/crowdsec/docker-compose.yml b/install/config/crowdsec/docker-compose.yml index 982b3335..d03861d4 100644 --- a/install/config/crowdsec/docker-compose.yml +++ b/install/config/crowdsec/docker-compose.yml @@ -11,8 +11,6 @@ services: ENROLL_TAGS: docker healthcheck: test: ["CMD", "cscli", "capi", "status"] - depends_on: - - gerbil # Wait for gerbil to be healthy labels: - "traefik.enable=false" # Disable traefik for crowdsec volumes: @@ -24,12 +22,5 @@ services: - ./config/crowdsec_logs/syslog:/var/log/syslog:ro # syslog - ./config/crowdsec_logs:/var/log # crowdsec logs - ./config/traefik/logs:/var/log/traefik # traefik logs - ports: - - 9090:9090 # port mapping for local firewall bouncers - - 6060:6060 # metrics endpoint for prometheus - expose: - - 9090 # http api for bouncers - - 6060 # metrics endpoint for prometheus - - 7422 # appsec waf endpoint restart: unless-stopped command: -t # Add test config flag to verify configuration \ No newline at end of file diff --git a/install/crowdsec.go b/install/crowdsec.go index 2d56ecc6..c545a90d 100644 --- a/install/crowdsec.go +++ b/install/crowdsec.go @@ -82,6 +82,11 @@ func installCrowdsec(config Config) error { return fmt.Errorf("failed to restart containers: %v", err) } + if checkIfTextInFile("config/traefik/dynamic_config.yml", "PUT_YOUR_BOUNCER_KEY_HERE_OR_IT_WILL_NOT_WORK") { + fmt.Println("Failed to replace bouncer key! Please retrieve the key and replace it in the config/traefik/dynamic_config.yml file using the following command:") + fmt.Println(" docker exec crowdsec cscli bouncers add traefik-bouncer") + } + return nil } @@ -119,3 +124,14 @@ func GetCrowdSecAPIKey() (string, error) { return apiKey, nil } + +func checkIfTextInFile(file, text string) bool { + // Read file + content, err := os.ReadFile(file) + if err != nil { + return false + } + + // Check for text + return bytes.Contains(content, []byte(text)) +} diff --git a/public/screenshots/auth.png b/public/screenshots/auth.png deleted file mode 100644 index 1bcc35e6..00000000 Binary files a/public/screenshots/auth.png and /dev/null differ diff --git a/public/screenshots/collage.png b/public/screenshots/collage.png new file mode 100644 index 00000000..74fe6deb Binary files /dev/null and b/public/screenshots/collage.png differ diff --git a/public/screenshots/connectivity.png b/public/screenshots/connectivity.png deleted file mode 100644 index 7b6ca88d..00000000 Binary files a/public/screenshots/connectivity.png and /dev/null differ diff --git a/public/screenshots/resources.png b/public/screenshots/resources.png new file mode 100644 index 00000000..2ee2c6e2 Binary files /dev/null and b/public/screenshots/resources.png differ diff --git a/public/screenshots/share-link.png b/public/screenshots/share-link.png deleted file mode 100644 index 7515c8fe..00000000 Binary files a/public/screenshots/share-link.png and /dev/null differ diff --git a/public/screenshots/sites.png b/public/screenshots/sites.png index eb82212f..aa7294f5 100644 Binary files a/public/screenshots/sites.png and b/public/screenshots/sites.png differ diff --git a/public/screenshots/users.png b/public/screenshots/users.png deleted file mode 100644 index 08a8f591..00000000 Binary files a/public/screenshots/users.png and /dev/null differ diff --git a/server/auth/sessions/app.ts b/server/auth/sessions/app.ts index 62850453..bdd593f7 100644 --- a/server/auth/sessions/app.ts +++ b/server/auth/sessions/app.ts @@ -129,18 +129,19 @@ export async function invalidateAllSessions(userId: string): Promise { export function serializeSessionCookie( token: string, - isSecure: boolean + isSecure: boolean, + expiresAt: Date ): string { if (isSecure) { - return `${SESSION_COOKIE_NAME}=${token}; HttpOnly; SameSite=Strict; Max-Age=${SESSION_COOKIE_EXPIRES / 1000}; Path=/; Secure; Domain=${COOKIE_DOMAIN}`; + return `${SESSION_COOKIE_NAME}=${token}; HttpOnly; SameSite=Lax; Expires=${expiresAt.toUTCString()}; Path=/; Secure; Domain=${COOKIE_DOMAIN}`; } else { - return `${SESSION_COOKIE_NAME}=${token}; HttpOnly; SameSite=Lax; Max-Age=${SESSION_COOKIE_EXPIRES}; Path=/;`; + return `${SESSION_COOKIE_NAME}=${token}; HttpOnly; SameSite=Lax; Expires=${expiresAt.toUTCString()}; Path=/;`; } } export function createBlankSessionTokenCookie(isSecure: boolean): string { if (isSecure) { - return `${SESSION_COOKIE_NAME}=; HttpOnly; SameSite=Strict; Max-Age=0; Path=/; Secure; Domain=${COOKIE_DOMAIN}`; + return `${SESSION_COOKIE_NAME}=; HttpOnly; SameSite=Lax; Max-Age=0; Path=/; Secure; Domain=${COOKIE_DOMAIN}`; } else { return `${SESSION_COOKIE_NAME}=; HttpOnly; SameSite=Lax; Max-Age=0; Path=/;`; } diff --git a/server/auth/sessions/resource.ts b/server/auth/sessions/resource.ts index 3336ebde..65f4674d 100644 --- a/server/auth/sessions/resource.ts +++ b/server/auth/sessions/resource.ts @@ -167,12 +167,19 @@ export function serializeResourceSessionCookie( cookieName: string, domain: string, token: string, - isHttp: boolean = false + isHttp: boolean = false, + expiresAt?: Date ): string { if (!isHttp) { - return `${cookieName}_s=${token}; HttpOnly; SameSite=Lax; Max-Age=${SESSION_COOKIE_EXPIRES / 1000}; Path=/; Secure; Domain=${"." + domain}`; + if (expiresAt === undefined) { + return `${cookieName}_s=${token}; HttpOnly; SameSite=Lax; Path=/; Secure; Domain=${"." + domain}`; + } + return `${cookieName}_s=${token}; HttpOnly; SameSite=Lax; Expires=${expiresAt.toUTCString()}; Path=/; Secure; Domain=${"." + domain}`; } else { - return `${cookieName}=${token}; HttpOnly; SameSite=Lax; Max-Age=${SESSION_COOKIE_EXPIRES / 1000}; Path=/; Domain=${"." + domain}`; + if (expiresAt === undefined) { + return `${cookieName}=${token}; HttpOnly; SameSite=Lax; Path=/; Domain=${"." + domain}`; + } + return `${cookieName}=${token}; HttpOnly; SameSite=Lax; Expires=${expiresAt.toUTCString()}; Path=/; Domain=${"." + domain}`; } } diff --git a/server/emails/index.ts b/server/emails/index.ts index c1c2bc87..46d1df69 100644 --- a/server/emails/index.ts +++ b/server/emails/index.ts @@ -3,6 +3,7 @@ export * from "@server/emails/sendEmail"; import nodemailer from "nodemailer"; import config from "@server/lib/config"; import logger from "@server/logger"; +import SMTPTransport from "nodemailer/lib/smtp-transport"; function createEmailClient() { const emailConfig = config.getRawConfig().email; @@ -13,7 +14,7 @@ function createEmailClient() { return; } - return nodemailer.createTransport({ + const settings = { host: emailConfig.smtp_host, port: emailConfig.smtp_port, secure: emailConfig.smtp_secure || false, @@ -21,7 +22,15 @@ function createEmailClient() { user: emailConfig.smtp_user, pass: emailConfig.smtp_pass } - }); + } as SMTPTransport.Options; + + if (emailConfig.smtp_tls_reject_unauthorized !== undefined) { + settings.tls = { + rejectUnauthorized: emailConfig.smtp_tls_reject_unauthorized + }; + } + + return nodemailer.createTransport(settings); } export const emailClient = createEmailClient(); diff --git a/server/lib/config.ts b/server/lib/config.ts index 7d8d9c8b..ee6d6c59 100644 --- a/server/lib/config.ts +++ b/server/lib/config.ts @@ -14,12 +14,12 @@ import { passwordSchema } from "@server/auth/passwordSchema"; import stoi from "./stoi"; const portSchema = z.number().positive().gt(0).lte(65535); -const hostnameSchema = z - .string() - .regex( - /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$|^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)+([A-Za-z]|[A-Za-z][A-Za-z0-9\-]*[A-Za-z0-9])$/ - ) - .or(z.literal("localhost")); +// const hostnameSchema = z +// .string() +// .regex( +// /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$|^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)+([A-Za-z]|[A-Za-z][A-Za-z0-9\-]*[A-Za-z0-9])$/ +// ) +// .or(z.literal("localhost")); const getEnvOrYaml = (envVar: string) => (valFromYaml: any) => { return process.env[envVar] ?? valFromYaml; @@ -42,9 +42,10 @@ const configSchema = z.object({ .record( z.string(), z.object({ - base_domain: hostnameSchema.transform((url) => - url.toLowerCase() - ), + base_domain: z + .string() + .nonempty("base_domain must not be empty") + .transform((url) => url.toLowerCase()), cert_resolver: z.string().optional(), prefer_wildcard_cert: z.boolean().optional() }) @@ -68,7 +69,7 @@ const configSchema = z.object({ const envBaseDomain = process.env.APP_BASE_DOMAIN; if (envBaseDomain) { - return hostnameSchema.safeParse(envBaseDomain).success; + return z.string().nonempty().safeParse(envBaseDomain).success; } return true; @@ -160,6 +161,7 @@ const configSchema = z.object({ smtp_user: z.string().optional(), smtp_pass: z.string().optional(), smtp_secure: z.boolean().optional(), + smtp_tls_reject_unauthorized: z.boolean().optional(), no_reply: z.string().email().optional() }) .optional(), @@ -184,7 +186,8 @@ const configSchema = z.object({ disable_signup_without_invite: z.boolean().optional(), disable_user_create_org: z.boolean().optional(), allow_raw_resources: z.boolean().optional(), - allow_base_domain_resources: z.boolean().optional() + allow_base_domain_resources: z.boolean().optional(), + allow_local_sites: z.boolean().optional() }) .optional() }); diff --git a/server/lib/validators.ts b/server/lib/validators.ts index abb2ebb4..ce677c9c 100644 --- a/server/lib/validators.ts +++ b/server/lib/validators.ts @@ -56,7 +56,7 @@ export function isValidUrlGlobPattern(pattern: string): boolean { // - unreserved (A-Z a-z 0-9 - . _ ~) // - sub-delims (! $ & ' ( ) * + , ; =) // - @ : for compatibility with some systems - if (!/^[A-Za-z0-9\-._~!$&'()*+,;=@:]$/.test(char)) { + if (!/^[A-Za-z0-9\-._~!$&'()*+,;#=@:]$/.test(char)) { return false; } } diff --git a/server/routers/auth/login.ts b/server/routers/auth/login.ts index 09bd9661..8ed49cf0 100644 --- a/server/routers/auth/login.ts +++ b/server/routers/auth/login.ts @@ -137,9 +137,13 @@ export async function login( } const token = generateSessionToken(); - await createSession(token, existingUser.userId); + const sess = await createSession(token, existingUser.userId); const isSecure = req.protocol === "https"; - const cookie = serializeSessionCookie(token, isSecure); + const cookie = serializeSessionCookie( + token, + isSecure, + new Date(sess.expiresAt) + ); res.appendHeader("Set-Cookie", cookie); diff --git a/server/routers/auth/signup.ts b/server/routers/auth/signup.ts index 4bb5394e..cb099162 100644 --- a/server/routers/auth/signup.ts +++ b/server/routers/auth/signup.ts @@ -170,9 +170,13 @@ export async function signup( // }); const token = generateSessionToken(); - await createSession(token, userId); + const sess = await createSession(token, userId); const isSecure = req.protocol === "https"; - const cookie = serializeSessionCookie(token, isSecure); + const cookie = serializeSessionCookie( + token, + isSecure, + new Date(sess.expiresAt) + ); res.appendHeader("Set-Cookie", cookie); if (config.getRawConfig().flags?.require_email_verification) { diff --git a/server/routers/badger/exchangeSession.ts b/server/routers/badger/exchangeSession.ts index 093dfbb9..ad8eb976 100644 --- a/server/routers/badger/exchangeSession.ts +++ b/server/routers/badger/exchangeSession.ts @@ -102,6 +102,8 @@ export async function exchangeSession( const token = generateSessionToken(); + let expiresAt: number | null = null; + if (requestSession.userSessionId) { const [res] = await db .select() @@ -118,6 +120,7 @@ export async function exchangeSession( expiresAt: res.expiresAt, sessionLength: SESSION_COOKIE_EXPIRES }); + expiresAt = res.expiresAt; } } else if (requestSession.accessTokenId) { const [res] = await db @@ -140,8 +143,12 @@ export async function exchangeSession( expiresAt: res.expiresAt, sessionLength: res.sessionLength }); + expiresAt = res.expiresAt; } } else { + const expires = new Date( + Date.now() + SESSION_COOKIE_EXPIRES + ).getTime(); await createResourceSession({ token, resourceId: resource.resourceId, @@ -152,11 +159,10 @@ export async function exchangeSession( whitelistId: requestSession.whitelistId, accessTokenId: requestSession.accessTokenId, doNotExtend: false, - expiresAt: new Date( - Date.now() + SESSION_COOKIE_EXPIRES - ).getTime(), + expiresAt: expires, sessionLength: RESOURCE_SESSION_COOKIE_EXPIRES }); + expiresAt = expires; } const cookieName = `${config.getRawConfig().server.session_cookie_name}`; @@ -164,7 +170,8 @@ export async function exchangeSession( cookieName, resource.fullDomain!, token, - !resource.ssl + !resource.ssl, + expiresAt ? new Date(expiresAt) : undefined ); logger.debug(JSON.stringify("Exchange cookie: " + cookie)); diff --git a/server/routers/badger/verifySession.ts b/server/routers/badger/verifySession.ts index 86ba0629..35617f37 100644 --- a/server/routers/badger/verifySession.ts +++ b/server/routers/badger/verifySession.ts @@ -384,7 +384,7 @@ async function createAccessTokenSession( tokenItem: ResourceAccessToken ) { const token = generateSessionToken(); - await createResourceSession({ + const sess = await createResourceSession({ resourceId: resource.resourceId, token, accessTokenId: tokenItem.accessTokenId, @@ -397,7 +397,8 @@ async function createAccessTokenSession( cookieName, resource.fullDomain!, token, - !resource.ssl + !resource.ssl, + new Date(sess.expiresAt) ); res.appendHeader("Set-Cookie", cookie); logger.debug("Access token is valid, creating new session"); diff --git a/src/app/[orgId]/settings/access/roles/CreateRoleForm.tsx b/src/app/[orgId]/settings/access/roles/CreateRoleForm.tsx index d95f3e20..2312d67a 100644 --- a/src/app/[orgId]/settings/access/roles/CreateRoleForm.tsx +++ b/src/app/[orgId]/settings/access/roles/CreateRoleForm.tsx @@ -7,7 +7,7 @@ import { FormField, FormItem, FormLabel, - FormMessage, + FormMessage } from "@app/components/ui/form"; import { Input } from "@app/components/ui/input"; import { toast } from "@app/hooks/useToast"; @@ -24,11 +24,11 @@ import { CredenzaDescription, CredenzaFooter, CredenzaHeader, - CredenzaTitle, + CredenzaTitle } from "@app/components/Credenza"; import { useOrgContext } from "@app/hooks/useOrgContext"; import { CreateRoleBody, CreateRoleResponse } from "@server/routers/role"; -import { formatAxiosError } from "@app/lib/api";; +import { formatAxiosError } from "@app/lib/api"; import { createApiClient } from "@app/lib/api"; import { useEnvContext } from "@app/hooks/useEnvContext"; @@ -40,13 +40,13 @@ type CreateRoleFormProps = { const formSchema = z.object({ name: z.string({ message: "Name is required" }).max(32), - description: z.string().max(255).optional(), + description: z.string().max(255).optional() }); export default function CreateRoleForm({ open, setOpen, - afterCreate, + afterCreate }: CreateRoleFormProps) { const { org } = useOrgContext(); @@ -58,8 +58,8 @@ export default function CreateRoleForm({ resolver: zodResolver(formSchema), defaultValues: { name: "", - description: "", - }, + description: "" + } }); async function onSubmit(values: z.infer) { @@ -70,7 +70,7 @@ export default function CreateRoleForm({ `/org/${org?.org.orgId}/role`, { name: values.name, - description: values.description, + description: values.description } as CreateRoleBody ) .catch((e) => { @@ -80,7 +80,7 @@ export default function CreateRoleForm({ description: formatAxiosError( e, "An error occurred while creating the role." - ), + ) }); }); @@ -88,7 +88,7 @@ export default function CreateRoleForm({ toast({ variant: "default", title: "Role created", - description: "The role has been successfully created.", + description: "The role has been successfully created." }); if (open) { @@ -135,9 +135,7 @@ export default function CreateRoleForm({ Role Name - + @@ -150,9 +148,7 @@ export default function CreateRoleForm({ Description - + @@ -162,6 +158,9 @@ export default function CreateRoleForm({ + + + - - - diff --git a/src/app/[orgId]/settings/access/roles/DeleteRoleForm.tsx b/src/app/[orgId]/settings/access/roles/DeleteRoleForm.tsx index 6bd41df8..80d97267 100644 --- a/src/app/[orgId]/settings/access/roles/DeleteRoleForm.tsx +++ b/src/app/[orgId]/settings/access/roles/DeleteRoleForm.tsx @@ -7,7 +7,7 @@ import { FormField, FormItem, FormLabel, - FormMessage, + FormMessage } from "@app/components/ui/form"; import { toast } from "@app/hooks/useToast"; import { zodResolver } from "@hookform/resolvers/zod"; @@ -23,7 +23,7 @@ import { CredenzaDescription, CredenzaFooter, CredenzaHeader, - CredenzaTitle, + CredenzaTitle } from "@app/components/Credenza"; import { useOrgContext } from "@app/hooks/useOrgContext"; import { ListRolesResponse } from "@server/routers/role"; @@ -32,10 +32,10 @@ import { SelectContent, SelectItem, SelectTrigger, - SelectValue, + SelectValue } from "@app/components/ui/select"; import { RoleRow } from "./RolesTable"; -import { formatAxiosError } from "@app/lib/api";; +import { formatAxiosError } from "@app/lib/api"; import { createApiClient } from "@app/lib/api"; import { useEnvContext } from "@app/hooks/useEnvContext"; @@ -47,14 +47,14 @@ type CreateRoleFormProps = { }; const formSchema = z.object({ - newRoleId: z.string({ message: "New role is required" }), + newRoleId: z.string({ message: "New role is required" }) }); export default function DeleteRoleForm({ open, roleToDelete, setOpen, - afterDelete, + afterDelete }: CreateRoleFormProps) { const { org } = useOrgContext(); @@ -66,9 +66,9 @@ export default function DeleteRoleForm({ useEffect(() => { async function fetchRoles() { const res = await api - .get>( - `/org/${org?.org.orgId}/roles` - ) + .get< + AxiosResponse + >(`/org/${org?.org.orgId}/roles`) .catch((e) => { console.error(e); toast({ @@ -77,7 +77,7 @@ export default function DeleteRoleForm({ description: formatAxiosError( e, "An error occurred while fetching the roles" - ), + ) }); }); @@ -96,8 +96,8 @@ export default function DeleteRoleForm({ const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { - newRoleId: "", - }, + newRoleId: "" + } }); async function onSubmit(values: z.infer) { @@ -106,8 +106,8 @@ export default function DeleteRoleForm({ const res = await api .delete(`/role/${roleToDelete.roleId}`, { data: { - roleId: values.newRoleId, - }, + roleId: values.newRoleId + } }) .catch((e) => { toast({ @@ -116,7 +116,7 @@ export default function DeleteRoleForm({ description: formatAxiosError( e, "An error occurred while removing the role." - ), + ) }); }); @@ -124,7 +124,7 @@ export default function DeleteRoleForm({ toast({ variant: "default", title: "Role removed", - description: "The role has been successfully removed.", + description: "The role has been successfully removed." }); if (open) { @@ -214,6 +214,9 @@ export default function DeleteRoleForm({ + + + - - - diff --git a/src/app/[orgId]/settings/access/users/InviteUserForm.tsx b/src/app/[orgId]/settings/access/users/InviteUserForm.tsx index c629c0bc..0285123a 100644 --- a/src/app/[orgId]/settings/access/users/InviteUserForm.tsx +++ b/src/app/[orgId]/settings/access/users/InviteUserForm.tsx @@ -37,7 +37,7 @@ import { } from "@app/components/Credenza"; import { useOrgContext } from "@app/hooks/useOrgContext"; import { ListRolesResponse } from "@server/routers/role"; -import { formatAxiosError } from "@app/lib/api";; +import { formatAxiosError } from "@app/lib/api"; import { createApiClient } from "@app/lib/api"; import { useEnvContext } from "@app/hooks/useEnvContext"; import { Checkbox } from "@app/components/ui/checkbox"; @@ -194,9 +194,7 @@ export default function InviteUserForm({ open, setOpen }: InviteUserFormProps) { Email - + @@ -340,6 +338,9 @@ export default function InviteUserForm({ open, setOpen }: InviteUserFormProps) { + + + - - - diff --git a/src/app/[orgId]/settings/access/users/UsersTable.tsx b/src/app/[orgId]/settings/access/users/UsersTable.tsx index 7c11c06b..29529d66 100644 --- a/src/app/[orgId]/settings/access/users/UsersTable.tsx +++ b/src/app/[orgId]/settings/access/users/UsersTable.tsx @@ -185,7 +185,7 @@ export default function UsersTable({ users: u }: UsersTableProps) { - diff --git a/src/app/[orgId]/settings/access/users/[userId]/layout.tsx b/src/app/[orgId]/settings/access/users/[userId]/layout.tsx index 11ae20ac..135c47a3 100644 --- a/src/app/[orgId]/settings/access/users/[userId]/layout.tsx +++ b/src/app/[orgId]/settings/access/users/[userId]/layout.tsx @@ -64,7 +64,7 @@ export default async function UserLayoutProps(props: UserLayoutProps) { -
+

User {user?.email}

diff --git a/src/app/[orgId]/settings/layout.tsx b/src/app/[orgId]/settings/layout.tsx index b0b561a2..b9912106 100644 --- a/src/app/[orgId]/settings/layout.tsx +++ b/src/app/[orgId]/settings/layout.tsx @@ -1,6 +1,13 @@ import { Metadata } from "next"; import { TopbarNav } from "@app/components/TopbarNav"; -import { Cog, Combine, Link, Settings, Users, Waypoints } from "lucide-react"; +import { + Cog, + Combine, + LinkIcon, + Settings, + Users, + Waypoints +} from "lucide-react"; import { Header } from "@app/components/Header"; import { verifySession } from "@app/lib/auth/verifySession"; import { redirect } from "next/navigation"; @@ -11,6 +18,14 @@ import { authCookieHeader } from "@app/lib/api/cookies"; import { cache } from "react"; import { GetOrgUserResponse } from "@server/routers/user"; import UserProvider from "@app/providers/UserProvider"; +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator +} from "@app/components/ui/breadcrumb"; +import Link from "next/link"; export const dynamic = "force-dynamic"; @@ -38,7 +53,7 @@ const topNavItems = [ { title: "Shareable Links", href: "/{orgId}/settings/share-links", - icon: + icon: }, { title: "General", @@ -95,19 +110,23 @@ export default async function SettingsLayout(props: SettingsLayoutProps) { return ( <> -
-
-
- -
- +
+
+
+
+ +
+ +
+
-
-
- {children} +
+
+ {children} +
); diff --git a/src/app/[orgId]/settings/resources/CreateResourceForm.tsx b/src/app/[orgId]/settings/resources/CreateResourceForm.tsx index ea8542f6..9bb3ecde 100644 --- a/src/app/[orgId]/settings/resources/CreateResourceForm.tsx +++ b/src/app/[orgId]/settings/resources/CreateResourceForm.tsx @@ -66,6 +66,8 @@ import CopyTextBox from "@app/components/CopyTextBox"; import { RadioGroup, RadioGroupItem } from "@app/components/ui/radio-group"; import { Label } from "@app/components/ui/label"; import { ListDomainsResponse } from "@server/routers/domain"; +import LoaderPlaceholder from "@app/components/PlaceHolderLoader"; +import { StrategySelect } from "@app/components/StrategySelect"; const createResourceFormSchema = z .object({ @@ -140,6 +142,7 @@ export default function CreateResourceForm({ const [domainType, setDomainType] = useState<"subdomain" | "basedomain">( "subdomain" ); + const [loadingPage, setLoadingPage] = useState(true); const form = useForm({ resolver: zodResolver(createResourceFormSchema), @@ -215,8 +218,17 @@ export default function CreateResourceForm({ } }; - fetchSites(); - fetchDomains(); + const load = async () => { + setLoadingPage(true); + + await fetchSites(); + await fetchDomains(); + await new Promise((r) => setTimeout(r, 200)); + + setLoadingPage(false); + }; + + load(); }, [open]); async function onSubmit(data: CreateResourceFormValues) { @@ -231,7 +243,7 @@ export default function CreateResourceForm({ protocol: data.protocol, proxyPort: data.http ? undefined : data.proxyPort, siteId: data.siteId, - isBaseDomain: data.http ? undefined : data.isBaseDomain + isBaseDomain: data.http ? data.isBaseDomain : undefined } ) .catch((e) => { @@ -253,6 +265,7 @@ export default function CreateResourceForm({ goToResource(id); } else { setShowSnippets(true); + router.refresh(); } } } @@ -262,6 +275,21 @@ export default function CreateResourceForm({ router.push(`/${orgId}/settings/resources/${id || resourceId}`); } + const launchOptions = [ + { + id: "http", + title: "HTTPS Resource", + description: + "Proxy requests to your app over HTTPS using a subdomain or base domain." + }, + { + id: "raw", + title: "Raw TCP/UDP Resource", + description: + "Proxy requests to your app over TCP/UDP using a port number." + } + ]; + return ( <> - {!showSnippets && ( -
- - {!env.flags.allowRawResources || ( - ( - -
- - HTTP Resource - - - Toggle if this is an - HTTP resource or a - raw TCP/UDP - resource. - -
- - - - + {loadingPage ? ( + + ) : ( +
+ {!showSnippets && ( + + - )} - - ( - - Name - - - - - - This is display name for the - resource. - - - )} - /> - - {form.watch("http") && - env.flags.allowBaseDomainResources && ( -
- { - setDomainType( - val as any - ); - form.setValue( - "isBaseDomain", - val === "basedomain" - ); - }} - > -
- - -
-
- - -
- -
- )} - - {form.watch("http") && ( - <> - {domainType === "subdomain" ? ( -
- {!env.flags - .allowBaseDomainResources && ( + className="space-y-4" + id="create-resource-form" + > + ( + - Subdomain + Name - )} -
-
- ( - - - - )} - /> -
-
- ( - - - - - )} - /> -
-
-
- ) : ( - ( - - + + + + )} + /> + + ( + + + Site + + + - - - + - - {baseDomains.map( - ( - option - ) => ( - - { - option.baseDomain - } - - ) - )} - - - - - )} - /> - )} - - )} + + + + + + + No + site + found. + + + {sites.map( + ( + site + ) => ( + { + form.setValue( + "siteId", + site.siteId + ); + }} + > + + { + site.name + } + + ) + )} + + + + + + + + This site will + provide connectivity + to the resource. + + + )} + /> + + {!env.flags.allowRawResources || ( +
+ + Resource Type + + + form.setValue( + "http", + value === "http" + ) + } + /> + + You cannot change the + type of resource after + creation. + +
+ )} + + {form.watch("http") && + env.flags + .allowBaseDomainResources && ( + ( + + + Domain Type + + + + + )} + /> + )} + + {form.watch("http") && ( + <> + {domainType === + "subdomain" ? ( +
+ + Subdomain + +
+
+ ( + + + + + + + )} + /> +
+
+ ( + + + + + )} + /> +
+
+
+ ) : ( + ( + + + Base + Domain + + + + + )} + /> + )} + + )} + + {!form.watch("http") && ( + <> + ( + + + Protocol + + + + + )} + /> + ( + + + Port Number + + + + field.onChange( + e + .target + .value + ? parseInt( + e + .target + .value + ) + : null + ) + } + /> + + + + The external + port number + to proxy + requests. + + + )} + /> + + )} + + + )} + + {showSnippets && ( +
+
+
+

+ Traefik: Add Entrypoints +

+ +
+
+ +
+
+

+ Gerbil: Expose Ports in + Docker Compose +

+ +
+
- {!form.watch("http") && ( - )} - - {!form.watch("http") && ( - <> - ( - - - Protocol - - - - - The protocol to use - for the resource. - - - )} - /> - ( - - - Port Number - - - - field.onChange( - e.target - .value - ? parseInt( - e - .target - .value - ) - : null - ) - } - /> - - - - The port number to - proxy requests to - (required for - non-HTTP resources). - - - )} - /> - - )} - - ( - - Site - - - - - - - - - - - - No site - found. - - - {sites.map( - ( - site - ) => ( - { - form.setValue( - "siteId", - site.siteId - ); - }} - > - - { - site.name - } - - ) - )} - - - - - - - - This site will provide - connectivity to the - resource. - - - )} - /> - - - )} - - {showSnippets && ( -
-
-
- 1
-
-

- Traefik: Add Entrypoints -

- -
-
- -
-
- 2 -
-
-

- Gerbil: Expose Ports in Docker - Compose -

- -
-
- - - - Make sure to follow the full guide - - - + )}
)} + + + {!showSnippets && ( - diff --git a/src/app/[orgId]/settings/resources/ResourcesTable.tsx b/src/app/[orgId]/settings/resources/ResourcesTable.tsx index 848838b3..6ff9e730 100644 --- a/src/app/[orgId]/settings/resources/ResourcesTable.tsx +++ b/src/app/[orgId]/settings/resources/ResourcesTable.tsx @@ -233,7 +233,7 @@ export default function SitesTable({ resources, orgId }: ResourcesTableProps) { - diff --git a/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePasswordForm.tsx b/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePasswordForm.tsx index 35eb29a3..f3ab705c 100644 --- a/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePasswordForm.tsx +++ b/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePasswordForm.tsx @@ -8,7 +8,7 @@ import { FormField, FormItem, FormLabel, - FormMessage, + FormMessage } from "@app/components/ui/form"; import { Input } from "@app/components/ui/input"; import { toast } from "@app/hooks/useToast"; @@ -24,22 +24,22 @@ import { CredenzaDescription, CredenzaFooter, CredenzaHeader, - CredenzaTitle, + CredenzaTitle } from "@app/components/Credenza"; -import { formatAxiosError } from "@app/lib/api";; +import { formatAxiosError } from "@app/lib/api"; import { AxiosResponse } from "axios"; import { Resource } from "@server/db/schema"; import { createApiClient } from "@app/lib/api"; import { useEnvContext } from "@app/hooks/useEnvContext"; const setPasswordFormSchema = z.object({ - password: z.string().min(4).max(100), + password: z.string().min(4).max(100) }); type SetPasswordFormValues = z.infer; const defaultValues: Partial = { - password: "", + password: "" }; type SetPasswordFormProps = { @@ -53,7 +53,7 @@ export default function SetResourcePasswordForm({ open, setOpen, resourceId, - onSetPassword, + onSetPassword }: SetPasswordFormProps) { const api = createApiClient(useEnvContext()); @@ -61,7 +61,7 @@ export default function SetResourcePasswordForm({ const form = useForm({ resolver: zodResolver(setPasswordFormSchema), - defaultValues, + defaultValues }); useEffect(() => { @@ -76,7 +76,7 @@ export default function SetResourcePasswordForm({ setLoading(true); api.post>(`/resource/${resourceId}/password`, { - password: data.password, + password: data.password }) .catch((e) => { toast({ @@ -85,14 +85,14 @@ export default function SetResourcePasswordForm({ description: formatAxiosError( e, "An error occurred while setting the resource password" - ), + ) }); }) .then(() => { toast({ title: "Resource password set", description: - "The resource password has been set successfully", + "The resource password has been set successfully" }); if (onSetPassword) { @@ -153,6 +153,9 @@ export default function SetResourcePasswordForm({ + + + - - - diff --git a/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePincodeForm.tsx b/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePincodeForm.tsx index 4a850b33..9d89d3bd 100644 --- a/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePincodeForm.tsx +++ b/src/app/[orgId]/settings/resources/[resourceId]/authentication/SetResourcePincodeForm.tsx @@ -8,7 +8,7 @@ import { FormField, FormItem, FormLabel, - FormMessage, + FormMessage } from "@app/components/ui/form"; import { Input } from "@app/components/ui/input"; import { toast } from "@app/hooks/useToast"; @@ -24,27 +24,27 @@ import { CredenzaDescription, CredenzaFooter, CredenzaHeader, - CredenzaTitle, + CredenzaTitle } from "@app/components/Credenza"; -import { formatAxiosError } from "@app/lib/api";; +import { formatAxiosError } from "@app/lib/api"; import { AxiosResponse } from "axios"; import { Resource } from "@server/db/schema"; import { InputOTP, InputOTPGroup, - InputOTPSlot, + InputOTPSlot } from "@app/components/ui/input-otp"; import { createApiClient } from "@app/lib/api"; import { useEnvContext } from "@app/hooks/useEnvContext"; const setPincodeFormSchema = z.object({ - pincode: z.string().length(6), + pincode: z.string().length(6) }); type SetPincodeFormValues = z.infer; const defaultValues: Partial = { - pincode: "", + pincode: "" }; type SetPincodeFormProps = { @@ -58,7 +58,7 @@ export default function SetResourcePincodeForm({ open, setOpen, resourceId, - onSetPincode, + onSetPincode }: SetPincodeFormProps) { const [loading, setLoading] = useState(false); @@ -66,7 +66,7 @@ export default function SetResourcePincodeForm({ const form = useForm({ resolver: zodResolver(setPincodeFormSchema), - defaultValues, + defaultValues }); useEffect(() => { @@ -81,7 +81,7 @@ export default function SetResourcePincodeForm({ setLoading(true); api.post>(`/resource/${resourceId}/pincode`, { - pincode: data.pincode, + pincode: data.pincode }) .catch((e) => { toast({ @@ -89,15 +89,15 @@ export default function SetResourcePincodeForm({ title: "Error setting resource PIN code", description: formatAxiosError( e, - "An error occurred while setting the resource PIN code", - ), + "An error occurred while setting the resource PIN code" + ) }); }) .then(() => { toast({ title: "Resource PIN code set", description: - "The resource pincode has been set successfully", + "The resource pincode has been set successfully" }); if (onSetPincode) { @@ -181,6 +181,9 @@ export default function SetResourcePincodeForm({ + + + - - - diff --git a/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx b/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx index fa0491f0..c50afc4d 100644 --- a/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx +++ b/src/app/[orgId]/settings/resources/[resourceId]/authentication/page.tsx @@ -38,7 +38,8 @@ import { SettingsSectionHeader, SettingsSectionDescription, SettingsSectionBody, - SettingsSectionFooter + SettingsSectionFooter, + SettingsSectionForm } from "@app/components/Settings"; import { SwitchInput } from "@app/components/SwitchInput"; import { InfoPopup } from "@app/components/ui/info-popup"; @@ -438,6 +439,7 @@ export default function ResourceAuthenticationPage() { setActiveRolesTagIndex } placeholder="Select a role" + size="sm" tags={ usersRolesForm.getValues() .roles @@ -466,14 +468,6 @@ export default function ResourceAuthenticationPage() { true } sortTags={true} - styleClasses={{ - tag: { - body: "bg-muted hover:bg-accent text-foreground py-2 px-3 rounded-full" - }, - input: "text-base md:text-sm border-none bg-transparent text-inherit placeholder:text-inherit shadow-none", - inlineTagsContainer: - "bg-transparent p-2" - }} /> @@ -504,6 +498,7 @@ export default function ResourceAuthenticationPage() { usersRolesForm.getValues() .users } + size="sm" setTags={( newUsers ) => { @@ -528,14 +523,6 @@ export default function ResourceAuthenticationPage() { true } sortTags={true} - styleClasses={{ - tag: { - body: "bg-muted hover:bg-accent text-foreground py-2 px-3 rounded-full" - }, - input: "text-base md:text-sm border-none bg-transparent text-inherit placeholder:text-inherit shadow-none", - inlineTagsContainer: - "bg-transparent p-2" - }} /> @@ -582,7 +569,7 @@ export default function ResourceAuthenticationPage() {
- - - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - {header.isPlaceholder - ? null - : flexRender( - header.column - .columnDef.header, - header.getContext() - )} - +
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef + .header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + ))} - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row - .getVisibleCells() - .map((cell) => ( - - {flexRender( - cell.column - .columnDef.cell, - cell.getContext() - )} - - ))} - - )) - ) : ( - - - No targets. Add a target using the - form. - - - )} - -
- -

- Adding more than one target above will enable load - balancing. -

+ )) + ) : ( + + + No targets. Add a target using the form. + + + )} + + + Adding more than one target above will enable load + balancing. + + - - + {resource.http && ( + <> + {env.flags + .allowBaseDomainResources && ( + ( + + + Domain Type + + + + + )} + /> + )} - - - - Transfer Resource - - - Transfer this resource to a different site - - - - - -
- - ( - - - Destination Site - - - - - - - - - - - - No sites found. - - - {sites.map( - (site) => ( - { - transferForm.setValue( - "siteId", - site.siteId - ); - setOpen( - false - ); - }} - > - { - site.name - } - + {domainType === "subdomain" ? ( +
+ + Subdomain + +
+
+ ( + + + + + + + )} + /> +
+
+ ( + + + + + )} + /> +
+
+
+ ) : ( + ( + + + Base Domain + + + + + )} + /> + )} +
+ )} - /> - - - - - - - - - + {!resource.http && ( + ( + + + Port Number + + + + field.onChange( + e.target + .value + ? parseInt( + e + .target + .value + ) + : null + ) + } + /> + + + + )} + /> + )} + + + + + + + + + + + + + + Transfer Resource + + + Transfer this resource to a different site + + + + + +
+ + ( + + + Destination Site + + + + + + + + + + + + No sites found. + + + {sites.map( + (site) => ( + { + transferForm.setValue( + "siteId", + site.siteId + ); + setOpen( + false + ); + }} + > + { + site.name + } + + + ) + )} + + + + + + + )} + /> + + +
+ + + + + + + + ) ); } diff --git a/src/app/[orgId]/settings/resources/[resourceId]/layout.tsx b/src/app/[orgId]/settings/resources/[resourceId]/layout.tsx index 51b147fe..af335c42 100644 --- a/src/app/[orgId]/settings/resources/[resourceId]/layout.tsx +++ b/src/app/[orgId]/settings/resources/[resourceId]/layout.tsx @@ -130,9 +130,7 @@ export default async function ResourceLayout(props: ResourceLayoutProps) { -
- -
+ {children} diff --git a/src/app/[orgId]/settings/resources/[resourceId]/rules/page.tsx b/src/app/[orgId]/settings/resources/[resourceId]/rules/page.tsx index 2a4d0e51..7632a007 100644 --- a/src/app/[orgId]/settings/resources/[resourceId]/rules/page.tsx +++ b/src/app/[orgId]/settings/resources/[resourceId]/rules/page.tsx @@ -33,6 +33,7 @@ import { import { Table, TableBody, + TableCaption, TableCell, TableContainer, TableHead, @@ -94,7 +95,7 @@ enum RuleAction { enum RuleMatch { PATH = "Path", IP = "IP", - CIDR = "IP Range", + CIDR = "IP Range" } export default function ResourceRules(props: { @@ -623,7 +624,7 @@ export default function ResourceRules(props: { onSubmit={addRuleForm.handleSubmit(addRule)} className="space-y-4" > -
+
)} /> +
- - - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - {header.isPlaceholder - ? null - : flexRender( - header.column - .columnDef.header, - header.getContext() - )} - +
+ + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef + .header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + ))} - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map((row) => ( - - {row - .getVisibleCells() - .map((cell) => ( - - {flexRender( - cell.column - .columnDef.cell, - cell.getContext() - )} - - ))} - - )) - ) : ( - - - No rules. Add a rule using the form. - - - )} - -
- -

- Rules are evaluated by priority in ascending order. -

+ )) + ) : ( + + + No rules. Add a rule using the form. + + + )} + + + Rules are evaluated by priority in ascending order. + + + - - - diff --git a/src/app/[orgId]/settings/share-links/ShareLinksTable.tsx b/src/app/[orgId]/settings/share-links/ShareLinksTable.tsx index 5d5d341f..2acc1399 100644 --- a/src/app/[orgId]/settings/share-links/ShareLinksTable.tsx +++ b/src/app/[orgId]/settings/share-links/ShareLinksTable.tsx @@ -273,7 +273,21 @@ export default function ShareLinksTable({ } return "Never"; } + }, + { + id: "delete", + cell: ({ row }) => ( +
+ +
+ ) } + ]; return ( diff --git a/src/app/[orgId]/settings/sites/CreateSiteForm.tsx b/src/app/[orgId]/settings/sites/CreateSiteForm.tsx index 0a4cca14..546b2a5b 100644 --- a/src/app/[orgId]/settings/sites/CreateSiteForm.tsx +++ b/src/app/[orgId]/settings/sites/CreateSiteForm.tsx @@ -41,6 +41,7 @@ import Link from "next/link"; import { ArrowUpRight, ChevronsUpDown, + Loader2, SquareArrowOutUpRight } from "lucide-react"; import { @@ -48,6 +49,7 @@ import { CollapsibleContent, CollapsibleTrigger } from "@app/components/ui/collapsible"; +import LoaderPlaceholder from "@app/components/PlaceHolderLoader"; const createSiteFormSchema = z.object({ name: z @@ -97,6 +99,8 @@ export default function CreateSiteForm({ const [siteDefaults, setSiteDefaults] = useState(null); + const [loadingPage, setLoadingPage] = useState(true); + const handleCheckboxChange = (checked: boolean) => { // setChecked?.(checked); setIsChecked(checked); @@ -121,27 +125,36 @@ export default function CreateSiteForm({ useEffect(() => { if (!open) return; - // reset all values - setLoading?.(false); - setIsLoading(false); - form.reset(); - setChecked?.(false); - setKeypair(null); - setSiteDefaults(null); + const load = async () => { + setLoadingPage(true); + // reset all values + setLoading?.(false); + setIsLoading(false); + form.reset(); + setChecked?.(false); + setKeypair(null); + setSiteDefaults(null); - const generatedKeypair = generateKeypair(); - setKeypair(generatedKeypair); + const generatedKeypair = generateKeypair(); + setKeypair(generatedKeypair); - api.get(`/org/${orgId}/pick-site-defaults`) - .catch((e) => { - // update the default value of the form to be local method - form.setValue("method", "local"); - }) - .then((res) => { - if (res && res.status === 200) { - setSiteDefaults(res.data.data); - } - }); + await api + .get(`/org/${orgId}/pick-site-defaults`) + .catch((e) => { + // update the default value of the form to be local method + form.setValue("method", "local"); + }) + .then((res) => { + if (res && res.status === 200) { + setSiteDefaults(res.data.data); + } + }); + await new Promise((resolve) => setTimeout(resolve, 200)); + + setLoadingPage(false); + }; + + load(); }, [open]); async function onSubmit(data: CreateSiteFormValues) { @@ -257,7 +270,9 @@ PersistentKeepalive = 5` const newtConfigDockerRun = `docker run -it fosrl/newt --id ${siteDefaults?.newtId} --secret ${siteDefaults?.newtSecret} --endpoint ${env.app.dashboardUrl}`; - return ( + return loadingPage ? ( + + ) : (
- This is the the display name for the - site. + This is the the display name for the site. )} @@ -331,7 +345,6 @@ PersistentKeepalive = 5` rel="noopener noreferrer" > - {" "} Learn how to install Newt on your system @@ -358,12 +371,16 @@ PersistentKeepalive = 5` onOpenChange={setIsOpen} className="space-y-2" > -
+
+ + You will only be able to see the + configuration once. +
- - You will only be able to see the - configuration once. - ) : null}
diff --git a/src/app/[orgId]/settings/sites/CreateSiteModal.tsx b/src/app/[orgId]/settings/sites/CreateSiteModal.tsx index fd6ff914..1666000d 100644 --- a/src/app/[orgId]/settings/sites/CreateSiteModal.tsx +++ b/src/app/[orgId]/settings/sites/CreateSiteModal.tsx @@ -58,6 +58,9 @@ export default function CreateSiteFormModal({
+ + + - - - diff --git a/src/app/[orgId]/settings/sites/SitesTable.tsx b/src/app/[orgId]/settings/sites/SitesTable.tsx index d9d0ba03..9b56aaeb 100644 --- a/src/app/[orgId]/settings/sites/SitesTable.tsx +++ b/src/app/[orgId]/settings/sites/SitesTable.tsx @@ -268,7 +268,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) { - diff --git a/src/app/[orgId]/settings/sites/[niceId]/layout.tsx b/src/app/[orgId]/settings/sites/[niceId]/layout.tsx index 7b0fa46d..6b6a58e2 100644 --- a/src/app/[orgId]/settings/sites/[niceId]/layout.tsx +++ b/src/app/[orgId]/settings/sites/[niceId]/layout.tsx @@ -68,9 +68,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) { -
- -
+ {children} diff --git a/src/app/auth/verify-email/VerifyEmailForm.tsx b/src/app/auth/verify-email/VerifyEmailForm.tsx index 67ee0b02..7d68263e 100644 --- a/src/app/auth/verify-email/VerifyEmailForm.tsx +++ b/src/app/auth/verify-email/VerifyEmailForm.tsx @@ -198,8 +198,7 @@ export default function VerifyEmailForm({ We sent a verification code to your - email address. Please enter the code - to verify your email address. + email address. )} diff --git a/src/app/globals.css b/src/app/globals.css index bcb47510..cb32e061 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -21,8 +21,8 @@ --accent-foreground: 24 9.8% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 60 9.1% 97.8%; - --border: 20 5.9% 85%; - --input: 20 5.9% 85%; + --border: 20 5.9% 80%; + --input: 20 5.9% 75%; --ring: 24.6 95% 53.1%; --radius: 0.75rem; --chart-1: 12 76% 61%; @@ -49,8 +49,8 @@ --accent-foreground: 60 9.1% 97.8%; --destructive: 0 72.2% 50.6%; --destructive-foreground: 60 9.1% 97.8%; - --border: 12 6.5% 25.0%; - --input: 12 6.5% 25.0%; + --border: 12 6.5% 30.0%; + --input: 12 6.5% 35.0%; --ring: 20.5 90.2% 48.2%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 02a9daba..a892ccef 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -37,11 +37,11 @@ export default async function RootLayout({ > {/* Main content */} -
{children}
+
{children}
{/* Footer */} -