seasharp/anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(striker-ui): add GatePanel and login page

Browse Source
This commit is contained in:
Tsu-ba-me 2023-04-19 17:37:37 -04:00
parent 414c4d64c6
commit 089efdbdc3
3 changed files with 74 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
striker-ui/components/GateForm.tsx
View File

@ -1,11 +1,5 @@
import { Box, BoxProps, SxProps, Theme } from '@mui/material';
import {
forwardRef,
useImperativeHandle,
useMemo,
useRef,
useState,
} from 'react';
import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
import INPUT_TYPES from '../lib/consts/INPUT_TYPES';
@ -18,6 +12,7 @@ import OutlinedInputWithLabel from './OutlinedInputWithLabel';
import Spinner from './Spinner';
import { buildPeacefulStringTestBatch } from '../lib/test_input';
import useFormUtils from '../hooks/useFormUtils';
import useProtectedState from '../hooks/useProtectedState';
const INPUT_ROOT_SX: SxProps<Theme> = { width: '100%' };
@ -72,7 +67,7 @@ const GateForm = forwardRef<GateFormForwardedRefContent, GateFormProps>(
const inputPassphraseRef = useRef<InputForwardedRefContent<'string'>>({});
const messageGroupRef = useRef<MessageGroupForwardedRefContent>({});
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
const [isSubmitting, setIsSubmitting] = useProtectedState<boolean>(false);
const formUtils = useFormUtils(
[INPUT_ID_GATE_ID, INPUT_ID_GATE_PASSPHRASE],
@ -118,7 +113,7 @@ const GateForm = forwardRef<GateFormForwardedRefContent, GateFormProps>(
...args,
);
}),
[onSubmit, onSubmitAppend, setMessage],
[onSubmit, onSubmitAppend, setIsSubmitting, setMessage],
);
const submitElement = useMemo(

53
striker-ui/components/GatePanel.tsx Normal file
View File

@ -0,0 +1,53 @@
import { useRouter } from 'next/router';
import { FC } from 'react';
import api from '../lib/api';
import GateForm from './GateForm';
import handleAPIError from '../lib/handleAPIError';
import { Panel } from './Panels';
const GatePanel: FC = () => {
const router = useRouter();
return (
<Panel
sx={{
marginLeft: { xs: '1em', sm: 'auto' },
marginRight: { xs: '1em', sm: 'auto' },
marginTop: 'calc(50vh - 14em)',
minWidth: '16em',
width: { xs: 'fit-content', sm: '26em' },
}}
>
<GateForm
gridProps={{ columns: 1 }}
identifierLabel="Username"
onSubmitAppend={(username, password, setMessage, setIsSubmitting) => {
setIsSubmitting(true);
api
.post('/auth/login', { username, password })
.then(() => {
router.push('/');
})
.catch((error) => {
const emsg = handleAPIError(error, {
onResponseErrorAppend: () => ({
children: `Credentials mismatched.`,
}),
});
setMessage(emsg);
})
.finally(() => {
setIsSubmitting(false);
});
}}
passphraseLabel="Passphrase"
submitLabel="Login"
/>
</Panel>
);
};
export default GatePanel;

17
striker-ui/pages/login/index.tsx Normal file
View File

@ -0,0 +1,17 @@
import Head from 'next/head';
import { FC } from 'react';
import GatePanel from '../../components/GatePanel';
import Header from '../../components/Header';
const Login: FC = () => (
<>
<Head>
<title>Login</title>
</Head>
<Header />
<GatePanel />
</>
);
export default Login;