Label override flags for dbAuth generator

packages/cli/src/commands/generate/dbAuth/dbAuth.js

@@ -92,6 +92,16 @@ export const builder = (yargs) => {
       description: 'Include WebAuthn support (TouchID/FaceID)',
       type: 'boolean',
     })
+    .option('username', {
+      default: 'username',
+      description: 'Override default form label for username field',
+      type: 'string',
+    })
+    .option('password', {
+      default: 'password',
+      description: 'Override default form label for password field',
+      type: 'string',
+    })
 
     .epilogue(
       `Also see the ${terminalLink(
@@ -114,9 +124,21 @@ export const files = ({
   skipReset,
   skipSignup,
   webAuthn,
+  username,
+  password,
 }) => {
   const files = []
 
+  const usernameLowercase =
+    username == null ? 'username' : username.toLowerCase()
+  const usernameCapitalised =
+    usernameLowercase.charAt(0).toUpperCase() + usernameLowercase.slice(1)
+
+  const passwordLowercase =
+    password == null ? 'password' : password.toLowerCase()
+  const passwordCapitalised =
+    passwordLowercase.charAt(0).toUpperCase() + passwordLowercase.slice(1)
+
   if (!skipForgot) {
     files.push(
       templateForComponentFile({
@@ -126,6 +148,12 @@ export const files = ({
         webPathSection: 'pages',
         generator: 'dbAuth',
         templatePath: 'forgotPassword.tsx.template',
+        templateVars: {
+          usernameLowercase,
+          usernameCapitalised,
+          passwordLowercase,
+          passwordCapitalised,
+        },
       })
     )
   }
@@ -141,6 +169,12 @@ export const files = ({
         templatePath: webAuthn
           ? 'login.webAuthn.tsx.template'
           : 'login.tsx.template',
+        templateVars: {
+          usernameLowercase,
+          usernameCapitalised,
+          passwordLowercase,
+          passwordCapitalised,
+        },
       })
     )
   }
@@ -154,6 +188,12 @@ export const files = ({
         webPathSection: 'pages',
         generator: 'dbAuth',
         templatePath: 'resetPassword.tsx.template',
+        templateVars: {
+          usernameLowercase,
+          usernameCapitalised,
+          passwordLowercase,
+          passwordCapitalised,
+        },
       })
     )
   }
@@ -167,6 +207,12 @@ export const files = ({
         webPathSection: 'pages',
         generator: 'dbAuth',
         templatePath: 'signup.tsx.template',
+        templateVars: {
+          usernameLowercase,
+          usernameCapitalised,
+          passwordLowercase,
+          passwordCapitalised,
+        },
       })
     )
   }
@@ -213,6 +259,8 @@ const tasks = ({
   skipReset,
   skipSignup,
   webAuthn,
+  username,
+  password,
 }) => {
   return new Listr(
     [
@@ -228,6 +276,8 @@ const tasks = ({
               skipReset,
               skipSignup,
               webAuthn,
+              username,
+              password,
             }),
             {
               overwriteExisting: force,

packages/cli/src/commands/generate/dbAuth/templates/forgotPassword.tsx.template

@@ -30,23 +30,23 @@ const ForgotPasswordPage = () => {
       // been invoked, let the user know how to get the link to reset their
       // password (sent in email, perhaps?)
       toast.success(
-        'A link to reset your password was sent to ' + response.email
+        'A link to reset your ${passwordLowercase} was sent to ' + response.email
       )
       navigate(routes.login())
     }
   }
 
   return (
     <>
-      <MetaTags title="Forgot Password" />
+      <MetaTags title="Forgot ${passwordCapitalised}" />
 
       <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">
-                Forgot Password
+                Forgot ${passwordCapitalised}
               </h2>
             </header>
 
@@ -59,15 +59,18 @@ const ForgotPasswordPage = () => {
                       className="rw-label"
                       errorClassName="rw-label rw-label-error"
                     >
-                      Username
+                      ${usernameCapitalised}
                     </Label>
                     <TextField
                       name="username"
                       className="rw-input"
                       errorClassName="rw-input rw-input-error"
                       ref={usernameRef}
                       validation={{
-                        required: true,
+                        required: {
+                          value: true,
+                          message: '${usernameCapitalised} is required',
+                        },
                       }}
                     />
 

packages/cli/src/commands/generate/dbAuth/templates/login.tsx.template

@@ -60,7 +60,7 @@ const LoginPage = () => {
                     className="rw-label"
                     errorClassName="rw-label rw-label-error"
                   >
-                    Username
+                    ${usernameCapitalised}
                   </Label>
                   <TextField
                     name="username"
@@ -70,7 +70,7 @@ const LoginPage = () => {
                     validation={{
                       required: {
                         value: true,
-                        message: 'Username is required',
+                        message: '${usernameCapitalised} is required',
                       },
                     }}
                   />
@@ -82,7 +82,7 @@ const LoginPage = () => {
                     className="rw-label"
                     errorClassName="rw-label rw-label-error"
                   >
-                    Password
+                    ${passwordCapitalised}
                   </Label>
                   <PasswordField
                     name="password"
@@ -92,7 +92,7 @@ const LoginPage = () => {
                     validation={{
                       required: {
                         value: true,
-                        message: 'Password is required',
+                        message: '${passwordCapitalised} is required',
                       },
                     }}
                   />
@@ -102,7 +102,7 @@ const LoginPage = () => {
                       to={routes.forgotPassword()}
                       className="rw-forgot-link"
                     >
-                      Forgot Password?
+                      Forgot ${passwordCapitalised}?
                     </Link>
                   </div>
 

packages/cli/src/commands/generate/dbAuth/templates/login.webAuthn.tsx.template

@@ -44,7 +44,7 @@ const LoginPage = ({ type }) => {
     }
   }, [loading, isAuthenticated])
 
-  // focus on the username field as soon as the page loads
+  // focus on the ${usernameLowercase} field as soon as the page loads
   const usernameRef = useRef()
   useEffect(() => {
     usernameRef.current && usernameRef.current.focus()
@@ -146,7 +146,7 @@ const LoginPage = ({ type }) => {
         className="rw-label"
         errorClassName="rw-label rw-label-error"
       >
-        Username
+        ${usernameCapitalised}
       </Label>
       <TextField
         name="username"
@@ -157,7 +157,7 @@ const LoginPage = ({ type }) => {
         validation={{
           required: {
             value: true,
-            message: 'Username is required',
+            message: '${usernameCapitalised} is required',
           },
         }}
       />
@@ -169,7 +169,7 @@ const LoginPage = ({ type }) => {
         className="rw-label"
         errorClassName="rw-label rw-label-error"
       >
-        Password
+        ${passwordCapitalised}
       </Label>
       <PasswordField
         name="password"
@@ -179,14 +179,14 @@ const LoginPage = ({ type }) => {
         validation={{
           required: {
             value: true,
-            message: 'Password is required',
+            message: '${passwordCapitalised} is required',
           },
         }}
       />
 
       <div className="rw-forgot-link">
         <Link to={routes.forgotPassword()} className="rw-forgot-link">
-          Forgot Password?
+          Forgot ${passwordCapitalised}?
         </Link>
       </div>
 
@@ -217,7 +217,7 @@ const LoginPage = ({ type }) => {
           <div className="rw-login-link">
             <span>or login with </span>{' '}
             <a href="?type=password" className="rw-link">
-              username and password
+              ${usernameLowercase} and ${passwordLowercase}
             </a>
           </div>
         )

packages/cli/src/commands/generate/dbAuth/templates/resetPassword.tsx.template

@@ -58,15 +58,15 @@ const ResetPasswordPage = ({ resetToken }: { resetToken: string }) => {
 
   return (
     <>
-      <MetaTags title="Reset Password" />
+      <MetaTags title="Reset ${passwordCapitalised}" />
 
       <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 Password
+                Reset ${passwordCapitalised}
               </h2>
             </header>
 
@@ -79,7 +79,7 @@ const ResetPasswordPage = ({ resetToken }: { resetToken: string }) => {
                       className="rw-label"
                       errorClassName="rw-label rw-label-error"
                     >
-                      New Password
+                      New ${passwordCapitalised}
                     </Label>
                     <PasswordField
                       name="password"
@@ -91,7 +91,7 @@ const ResetPasswordPage = ({ resetToken }: { resetToken: string }) => {
                       validation={{
                         required: {
                           value: true,
-                          message: 'Password is required',
+                          message: 'New ${passwordCapitalised} is required',
                         },
                       }}
                     />

packages/cli/src/commands/generate/dbAuth/templates/signup.tsx.template

@@ -23,7 +23,7 @@ const SignupPage = () => {
     }
   }, [isAuthenticated])
 
-  // focus on email box on page load
+  // focus on ${usernameLowercase} box on page load
   const usernameRef = useRef<HTMLInputElement>(null)
   useEffect(() => {
     usernameRef.current?.focus()
@@ -62,7 +62,7 @@ const SignupPage = () => {
                     className="rw-label"
                     errorClassName="rw-label rw-label-error"
                   >
-                    Username
+                    ${usernameCapitalised}
                   </Label>
                   <TextField
                     name="username"
@@ -72,7 +72,7 @@ const SignupPage = () => {
                     validation={{
                       required: {
                         value: true,
-                        message: 'Username is required',
+                        message: '${usernameCapitalised} is required',
                       },
                     }}
                   />
@@ -83,7 +83,7 @@ const SignupPage = () => {
                     className="rw-label"
                     errorClassName="rw-label rw-label-error"
                   >
-                    Password
+                    ${passwordCapitalised}
                   </Label>
                   <PasswordField
                     name="password"
@@ -93,7 +93,7 @@ const SignupPage = () => {
                     validation={{
                       required: {
                         value: true,
-                        message: 'Password is required',
+                        message: '${passwordCapitalised} is required',
                       },
                     }}
                   />