mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-20 02:00:49 +00:00
81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
import { styled } from '@stitches/react';
|
|
import React, { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Button, InputBox, TextBlock } from '../theme';
|
|
|
|
const AuthWrapper = styled('div', {
|
|
alignItems: 'center',
|
|
minHeight: '100vh',
|
|
maxWidth: '600px',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
width: '90vw',
|
|
margin: '0 auto',
|
|
});
|
|
const AuthTitle = styled('div', {
|
|
fontWeight: 'bold',
|
|
color: '$teal12',
|
|
fontSize: '15pt',
|
|
borderBottom: '1px solid $teal6',
|
|
padding: '1rem 1.5rem',
|
|
margin: '0',
|
|
lineHeight: '1.25',
|
|
});
|
|
const AuthDialogContainer = styled('form', {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
padding: '0',
|
|
backgroundColor: '$gray2',
|
|
borderRadius: '0.25rem',
|
|
boxShadow:
|
|
'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
|
|
});
|
|
const Content = styled('div', {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
padding: '1.5rem',
|
|
gap: '1rem',
|
|
});
|
|
const Actions = styled('div', {
|
|
display: 'flex',
|
|
gap: '0.5rem',
|
|
justifyContent: 'flex-end',
|
|
borderTop: '1px solid $gray6',
|
|
padding: '1rem 1.5rem',
|
|
});
|
|
|
|
export default function AuthDialog(): React.ReactElement {
|
|
const [password, setPassword] = useState('');
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<AuthWrapper>
|
|
<AuthDialogContainer
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
localStorage.setItem('password', password);
|
|
window.location.reload();
|
|
}}
|
|
>
|
|
<AuthTitle>{t('pages.auth.title')}</AuthTitle>
|
|
<Content>
|
|
<TextBlock spacing="none">{t('pages.auth.desc')}</TextBlock>
|
|
<TextBlock spacing="none">{t('pages.auth.no-pwd-note')}</TextBlock>
|
|
</Content>
|
|
<Actions>
|
|
<InputBox
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
css={{ flex: 1 }}
|
|
placeholder={t('pages.auth.password')}
|
|
/>
|
|
<Button variation="primary" type="submit">
|
|
{t('pages.auth.submit')}
|
|
</Button>
|
|
</Actions>
|
|
</AuthDialogContainer>
|
|
</AuthWrapper>
|
|
);
|
|
}
|