External/domain-watchdog
1
0
Fork 0
mirror of https://github.com/maelgangloff/domain-watchdog.git synced 2025-12-29 16:15:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: responsive login page

Browse Source
This commit is contained in:
Vincent
2025-10-31 13:46:17 +01:00
parent 2aeb897e6c
commit c0b5c6766e
2 changed files with 31 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
assets/pages/LoginPage.tsx
View File

@@ -6,6 +6,7 @@ import {LoginForm} from '../components/LoginForm'
import type { InstanceConfig} from '../utils/api'
import {getConfiguration} from '../utils/api'
import {RegisterForm} from '../components/RegisterForm'
import useBreakpoint from "../hooks/useBreakpoint";
export const AuthenticatedContext = createContext<
{
@@ -22,6 +23,7 @@ export const AuthenticatedContext = createContext<
export default function LoginPage() {
const [wantRegister, setWantRegister] = useState<boolean>(false)
const [configuration, setConfiguration] = useState<InstanceConfig>()
const md = useBreakpoint('md')
const toggleWantRegister = () => {
setWantRegister(!wantRegister)
@@ -31,24 +33,32 @@ export default function LoginPage() {
getConfiguration().then(setConfiguration)
}, [])
const grid = [
<Card.Grid style={{width: md ? '100%' : '50%', textAlign: 'center'}} hoverable={false}>
{wantRegister ? <RegisterForm/> : <LoginForm ssoLogin={configuration?.ssoLogin}/>}
{
configuration?.registerEnabled &&
<Button
type='link'
block
style={{marginTop: '1em'}}
onClick={toggleWantRegister}
>{wantRegister ? t`Log in` : t`Create an account`}
</Button>
}
</Card.Grid>,
<Card.Grid style={{width: md ? '100%' : '50%'}} hoverable={false}>
<TextPage resource='ads.md'/>
</Card.Grid>
];
if (md) {
grid.reverse();
}
return (
<Card title={wantRegister ? t`Register` : t`Log in`} style={{width: '100%'}}>
<Card.Grid style={{width: '50%', textAlign: 'center'}} hoverable={false}>
{wantRegister ? <RegisterForm/> : <LoginForm ssoLogin={configuration?.ssoLogin}/>}
{
configuration?.registerEnabled &&
<Button
type='link'
block
style={{marginTop: '1em'}}
onClick={toggleWantRegister}
>{wantRegister ? t`Log in` : t`Create an account`}
</Button>
}
</Card.Grid>
<Card.Grid style={{width: '50%'}} hoverable={false}>
<TextPage resource='ads.md'/>
</Card.Grid>
{grid}
</Card>
)
}