@sjolystinnovation/app-kit 0.19.0 → 0.21.0

package/src/ui/LoginPage.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { authLinkClassName, authPageClassName, authTitleClassName } from "./authClasses";
+import { CredentialsForm } from "./CredentialsForm";
+import type { CredentialsFormStrings } from "./credentialsFormStrings";
+import { defaultLoginPageStrings, type LoginPageStrings } from "./loginPageStrings";
+import { withDefaults, type TextOverrides } from "./withDefaults";
+
+export interface LoginPageProps {
+  /** Where a signed-in user goes. */
+  redirectTo: string;
+  /** The password reset page. */
+  resetHref: string;
+  /** The sign-up page. Without it the page has no register link. */
+  registerHref?: string | undefined;
+  strings?: TextOverrides<LoginPageStrings> | undefined;
+  /** The form's own text, passed to `CredentialsForm`. */
+  formStrings?: TextOverrides<CredentialsFormStrings> | undefined;
+  /** Replaces the page's outer spacing, such as when the page sits inside the app's own card. */
+  className?: string | undefined;
+}
+
+/**
+ * The sign-in page: a title, `CredentialsForm`, and links to reset the password and, when the app has
+ * one, to sign up. A sign-in goes to `redirectTo` and refreshes the page's server data.
+ */
+export function LoginPage({ redirectTo, resetHref, registerHref, strings, formStrings, className = authPageClassName }: LoginPageProps) {
+  const text = withDefaults(defaultLoginPageStrings, strings);
+  const router = useRouter();
+
+  return (
+    <div className={className}>
+      <h1 className={`${authTitleClassName} mb-6`}>{text.title}</h1>
+      <CredentialsForm
+        strings={formStrings}
+        onSignedIn={() => {
+          router.push(redirectTo);
+          router.refresh();
+        }}
+      />
+      <p className="mt-6 text-sm text-auth-text">
+        <Link href={resetHref} className={authLinkClassName}>{text.forgotPassword}</Link>
+      </p>
+      {registerHref && (
+        <p className="mt-2 text-sm text-auth-text">
+          {text.registerPrompt && <>{text.registerPrompt} </>}
+          <Link href={registerHref} className={authLinkClassName}>{text.register}</Link>
+        </p>
+      )}
+    </div>
+  );
+}

package/src/ui/ResetPasswordFlow.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useState, type FormEvent } from "react";
 import { passwordProblems, type PasswordStrings } from "../validation/passwordRules";
 import { Alert } from "./Alert";
+import { authLinkClassName, authPageClassName, authTitleClassName } from "./authClasses";
 import { PasswordInput } from "./PasswordInput";
 import { defaultResetPasswordFlowStrings, type ResetPasswordFlowStrings } from "./resetPasswordFlowStrings";
 import { TextInput } from "./TextInput";
@@ -28,7 +29,6 @@ export interface ResetPasswordFlowProps {
 
 const button =
   "w-full rounded-button bg-button-primary-bg text-button-primary-text font-semibold py-2.5 hover:brightness-95 disabled:opacity-60 transition";
-const link = "font-auth-link text-auth-link hover:text-auth-link-hover transition-colors";
 
 /**
  * Password reset in two steps: the email asks for a code, then the code and a new password set it. The
@@ -42,7 +42,7 @@ export function ResetPasswordFlow({
   initialEmail = "",
   initialCode = "",
   strings,
-  className = "max-w-md mx-auto px-4 py-16",
+  className = authPageClassName,
   passwordStrings,
 }: ResetPasswordFlowProps) {
   const text = withDefaults(defaultResetPasswordFlowStrings, strings);
@@ -92,16 +92,16 @@ export function ResetPasswordFlow({
 
   return (
     <div className={className}>
-      <h1 className="text-auth-title font-auth-title text-auth-heading mb-1">{text.title}</h1>
+      <h1 className={`${authTitleClassName} mb-1`}>{text.title}</h1>
       <p className="text-sm text-auth-text mb-6">
         {text.signInPrompt && <>{text.signInPrompt} </>}
-        <Link href={loginHref} className={link}>{text.signIn}</Link>
+        <Link href={loginHref} className={authLinkClassName}>{text.signIn}</Link>
       </p>
 
       {done !== null ? (
         <Alert variant="success">
           {done}
-          <Link href={loginHref} className={`block mt-3 ${link}`}>{text.backToSignIn}</Link>
+          <Link href={loginHref} className={`block mt-3 ${authLinkClassName}`}>{text.backToSignIn}</Link>
         </Alert>
       ) : step === 1 ? (
         <form onSubmit={sendCode} className="space-y-4">

package/src/ui/authClasses.ts

@@ -0,0 +1,5 @@
+// The classes the sign-in and password reset pages share, drawn from the auth and button tokens.
+
+export const authPageClassName = "max-w-md mx-auto px-4 py-16";
+export const authTitleClassName = "text-auth-title font-auth-title text-auth-heading";
+export const authLinkClassName = "font-auth-link text-auth-link hover:text-auth-link-hover transition-colors";

package/src/ui/index.ts

@@ -8,6 +8,10 @@ export { SignInRejected, defaultCredentialsFormStrings } from "./credentialsForm
 export type { CredentialsFormStrings } from "./credentialsFormStrings";
 export { ErrorState, defaultErrorStateStrings } from "./ErrorState";
 export type { ErrorStateProps, ErrorStateStrings } from "./ErrorState";
+export { LoginPage } from "./LoginPage";
+export type { LoginPageProps } from "./LoginPage";
+export { defaultLoginPageStrings } from "./loginPageStrings";
+export type { LoginPageStrings } from "./loginPageStrings";
 export { NotFoundState, defaultNotFoundStrings } from "./NotFoundState";
 export type { NotFoundStateProps, NotFoundStrings } from "./NotFoundState";
 export { PasswordInput } from "./PasswordInput";

package/src/ui/loginPageStrings.ts

@@ -0,0 +1,17 @@
+// Plain values, with no "use client", so a server component can import them.
+
+/** The sign-in page's text around the form. Pass the app's own language. The defaults are English. */
+export interface LoginPageStrings {
+  title: string;
+  forgotPassword: string;
+  /** Shown before the register link, such as "No account?". Null leaves it out. */
+  registerPrompt: string | null;
+  register: string;
+}
+
+export const defaultLoginPageStrings: LoginPageStrings = {
+  title: "Sign in",
+  forgotPassword: "Forgot your password?",
+  registerPrompt: "No account?",
+  register: "Create one",
+};