feat: implement LoginModal and associated components for user authentication

Author: mitchdowney

src/app/layout.tsx

@@ -11,6 +11,7 @@ import WindowWrapper from '../components/Window/WindowWrapper';
 import Providers from '../providers/Providers';
 import '../styles/index.scss';
 import { toUITheme } from '../utils/theme';
+import { Modals } from '../components/Modals/Modals';
 
 export const metadata = {
   title: 'Podverse',
@@ -40,6 +41,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
               <NavBar />
               {children}
             </PageWrapper>
+            <Modals />
           </WindowWrapper>
         </Providers>
       </body>

src/components/Auth/LoginModal.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React, { useState } from 'react'
+import { Button } from '../Button/Button'
+import { Modal } from '../Modal/Modal'
+import { TextInput } from '../TextInput/TextInput'
+import { useModals } from '../../contexts/Modals'
+import styles from '../../styles/components/Auth/LoginModal.module.scss'
+
+export const LoginModal: React.FC = () => {
+  const { modals, closeModal } = useModals()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // handle login logic here
+    closeModal('LoginModal')
+  }
+
+  return (
+    <Modal
+      header="Log in"
+      isOpen={modals.LoginModal.isOpen}
+      onClose={() => closeModal('LoginModal')}
+      ariaLabel="Log in"
+    >
+      <form onSubmit={handleSubmit}>
+        <TextInput
+          type="email"
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+          autoFocus
+          placeholder="Email"
+          eyebrow="Email"
+        />
+        <TextInput
+          type="password"
+          value={password}
+          onChange={e => setPassword(e.target.value)}
+          placeholder="Password"
+          eyebrow="Password"
+        />
+        <div className={styles.buttons}>
+          <Button type="button" onClick={() => closeModal('LoginModal')} variant="secondary">
+            Cancel
+          </Button>
+          <Button type="submit" variant="primary">
+            Submit
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  )
+}

src/components/Button/Button.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import classNames from 'classnames'
+import styles from '../../styles/components/Button/Button.module.scss'
+
+type ButtonVariant = 'primary' | 'secondary' | 'warning' | 'success' | 'danger' | 'outline'
+
+type ButtonProps = {
+  children: React.ReactNode
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+  type?: 'button' | 'submit' | 'reset'
+  disabled?: boolean
+  className?: string
+  style?: React.CSSProperties
+  variant?: ButtonVariant
+  'aria-label'?: string
+  'aria-describedby'?: string
+  'aria-pressed'?: boolean
+  tabIndex?: number
+  autoFocus?: boolean
+  id?: string
+  name?: string
+  title?: string
+  role?: string
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  onClick,
+  type = 'button',
+  disabled = false,
+  className,
+  style,
+  variant = 'primary',
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+  'aria-pressed': ariaPressed,
+  tabIndex,
+  autoFocus,
+  id,
+  name,
+  title,
+  role = 'button',
+  ...rest
+}) => (
+  <button
+    type={type}
+    onClick={onClick}
+    disabled={disabled}
+    className={classNames(
+      styles.button,
+      styles[variant],
+      { [styles.disabled]: disabled },
+      className
+    )}
+    style={style}
+    aria-label={ariaLabel}
+    aria-describedby={ariaDescribedBy}
+    aria-pressed={ariaPressed}
+    tabIndex={tabIndex}
+    autoFocus={autoFocus}
+    id={id}
+    name={name}
+    title={title}
+    role={role}
+    {...rest}
+  >
+    {children}
+  </button>
+)

src/components/Modal/Modal.tsx

@@ -0,0 +1,70 @@
+import React, { ReactNode } from 'react'
+import { FaTimes } from 'react-icons/fa'
+import styles from '../../styles/components/Modal/Modal.module.scss'
+
+type ModalProps = {
+  isOpen: boolean
+  onClose: () => void
+  ariaLabel: string
+  children: ReactNode
+  header?: string
+}
+
+export const Modal = ({ isOpen, onClose, ariaLabel, children, header }: ModalProps) => {
+  if (!isOpen) return null
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={ariaLabel}
+      tabIndex={-1}
+      className={styles.modalRoot}
+    >
+      <div
+        className={styles.modalBackdrop}
+        aria-hidden="true"
+        onClick={onClose}
+      />
+      <div className={styles.modalContent}>
+        {(header || header === '') && (
+          <div className={styles.modalHeader}>
+            <span
+              className={styles.modalHeaderText}
+              title={header}
+              style={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                flex: 1,
+                minWidth: 0,
+              }}
+            >
+              {header}
+            </span>
+            <button
+              onClick={onClose}
+              aria-label="Close modal"
+              className={styles.modalCloseButton}
+            >
+              <FaTimes />
+            </button>
+          </div>
+        )}
+        {!header && (
+          <button
+            onClick={onClose}
+            aria-label="Close modal"
+            className={styles.modalCloseButton}
+            style={{ position: 'absolute', top: 8, right: 8 }}
+          >
+            <FaTimes />
+          </button>
+        )}
+        <div className={styles.modalChildren}>
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Modals/Modals.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import React from 'react'
+import { LoginModal } from '../Auth/LoginModal'
+
+export const Modals: React.FC = () => {
+  return (
+    <>
+      <LoginModal />
+    </>
+  )
+}

