@_mustachio/openauth 0.9.1 → 0.10.0

package/src/ui/password.tsx

@@ -1,405 +0,0 @@
-/**
- * Configure the UI that's used by the Password provider.
- *
- * ```ts {1,7-12}
- * import { PasswordUI } from "@openauthjs/openauth/ui/password"
- * import { PasswordProvider } from "@openauthjs/openauth/provider/password"
- *
- * export default issuer({
- *   providers: {
- *     password: PasswordAdapter(
- *       PasswordUI({
- *         copy: {
- *           error_email_taken: "This email is already taken."
- *         },
- *         sendCode: (email, code) => console.log(email, code)
- *       })
- *     )
- *   },
- *   // ...
- * })
- * ```
- *
- * @packageDocumentation
- */
-/** @jsxImportSource hono/jsx */
-
-import {
-  PasswordChangeError,
-  PasswordConfig,
-  PasswordLoginError,
-  PasswordRegisterError,
-} from "../provider/password.js"
-import { Layout } from "./base.js"
-import "./form.js"
-import { FormAlert } from "./form.js"
-
-const DEFAULT_COPY = {
-  /**
-   * Error message when email is already taken.
-   */
-  error_email_taken: "There is already an account with this email.",
-  /**
-   * Error message when the confirmation code is incorrect.
-   */
-  error_invalid_code: "Code is incorrect.",
-  /**
-   * Error message when the email is invalid.
-   */
-  error_invalid_email: "Email is not valid.",
-  /**
-   * Error message when the password is incorrect.
-   */
-  error_invalid_password: "Password is incorrect.",
-  /**
-   * Error message when the passwords do not match.
-   */
-  error_password_mismatch: "Passwords do not match.",
-  /**
-   * Error message when the user enters a password that fails validation.
-   */
-  error_validation_error: "Password does not meet requirements.",
-  /**
-   * Title of the register page.
-   */
-  register_title: "Welcome to the app",
-  /**
-   * Description of the register page.
-   */
-  register_description: "Sign in with your email",
-  /**
-   * Title of the login page.
-   */
-  login_title: "Welcome to the app",
-  /**
-   * Description of the login page.
-   */
-  login_description: "Sign in with your email",
-  /**
-   * Copy for the register button.
-   */
-  register: "Register",
-  /**
-   * Copy for the register link.
-   */
-  register_prompt: "Don't have an account?",
-  /**
-   * Copy for the login link.
-   */
-  login_prompt: "Already have an account?",
-  /**
-   * Copy for the login button.
-   */
-  login: "Login",
-  /**
-   * Copy for the forgot password link.
-   */
-  change_prompt: "Forgot password?",
-  /**
-   * Copy for the resend code button.
-   */
-  code_resend: "Resend code",
-  /**
-   * Copy for the "Back to" link.
-   */
-  code_return: "Back to",
-  /**
-   * Copy for the logo.
-   * @internal
-   */
-  logo: "A",
-  /**
-   * Copy for the email input.
-   */
-  input_email: "Email",
-  /**
-   * Copy for the password input.
-   */
-  input_password: "Password",
-  /**
-   * Copy for the code input.
-   */
-  input_code: "Code",
-  /**
-   * Copy for the repeat password input.
-   */
-  input_repeat: "Repeat password",
-  /**
-   * Copy for the continue button.
-   */
-  button_continue: "Continue",
-} satisfies {
-  [key in `error_${
-    | PasswordLoginError["type"]
-    | PasswordRegisterError["type"]
-    | PasswordChangeError["type"]}`]: string
-} & Record<string, string>
-
-type PasswordUICopy = typeof DEFAULT_COPY
-
-/**
- * Configure the password UI.
- */
-export interface PasswordUIOptions extends Pick<
-  PasswordConfig,
-  "sendCode" | "validatePassword"
-> {
-  /**
-   * Custom copy for the UI.
-   */
-  copy?: Partial<PasswordUICopy>
-}
-
-/**
- * Creates a UI for the Password provider flow.
- * @param input - Configure the UI.
- */
-export function PasswordUI(input: PasswordUIOptions): PasswordConfig {
-  const copy = {
-    ...DEFAULT_COPY,
-    ...input.copy,
-  }
-  return {
-    validatePassword: input.validatePassword,
-    sendCode: input.sendCode,
-    login: async (_req, form, error): Promise<Response> => {
-      const jsx = (
-        <Layout>
-          <form data-component="form" method="post">
-            <FormAlert message={error?.type && copy?.[`error_${error.type}`]} />
-            <input
-              data-component="input"
-              type="email"
-              name="email"
-              required
-              placeholder={copy.input_email}
-              autofocus={!error}
-              value={form?.get("email")?.toString()}
-            />
-            <input
-              data-component="input"
-              autofocus={error?.type === "invalid_password"}
-              required
-              type="password"
-              name="password"
-              placeholder={copy.input_password}
-              autoComplete="current-password"
-            />
-            <button data-component="button">{copy.button_continue}</button>
-            <div data-component="form-footer">
-              <span>
-                {copy.register_prompt}{" "}
-                <a data-component="link" href="register">
-                  {copy.register}
-                </a>
-              </span>
-              <a data-component="link" href="change">
-                {copy.change_prompt}
-              </a>
-            </div>
-          </form>
-        </Layout>
-      )
-      return new Response(jsx.toString(), {
-        status: error ? 401 : 200,
-        headers: {
-          "Content-Type": "text/html",
-        },
-      })
-    },
-    register: async (_req, state, form, error): Promise<Response> => {
-      const emailError = ["invalid_email", "email_taken"].includes(
-        error?.type || "",
-      )
-      const passwordError = [
-        "invalid_password",
-        "password_mismatch",
-        "validation_error",
-      ].includes(error?.type || "")
-      const jsx = (
-        <Layout>
-          <form data-component="form" method="post">
-            <FormAlert
-              message={
-                error?.type
-                  ? error.type === "validation_error"
-                    ? (error.message ?? copy?.[`error_${error.type}`])
-                    : copy?.[`error_${error.type}`]
-                  : undefined
-              }
-            />
-            {state.type === "start" && (
-              <>
-                <input type="hidden" name="action" value="register" />
-                <input
-                  data-component="input"
-                  autofocus={!error || emailError}
-                  type="email"
-                  name="email"
-                  value={!emailError ? form?.get("email")?.toString() : ""}
-                  required
-                  placeholder={copy.input_email}
-                />
-                <input
-                  data-component="input"
-                  autofocus={passwordError}
-                  type="password"
-                  name="password"
-                  placeholder={copy.input_password}
-                  required
-                  value={
-                    !passwordError ? form?.get("password")?.toString() : ""
-                  }
-                  autoComplete="new-password"
-                />
-                <input
-                  data-component="input"
-                  type="password"
-                  name="repeat"
-                  required
-                  autofocus={passwordError}
-                  placeholder={copy.input_repeat}
-                  autoComplete="new-password"
-                />
-                <button data-component="button">{copy.button_continue}</button>
-                <div data-component="form-footer">
-                  <span>
-                    {copy.login_prompt}{" "}
-                    <a data-component="link" href="authorize">
-                      {copy.login}
-                    </a>
-                  </span>
-                </div>
-              </>
-            )}
-
-            {state.type === "code" && (
-              <>
-                <input type="hidden" name="action" value="verify" />
-                <input
-                  data-component="input"
-                  autofocus
-                  name="code"
-                  minLength={6}
-                  maxLength={6}
-                  required
-                  placeholder={copy.input_code}
-                  autoComplete="one-time-code"
-                />
-                <button data-component="button">{copy.button_continue}</button>
-              </>
-            )}
-          </form>
-        </Layout>
-      ) as string
-      return new Response(jsx.toString(), {
-        headers: {
-          "Content-Type": "text/html",
-        },
-      })
-    },
-    change: async (_req, state, form, error): Promise<Response> => {
-      const passwordError = [
-        "invalid_password",
-        "password_mismatch",
-        "validation_error",
-      ].includes(error?.type || "")
-      const jsx = (
-        <Layout>
-          <form data-component="form" method="post" replace>
-            <FormAlert
-              message={
-                error?.type
-                  ? error.type === "validation_error"
-                    ? (error.message ?? copy?.[`error_${error.type}`])
-                    : copy?.[`error_${error.type}`]
-                  : undefined
-              }
-            />
-            {state.type === "start" && (
-              <>
-                <input type="hidden" name="action" value="code" />
-                <input
-                  data-component="input"
-                  autofocus
-                  type="email"
-                  name="email"
-                  required
-                  value={form?.get("email")?.toString()}
-                  placeholder={copy.input_email}
-                />
-              </>
-            )}
-            {state.type === "code" && (
-              <>
-                <input type="hidden" name="action" value="verify" />
-                <input
-                  data-component="input"
-                  autofocus
-                  name="code"
-                  minLength={6}
-                  maxLength={6}
-                  required
-                  placeholder={copy.input_code}
-                  autoComplete="one-time-code"
-                />
-              </>
-            )}
-            {state.type === "update" && (
-              <>
-                <input type="hidden" name="action" value="update" />
-                <input
-                  data-component="input"
-                  autofocus
-                  type="password"
-                  name="password"
-                  placeholder={copy.input_password}
-                  required
-                  value={
-                    !passwordError ? form?.get("password")?.toString() : ""
-                  }
-                  autoComplete="new-password"
-                />
-                <input
-                  data-component="input"
-                  type="password"
-                  name="repeat"
-                  required
-                  value={
-                    !passwordError ? form?.get("password")?.toString() : ""
-                  }
-                  placeholder={copy.input_repeat}
-                  autoComplete="new-password"
-                />
-              </>
-            )}
-            <button data-component="button">{copy.button_continue}</button>
-          </form>
-          {state.type === "code" && (
-            <form method="post">
-              <input type="hidden" name="action" value="code" />
-              <input type="hidden" name="email" value={state.email} />
-              {state.type === "code" && (
-                <div data-component="form-footer">
-                  <span>
-                    {copy.code_return}{" "}
-                    <a data-component="link" href="authorize">
-                      {copy.login.toLowerCase()}
-                    </a>
-                  </span>
-                  <button data-component="link">{copy.code_resend}</button>
-                </div>
-              )}
-            </form>
-          )}
-        </Layout>
-      )
-      return new Response(jsx.toString(), {
-        status: error ? 400 : 200,
-        headers: {
-          "Content-Type": "text/html",
-        },
-      })
-    },
-  }
-}

