chore: [VAN-948] Add name and id to the forms (#573)

src/forgot-password/ForgotPasswordPage.jsx

@@ -97,7 +97,7 @@ const ForgotPasswordPage = (props) => {
                     { siteName: getConfig().SITE_NAME })}
                   </title>
                 </Helmet>
-                <Form className="mw-xs">
+                <Form id="forget-password-form" name="forget-password-form" className="mw-xs">
                   <ForgotPasswordAlert email={props.email} emailError={errors.email} status={status} />
                   <h2 className="h4">
                     {intl.formatMessage(messages['forgot.password.page.heading'])}
@@ -116,6 +116,8 @@ const ForgotPasswordPage = (props) => {
                     helpText={[intl.formatMessage(messages['forgot.password.email.help.text'], { platformName })]}
                   />
                   <StatefulButton
+                    id="submit-forget-password"
+                    name="submit-forget-password"
                     type="submit"
                     variant="brand"
                     className="login-button-width"
@@ -129,6 +131,7 @@ const ForgotPasswordPage = (props) => {
                   />
                   <Hyperlink
                     id="forgot-password"
+                    name="forgot-password"
                     className="ml-4 font-weight-500 text-body"
                     destination={supportUrl}
                     onClick={e => {

src/login/LoginPage.jsx

@@ -224,7 +224,7 @@ class LoginPage extends React.Component {
           {submitState === DEFAULT_STATE && this.state.isSubmitted ? windowScrollTo({ left: 0, top: 0, behavior: 'smooth' }) : null}
           {activationMsgType && <AccountActivationMessage messageType={activationMsgType} />}
           {this.props.resetPassword && !this.props.loginError ? <ResetPasswordSuccess /> : null}
-          <Form>
+          <Form name="sign-in-form" id="sign-in-form">
             <FormGroup
               name="emailOrUsername"
               value={this.state.emailOrUsername}
@@ -243,6 +243,8 @@ class LoginPage extends React.Component {
               floatingLabel={intl.formatMessage(messages['login.password.label'])}
             />
             <StatefulButton
+              name="sign-in"
+              id="sign-in"
               type="submit"
               variant="brand"
               className="login-button-width"
@@ -256,6 +258,7 @@ class LoginPage extends React.Component {
             />
             <Link
               id="forgot-password"
+              name="forgot-password"
               className="btn btn-link font-weight-500 text-body"
               to={updatePathWithQueryParams(RESET_PAGE)}
               onClick={this.handleForgotPasswordLinkClickEvent}

src/register/RegistrationPage.jsx

@@ -552,7 +552,7 @@ class RegistrationPage extends React.Component {
               <h4 className="mt-4 mb-4">{intl.formatMessage(messages['registration.using.tpa.form.heading'])}</h4>
             </>
           )}
-          <Form>
+          <Form id="registration-form" name="registration-form">
             <FormGroup
               name="name"
               value={this.state.name}
@@ -649,6 +649,8 @@ class RegistrationPage extends React.Component {
               />
             </div>
             <StatefulButton
+              name="register-user"
+              id="register-user"
               type="submit"
               variant="brand"
               className="register-stateful-button-width mt-4 mb-4"

src/reset-password/ResetPasswordPage.jsx

@@ -174,7 +174,7 @@ const ResetPasswordPage = (props) => {
               <ResetPasswordFailure errorCode={errorCode} errorMsg={props.errorMsg} />
               <h4>{intl.formatMessage(messages['reset.password'])}</h4>
               <p className="mb-4">{intl.formatMessage(messages['reset.password.page.instructions'])}</p>
-              <Form>
+              <Form id="set-reset-password-form" name="set-reset-password-form">
                 <PasswordField
                   name="newPassword"
                   value={newPassword}
@@ -194,6 +194,8 @@ const ResetPasswordPage = (props) => {
                   floatingLabel={intl.formatMessage(messages['confirm.password.label'])}
                 />
                 <StatefulButton
+                  id="submit-new-password"
+                  name="submit-new-password"
                   type="submit"
                   variant="brand"
                   className="stateful-button-width"

src/welcome/WelcomePage.jsx

@@ -162,7 +162,7 @@ const WelcomePage = (props) => {
               <p>{intl.formatMessage(messages['welcome.page.error.message'])}</p>
             </Alert>
           ) : null}
-          <Form>
+          <Form id="welcome-page-profile-form" name="welcome-page-profile-form">
             <Form.Group controlId="levelOfEducation">
               <Form.Control
                 as="select"
@@ -217,6 +217,8 @@ const WelcomePage = (props) => {
             </span>
             <div className="d-flex mt-4">
               <StatefulButton
+                name="submit-profile"
+                id="submit-profile"
                 type="submit"
                 variant="brand"
                 className="login-button-width"
@@ -229,6 +231,8 @@ const WelcomePage = (props) => {
                 onMouseDown={(e) => e.preventDefault()}
               />
               <StatefulButton
+                id="skip-profile"
+                name="skip-profile"
                 className="text-gray-700 font-weight-500"
                 type="submit"
                 variant="link"