Merge remote-tracking branch 'origin/main' into Merged-Downstream

# Conflicts:
#	apps/client/src/features/auth/hooks/use-auth.ts
#	apps/client/src/features/editor/extensions/extensions.ts

apps/client/package.json

@@ -41,7 +41,6 @@
     "react-drawio": "^0.2.0",
     "react-error-boundary": "^4.0.13",
     "react-helmet-async": "^2.0.5",
-    "react-moveable": "^0.56.0",
     "react-router-dom": "^6.26.1",
     "socket.io-client": "^4.7.5",
     "tippy.js": "^6.3.7",

apps/client/src/App.tsx

@@ -24,6 +24,8 @@ import PageRedirect from "@/pages/page/page-redirect.tsx";
 import Layout from "@/components/layouts/global/layout.tsx";
 import { ErrorBoundary } from "react-error-boundary";
 import InviteSignup from "@/pages/auth/invite-signup.tsx";
+import ForgotPassword from "@/pages/auth/forgot-password.tsx";
+import PasswordReset from "./pages/auth/password-reset";
 
 export default function App() {
   const [, setSocket] = useAtom(socketAtom);
@@ -63,6 +65,8 @@ export default function App() {
         <Route path={"/login"} element={<LoginPage />} />
         <Route path={"/invites/:invitationId"} element={<InviteSignup />} />
         <Route path={"/setup/register"} element={<SetupWorkspace />} />
+        <Route path={"/forgot-password"} element={<ForgotPassword />} />
+        <Route path={"/password-reset"} element={<PasswordReset />} />
 
         <Route path={"/p/:pageSlug"} element={<PageRedirect />} />
 

apps/client/src/components/ui/error-404.tsx

@@ -1,19 +1,25 @@
 import { Title, Text, Button, Container, Group } from "@mantine/core";
 import classes from "./error-404.module.css";
 import { Link } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
 
 export function Error404() {
   return (
-    <Container className={classes.root}>
-      <Title className={classes.title}>404 Page Not Found</Title>
-      <Text c="dimmed" size="lg" ta="center" className={classes.description}>
-        Sorry, we can't find the page you are looking for.
-      </Text>
-      <Group justify="center">
-        <Button component={Link} to={"/home"} variant="subtle" size="md">
-          Take me back to homepage
-        </Button>
-      </Group>
-    </Container>
+    <>
+      <Helmet>
+        <title>404 page not found - Docmost</title>
+      </Helmet>
+      <Container className={classes.root}>
+        <Title className={classes.title}>404 Page Not Found</Title>
+        <Text c="dimmed" size="lg" ta="center" className={classes.description}>
+          Sorry, we can't find the page you are looking for.
+        </Text>
+        <Group justify="center">
+          <Button component={Link} to={"/home"} variant="subtle" size="md">
+            Take me back to homepage
+          </Button>
+        </Group>
+      </Container>
+    </>
   );
 }

apps/client/src/features/auth/components/forgot-password-form.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+import * as z from "zod";
+import { useForm, zodResolver } from "@mantine/form";
+import useAuth from "@/features/auth/hooks/use-auth";
+import { IForgotPassword } from "@/features/auth/types/auth.types";
+import { Box, Button, Container, Text, TextInput, Title } from "@mantine/core";
+import classes from "./auth.module.css";
+import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
+
+const formSchema = z.object({
+  email: z
+    .string()
+    .min(1, { message: "Email is required" })
+    .email({ message: "Invalid email address" }),
+});
+
+export function ForgotPasswordForm() {
+  const { forgotPassword, isLoading } = useAuth();
+  const [isTokenSent, setIsTokenSent] = useState<boolean>(false);
+  useRedirectIfAuthenticated();
+
+  const form = useForm<IForgotPassword>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      email: "",
+    },
+  });
+
+  async function onSubmit(data: IForgotPassword) {
+    if (await forgotPassword(data)) {
+      setIsTokenSent(true);
+    }
+  }
+
+  return (
+    <Container size={420} my={40} className={classes.container}>
+      <Box p="xl" mt={200}>
+        <Title order={2} ta="center" fw={500} mb="md">
+          Forgot password
+        </Title>
+
+        <form onSubmit={form.onSubmit(onSubmit)}>
+          {!isTokenSent && (
+            <TextInput
+              id="email"
+              type="email"
+              label="Email"
+              placeholder="email@example.com"
+              variant="filled"
+              {...form.getInputProps("email")}
+            />
+          )}
+
+          {isTokenSent && (
+            <Text>
+              A password reset link has been sent to your email. Please check
+              your inbox.
+            </Text>
+          )}
+
+          {!isTokenSent && (
+            <Button type="submit" fullWidth mt="xl" loading={isLoading}>
+              Send reset link
+            </Button>
+          )}
+        </form>
+      </Box>
+    </Container>
+  );
+}

