Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bump react-form #1704

Merged
merged 2 commits into from
May 26, 2023
Merged

Bump react-form #1704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c0cceef
Bump react-form
jhaals May 26, 2023
2e0feef
add back id field
jhaals May 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion website/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-dropzone": "^14.2.3",
"react-hook-form": "^6.15.8",
"react-hook-form": "^7.43.9",
"react-i18next": "^12.2.2",
"react-router-dom": "^6.11.2",
"react-scripts": "^5.0.1",
Expand Down
102 changes: 57 additions & 45 deletions website/src/createSecret/CreateSecret.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useTranslation } from 'react-i18next';
import { useForm, UseFormMethods } from 'react-hook-form';
import { useForm, Controller, Control } from 'react-hook-form';
import randomString, {
encryptMessage,
isErrorWithMessage,
Expand All @@ -25,8 +25,7 @@ const CreateSecret = () => {
const { t } = useTranslation();
const {
control,
register,
errors,
formState: { errors },
handleSubmit,
watch,
setError,
Expand All @@ -35,6 +34,7 @@ const CreateSecret = () => {
defaultValues: {
generateDecryptionKey: true,
secret: '',
onetime: true,
},
});
const [loading, setLoading] = useState(false);
Expand Down Expand Up @@ -93,7 +93,6 @@ const CreateSecret = () => {
/>
);
}

return (
<>
<Error
Expand All @@ -105,27 +104,32 @@ const CreateSecret = () => {
</Typography>
<form onSubmit={handleSubmit(onSubmit)}>
<Grid container justifyContent="center" paddingTop={1}>
<TextField
inputRef={register({ required: true })}
multiline={true}
<Controller
name="secret"
margin="dense"
fullWidth
label={t('create.inputSecretLabel')}
rows="4"
autoFocus={true}
onKeyDown={onKeyDown}
placeholder={t<string>('create.inputSecretPlaceholder')}
inputProps={{ spellCheck: 'false', 'data-gramm': 'false' }}
control={control}
render={({ field }) => (
<TextField
{...field}
multiline={true}
margin="dense"
fullWidth
label={t('create.inputSecretLabel')}
rows="4"
autoFocus={true}
onKeyDown={onKeyDown}
placeholder={t<string>('create.inputSecretPlaceholder')}
inputProps={{ spellCheck: 'false', 'data-gramm': 'false' }}
/>
)}
/>
<Grid container justifyContent="center" marginTop={2}>
<Expiration control={control} />
</Grid>
<Grid container alignItems="center" direction="column">
<OneTime register={register} />
<SpecifyPasswordToggle register={register} />
<OneTime control={control} />
<SpecifyPasswordToggle control={control} />
{!generateDecryptionKey && (
<SpecifyPasswordInput register={register} />
<SpecifyPasswordInput control={control} />
)}
</Grid>
<Grid container justifyContent="center">
Expand All @@ -149,18 +153,24 @@ const CreateSecret = () => {
);
};

export const OneTime = (props: { register: UseFormMethods['register'] }) => {
export const OneTime = (props: { control: Control<any> }) => {
const { t } = useTranslation();

return (
<Grid item justifyContent="center">
<FormControlLabel
control={
<Checkbox
id="enable-onetime"
<Controller
name="onetime"
inputRef={props.register()}
defaultChecked={true}
color="primary"
control={props.control}
render={({ field }) => (
<Checkbox
{...field}
id="enable-onetime"
defaultChecked={true}
color="primary"
/>
)}
/>
}
label={t('create.inputOneTimeLabel') as string}
Expand All @@ -169,43 +179,45 @@ export const OneTime = (props: { register: UseFormMethods['register'] }) => {
);
};

export const SpecifyPasswordInput = (props: {
register: UseFormMethods['register'];
}) => {
export const SpecifyPasswordInput = (props: { control: Control<any> }) => {
const { t } = useTranslation();
return (
<Grid item justifyContent="center">
<InputLabel>{t('create.inputPasswordLabel')}</InputLabel>
<TextField
fullWidth
type="text"
id="password"
inputRef={props.register()}
<Controller
name="password"
variant="outlined"
inputProps={{
autoComplete: 'off',
spellCheck: 'false',
'data-gramm': 'false',
}}
control={props.control}
render={({ field }) => (
<TextField
{...field}
fullWidth
type="text"
id="password"
variant="outlined"
inputProps={{
autoComplete: 'off',
spellCheck: 'false',
'data-gramm': 'false',
}}
/>
)}
/>
</Grid>
);
};

export const SpecifyPasswordToggle = (props: {
register: UseFormMethods['register'];
}) => {
export const SpecifyPasswordToggle = (props: { control: Control<any> }) => {
const { t } = useTranslation();
return (
<FormGroup>
<FormControlLabel
control={
<Checkbox
<Controller
name="generateDecryptionKey"
inputRef={props.register()}
defaultChecked={true}
color="primary"
control={props.control}
render={({ field }) => (
<Checkbox {...field} defaultChecked={true} color="primary" />
)}
/>
}
label={t('create.inputGenerateLabel') as string}
Expand Down
8 changes: 4 additions & 4 deletions website/src/createSecret/Upload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const Upload = () => {
uuid: '',
});

const { control, register, handleSubmit, watch } = useForm({
const { control, handleSubmit, watch } = useForm({
defaultValues: {
generateDecryptionKey: true,
secret: '',
Expand Down Expand Up @@ -127,11 +127,11 @@ const Upload = () => {
<Expiration control={control} />
</Grid>
<Grid container alignItems="center" direction="column">
<OneTime register={register} />
<SpecifyPasswordToggle register={register} />
<OneTime control={control} />
<SpecifyPasswordToggle control={control} />
<Grid container justifyContent="center">
{!generateDecryptionKey && (
<SpecifyPasswordInput register={register} />
<SpecifyPasswordInput control={control} />
)}
</Grid>
</Grid>
Expand Down
9 changes: 5 additions & 4 deletions website/src/shared/Expiration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Controller, UseFormMethods } from 'react-hook-form';
import { Control, Controller } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import {
FormControl,
Expand All @@ -8,7 +8,7 @@ import {
RadioGroup,
} from '@mui/material';

export const Expiration = (props: { control: UseFormMethods['control'] }) => {
export const Expiration = (props: { control: Control<any> }) => {
const { t } = useTranslation();
return (
<FormControl component="fieldset" margin="dense">
Expand All @@ -18,8 +18,9 @@ export const Expiration = (props: { control: UseFormMethods['control'] }) => {
control={props.control}
defaultValue="3600"
name="expiration"
as={
render={({ field }) => (
<RadioGroup
{...field}
row
sx={{
root: {
Expand Down Expand Up @@ -48,7 +49,7 @@ export const Expiration = (props: { control: UseFormMethods['control'] }) => {
label={t('expiration.optionOneWeekLabel') as string}
/>
</RadioGroup>
}
)}
/>
</FormControl>
);
Expand Down
8 changes: 4 additions & 4 deletions website/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9497,10 +9497,10 @@ react-error-overlay@^6.0.11:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==

react-hook-form@^6.15.8:
version "6.15.8"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.8.tgz#725c139d308c431c4611e4b9d85a49f01cfc0e7a"
integrity sha512-prq82ofMbnRyj5wqDe8hsTRcdR25jQ+B8KtCS7BLCzjFHAwNuCjRwzPuP4eYLsEBjEIeYd6try+pdLdw0kPkpg==
react-hook-form@^7.43.9:
version "7.43.9"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.9.tgz#84b56ac2f38f8e946c6032ccb760e13a1037c66d"
integrity sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==

react-i18next@^12.2.2:
version "12.2.2"
Expand Down