Signin: modern split-panel with Seubert logo, MS SSO primary, remove dev accounts, local login collapsed

ondeck/src/app/auth/signin/page.tsx

@@ -1,21 +1,56 @@
 import { SignInForm } from '@/components/auth/signin-form'
+import Image from 'next/image'
 
 export default function SignInPage() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">
-      <div className="max-w-md w-full">
-        <div className="bg-white shadow-xl rounded-lg p-8">
-          <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold text-gray-900">Horizon</h1>
-            <p className="text-gray-600 mt-2">Policy Renewal Workflow Management</p>
+    <div className="min-h-screen flex">
+      {/* Left panel — brand */}
+      <div className="hidden lg:flex lg:w-1/2 flex-col justify-between p-12"
+           style={{ background: 'linear-gradient(160deg, #0F513F 0%, #15745a 60%, #1FA883 100%)' }}>
+        <div>
+          <Image
+            src="/seubert-logo.webp"
+            alt="Seubert"
+            width={180}
+            height={56}
+            className="brightness-0 invert"
+            priority
+          />
+        </div>
+        <div>
+          <h2 className="text-4xl font-bold text-white leading-tight">
+            Policy Renewal<br />Workflow Management
+          </h2>
+          <p className="mt-4 text-white/70 text-lg">
+            Horizon keeps your team on top of every renewal, every client, every deadline.
+          </p>
+        </div>
+        <p className="text-white/40 text-sm">
+          © {new Date().getFullYear()} Seubert Enterprises, Inc.
+        </p>
+      </div>
+
+      {/* Right panel — form */}
+      <div className="flex-1 flex flex-col items-center justify-center px-6 py-12 bg-white">
+        <div className="w-full max-w-sm">
+          {/* Mobile logo */}
+          <div className="flex justify-center mb-8 lg:hidden">
+            <Image
+              src="/seubert-logo.webp"
+              alt="Seubert"
+              width={150}
+              height={48}
+              priority
+            />
           </div>
-          
+
+          <div className="mb-8">
+            <h1 className="text-2xl font-bold text-gray-900">Welcome back</h1>
+            <p className="text-gray-500 mt-1 text-sm">Sign in to your Horizon account</p>
+          </div>
+
           <SignInForm />
         </div>
-        
-        <p className="text-center text-sm text-gray-600 mt-4">
-          Sign in with your local account or Microsoft account
-        </p>
       </div>
     </div>
   )

ondeck/src/components/auth/signin-form.tsx

@@ -4,26 +4,21 @@ import { useState } from 'react'
 import { signIn } from 'next-auth/react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Building2, User } from 'lucide-react'
+import { Loader2 } from 'lucide-react'
 
 export function SignInForm() {
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
   const [loading, setLoading] = useState(false)
+  const [msLoading, setMsLoading] = useState(false)
   const [error, setError] = useState('')
+  const [showLocal, setShowLocal] = useState(false)
 
   const handleLocalSignIn = async (e: React.FormEvent) => {
     e.preventDefault()
     setLoading(true)
     setError('')
-
-    const result = await signIn('credentials', {
-      username,
-      password,
-      redirect: false,
-    })
-
+    const result = await signIn('credentials', { username, password, redirect: false })
     if (result?.error) {
       setError('Invalid username or password')
       setLoading(false)
@@ -33,76 +28,80 @@ export function SignInForm() {
   }
 
   const handleMicrosoftSignIn = async () => {
+    setMsLoading(true)
     await signIn('azure-ad', { callbackUrl: '/dashboard' })
   }
 
   return (
     <div className="space-y-4">
-      {/* Local Account Login */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-lg flex items-center gap-2">
-            <User className="h-5 w-5" />
-            Local Account
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleLocalSignIn} className="space-y-4">
-            <div>
-              <Input
-                type="text"
-                placeholder="Username"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                disabled={loading}
-                required
-              />
-            </div>
-            <div>
-              <Input
-                type="password"
-                placeholder="Password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                disabled={loading}
-                required
-              />
-            </div>
-            {error && (
-              <p className="text-sm text-red-500">{error}</p>
-            )}
-            <Button 
-              type="submit"
-              className="w-full"
-              disabled={loading}
-            >
-              {loading ? 'Signing in...' : 'Sign In'}
-            </Button>
-          </form>
-          
-          <div className="mt-4 p-3 bg-blue-50 rounded text-xs text-blue-800">
-            <p className="font-semibold mb-1">Development Accounts:</p>
-            <p>• admin / admin123 (Admin)</p>
-            <p>• manager / manager123 (Manager)</p>
-            <p>• ae / ae123 (Account Executive)</p>
-          </div>
-        </CardContent>
-      </Card>
+      {/* Microsoft SSO — primary */}
+      <Button
+        onClick={handleMicrosoftSignIn}
+        disabled={msLoading}
+        className="w-full h-11 text-sm font-medium"
+        style={{ backgroundColor: '#0F513F' }}
+        size="lg"
+      >
+        {msLoading ? (
+          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+        ) : (
+          <svg className="mr-2 h-4 w-4" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="1" y="1" width="9" height="9" fill="#f25022"/>
+            <rect x="11" y="1" width="9" height="9" fill="#7fba00"/>
+            <rect x="1" y="11" width="9" height="9" fill="#00a4ef"/>
+            <rect x="11" y="11" width="9" height="9" fill="#ffb900"/>
+          </svg>
+        )}
+        Sign in with Microsoft
+      </Button>
 
-      {/* Microsoft Login (if configured) */}
-      <Card>
-        <CardContent className="pt-6">
-          <Button 
-            onClick={handleMicrosoftSignIn}
-            variant="outline"
-            className="w-full"
-            size="lg"
-          >
-            <Building2 className="mr-2 h-5 w-5" />
-            Sign in with Microsoft
+      {/* Divider */}
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <span className="w-full border-t border-gray-200" />
+        </div>
+        <div className="relative flex justify-center text-xs">
+          <span className="bg-white px-3 text-gray-400">or</span>
+        </div>
+      </div>
+
+      {/* Local credentials — secondary / collapsed */}
+      {!showLocal ? (
+        <button
+          type="button"
+          onClick={() => setShowLocal(true)}
+          className="w-full text-center text-xs text-gray-400 hover:text-gray-600 transition-colors py-1"
+        >
+          Sign in with local account
+        </button>
+      ) : (
+        <form onSubmit={handleLocalSignIn} className="space-y-3">
+          <Input
+            type="text"
+            placeholder="Username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            disabled={loading}
+            required
+            autoFocus
+            className="h-10"
+          />
+          <Input
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            disabled={loading}
+            required
+            className="h-10"
+          />
+          {error && <p className="text-xs text-red-500">{error}</p>}
+          <Button type="submit" variant="outline" className="w-full h-10" disabled={loading}>
+            {loading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+            {loading ? 'Signing in…' : 'Sign In'}
           </Button>
-        </CardContent>
-      </Card>
+        </form>
+      )}
     </div>
   )
 }