Feat(UI): hide UI login when ALLOW_LOCAL_AUTH is set to false
This commit is contained in:
parent
d4eaad8162
commit
58652bc300
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Card,
|
Card,
|
||||||
|
|
@ -12,6 +12,7 @@ import {
|
||||||
IconButton,
|
IconButton,
|
||||||
Fade,
|
Fade,
|
||||||
Grow,
|
Grow,
|
||||||
|
CircularProgress,
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import {
|
import {
|
||||||
Visibility,
|
Visibility,
|
||||||
|
|
@ -34,7 +35,14 @@ interface LoginFormData {
|
||||||
password: string;
|
password: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface AuthConfig {
|
||||||
|
allow_local_auth: boolean;
|
||||||
|
oidc_enabled: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
const Login: React.FC = () => {
|
const Login: React.FC = () => {
|
||||||
|
const [authConfig, setAuthConfig] = useState<AuthConfig | null>(null);
|
||||||
|
const [configLoading, setConfigLoading] = useState<boolean>(true);
|
||||||
const [showPassword, setShowPassword] = useState<boolean>(false);
|
const [showPassword, setShowPassword] = useState<boolean>(false);
|
||||||
const [error, setError] = useState<string>('');
|
const [error, setError] = useState<string>('');
|
||||||
const [loading, setLoading] = useState<boolean>(false);
|
const [loading, setLoading] = useState<boolean>(false);
|
||||||
|
|
@ -45,6 +53,30 @@ const Login: React.FC = () => {
|
||||||
const theme = useMuiTheme();
|
const theme = useMuiTheme();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
// Fetch authentication configuration from backend
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchAuthConfig = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/auth/config');
|
||||||
|
if (response.ok) {
|
||||||
|
const config = await response.json();
|
||||||
|
setAuthConfig(config);
|
||||||
|
} else {
|
||||||
|
// Default to allowing both if config fetch fails
|
||||||
|
setAuthConfig({ allow_local_auth: true, oidc_enabled: true });
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to fetch auth config:', err);
|
||||||
|
// Default to allowing both if config fetch fails
|
||||||
|
setAuthConfig({ allow_local_auth: true, oidc_enabled: true });
|
||||||
|
} finally {
|
||||||
|
setConfigLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchAuthConfig();
|
||||||
|
}, []);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
|
|
@ -178,7 +210,15 @@ const Login: React.FC = () => {
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
|
{/* Loading state while fetching config */}
|
||||||
|
{configLoading && (
|
||||||
|
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
|
||||||
|
<CircularProgress sx={{ color: 'white' }} />
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Login Card */}
|
{/* Login Card */}
|
||||||
|
{!configLoading && authConfig && (
|
||||||
<Grow in={true} timeout={1200}>
|
<Grow in={true} timeout={1200}>
|
||||||
<Card
|
<Card
|
||||||
elevation={0}
|
elevation={0}
|
||||||
|
|
@ -216,6 +256,8 @@ const Login: React.FC = () => {
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<Box component="form" onSubmit={handleSubmit(onSubmit)}>
|
<Box component="form" onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
{authConfig.allow_local_auth && (
|
||||||
|
<>
|
||||||
<TextField
|
<TextField
|
||||||
fullWidth
|
fullWidth
|
||||||
label={t('auth.username')}
|
label={t('auth.username')}
|
||||||
|
|
@ -322,7 +364,10 @@ const Login: React.FC = () => {
|
||||||
{t('common.or')}
|
{t('common.or')}
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{authConfig.oidc_enabled && (
|
||||||
<Button
|
<Button
|
||||||
fullWidth
|
fullWidth
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
|
|
@ -352,6 +397,7 @@ const Login: React.FC = () => {
|
||||||
>
|
>
|
||||||
{oidcLoading ? t('auth.redirecting') : t('auth.signInWithOIDC')}
|
{oidcLoading ? t('auth.redirecting') : t('auth.signInWithOIDC')}
|
||||||
</Button>
|
</Button>
|
||||||
|
)}
|
||||||
|
|
||||||
<Box sx={{ textAlign: 'center', mt: 2 }}>
|
<Box sx={{ textAlign: 'center', mt: 2 }}>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
@ -359,6 +405,7 @@ const Login: React.FC = () => {
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
</Grow>
|
</Grow>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<Box sx={{ textAlign: 'center', mt: 4 }}>
|
<Box sx={{ textAlign: 'center', mt: 4 }}>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import { describe, test, expect } from 'vitest';
|
import { describe, test, expect, vi, beforeEach } from 'vitest';
|
||||||
import Login from '../Login';
|
import Login from '../Login';
|
||||||
|
|
||||||
// Basic existence test for Login component
|
// Basic existence test for Login component
|
||||||
|
|
@ -6,6 +6,11 @@ import Login from '../Login';
|
||||||
// is causing infrastructure issues
|
// is causing infrastructure issues
|
||||||
|
|
||||||
describe('Login - OIDC Features - Simplified', () => {
|
describe('Login - OIDC Features - Simplified', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
// Mock fetch for auth config endpoint
|
||||||
|
global.fetch = vi.fn();
|
||||||
|
});
|
||||||
|
|
||||||
test('Test file exists and can run', () => {
|
test('Test file exists and can run', () => {
|
||||||
// This is a basic test to ensure the test file is valid
|
// This is a basic test to ensure the test file is valid
|
||||||
expect(true).toBe(true);
|
expect(true).toBe(true);
|
||||||
|
|
@ -16,4 +21,11 @@ describe('Login - OIDC Features - Simplified', () => {
|
||||||
expect(Login).toBeDefined();
|
expect(Login).toBeDefined();
|
||||||
expect(typeof Login).toBe('function');
|
expect(typeof Login).toBe('function');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('Component fetches auth config at runtime', () => {
|
||||||
|
// The component now fetches /api/auth/config to determine
|
||||||
|
// which authentication methods are available
|
||||||
|
// Actual rendering logic is tested in E2E tests
|
||||||
|
expect(global.fetch).toBeDefined();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -1,17 +1,46 @@
|
||||||
import React, { useState } from 'react'
|
import React, { useState, useEffect } from 'react'
|
||||||
import { Link } from 'react-router-dom'
|
import { Link, useNavigate } from 'react-router-dom'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { useAuth } from '../contexts/AuthContext'
|
import { useAuth } from '../contexts/AuthContext'
|
||||||
|
|
||||||
|
interface AuthConfig {
|
||||||
|
allow_local_auth: boolean;
|
||||||
|
oidc_enabled: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
function Register() {
|
function Register() {
|
||||||
|
const navigate = useNavigate()
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const [username, setUsername] = useState('')
|
const [username, setUsername] = useState('')
|
||||||
const [email, setEmail] = useState('')
|
const [email, setEmail] = useState('')
|
||||||
const [password, setPassword] = useState('')
|
const [password, setPassword] = useState('')
|
||||||
const [error, setError] = useState('')
|
const [error, setError] = useState('')
|
||||||
const [loading, setLoading] = useState(false)
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [configLoading, setConfigLoading] = useState(true)
|
||||||
const { register } = useAuth()
|
const { register } = useAuth()
|
||||||
|
|
||||||
|
// Fetch authentication configuration and redirect if local auth is disabled
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchAuthConfig = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/auth/config');
|
||||||
|
if (response.ok) {
|
||||||
|
const config: AuthConfig = await response.json();
|
||||||
|
if (!config.allow_local_auth) {
|
||||||
|
// Redirect to login if local auth is disabled
|
||||||
|
navigate('/login');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to fetch auth config:', err);
|
||||||
|
} finally {
|
||||||
|
setConfigLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchAuthConfig();
|
||||||
|
}, [navigate])
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
setError('')
|
setError('')
|
||||||
|
|
@ -26,6 +55,16 @@ function Register() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (configLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<p className="text-gray-600">{t('common.loading', 'Loading...')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||||||
<div className="max-w-md w-full space-y-8">
|
<div className="max-w-md w-full space-y-8">
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ use axum::{
|
||||||
routing::{get, post},
|
routing::{get, post},
|
||||||
Router,
|
Router,
|
||||||
};
|
};
|
||||||
use serde::Deserialize;
|
use serde::{Deserialize, Serialize};
|
||||||
use std::sync::Arc;
|
use std::sync::Arc;
|
||||||
|
|
||||||
use crate::{
|
use crate::{
|
||||||
|
|
@ -20,10 +20,17 @@ pub fn router() -> Router<Arc<AppState>> {
|
||||||
.route("/register", post(register))
|
.route("/register", post(register))
|
||||||
.route("/login", post(login))
|
.route("/login", post(login))
|
||||||
.route("/me", get(me))
|
.route("/me", get(me))
|
||||||
|
.route("/config", get(get_auth_config))
|
||||||
.route("/oidc/login", get(oidc_login))
|
.route("/oidc/login", get(oidc_login))
|
||||||
.route("/oidc/callback", get(oidc_callback))
|
.route("/oidc/callback", get(oidc_callback))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[derive(Serialize, utoipa::ToSchema)]
|
||||||
|
struct AuthConfig {
|
||||||
|
allow_local_auth: bool,
|
||||||
|
oidc_enabled: bool,
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
#[utoipa::path(
|
#[utoipa::path(
|
||||||
post,
|
post,
|
||||||
|
|
@ -82,6 +89,26 @@ async fn register(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[utoipa::path(
|
||||||
|
get,
|
||||||
|
path = "/api/auth/config",
|
||||||
|
tag = "auth",
|
||||||
|
responses(
|
||||||
|
(status = 200, description = "Authentication configuration", body = AuthConfig),
|
||||||
|
)
|
||||||
|
)]
|
||||||
|
async fn get_auth_config(
|
||||||
|
State(state): State<Arc<AppState>>,
|
||||||
|
) -> Json<AuthConfig> {
|
||||||
|
let allow_local_auth = state.config.allow_local_auth.unwrap_or(true);
|
||||||
|
let oidc_enabled = state.oidc_client.is_some();
|
||||||
|
|
||||||
|
Json(AuthConfig {
|
||||||
|
allow_local_auth,
|
||||||
|
oidc_enabled,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
#[utoipa::path(
|
#[utoipa::path(
|
||||||
post,
|
post,
|
||||||
path = "/api/auth/login",
|
path = "/api/auth/login",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue