feat: cloud and ee (#805)

* stripe init
git submodules for enterprise modules

* * Cloud billing UI - WIP
* Proxy websockets in dev mode
* Separate workspace login and creation for cloud
* Other fixes

* feat: billing (cloud)

* * add domain service
* prepare links from workspace hostname

* WIP

* Add exchange token generation
* Validate JWT token type during verification

* domain service

* add SkipTransform decorator

* * updates (server)
* add new packages
* new sso migration file

* WIP

* Fix hostname generation

* WIP

* WIP

* Reduce input error font-size
* set max password length

* jwt package

* license page - WIP

* * License management UI
* Move license key store to db

* add reflector

* SSO enforcement

* * Add default plan
* Add usePlan hook

* * Fix auth container margin in mobile
* Redirect login and home to select page in cloud

* update .gitignore

* Default to yearly

* * Trial messaging
* Handle ended trials

* Don't set to readonly on collab disconnect (Cloud)

* Refine trial (UI)
* Fix bug caused by using jotai optics atom in AppHeader component

* configurable database maximum pool

* Close SSO form on save

* wip

* sync

* Only show sign-in in cloud

* exclude base api part from workspaceId check

* close db connection beforeApplicationShutdown

* Add health/live endpoint

* clear cookie on hostname change

* reset currentUser atom

* Change text

* return 401 if workspace does not match

* feat: show user workspace list in cloud login page

* sync

* Add home path

* Prefetch to speed up queries

* * Add robots.txt
* Disallow login and forgot password routes

* wildcard user-agent

* Fix space query cache

* fix

* fix

* use space uuid for recent pages

* prefetch billing plans

* enhance license page

* sync

apps/client/src/ee/components/cloud-login-form.tsx

@@ -0,0 +1,96 @@
+import * as z from "zod";
+import { useForm, zodResolver } from "@mantine/form";
+import {
+  Container,
+  Title,
+  TextInput,
+  Button,
+  Box,
+  Text,
+  Anchor,
+  Divider,
+} from "@mantine/core";
+import classes from "../../features/auth/components/auth.module.css";
+import { getCheckHostname } from "@/features/workspace/services/workspace-service.ts";
+import { useState } from "react";
+import { getSubdomainHost } from "@/lib/config.ts";
+import { Link } from "react-router-dom";
+import APP_ROUTE from "@/lib/app-route.ts";
+import { useTranslation } from "react-i18next";
+import JoinedWorkspaces from "@/ee/components/joined-workspaces.tsx";
+import { useJoinedWorkspacesQuery } from "@/ee/cloud/query/cloud-query.ts";
+
+const formSchema = z.object({
+  hostname: z.string().min(1, { message: "subdomain is required" }),
+});
+
+export function CloudLoginForm() {
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const { data: joinedWorkspaces } = useJoinedWorkspacesQuery();
+
+  const form = useForm<any>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      hostname: "",
+    },
+  });
+
+  async function onSubmit(data: { hostname: string }) {
+    setIsLoading(true);
+
+    try {
+      const checkHostname = await getCheckHostname(data.hostname);
+      window.location.href = checkHostname.hostname;
+    } catch (err) {
+      if (err?.status === 404) {
+        form.setFieldError("hostname", "We could not find this workspace");
+      } else {
+        form.setFieldError("hostname", "An error occurred");
+      }
+    }
+
+    setIsLoading(false);
+  }
+
+  return (
+    <div>
+      <Container size={420} className={classes.container}>
+        <Box p="xl" className={classes.containerBox}>
+          <Title order={2} ta="center" fw={500} mb="md">
+            {t("Login")}
+          </Title>
+
+          <JoinedWorkspaces />
+
+          {joinedWorkspaces?.length > 0 && (
+            <Divider my="xs" label="OR" labelPosition="center" />
+          )}
+
+          <form onSubmit={form.onSubmit(onSubmit)}>
+            <TextInput
+              type="text"
+              placeholder="my-team"
+              description="Enter your workspace hostname"
+              label="Workspace hostname"
+              rightSection={<Text fw={500}>.{getSubdomainHost()}</Text>}
+              rightSectionWidth={150}
+              withErrorStyles={false}
+              {...form.getInputProps("hostname")}
+            />
+            <Button type="submit" fullWidth mt="xl" loading={isLoading}>
+              {t("Continue")}
+            </Button>
+          </form>
+        </Box>
+      </Container>
+
+      <Text ta="center">
+        {t("Don't have a workspace?")}{" "}
+        <Anchor component={Link} to={APP_ROUTE.AUTH.CREATE_WORKSPACE} fw={500}>
+          {t("Create new workspace")}
+        </Anchor>
+      </Text>
+    </div>
+  );
+}

