Add password change, rename Viewer→Commissioner, fix login logo

- Rename VIEWER role to COMMISSIONER throughout (schema, middleware,
  admin layout, users page); add psql pre-migration step in entrypoint
  to rename the PostgreSQL enum value without data loss
- Install postgresql-client in Docker runner stage for psql access
- Login page: fetch sbLogo from settings API instead of hardcoded path
- Password change for all authenticated users:
  - New PATCH /api/users/me endpoint (verifies current password, hashes new)
  - Change Password button/modal on /my-squares page
  - Change Password link in admin sidebar (links to /my-squares)
  - New password_change email template (seeded, editable in admin)
  - sendPasswordChangedEmail auto-email triggered on change

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.claude/settings.local.json

@@ -24,7 +24,8 @@
       "Bash(git config:*)",
       "Bash(git remote add:*)",
       "Bash(git push:*)",
-      "Bash(git remote set-url:*)"
+      "Bash(git remote set-url:*)",
+      "Bash(cd /mnt/d/spliceboti/OneDrive/CodingProjects/superbowl/public/images && ls | grep -v -E '^\\(nfc-generic\\\\.png|afc-generic\\\\.png\\)$' | xargs rm)"
     ]
   }
 }

Dockerfile

@@ -24,7 +24,8 @@ ENV NODE_ENV=production
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
-# Install prisma CLI for db push at runtime
+# Install prisma CLI and psql client for runtime migrations
+RUN apk add --no-cache postgresql-client
 RUN npm install -g prisma@6
 
 COPY --from=builder /app/public ./public

docker-entrypoint.sh

@@ -3,6 +3,12 @@ set -e
 
 mkdir -p /app/public/uploads
 
+echo "Running pre-migration fixes..."
+# Rename VIEWER enum value to COMMISSIONER if it still exists (one-time migration)
+# Strip Prisma-specific query params (e.g. ?schema=public) before passing to psql
+PSQL_URL=$(echo "$DATABASE_URL" | sed 's/?.*//')
+psql "$PSQL_URL" -c "ALTER TYPE \"Role\" RENAME VALUE 'VIEWER' TO 'COMMISSIONER';" 2>/dev/null || true
+
 echo "Running Prisma migrations..."
 npx prisma db push --skip-generate
 

prisma/schema.prisma

