@cedarjs/cli 0.0.4

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

@@ -0,0 +1,264 @@
+import { useEffect, useRef, useState } 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 { useAuth } from 'src/auth'
+
+const WELCOME_MESSAGE = 'Welcome back!'
+const REDIRECT = routes.home()
+
+const LoginPage = ({ type }) => {
+  const {
+    isAuthenticated,
+    client: webAuthn,
+    loading,
+    logIn,
+    reauthenticate,
+  } = useAuth()
+  const [shouldShowWebAuthn, setShouldShowWebAuthn] = useState(false)
+  const [showWebAuthn, setShowWebAuthn] = useState(
+    webAuthn.isEnabled() && type !== 'password'
+  )
+
+  // should redirect right after login or wait to show the webAuthn prompts?
+  useEffect(() => {
+    if (isAuthenticated && (!shouldShowWebAuthn || webAuthn.isEnabled())) {
+      navigate(REDIRECT)
+    }
+  }, [isAuthenticated, shouldShowWebAuthn])
+
+  // if WebAuthn is enabled, show the prompt as soon as the page loads
+  useEffect(() => {
+    if (!loading && !isAuthenticated && showWebAuthn) {
+      onAuthenticate()
+    }
+  }, [loading, isAuthenticated])
+
+  // focus on the ${usernameLowerCase} field as soon as the page loads
+  const ${usernameCamelCase}Ref = useRef()
+  useEffect(() => {
+    ${usernameCamelCase}Ref.current && ${usernameCamelCase}Ref.current.focus()
+  }, [])
+
+  const onSubmit = async (data) => {
+    const webAuthnSupported = await webAuthn.isSupported()
+
+    if (webAuthnSupported) {
+      setShouldShowWebAuthn(true)
+    }
+    const response = await logIn({ username: data.${usernameCamelCase}, password: data.${passwordCamelCase} })
+
+    if (response.message) {
+      // auth details good, but user not logged in
+      toast(response.message)
+    } else if (response.error) {
+      // error while authenticating
+      toast.error(response.error)
+    } else {
+      // user logged in
+      if (webAuthnSupported) {
+        setShowWebAuthn(true)
+      } else {
+        toast.success(WELCOME_MESSAGE)
+      }
+    }
+  }
+
+  const onAuthenticate = async () => {
+    try {
+      await webAuthn.authenticate()
+      await reauthenticate()
+      toast.success(WELCOME_MESSAGE)
+      navigate(REDIRECT)
+    } catch (e) {
+      if (e.name === 'WebAuthnDeviceNotFoundError') {
+        toast.error(
+          'Device not found, log in with ${usernameTitleCase}/${passwordTitleCase} to continue'
+        )
+        setShowWebAuthn(false)
+      } else {
+        toast.error(e.message)
+      }
+    }
+  }
+
+  const onRegister = async () => {
+    try {
+      await webAuthn.register()
+      toast.success(WELCOME_MESSAGE)
+      navigate(REDIRECT)
+    } catch (e) {
+      toast.error(e.message)
+    }
+  }
+
+  const onSkip = () => {
+    toast.success(WELCOME_MESSAGE)
+    setShouldShowWebAuthn(false)
+  }
+
+  const AuthWebAuthnPrompt = () => {
+    return (
+      <div className="rw-webauthn-wrapper">
+        <h2>WebAuthn Login Enabled</h2>
+        <p>Log in with your fingerprint, face or PIN</p>
+        <div className="rw-button-group">
+          <button className="rw-button rw-button-blue" onClick={onAuthenticate}>
+            Open Authenticator
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  const RegisterWebAuthnPrompt = () => (
+    <div className="rw-webauthn-wrapper">
+      <h2>No more ${passwordTitleCase}s!</h2>
+      <p>
+        Depending on your device you can log in with your fingerprint, face or
+        PIN next time.
+      </p>
+      <div className="rw-button-group">
+        <button className="rw-button rw-button-blue" onClick={onRegister}>
+          Turn On
+        </button>
+        <button className="rw-button" onClick={onSkip}>
+          Skip for now
+        </button>
+      </div>
+    </div>
+  )
+
+  const PasswordForm = () => (
+    <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}
+        autoFocus
+        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>
+  )
+
+  const formToRender = () => {
+    if (showWebAuthn) {
+      if (webAuthn.isEnabled()) {
+        return <AuthWebAuthnPrompt />
+      } else {
+        return <RegisterWebAuthnPrompt />
+      }
+    } else {
+      return <PasswordForm />
+    }
+  }
+
+  const linkToRender = () => {
+    if (showWebAuthn) {
+      if (webAuthn.isEnabled()) {
+        return (
+          <div className="rw-login-link">
+            <span>or login with </span>{' '}
+            <a href="?type=password" className="rw-link">
+              ${usernameLowerCase} and ${passwordLowerCase}
+            </a>
+          </div>
+        )
+      }
+    } else {
+      return (
+        <div className="rw-login-link">
+          <span>Don&apos;t have an account?</span>{' '}
+          <Link to={routes.signup()} className="rw-link">
+            Sign up!
+          </Link>
+        </div>
+      )
+    }
+  }
+
+  if (loading) {
+    return null
+  }
+
+  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">{formToRender()}</div>
+            </div>
+          </div>
+          {linkToRender()}
+        </div>
+      </main>
+    </>
+  )
+}
+
+export default LoginPage

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