apps/client/src/ee/components/joined-workspaces.module.css

@@ -0,0 +1,13 @@
+.workspace {
+    display: block;
+    width: 100%;
+    padding: var(--mantine-spacing-xs);
+    margin-bottom: var(--mantine-spacing-xs);
+    color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
+    border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5));
+    border-radius: var(--mantine-spacing-xs);
+
+    @mixin hover {
+        background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
+    }
+}

apps/client/src/ee/components/joined-workspaces.tsx

@@ -0,0 +1,49 @@
+import { Group, Text, UnstyledButton } from "@mantine/core";
+import { useJoinedWorkspacesQuery } from "../cloud/query/cloud-query";
+import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
+import classes from "./joined-workspaces.module.css";
+import { IconChevronRight } from "@tabler/icons-react";
+import { getHostnameUrl } from "@/ee/utils.ts";
+import { Link } from "react-router-dom";
+import { IWorkspace } from "@/features/workspace/types/workspace.types.ts";
+
+export default function JoinedWorkspaces() {
+  const { data, isLoading } = useJoinedWorkspacesQuery();
+  if (isLoading || !data || data?.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {data.map((workspace: Partial<IWorkspace>, index) => (
+        <UnstyledButton
+          key={index}
+          component={Link}
+          to={getHostnameUrl(workspace?.hostname) + "/home"}
+          className={classes.workspace}
+        >
+          <Group wrap="nowrap">
+            <CustomAvatar
+              avatarUrl={workspace?.logo}
+              name={workspace?.name}
+              variant="filled"
+              size="md"
+            />
+
+            <div style={{ flex: 1 }}>
+              <Text size="sm" fw={500} lineClamp={1}>
+                {workspace?.name}
+              </Text>
+
+              <Text c="dimmed" size="sm">
+                {getHostnameUrl(workspace?.hostname)?.split("//")[1]}
+              </Text>
+            </div>
+
+            <IconChevronRight size={16} />
+          </Group>
+        </UnstyledButton>
+      ))}
+    </>
+  );
+}

apps/client/src/ee/components/manage-hostname.tsx

@@ -0,0 +1,119 @@
+import { Button, Group, Text, Modal, TextInput } from "@mantine/core";
+import * as z from "zod";
+import { useState } from "react";
+import { useDisclosure } from "@mantine/hooks";
+import * as React from "react";
+import { useForm, zodResolver } from "@mantine/form";
+import { notifications } from "@mantine/notifications";
+import { useTranslation } from "react-i18next";
+import { getSubdomainHost } from "@/lib/config.ts";
+import { IWorkspace } from "@/features/workspace/types/workspace.types.ts";
+import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
+import { getHostnameUrl } from "@/ee/utils.ts";
+import { useAtom } from "jotai/index";
+import {
+  currentUserAtom,
+  workspaceAtom,
+} from "@/features/user/atoms/current-user-atom.ts";
+import useUserRole from "@/hooks/use-user-role.tsx";
+import { RESET } from "jotai/utils";
+
+export default function ManageHostname() {
+  const { t } = useTranslation();
+  const [opened, { open, close }] = useDisclosure(false);
+  const [workspace] = useAtom(workspaceAtom);
+  const { isAdmin } = useUserRole();
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">{t("Hostname")}</Text>
+        <Text size="sm" c="dimmed" fw={500}>
+          {workspace?.hostname}.{getSubdomainHost()}
+        </Text>
+      </div>
+
+      {isAdmin && (
+        <Button onClick={open} variant="default">
+          {t("Change hostname")}
+        </Button>
+      )}
+
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={t("Change hostname")}
+        centered
+      >
+        <ChangeHostnameForm onClose={close} />
+      </Modal>
+    </Group>
+  );
+}
+
+const formSchema = z.object({
+  hostname: z.string().min(4),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+interface ChangeHostnameFormProps {
+  onClose?: () => void;
+}
+function ChangeHostnameForm({ onClose }: ChangeHostnameFormProps) {
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentUser, setCurrentUser] = useAtom(currentUserAtom);
+
+  const form = useForm<FormValues>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      hostname: currentUser?.workspace?.hostname,
+    },
+  });
+
+  async function handleSubmit(data: Partial<IWorkspace>) {
+    setIsLoading(true);
+
+    if (data.hostname === currentUser?.workspace?.hostname) {
+      onClose();
+      return;
+    }
+
+    try {
+      await updateWorkspace({
+        hostname: data.hostname,
+      });
+      setCurrentUser(RESET);
+      window.location.href = getHostnameUrl(data.hostname.toLowerCase());
+    } catch (err) {
+      notifications.show({
+        message: err?.response?.data?.message,
+        color: "red",
+      });
+    }
+    setIsLoading(false);
+  }
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <TextInput
+        type="text"
+        placeholder="e.g my-team"
+        label="Hostname"
+        variant="filled"
+        rightSection={<Text fw={500}>.{getSubdomainHost()}</Text>}
+        rightSectionWidth={150}
+        withErrorStyles={false}
+        width={200}
+        {...form.getInputProps("hostname")}
+      />
+
+      <Group justify="flex-end" mt="md">
+        <Button type="submit" disabled={isLoading} loading={isLoading}>
+          {t("Change hostname")}
+        </Button>
+      </Group>
+    </form>
+  );
+}

