@cedarjs/cli 7.1.0-rc.34 → 7.1.1-next.468

package/dist/commands/generate/cell/templates/cellFragment.tsx.template

@@ -0,0 +1,43 @@
+import type { ${fragmentName} } from 'types/graphql'
+
+import type {
+  CellSuccessProps,<% if (afterQuery || isEmpty) { %>
+  DataObject,<% } %>
+} from '@cedarjs/web'
+
+// A parent Cell spreads this fragment by name in its own QUERY, and passes
+// the matching field down as the `${camelName}` prop - no import needed,
+// just render <${pascalName}Cell />:
+//
+//   query FindSomething($id: Int!) {
+//     something(id: $id) {
+//       id
+//       ...${fragmentName}
+//     }
+//   }
+//
+//   <${pascalName}Cell ${camelName}={something} />
+export const FRAGMENT = gql`
+  fragment ${fragmentName} on ${fragmentOnType} {
+    id
+  }
+`
+<% if (isEmpty) { %>
+export const isEmpty = (
+  data: DataObject,
+  { isDataEmpty }: { isDataEmpty: (data: DataObject) => boolean },
+) => {
+  return isDataEmpty(data)
+}
+<% } %><% if (afterQuery) { %>
+export const afterQuery = (data: DataObject): DataObject => {
+  return data
+}
+<% } %>
+export const Empty = () => <div>Empty</div>
+
+export const Success = ({
+  ${camelName},
+}: CellSuccessProps<{ ${camelName}: ${fragmentName} }>) => {
+  return <div>{JSON.stringify(${camelName})}</div>
+}

package/dist/commands/generate/cell/templates/cellList.tsx.template

@@ -3,7 +3,9 @@ import type { ${operationName}, ${operationName}Variables  } from 'types/graphql
 import type {
   CellSuccessProps,
   CellFailureProps,
-  TypedDocumentNode,
+  TypedDocumentNode,<% if (beforeQuery) { %>
+  CellBeforeQueryResult,<% } %><% if (afterQuery || isEmpty) { %>
+  DataObject,<% } %>
 } from '@cedarjs/web'
 
 export const QUERY: TypedDocumentNode<
