Add custom pages/contact channel docs (#438)

* add some description about contact channels

* add some examples of password reset

* update the doc

* rename things

* split examples

* remove custom for now

* fix error message

---------

Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
Co-authored-by: Zai Shi <zaishi00@outlook.com>

docs/fern/docs.yml

@@ -102,6 +102,10 @@ navigation:
                 path: ./docs/pages/customization/page-examples/sign-in.mdx
               - page: Sign Up
                 path: ./docs/pages/customization/page-examples/sign-up.mdx
+              - page: Forgot Password
+                path: ./docs/pages/customization/page-examples/forgot-password.mdx
+              - page: Password Reset
+                path: ./docs/pages/customization/page-examples/password-reset.mdx
       - section: Others
         contents:
           - page: Supabase Integration

docs/fern/docs/pages/customization/page-examples/forgot-password.mdx

@@ -0,0 +1,59 @@
+---
+slug: customization/page-examples/forgot-password
+---
+
+## Custom page with `ForgotPassword` component
+
+```tsx  
+'use client';
+import { ForgotPassword } from "@stackframe/stack";
+
+export default function DefaultPasswordReset() {
+  return <ForgotPassword />;
+}
+```
+
+
+## Custom forgot password form
+
+```tsx
+'use client';
+
+import { useStackApp } from "@stackframe/stack";
+import { useState } from "react";
+
+export default function CustomForgotPasswordForm() {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+  const [message, setMessage] = useState('');
+  const app = useStackApp();
+
+  const onSubmit = async () => {
+    try {
+      await app.sendForgotPasswordEmail(email);
+      setMessage('Password reset email sent! Please check your inbox.');
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+  
+  return (
+    <form onSubmit={(e) => { e.preventDefault(); onSubmit(); }}>
+      {error && <div>{error}</div>}
+      {message ? (
+        <div>{message}</div>
+      ) : (
+        <>
+          <input
+            type='email'
+            placeholder="email@example.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          <button type='submit'>Reset Password</button>
+        </>
+      )}
+    </form>
+  ); 
+}
+```

docs/fern/docs/pages/customization/page-examples/password-reset.mdx

@@ -0,0 +1,79 @@
+---
+slug: customization/page-examples/password-reset
+---
+
+## Custom page with `PasswordReset` component
+
+```tsx  
+'use client';
+import { PasswordReset } from "@stackframe/stack";
+
+export default function DefaultPasswordReset() {
+  return <PasswordReset />;
+}
+```
+
+
+## Custom password reset form
+
+```tsx
+'use client';
+
+import { useStackApp } from "@stackframe/stack";
+import { useState } from "react";
+
+export default function CustomPasswordResetForm({ code }: { code: string }) {
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const app = useStackApp();
+
+  const onSubmit = async () => {
+    if (password !== confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    try {
+      const result = await app.resetPassword({ password, code });
+      if (result.status === 'error') {
+        setError('Failed to reset password');
+        return;
+      }
+      setSuccess(true);
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  if (success) {
+    return <div>Password successfully reset!</div>;
+  }
+
+  return (
+    <form onSubmit={(e) => { e.preventDefault(); onSubmit(); }}>
+      {error && <div>{error}</div>}
+      <div>
+        <label htmlFor="password">New Password</label>
+        <input
+          id="password"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+      </div>
+      <div>
+        <label htmlFor="confirm">Confirm Password</label>
+        <input
+          id="confirm"
+          type="password"
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+        />
+      </div>
+      <button type="submit">Reset Password</button>
+    </form>
+  );
+}
+```

packages/stack-shared/src/interface/crud/contact-channels.ts

@@ -46,27 +46,27 @@ export const contactChannelsCrud = createCrud({
   docs: {
     clientRead: {
       summary: "Get a contact channel",
-      description: "",
+      description: "Retrieves a specific contact channel by the user ID and the contact channel ID.",
       tags: ["Contact Channels"],
     },
     clientCreate: {
       summary: "Create a contact channel",
-      description: "",
+      description: "Add a new contact channel for a user.",
       tags: ["Contact Channels"],
     },
     clientUpdate: {
       summary: "Update a contact channel",
-      description: "",
+      description: "Updates an existing contact channel. Only the values provided will be updated.",
       tags: ["Contact Channels"],
     },
     clientDelete: {
       summary: "Delete a contact channel",
-      description: "",
+      description: "Removes a contact channel for a given user.",
       tags: ["Contact Channels"],
     },
     clientList: {
       summary: "List contact channels",
-      description: "",
+      description: "Retrieves a list of all contact channels for a user.",
       tags: ["Contact Channels"],
     }
   }