package/src/ui/select.tsx

@@ -1,221 +0,0 @@
-/**
- * The UI that's displayed when loading the root page of the OpenAuth server. You can configure
- * which providers should be displayed in the select UI.
- *
- * ```ts
- * import { Select } from "@openauthjs/openauth/ui/select"
- *
- * export default issuer({
- *   select: Select({
- *     providers: {
- *       github: {
- *         hide: true
- *       },
- *       google: {
- *         display: "Google"
- *       }
- *     }
- *   })
- *   // ...
- * })
- * ```
- *
- * @packageDocumentation
- */
-/** @jsxImportSource hono/jsx */
-
-import { Layout } from "./base.js"
-import { ICON_GITHUB, ICON_GOOGLE } from "./icon.js"
-
-export interface SelectProps {
-  /**
-   * An object with all the providers and their config; where the key is the provider name.
-   *
-   * @example
-   * ```ts
-   * {
-   *   github: {
-   *     hide: true
-   *   },
-   *   google: {
-   *     display: "Google"
-   *   }
-   * }
-   * ```
-   */
-  providers?: Record<
-    string,
-    {
-      /**
-       * Whether to hide the provider from the select UI.
-       * @default false
-       */
-      hide?: boolean
-      /**
-       * The display name of the provider.
-       */
-      display?: string
-    }
-  >
-}
-
-export function Select(props?: SelectProps) {
-  return async (
-    providers: Record<string, string>,
-    _req: Request,
-  ): Promise<Response> => {
-    const jsx = (
-      <Layout>
-        <div data-component="form">
-          {Object.entries(providers).map(([key, type]) => {
-            const match = props?.providers?.[key]
-            if (match?.hide) return
-            const icon = ICON[key]
-            return (
-              <a
-                href={`/${key}/authorize`}
-                data-component="button"
-                data-color="ghost"
-              >
-                {icon && <i data-slot="icon">{icon}</i>}
-                Continue with {match?.display || DISPLAY[type] || type}
-              </a>
-            )
-          })}
-        </div>
-      </Layout>
-    )
-
-    return new Response(jsx.toString(), {
-      headers: {
-        "Content-Type": "text/html",
-      },
-    })
-  }
-}
-
-const DISPLAY: Record<string, string> = {
-  twitch: "Twitch",
-  google: "Google",
-  github: "GitHub",
-  apple: "Apple",
-  x: "X",
-  facebook: "Facebook",
-  microsoft: "Microsoft",
-  slack: "Slack",
-}
-
-const ICON: Record<string, any> = {
-  code: (
-    <svg
-      fill="currentColor"
-      viewBox="0 0 52 52"
-      data-name="Layer 1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M8.55,36.91A6.55,6.55,0,1,1,2,43.45,6.54,6.54,0,0,1,8.55,36.91Zm17.45,0a6.55,6.55,0,1,1-6.55,6.54A6.55,6.55,0,0,1,26,36.91Zm17.45,0a6.55,6.55,0,1,1-6.54,6.54A6.54,6.54,0,0,1,43.45,36.91ZM8.55,19.45A6.55,6.55,0,1,1,2,26,6.55,6.55,0,0,1,8.55,19.45Zm17.45,0A6.55,6.55,0,1,1,19.45,26,6.56,6.56,0,0,1,26,19.45Zm17.45,0A6.55,6.55,0,1,1,36.91,26,6.55,6.55,0,0,1,43.45,19.45ZM8.55,2A6.55,6.55,0,1,1,2,8.55,6.54,6.54,0,0,1,8.55,2ZM26,2a6.55,6.55,0,1,1-6.55,6.55A6.55,6.55,0,0,1,26,2ZM43.45,2a6.55,6.55,0,1,1-6.54,6.55A6.55,6.55,0,0,1,43.45,2Z"
-        fill-rule="evenodd"
-      />
-    </svg>
-  ),
-  password: (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M12 1.5a5.25 5.25 0 0 0-5.25 5.25v3a3 3 0 0 0-3 3v6.75a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3v-6.75a3 3 0 0 0-3-3v-3c0-2.9-2.35-5.25-5.25-5.25Zm3.75 8.25v-3a3.75 3.75 0 1 0-7.5 0v3h7.5Z"
-        clip-rule="evenodd"
-      />
-    </svg>
-  ),
-  twitch: (
-    <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-      <path
-        fill="currentColor"
-        d="M40.1 32L10 108.9v314.3h107V480h60.2l56.8-56.8h87l117-117V32H40.1zm357.8 254.1L331 353H224l-56.8 56.8V353H76.9V72.1h321v214zM331 149v116.9h-40.1V149H331zm-107 0v116.9h-40.1V149H224z"
-      ></path>
-    </svg>
-  ),
-  google: ICON_GOOGLE,
-  github: ICON_GITHUB,
-  apple: (
-    <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 814 1000">
-      <path
-        fill="currentColor"
-        d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z "
-      />
-    </svg>
-  ),
-  x: (
-    <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1227">
-      <path
-        fill="currentColor"
-        d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"
-      />
-    </svg>
-  ),
-  microsoft: (
-    <svg
-      role="img"
-      viewBox="0 0 256 256"
-      xmlns="http://www.w3.org/2000/svg"
-      preserveAspectRatio="xMidYMid"
-    >
-      <path fill="#F1511B" d="M121.666 121.666H0V0h121.666z" />
-      <path fill="#80CC28" d="M256 121.666H134.335V0H256z" />
-      <path fill="#00ADEF" d="M121.663 256.002H0V134.336h121.663z" />
-      <path fill="#FBBC09" d="M256 256.002H134.335V134.336H256z" />
-    </svg>
-  ),
-  facebook: (
-    <svg
-      role="img"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 36 36"
-      fill="url(#a)"
-    >
-      <defs>
-        <linearGradient x1="50%" x2="50%" y1="97.078%" y2="0%" id="a">
-          <stop offset="0%" stop-color="#0062E0" />
-          <stop offset="100%" stop-color="#19AFFF" />
-        </linearGradient>
-      </defs>
-      <path d="M15 35.8C6.5 34.3 0 26.9 0 18 0 8.1 8.1 0 18 0s18 8.1 18 18c0 8.9-6.5 16.3-15 17.8l-1-.8h-4l-1 .8z" />
-      <path
-        fill="#FFF"
-        d="m25 23 .8-5H21v-3.5c0-1.4.5-2.5 2.7-2.5H26V7.4c-1.3-.2-2.7-.4-4-.4-4.1 0-7 2.5-7 7v4h-4.5v5H15v12.7c1 .2 2 .3 3 .3s2-.1 3-.3V23h4z"
-      />
-    </svg>
-  ),
-  slack: (
-    <svg
-      role="img"
-      enable-background="new 0 0 2447.6 2452.5"
-      viewBox="0 0 2447.6 2452.5"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g clip-rule="evenodd" fill-rule="evenodd">
-        <path
-          d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
-          fill="#36c5f0"
-        />
-        <path
-          d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
-          fill="#2eb67d"
-        />
-        <path
-          d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
-          fill="#ecb22e"
-        />
-        <path
-          d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
-          fill="#e01e5a"
-        />
-      </g>
-    </svg>
-  ),
-}