auto: format code

toolbeam · Dec 16, 2024 · 7764e39 · 7764e39
1 parent 8b5f490
commit 7764e39
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 12 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/openauth/src/ui/code.tsx b/packages/openauth/src/ui/code.tsx
@@ -5,20 +5,40 @@ import { UnknownStateError } from "../error.js"
 import { Layout } from "./base.js"
 import { FormAlert } from "./form.js"
 
+const DEFAULT_COPY = {
+  email_placeholder: "Email",
+  email_invalid: "Email address is not valid",
+  button_continue: "Continue",
+  code_info: "We'll send a pin code to your email",
+  code_placeholder: "Code",
+  code_invalid: "Invalid code",
+  code_sent: "Code sent to ",
+  code_resent: "Code resent to ",
+  code_didnt_get: "Didn't get code?",
+  code_resend: "Resend",
+}
+
+export type CodeUICopy = typeof DEFAULT_COPY
+
 export function CodeUI(props: {
   sendCode: (claims: Record<string, string>, code: string) => Promise<void>
+  copy?: Partial<CodeUICopy>
 }) {
+  const copy = {
+    ...DEFAULT_COPY,
+    ...props.copy,
+  }
+
   return {
     sendCode: props.sendCode,
     length: 6,
     request: async (_req, state, _form, error): Promise<Response> => {
       if (state.type === "start") {
         const jsx = (
           <Layout>
-            {/* Form */}
             <form data-component="form" method="post">
               {error?.type === "invalid_claim" && (
-                <FormAlert message={"Email address is not valid"} />
+                <FormAlert message={copy.email_invalid} />
               )}
               <input type="hidden" name="action" value="request" />
               <input
@@ -27,13 +47,11 @@ export function CodeUI(props: {
                 type="email"
                 name="email"
                 required
-                placeholder="Email"
+                placeholder={copy.email_placeholder}
               />
-              <button data-component="button">Continue</button>
+              <button data-component="button">{copy.button_continue}</button>
             </form>
-            <p data-component="form-footer">
-              We&apos;ll send a pin code to your email
-            </p>
+            <p data-component="form-footer">{copy.code_info}</p>
           </Layout>
         )
         return new Response(jsx.toString(), {
@@ -48,12 +66,12 @@ export function CodeUI(props: {
           <Layout>
             <form data-component="form" class="form" method="post">
               {error?.type === "invalid_code" && (
-                <FormAlert message={"Invalid code"} />
+                <FormAlert message={copy.code_invalid} />
               )}
               {state.type === "code" && (
                 <FormAlert
                   message={
-                    (state.resend ? "Code resent to " : "Code sent to ") +
+                    (state.resend ? copy.code_resent : copy.code_sent) +
                     state.claims.email
                   }
                   color="success"
@@ -68,9 +86,9 @@ export function CodeUI(props: {
                 type="text"
                 name="code"
                 required
-                placeholder="Code"
+                placeholder={copy.code_placeholder}
               />
-              <button data-component="button">Continue</button>
+              <button data-component="button">{copy.button_continue}</button>
             </form>
             <form method="post">
               {Object.entries(state.claims).map(([key, value]) => (
@@ -85,7 +103,8 @@ export function CodeUI(props: {
               <input type="hidden" name="action" value="request" />
               <div data-component="form-footer">
                 <span>
-                  Didn't get code? <button data-component="link">Resend</button>
+                  {copy.code_didnt_get}{" "}
+                  <button data-component="link">{copy.code_resend}</button>
                 </span>
               </div>
             </form>