jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

⚡ Improve login page

Browse Source 
Styling and responsiveness
This commit is contained in:
Thomas "ajnart" Camlong
2022-07-22 13:16:42 +02:00
parent d2eb31f510
commit 8eac0bed84
1 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/pages/login.tsx
View File

@@ -5,6 +5,7 @@ import { useForm } from '@mantine/hooks';
import { showNotification, updateNotification } from '@mantine/notifications'; import { showNotification, updateNotification } from '@mantine/notifications';
import axios from 'axios'; import axios from 'axios';
import { IconCheck, IconX } from '@tabler/icons'; import { IconCheck, IconX } from '@tabler/icons';
import { Logo } from '../components/layout/Logo';
// TODO: Add links to the wiki articles about the login process. // TODO: Add links to the wiki articles about the login process.
export default function AuthenticationTitle() { export default function AuthenticationTitle() {
@@ -15,22 +16,26 @@ export default function AuthenticationTitle() {
}); });
return ( return (
<Container <Container
size={420} size={'lg'}
style={{ style={{
height: '100vh', height: '100vh',
display: 'flex', display: 'flex',
width: 420, width: '100%',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}} }}
> >
<Title <Group>
align="center" <Title
sx={(theme) => ({ fontFamily: `Greycliff CF, ${theme.fontFamily}`, fontWeight: 900 })} align="center"
> sx={(theme) => ({ fontFamily: `Greycliff CF, ${theme.fontFamily}`, fontWeight: 900 })}
Welcome back! >
</Title> Welcome back!
</Title>
<Logo withoutText />
</Group>
<Text color="dimmed" size="sm" align="center" mt={5}> <Text color="dimmed" size="sm" align="center" mt={5}>
Please enter the{' '} Please enter the{' '}
<Anchor<'a'> href="#" size="sm" onClick={(event) => event.preventDefault()}> <Anchor<'a'> href="#" size="sm" onClick={(event) => event.preventDefault()}>
@@ -38,7 +43,7 @@ export default function AuthenticationTitle() {
</Anchor> </Anchor>
</Text> </Text>
<Paper withBorder shadow="md" p={30} mt={30} radius="md" style={{ width: 420 }}> <Paper withBorder shadow="md" p={30} mt={30} radius="md" style={{ width: '100%', maxWidth: 420 }}>
<form <form
onSubmit={form.onSubmit((values) => { onSubmit={form.onSubmit((values) => {
setCookies('password', values.password, { setCookies('password', values.password, {
@@ -64,8 +69,7 @@ export default function AuthenticationTitle() {
id: 'load-data', id: 'load-data',
color: 'teal', color: 'teal',
title: 'Password correct', title: 'Password correct',
message: message: undefined,
'Notification will close in 2 seconds, you can close this notification now',
icon: <IconCheck />, icon: <IconCheck />,
autoClose: 300, autoClose: 300,
onClose: () => { onClose: () => {
@@ -78,8 +82,7 @@ export default function AuthenticationTitle() {
id: 'load-data', id: 'load-data',
color: 'red', color: 'red',
title: 'Password is wrong, please try again.', title: 'Password is wrong, please try again.',
message: message: undefined,
'Notification will close in 2 seconds, you can close this notification now',
icon: <IconX />, icon: <IconX />,
autoClose: 2000, autoClose: 2000,
}); });
@@ -93,14 +96,10 @@ export default function AuthenticationTitle() {
label="Password" label="Password"
placeholder="Your password" placeholder="Your password"
required required
autoFocus
mt="md" mt="md"
{...form.getInputProps('password')} {...form.getInputProps('password')}
/> />
<Group position="apart" mt="md">
<Anchor<'a'> onClick={(event) => event.preventDefault()} href="#" size="sm">
Forgot password?
</Anchor>
</Group>
<Button fullWidth type="submit" mt="xl"> <Button fullWidth type="submit" mt="xl">
Sign in Sign in
</Button> </Button>