adjusted login page to emphasize microsoft login, hide local login options behind small link
This commit is contained in:
michael
parent
5e87a6fd94
commit
eb402e0c68
2 changed files with 105 additions and 79 deletions
13
README.md
13
README.md
|
|
@ -145,6 +145,19 @@ docker compose restart worker
|
|||
docker compose down
|
||||
```
|
||||
|
||||
#### Test User Credentials (Local Development Only)
|
||||
|
||||
For testing different user roles locally:
|
||||
|
||||
```
|
||||
Admin: admin@example.com / admin
|
||||
Production: production@example.com / production
|
||||
Reviewer: reviewer@example.com / reviewer
|
||||
Client: client@example.com / client123
|
||||
```
|
||||
|
||||
**Note**: These test users are only for local development. Production uses Microsoft authentication.
|
||||
|
||||
### Alternative: Native Development (Without Docker)
|
||||
|
||||
For development without Docker, you'll need to run each service manually:
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ export function Login() {
|
|||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [microsoftLoading, setMicrosoftLoading] = useState(false);
|
||||
const [showLocalLogin, setShowLocalLogin] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const { login, isLoading, setUser } = useAuthStore();
|
||||
const { instance } = useMsal();
|
||||
|
|
@ -144,75 +145,81 @@ export function Login() {
|
|||
<p className="text-gray-600">Sign in to your account to continue</p>
|
||||
</div>
|
||||
|
||||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center">
|
||||
<span className="text-red-500 mr-2">❌</span>
|
||||
<span className="text-red-700 text-sm">{error}</span>
|
||||
{/* Error Display */}
|
||||
{error && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center mb-6">
|
||||
<span className="text-red-500 mr-2">❌</span>
|
||||
<span className="text-red-700 text-sm">{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Local Login Form (Conditionally Shown) */}
|
||||
{showLocalLogin && (
|
||||
<form className="space-y-6 mb-6" onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
|
||||
placeholder="Enter your email"
|
||||
/>
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || microsoftLoading}
|
||||
className="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 px-4 rounded-lg font-semibold hover:from-blue-600 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 transform hover:scale-105 disabled:transform-none shadow-lg hover:shadow-xl"
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
|
||||
Signing in...
|
||||
</div>
|
||||
) : (
|
||||
'Sign In'
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{/* Divider (Only when local form is visible) */}
|
||||
{showLocalLogin && (
|
||||
<div className="relative my-6">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center text-sm">
|
||||
<span className="px-2 bg-white text-gray-500">Or continue with</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading || microsoftLoading}
|
||||
className="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 px-4 rounded-lg font-semibold hover:from-blue-600 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 transform hover:scale-105 disabled:transform-none shadow-lg hover:shadow-xl"
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
|
||||
Signing in...
|
||||
</div>
|
||||
) : (
|
||||
'Sign In'
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="relative my-6">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center text-sm">
|
||||
<span className="px-2 bg-white text-gray-500">Or continue with</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Microsoft Sign In Button */}
|
||||
{/* Microsoft Sign In Button (Always Visible) */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleMicrosoftLogin}
|
||||
|
|
@ -237,21 +244,27 @@ export function Login() {
|
|||
)}
|
||||
</button>
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-gray-200">
|
||||
<div className="text-center text-sm text-gray-600 space-y-2">
|
||||
<p className="font-medium">Demo Credentials:</p>
|
||||
<div className="bg-gray-50 rounded-lg p-3 space-y-1 text-xs">
|
||||
<p><strong>Admin:</strong> admin@example.com / admin</p>
|
||||
<p><strong>Production:</strong> production@example.com / production</p>
|
||||
<p><strong>Reviewer:</strong> reviewer@example.com / reviewer</p>
|
||||
</div>
|
||||
<p className="text-xs">
|
||||
Need help? Contact{' '}
|
||||
<a href="mailto:support@videoaccess.com" className="text-blue-600 hover:text-blue-700 font-medium">
|
||||
support@videoaccess.com
|
||||
</a>
|
||||
</p>
|
||||
{/* Local Login Link (Only when form is hidden) */}
|
||||
{!showLocalLogin && (
|
||||
<div className="mt-6 text-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowLocalLogin(true)}
|
||||
className="text-sm text-gray-500 hover:text-gray-700 underline transition-colors"
|
||||
>
|
||||
Local login
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Support Contact */}
|
||||
<div className="mt-8 pt-6 border-t border-gray-200 text-center">
|
||||
<p className="text-xs text-gray-600">
|
||||
Need help? Contact{' '}
|
||||
<a href="mailto:support@videoaccess.com" className="text-blue-600 hover:text-blue-700 font-medium">
|
||||
support@videoaccess.com
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue