Merge pull request #4149 from mzedel/fix/signup-form-data

Fix/signup form data
mendersoftware · Nov 1, 2023 · 8aeff1b · 8aeff1b
2 parents b215cb9 + 52d1fb7
commit 8aeff1b
Show file tree

Hide file tree

Showing 15 changed files with 23 additions and 36 deletions.
diff --git a/src/js/components/common/forms/form.js b/src/js/components/common/forms/form.js
@@ -11,7 +11,7 @@
 //    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 //    See the License for the specific language governing permissions and
 //    limitations under the License.
-import React from 'react';
+import React, { useEffect } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import { Button } from '@mui/material';
@@ -104,16 +104,23 @@ export const Form = ({
   defaultValues = {},
   handleCancel,
   id,
+  initialValues = {},
   onSubmit,
   showButtons,
-  submitButtonId,
   submitLabel
 }) => {
   const methods = useForm({ mode: 'onChange', defaultValues });
   const {
     handleSubmit,
-    formState: { isValid }
+    formState: { isValid },
+    setValue
   } = methods;
+
+  useEffect(() => {
+    Object.entries(initialValues).map(([key, value]) => setValue(key, value));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(initialValues), setValue]);
+
   return (
     <FormProvider {...methods}>
       <form autoComplete={autocomplete} className={className} id={id} noValidate onSubmit={handleSubmit(onSubmit)}>
@@ -125,7 +132,7 @@ export const Form = ({
                 Cancel
               </Button>
             )}
-            <Button variant="contained" type="submit" disabled={!isValid} id={submitButtonId} color={buttonColor}>
+            <Button variant="contained" type="submit" disabled={!isValid} color={buttonColor}>
               {submitLabel}
             </Button>
           </div>

diff --git a/src/js/components/login/__snapshots__/login.test.js.snap b/src/js/components/login/__snapshots__/login.test.js.snap
@@ -1109,7 +1109,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-20:focus::-ms-input-
             <button
               class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium emotion-3"
               disabled=""
-              id="login_button"
               tabindex="-1"
               type="submit"
             >

diff --git a/src/js/components/login/__snapshots__/password.test.js.snap b/src/js/components/login/__snapshots__/password.test.js.snap
@@ -510,7 +510,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
         <button
           class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium emotion-6"
           disabled=""
-          id="password_button"
           tabindex="-1"
           type="submit"
         >

diff --git a/src/js/components/login/__snapshots__/passwordreset.test.js.snap b/src/js/components/login/__snapshots__/passwordreset.test.js.snap
@@ -739,7 +739,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-4:focus::-ms-input-p
         <button
           class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium emotion-19"
           disabled=""
-          id="password_button"
           tabindex="-1"
           type="submit"
         >

diff --git a/src/js/components/login/login.js b/src/js/components/login/login.js
@@ -196,7 +196,7 @@ export const Login = () => {
           <div className="flexbox column" id="login-box">
             <h1 className="flexbox centered">Welcome back!</h1>
             {isHosted && <OAuthHeader type="Log in" buttonProps={{ onClick: onOAuthClick }} />}
-            <Form className={classes.form} showButtons={true} buttonColor="primary" onSubmit={onLoginClick} submitLabel="Log in" submitButtonId="login_button">
+            <Form className={classes.form} showButtons={true} buttonColor="primary" onSubmit={onLoginClick} submitLabel="Log in">
               <TextInput hint="Your email" label="Your email" id="email" required={true} validations="isLength:1,isEmail" />
               <PasswordInput className="margin-bottom-small" id="password" label="Password" required={true} />
               {isHosted ? (

diff --git a/src/js/components/login/password.js b/src/js/components/login/password.js
@@ -62,7 +62,7 @@ export const Password = () => {
         </p>
       ))}
       {!confirm && (
-        <Form showButtons={true} buttonColor="primary" onSubmit={handleSubmit} submitLabel="Send password reset link" submitButtonId="password_button">
+        <Form showButtons={true} buttonColor="primary" onSubmit={handleSubmit} submitLabel="Send password reset link">
           <TextInput hint="Your email" label="Your email" id="email" required={true} validations="isLength:1,isEmail" />
         </Form>
       )}

diff --git a/src/js/components/login/passwordreset.js b/src/js/components/login/passwordreset.js
@@ -38,7 +38,7 @@ export const PasswordReset = () => {
             <br />
             Enter a new, secure password of your choice below.
           </p>
-          <Form showButtons={true} buttonColor="primary" onSubmit={handleSubmit} submitLabel="Save password" submitButtonId="password_button">
+          <Form showButtons={true} buttonColor="primary" onSubmit={handleSubmit} submitLabel="Save password">
             <PasswordInput id="password" label="Password *" validations="isLength:8" create={true} generate={false} required={true} />
             <PasswordInput id="password_confirmation" label="Confirm password *" validations="isLength:8" required={true} />
           </Form>

diff --git a/src/js/components/login/signup.js b/src/js/components/login/signup.js
@@ -164,12 +164,12 @@ export const Signup = () => {
       <div className={`${classes.background} ${isStarting ? 'two-columns' : classes.orgData}`} id="signup-box">
         <div>
           <Form
-            defaultValues={{ email, tos, marketing, name: organization }}
-            showButtons={!(isStarting || loading)}
             buttonColor="primary"
+            defaultValues={{ email: '', tos: false, marketing: false, name: '' }}
+            initialValues={{ email, tos, marketing, name: organization }}
             onSubmit={handleSignup}
+            showButtons={!(isStarting || loading)}
             submitLabel={isStarting ? 'Sign up' : 'Complete signup'}
-            submitButtonId="login_button"
           >
             {loading ? <Loader show style={{ marginTop: '40vh' }} /> : steps[step]}
           </Form>

diff --git a/src/js/components/settings/user-management/__snapshots__/userform.test.js.snap b/src/js/components/settings/user-management/__snapshots__/userform.test.js.snap
@@ -1603,7 +1603,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-32:focus::-ms-input-
             <button
               class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium emotion-37"
               disabled=""
-              id="submit_button"
               tabindex="-1"
               type="submit"
             >

diff --git a/src/js/components/settings/user-management/selfusermanagement.js b/src/js/components/settings/user-management/selfusermanagement.js
@@ -90,15 +90,7 @@ export const SelfUserManagement = () => {
           )}
         </div>
       ) : (
-        <Form
-          defaultValues={{ email }}
-          onSubmit={editSubmit}
-          handleCancel={handleEmail}
-          submitLabel="Save"
-          showButtons={editEmail}
-          buttonColor="secondary"
-          submitButtonId="submit_email"
-        >
+        <Form defaultValues={{ email }} onSubmit={editSubmit} handleCancel={handleEmail} submitLabel="Save" showButtons={editEmail} buttonColor="secondary">
           <TextInput disabled={false} hint="Email" id="email" InputLabelProps={{ shrink: !!email }} label="Email" validations="isLength:1,isEmail" />
           <PasswordInput id="current_password" label="Current password *" validations={`isLength:8,isNot:${email}`} required={true} />
         </Form>
@@ -114,14 +106,7 @@ export const SelfUserManagement = () => {
         ) : (
           <>
             <h3 className="margin-top margin-bottom-none">Change password</h3>
-            <Form
-              onSubmit={editSubmit}
-              handleCancel={handlePass}
-              submitLabel="Save"
-              submitButtonId="submit_pass"
-              buttonColor="secondary"
-              showButtons={editPass}
-            >
+            <Form onSubmit={editSubmit} handleCancel={handlePass} submitLabel="Save" buttonColor="secondary" showButtons={editPass}>
               <PasswordInput id="current_password" label="Current password *" validations={`isLength:8,isNot:${email}`} required />
               <PasswordInput className="edit-pass" id="password" label="Password *" validations={`isLength:8,isNot:${email}`} create generate required />
               <PasswordInput id="password_confirmation" label="Confirm password *" validations={`isLength:8,isNot:${email}`} required />

diff --git a/...ponents/settings/user-management/twofactorauth-steps/__snapshots__/authsetup.test.js.snap b/...ponents/settings/user-management/twofactorauth-steps/__snapshots__/authsetup.test.js.snap
@@ -670,7 +670,6 @@ label[data-shrink=false]+.MuiInputBase-formControl .emotion-3:focus::-ms-input-p
                 <button
                   class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium emotion-5"
                   disabled=""
-                  id="confirm-button"
                   tabindex="-1"
                   type="submit"
                 >

diff --git a/src/js/components/settings/user-management/twofactorauth-steps/authsetup.js b/src/js/components/settings/user-management/twofactorauth-steps/authsetup.js
@@ -86,7 +86,7 @@ export const AuthSetup = ({ currentUser, handle2FAState, has2FA, onClose, qrImag
                 </div>
               ) : (
                 <>
-                  <Form showButtons={!validating2fa} buttonColor="primary" onSubmit={validate2faSetup} submitLabel="Verify" submitButtonId="confirm-button">
+                  <Form showButtons={!validating2fa} buttonColor="primary" onSubmit={validate2faSetup} submitLabel="Verify">
                     <TextInput hint="Verification code" label="Verification code" id="token2fa" validations="isLength:6,isNumeric" required={true} />
                   </Form>
                   {validating2fa && (

diff --git a/src/js/components/settings/user-management/twofactorauth-steps/emailverification.js b/src/js/components/settings/user-management/twofactorauth-steps/emailverification.js
@@ -56,7 +56,7 @@ export const EmailVerification = ({ activationCode, verifyEmailComplete, verifyE
           <Loader show={isLoading} />
         </div>
       ) : (
-        <Form showButtons={isVerifying} buttonColor="primary" onSubmit={completeVerification} submitLabel="Verify" submitButtonId="confirm-button">
+        <Form showButtons={isVerifying} buttonColor="primary" onSubmit={completeVerification} submitLabel="Verify">
           <TextInput hint="Verification code" label="Verification code" id="emailVerification" required={true} value={activationCode} />
         </Form>
       )}

diff --git a/src/js/components/settings/user-management/userform.js b/src/js/components/settings/user-management/userform.js
@@ -157,7 +157,7 @@ export const UserForm = ({ closeDialog, currentUser, canManageUsers, isEnterpris
     <Dialog open={true} fullWidth={true} maxWidth="sm">
       <DialogTitle>Create new user</DialogTitle>
       <DialogContent style={{ overflowY: 'initial' }}>
-        <Form onSubmit={onSubmit} handleCancel={closeDialog} submitLabel="Create user" submitButtonId="submit_button" showButtons={true} autocomplete="off">
+        <Form onSubmit={onSubmit} handleCancel={closeDialog} submitLabel="Create user" showButtons={true} autocomplete="off">
           <TextInput hint="Email" label="Email" id="email" validations="isLength:1,isEmail" required autocomplete="off" />
           <PasswordInput
             id="password"

diff --git a/src/less/main.less b/src/less/main.less
@@ -944,7 +944,7 @@ div:focus {
     text-align: left;
     font-size: 12px;
   }
-  .flexbox:has(>#login_button), .flexbox:has(>#password_button) {
+  > form > .flexbox:has(button[type="submit"]) {
     justify-content: left !important;
   }
 }