Merge branch 'main' into release-05-12-25.staging

Author: kof

apps/builder/.env

@@ -34,6 +34,10 @@ POSTGREST_API_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIs
 # PUBLISHER_ENDPOINT=https://publisher.webstudio.is
 # PUBLISHER_TOKEN=
 
+# Username and password displayed in wstd domain settings
+# STAGING_USERNAME=admin
+# STAGING_PASSWORD=webstudio
+
 # Base origin for accessing user-generated build (canvas / preview / etc)
 # Should contain protocol and host (e.g. https://example.com)
 # Will be detected automatically in development environments like localhost or preview deployment

apps/builder/app/builder/builder.tsx

@@ -33,6 +33,8 @@ import {
   $isContentMode,
   $userPlanFeatures,
   subscribeModifierKeys,
+  $stagingUsername,
+  $stagingPassword,
 } from "~/shared/nano-states";
 import { $settings, type Settings } from "./shared/client-settings";
 import { builderUrl, getCanvasUrl } from "~/shared/router-utils";
@@ -224,6 +226,8 @@ export type BuilderProps = {
   authPermit: AuthPermit;
   authTokenPermissions: TokenPermissions;
   userPlanFeatures: UserPlanFeatures;
+  stagingUsername: string;
+  stagingPassword: string;
 };
 
 export const Builder = ({
@@ -232,6 +236,8 @@ export const Builder = ({
   authPermit,
   userPlanFeatures,
   authTokenPermissions,
+  stagingUsername,
+  stagingPassword,
 }: BuilderProps) => {
   useMount(initBuilderApi);
 
@@ -241,6 +247,8 @@ export const Builder = ({
     $authToken.set(authToken);
     $userPlanFeatures.set(userPlanFeatures);
     $authTokenPermissions.set(authTokenPermissions);
+    $stagingUsername.set(stagingUsername);
+    $stagingPassword.set(stagingPassword);
 
     const controller = new AbortController();
 

apps/builder/app/builder/features/topbar/publish.tsx

@@ -57,6 +57,8 @@ import {
   $project,
   $publishedOrigin,
   $userPlanFeatures,
+  $stagingUsername,
+  $stagingPassword,
 } from "~/shared/nano-states";
 import {
   $publishDialog,
@@ -72,6 +74,7 @@ import {
   GearIcon,
   UpgradeIcon,
   HelpIcon,
+  InfoCircleIcon,
 } from "@webstudio-is/icons";
 import { AddDomain } from "./add-domain";
 import { humanizeString } from "~/shared/string-utils";
@@ -100,6 +103,8 @@ const ChangeProjectDomain = ({
   const id = useId();
   const publishedOrigin = useStore($publishedOrigin);
   const selectedPagePath = useStore($selectedPagePath);
+  const stagingUsername = useStore($stagingUsername);
+  const stagingPassword = useStore($stagingPassword);
 
   const [domain, setDomain] = useState(project.domain);
   const [error, setError] = useState<string>();
@@ -201,9 +206,11 @@ const ChangeProjectDomain = ({
         </Grid>
       }
     >
-      <Grid gap={3}>
-        <Grid gap={1}>
-          <Label htmlFor={id}>Domain:</Label>
+      <Grid gap={2}>
+        <Grid flow="column" align="center" gap={2}>
+          <Label htmlFor={id} css={{ width: theme.spacing[20] }}>
+            Domain:
+          </Label>
           <InputField
             text="mono"
             id={id}
@@ -231,6 +238,47 @@ const ChangeProjectDomain = ({
           />
           {error !== undefined && <Text color="destructive">{error}</Text>}
         </Grid>
+        {stagingUsername && (
+          <Grid flow="column" align="center" gap={2}>
+            <Label
+              htmlFor={`${id}-username`}
+              css={{ width: theme.spacing[20] }}
+            >
+              Username:
+            </Label>
+            <InputField
+              text="mono"
+              id={`${id}-username`}
+              type="text"
+              value={stagingUsername}
+              readOnly
+            />
+          </Grid>
+        )}
+        {stagingPassword && (
+          <Grid flow="column" align="center" gap={2}>
+            <Flex align="center" gap={1} css={{ width: theme.spacing[20] }}>
+              <Label htmlFor={`${id}-password`}>Password:</Label>
+              <Tooltip
+                content="This password is read-only and cannot be changed. It is the same for every user. This prevents phishing attacks."
+                variant="wrapped"
+              >
+                <InfoCircleIcon
+                  tabIndex={0}
+                  style={{ flexShrink: 0 }}
+                  color={rawTheme.colors.foregroundSubtle}
+                />
+              </Tooltip>
+            </Flex>
+            <InputField
+              text="mono"
+              id={`${id}-password`}
+              type="text"
+              value={stagingPassword}
+              readOnly
+            />
+          </Grid>
+        )}
       </Grid>
     </CollapsibleDomainSection>
   );

apps/builder/app/env/env.server.ts

@@ -56,6 +56,9 @@ const env = {
 
   PUBLISHER_HOST: process.env.PUBLISHER_HOST || "wstd.work",
 
+  STAGING_USERNAME: process.env.STAGING_USERNAME ?? "admin",
+  STAGING_PASSWORD: process.env.STAGING_PASSWORD ?? "webstudio",
+
   FEATURES: process.env.FEATURES ?? "",
 
   // current user plan features (default)

apps/builder/app/routes/_ui.(builder).tsx

@@ -201,6 +201,8 @@ export const loader = async (loaderArgs: LoaderFunctionArgs) => {
         authTokenPermissions,
         authPermit,
         userPlanFeatures,
+        stagingUsername: env.STAGING_USERNAME,
+        stagingPassword: env.STAGING_PASSWORD,
       } as const,
       {
         headers,

apps/builder/app/shared/nano-states/misc.ts

@@ -334,6 +334,9 @@ export const $authTokenPermissions = atom<TokenPermissions>({
 
 export const $authToken = atom<string | undefined>(undefined);
 
+export const $stagingUsername = atom<string | undefined>();
+export const $stagingPassword = atom<string | undefined>();
+
 export const $isContentModeAllowed = computed(
   [$authToken, $userPlanFeatures],
   (token, userPlanFeatures) => {