signups

src/App.tsx

@@ -8,6 +8,8 @@ import LoginPage from './app/auth/pages/LoginPage.tsx'
 import { AuthService } from './app/auth/authService.ts'
 import LogoutPage from './app/auth/pages/LogoutPage.tsx'
 import UnauthorizedHandler from './app/auth/components/UnauthorizedHandler.tsx'
+import AdminPage from './app/admin/pages/AdminPage.tsx'
+import SignupCodesManagementPage from './app/admin/pages/subpages/SignupCodesManagementPage.tsx'
 
 function App() {
   const postService = new PostsService()
@@ -26,6 +28,12 @@ function App() {
           <Route path="/login" element={<LoginPage authService={authService} />} />
           <Route path="/logout" element={<LogoutPage authService={authService} />} />
           <Route path="/signup/:code?" element={<SignupPage authService={authService} />} />
+          <Route path={'/admin'} element={<AdminPage />}>
+            <Route
+              path={'codes'}
+              element={<SignupCodesManagementPage authService={authService} />}
+            />
+          </Route>
         </Routes>
       </UnauthorizedHandler>
     </BrowserRouter>

src/app/admin/pages/AdminPage.tsx

@@ -0,0 +1,24 @@
+import NavBar from '../../../components/NavBar'
+import NavButton from '../../../components/buttons/NavButton'
+import { Outlet } from 'react-router-dom'
+
+export default function AdminPage() {
+  return (
+    <div>
+      <NavBar>
+        <NavButton to={'/'}>home</NavButton>
+      </NavBar>
+
+      <div className={'w-full max-w-6xl mx-auto grid grid-cols-4'}>
+        <nav className={'flex flex-col'}>
+          <NavButton className={'w-full py-4 px-2 text-2xl'} to={'/admin/codes'}>
+            codes
+          </NavButton>
+        </nav>
+        <div className={'col-span-3  outline-primary-500'}>
+          <Outlet />
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/admin/pages/subpages/SignupCodesManagementPage.tsx

@@ -0,0 +1,187 @@
+import { AuthService } from '../../../auth/authService.ts'
+import { useEffect, useState, useRef } from 'react'
+import { SignupCode } from '../../../auth/signupCode.ts'
+import { Temporal } from '@js-temporal/polyfill'
+import Button from '../../../../components/buttons/Button.tsx'
+
+interface SignupCodesManagementPageProps {
+  authService: AuthService
+}
+
+export default function SignupCodesManagementPage({ authService }: SignupCodesManagementPageProps) {
+  const [codes, setCodes] = useState<SignupCode[]>([])
+  const [code, setCode] = useState('')
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const dialogRef = useRef<HTMLDialogElement>(null)
+
+  const fetchCodes = async () => {
+    try {
+      setCodes(await authService.listSignupCodes())
+    } catch (err) {
+      console.error('Failed to fetch signup codes:', err)
+    }
+  }
+
+  useEffect(() => {
+    const timeoutId = setTimeout(fetchCodes)
+    return () => clearTimeout(timeoutId)
+  }, [authService])
+
+  const handleCreateCode = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      await authService.createSignupCode(code, email, name)
+      setCode('')
+      setName('')
+      setEmail('')
+      dialogRef.current?.close()
+      fetchCodes() // Refresh the table
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create signup code')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const openDialog = () => {
+    dialogRef.current?.showModal()
+  }
+
+  const closeDialog = () => {
+    dialogRef.current?.close()
+    setError(null)
+  }
+
+  const formatDate = (date: Temporal.Instant | null) => {
+    if (!date) return 'Never'
+    try {
+      // Convert Temporal.Instant to a JavaScript Date for formatting
+      const jsDate = new Date(date.epochMilliseconds)
+
+      // Format as: "Jan 1, 2023, 12:00 PM"
+      return jsDate.toLocaleString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      })
+    } catch (err: unknown) {
+      console.error(err)
+      return date.toString()
+    }
+  }
+
+  return (
+    <>
+      <div className="flex justify-between items-center mb-4">
+        <h1 className="text-xl font-bold">Signup Codes</h1>
+        <Button onClick={openDialog}>Create New Code</Button>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="min-w-full bg-white">
+          <thead>
+            <tr>
+              <th className="text-left">Code</th>
+              <th className="text-left">Email</th>
+              <th className="text-left">Redeemed By</th>
+              <th className="text-left">Expires On</th>
+            </tr>
+          </thead>
+          <tbody>
+            {codes.map((code) => (
+              <tr key={code.code} className="hover:bg-gray-50">
+                <td className="py-2 ">
+                  <code className="bg-primary-100 px-2 py-1 rounded">{code.code}</code>
+                </td>
+                <td>{code.email}</td>
+                <td>{code.redeemedBy || 'Not redeemed'}</td>
+                <td>{formatDate(code.expiresOn)}</td>
+              </tr>
+            ))}
+            {codes.length === 0 && (
+              <tr>
+                <td colSpan={4} className="py-4 text-center text-gray-500">
+                  No signup codes found
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <dialog
+        ref={dialogRef}
+        className="p-6 rounded-lg shadow-lg backdrop-blur-sm w-full max-w-md m-auto"
+      >
+        <h2 className="text-xl font-bold mb-4">Create New Signup Code</h2>
+
+        {error && (
+          <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleCreateCode}>
+          <div className="mb-4">
+            <label htmlFor="code" className="block text-sm font-medium text-gray-700 mb-1">
+              Code ID
+            </label>
+            <input
+              type="text"
+              id="code"
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              required
+            />
+          </div>
+
+          <div className="mb-4">
+            <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+              Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              required
+            />
+          </div>
+
+          <div className="mb-4">
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              required
+            />
+          </div>
+
+          <div className="flex justify-end space-x-2">
+            <Button type="button" onClick={closeDialog} secondary>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? 'Creating...' : 'Create Code'}
+            </Button>
+          </div>
+        </form>
+      </dialog>
+    </>
+  )
+}

src/app/api/schema.ts

@@ -87,7 +87,8 @@ export interface paths {
       requestBody: {
         content: {
           'multipart/form-data': {
-            file?: components['schemas']['IFormFile']
+            /** Format: binary */
+            file?: string
           }
         }
       }
@@ -361,8 +362,6 @@ export interface components {
       /** Format: uuid */
       next: string | null
     }
-    /** Format: binary */
-    IFormFile: string
     ListSignupCodesResult: {
       signupCodes: components['schemas']['SignupCodeDto'][]
     }
@@ -374,6 +373,7 @@ export interface components {
       /** Format: uuid */
       userId: string
       username: string
+      isSuperUser: boolean
     }
     PostAuthorDto: {
       /** Format: uuid */
@@ -407,6 +407,7 @@ export interface components {
       /** Format: uuid */
       userId: string
       username: string
+      isSuperUser: boolean
     }
     SignupCodeDto: {
       code: string

src/app/auth/authService.ts

@@ -1,6 +1,7 @@
 import { dispatchMessage } from '../messageBus/messageBus.ts'
 import client from '../api/client.ts'
 import { ProblemDetails } from '../../types'
+import { SignupCode } from './signupCode.ts'
 
 export class AuthService {
   constructor() {}
@@ -60,6 +61,6 @@ export class AuthService {
       throw new Error('error')
     }
 
-    return res.data.signupCodes
+    return res.data.signupCodes.map(SignupCode.fromDto)
   }
 }

src/app/auth/signupCode.ts

@@ -0,0 +1,20 @@
+import { Temporal } from '@js-temporal/polyfill'
+import { components } from '../api/schema.ts'
+
+export class SignupCode {
+  constructor(
+    public readonly code: string,
+    public readonly email: string,
+    public readonly redeemedBy: string | null,
+    public readonly expiresOn: Temporal.Instant | null,
+  ) {}
+
+  static fromDto(dto: components['schemas']['SignupCodeDto']): SignupCode {
+    return new SignupCode(
+      dto.code,
+      dto.email,
+      dto.redeemingUsername,
+      dto.expiresOn ? Temporal.Instant.from(dto.expiresOn) : null,
+    )
+  }
+}

src/app/messageBus/messageTypes.ts

@@ -1,12 +1,8 @@
+import { User } from '../user/userStore.ts'
+
 export interface MessageTypes {
-  'auth:logged-in': {
+  'auth:logged-in': User
-    userId: string
+  'auth:registered': User
-    username: string
-  }
-  'auth:registered': {
-    userId: string
-    username: string
-  }
   'auth:logged-out': null
   'auth:unauthorized': null
 }

src/app/user/userStore.ts

@@ -4,6 +4,7 @@ import { addMessageListener } from '../messageBus/messageBus.ts'
 export interface User {
   userId: string
   username: string
+  isSuperUser: boolean
 }
 
 export type UserStore = Store<User | null>
@@ -16,23 +17,10 @@ userStore.subscribe((user) => {
   localStorage.setItem(UserKey, JSON.stringify(user))
 })
 
-addMessageListener('auth:logged-in', (e) => {
+const setUser = (u: User | null) => userStore.setState(u)
-  userStore.setState({
+addMessageListener('auth:logged-in', setUser)
-    userId: e.userId,
+addMessageListener('auth:registered', setUser)
-    username: e.username,
+addMessageListener('auth:logged-out', setUser)
-  })
-})
-
-addMessageListener('auth:registered', (e) => {
-  userStore.setState({
-    userId: e.userId,
-    username: e.username,
-  })
-})
-
-addMessageListener('auth:logged-out', () => {
-  userStore.setState(null)
-})
 
 export const useUser = () => {
   const [user] = useStore(userStore)

src/components/NavBar.tsx

@@ -1,9 +1,15 @@
 import { PropsWithChildren } from 'react'
+import { useUser } from '../app/user/userStore.ts'
+import NavButton from './buttons/NavButton.tsx'
 
 type NavBarProps = unknown
 
 export default function NavBar({ children }: PropsWithChildren<NavBarProps>) {
+  const { user } = useUser()
   return (
-    <nav className={`w-full flex flex-row justify-end gap-4 px-4 md:px-8 py-3`}>{children}</nav>
+    <nav className={`w-full flex flex-row justify-end gap-4 px-4 md:px-8 py-3`}>
+      {children}
+      {user?.isSuperUser && <NavButton to={'/admin/codes'}>admin</NavButton>}
+    </nav>
   )
 }

src/components/buttons/NavButton.tsx

@@ -2,6 +2,7 @@ import { PropsWithChildren } from 'react'
 import { Link } from 'react-router-dom'
 interface NavLinkButtonProps {
   to: string | To
+  className?: string
 }
 
 interface To {
@@ -10,9 +11,13 @@ interface To {
   hash?: string
 }
 
-export default function NavButton({ to, children }: PropsWithChildren<NavLinkButtonProps>) {
+export default function NavButton({
+  to,
+  className: extraClasses = '',
+  children,
+}: PropsWithChildren<NavLinkButtonProps>) {
   return (
-    <Link className={`text-primary-500`} to={to}>
+    <Link className={`text-primary-500 hover:text-primary-600 ${extraClasses}`} to={to}>
       {children}
     </Link>
   )