Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: prototype the auth modal hook (#638)
- Loading branch information
Showing
12 changed files
with
196 additions
and
101 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import { ReactNode, useCallback, useRef } from "react"; | ||
|
|
||
| type AuthType = | ||
| | { | ||
| type: "email"; | ||
| showButton: boolean; | ||
| } | ||
| | { type: "passkey" }; | ||
|
|
||
| type AuthModalProps = { | ||
| header?: ReactNode; | ||
| // Each section can contain multiple auth types which will be grouped together | ||
| // and separated by an OR divider | ||
| sections?: AuthType[][]; | ||
| }; | ||
|
|
||
| // TODO: move this into aa-alchemy | ||
| export const useAuthModal = ({ header = "Sign in" }: AuthModalProps) => { | ||
| const ref = useRef<HTMLDialogElement>(null); | ||
| const openAuthModal = () => ref.current?.showModal(); | ||
| const closeAuthModal = () => ref.current?.close(); | ||
|
|
||
| // TODO: use the sections prop to render the auth types | ||
| const AuthModal = useCallback(() => { | ||
| return ( | ||
| <dialog ref={ref} className="modal w-[368px]"> | ||
| <div className="modal-box flex flex-col items-center gap-5"> | ||
| <h3 className="font-bold text-lg">{header}</h3> | ||
| <div className="flex flex-col gap-2 w-full"> | ||
| <label className="input"> | ||
| <input placeholder="Email"></input> | ||
| </label> | ||
| <button className="btn btn-primary">Continue</button> | ||
| </div> | ||
| {/* divider */} | ||
| <div | ||
| className={`flex flex-row gap-3 w-full items-center text-fg-tertiary`} | ||
| > | ||
| <div className={`h-[1px] bg-static basis-full shrink grow`}></div> | ||
| <p>Or</p> | ||
| <div className={`h-[1px] bg-static basis-full shrink grow`}></div> | ||
| </div> | ||
| <div className="flex flex-col w-full"> | ||
| <button className="btn btn-auth grow">Passkey</button> | ||
| </div> | ||
| <div className="flex flex-col w-full items-center text-xs gap-3"> | ||
| <span className="text-fg-tertiary text-center"> | ||
| By signing in, you agree to the following{" "} | ||
| <a className="text-fg-accent-brand cursor-pointer" href=""> | ||
| End User Terms | ||
| </a> | ||
| </span> | ||
| <span className="text-fg-disabled">powered by INSERT_LOGO</span> | ||
| </div> | ||
| </div> | ||
| <div className="modal-backdrop" onClick={() => closeAuthModal()}></div> | ||
| </dialog> | ||
| ); | ||
| }, [header]); | ||
|
|
||
| return { openAuthModal, closeAuthModal, AuthModal }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,17 @@ | ||
| import type { ComponentDef } from "../types.js"; | ||
| import { getColorVariableName } from "../utils.js"; | ||
|
|
||
| export const formControlComponents: ComponentDef = { | ||
| ".form-controls": { | ||
| "@apply flex flex-col gap-2": {}, | ||
| [`@apply text-[var(${getColorVariableName("fg-secondary")})]`]: {}, | ||
| "@apply text-fg-secondary": {}, | ||
| ".form-label": { | ||
| "@apply text-sm font-medium": {}, | ||
| }, | ||
| ".form-hint": { | ||
| "@apply text-xs font-normal": {}, | ||
| }, | ||
| ".input-error + .form-hint, .input[error] + .form-hint": { | ||
| [`@apply text-[var(${getColorVariableName("critical")})]`]: {}, | ||
| "@apply text-critical": {}, | ||
| }, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import type { ComponentDef } from "../types"; | ||
|
|
||
| export const modalComponents: ComponentDef = { | ||
| ".modal": { | ||
| "@apply rounded-2xl": {}, | ||
| "@apply bg-bg-surface-default": {}, | ||
| "&::backdrop": { | ||
| "@apply bg-black bg-opacity-[0.8]": {}, | ||
| }, | ||
| ".modal-box": { | ||
| "@apply z-[1] p-8": {}, | ||
| }, | ||
| ".modal-backdrop": { | ||
| "@apply fixed w-screen h-screen top-0 left-0": {}, | ||
| "@apply -z-[1] col-start-1 row-start-1 grid self-stretch justify-self-stretch text-transparent": | ||
| {}, | ||
| button: { | ||
| opacity: "0", | ||
| "@apply h-screen w-screen cursor-default": {}, | ||
| }, | ||
| }, | ||
| }, | ||
| }; |
Oops, something went wrong.