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.

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

feat: add input component as types, simplify event handlers - emailpassword recipe #752

Merged
merged 52 commits into from
Nov 3, 2023
Merged
Show file tree
Hide file tree
Changes from 41 commits
Commits
Show all changes
52 commits
Select commit Hold shift + click to select a range
a2f1d7e
Add inputComponent to exposed types
amitbadala Oct 20, 2023
d4ab51f
Add inputComponent to normalised fields
amitbadala Oct 20, 2023
2e8c67d
For testing only - use custom type definition for inputComponent
amitbadala Oct 20, 2023
578815a
Input component already present in FormFieldThemeProps
amitbadala Oct 20, 2023
fcf51e1
Testing if git package is getting installed correctly
amitbadala Oct 20, 2023
1b747f5
Run build for previous commits
amitbadala Oct 20, 2023
e2b95de
Remove inputComp from NormalizedFormField
amitbadala Oct 20, 2023
52e7dab
Add tests for custom fields
amitbadala Oct 23, 2023
eb36b36
Remove testing ele
amitbadala Oct 24, 2023
e6fc942
Move the custom fields tests into existing describe
amitbadala Oct 24, 2023
8514575
Update dropdown values to avoid confusion
amitbadala Oct 24, 2023
ccd46cc
Add helper func to set dropdown, better test title, use existing desc…
amitbadala Oct 24, 2023
16b38e5
Use strict equal
amitbadala Oct 24, 2023
9136be9
Update request
amitbadala Oct 24, 2023
e365a13
A seperate func to fetch custom comp not required
amitbadala Oct 24, 2023
c8b31db
Move inputComponent to signup types
amitbadala Oct 24, 2023
31d6e29
Cleanup unwanted imports
amitbadala Oct 24, 2023
8d60068
Move inputComponent to signup types
amitbadala Oct 25, 2023
809d396
Clean types
amitbadala Oct 25, 2023
b3af734
Update build files
amitbadala Oct 25, 2023
fb99461
Use explicit values in validate func
amitbadala Oct 25, 2023
42cba3f
Minor cleanup of types
amitbadala Oct 25, 2023
8bae273
Better type names
amitbadala Oct 25, 2023
2023dce
Props suggestions working for inputComponent
amitbadala Oct 25, 2023
7dc66b8
Enforce strict string check on form values, now onChange function for…
amitbadala Oct 26, 2023
3cc4ec8
Update based on the new onChange func
amitbadala Oct 26, 2023
a13ddc1
Ability to add default value with getDefaultValue prop
amitbadala Oct 26, 2023
2be7cfa
Handle if getDefaultValue is not a function
amitbadala Oct 26, 2023
2480ebd
instead of form submit apply type test within onChange function itself
amitbadala Oct 26, 2023
d574fc0
Add tests for default value
amitbadala Oct 26, 2023
883662f
Remove unwanted abort
amitbadala Oct 27, 2023
494c5c0
Testing email-verification workflow
amitbadala Oct 27, 2023
e759f13
Reverting onChange changes
amitbadala Oct 27, 2023
90a9344
onChange function to accept only values
amitbadala Oct 27, 2023
7e6a3ec
Initialize fieldstates at the start
amitbadala Oct 27, 2023
bcef516
Remove useEffect
amitbadala Oct 27, 2023
7241f6a
Fix race conditions when setting default value
amitbadala Oct 30, 2023
c9df6d9
Add custom default fields to typescript example, plus add tests to sh…
amitbadala Oct 30, 2023
c305fff
Add tests for incorrect default props in formFields
amitbadala Oct 30, 2023
3f8d094
Add tests for incorrect usage of onChange prop
amitbadala Oct 30, 2023
a6d499d
Add change log
amitbadala Oct 30, 2023
284c6fa
Wrap ternary opeators into seperate func for better readibility
amitbadala Oct 30, 2023
d4c53a5
Wrap inputComponent in a serperate component to avoid unecessary rere…
amitbadala Oct 30, 2023
259699a
Add change log feedbacks
amitbadala Oct 31, 2023
492fee9
Better variable names, include formfields directly in typescript example
amitbadala Oct 31, 2023
329aee4
Add more tests for default & onChange func, updated typescript file t…
amitbadala Oct 31, 2023
9aa6b21
Add more test, which intercepts request payload
amitbadala Nov 1, 2023
e23f1d8
Cleanup comments
amitbadala Nov 1, 2023
a50d64b
Minor formatting
amitbadala Nov 1, 2023
1339645
Minor fix
amitbadala Nov 1, 2023
7d1c7a2
Clean up helper
amitbadala Nov 3, 2023
ffd867f
Update change log & versions
amitbadala Nov 3, 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
33 changes: 33 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,39 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html)

## [0.35.7] - 2023-10-30
rishabhpoddar marked this conversation as resolved.
Show resolved Hide resolved

### Added