@@ -9,7 +9,7 @@ datasource db {
 
 enum Role {
   ADMIN
-  VIEWER
+  COMMISSIONER
   PLAYER
 }
 

prisma/seed.ts

@@ -95,6 +95,11 @@ async function main() {
       subject: 'Final Results - {{eventName}}',
       body: 'Hi {{name}},\n\nThe game is over! Here are the final results for {{eventName}}:\n\nWinners:\n{{winners}}\n\nCongratulations to all the winners!\n\nThank you for participating in this year\'s Super Bowl Squares. We hope you had a great time!\n\nView the final board at: {{gameUrl}}\n\n{{commissioner}}',
     },
+    {
+      name: 'password_change',
+      subject: 'Password Changed - {{eventName}}',
+      body: 'Hi {{name}},\n\nYour password for {{eventName}} Squares has been changed successfully.\n\nIf you did not make this change, please contact the commissioner immediately.\n\nYou can log in at: {{gameUrl}}/login\n\n{{commissioner}}',
+    },
   ];
 
   for (const template of templates) {

src/app/admin/layout.tsx

@@ -28,7 +28,7 @@ export default function AdminLayout({
 
   // Viewer can't access certain pages
   const viewerRestricted = ['/admin/settings', '/admin/users', '/admin/backup'];
-  const filteredNav = role === 'VIEWER'
+  const filteredNav = role === 'COMMISSIONER'
     ? navItems.filter((item) => !viewerRestricted.includes(item.href))
     : navItems;
 
@@ -41,7 +41,7 @@ export default function AdminLayout({
             SB Squares
           </Link>
           <p className="text-xs text-gray-500 mt-1">
-            {role === 'VIEWER' ? 'Commissioner' : 'Admin Panel'}
+            {role === 'COMMISSIONER' ? 'Commissioner' : 'Admin Panel'}
           </p>
         </div>
         <nav className="flex-1 p-2 space-y-0.5">
@@ -60,8 +60,11 @@ export default function AdminLayout({
             </Link>
           ))}
         </nav>
-        <div className="p-4 border-t border-gray-800">
+        <div className="p-4 border-t border-gray-800 space-y-2">
-          <Link href="/" className="text-sm text-gray-400 hover:text-white">
+          <Link href="/my-squares" className="block text-sm text-gray-400 hover:text-white">
+            Change Password
+          </Link>
+          <Link href="/" className="block text-sm text-gray-400 hover:text-white">
             &larr; Back to Grid
           </Link>
         </div>

src/app/admin/users/page.tsx

@@ -113,7 +113,7 @@ export default function UsersPage() {
                     className="bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs"
                   >
                     <option value="ADMIN">Admin</option>
-                    <option value="VIEWER">Viewer</option>
+                    <option value="COMMISSIONER">Commissioner</option>
                     <option value="PLAYER">Player</option>
                   </select>
                 </td>
@@ -153,7 +153,7 @@ export default function UsersPage() {
               className="input-field"
             >
               <option value="PLAYER">Player</option>
-              <option value="VIEWER">Viewer</option>
+              <option value="COMMISSIONER">Commissioner</option>
               <option value="ADMIN">Admin</option>
             </select>
           </div>

src/app/api/users/me/route.ts

@@ -0,0 +1,49 @@
+import { NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { hash, compare } from 'bcryptjs';
+import { prisma } from '@/lib/prisma';
+import { authOptions } from '@/lib/auth';
+import { sendPasswordChangedEmail } from '@/lib/autoEmail';
+
+// PATCH /api/users/me — change own password
+export async function PATCH(request: Request) {
+  const session = await getServerSession(authOptions);
+  if (!session) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  const userId = (session.user as any).id;
+  const body = await request.json();
+  const { currentPassword, newPassword } = body;
+
+  if (!currentPassword || !newPassword) {
+    return NextResponse.json(
+      { error: 'Current password and new password are required' },
+      { status: 400 }
+    );
+  }
+
+  if (newPassword.length < 8) {
+    return NextResponse.json(
+      { error: 'New password must be at least 8 characters' },
+      { status: 400 }
+    );
+  }
+
+  const user = await prisma.user.findUnique({ where: { id: userId } });
+  if (!user) {
+    return NextResponse.json({ error: 'User not found' }, { status: 404 });
+  }
+
+  const valid = await compare(currentPassword, user.passwordHash);
+  if (!valid) {
+    return NextResponse.json({ error: 'Current password is incorrect' }, { status: 400 });
+  }
+
+  const passwordHash = await hash(newPassword, 12);
+  await prisma.user.update({ where: { id: userId }, data: { passwordHash } });
+
+  sendPasswordChangedEmail(user.name, user.email);
+
+  return NextResponse.json({ success: true });
+}

src/app/login/page.tsx

@@ -1,12 +1,11 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { signIn } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
 import Link from 'next/link';
-import Image from 'next/image';
 
 export default function LoginPage() {
   const router = useRouter();
@@ -14,6 +13,14 @@ export default function LoginPage() {
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
+  const [sbLogo, setSbLogo] = useState('');
+
+  useEffect(() => {
+    fetch('/api/settings')
+      .then((res) => res.json())
+      .then((data) => { if (data.sbLogo) setSbLogo(data.sbLogo); })
+      .catch(() => {});
+  }, []);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -40,13 +47,14 @@ export default function LoginPage() {
     <div className="min-h-screen flex items-center justify-center px-4">
       <div className="w-full max-w-sm">
         <div className="text-center mb-8">
-          <Image
+          {sbLogo && (
-            src="/images/superbowlnumber.png"
+            // eslint-disable-next-line @next/next/no-img-element
-            alt="Super Bowl"
+            <img
-            width={60}
+              src={sbLogo}
-            height={60}
+              alt="Super Bowl"
-            className="mx-auto mb-4"
+              className="mx-auto mb-4 h-16 w-auto object-contain"
-          />
+            />
+          )}
           <h1 className="text-2xl font-bold">Sign In</h1>
         </div>
 

src/app/my-squares/page.tsx

@@ -3,6 +3,9 @@
 import { useSession } from 'next-auth/react';
 import { useEffect, useState } from 'react';
 import Link from 'next/link';
+import { Modal } from '@/components/ui/Modal';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
 
 interface Square {
   position: string;
@@ -19,6 +22,15 @@ export default function MySquaresPage() {
   const [squares, setSquares] = useState<Square[]>([]);
   const [loading, setLoading] = useState(true);
 
+  // Password change modal state
+  const [pwModal, setPwModal] = useState(false);
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [pwError, setPwError] = useState('');
+  const [pwSuccess, setPwSuccess] = useState('');
+  const [pwLoading, setPwLoading] = useState(false);
+
   useEffect(() => {
     fetch('/api/squares')
       .then((res) => res.json())
@@ -32,6 +44,43 @@ export default function MySquaresPage() {
       .finally(() => setLoading(false));
   }, [session]);
 
+  const handleChangePassword = async () => {
+    setPwError('');
+    setPwSuccess('');
+
+    if (newPassword !== confirmPassword) {
+      setPwError('New passwords do not match');
+      return;
+    }
+
+    if (newPassword.length < 8) {
+      setPwError('New password must be at least 8 characters');
+      return;
+    }
+
+    setPwLoading(true);
+    try {
+      const res = await fetch('/api/users/me', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ currentPassword, newPassword }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setPwError(data.error || 'Failed to change password');
+      } else {
+        setPwSuccess('Password changed successfully. A confirmation email has been sent.');
+        setCurrentPassword('');
+        setNewPassword('');
+        setConfirmPassword('');
+      }
+    } catch {
+      setPwError('Failed to change password');
+    } finally {
+      setPwLoading(false);
+    }
+  };
+
   if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center">
@@ -45,9 +94,14 @@ export default function MySquaresPage() {
       <div className="max-w-2xl mx-auto">
         <div className="flex items-center justify-between mb-6">
           <h1 className="text-2xl font-bold">My Squares</h1>
-          <Link href="/" className="btn-secondary text-sm">
+          <div className="flex gap-2">
-            Back to Grid
+            <button onClick={() => { setPwModal(true); setPwError(''); setPwSuccess(''); }} className="btn-secondary text-sm">
-          </Link>
+              Change Password
+            </button>
+            <Link href="/" className="btn-secondary text-sm">
+              Back to Grid
+            </Link>
+          </div>
         </div>
 
         {squares.length === 0 ? (
@@ -94,6 +148,51 @@ export default function MySquaresPage() {
           </div>
         )}
       </div>
+
+      <Modal open={pwModal} onClose={() => setPwModal(false)} title="Change Password">
+        <div className="space-y-4">
+          {pwError && (
+            <div className="bg-red-900/50 border border-red-700 rounded-lg px-4 py-2 text-sm text-red-300">
+              {pwError}
+            </div>
+          )}
+          {pwSuccess && (
+            <div className="bg-green-900/50 border border-green-700 rounded-lg px-4 py-2 text-sm text-green-300">
+              {pwSuccess}
+            </div>
+          )}
+          <Input
+            id="currentPassword"
+            label="Current Password"
+            type="password"
+            value={currentPassword}
+            onChange={(e) => setCurrentPassword(e.target.value)}
+          />
+          <Input
+            id="newPassword"
+            label="New Password"
+            type="password"
+            value={newPassword}
+            onChange={(e) => setNewPassword(e.target.value)}
+            placeholder="Min 8 characters"
+          />
+          <Input
+            id="confirmPassword"
+            label="Confirm New Password"
+            type="password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+          />
+          <div className="flex gap-3">
+            <Button variant="secondary" onClick={() => setPwModal(false)} className="flex-1">
+              Cancel
+            </Button>
+            <Button onClick={handleChangePassword} loading={pwLoading} className="flex-1">
+              Change Password
+            </Button>
+          </div>
+        </div>
+      </Modal>
     </div>
   );
 }

src/components/grid/GridHeader.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { useSession } from 'next-auth/react';
+import { useSession, signOut } from 'next-auth/react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Modal } from '@/components/ui/Modal';
@@ -74,9 +74,9 @@ export function GridHeader({ settings }: GridHeaderProps) {
                       Admin
                     </Link>
                   )}
-                  <Link href="/api/auth/signout" className="text-sm text-gray-400 hover:text-white">
+                  <button onClick={() => signOut({ callbackUrl: window.location.origin + '/' })} className="text-sm text-gray-400 hover:text-white">
                     Sign Out
-                  </Link>
+                  </button>
                 </>
               ) : (
                 <>

src/lib/autoEmail.ts

@@ -276,6 +276,31 @@ export function sendGameResultsEmails(winners: Record<string, { position: string
   });
 }
 
+/**
+ * Send password changed confirmation email.
+ */
+export function sendPasswordChangedEmail(userName: string, userEmail: string) {
+  fireAndForget(async () => {
+    const template = await getTemplate('password_change');
+    if (!template) return;
+
+    const { settings, gameUrl } = await getGameContext();
+
+    const variables: Record<string, string> = {
+      name: userName,
+      email: userEmail,
+      commissioner: settings?.commissioner || '',
+      eventName: settings?.eventName || '',
+      gameUrl,
+    };
+
+    const subject = renderTemplate(template.subject, variables);
+    const body = renderTemplate(template.body, variables);
+    await sendEmail(userEmail, subject, body);
+    console.log(`[AutoEmail] Password changed email sent to ${userEmail}`);
+  });
+}
+
 /**
  * Check for squares approaching grace period deadline and send reminders.
  * Called periodically from server.js.

src/middleware.ts

@@ -8,7 +8,7 @@ export default withAuth(
 
     // Admin routes require ADMIN or VIEWER role
     if (pathname.startsWith('/admin')) {
-      if (token?.role !== 'ADMIN' && token?.role !== 'VIEWER') {
+      if (token?.role !== 'ADMIN' && token?.role !== 'COMMISSIONER') {
         return NextResponse.redirect(new URL('/login', req.url));
       }
     }