apps/client/src/ee/components/sso-cloud-signup.tsx

@@ -0,0 +1,25 @@
+import { Button, Divider, Stack } from "@mantine/core";
+import { getGoogleSignupUrl } from "@/ee/security/sso.utils.ts";
+import { GoogleIcon } from "@/components/icons/google-icon.tsx";
+
+export default function SsoCloudSignup() {
+  const handleSsoLogin = () => {
+    window.location.href = getGoogleSignupUrl();
+  };
+
+  return (
+    <>
+      <Stack align="stretch" justify="center" gap="sm">
+        <Button
+          onClick={handleSsoLogin}
+          leftSection={<GoogleIcon size={16} />}
+          variant="default"
+          fullWidth
+        >
+          Signup with Google
+        </Button>
+      </Stack>
+      <Divider my="xs" label="OR" labelPosition="center" />
+    </>
+  );
+}

apps/client/src/ee/components/sso-login.tsx

@@ -0,0 +1,57 @@
+import { useWorkspacePublicDataQuery } from "@/features/workspace/queries/workspace-query.ts";
+import { Button, Divider, Stack } from "@mantine/core";
+import { IconLock } from "@tabler/icons-react";
+import { IAuthProvider } from "@/ee/security/types/security.types.ts";
+import { buildSsoLoginUrl } from "@/ee/security/sso.utils.ts";
+import { SSO_PROVIDER } from "@/ee/security/contants.ts";
+import { GoogleIcon } from "@/components/icons/google-icon.tsx";
+import { isCloud } from "@/lib/config.ts";
+
+export default function SsoLogin() {
+  const { data, isLoading } = useWorkspacePublicDataQuery();
+
+  if (!data?.authProviders || data?.authProviders?.length === 0) {
+    return null;
+  }
+
+  const handleSsoLogin = (provider: IAuthProvider) => {
+    window.location.href = buildSsoLoginUrl({
+      providerId: provider.id,
+      type: provider.type,
+      workspaceId: data.id,
+    });
+  };
+
+  return (
+    <>
+      {(isCloud() || data.hasLicenseKey) && (
+        <>
+          <Stack align="stretch" justify="center" gap="sm">
+            {data.authProviders.map((provider) => (
+              <div key={provider.id}>
+                <Button
+                  onClick={() => handleSsoLogin(provider)}
+                  leftSection={
+                    provider.type === SSO_PROVIDER.GOOGLE ? (
+                      <GoogleIcon size={16} />
+                    ) : (
+                      <IconLock size={16} />
+                    )
+                  }
+                  variant="default"
+                  fullWidth
+                >
+                  {provider.name}
+                </Button>
+              </div>
+            ))}
+          </Stack>
+
+          {!data.enforceSso && (
+            <Divider my="xs" label="OR" labelPosition="center" />
+          )}
+        </>
+      )}
+    </>
+  );
+}