apps/client/src/features/auth/components/login-form.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import * as z from "zod";
 import { useForm, zodResolver } from "@mantine/form";
 import useAuth from "@/features/auth/hooks/use-auth";
@@ -10,9 +9,13 @@ import {
   Button,
   PasswordInput,
   Box,
+
+  Anchor,
 } from "@mantine/core";
 import classes from "./auth.module.css";
 import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
+import { Link, useNavigate } from "react-router-dom";
+import APP_ROUTE from "@/lib/app-route.ts";
 
 const formSchema = z.object({
   email: z
@@ -62,10 +65,20 @@ export function LoginForm() {
             mt="md"
             {...form.getInputProps("password")}
           />
+
           <Button type="submit" fullWidth mt="xl" loading={isLoading}>
             Sign In
           </Button>
         </form>
+
+        <Anchor
+          to={APP_ROUTE.AUTH.FORGOT_PASSWORD}
+          component={Link}
+          underline="never"
+          size="sm"
+        >
+          Forgot your password?
+        </Anchor>
       </Box>
     </Container>
   );

apps/client/src/features/auth/components/password-reset-form.tsx

@@ -0,0 +1,67 @@
+import * as z from "zod";
+import { useForm, zodResolver } from "@mantine/form";
+import useAuth from "@/features/auth/hooks/use-auth";
+import { IPasswordReset } from "@/features/auth/types/auth.types";
+import {
+  Box,
+  Button,
+  Container,
+  PasswordInput,
+  Text,
+  Title,
+} from "@mantine/core";
+import classes from "./auth.module.css";
+import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
+
+const formSchema = z.object({
+  newPassword: z
+    .string()
+    .min(8, { message: "Password must contain at least 8 characters" }),
+});
+
+interface PasswordResetFormProps {
+  resetToken?: string;
+}
+
+export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
+  const { passwordReset, isLoading } = useAuth();
+  useRedirectIfAuthenticated();
+
+  const form = useForm<IPasswordReset>({
+    validate: zodResolver(formSchema),
+    initialValues: {
+      newPassword: "",
+    },
+  });
+
+  async function onSubmit(data: IPasswordReset) {
+    await passwordReset({
+      token: resetToken,
+      newPassword: data.newPassword
+    })
+  }
+
+  return (
+    <Container size={420} my={40} className={classes.container}>
+      <Box p="xl" mt={200}>
+        <Title order={2} ta="center" fw={500} mb="md">
+          Password reset
+        </Title>
+
+        <form onSubmit={form.onSubmit(onSubmit)}>
+          <PasswordInput
+            label="New password"
+            placeholder="Your new password"
+            variant="filled"
+            mt="md"
+            {...form.getInputProps("newPassword")}
+          />
+
+          <Button type="submit" fullWidth mt="xl" loading={isLoading}>
+            Set password
+          </Button>
+        </form>
+      </Box>
+    </Container>
+  );
+}

apps/client/src/features/auth/hooks/use-auth.ts

@@ -1,10 +1,23 @@
 import { useState } from "react";
-import { login, ntlmLogin, setupWorkspace } from "@/features/auth/services/auth-service";
+import {
+  forgotPassword,
+  login,
+  ntlmLogin,
+  passwordReset,
+  setupWorkspace,
+  verifyUserToken,
+} from "@/features/auth/services/auth-service";
 import { useNavigate } from "react-router-dom";
 import { useAtom } from "jotai";
 import { authTokensAtom } from "@/features/auth/atoms/auth-tokens-atom";
 import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
-import { ILogin, ISetupWorkspace } from "@/features/auth/types/auth.types";
+import {
+  IForgotPassword,
+  ILogin,
+  IPasswordReset,
+  ISetupWorkspace,
+  IVerifyUserToken,
+} from "@/features/auth/types/auth.types";
 import { notifications } from "@mantine/notifications";
 import { IAcceptInvite } from "@/features/workspace/types/workspace.types.ts";
 import { acceptInvitation } from "@/features/workspace/services/workspace-service.ts";
@@ -95,6 +108,28 @@ export default function useAuth() {
     }
   };
 
