@cedarjs/cli 9.0.0-canary.1784 → 9.0.0-canary.3124

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

@@ -1,23 +1,28 @@
-import fs from "node:fs";
 import path from "node:path";
 import { paramCase } from "change-case";
 import { Listr } from "listr2";
 import { terminalLink } from "termi-link";
-import { recordTelemetryAttributes } 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 c from "../../../lib/colors.js";
-import { getPaths, writeFilesTask } from "../../../lib/index.js";
+import {
+  generateTemplate,
+  getPaths,
+  writeFilesTask
+} from "../../../lib/index.js";
 import { prepareForRollback } from "../../../lib/rollback.js";
 import { validateName } from "../helpers.js";
-import { getYargsDefaults } from "../yargsCommandHelpers.js";
-const POST_RUN_INSTRUCTIONS = `Next steps...
+function getPostRunInstructions() {
+  const text = c.warning("After writing your migration, you can run it with:");
+  const command2 = formatCedarCommand(["dataMigrate", "up"]);
+  return `Next steps...
 
-   ${c.warning(
-  "After writing your migration, you can run it with:"
-)}
+   ${text}
 
-     yarn cedar dataMigrate up
+   ${command2}
 `;
+}
 const TEMPLATE_PATHS = {
   js: path.resolve(
     import.meta.dirname,
@@ -40,30 +45,42 @@ const files = async ({ name, typescript }) => {
     getPaths().api.prismaConfig
   );
   const outputPath = path.join(dataMigrationsPath, outputFilename);
+  const prismaImportSource = "src/lib/db";
   return {
-    [outputPath]: fs.readFileSync(TEMPLATE_PATHS[extension]).toString()
+    [outputPath]: await generateTemplate(TEMPLATE_PATHS[extension], {
+      name,
+      prismaImportSource
+    })
   };
 };
 const command = "data-migration <name>";
 const aliases = ["dataMigration", "dm"];
 const description = "Generate a data migration";
 const builder = (yargs) => {
-  yargs.positional("name", {
+  return yargs.positional("name", {
     description: "A descriptor of what this data migration does",
-    type: "string"
+    type: "string",
+    demandOption: true
   }).option("rollback", {
     description: "Revert all generator actions if an error occurs",
     type: "boolean",
     default: true
+  }).option("force", {
+    alias: "f",
+    default: false,
+    description: "Overwrite existing files",
+    type: "boolean"
+  }).option("typescript", {
+    alias: "ts",
+    default: false,
+    description: "Generate TypeScript files",
+    type: "boolean"
   }).epilogue(
     `Also see the ${terminalLink(
       "CedarJS CLI Reference",
       "https://cedarjs.com/docs/cli-commands#generate-datamigration"
     )}`
   );
-  Object.entries(getYargsDefaults()).forEach(([option, config]) => {
-    yargs.option(option, config);
-  });
 };
 const handler = async (args) => {
   recordTelemetryAttributes({
@@ -83,7 +100,7 @@ const handler = async (args) => {
       {
         title: "Next steps...",
         task: (_ctx, task) => {
-          task.title = POST_RUN_INSTRUCTIONS;
+          task.title = getPostRunInstructions();
         }
       }
     ].filter(Boolean),
@@ -95,7 +112,7 @@ const handler = async (args) => {
     }
     await tasks.run();
   } catch (e) {
-    console.log(c.error(e.message));
+    console.log(c.error(e instanceof Error ? e.message : String(e)));
     process.exit(1);
   }
 };
@@ -105,5 +122,6 @@ export {
   command,
   description,
   files,
+  getPostRunInstructions,
   handler
 };

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

@@ -1,5 +1,5 @@
 /**
- * @typedef { import("@prisma/client").PrismaClient } PrismaClient
+ * @typedef { import("${prismaImportSource}").PrismaClient } PrismaClient
  * @param {{db: PrismaClient}} db
  */
 export default async ({ db }) => {

package/dist/commands/generate/dataMigration/templates/dataMigration.ts.template

@@ -1,4 +1,4 @@
-import type { PrismaClient } from '@prisma/client'
+import type { PrismaClient } from '${prismaImportSource}'
 
 export default async ({ db }: { db: PrismaClient }) => {
   // Migration here...

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

@@ -45,6 +45,7 @@ const builder = (yargs) => {
   Object.entries(getYargsDefaults()).forEach(([option, config]) => {
     yargs.option(option, config);
   });
+  return yargs;
 };
 const handler = createHandler("dbAuth");
 export {

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

@@ -2,11 +2,12 @@ import fs from "node:fs";
 import path from "node:path";
 import { ListrEnquirerPromptAdapter } from "@listr2/prompt-adapter-enquirer";
 import { camelCase } from "camel-case";
-import execa from "execa";
 import { Listr } from "listr2";
 import { titleCase } from "title-case";
-import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
-import c from "../../../lib/colors.js";
+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,
@@ -37,7 +38,11 @@ function getPostInstallMessage(isDbAuthSetup2) {
     "   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",
-    !isDbAuthSetup2 && "   Oh, and if you haven't already, add the necessary dbAuth functions and\n   app setup by running:\n\n     yarn cedar setup auth dbAuth\n",
+    !isDbAuthSetup2 && `   Oh, and if you haven't already, add the necessary dbAuth functions and
+   app setup by running:
+
+     ${formatCedarCommand(["setup", "auth", "dbAuth"])}
+`,
     "   Happy authenticating!"
   ].filter(Boolean).join("\n");
 }
@@ -56,24 +61,29 @@ function getPostInstallWebauthnMessage(isDbAuthSetup2) {
     "   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",
-    !isDbAuthSetup2 && "   Oh, and if you haven't already, add the necessary dbAuth functions and\n   app setup by running:\n\n     yarn cedar setup auth dbAuth\n",
+    !isDbAuthSetup2 && `   Oh, and if you haven't already, add the necessary dbAuth functions and
+   app setup by running:
+
+     ${formatCedarCommand(["setup", "auth", "dbAuth"])}
+`,
     "   Happy authenticating!"
   ].filter(Boolean).join("\n");
 }
 const files = async ({
-  _tests,
   typescript,
   skipForgot,
   skipLogin,
   skipReset,
   skipSignup,
   webauthn,
+  oauth,
   usernameLabel,
   passwordLabel
 }) => {
-  const files2 = [];
+  const filesList = [];
   usernameLabel = usernameLabel || "username";
   passwordLabel = passwordLabel || "password";
+  const oauthEnabled = oauth ?? isOAuthEnabled();
   const templateVars = {
     usernameLowerCase: usernameLabel.toLowerCase(),
     usernameCamelCase: camelCase(usernameLabel),
@@ -83,7 +93,7 @@ const files = async ({
     passwordTitleCase: titleCase(passwordLabel)
   };
   if (!skipForgot) {
-    files2.push(
+    filesList.push(
       await templateForComponentFile({
         name: "ForgotPassword",
         suffix: "Page",
@@ -96,20 +106,20 @@ const files = async ({
     );
   }
   if (!skipLogin) {
-    files2.push(
+    filesList.push(
       await templateForComponentFile({
         name: "Login",
         suffix: "Page",
         extension: typescript ? ".tsx" : ".jsx",
         webPathSection: "pages",
         generator: "dbAuth",
-        templatePath: webauthn ? "login.webAuthn.tsx.template" : "login.tsx.template",
+        templatePath: loginTemplatePath(webauthn, oauthEnabled),
         templateVars
       })
     );
   }
   if (!skipReset) {
-    files2.push(
+    filesList.push(
       await templateForComponentFile({
         name: "ResetPassword",
         suffix: "Page",
@@ -122,19 +132,19 @@ const files = async ({
     );
   }
   if (!skipSignup) {
-    files2.push(
+    filesList.push(
       await templateForComponentFile({
         name: "Signup",
         suffix: "Page",
         extension: typescript ? ".tsx" : ".jsx",
         webPathSection: "pages",
         generator: "dbAuth",
-        templatePath: "signup.tsx.template",
+        templatePath: oauthEnabled ? "signup.oauth.tsx.template" : "signup.tsx.template",
         templateVars
       })
     );
   }
-  if (files2.length === 0) {
+  if (filesList.length === 0) {
     console.info(c.error("\nNo files to generate.\n"));
     process.exit(0);
   }
@@ -147,25 +157,27 @@ const files = async ({
       ),
       { name: "scaffold" }
     );
-    files2.push([scaffoldOutputPath, scaffoldTemplate]);
+    filesList.push([scaffoldOutputPath, scaffoldTemplate]);
   }
-  return files2.reduce(async (accP, [outputPath, content]) => {
-    const acc = await accP;
-    let template = content;
-    if (outputPath.match(/\.[jt]sx?/) && !typescript) {
-      template = await transformTSToJS(outputPath, content);
-    }
-    return {
-      [outputPath]: template,
-      ...acc
-    };
-  }, Promise.resolve({}));
+  return filesList.reduce(
+    async (accP, [outputPath, content]) => {
+      const acc = await accP;
+      let template = content;
+      if (outputPath.match(/\.[jt]sx?/) && !typescript) {
+        template = await transformTSToJS(outputPath, content);
+      }
+      return {
+        [outputPath]: template,
+        ...acc
+      };
+    },
+    Promise.resolve({})
+  );
 };
 const tasks = ({
   enquirer,
   listr2,
   force,
-  tests,
   typescript,
   skipForgot,
   skipLogin,
@@ -276,7 +288,6 @@ const tasks = ({
         title: "Creating pages...",
         task: async () => {
           const filesObj = await files({
-            tests,
             typescript,
             skipForgot,
             skipLogin,
@@ -304,7 +315,7 @@ const tasks = ({
       {
         title: "Generate types...",
         task: () => {
-          execa.commandSync("yarn cedar g types");
+          runBinSync("cedar", ["g", "types"]);
         }
       },
       {
@@ -314,7 +325,7 @@ const tasks = ({
       }
     ],
     {
-      silentRendererCondition: () => listr2?.silentRendererCondition,
+      silentRendererCondition: () => listr2?.silentRendererCondition ?? false,
       rendererOptions: { collapseSubtasks: false },
       ctx: { enquirer },
       exitOnError: true
@@ -328,7 +339,7 @@ const handler = async (yargs) => {
     skipLogin: yargs.skipLogin,
     skipReset: yargs.skipReset,
     skipSignup: yargs.skipSignup,
-    webauthn: yargs.webauthn,
+    webauthn: yargs.webauthn ?? void 0,
     force: yargs.force,
     rollback: yargs.rollback
   });
@@ -340,10 +351,11 @@ const handler = async (yargs) => {
     await t.run();
     console.log("");
     console.log(
-      yargs.webauthn || t.ctx.webauthn ? getPostInstallWebauthnMessage(isDbAuthSetup()) : getPostInstallMessage(isDbAuthSetup())
+      yargs.webauthn || t.ctx?.webauthn ? getPostInstallWebauthnMessage(isDbAuthSetup()) : getPostInstallMessage(isDbAuthSetup())
     );
   } catch (e) {
-    console.log(c.error(e.message));
+    const msg = e instanceof Error ? e.message : String(e);
+    console.log(c.error(msg));
   }
 };
 function isDbAuthSetup() {
@@ -357,7 +369,7 @@ function isDbAuthSetup() {
       "auth." + webAuthExtension
     );
     return /^import (.*) from ['"]@cedarjs\/auth-dbauth-web['"]/m.test(
-      fs.readFileSync(webAuthPath)
+      fs.readFileSync(webAuthPath, "utf-8")
     );
   }
   return false;
@@ -369,6 +381,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/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

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

@@ -0,0 +1,147 @@
+import { useEffect, useRef } from 'react'
+
+import {
+  Form,
+  Label,
+  TextField,
+  PasswordField,
+  FieldError,
+  Submit,
+} from '@cedarjs/forms'
+import { Link, navigate, routes } from '@cedarjs/router'
+import { Metadata } from '@cedarjs/web'
+import { toast, Toaster } from '@cedarjs/web/toast'
+
+import { getOAuthUrl } from '@cedarjs/auth-dbauth-web/oauth'
+
+import { useAuth } from 'src/auth'
+
+const SignupPage = () => {
+  const { isAuthenticated, signUp } = useAuth()
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate(routes.home())
+    }
+  }, [isAuthenticated])
+
+  // focus on ${usernameLowerCase} box on page load
+  const ${usernameCamelCase}Ref = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    ${usernameCamelCase}Ref.current?.focus()
+  }, [])
+
+  const onSubmit = async (data: Record<string, string>) => {
+    const response = await signUp({ username: data.${usernameCamelCase}, password: data.${passwordCamelCase} })
+
+    if (response.message) {
+      toast(response.message)
+    } else if (response.error) {
+      toast.error(response.error)
+    } else {
+      // user is signed in automatically
+      toast.success('Welcome!')
+    }
+  }
+
+  return (
+    <>
+      <Metadata title="Signup" />
+
+      <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">Signup</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',
+                      },
+                    }}
+                  />
+                  <FieldError name="${passwordCamelCase}" className="rw-field-error" />
+
+                  <div className="rw-button-group">
+                    <Submit className="rw-button rw-button-blue">
+                      Sign Up
+                    </Submit>
+                  </div>
+                </Form>
+
+                {/*
+                 * OAuth signup 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: 'signup' })}
+                    className="rw-button rw-button-blue"
+                  >
+                    Continue with Google
+                  </a>
+                  <a
+                    href={getOAuthUrl('github', { flow: 'signup' })}
+                    className="rw-button rw-button-blue"
+                  >
+                    Continue with GitHub
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="rw-login-link">
+            <span>Already have an account?</span>{' '}
+            <Link to={routes.login()} className="rw-link">
+              Log in!
+            </Link>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+}
+
+export default SignupPage