Skip to content

Commit 3653c8f

Browse files
wlee221calebpollmanErikCHioanabrooks
authored
feat(react): AccountSettings component preview release (#3108)
* ci: setup tests on `account-settings/main` feature branch (#2796) * Set up test on feature branch * Fix secrets * Fix test name * Change test name * Update .github/workflows/publish-account-settings.yml * feat(hooks): update `useAuth` to handle more auth hub events (#2795) * handle additional auth hub events * Update packages/react/src/hooks/__tests__/useAuth.test.ts * Update packages/react/src/hooks/useAuth.ts * Remove extraneous dependency * add default case + wrap switch blocks in curly brackets * Use scoped switch body * Defer mockImplementation to test cases * feat(environments): add `optional-totp-and-sms-mfa` environment (#2872) * Add optional mfa environment * fix typo * artifact update * Update README with correct info * Update environments/auth/auth-with-optional-totp-and-sms-mfa/README.md * Update environments/auth/auth-with-optional-totp-and-sms-mfa/README.md * feat(account-settings): ChangePassword component (#2885) * Initial commit * Implement form handling * Reorder component * Add unit test * Add button and error as default components * Add error message test * TypeName initial change * Update exports snapshot * Remove unrelated types * Clean up rendered DOM * Default error to error variation * Revert unrelated changes * Move all primitive props to parent component * setError to null on success * Update packages/react/src/components/AccountSettings/types.ts * Remove unrelated change * Add comment about generics * Fix exports * Apply comments from @dbanksdesign * Update packages/react/src/components/AccountSettings/types.ts Co-authored-by: Caleb Pollman <[email protected]> * this shouldn't be here yet * Update packages/react/src/components/AccountSettings/ChangePassword/__tests__/ChangePassword.test.tsx * Apply comments from @calebpollman * Pass errorMessage as children * Add logger around Auth call * null-check errorMessage before setting it * Add 'Notifications' to LoggerCategory Co-authored-by: Caleb Pollman <[email protected]> * getCategoryLogger -> getLogger * Move around unit test comment Co-authored-by: Caleb Pollman <[email protected]> * refactor(account-settings): share `<ValidationErrors />` (#2908) * Share common Authenticator utils * ValidationErrors unit test * Remove extra function layer * defaultPasswordValidator unit test * Update password validator usage * Remove `.only` and fix equality assertions * return null from validator, and add unit test * Test against null instead of [] * Revert defaultPasswordValidator change * Remove stale export * feat(account-settings): add DeleteUser component (#2927) * initial commit * Initial commit * Update index.ts * Update type + comment * Add `IN_PROGRESS` state * fix logger * Add unit tests * Update defaultComponents to include submit button * Add examples * Update snapshot * Update packages/react/src/components/AccountSettings/DeleteUser/defaultComponents.tsx * Add comment around custom handler * Use logger util * isInProgress => isDisabled * Better state enum naming * onConfirmDelete -> onConfirm * CONFIRMING -> CONFIRMATION * Add error state * clear error message on submit * Reorder early return statements * Revert unrelated change * Mark overridable prop as optional * feat: add password validation to `ConfirmPassword` (#2900) * Initial commit * Revert initial draft * confirm password initial draft * Use shared type * add validationErrors prop * Render ValidationErrors * Validate onBlur * Add confirmPassword logic * Remove unnecessary memo * Don't export internal validators * Revert "Don't export internal validators" This reverts commit 7a2254c. * FieldValidator => PasswordValidator * Remove unnecessary classname * Remove unused variable * util for isDisabled * rename validateField => runValidation * Update snapshot * Remove unneeded waitFor * share default password validator * Consolidate defaultPasswordValidator * Remove unrelated changes * disable form until all three forms are present * Remove extra util funciton * remove validator.ts util file * undo renaming * Remove unnecessary type file * Remove unrelated file pt.2 * Update confirmPassword to return string[] * Remove util * Remove unused util * Minor wording edit * Share ValidationErrors * use shared ValidationErrors * Share common Authenticator utils * ValidationErrors unit test * Remove extra function layer * defaultPasswordValidator unit test * Update password validator usage * Actually use DefaultConfirmPassword... * Update unit tests with new features * Memoize passwordSetting * Remove `.only` and fix equality assertions * return null from validator, and add unit test * Test against null instead of [] * ChangePassword now takes in multiple validators * Revert defaultService changes * Revert more unrelated changes * This works! * minor optimizations * Update unit test * Alphabetize imports * rename event -> validationMode * @aws-amplify/ui unit tests * Rename handler => validate * Remove unused type * Add comment * More comments! * Simplify getIsDisabled * Remove out-of-place comment * Use `FormEventType` * Rename `FormEventType` -> `InputEventType` * Update packages/ui/src/helpers/accountSettings/validators/util.ts Co-authored-by: Caleb Pollman <[email protected]> * Use object as inputs * create type for organizing password zeroconfig * Use reduce * Update packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx Co-authored-by: Caleb Pollman <[email protected]> * Rename validate => validator * Consoldiate validator utils * align get*Validators names * Variable name improvement * Optimize blurredFields logic * Add jsdoc comment * Use common DefaultPasswordField * Update snapshot * retrigger ci * Change BlurredFields to an array * Rename ValidatorSpec => ValidatiorOptions * Remove extraneous ternary * Share ValidateParams type * use ref to store blurredFields * Early return from getIsValid util Co-authored-by: Caleb Pollman <[email protected]> * chore(ci): Enable publish (#2984) * feat(account-settings): Add ConfigureTOTP component (#2969) * useAuth improvement * Initial draft * Flex styles + example * Update test * Prevent `generateQRCode` from running multiple times * Unit tests * Update examples/next/pages/ui/components/account-settings/configure-totp/index.page.tsx * Update examples/next/pages/ui/components/account-settings/configure-totp/index.page.tsx * Alphabetize imports * Better disable form logic * Set `hasInit` to true * Apply inline code suggestions from @joebuono and @calebpollman Co-authored-by: Caleb Pollman <[email protected]> * Declare QRCode dimensions constants * Use act to wait for state updates * Refactor `hasInit`, and combine secretKey states * Combine `isDisabled` with `errorMessage` * Default values for verifyTOTPStatus * Update packages/react/src/components/AccountSettings/ConfigureTOTP/types.ts Co-authored-by: Caleb Pollman <[email protected]> * Update packages/react/src/components/AccountSettings/ConfigureTOTP/ConfigureTOTP.tsx Co-authored-by: Caleb Pollman <[email protected]> Co-authored-by: Caleb Pollman <[email protected]> * docs(account-settings): starting docs (#3084) * Update links * Barebone pages * Update description * Use DeveloperPreview * Move ReactPropsTable to `@components` * Remove unnecessary space * Update index.page.mdx * Revert "feat(account-settings): Add ConfigureTOTP component" (#3083) * Revert "feat(account-settings): Add ConfigureTOTP component (#2969)" This reverts commit 8a65f82. * Revert fetchCurrentUser change * fix(ci): add storage secrets to account settings workflows (#3115) * feat(account-settings): enable component override for <ChangePassword /> (#3075) * implement component overrides * Example * useMemo * Updated unit tests * Mark DEFAULTS as required * Use partial so that all override props are optional * Remove label requirement * Update packages/react/src/components/AccountSettings/ChangePassword/types.ts * Default components to empty array inside useMemo * Replace "AccountSettings" prefix with "Component" * Update custom components render unit test * Fix component type names * feat(account-settings): Enable component override for <DeleteUser /> (#3123) * Type updates * add component override to DeleteUser * Add default components to object * Update unit tests * Trigger CI * Fix imports * Remove `.only` * Use nullish coaelescing * Use override component directly * feat(account-settings): namespace account settings components (#3118) * Use AccountSettings namespace * Update examples * Update snapshot * Update ChangePassword example * Use default export * Fix export line * Fix incorrect merge conflict resolve * feat(account-settings): align classnames (#3128) * Add classname to DeleteUser * align classnames * Update snapshots * Add constant * Update unit tests * chore(account-settings): overrides cleanup (#3131) * Mark essential types as required * Rename submit button to delete button * Update packages/react/src/components/AccountSettings/types.ts * More type requirements * Fix weird typo * Combine button props * Remove unused var * Error => ErrorMessage * Fix typo * docs(account-settings): Account Settings intro docs (#3127) * Add intro contents * trigger ci * Update docs/src/pages/[platform]/connected-components/account-settings/index.page.mdx * Update docs/src/pages/[platform]/connected-components/account-settings/index.page.mdx * Update docs/src/pages/[platform]/connected-components/account-settings/index.page.mdx * chore(AccountSettings): update subcomponent names and types (#3134) * chore(AccountSettings): update subcomponent names and types * Update packages/react/src/components/AccountSettings/types.ts Co-authored-by: William Lee <[email protected]> Co-authored-by: William Lee <[email protected]> * feat(account-settings): use new button variants (#3137) * Use new variants! * Minor fix * trigger ci * Update snapshot * docs(account-settings): delete user docs (#3087) * Update links * Barebone pages * Update description * Use DeveloperPreview * Move ReactPropsTable to `@components` * First draft * Add backticks * retrigger ci * Remove unnecessary space * Update docs/src/pages/[platform]/connected-components/account-settings/delete-user/react.mdx * Update docs/src/pages/[platform]/connected-components/account-settings/delete-user/react.mdx * Update docs/src/pages/[platform]/connected-components/account-settings/delete-user/react.mdx * Update docs/src/pages/[platform]/connected-components/account-settings/delete-user/react.mdx Co-authored-by: Erik Hanchett <[email protected]> * Update docs/src/pages/[platform]/connected-components/account-settings/delete-user/react.mdx * Update docs/src/pages/[platform]/connected-components/account-settings/delete-user/react.mdx * Update docs/src/pages/[platform]/connected-components/account-settings/delete-user/react.mdx * Use actual code from examples * Adding expanders * Spacing in expander items * More example codes * Wording stuffs * Revert example * Warning -> WarningView * Wording * Reorder snippets * Wording * Escape double quote * Just remove double quote * Fix import * Fix name * Add theming section * Remove extraneous component * Fix typo * Update docs/src/pages/[platform]/connected-components/account-settings/delete-user/props.ts Co-authored-by: Ioana Brooks <[email protected]> * Update docs/src/pages/[platform]/connected-components/account-settings/delete-user/props.ts Co-authored-by: Ioana Brooks <[email protected]> * Update docs/src/pages/[platform]/connected-components/account-settings/delete-user/props.ts Co-authored-by: Ioana Brooks <[email protected]> * Update docs/src/pages/[platform]/connected-components/account-settings/delete-user/props.ts Co-authored-by: Ioana Brooks <[email protected]> * Update docs/src/pages/[platform]/connected-components/account-settings/delete-user/react.mdx * Change radii for medium * docs(account-settings): change password docs (#3085) * Initial draft * Initial draft * Progress! * Minor wording change * Main props table * Add missing override * Update docs/src/pages/[platform]/connected-components/account-settings/change-password/react.mdx * Use Example / ExampleCode * Fix typo * Fix more typo * revert unrelated changes * Update component names * Start override component props doc * Finish override props section! * Wording * ChangePassword theme example * Update docs/src/pages/[platform]/connected-components/account-settings/change-password/props.ts Co-authored-by: Ioana Brooks <[email protected]> * Update docs/src/pages/[platform]/connected-components/account-settings/change-password/props.ts Co-authored-by: Ioana Brooks <[email protected]> * Apply suggestions from @joebuono * Add additional validator * Update docs/src/pages/[platform]/connected-components/account-settings/change-password/react.mdx * Update docs/src/pages/[platform]/connected-components/account-settings/change-password/react.mdx Co-authored-by: Ioana Brooks <[email protected]> Co-authored-by: Erik Hanchett <[email protected]> Co-authored-by: Ioana Brooks <[email protected]> * fix(account-settings): early return if isPending is true (#3141) * chore(account-settings): add changeset (#3142) * Add changeset * Update .changeset/cold-hats-fix.md * Fix typos (#3143) * e2e concurrency group Co-authored-by: Caleb Pollman <[email protected]> Co-authored-by: Erik Hanchett <[email protected]> Co-authored-by: Ioana Brooks <[email protected]>
1 parent 692bc0d commit 3653c8f

File tree

75 files changed

+3868
-104
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+3868
-104
lines changed

‎.changeset/cold-hats-fix.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@aws-amplify/ui-react': minor
3+
'@aws-amplify/ui': minor
4+
---
5+
6+
Adds `ChangePassword` and `DeleteUser` Account Settings components. These components are standalone components that add account management flows after users authenticate.
7+
8+
These components are in developer preview. Please see https://ui.docs.amplify.aws/react/connected-components/account-settings to learn more.

‎.github/workflows/publish-account-settings.yml

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Description: This workflow runs unit + e2e tests on `account-settings/main`.
2+
#
3+
# Triggered by: merge to `account-settings/main` branch
4+
5+
name: Test / Account Settings
6+
7+
on:
8+
push:
9+
branches: [account-settings/main]
10+
11+
jobs:
12+
test:
13+
uses: aws-amplify/amplify-ui/.github/workflows/reusable-e2e.yml@account-settings/main
14+
with:
15+
commit: ${{ github.sha }}
16+
repository: ${{ github.repository }}
17+
secrets:
18+
# TODO: migrate away from this account once tfn is migrated
19+
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
20+
# TODO: migrate away from this account once tfn is migrated
21+
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
22+
AWS_ACCESS_KEY_ID_AUTH: ${{ secrets.AWS_ACCESS_KEY_ID_AUTH }}
23+
AWS_SECRET_ACCESS_KEY_AUTH: ${{ secrets.AWS_SECRET_ACCESS_KEY_AUTH }}
24+
AWS_ACCESS_KEY_ID_DATASTORE: ${{ secrets.AWS_ACCESS_KEY_ID_DATASTORE }}
25+
AWS_SECRET_ACCESS_KEY_DATASTORE: ${{ secrets.AWS_SECRET_ACCESS_KEY_DATASTORE }}
26+
AWS_ACCESS_KEY_ID_GEO: ${{ secrets.AWS_ACCESS_KEY_ID_GEO }}
27+
AWS_SECRET_ACCESS_KEY_GEO: ${{ secrets.AWS_SECRET_ACCESS_KEY_GEO }}
28+
AWS_ACCESS_KEY_ID_STORAGE: ${{ secrets.AWS_ACCESS_KEY_ID_STORAGE }}
29+
AWS_SECRET_ACCESS_KEY_STORAGE: ${{ secrets.AWS_SECRET_ACCESS_KEY_STORAGE }}
30+
DOMAIN: ${{ secrets.DOMAIN }}
31+
PHONE_NUMBER: ${{ secrets.PHONE_NUMBER }}
32+
USERNAME: ${{ secrets.USERNAME }}
33+
NEW_PASSWORD: ${{ secrets.NEW_PASSWORD }}
34+
VALID_PASSWORD: ${{ secrets.VALID_PASSWORD }}
35+
SITE_URL: ${{ secrets.SITE_URL }}
36+
DOCSEARCH_DOCS_APP_ID: ${{ secrets.DOCSEARCH_DOCS_APP_ID }}
37+
DOCSEARCH_DOCS_API_KEY: ${{ secrets.DOCSEARCH_DOCS_API_KEY }}
38+
DOCSEARCH_DOCS_INDEX_NAME: ${{ secrets.DOCSEARCH_DOCS_INDEX_NAME }}
39+
40+
publish:
41+
needs: test
42+
uses: ./.github/workflows/reusable-tagged-publish.yml
43+
with:
44+
dist-tag: account-settings
45+
secrets:
46+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.github/workflows/test-account-settings-prs.yml

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Description: This workflow runs unit + e2e tests on PRs
2+
# targeting `account-settings/main`.
3+
#
4+
# Triggered by:
5+
# (1) maintainer pushes a commit to PRs targeting those branches.
6+
7+
name: Test / Account Settings / PRs
8+
9+
concurrency:
10+
group: e2e-accountsettings-${{ github.event.pull_request.id }}
11+
cancel-in-progress: true
12+
13+
on:
14+
pull_request:
15+
branches: [account-settings/main]
16+
types: [opened, synchronize]
17+
18+
jobs:
19+
test:
20+
uses: aws-amplify/amplify-ui/.github/workflows/reusable-e2e.yml@account-settings/main
21+
with:
22+
commit: ${{ github.event.pull_request.head.sha }}
23+
repository: ${{ github.event.pull_request.head.repo.full_name }}
24+
secrets:
25+
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} # TODO: Remove this
26+
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} #TODO: Remove this
27+
AWS_ACCESS_KEY_ID_AUTH: ${{ secrets.AWS_ACCESS_KEY_ID_AUTH }}
28+
AWS_SECRET_ACCESS_KEY_AUTH: ${{ secrets.AWS_SECRET_ACCESS_KEY_AUTH }}
29+
AWS_ACCESS_KEY_ID_DATASTORE: ${{ secrets.AWS_ACCESS_KEY_ID_DATASTORE }}
30+
AWS_SECRET_ACCESS_KEY_DATASTORE: ${{ secrets.AWS_SECRET_ACCESS_KEY_DATASTORE }}
31+
AWS_ACCESS_KEY_ID_GEO: ${{ secrets.AWS_ACCESS_KEY_ID_GEO }}
32+
AWS_SECRET_ACCESS_KEY_GEO: ${{ secrets.AWS_SECRET_ACCESS_KEY_GEO }}
33+
AWS_ACCESS_KEY_ID_STORAGE: ${{ secrets.AWS_ACCESS_KEY_ID_STORAGE }}
34+
AWS_SECRET_ACCESS_KEY_STORAGE: ${{ secrets.AWS_SECRET_ACCESS_KEY_STORAGE }}
35+
DOMAIN: ${{ secrets.DOMAIN }}
36+
PHONE_NUMBER: ${{ secrets.PHONE_NUMBER }}
37+
USERNAME: ${{ secrets.USERNAME }}
38+
NEW_PASSWORD: ${{ secrets.NEW_PASSWORD }}
39+
VALID_PASSWORD: ${{ secrets.VALID_PASSWORD }}
40+
SITE_URL: ${{ secrets.SITE_URL }}
41+
DOCSEARCH_DOCS_APP_ID: ${{ secrets.DOCSEARCH_DOCS_APP_ID }}
42+
DOCSEARCH_DOCS_API_KEY: ${{ secrets.DOCSEARCH_DOCS_API_KEY }}
43+
DOCSEARCH_DOCS_INDEX_NAME: ${{ secrets.DOCSEARCH_DOCS_INDEX_NAME }}