@@ -16,7 +18,24 @@ export const QUERY: TypedDocumentNode<
     }
   }
 `
-
+<% if (beforeQuery) { %>
+export const beforeQuery = (
+  props: ${operationName}Variables,
+): CellBeforeQueryResult<${operationName}Variables> => {
+  return { variables: props, fetchPolicy: 'cache-and-network' }
+}
+<% } %><% if (isEmpty) { %>
+export const isEmpty = (
+  data: DataObject,
+  { isDataEmpty }: { isDataEmpty: (data: DataObject) => boolean },
+) => {
+  return isDataEmpty(data)
+}
+<% } %><% if (afterQuery) { %>
+export const afterQuery = (data: DataObject): DataObject => {
+  return data
+}
+<% } %>
 export const Loading = () => <div>Loading...</div>
 
 export const Empty = () => <div>Empty</div>

package/dist/commands/generate/cell/templates/storiesFragment.tsx.template

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Empty, Success } from './${pascalName}Cell'
+import { standard } from './${pascalName}Cell.mock'
+
+const meta: Meta = {
+  title: 'Cells/${pascalName}Cell',
+  tags: ['autodocs']
+}
+
+export default meta
+
+export const empty: StoryObj<typeof Empty> = {
+  render: () => {
+    return Empty ? <Empty /> : <></>
+  }
+}
+
+export const success: StoryObj<typeof Success> = {
+  render: (args) => {
+    return Success ? <Success {...standard()} {...args} /> : <></>
+  }
+}

package/dist/commands/generate/cell/templates/test.js.template

@@ -7,7 +7,7 @@ import { standard } from './${pascalName}Cell.mock'
 // and can fail without adjustments, e.g. Float and DateTime types.
 //           Please refer to the RedwoodJS Testing Docs:
 //        https://cedarjs.com/docs/testing#testing-cells
-// https://cedarjs.com/docs/testing#jest-expect-type-considerations
+// https://cedarjs.com/docs/testing#expect-type-considerations
 
 describe('${pascalName}Cell', () => {
   it('renders Loading successfully', () => {

package/dist/commands/generate/cell/templates/testFragment.js.template

@@ -0,0 +1,30 @@
+import { render } from '@cedarjs/testing/web'
+
+import { Empty, Success } from './${pascalName}Cell'
+import { standard } from './${pascalName}Cell.mock'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float and DateTime types.
+//           Please refer to the RedwoodJS Testing Docs:
+//        https://cedarjs.com/docs/testing#testing-cells
+// https://cedarjs.com/docs/testing#expect-type-considerations
+
+describe('${pascalName}Cell', () => {
+  it('renders Empty successfully', async () => {
+    expect(() => {
+      render(<Empty />)
+    }).not.toThrow()
+  })
+
+  // When you're ready to test the actual output of your component render
+  // you could test that, for example, certain text is present:
+  //
+  // 1. import { screen } from '@cedarjs/testing/web'
+  // 2. Add test: expect(screen.getByText('Hello, world')).toBeInTheDocument()
+
+  it('renders Success successfully', async () => {
+    expect(() => {
+      render(<Success ${camelName}={standard().${camelName}} />)
+    }).not.toThrow()
+  })
+})

package/dist/commands/generate/dataMigration/dataMigration.js

@@ -2,8 +2,9 @@ import path from "node:path";
 import { paramCase } from "change-case";
 import { Listr } from "listr2";
 import { terminalLink } from "termi-link";
-import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
 import { formatCedarCommand } from "@cedarjs/cli-helpers/packageManager/display";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import { getDataMigrationsPath } from "@cedarjs/project-config";
 import {
   generateTemplate,

package/dist/commands/generate/dbAuth/dbAuth.js

@@ -1,9 +1,13 @@
 import { terminalLink } from "termi-link";
 import { getYargsDefaults, createHandler } from "../yargsCommandHelpers.js";
 const command = "dbAuth";
-const description = "Generate Login, Signup and Forgot Password pages for dbAuth";
+const description = "Generate Login, Signup, Forgot Password, Reset Password and Change Password pages for dbAuth";
 const builder = (yargs) => {
-  yargs.option("skip-forgot", {
+  yargs.option("skip-change", {
+    description: "Skip generating the Change Password page",
+    type: "boolean",
+    default: false
+  }).option("skip-forgot", {
     description: "Skip generating the Forgot Password page",
     type: "boolean",
     default: false

package/dist/commands/generate/dbAuth/dbAuthHandler.js

@@ -4,9 +4,10 @@ import { ListrEnquirerPromptAdapter } from "@listr2/prompt-adapter-enquirer";
 import { camelCase } from "camel-case";
 import { Listr } from "listr2";
 import { titleCase } from "title-case";
-import { recordTelemetryAttributes, colors as c } from "@cedarjs/cli-helpers";
+import { colors as c } from "@cedarjs/cli-helpers/colors";
 import { formatCedarCommand } from "@cedarjs/cli-helpers/packageManager/display";
 import { runBinSync } from "@cedarjs/cli-helpers/packageManager/exec";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers/telemetry";
 import {
   addRoutesToRouterTask,
   addScaffoldImport,
@@ -17,12 +18,25 @@ import {
 } from "../../../lib/index.js";
 import { prepareForRollback } from "../../../lib/rollback.js";
 import { templateForComponentFile } from "../yargsHandlerHelpers.js";
-const ROUTES = [
-  `<Route path="/login" page={LoginPage} name="login" />`,
-  `<Route path="/signup" page={SignupPage} name="signup" />`,
-  `<Route path="/forgot-password" page={ForgotPasswordPage} name="forgotPassword" />`,
-  `<Route path="/reset-password" page={ResetPasswordPage} name="resetPassword" />`
-];
+function routesFor({
+  skipChange,
+  skipForgot,
+  skipLogin,
+  skipReset,
+  skipSignup
+}) {
+  return [
+    !skipLogin && `<Route path="/login" page={LoginPage} name="login" />`,
+    !skipSignup && `<Route path="/signup" page={SignupPage} name="signup" />`,
+    !skipForgot && `<Route path="/forgot-password" page={ForgotPasswordPage} name="forgotPassword" />`,
+    !skipReset && `<Route path="/reset-password" page={ResetPasswordPage} name="resetPassword" />`,
+    !skipChange && `<Route path="/change-password" page={ChangePasswordPage} name="changePassword" />`
+  ].filter((route) => typeof route === "string");
+}
+function pascalCase(str) {
+  const camelCased = camelCase(str);
+  return camelCased.charAt(0).toUpperCase() + camelCased.slice(1);
+}
 function getPostInstallMessage(isDbAuthSetup2) {
   return [
     `   ${c.warning("Pages created! But you're not done yet:")}