@@ -0,0 +1,121 @@
+import { useEffect, useRef, useState } 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 ResetPasswordPage = ({ resetToken }: { resetToken: string }) => {
+  const { isAuthenticated, reauthenticate, validateResetToken, resetPassword } =
+    useAuth()
+  const [enabled, setEnabled] = useState(true)
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate(routes.home())
+    }
+  }, [isAuthenticated])
+
+  useEffect(() => {
+    const validateToken = async () => {
+      const response = await validateResetToken(resetToken)
+      if (response.error) {
+        setEnabled(false)
+        toast.error(response.error)
+      } else {
+        setEnabled(true)
+      }
+    }
+    validateToken()
+  }, [resetToken, validateResetToken])
+
+  const ${passwordCamelCase}Ref = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    ${passwordCamelCase}Ref.current?.focus()
+  }, [])
+
+  const onSubmit = async (data: Record<string, string>) => {
+    const response = await resetPassword({
+      resetToken,
+      password: data.${passwordCamelCase},
+    })
+
+    if (response.error) {
+      toast.error(response.error)
+    } else {
+      toast.success('${passwordTitleCase} changed!')
+      await reauthenticate()
+      navigate(routes.login())
+    }
+  }
+
+  return (
+    <>
+      <Metadata title="Reset ${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">
+                Reset ${passwordTitleCase}
+              </h2>
+            </header>
+
+            <div className="rw-segment-main">
+              <div className="rw-form-wrapper">
+                <Form onSubmit={onSubmit} className="rw-form-wrapper">
+                  <div className="text-left">
+                    <Label
+                      name="${passwordCamelCase}"
+                      className="rw-label"
+                      errorClassName="rw-label rw-label-error"
+                    >
+                      New ${passwordTitleCase}
+                    </Label>
+                    <PasswordField
+                      name="${passwordCamelCase}"
+                      autoComplete="new-password"
+                      className="rw-input"
+                      errorClassName="rw-input rw-input-error"
+                      disabled={!enabled}
+                      ref={${passwordCamelCase}Ref}
+                      validation={{
+                        required: {
+                          value: true,
+                          message: 'New ${passwordTitleCase} is required',
+                        },
+                      }}
+                    />
+
+                    <FieldError name="${passwordCamelCase}" className="rw-field-error" />
+                  </div>
+
+                  <div className="rw-button-group">
+                    <Submit
+                      className="rw-button rw-button-blue"
+                      disabled={!enabled}
+                    >
+                      Submit
+                    </Submit>
+                  </div>
+                </Form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+}
+
+export default ResetPasswordPage

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