‎docs/src/pages/[platform]/connected-components/in-app-messaging/props/ReactPropsTable.tsx renamed to ‎docs/src/components/propsTable/ReactPropsTable.tsx

File renamed without changes.

‎docs/src/data/links.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,23 @@ export const connectedComponents: ComponentNavItem[] = [
128128
platforms: ['react', 'vue', 'angular', 'react-native'],
129129
tertiary: true,
130130
},
131+
{
132+
href: '/connected-components/account-settings',
133+
label: 'Account Settings',
134+
platforms: ['react'],
135+
},
136+
{
137+
href: '/connected-components/account-settings/change-password',
138+
label: 'Change Password',
139+
platforms: ['react'],
140+
tertiary: true,
141+
},
142+
{
143+
href: '/connected-components/account-settings/delete-user',
144+
label: 'Delete User',
145+
platforms: ['react'],
146+
tertiary: true,
147+
},
131148
{
132149
href: '/connected-components/geo',
133150
label: 'Geo',

‎docs/src/pages/[platform]/connected-components/account-settings/DeveloperPreview.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Alert } from '@aws-amplify/ui-react';
2+
import { useRouter } from 'next/router';
3+
4+
export const DeveloperPreview = () => {
5+
const {
6+
query: { platform = 'react' },
7+
} = useRouter();
8+
if (platform !== 'react') return null;
9+
10+
return (
11+
<Alert variation="info" heading="Developer Preview">
12+
Account Settings components are currently in developer preview.
13+
</Alert>
14+
);
15+
};