src/components/NavBar/NavBarDropdownButton.tsx

@@ -8,9 +8,11 @@ import { AccountContext } from "../../contexts/Account";
 import DropdownMenu from "../DropdownMenu/DropdownMenu";
 import { useDropdownKeyboardNavigation } from "../../hooks/useDropdownKeyboardNavigation";
 import { ROUTES } from "../../constants/routes";
+import { useModals } from '../../contexts/Modals'
 
 const NavBarDropdownButton: React.FC = () => {
   const { isLoggedIn } = useContext(AccountContext);
+  const { openModal } = useModals();
   const router = useRouter();
   const buttonRef = useRef<HTMLButtonElement>(null);
   const menuRef = useRef<HTMLUListElement>(null);
@@ -19,7 +21,7 @@ const NavBarDropdownButton: React.FC = () => {
     { label: "My Profile", onClick: () => router.push(ROUTES.MY_PROFILE) },
     { label: "Membership", onClick: () => router.push(ROUTES.MEMBERSHIP) },
     { label: "Settings", onClick: () => router.push(ROUTES.SETTINGS) },
-    { label: "Logout", onClick: () => {/* ... */} }
+    { label: "Login", onClick: () => openModal('LoginModal') }
   ];
 
   const {

src/components/TextInput/TextInput.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import styles from '../../styles/components/TextInput/TextInput.module.scss'
+
+type TextInputProps = {
+  value: string
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  eyebrow?: string
+  info?: string
+  placeholder?: string
+  type?: string
+  disabled?: boolean
+  className?: string
+  style?: React.CSSProperties
+  id?: string
+  name?: string
+  autoFocus?: boolean
+  tabIndex?: number
+  'aria-label'?: string
+  'aria-describedby'?: string
+  'aria-required'?: boolean
+  'aria-invalid'?: boolean
+}
+
+export const TextInput: React.FC<TextInputProps> = ({
+  value,
+  onChange,
+  eyebrow,
+  info,
+  placeholder,
+  type = 'text',
+  disabled = false,
+  className,
+  style,
+  id,
+  name,
+  autoFocus,
+  tabIndex,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+  'aria-required': ariaRequired,
+  'aria-invalid': ariaInvalid,
+  ...rest
+}) => {
+  const inputId = id || name || undefined
+  const infoId = info ? `${inputId || 'textinput'}-info` : undefined
+
+  return (
+    <div className={`${styles.textInput} ${className || ''}`} style={style}>
+      <div className={styles.textInputWrapper}>
+        <div className={styles.textInnerInputWrapper}>
+          {eyebrow && value && (
+            <label htmlFor={inputId} className={styles.eyebrow}>
+              {eyebrow}
+            </label>
+          )}
+          <input
+            id={inputId}
+            name={name}
+            type={type}
+            value={value}
+            onChange={onChange}
+            placeholder={placeholder}
+            disabled={disabled}
+            autoFocus={autoFocus}
+            tabIndex={tabIndex}
+            aria-label={ariaLabel}
+            aria-describedby={info ? infoId : ariaDescribedBy}
+            aria-required={ariaRequired}
+            aria-invalid={ariaInvalid}
+            className={styles.input}
+            {...rest}
+          />
+          {info && (
+            <div id={infoId} className={styles.textInputInfo}>
+              {info}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

src/contexts/Modals.tsx

@@ -0,0 +1,49 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react'
+
+type ModalsState = {
+  LoginModal: { isOpen: boolean }
+  SignUpModal: { isOpen: boolean }
+}
+
+type ModalsContextType = {
+  modals: ModalsState
+  openModal: (modal: keyof ModalsState) => void
+  closeModal: (modal: keyof ModalsState) => void
+}
+
+const defaultState: ModalsState = {
+  LoginModal: { isOpen: false },
+  SignUpModal: { isOpen: false },
+}
+
+const ModalsContext = createContext<ModalsContextType | undefined>(undefined)
+
+export const ModalsProvider = ({ children }: { children: ReactNode }) => {
+  const [modals, setModals] = useState<ModalsState>(defaultState)
+
+  const openModal = (modal: keyof ModalsState) => {
+    setModals(prev => ({
+      ...prev,
+      [modal]: { isOpen: true }
+    }))
+  }
+
+  const closeModal = (modal: keyof ModalsState) => {
+    setModals(prev => ({
+      ...prev,
+      [modal]: { isOpen: false }
+    }))
+  }
+
+  return (
+    <ModalsContext.Provider value={{ modals, openModal, closeModal }}>
+      {children}
+    </ModalsContext.Provider>
+  )
+}
+
+export const useModals = () => {
+  const context = useContext(ModalsContext)
+  if (!context) throw new Error('useModals must be used within a ModalsProvider')
+  return context
+}