feat(oauth-provider): allow customization of sign-in fields

bluesky-social · Mar 18, 2024 · 75ef605 · 75ef605
1 parent dc313e1
commit 75ef605
Show file tree

Hide file tree

Showing 15 changed files with 271 additions and 145 deletions.
diff --git a/packages/oauth-provider/src/assets/app/backend-data.ts b/packages/oauth-provider/src/assets/app/backend-data.ts
@@ -1,13 +1,29 @@
 import type { ClientMetadata, Session } from './types'
 
+export type FieldDefinition = {
+  label?: string
+  placeholder?: string
+  pattern?: string
+  title?: string
+}
+
+export type LinkDefinition = {
+  title: string
+  href: string
+  rel?: string
+}
+
 export type CustomizationData = {
   name?: string
   logo?: string
-  links?: Array<{
-    name: string
-    href: string
-    rel?: string
-  }>
+  links?: LinkDefinition[]
+  signIn?: {
+    fields?: {
+      username?: FieldDefinition
+      password?: FieldDefinition
+      remember?: FieldDefinition
+    }
+  }
 }
 
 export type ErrorData = {

diff --git a/packages/oauth-provider/src/assets/app/components/error-card.tsx b/packages/oauth-provider/src/assets/app/components/error-card.tsx
@@ -13,7 +13,7 @@ export function ErrorCard({
   className,
   ...attrs
 }: Partial<ErrorCardProps> &
-  Omit<HtmlHTMLAttributes<HTMLDivElement>, keyof ErrorCardProps>) {
+  Omit<HtmlHTMLAttributes<HTMLDivElement>, keyof ErrorCardProps | 'children'>) {
   return (
     <div
       {...attrs}

diff --git a/...src/assets/app/components/page-layout.tsx → ...sets/app/components/layout-title-page.tsx b/...src/assets/app/components/page-layout.tsx → ...sets/app/components/layout-title-page.tsx
@@ -1,25 +1,24 @@
-import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react'
+import { HTMLAttributes, ReactNode } from 'react'
 import { clsx } from '../lib/clsx'
 
-export type PageLayoutProps = {
+export type LayoutTitlePageProps = {
   title?: ReactNode
   subtitle?: ReactNode
 }
 
-export function PageLayout({
+export function LayoutTitlePage({
   children,
   title,
   subtitle,
   ...attrs
-}: PropsWithChildren<
-  PageLayoutProps & Omit<HTMLAttributes<HTMLDivElement>, keyof PageLayoutProps>
->) {
+}: LayoutTitlePageProps &
+  Omit<HTMLAttributes<HTMLDivElement>, keyof LayoutTitlePageProps>) {
   return (
     <div
       {...attrs}
       className={clsx(
         attrs.className,
-        'flex justify-center items-stretch min-h-screen bg-white text-black dark:bg-black dark:text-white',
+        'flex justify-center items-stretch min-h-screen bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100',
       )}
     >
       <div className="w-1/2 hidden p-4 md:grid content-center justify-items-end text-right dark:bg-transparent dark:border-r bg-slate-100 dark:bg-slate-800 dark:border-slate-700">

diff --git a/.../assets/app/components/welcome-layout.tsx → .../assets/app/components/layout-welcome.tsx b/.../assets/app/components/welcome-layout.tsx → .../assets/app/components/layout-welcome.tsx
@@ -1,25 +1,25 @@
 import { PropsWithChildren } from 'react'
 
-export type WelcomeLayoutProps = {
+export type LayoutWelcomeProps = {
   name?: string
   logo?: string
   links?: Array<{
-    name: string
+    title: string
     href: string
     rel?: string
   }>
   logoAlt?: string
 }
 
-export function WelcomeLayout({
+export function LayoutWelcome({
   name,
   logo,
   logoAlt = name || 'Logo',
   links,
   children,
-}: PropsWithChildren<WelcomeLayoutProps>) {
+}: PropsWithChildren<LayoutWelcomeProps>) {
   return (
-    <div className="min-h-screen w-full flex items-center justify-center flex-col bg-white text-black dark:bg-black dark:text-white">
+    <div className="min-h-screen w-full flex items-center justify-center flex-col bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">
       <div className="w-full max-w-screen-sm overflow-hidden flex-grow flex flex-col items-center justify-center">
         {logo && (
           <img
@@ -39,7 +39,7 @@ export function WelcomeLayout({
       </div>
 
       {links != null && links.length > 0 && (
-        <nav className="w-full max-w-screen-sm overflow-hidden mt-4 border-t border-t-slate-200 flex flex-wrap justify-center">
+        <nav className="w-full max-w-screen-sm overflow-hidden mt-4 border-t border-t-slate-200 dark:border-t-slate-700 flex flex-wrap justify-center">
           {links.map((link) => (
             <a
               key={link.href}
@@ -48,7 +48,7 @@ export function WelcomeLayout({
               target="_blank"
               className="m-2 md:m-4 text-xs md:text-sm text-primary hover:underline"
             >
-              {link.name}
+              {link.title}
             </a>
           ))}
         </nav>