Remove POC Form primitive (#755)

* Remove POC Form primitive
aws-amplify · Nov 17, 2021 · a290e7b · a290e7b
1 parent a82e422
commit a290e7b
Show file tree

Hide file tree

Showing 13 changed files with 190 additions and 78 deletions.
diff --git a/packages/react/__tests__/exports.ts b/packages/react/__tests__/exports.ts
@@ -26,7 +26,6 @@ describe('@aws-amplify/ui-react', () => {
  "FieldGroupIcon",
  "FieldGroupIconButton",
  "Flex",
- "Form",
  "Grid",
  "Heading",
  "Icon",

diff --git a/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx b/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx
@@ -7,8 +7,9 @@ import {
 } from '@aws-amplify/ui';
 
 import { useAuthenticator } from '..';
-import { Flex, Form, Heading } from '../../..';
+import { Flex, Heading } from '../../..';
 import { ConfirmationCodeInput, ConfirmSignInFooter } from '../shared';
+import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
 
 export const ConfirmSignIn = (): JSX.Element => {
  const { _state, error, submitForm, updateForm } = useAuthenticator();
@@ -29,12 +30,19 @@ export const ConfirmSignIn = (): JSX.Element => {
  `Unexpected challengeName encountered in ConfirmSignIn: ${challengeName}`
  );
  }
+ const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+ if (isInputOrSelectElement(event.target)) {
+ let { name, type, value } = event.target;
+ if (
+ isInputElement(event.target) &&
+ type === 'checkbox' &&
+ !event.target.checked
+ ) {
+ value = undefined;
+ }
 
- const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
- let { checked, name, type, value } = event.target;
- if (type === 'checkbox' && !checked) value = undefined;
-
- updateForm({ name, value });
+ updateForm({ name, value });
+ }
  };
 
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -43,7 +51,8 @@ export const ConfirmSignIn = (): JSX.Element => {
  };
 
  return (
- <Form
+ <form
+ data-amplify-form=""
  data-amplify-authenticator-confirmsignin=""
  method="post"
  onChange={handleChange}
@@ -58,6 +67,6 @@ export const ConfirmSignIn = (): JSX.Element => {
 
  <ConfirmSignInFooter />
  </Flex>
- </Form>
+ </form>
  );
 };
diff --git a/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx b/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx
@@ -1,7 +1,9 @@
 import { translate } from '@aws-amplify/ui';
 
 import { useAuthenticator } from '../..';
-import { Button, Flex, Form, Heading } from '../../..';
+import { Button, Flex, Heading } from '../../..';
+import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
+
 import {
  ConfirmationCodeInput,
  ConfirmationCodeInputProps,
@@ -11,11 +13,19 @@ import {
 export function ConfirmSignUp() {
  const { isPending, resendCode, submitForm, updateForm } = useAuthenticator();
 
- const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
- let { checked, name, type, value } = event.target;
- if (type === 'checkbox' && !checked) value = undefined;
+ const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+ if (isInputOrSelectElement(event.target)) {
+ let { name, type, value } = event.target;
+ if (
+ isInputElement(event.target) &&
+ type === 'checkbox' &&
+ !event.target.checked
+ ) {
+ value = undefined;
+ }
 
- updateForm({ name, value });
+ updateForm({ name, value });
+ }
  };
 
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -30,7 +40,8 @@ export function ConfirmSignUp() {
 
  return (
  // TODO Automatically add these namespaces again from `useAmplify`
- <Form
+ <form
+ data-amplify-form=""
  data-amplify-authenticator-confirmsignup=""
  method="post"
  onChange={handleChange}
@@ -60,6 +71,6 @@ export function ConfirmSignUp() {
  </Button>
  </Flex>
  </Flex>
- </Form>
+ </form>
  );
 }
diff --git a/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx b/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
@@ -1,18 +1,27 @@
 import { getActorContext, SignInContext, translate } from '@aws-amplify/ui';
 
 import { useAuthenticator } from '..';
-import { Button, Flex, Form, Heading, PasswordField, Text } from '../../..';
+import { Button, Flex, Heading, PasswordField, Text } from '../../..';
+import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
 
 export const ForceNewPassword = (): JSX.Element => {
  const { _state, error, isPending, toSignIn, submitForm, updateForm } =
  useAuthenticator();
  const { validationError } = getActorContext(_state) as SignInContext;
 
- const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
- let { checked, name, type, value } = event.target;
- if (type === 'checkbox' && !checked) value = undefined;
+ const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+ if (isInputOrSelectElement(event.target)) {
+ let { name, type, value } = event.target;
+ if (
+ isInputElement(event.target) &&
+ type === 'checkbox' &&
+ !event.target.checked
+ ) {
+ value = undefined;
+ }
 
- updateForm({ name, value });
+ updateForm({ name, value });
+ }
  };
 
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -21,7 +30,8 @@ export const ForceNewPassword = (): JSX.Element => {
  };
 
  return (
- <Form
+ <form
+ data-amplify-form=""
  data-amplify-authenticator-forcenewpassword=""
  method="post"
  onChange={handleChange}
@@ -83,6 +93,6 @@ export const ForceNewPassword = (): JSX.Element => {
  {translate('Back to Sign In')}
  </Button>
  </Flex>
- </Form>
+ </form>
  );
 };
diff --git a/packages/react/src/components/Authenticator/ResetPassword/ConfirmResetPassword.tsx b/packages/react/src/components/Authenticator/ResetPassword/ConfirmResetPassword.tsx
@@ -5,12 +5,13 @@ import {
 } from '@aws-amplify/ui';
 
 import { useAuthenticator } from '..';
-import { Flex, Form, Heading, PasswordField, Text } from '../../..';
+import { Flex, Heading, PasswordField, Text } from '../../..';
 import {
  ConfirmationCodeInput,
  RemoteErrorMessage,
  TwoButtonSubmitFooter,
 } from '../shared';
+import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
 
 export const ConfirmResetPassword = (): JSX.Element => {
  const { _state, submitForm, updateForm } = useAuthenticator();
@@ -20,11 +21,19 @@ export const ConfirmResetPassword = (): JSX.Element => {
  const passwordText = translate('New password');
  const confirmPasswordLabel = translate('Confirm Password');
 
- const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
- let { checked, name, type, value } = event.target;
- if (type === 'checkbox' && !checked) value = undefined;
+ const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+ if (isInputOrSelectElement(event.target)) {
+ let { name, type, value } = event.target;
+ if (
+ isInputElement(event.target) &&
+ type === 'checkbox' &&
+ !event.target.checked
+ ) {
+ value = undefined;
+ }
 
- updateForm({ name, value });
+ updateForm({ name, value });
+ }
  };
 
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -33,7 +42,8 @@ export const ConfirmResetPassword = (): JSX.Element => {
  };
 
  return (
- <Form
+ <form
+ data-amplify-form=""
  data-amplify-authenticator-confirmresetpassword=""
  method="post"
  onSubmit={handleSubmit}
@@ -77,6 +87,6 @@ export const ConfirmResetPassword = (): JSX.Element => {
  cancelButtonText={translate('Resend Code')}
  />
  </Flex>
- </Form>
+ </form>
  );
 };
diff --git a/packages/react/src/components/Authenticator/ResetPassword/ResetPassword.tsx b/packages/react/src/components/Authenticator/ResetPassword/ResetPassword.tsx
@@ -1,20 +1,29 @@
 import { getAliasInfoFromContext, translate } from '@aws-amplify/ui';
 
 import { useAuthenticator } from '..';
-import { Flex, Form, Heading, TextField } from '../../..';
+import { Flex, Heading, TextField } from '../../..';
 import { RemoteErrorMessage, TwoButtonSubmitFooter } from '../shared';
+import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
 
 export const ResetPassword = (): JSX.Element => {
  const { isPending, submitForm, updateForm, _state } = useAuthenticator();
 
  const { label } = getAliasInfoFromContext(_state.context);
  const labelText = `Enter your ${label.toLowerCase()}`;
 
- const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
- let { checked, name, type, value } = event.target;
- if (type === 'checkbox' && !checked) value = undefined;
+ const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+ if (isInputOrSelectElement(event.target)) {
+ let { name, type, value } = event.target;
+ if (
+ isInputElement(event.target) &&
+ type === 'checkbox' &&
+ !event.target.checked
+ ) {
+ value = undefined;
+ }
 
- updateForm({ name, value });
+ updateForm({ name, value });
+ }
  };
 
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -23,7 +32,8 @@ export const ResetPassword = (): JSX.Element => {
  };
 
  return (
- <Form
+ <form
+ data-amplify-form=""
  data-amplify-authenticator-resetpassword=""
  method="post"
  onChange={handleChange}
@@ -57,6 +67,6 @@ export const ResetPassword = (): JSX.Element => {
  }
  />
  </Flex>
- </Form>
+ </form>
  );
 };
diff --git a/packages/react/src/components/Authenticator/SetupTOTP/SetupTOTP.tsx b/packages/react/src/components/Authenticator/SetupTOTP/SetupTOTP.tsx
@@ -5,7 +5,9 @@ import QRCode from 'qrcode';
 import { useEffect, useState } from 'react';
 
 import { useAuthenticator } from '..';
-import { Flex, Form, Heading, Image } from '../../..';
+import { Flex, Heading, Image } from '../../..';
+import { isInputOrSelectElement, isInputElement } from '../../../helpers/utils';
+
 import {
  ConfirmationCodeInput,
  ConfirmSignInFooter,
@@ -44,11 +46,19 @@ export const SetupTOTP = (): JSX.Element => {
  generateQRCode(user);
  }, [user]);
 
- const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
- let { checked, name, type, value } = event.target;
- if (type === 'checkbox' && !checked) value = undefined;
+ const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+ if (isInputOrSelectElement(event.target)) {
+ let { name, type, value } = event.target;
+ if (
+ isInputElement(event.target) &&
+ type === 'checkbox' &&
+ !event.target.checked
+ ) {
+ value = undefined;
+ }
 
- updateForm({ name, value });
+ updateForm({ name, value });
+ }
  };
 
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -57,7 +67,8 @@ export const SetupTOTP = (): JSX.Element => {
  };
 
  return (
- <Form
+ <form
+ data-amplify-form=""
  data-amplify-authenticator-setup-totp=""
  method="post"
  onChange={handleChange}
@@ -85,6 +96,6 @@ export const SetupTOTP = (): JSX.Element => {
 
  <ConfirmSignInFooter />
  </Flex>
- </Form>
+ </form>
  );
 };
diff --git a/packages/react/src/components/Authenticator/SignIn/SignIn.tsx b/packages/react/src/components/Authenticator/SignIn/SignIn.tsx
@@ -1,9 +1,10 @@
 import { translate } from '@aws-amplify/ui';
 
 import { useAuthenticator } from '..';
-import { Button, Flex, Form, Heading, PasswordField, View } from '../../..';
+import { Button, Flex, PasswordField, View } from '../../..';
 import { FederatedSignIn } from '../FederatedSignIn';
 import { RemoteErrorMessage, UserNameAlias } from '../shared';
+import { isInputElement, isInputOrSelectElement } from '../../../helpers/utils';
 
 export function SignIn() {
  const {
@@ -15,11 +16,19 @@ export function SignIn() {
  updateForm,
  } = useAuthenticator();
 
- const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
- let { checked, name, type, value } = event.target;
- if (type === 'checkbox' && !checked) value = undefined;
+ const handleChange = (event: React.FormEvent<HTMLFormElement>) => {
+ if (isInputOrSelectElement(event.target)) {
+ let { name, type, value } = event.target;
+ if (
+ isInputElement(event.target) &&
+ type === 'checkbox' &&
+ !event.target.checked
+ ) {
+ value = undefined;
+ }
 
- updateForm({ name, value });
+ updateForm({ name, value });
+ }
  };
 
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
@@ -31,7 +40,8 @@ export function SignIn() {
  <View>
  <Header />
 
- <Form
+ <form
+ data-amplify-form=""
  data-amplify-authenticator-signin=""
  method="post"
  onSubmit={handleSubmit}
@@ -66,7 +76,7 @@ export function SignIn() {
  {translate('Sign in')}
  </Button>
  </Flex>
- </Form>
+ </form>
 
  <Footer />
  </View>