‎docs/src/pages/[platform]/connected-components/account-settings/change-password/index.page.mdx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
title: ChangePassword
3+
metaTitle: ChangePassword
4+
description: ChangePassword component enables end users to change their password.
5+
supportedFrameworks: react
6+
---
7+
8+
import { Fragment } from '@/components/Fragment';
9+
import { DeveloperPreview } from '../DeveloperPreview';
10+
11+
<DeveloperPreview />
12+
13+
<Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>

‎docs/src/pages/[platform]/connected-components/account-settings/change-password/props.ts

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
export const CHANGE_PASSWORD = [
2+
{
3+
name: `onSuccess?`,
4+
description:
5+
'Callback function triggered when password is successfully updated',
6+
type: `() => void`,
7+
},
8+
{
9+
name: `onError?`,
10+
description: 'Callback function triggered when change password fails',
11+
type: `(error: Error) => void`,
12+
},
13+
{
14+
name: `validators?`,
15+
description: 'Custom password validations',
16+
type: `ValidatorOptions[]`,
17+
},
18+
{
19+
name: `components?`,
20+
description: 'Submit button',
21+
type: `ChangePasswordComponents`,
22+
},
23+
];
24+
25+
export const OVERRIDES = [
26+
{
27+
name: `CurrentPasswordField?`,
28+
description: 'Password field for current password',
29+
type: `PasswordFieldProps`,
30+
},
31+
{
32+
name: `NewPasswordField?`,
33+
description: 'Password field for new password',
34+
type: `PasswordFieldProps`,
35+
},
36+
{
37+
name: `ConfirmPasswordField?`,
38+
description: 'Password field for confirm password',
39+
type: `PasswordFieldProps`,
40+
},
41+
{
42+
name: `ErrorMessage?`,
43+
description: 'Error alert that displays on delete user errors',
44+
type: `ErrorMessageComponentProps`,
45+
},
46+
{
47+
name: `SubmitButton?`,
48+
description: 'Submit button',
49+
type: `SubmitButtonProps`,
50+
},
51+
];
52+
53+
export const PASSWORD_FIELDS = [
54+
{
55+
name: `onBlur`,
56+
description:
57+
'Blur handler for the input. This must be passed to your input element.',
58+
type: `React.FocusEventHandler<HTMLInputElement>`,
59+
},
60+
{
61+
name: `onChange`,
62+
description:
63+
'Change handler for the input. This must be passed to your input element.',
64+
type: `React.ChangeEventHandler<HTMLInputElement>`,
65+
},
66+
{
67+
name: `name`,
68+
description:
69+
'HTML name for the input. This must be passed to your input element.',
70+
type: `React.ChangeEventHandler<HTMLInputElement>`,
71+
},
72+
{
73+
name: `fieldValidationErrors?`,
74+
description: 'List of validation errors for the password field.',
75+
type: `string[]`,
76+
},
77+
];
78+
79+
export const SUBMIT_BUTTON = [
80+
{
81+
name: `isDisabled`,
82+
description:
83+
'Boolean representing whether account deletion is in progress. Your delete button should be disabled if this is set to true.',
84+
type: `boolean`,
85+
},
86+
];

0 commit comments

Comments
 (0)