update name

components/ProfileSettings.tsx

@@ -4,11 +4,15 @@ import { Button } from './ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
 import { Input } from './ui/input';
 import { Label } from './ui/label';
-import { useSession, signOut } from '../lib/auth-client';
+import { useSession, signOut, updateUser } from '../lib/auth-client';
 import { validatePhoneOrEmail } from '../lib/validators';
 
 export function ProfileSettings() {
   const { data: session } = useSession();
+  const [userName, setUserName] = useState('');
+  const [savingName, setSavingName] = useState(false);
+  const [nameSaved, setNameSaved] = useState(false);
+  const [nameError, setNameError] = useState('');
   const [piFirstName, setPiFirstName] = useState('');
   const [bldgCode, setBldgCode] = useState('');
   const [lab, setLab] = useState('');
@@ -21,6 +25,10 @@ export function ProfileSettings() {
   const [deleting, setDeleting] = useState(false);
   const [deleteError, setDeleteError] = useState('');
 
+  useEffect(() => {
+    if (session?.user.name) setUserName(session.user.name);
+  }, [session?.user.name]);
+
   useEffect(() => {
     fetch('/api/profile', { credentials: 'include' })
       .then(r => (r.ok ? r.json() : null))
@@ -35,6 +43,25 @@ export function ProfileSettings() {
       .finally(() => setLoading(false));
   }, []);
 
+  async function handleSaveName() {
+    setNameError('');
+    setNameSaved(false);
+    const trimmed = userName.trim();
+    if (!trimmed) {
+      setNameError('Name is required.');
+      return;
+    }
+    setSavingName(true);
+    const { error: err } = await updateUser({ name: trimmed });
+    setSavingName(false);
+    if (err) {
+      setNameError(err.message || 'Failed to save name.');
+    } else {
+      setNameSaved(true);
+      setTimeout(() => setNameSaved(false), 3000);
+    }
+  }
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     setError('');
@@ -93,15 +120,31 @@ export function ProfileSettings() {
         <CardHeader>
           <CardTitle className="text-base">Account</CardTitle>
         </CardHeader>
-        <CardContent className="space-y-3 pb-6">
-          <div>
-            <Label className="text-xs text-muted-foreground">Name</Label>
-            <p className="text-sm">{session?.user.name || '—'}</p>
+        <CardContent className="space-y-4 pb-6">
+          <div className="space-y-1">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={userName}
+              onChange={e => setUserName(e.target.value)}
+              placeholder="Your name"
+            />
           </div>
           <div>
             <Label className="text-xs text-muted-foreground">Email</Label>
             <p className="text-sm">{session?.user.email || '—'}</p>
           </div>
+          {nameError && <p className="text-sm text-red-600">{nameError}</p>}
+          {nameSaved && (
+            <p className="text-sm text-green-600 flex items-center gap-1">
+              <Check className="w-4 h-4" /> Name saved
+            </p>
+          )}
+          <div className="pt-1">
+            <Button type="button" onClick={handleSaveName} disabled={savingName}>
+              {savingName ? 'Saving…' : 'Save name'}
+            </Button>
+          </div>
         </CardContent>
       </Card>
 

components/auth/LoginForm.tsx

@@ -11,6 +11,7 @@ import {
   Camera,
   AlertTriangle,
   ChevronDown,
+  Loader2,
 } from 'lucide-react';
 
 const logo = '/logo.png';
@@ -52,6 +53,7 @@ export function LoginForm({ onSignUp, onForgotPassword }: Props) {
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
+  const [appleLoading, setAppleLoading] = useState(false);
   const [resendCooldown, setResendCooldown] = useState(0);
   const [resendLoading, setResendLoading] = useState(false);
   const aboutRef = useRef<HTMLElement>(null);
@@ -90,7 +92,9 @@ export function LoginForm({ onSignUp, onForgotPassword }: Props) {
   }
 
   async function handleApple() {
-    await signIn.social({ provider: 'apple', callbackURL: window.location.origin, errorCallbackURL: window.location.origin });
+    setAppleLoading(true);
+    const res = await signIn.social({ provider: 'apple', callbackURL: window.location.origin, errorCallbackURL: window.location.origin });
+    if (res?.error) setAppleLoading(false);
   }
 
   function scrollToAbout() {
@@ -212,11 +216,16 @@ export function LoginForm({ onSignUp, onForgotPassword }: Props) {
               variant="outline"
               className="w-full flex items-center gap-3"
               onClick={handleApple}
+              disabled={appleLoading}
             >
-              <svg viewBox="0 0 24 24" className="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
-                <path d="M16.365 1.43c0 1.14-.42 2.23-1.16 3.06-.79.91-2.07 1.62-3.18 1.53-.13-1.12.42-2.27 1.13-3.04.8-.86 2.16-1.5 3.21-1.55zM20.5 17.27c-.55 1.27-.81 1.84-1.52 2.96-.99 1.56-2.39 3.5-4.12 3.51-1.54.02-1.94-1-4.03-.99-2.09.01-2.53 1.01-4.07.99-1.73-.02-3.06-1.78-4.05-3.34C-.04 16.04-.42 11.07 1.93 8.41c1.43-1.62 3.69-2.58 5.81-2.58 2.16 0 3.52 1.18 5.31 1.18 1.74 0 2.79-1.18 5.29-1.18 1.88 0 3.88 1.03 5.3 2.81-4.66 2.55-3.9 9.21-3.14 8.63z"/>
-              </svg>
-              Sign in with Apple
+              {appleLoading ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <svg viewBox="0 0 24 24" className="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+                  <path d="M16.365 1.43c0 1.14-.42 2.23-1.16 3.06-.79.91-2.07 1.62-3.18 1.53-.13-1.12.42-2.27 1.13-3.04.8-.86 2.16-1.5 3.21-1.55zM20.5 17.27c-.55 1.27-.81 1.84-1.52 2.96-.99 1.56-2.39 3.5-4.12 3.51-1.54.02-1.94-1-4.03-.99-2.09.01-2.53 1.01-4.07.99-1.73-.02-3.06-1.78-4.05-3.34C-.04 16.04-.42 11.07 1.93 8.41c1.43-1.62 3.69-2.58 5.81-2.58 2.16 0 3.52 1.18 5.31 1.18 1.74 0 2.79-1.18 5.29-1.18 1.88 0 3.88 1.03 5.3 2.81-4.66 2.55-3.9 9.21-3.14 8.63z"/>
+                </svg>
+              )}
+              {appleLoading ? 'Signing in…' : 'Sign in with Apple'}
             </Button>
 
             <div className="flex justify-between text-sm">