External/domain-watchdog
1
0
Fork 0
mirror of https://github.com/maelgangloff/domain-watchdog.git synced 2025-12-17 17:55:42 +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
No known key found for this signature in database
GPG Key ID: 056662E78D70E358
2 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/components/LoginForm.tsx
View File

@ -1,4 +1,4 @@
import {Button, Form, Input, message, Space} from 'antd' import {Button, Flex, Form, Input, message} from 'antd'
import {t} from 'ttag' import {t} from 'ttag'
import React, {useContext, useEffect} from 'react' import React, {useContext, useEffect} from 'react'
import {getUser, login} from '../utils/api' import {getUser, login} from '../utils/api'
@ -60,18 +60,15 @@ export function LoginForm({ssoLogin}: { ssoLogin?: boolean }) {
<Input.Password/> <Input.Password/>
</Form.Item> </Form.Item>
<Space> <Flex wrap justify="center" gap="middle">
<Form.Item wrapperCol={{offset: 8, span: 16}}>
<Button type='primary' htmlType='submit'> <Button type='primary' htmlType='submit'>
{t`Submit`} {t`Submit`}
</Button> </Button>
</Form.Item> {ssoLogin &&
{ssoLogin && <Form.Item wrapperCol={{offset: 8, span: 16}}>
<Button type='dashed' htmlType='button' href='/login/oauth'> <Button type='dashed' htmlType='button' href='/login/oauth'>
{t`Log in with SSO`} {t`Log in with SSO`}
</Button> </Button>}
</Form.Item>} </Flex>
</Space>
</Form> </Form>
</> </>
) )

42
assets/pages/LoginPage.tsx
View File

@ -6,6 +6,7 @@ import {LoginForm} from '../components/LoginForm'
import type { InstanceConfig} from '../utils/api' import type { InstanceConfig} from '../utils/api'
import {getConfiguration} from '../utils/api' import {getConfiguration} from '../utils/api'
import {RegisterForm} from '../components/RegisterForm' import {RegisterForm} from '../components/RegisterForm'
import useBreakpoint from "../hooks/useBreakpoint";
export const AuthenticatedContext = createContext< export const AuthenticatedContext = createContext<
{ {
@ -22,6 +23,7 @@ export const AuthenticatedContext = createContext<
export default function LoginPage() { export default function LoginPage() {
const [wantRegister, setWantRegister] = useState<boolean>(false) const [wantRegister, setWantRegister] = useState<boolean>(false)
const [configuration, setConfiguration] = useState<InstanceConfig>() const [configuration, setConfiguration] = useState<InstanceConfig>()
const md = useBreakpoint('md')
const toggleWantRegister = () => { const toggleWantRegister = () => {
setWantRegister(!wantRegister) setWantRegister(!wantRegister)
@ -31,24 +33,32 @@ export default function LoginPage() {
getConfiguration().then(setConfiguration) 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 ( return (
<Card title={wantRegister ? t`Register` : t`Log in`} style={{width: '100%'}}> <Card title={wantRegister ? t`Register` : t`Log in`} style={{width: '100%'}}>
<Card.Grid style={{width: '50%', textAlign: 'center'}} hoverable={false}> {grid}
{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>
</Card> </Card>
) )
} }