+  const handlePasswordReset = async (data: IPasswordReset) => {
+    setIsLoading(true);
+
+    try {
+      const res = await passwordReset(data);
+      setIsLoading(false);
+
+      setAuthToken(res.tokens);
+
+      navigate(APP_ROUTE.HOME);
+      notifications.show({
+        message: "Password reset was successful",
+      });
+    } catch (err) {
+      setIsLoading(false);
+      notifications.show({
+        message: err.response?.data.message,
+        color: "red",
+      });
+    }
+  };
+
   const handleIsAuthenticated = async () => {
     if (!authToken) {
       return false;
@@ -124,12 +159,51 @@ export default function useAuth() {
     navigate(APP_ROUTE.AUTH.LOGIN);
   };
 
+  const handleForgotPassword = async (data: IForgotPassword) => {
+    setIsLoading(true);
+
+    try {
+      await forgotPassword(data);
+      setIsLoading(false);
+
+      return true;
+    } catch (err) {
+      console.log(err);
+      setIsLoading(false);
+      notifications.show({
+        message: err.response?.data.message,
+        color: "red",
+      });
+
+      return false;
+    }
+  };
+
+  const handleVerifyUserToken = async (data: IVerifyUserToken) => {
+    setIsLoading(true);
+
+    try {
+      await verifyUserToken(data);
+      setIsLoading(false);
+    } catch (err) {
+      console.log(err);
+      setIsLoading(false);
+      notifications.show({
+        message: err.response?.data.message,
+        color: "red",
+      });
+    }
+  };
+
   return {
     signIn: handleSignIn,
     ntlmSignIn: handleNtlmSignIn,
     invitationSignup: handleInvitationSignUp,
     setupWorkspace: handleSetupWorkspace,
     isAuthenticated: handleIsAuthenticated,
+    forgotPassword: handleForgotPassword,
+    passwordReset: handlePasswordReset,
+    verifyUserToken: handleVerifyUserToken,
     logout: handleLogout,
     hasTokens,
     isLoading,

apps/client/src/features/auth/queries/auth-query.tsx

@@ -0,0 +1,14 @@
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
+import { verifyUserToken } from "../services/auth-service";
+import { IVerifyUserToken } from "../types/auth.types";
+
+export function useVerifyUserTokenQuery(
+    verify: IVerifyUserToken,
+  ): UseQueryResult<any, Error> {
+    return useQuery({
+      queryKey: ["verify-token", verify],
+      queryFn: () => verifyUserToken(verify),
+      enabled: !!verify.token,
+      staleTime: 0,
+    });
+  }

apps/client/src/features/auth/services/auth-service.ts

@@ -1,10 +1,13 @@
 import api from "@/lib/api-client";
 import {
   IChangePassword,
+  IForgotPassword,
   ILogin,
+  IPasswordReset,
   IRegister,
   ISetupWorkspace,
   ITokenResponse,
+  IVerifyUserToken,
 } from "@/features/auth/types/auth.types";
 import axios from "axios";
 
@@ -26,15 +29,30 @@ export async function register(data: IRegister): Promise<ITokenResponse> {
 }*/
 
 export async function changePassword(
-  data: IChangePassword,
+  data: IChangePassword
 ): Promise<IChangePassword> {
   const req = await api.post<IChangePassword>("/auth/change-password", data);
   return req.data;
 }
 
 export async function setupWorkspace(
-  data: ISetupWorkspace,
+  data: ISetupWorkspace
 ): Promise<ITokenResponse> {
   const req = await api.post<ITokenResponse>("/auth/setup", data);
   return req.data;
 }
+
+export async function forgotPassword(data: IForgotPassword): Promise<void> {
+  await api.post<any>("/auth/forgot-password", data);
+}
+
+export async function passwordReset(
+  data: IPasswordReset
+): Promise<ITokenResponse> {
+  const req = await api.post<any>("/auth/password-reset", data);
+  return req.data;
+}
+
+export async function verifyUserToken(data: IVerifyUserToken): Promise<any> {
+  return api.post<any>("/auth/verify-token", data);
+}

apps/client/src/features/auth/types/auth.types.ts

@@ -29,3 +29,17 @@ export interface IChangePassword {
   oldPassword: string;
   newPassword: string;
 }
+
+export interface IForgotPassword {
+  email: string;
+}
+
+export interface IPasswordReset {
+  token?: string;
+  newPassword: string;
+}
+
+export interface IVerifyUserToken {
+  token: string;
+  type: string;
+}

apps/client/src/features/editor/components/code-block/code-block-view.tsx

@@ -49,7 +49,7 @@ export default function CodeBlockView(props: NodeViewProps) {
         <Select
           placeholder="auto"
           checkIconPosition="right"
-          data={extension.options.lowlight.listLanguages()}
+          data={extension.options.lowlight.listLanguages().sort()}
           value={languageValue}
           onChange={changeLanguage}
           searchable

apps/client/src/features/editor/components/math/math.module.css

@@ -33,7 +33,7 @@
     border-radius: 4px;
     transition: background-color 0.2s;
     margin: 0 0.1rem;
-    overflow-x: scroll;
+    overflow-x: auto;
 
     .textInput {
         width: 400px;

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -17,7 +17,8 @@ import {
   IconPhoto,
   IconTable,
   IconTypography,
-  IconMenu4
+  IconMenu4,
+  IconCalendar,
 } from "@tabler/icons-react";
 import {
   CommandProps,
@@ -345,6 +346,26 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       command: ({ editor, range }: CommandProps) =>
         editor.chain().focus().deleteRange(range).setExcalidraw().run(),
     },
+    {
+      title: "Date",
+      description: "Insert current date",
+      searchTerms: ["date", "today"],
+      icon: IconCalendar,
+      command: ({ editor, range }: CommandProps) => {
+        const currentDate = new Date().toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+        });
+
+        return editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .insertContent(currentDate)
+          .run();
+      },
+    },
   ],
 };
 

apps/client/src/features/editor/extensions/extensions.ts

@@ -55,10 +55,27 @@ import CodeBlockView from "@/features/editor/components/code-block/code-block-vi
 import DrawioView from "../components/drawio/drawio-view";
 import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view.tsx";
 import plaintext from "highlight.js/lib/languages/plaintext";
+import powershell from "highlight.js/lib/languages/powershell";
+import elixir from "highlight.js/lib/languages/elixir";
+import erlang from "highlight.js/lib/languages/erlang";
+import dockerfile from "highlight.js/lib/languages/dockerfile";
+import clojure from "highlight.js/lib/languages/clojure";
+import fortran from "highlight.js/lib/languages/fortran";
+import haskell from "highlight.js/lib/languages/haskell";
+import scala from "highlight.js/lib/languages/scala";
 import TableOfContentsView from "../components/table-of-contents/table-of-contents-view";
 
 const lowlight = createLowlight(common);
 lowlight.register("mermaid", plaintext);
+lowlight.register("powershell", powershell);
+lowlight.register("powershell", powershell);
+lowlight.register("erlang", erlang);
+lowlight.register("elixir", elixir);
+lowlight.register("dockerfile", dockerfile);
+lowlight.register("clojure", clojure);
+lowlight.register("fortran", fortran);
+lowlight.register("haskell", haskell);
+lowlight.register("scala", scala);
 
 export const mainExtensions = [
   StarterKit.configure({

apps/client/src/features/space/components/sidebar/space-name.module.css

@@ -1,6 +0,0 @@
-.spaceName {
-    display: block;
-    width: 100%;
-    padding: var(--mantine-spacing-sm);
-    color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
-  }

apps/client/src/features/space/components/sidebar/space-name.tsx

@@ -1,19 +0,0 @@
-import { UnstyledButton, Group, Text } from "@mantine/core";
-import classes from "./space-name.module.css";
-
-interface SpaceNameProps {
-  spaceName: string;
-}
-export function SpaceName({ spaceName }: SpaceNameProps) {
-  return (
-    <UnstyledButton className={classes.spaceName}>
-      <Group>
-        <div style={{ flex: 1 }}>
-          <Text size="md" fw={500} lineClamp={1}>
-            {spaceName}
-          </Text>
-        </div>
-      </Group>
-    </UnstyledButton>
-  );
-}

apps/client/src/features/space/components/sidebar/space-select.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react';
+import { useDebouncedValue } from '@mantine/hooks';
+import { Avatar, Group, Select, SelectProps, Text } from '@mantine/core';
+import { useGetSpacesQuery } from '@/features/space/queries/space-query.ts';
+import { ISpace } from '../../types/space.types';
+
+interface SpaceSelectProps {
+  onChange: (value: string) => void;
+  value?: string;
+  label?: string;
+}
+
+const renderSelectOption: SelectProps['renderOption'] = ({ option }) => (
+  <Group gap="sm">
+    <Avatar color="initials" variant="filled" name={option.label} size={20} />
+    <div>
+      <Text size="sm">{option.label}</Text>
+    </div>
+  </Group>
+);
+
+export function SpaceSelect({ onChange, label, value }: SpaceSelectProps) {
+  const [searchValue, setSearchValue] = useState('');
+  const [debouncedQuery] = useDebouncedValue(searchValue, 500);
+  const { data: spaces, isLoading } = useGetSpacesQuery({
+    query: debouncedQuery,
+    limit: 50,
+  });
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    if (spaces) {
+      const spaceData = spaces?.items
+        .filter((space: ISpace) => space.slug !== value)
+        .map((space: ISpace) => {
+          return {
+            label: space.name,
+            value: space.slug,
+          };
+        });
+
+      const filteredSpaceData = spaceData.filter(
+        (user) =>
+          !data.find((existingUser) => existingUser.value === user.value)
+      );
+      setData((prevData) => [...prevData, ...filteredSpaceData]);
+    }
+  }, [spaces]);
+
+  return (
+    <Select
+      data={data}
+      renderOption={renderSelectOption}
+      maxDropdownHeight={300}
+      //label={label || 'Select space'}
+      placeholder="Search for spaces"
+      searchable
+      searchValue={searchValue}
+      onSearchChange={setSearchValue}
+      clearable
+      variant="filled"
+      onChange={onChange}
+      nothingFoundMessage="No space found"
+      limit={50}
+      checkIconPosition="right"
+      comboboxProps={{ width: 300, withinPortal: false }}
+      dropdownOpened
+    />
+  );
+}

apps/client/src/features/space/components/sidebar/space-sidebar.tsx

@@ -5,8 +5,8 @@ import {
   Text,
   Tooltip,
   UnstyledButton,
-} from "@mantine/core";
-import { spotlight } from "@mantine/spotlight";
+} from '@mantine/core';
+import { spotlight } from '@mantine/spotlight';
 import {
   IconArrowDown,
   IconDots,
@@ -14,27 +14,27 @@ import {
   IconPlus,
   IconSearch,
   IconSettings,
-} from "@tabler/icons-react";
+} from '@tabler/icons-react';
 
-import classes from "./space-sidebar.module.css";
-import React, { useMemo } from "react";
-import { useAtom } from "jotai";
-import { SearchSpotlight } from "@/features/search/search-spotlight.tsx";
-import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
-import { Link, useLocation, useParams } from "react-router-dom";
-import clsx from "clsx";
-import { useDisclosure } from "@mantine/hooks";
-import SpaceSettingsModal from "@/features/space/components/settings-modal.tsx";
-import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
-import { SpaceName } from "@/features/space/components/sidebar/space-name.tsx";
-import { getSpaceUrl } from "@/lib/config.ts";
-import SpaceTree from "@/features/page/tree/components/space-tree.tsx";
-import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
+import classes from './space-sidebar.module.css';
+import React, { useMemo } from 'react';
+import { useAtom } from 'jotai';
+import { SearchSpotlight } from '@/features/search/search-spotlight.tsx';
+import { treeApiAtom } from '@/features/page/tree/atoms/tree-api-atom.ts';
+import { Link, useLocation, useParams } from 'react-router-dom';
+import clsx from 'clsx';
+import { useDisclosure } from '@mantine/hooks';
+import SpaceSettingsModal from '@/features/space/components/settings-modal.tsx';
+import { useGetSpaceBySlugQuery } from '@/features/space/queries/space-query.ts';
+import { getSpaceUrl } from '@/lib/config.ts';
+import SpaceTree from '@/features/page/tree/components/space-tree.tsx';
+import { useSpaceAbility } from '@/features/space/permissions/use-space-ability.ts';
 import {
   SpaceCaslAction,
   SpaceCaslSubject,
-} from "@/features/space/permissions/permissions.type.ts";
-import PageImportModal from "@/features/page/components/page-import-modal.tsx";
+} from '@/features/space/permissions/permissions.type.ts';
+import PageImportModal from '@/features/page/components/page-import-modal.tsx';
+import { SwitchSpace } from './switch-space';
 
 export function SpaceSidebar() {
   const [tree] = useAtom(treeApiAtom);
@@ -52,7 +52,7 @@ export function SpaceSidebar() {
   }
 
   function handleCreatePage() {
-    tree?.create({ parentId: null, type: "internal", index: 0 });
+    tree?.create({ parentId: null, type: 'internal', index: 0 });
   }
 
   return (
@@ -61,11 +61,12 @@ export function SpaceSidebar() {
         <div
           className={classes.section}
           style={{
-            border: "none",
-            marginBottom: "0",
+            border: 'none',
+            marginTop: 2,
+            marginBottom: 3,
           }}
         >
-          <SpaceName spaceName={space?.name} />
+          <SwitchSpace spaceName={space?.name} spaceSlug={space?.slug} />
         </div>
 
         <div className={classes.section}>
@@ -77,7 +78,7 @@ export function SpaceSidebar() {
                 classes.menu,
                 location.pathname.toLowerCase() === getSpaceUrl(spaceSlug)
                   ? classes.activeButton
-                  : "",
+                  : ''
               )}
             >
               <div className={classes.menuItemInner}>
@@ -114,7 +115,7 @@ export function SpaceSidebar() {
 
             {spaceAbility.can(
               SpaceCaslAction.Manage,
-              SpaceCaslSubject.Page,
+              SpaceCaslSubject.Page
             ) && (
               <UnstyledButton
                 className={classes.menu}
@@ -141,7 +142,7 @@ export function SpaceSidebar() {
 
             {spaceAbility.can(
               SpaceCaslAction.Manage,
-              SpaceCaslSubject.Page,
+              SpaceCaslSubject.Page
             ) && (
               <Group gap="xs">
                 <SpaceMenu spaceId={space.id} onSpaceSettings={openSettings} />
@@ -165,7 +166,7 @@ export function SpaceSidebar() {
               spaceId={space.id}
               readOnly={spaceAbility.cannot(
                 SpaceCaslAction.Manage,
-                SpaceCaslSubject.Page,
+                SpaceCaslSubject.Page
               )}
             />
           </div>

apps/client/src/features/space/components/sidebar/switch-space.module.css

@@ -0,0 +1,5 @@
+.spaceName {
+  width: 100%;
+  padding: var(--mantine-spacing-sm);
+  color: light-dark(var(--mantine-color-dark-4), var(--mantine-color-dark-0));
+}

apps/client/src/features/space/components/sidebar/switch-space.tsx

@@ -0,0 +1,62 @@
+import classes from './switch-space.module.css';
+import { useNavigate } from 'react-router-dom';
+import { SpaceSelect } from './space-select';
+import { getSpaceUrl } from '@/lib/config';
+import { Avatar, Button, Popover, Text } from '@mantine/core';
+import { IconChevronDown } from '@tabler/icons-react';
+import { useDisclosure } from '@mantine/hooks';
+
+interface SwitchSpaceProps {
+  spaceName: string;
+  spaceSlug: string;
+}
+
+export function SwitchSpace({ spaceName, spaceSlug }: SwitchSpaceProps) {
+  const [opened, { close, open, toggle }] = useDisclosure(false);
+  const navigate = useNavigate();
+
+  const handleSelect = (value: string) => {
+    if (value) {
+      navigate(getSpaceUrl(value));
+      close();
+    }
+  };
+
+  return (
+    <Popover
+      width={300}
+      position="bottom"
+      withArrow
+      shadow="md"
+      opened={opened}
+    >
+      <Popover.Target>
+        <Button
+          variant="subtle"
+          fullWidth
+          justify="space-between"
+          rightSection={<IconChevronDown size={18} />}
+          color="gray"
+          onClick={toggle}
+        >
+          <Avatar
+            size={20}
+            color="initials"
+            variant="filled"
+            name={spaceName}
+          />
+          <Text className={classes.spaceName} size="md" fw={500} lineClamp={1}>
+            {spaceName}
+          </Text>
+        </Button>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <SpaceSelect
+          label={spaceName}
+          value={spaceSlug}
+          onChange={handleSelect}
+        />
+      </Popover.Dropdown>
+    </Popover>
+  );
+}

apps/client/src/features/space/queries/space-query.ts

@@ -23,15 +23,14 @@ import {
   deleteSpace,
 } from '@/features/space/services/space-service.ts';
 import { notifications } from '@mantine/notifications';
-import { IPagination } from '@/lib/types.ts';
+import { IPagination, QueryParams } from '@/lib/types.ts';
 
-export function useGetSpacesQuery(): UseQueryResult<
-  IPagination<ISpace>,
-  Error
-> {
+export function useGetSpacesQuery(
+  params?: QueryParams
+): UseQueryResult<IPagination<ISpace>, Error> {
   return useQuery({
-    queryKey: ['spaces'],
-    queryFn: () => getSpaces(),
+    queryKey: ['spaces', params],
+    queryFn: () => getSpaces(params),
   });
 }
 

apps/client/src/features/space/services/space-service.ts

@@ -4,12 +4,12 @@ import {
   IChangeSpaceMemberRole,
   IRemoveSpaceMember,
   ISpace,
-} from '@/features/space/types/space.types';
-import { IPagination } from '@/lib/types.ts';
-import { IUser } from '@/features/user/types/user.types.ts';
+} from "@/features/space/types/space.types";
+import { IPagination, QueryParams } from "@/lib/types.ts";
+import { IUser } from "@/features/user/types/user.types.ts";
 
-export async function getSpaces(): Promise<IPagination<ISpace>> {
-  const req = await api.post('/spaces');
+export async function getSpaces(params?: QueryParams): Promise<IPagination<ISpace>> {
+  const req = await api.post("/spaces", params);
   return req.data;
 }
 

apps/client/src/lib/app-route.ts

@@ -4,6 +4,8 @@ const APP_ROUTE = {
     LOGIN: "/login",
     SIGNUP: "/signup",
     SETUP: "/setup/register",
+    FORGOT_PASSWORD: "/forgot-password",
+    PASSWORD_RESET: "/password-reset",
   },
   SETTINGS: {
     ACCOUNT: {

apps/client/src/pages/auth/forgot-password.tsx

@@ -0,0 +1,13 @@
+import { ForgotPasswordForm } from "@/features/auth/components/forgot-password-form";
+import { Helmet } from "react-helmet-async";
+
+export default function ForgotPassword() {
+    return (
+        <>
+            <Helmet>
+                <title>Forgot Password - Docmost</title>
+            </Helmet>
+            <ForgotPasswordForm />
+        </>
+    );
+}

apps/client/src/pages/auth/invite-signup.tsx

@@ -5,7 +5,7 @@ export default function InviteSignup() {
   return (
     <>
       <Helmet>
-        <title>Invitation signup</title>
+        <title>Invitation Signup - Docmost</title>
       </Helmet>
       <InviteSignUpForm />
     </>

apps/client/src/pages/auth/login.tsx

@@ -20,7 +20,7 @@ export default function LoginPage() {
   return (
     <>
       <Helmet>
-        <title>Login</title>
+        <title>Login - Docmost</title>
       </Helmet>
       {!ntlmAuth && <LoginForm />}
     </>

apps/client/src/pages/auth/password-reset.tsx

@@ -0,0 +1,53 @@
+import { Helmet } from "react-helmet-async";
+import { PasswordResetForm } from "@/features/auth/components/password-reset-form";
+import { Link, useSearchParams } from "react-router-dom";
+import { useVerifyUserTokenQuery } from "@/features/auth/queries/auth-query";
+import { Button, Container, Group, Text } from "@mantine/core";
+import APP_ROUTE from "@/lib/app-route";
+
+export default function PasswordReset() {
+  const [searchParams] = useSearchParams();
+  const { data, isLoading, isError } = useVerifyUserTokenQuery({
+    token: searchParams.get("token"),
+    type: "forgot-password",
+  });
+  const resetToken = searchParams.get("token");
+
+  if (isLoading) {
+    return <div></div>;
+  }
+
+  if (isError || !resetToken) {
+    return (
+      <>
+        <Helmet>
+          <title>Password Reset - Docmost</title>
+        </Helmet>
+        <Container my={40}>
+          <Text size="lg" ta="center">
+            Invalid or expired password reset link
+          </Text>
+          <Group justify="center">
+            <Button
+              component={Link}
+              to={APP_ROUTE.AUTH.LOGIN}
+              variant="subtle"
+              size="md"
+            >
+              Goto login page
+            </Button>
+          </Group>
+        </Container>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>Password Reset - Docmost</title>
+      </Helmet>
+      <PasswordResetForm resetToken={resetToken} />
+    </>
+  );
+}

apps/client/src/pages/auth/setup-workspace.tsx

@@ -32,7 +32,7 @@ export default function SetupWorkspace() {
     return (
       <>
         <Helmet>
-          <title>Setup workspace</title>
+          <title>Setup Workspace - Docmost</title>
         </Helmet>
         <SetupWorkspaceForm />
       </>