feat: add ability to customize the password page (#708)

Author: jeremydw

.changeset/lazy-spies-explode.md

@@ -0,0 +1,5 @@
+---
+'@blinkk/root-password-protect': patch
+---
+
+feat: add ability to customize the password page

examples/blog/root-cms.d.ts

@@ -1,15 +1,18 @@
+/* eslint-disable */
 /** Root.js CMS types. This file is autogenerated. */
 
-export interface RootCMSImage {
+export interface RootCMSFile {
   src: string;
   width?: number;
   height?: number;
   alt?: string;
 }
 
-export type RootCMSOneOf<T = any> = T & {
-  _type: string;
-};
+export type RootCMSImage = RootCMSFile;
+
+export type RootCMSOneOf<T = any> = T;
+
+export type RootCMSOneOfOption<T, Base> = Base & {_type: T};
 
 export interface RootCMSRichTextBlock {
   type: string;
@@ -84,10 +87,8 @@ export interface BlogPostsFields {
     */
     customCss?: string;
     /** PDF. PDF version of the post. */
-    pdf?: {
-      src: string;
-    };
-    /** Published Date Override. Override for the "Published" date. */
+    pdf?: RootCMSFile;
+    /** Published Date Override. Override for the 'Published' date. */
     publishedAtOverride?: number;
     /** Parent Post. Optional parent post for breadcrumbs. */
     parentPost?: RootCMSReference;
@@ -131,10 +132,8 @@ export interface BlogPostsSandboxFields {
     */
     customCss?: string;
     /** PDF. PDF version of the post. */
-    pdf?: {
-      src: string;
-    };
-    /** Published Date Override. Override for the "Published" date. */
+    pdf?: RootCMSFile;
+    /** Published Date Override. Override for the 'Published' date. */
     publishedAtOverride?: number;
     /** Parent Post. Optional parent post for breadcrumbs. */
     parentPost?: RootCMSReference;
@@ -146,6 +145,12 @@ export interface BlogPostsSandboxFields {
 /** Generated from `/collections/BlogPostsSandbox.schema.ts`. */
 export type BlogPostsSandboxDoc = RootCMSDoc<BlogPostsSandboxFields>;
 
+/** Generated from `/templates/Template5050/5050assets/ImageAsset.schema.ts`. */
+export interface ImageAssetFields {
+  /** Image to embed. Optional. If not provided, the default YT thumbnail is used. */
+  image?: RootCMSImage;
+}
+
 /** Generated from `/collections/Pages.schema.ts`. */
 export interface PagesFields {
   /** [INTERNAL] Description. Internal-only field. Used for notes, etc. */
@@ -162,7 +167,7 @@ export interface PagesFields {
   /** Content */
   content?: {
     /** Modules. Compose the page by adding one or more modules. */
-    modules?: RootCMSOneOf<SpacerFields | Template5050Fields | TemplateFeaturedBlogPostsFields | TemplateHeroFields>[];
+    modules?: RootCMSOneOf<RootCMSOneOfOption<'Spacer', SpacerFields> | RootCMSOneOfOption<'Template5050', Template5050Fields> | RootCMSOneOfOption<'TemplateFeaturedBlogPosts', TemplateFeaturedBlogPostsFields> | RootCMSOneOfOption<'TemplateHero', TemplateHeroFields>>[];
   };
   /** Advanced */
   advanced?: {
@@ -184,20 +189,6 @@ export interface SpacerFields {
   mobileHeight?: string;
 }
 
-/** Generated from `/templates/Template5050/5050assets/ImageAsset.schema.ts`. */
-export interface ImageAssetFields {
-  /** Image to embed. Optional. If not provided, the default YT thumbnail is used. */
-  image?: RootCMSImage;
-}
-
-/** Generated from `/templates/Template5050/5050assets/YouTubeAsset.schema.ts`. */
-export interface YouTubeAssetFields {
-  /** YouTube URL */
-  youtubeUrl?: string;
-  /** Thumbnail image. Optional. If not provided, the default YT thumbnail is used. */
-  thumbnail?: RootCMSImage;
-}
-
 /** Generated from `/templates/Template5050/Template5050.schema.ts`. */
 export interface Template5050Fields {
   /** ID. Used for deep linking, tracking, etc. */
@@ -207,7 +198,7 @@ export interface Template5050Fields {
   /** Body */
   body?: string;
   /** Asset */
-  asset?: RootCMSOneOf<ImageAssetFields | YouTubeAssetFields>;
+  asset?: RootCMSOneOf<RootCMSOneOfOption<'ImageAsset', ImageAssetFields> | RootCMSOneOfOption<'YouTubeAsset', YouTubeAssetFields>>;
 }
 
 /** Generated from `/templates/TemplateFeaturedBlogPosts/TemplateFeaturedBlogPosts.schema.ts`. */
@@ -230,4 +221,12 @@ export interface TemplateHeroFields {
   title?: string;
   /** Image */
   image?: RootCMSImage;
-}
+}
+
+/** Generated from `/templates/Template5050/5050assets/YouTubeAsset.schema.ts`. */
+export interface YouTubeAssetFields {
+  /** YouTube URL */
+  youtubeUrl?: string;
+  /** Thumbnail image. Optional. If not provided, the default YT thumbnail is used. */
+  thumbnail?: RootCMSImage;
+}

examples/blog/root.config.ts

@@ -48,7 +48,10 @@ export default defineConfig({
       {source: '/restricted/[...path]', destination: '/unauthorized'},
     ],
     headers: [
-      {source: '/test-json.txt', headers: [{key: 'content-type', value: 'application/json'}]},
+      {
+        source: '/test-json.txt',
+        headers: [{key: 'content-type', value: 'application/json'}],
+      },
     ],
   },
   plugins: [

packages/create-root/src/root-version.ts

@@ -1,2 +1,2 @@
 // This file is autogenerated by update-root-version.mjs.
-export const ROOT_VERSION = '2.0.3';
+export const ROOT_VERSION = '2.0.10';

packages/root-password-protect/src/cli/cli.ts

@@ -1,6 +1,6 @@
 import {Command} from 'commander';
 import {bgGreen, black} from 'kleur/colors';
-import {generateHash} from './generate-hash';
+import {generateHash} from './generate-hash.js';
 
 export class CliRunner {
   private name: string;

packages/root-password-protect/src/components/PasswordPage/PasswordPage.css.ts

@@ -1,6 +1,6 @@
 export const CSS = `
 .signin {
-  font-family: 'Google Sans', arial, sans-serif;
+  font-family: 'Inter', system-ui, sans-serif;
   text-align: center;
   padding: 48px 20px;
   color: #3c4043;

packages/root-password-protect/src/components/PasswordPage/PasswordPage.tsx

@@ -7,7 +7,7 @@ export interface PasswordPageProps {
 
 export function PasswordPage(props: PasswordPageProps) {
   return (
-    <html>
+    <html lang="en">
       <head>
         <meta charset="utf-8" />
         <title>Protected</title>
@@ -17,8 +17,8 @@ export function PasswordPage(props: PasswordPageProps) {
           type="image/png"
         />
         <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900"
           rel="stylesheet"
-          href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@500&display=swap"
           nonce={props.nonce}
         />
         <style nonce={props.nonce}>{CSS}</style>
@@ -42,6 +42,7 @@ export function PasswordPage(props: PasswordPageProps) {
                 name="password"
                 type="password"
                 placeholder="Password"
+                autoFocus={true}
               />
               <button className="signin__button" type="submit">
                 <div className="signin__button__label">Submit</div>

packages/root-password-protect/src/plugin/plugin.tsx

@@ -2,16 +2,19 @@ import {Request, Response, NextFunction, Plugin, Server} from '@blinkk/root';
 import bodyParser from 'body-parser';
 import micromatch from 'micromatch';
 import {renderToString} from 'preact-render-to-string';
-import {
-  PasswordPage,
-  PasswordPageProps,
-} from '../components/PasswordPage/PasswordPage.js';
+import {PasswordPage} from '../components/PasswordPage/PasswordPage.js';
 import {generateNonce, setSecurityHeaders} from '../core/csp.js';
 import {hashPassword, verifyPassword} from '../core/password.js';
 
 const SESSION_COOKIE_HASH = 'password_protect.hash';
 const SESSION_COOKIE_SALT = 'password_protect.salt';
 
+export enum PasswordProtectError {
+  UNKNOWN = 'UNKNOWN',
+  PASSWORD_REQUIRED = 'PASSWORD_REQUIRED',
+  PASSWORD_INVALID = 'PASSWORD_INVALID',
+}
+
 export interface PasswordProtectedRoute {
   /**
    * URL glob pattern to match (regex not supported yet).
@@ -107,8 +110,9 @@ async function handleProtectedRoute(
       !req.body.password
     ) {
       res.status(400);
-      renderPasswordPage(req, res, {error: 'Bad request (no password).'});
-      return;
+      return renderPasswordPage(req, res, {
+        error: PasswordProtectError.PASSWORD_REQUIRED,
+      });
     }
 
     const password = req.body.password as string;
@@ -118,24 +122,23 @@ async function handleProtectedRoute(
       protectedRoute.password.salt
     );
     if (!isValid) {
-      renderPasswordPage(req, res, {error: 'Incorrect password.'});
-      return;
+      return renderPasswordPage(req, res, {
+        error: PasswordProtectError.PASSWORD_INVALID,
+      });
     }
     // Set a session cookie value to verify subsequent requests.
     await setSessionCookie(protectedRoute, res);
-    next();
-    return;
+    return next();
   }
 
   // If previously logged in, check the session cookie against the current
   // password hash.
   const isValid = await verifySessionCookie(protectedRoute, req);
   if (isValid) {
-    next();
-    return;
+    return next();
   }
 
-  renderPasswordPage(req, res);
+  return renderPasswordPage(req, res);
 }
 
 /**
@@ -172,12 +175,51 @@ async function verifySessionCookie(
 export async function renderPasswordPage(
   req: Request,
   res: Response,
-  props?: Omit<PasswordPageProps, 'nonce'>
+  options?: {error?: PasswordProtectError}
 ) {
-  const nonce = generateNonce();
-  const mainHtml = renderToString(<PasswordPage {...props} nonce={nonce} />);
-  const html = `<!doctype html>\n${mainHtml}`;
-  res.setHeader('content-type', 'text/html');
-  setSecurityHeaders(res, nonce);
-  res.send(html);
+  // If there's no `/401` route, fall back to the default password page.
+  const defaultHandler = () => {
+    const nonce = generateNonce();
+    res.setHeader('content-type', 'text/html');
+    res.status(401);
+    setSecurityHeaders(res, nonce);
+    const errorMsg = getErrorMessage(options?.error);
+    const mainHtml = renderToString(
+      <PasswordPage error={errorMsg} nonce={nonce} />
+    );
+    const html = `<!doctype html>\n${mainHtml}`;
+    res.send(html);
+  };
+
+  // If the app defines `routes/401.tsx`, render that page.
+  if (req.renderer) {
+    const [route, routeParams] = req.renderer.getRoute('/401');
+    if (route) {
+      // Add the error type to the req object. Routes that define a `handle()`
+      // method should be able to read from it to construct an appropriate
+      // error message for the page.
+      (req as any).passwordProtect = {error: options?.error};
+      return req.renderer.handleRoute(req, res, defaultHandler, route, {
+        defaultStatusCode: 401,
+        routeParams: routeParams,
+      });
+    }
+  }
+  return defaultHandler();
+}
+
+/**
+ * Converts a `PasswordProtectError` to a user-friendly error message.
+ */
+function getErrorMessage(error?: PasswordProtectError) {
+  if (!error) {
+    return undefined;
+  }
+  if (error === PasswordProtectError.PASSWORD_REQUIRED) {
+    return 'Bad request (no password).';
+  }
+  if (error === PasswordProtectError.PASSWORD_INVALID) {
+    return 'Incorrect password.';
+  }
+  return 'Unknown error.';
 }

packages/root/src/core/types.ts

@@ -174,10 +174,9 @@ export interface StaticContentResult {
  * that function is passed to `getStaticContent()`. Otherwise a default props
  * value is passed which includes the `rootConfig` and route param values.
  */
-export type GetStaticContent = (props: any) =>
-  | Promise<StaticContentResult | string>
-  | StaticContentResult
-  | string;
+export type GetStaticContent = (
+  props: any
+) => Promise<StaticContentResult | string> | StaticContentResult | string;
 
 export interface RouteModule {
   default?: ComponentType<unknown>;