|
|
|
|
@@ -1,41 +1,23 @@
|
|
|
|
|
import { useState, FormEvent } from 'react'
|
|
|
|
|
import Box from '@mui/material/Box'
|
|
|
|
|
import Card from '@mui/material/Card'
|
|
|
|
|
import CardContent from '@mui/material/CardContent'
|
|
|
|
|
import TextField from '@mui/material/TextField'
|
|
|
|
|
import Button from '@mui/material/Button'
|
|
|
|
|
import Typography from '@mui/material/Typography'
|
|
|
|
|
import Alert from '@mui/material/Alert'
|
|
|
|
|
import { authApi } from '../api'
|
|
|
|
|
|
|
|
|
|
export default function Login() {
|
|
|
|
|
const [username, setUsername] = useState('')
|
|
|
|
|
const [password, setPassword] = useState('')
|
|
|
|
|
const [error, setError] = useState('')
|
|
|
|
|
|
|
|
|
|
const handleSubmit = async (e: FormEvent) => {
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
setError('')
|
|
|
|
|
try {
|
|
|
|
|
await authApi.login(username, password)
|
|
|
|
|
window.location.href = '/configs'
|
|
|
|
|
} catch {
|
|
|
|
|
setError('Invalid username or password')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Box sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: '#f5f7fa' }}>
|
|
|
|
|
<Card sx={{ width: 380, boxShadow: 3 }}>
|
|
|
|
|
<CardContent sx={{ p: 4 }}>
|
|
|
|
|
<Typography variant="h5" fontWeight={700} gutterBottom>Shorefront</Typography>
|
|
|
|
|
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>Sign in to manage your Shorewall configs</Typography>
|
|
|
|
|
{error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
|
|
|
|
|
<Box component="form" onSubmit={handleSubmit}>
|
|
|
|
|
<TextField fullWidth label="Username" value={username} onChange={(e) => setUsername(e.target.value)} sx={{ mb: 2 }} size="small" required />
|
|
|
|
|
<TextField fullWidth label="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} sx={{ mb: 3 }} size="small" required />
|
|
|
|
|
<Button type="submit" variant="contained" fullWidth>Sign In</Button>
|
|
|
|
|
</Box>
|
|
|
|
|
<Button
|
|
|
|
|
variant="contained"
|
|
|
|
|
fullWidth
|
|
|
|
|
onClick={() => { window.location.href = '/api/auth/oidc/login' }}
|
|
|
|
|
>
|
|
|
|
|
Sign in with SSO
|
|
|
|
|
</Button>
|
|
|
|
|
</CardContent>
|
|
|
|
|
</Card>
|
|
|
|
|
</Box>
|
|
|
|
|
|