- Introduced the capability to utilize custom components in the Email-Password signup form fields by exposing inputComponent types.
rishabhpoddar marked this conversation as resolved.
Show resolved Hide resolved
- Implemented the functionality to assign default values to the form fields in the Email-Password Sign Up process.
rishabhpoddar marked this conversation as resolved.
Show resolved Hide resolved
- Enhanced the onChange function to operate independently without requiring an id field.
rishabhpoddar marked this conversation as resolved.
Show resolved Hide resolved
- Accompanied the new features with comprehensive tests to ensure their proper functionality and reliability.
rishabhpoddar marked this conversation as resolved.
Show resolved Hide resolved

Following is an example of how to use above features.

```tsx
EmailPassword.init({
signInAndUpFeature: {
signUpForm: {
formFields: [
{
id: "ratings",
label: "Ratings",
getDefaultValue: () => "best",
rishabhpoddar marked this conversation as resolved.
Show resolved Hide resolved
inputComponent: ({ value, name, onChange }) => (
<select value={value} name={name} onChange={(e) => onChange(e.target.value)} placeholder="Add Ratings">
rishabhpoddar marked this conversation as resolved.
Show resolved Hide resolved
<option value="" disabled hidden>
Select an option
</option>
<option value="good">Good</option>
<option value="better">Better</option>
<option value="best">Best</option>
rishabhpoddar marked this conversation as resolved.
Show resolved Hide resolved
</select>
)}
rishabhpoddar marked this conversation as resolved.
Show resolved Hide resolved
...
rishabhpoddar marked this conversation as resolved.
Show resolved Hide resolved
```

## [0.35.6] - 2023-10-16

### Test changes
Expand Down
123 changes: 122 additions & 1 deletion examples/for-tests/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,120 @@ const formFields = [
},
];

const formFieldsWithDefault = [
{
id: "country",
label: "Your Country",
placeholder: "Where do you live?",
optional: true,
getDefaultValue: () => "India",
},
{
id: "ratings",
label: "Ratings",
getDefaultValue: () => "best",
inputComponent: ({ value, name, onChange }) => (
<select value={value} name={name} onChange={(e) => onChange(e.target.value)} placeholder="Add Ratings">
<option value="" disabled hidden>
Select an option
</option>
<option value="good">Good</option>
<option value="better">Better</option>
<option value="best">Best</option>
</select>
),
optional: true,
},
];
rishabhpoddar marked this conversation as resolved.
Show resolved Hide resolved

const incorrectFormFields = [
{
id: "country",
label: "Your Country",
placeholder: "Where do you live?",
optional: true,
getDefaultValue: () => 23, // return should be a string
},
{
id: "ratings",
label: "Ratings",
getDefaultValue: "best", // should be function
inputComponent: ({ value, name, onChange }) => (
<select value={value} name={name} onChange={(e) => onChange(e.target.value)} placeholder="Add Ratings">
<option value="" disabled hidden>
Select an option
</option>
<option value="good">Good</option>
<option value="better">Better</option>
<option value="best">Best</option>
</select>
),
optional: true,
},
{
id: "terms",
label: "",
optional: false,
inputComponent: ({ name, onChange }) => (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "left",
}}>
<input name={name} type="checkbox" onChange={(e) => onChange(e.target.checked)}></input>
<span style={{ marginLeft: 5 }}>I agree to the terms and conditions</span>
</div>
),
validate: async (value) => {
if (value === "true") {
return undefined;
}
return "Please check Terms and conditions";
},
},
];

const customFields = [
{
id: "ratings",
label: "Ratings",
inputComponent: ({ value, name, onChange }) => (
<select value={value} name={name} onChange={(e) => onChange(e.target.value)} placeholder="Add Ratings">
<option value="" disabled hidden>
Select an option
</option>
<option value="good">Good</option>
<option value="better">Better</option>
<option value="best">Best</option>
</select>
),
optional: true,
},
{
id: "terms",
label: "",
optional: false,
inputComponent: ({ name, onChange }) => (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "left",
}}>
<input name={name} type="checkbox" onChange={(e) => onChange(e.target.checked.toString())}></input>
<span style={{ marginLeft: 5 }}>I agree to the terms and conditions</span>
</div>
),
validate: async (value) => {
if (value === "true") {
return undefined;
}
return "Please check Terms and conditions";
},
},
];

const testContext = getTestContext();

let recipeList = [
Expand Down Expand Up @@ -637,7 +751,14 @@ function getEmailPasswordConfigs({ disableDefaultUI }) {
style: theme,
privacyPolicyLink: "https://supertokens.com/legal/privacy-policy",
termsOfServiceLink: "https://supertokens.com/legal/terms-and-conditions",
formFields,
formFields:
localStorage.getItem("SHOW_INCORRECT_FIELDS") === "YES"
? incorrectFormFields
: localStorage.getItem("SHOW_DEFAULT_FIELDS") === "YES"
? formFieldsWithDefault
: localStorage.getItem("SHOW_CUSTOM_FIELDS") === "YES"
? customFields
: formFields,
rishabhpoddar marked this conversation as resolved.
Show resolved Hide resolved
},
},
});
Expand Down
41 changes: 34 additions & 7 deletions lib/build/emailpassword-shared7.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 2 additions & 8 deletions lib/build/passwordless-shared3.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading
Loading