Add environment variable to control local login availability

Add VITE_ENABLE_LOCAL_LOGIN env variable to conditionally show/hide
local username/password login on the login screen. When set to 'false'
(production), only Microsoft login is shown. When 'true' (development),
both options are available.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
michael 2025-12-08 14:20:50 -06:00
parent 68a39d3554
commit 30d5cf7702
3 changed files with 77 additions and 62 deletions

View file

@ -10,4 +10,7 @@ VITE_WEBSOCKET_PATH=/socket.io/
# MSAL Authentication (local development)
VITE_MSAL_REDIRECT_URI=http://localhost:5173/
VITE_MSAL_POST_LOGOUT_REDIRECT_URI=http://localhost:5173/
VITE_MSAL_POST_LOGOUT_REDIRECT_URI=http://localhost:5173/
# Local login (username/password) - enable for development
VITE_ENABLE_LOCAL_LOGIN=true

View file

@ -10,4 +10,7 @@ VITE_WEBSOCKET_PATH=/semblance_back/socket.io/
# MSAL Authentication (production server)
VITE_MSAL_REDIRECT_URI=https://ai-sandbox.oliver.solutions/semblance
VITE_MSAL_POST_LOGOUT_REDIRECT_URI=https://ai-sandbox.oliver.solutions/semblance
VITE_MSAL_POST_LOGOUT_REDIRECT_URI=https://ai-sandbox.oliver.solutions/semblance
# Local login (username/password) - disable for production
VITE_ENABLE_LOCAL_LOGIN=false

View file

@ -24,6 +24,9 @@ export default function Login() {
const location = useLocation();
const { login, loginWithMicrosoft, isAuthenticated, isMsalLoading } = useAuth();
const [isLoading, setIsLoading] = useState(false);
// Check if local login is enabled (defaults to true for backwards compatibility)
const enableLocalLogin = import.meta.env.VITE_ENABLE_LOCAL_LOGIN !== 'false';
// Get the intended destination from state, or default to home page
const from = location.state?.from || '/';
@ -120,70 +123,76 @@ export default function Login() {
</Button>
</div>
{/* Divider */}
<div className="relative mb-6">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-200"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="bg-white px-2 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
Or continue with username
</span>
</div>
</div>
{enableLocalLogin && (
<>
{/* Divider */}
<div className="relative mb-6">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-200"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="bg-white px-2 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
Or continue with username
</span>
</div>
</div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input
placeholder="Enter your username"
{...field}
disabled={isLoading}
autoComplete="username"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input
placeholder="Enter your password"
type="password"
{...field}
disabled={isLoading}
autoComplete="current-password"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit" className="w-full" disabled={isLoading || isMsalLoading}>
{isLoading ? "Signing in..." : "Sign In"}
</Button>
</form>
</Form>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="username"
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
<Input
placeholder="Enter your username"
{...field}
disabled={isLoading}
autoComplete="username"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input
placeholder="Enter your password"
type="password"
{...field}
disabled={isLoading}
autoComplete="current-password"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit" className="w-full" disabled={isLoading || isMsalLoading}>
{isLoading ? "Signing in..." : "Sign In"}
</Button>
</form>
</Form>
</>
)}
</CardContent>
<CardFooter className="flex flex-col space-y-2">
<div className="text-sm text-center text-gray-500 mb-2">
Default account: user / pass
</div>
{enableLocalLogin && (
<div className="text-sm text-center text-gray-500 mb-2">
Default account: user / pass
</div>
)}
{!isLoading && !isMsalLoading && (
<div className="flex flex-col items-center justify-center gap-2">
<Button