@@ -0,0 +1,123 @@
+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 { 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>
+              </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

package/dist/commands/generate/directive/directive.js

@@ -0,0 +1,15 @@
+import {
+  createBuilder,
+  createCommand,
+  createHandler
+} from "../yargsCommandHelpers.js";
+const command = createCommand("directive");
+const description = "Generate a new GraphQL directive";
+const builder = createBuilder({ componentName: "directive" });
+const handler = createHandler("directive");
+export {
+  builder,
+  command,
+  description,
+  handler
+};

package/dist/commands/generate/directive/directiveHandler.js

@@ -0,0 +1,159 @@
+import path from "path";
+import camelcase from "camelcase";
+import execa from "execa";
+import { Listr } from "listr2";
+import prompts from "prompts";
+import { recordTelemetryAttributes } from "@cedarjs/cli-helpers";
+import { getConfig } from "@cedarjs/project-config";
+import c from "../../../lib/colors.js";
+import {
+  getPaths,
+  writeFilesTask,
+  transformTSToJS
+} from "../../../lib/index.js";
+import {
+  prepareForRollback,
+  addFunctionToRollback
+} from "../../../lib/rollback.js";
+import { validateName } from "../helpers.js";
+import { templateForComponentFile } from "../yargsHandlerHelpers.js";
+const files = async ({ name, typescript = false, type, tests }) => {
+  if (tests === void 0) {
+    tests = getConfig().generate.tests;
+  }
+  if (!type) {
+    throw new Error("You must specify a directive type");
+  }
+  const camelName = camelcase(name);
+  const outputFilename = `${camelName}.${typescript ? "ts" : "js"}`;
+  const directiveFile = await templateForComponentFile({
+    name,
+    extension: typescript ? ".ts" : ".js",
+    generator: "directive",
+    templatePath: `${type}.directive.ts.template`,
+    outputPath: path.join(getPaths().api.directives, camelName, outputFilename),
+    templateVars: { camelName }
+  });
+  const files2 = [directiveFile];
+  if (tests) {
+    const testOutputFilename = `${camelcase(name)}.test.${typescript ? "ts" : "js"}`;
+    const testFile = await templateForComponentFile({
+      name,
+      extension: typescript ? ".test.ts" : ".test.js",
+      generator: "directive",
+      templatePath: `${type}.directive.test.ts.template`,
+      outputPath: path.join(
+        getPaths().api.directives,
+        camelName,
+        testOutputFilename
+      ),
+      templateVars: { camelName }
+    });
+    files2.push(testFile);
+  }
+  return files2.reduce(async (accP, [outputPath, content]) => {
+    const acc = await accP;
+    const template = typescript ? content : await transformTSToJS(outputPath, content);
+    return {
+      [outputPath]: template,
+      ...acc
+    };
+  }, Promise.resolve({}));
+};
+const handler = async (args) => {
+  recordTelemetryAttributes({
+    command: "generate directive",
+    type: args.type,
+    force: args.force,
+    rollback: args.rollback
+  });
+  let notes = "";
+  const POST_RUN_INSTRUCTIONS = `
+   ${c.note("After modifying your directive, you can add it to your SDLs e.g.:")}
+
+    ${c.info("// example todo.sdl.js")}
+    ${c.info("# Option A: Add it to a field")}
+    type Todo {
+      id: Int!
+      body: String! ${c.tip(`@${args.name}`)}
+    }
+
+    ${c.info("# Option B: Add it to query/mutation")}
+    type Query {
+      todos: [Todo] ${c.tip(`@${args.name}`)}
+    }
+`;
+  validateName(args.name);
+  let directiveType = args.type;
+  if (!directiveType) {
+    const response = await prompts({
+      type: "select",
+      name: "directiveType",
+      choices: [
+        {
+          value: "validator",
+          title: "Validator",
+          description: "Implement a validation: throw an error if criteria not met to stop execution"
+        },
+        {
+          value: "transformer",
+          title: "Transformer",
+          description: "Modify values of fields or query responses"
+        }
+      ],
+      message: "What type of directive would you like to generate?"
+    });
+    directiveType = response.directiveType;
+  }
+  const tasks = new Listr(
+    [
+      {
+        title: "Generating directive file ...",
+        task: async () => {
+          const f = await files({ ...args, type: directiveType });
+          return writeFilesTask(f, {
+            overwriteExisting: args.force
+          });
+        }
+      },
+      {
+        title: "Generating TypeScript definitions and GraphQL schemas ...",
+        task: () => {
+          addFunctionToRollback(async () => {
+            await execa("yarn rw-gen", [], {
+              stdio: "pipe",
+              shell: true
+            });
+          }, true);
+          return execa("yarn rw-gen", [], {
+            stdio: "inherit",
+            shell: true
+          });
+        }
+      },
+      {
+        title: "Next steps...",
+        task: () => {
+          notes = POST_RUN_INSTRUCTIONS;
+        }
+      }
+    ].filter(Boolean),
+    { rendererOptions: { collapseSubtasks: false } }
+  );
+  try {
+    if (args.rollback && !args.force) {
+      prepareForRollback(tasks);
+    }
+    await tasks.run();
+    if (notes) {
+      console.log(notes);
+    }
+  } catch (e) {
+    console.log(c.error(e.message));
+    process.exit(1);
+  }
+};
+export {
+  files,
+  handler
+};

package/dist/commands/generate/directive/templates/transformer.directive.test.ts.template

@@ -0,0 +1,18 @@
+import { mockRedwoodDirective, getDirectiveName } from '@cedarjs/testing/api'
+
+import ${camelName} from './${camelName}'
+
+describe('${camelName} directive', () => {
+  it('declares the directive sdl as schema, with the correct name', () => {
+    expect(${camelName}.schema).toBeTruthy()
+    expect(getDirectiveName(${camelName}.schema)).toBe('${camelName}')
+  })
+
+  it('has a ${camelName} implementation transforms the value', () => {
+    const mockExecution = mockRedwoodDirective(${camelName}, {
+      mockedResolvedValue: 'foo',
+    })
+
+    expect(mockExecution()).toBe('bar')
+  })
+})