@@ -34,9 +48,11 @@ function getPostInstallMessage(isDbAuthSetup2) {
     "       navigate(routes.home())",
     "     }\n",
     "   and change the route to where you want them to go if the user is already",
-    "   logged in. Also take a look in the onSubmit() functions in ForgotPasswordPage",
-    "   and ResetPasswordPage to change where the user redirects to after submitting",
-    "   those forms.\n",
+    "   logged in. Also take a look in the onSubmit() functions in ForgotPasswordPage,",
+    "   ResetPasswordPage and ChangePasswordPage to change where the user redirects",
+    "   to after submitting those forms.\n",
+    "   ChangePasswordPage is for users who are already logged in. Link to it from",
+    "   wherever your app lets users manage their account.\n",
     !isDbAuthSetup2 && `   Oh, and if you haven't already, add the necessary dbAuth functions and
    app setup by running:
 
@@ -57,9 +73,11 @@ function getPostInstallWebauthnMessage(isDbAuthSetup2) {
     "       navigate(routes.home())",
     "     }\n",
     "   and change the route to where you want them to go if the user is already",
-    "   logged in. Also take a look in the onSubmit() functions in ForgotPasswordPage",
-    "   and ResetPasswordPage to change where the user redirects to after submitting",
-    "   those forms.\n",
+    "   logged in. Also take a look in the onSubmit() functions in ForgotPasswordPage,",
+    "   ResetPasswordPage and ChangePasswordPage to change where the user redirects",
+    "   to after submitting those forms.\n",
+    "   ChangePasswordPage is for users who are already logged in. Link to it from",
+    "   wherever your app lets users manage their account.\n",
     !isDbAuthSetup2 && `   Oh, and if you haven't already, add the necessary dbAuth functions and
    app setup by running:
 
@@ -70,24 +88,28 @@ function getPostInstallWebauthnMessage(isDbAuthSetup2) {
 }
 const files = async ({
   typescript,
+  skipChange,
   skipForgot,
   skipLogin,
   skipReset,
   skipSignup,
   webauthn,
+  oauth,
   usernameLabel,
   passwordLabel
 }) => {
   const filesList = [];
   usernameLabel = usernameLabel || "username";
   passwordLabel = passwordLabel || "password";
+  const oauthEnabled = oauth ?? isOAuthEnabled();
   const templateVars = {
     usernameLowerCase: usernameLabel.toLowerCase(),
     usernameCamelCase: camelCase(usernameLabel),
     usernameTitleCase: titleCase(usernameLabel),
     passwordLowerCase: passwordLabel.toLowerCase(),
     passwordCamelCase: camelCase(passwordLabel),
-    passwordTitleCase: titleCase(passwordLabel)
+    passwordTitleCase: titleCase(passwordLabel),
+    passwordPascalCase: pascalCase(passwordLabel)
   };
   if (!skipForgot) {
     filesList.push(
@@ -110,7 +132,7 @@ const files = async ({
         extension: typescript ? ".tsx" : ".jsx",
         webPathSection: "pages",
         generator: "dbAuth",
-        templatePath: webauthn ? "login.webAuthn.tsx.template" : "login.tsx.template",
+        templatePath: loginTemplatePath(webauthn, oauthEnabled),
         templateVars
       })
     );
@@ -128,6 +150,19 @@ const files = async ({
       })
     );
   }
+  if (!skipChange) {
+    filesList.push(
+      await templateForComponentFile({
+        name: "ChangePassword",
+        suffix: "Page",
+        extension: typescript ? ".tsx" : ".jsx",
+        webPathSection: "pages",
+        generator: "dbAuth",
+        templatePath: "changePassword.tsx.template",
+        templateVars
+      })
+    );
+  }
   if (!skipSignup) {
     filesList.push(
       await templateForComponentFile({
@@ -136,7 +171,7 @@ const files = async ({
         extension: typescript ? ".tsx" : ".jsx",
         webPathSection: "pages",
         generator: "dbAuth",
-        templatePath: "signup.tsx.template",
+        templatePath: oauthEnabled ? "signup.oauth.tsx.template" : "signup.tsx.template",
         templateVars
       })
     );
@@ -176,6 +211,7 @@ const tasks = ({
   listr2,
   force,
   typescript,
+  skipChange,
   skipForgot,
   skipLogin,
   skipReset,
@@ -286,6 +322,7 @@ const tasks = ({
         task: async () => {
           const filesObj = await files({
             typescript,
+            skipChange,
             skipForgot,
             skipLogin,
             skipReset,
@@ -302,7 +339,15 @@ const tasks = ({
       {
         title: "Adding routes...",
         task: async () => {
-          addRoutesToRouterTask(ROUTES);
+          addRoutesToRouterTask(
+            routesFor({
+              skipChange,
+              skipForgot,
+              skipLogin,
+              skipReset,
+              skipSignup
+            })
+          );
         }
       },
       {
@@ -332,6 +377,7 @@ const tasks = ({
 const handler = async (yargs) => {
   recordTelemetryAttributes({
     command: "generate dbAuth",
+    skipChange: yargs.skipChange,
     skipForgot: yargs.skipForgot,
     skipLogin: yargs.skipLogin,
     skipReset: yargs.skipReset,
@@ -378,6 +424,23 @@ function isWebAuthnEnabled() {
   );
   return webPackageJson.includes('"@simplewebauthn/browser": ');
 }
+function isOAuthEnabled() {
+  const apiPackageJsonPath = path.join(getPaths().base, "api", "package.json");
+  if (!fs.existsSync(apiPackageJsonPath)) {
+    return false;
+  }
+  const apiPackageJson = fs.readFileSync(apiPackageJsonPath, "utf-8");
+  return apiPackageJson.includes('"@cedarjs/auth-dbauth-oauth": ');
+}
+function loginTemplatePath(webauthn, oauth) {
+  if (webauthn) {
+    return "login.webAuthn.tsx.template";
+  }
+  if (oauth) {
+    return "login.oauth.tsx.template";
+  }
+  return "login.tsx.template";
+}
 export {
   files,
   handler

package/dist/commands/generate/dbAuth/templates/changePassword.tsx.template

@@ -0,0 +1,131 @@
+import { useEffect, useRef } from 'react'
+
+import {
+  Form,
+  Label,
+  PasswordField,
+  Submit,
+  FieldError,
+} from '@cedarjs/forms'
+import { navigate, routes } from '@cedarjs/router'
+import { Metadata } from '@cedarjs/web'
+import { toast, Toaster } from '@cedarjs/web/toast'
+
+import { useAuth } from 'src/auth'
+
+const ChangePasswordPage = () => {
+  const { loading, isAuthenticated, reauthenticate, changePassword } =
+    useAuth()
+
+  // Only a logged in user can change their password
+  useEffect(() => {
+    if (!loading && !isAuthenticated) {
+      navigate(routes.login())
+    }
+  }, [loading, isAuthenticated])
+
+  const current${passwordPascalCase}Ref = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    current${passwordPascalCase}Ref.current?.focus()
+  }, [])
+
+  const onSubmit = async (data: Record<string, string>) => {
+    const response = await changePassword({
+      currentPassword: data.current${passwordPascalCase},
+      newPassword: data.new${passwordPascalCase},
+    })
+
+    if (response.error) {
+      toast.error(response.error)
+    } else {
+      // The function `changePassword.handler` in api/src/functions/auth.js
+      // decides if the user stays logged in. `reauthenticate()` picks up
+      // whichever it was
+      toast.success('${passwordTitleCase} changed!')
+      await reauthenticate()
+      navigate(routes.home())
+    }
+  }
+
+  return (
+    <>
+      <Metadata title="Change ${passwordTitleCase}" />
+
+      <main className="rw-main">
+        <Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />
+        <div className="rw-scaffold rw-login-container">
+          <div className="rw-segment">
+            <header className="rw-segment-header">
+              <h2 className="rw-heading rw-heading-secondary">
+                Change ${passwordTitleCase}
+              </h2>
+            </header>
+
+            <div className="rw-segment-main">
+              <div className="rw-form-wrapper">
+                <Form onSubmit={onSubmit} className="rw-form-wrapper">
+                  <Label
+                    name="current${passwordPascalCase}"
+                    className="rw-label"
+                    errorClassName="rw-label rw-label-error"
+                  >
+                    Current ${passwordTitleCase}
+                  </Label>
+                  <PasswordField
+                    name="current${passwordPascalCase}"
+                    autoComplete="current-password"
+                    className="rw-input"
+                    errorClassName="rw-input rw-input-error"
+                    ref={current${passwordPascalCase}Ref}
+                    validation={{
+                      required: {
+                        value: true,
+                        message: 'Current ${passwordTitleCase} is required',
+                      },
+                    }}
+                  />
+
+                  <FieldError
+                    name="current${passwordPascalCase}"
+                    className="rw-field-error"
+                  />
+
+                  <Label
+                    name="new${passwordPascalCase}"
+                    className="rw-label"
+                    errorClassName="rw-label rw-label-error"
+                  >
+                    New ${passwordTitleCase}
+                  </Label>
+                  <PasswordField
+                    name="new${passwordPascalCase}"
+                    autoComplete="new-password"
+                    className="rw-input"
+                    errorClassName="rw-input rw-input-error"
+                    validation={{
+                      required: {
+                        value: true,
+                        message: 'New ${passwordTitleCase} is required',
+                      },
+                    }}
+                  />
+
+                  <FieldError
+                    name="new${passwordPascalCase}"
+                    className="rw-field-error"
+                  />
+
+                  <div className="rw-button-group">
+                    <Submit className="rw-button rw-button-blue">Submit</Submit>
+                  </div>
+                </Form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+}
+
+export default ChangePasswordPage

package/dist/commands/generate/dbAuth/templates/login.oauth.tsx.template

@@ -0,0 +1,164 @@
+import { useEffect, useRef } from 'react'
+
+import {
+  Form,
+  Label,
+  TextField,
+  PasswordField,
+  Submit,
+  FieldError,
+} from '@cedarjs/forms'
+import { Link, navigate, routes } from '@cedarjs/router'
+import { Metadata } from '@cedarjs/web'
+import { toast, Toaster } from '@cedarjs/web/toast'
+
+import { getOAuthUrl, getOAuthError } from '@cedarjs/auth-dbauth-web/oauth'
+
+import { useAuth } from 'src/auth'
+
+const LoginPage = () => {
+  const { isAuthenticated, logIn } = useAuth()
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate(routes.home())
+    }
+  }, [isAuthenticated])
+
+  // Surface an error that the OAuth provider redirect sent back, e.g.
+  // after the user cancels the provider's consent screen.
+  useEffect(() => {
+    const oauthError = getOAuthError(window.location.search)
+
+    if (oauthError) {
+      toast.error('Could not log in: ' + oauthError)
+    }
+  }, [])
+
+  const ${usernameCamelCase}Ref = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    ${usernameCamelCase}Ref.current?.focus()
+  }, [])
+
+  const onSubmit = async (data: Record<string, string>) => {
+    const response = await logIn({ username: data.${usernameCamelCase}, password: data.${passwordCamelCase} })
+
+    if (response.message) {
+      toast(response.message)
+    } else if (response.error) {
+      toast.error(response.error)
+    } else {
+      toast.success('Welcome back!')
+    }
+  }
+
+  return (
+    <>
+      <Metadata title="Login" />
+
+      <main className="rw-main">
+        <Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />
+        <div className="rw-scaffold rw-login-container">
+          <div className="rw-segment">
+            <header className="rw-segment-header">
+              <h2 className="rw-heading rw-heading-secondary">Login</h2>
+            </header>
+
+            <div className="rw-segment-main">
+              <div className="rw-form-wrapper">
+                <Form onSubmit={onSubmit} className="rw-form-wrapper">
+                  <Label
+                    name="${usernameCamelCase}"
+                    className="rw-label"
+                    errorClassName="rw-label rw-label-error"
+                  >
+                    ${usernameTitleCase}
+                  </Label>
+                  <TextField
+                    name="${usernameCamelCase}"
+                    className="rw-input"
+                    errorClassName="rw-input rw-input-error"
+                    ref={${usernameCamelCase}Ref}
+                    validation={{
+                      required: {
+                        value: true,
+                        message: '${usernameTitleCase} is required',
+                      },
+                    }}
+                  />
+
+                  <FieldError name="${usernameCamelCase}" className="rw-field-error" />
+
+                  <Label
+                    name="${passwordCamelCase}"
+                    className="rw-label"
+                    errorClassName="rw-label rw-label-error"
+                  >
+                    ${passwordTitleCase}
+                  </Label>
+                  <PasswordField
+                    name="${passwordCamelCase}"
+                    className="rw-input"
+                    errorClassName="rw-input rw-input-error"
+                    autoComplete="current-password"
+                    validation={{
+                      required: {
+                        value: true,
+                        message: '${passwordTitleCase} is required',
+                      },
+                    }}
+                  />
+
+                  <div className="rw-forgot-link">
+                    <Link
+                      to={routes.forgotPassword()}
+                      className="rw-forgot-link"
+                    >
+                      Forgot ${passwordTitleCase}?
+                    </Link>
+                  </div>
+
+                  <FieldError name="${passwordCamelCase}" className="rw-field-error" />
+
+                  <div className="rw-button-group">
+                    <Submit className="rw-button rw-button-blue">Login</Submit>
+                  </div>
+                </Form>
+
+                {/*
+                 * OAuth login buttons. Delete the ones for providers you
+                 * haven't configured in `cedar setup auth dbAuth --oauth`.
+                 * Each link is a full-page navigation to the provider's
+                 * authorize route — it must not be turned into a fetch/XHR
+                 * call.
+                 */}
+                <div className="rw-button-group">
+                  <a
+                    href={getOAuthUrl('google', { flow: 'login' })}
+                    className="rw-button rw-button-blue"
+                  >
+                    Continue with Google
+                  </a>
+                  <a
+                    href={getOAuthUrl('github', { flow: 'login' })}
+                    className="rw-button rw-button-blue"
+                  >
+                    Continue with GitHub
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="rw-login-link">
+            <span>Don&apos;t have an account?</span>{' '}
+            <Link to={routes.signup()} className="rw-link">
+              Sign up!
+            </Link>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+}
+
+export default LoginPage