Make it easier to reorder fields in the sign up form

[rishabhpoddar]

Related to conversation https://discord.com/channels/603466164219281420/644849840475602944/867716322334867476

At the moment, we need to use @emotion/react for it and need to override the sign up component and do:

css={{
  form: {
    display: "flex",
    flexDirection: "column",
    "& > div:nth-of-type(3)": { // first name field (for example)
      order: -1
    },
  }
}}>

---

This is annoying and unclear. We would ideally like an API like:

signUpForm: {
   formFields: [
      {
         id: "name",
         label: "Full Name",
         placeholder: "e.g Jane Doe"
       },
       {
          id: "email"
       },
       {
          id: "password"
       }
   ],
},

Notice that we do not have to provide any other field in the email and password objects. Just their ids.

[nickmanks]

Just tried this and it worked nicely for me:

EmailPasswordSignUp_Override: ({ DefaultComponent, ...props }) => {
      return (
              <DefaultComponent
                    {...props}
                    formFields={[
                       props.formFields.find(({id}) => id === 'name'),
                       props.formFields.find(({id}) => id === 'email'),
                       props.formFields.find(({id}) => id === 'password'),
                    ]}
              />
       );
},

[rishabhpoddar]

This has been solved now: https://supertokens.com/docs/thirdpartyemailpassword/common-customizations/signup-form/customising-each-form-field#changing-field-order--pre