feat(react): AccountSettings component preview release

.changeset/cold-hats-fix.md

@@ -0,0 +1,8 @@
+---
+'@aws-amplify/ui-react': minor
+'@aws-amplify/ui': minor
+---
+
+Adds `ChangePassword` and `DeleteUser` Account Settings components. These components are standalone components that add account management flows after users authenticate.
+
+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

@@ -0,0 +1,46 @@
+# Description: This workflow runs unit + e2e tests on `account-settings/main`.
+#
+# Triggered by: merge to `account-settings/main` branch
+
+name: Test / Account Settings
+
+on:
+  push:
+    branches: [account-settings/main]
+
+jobs:
+  test:
+    uses: aws-amplify/amplify-ui/.github/workflows/reusable-e2e.yml@account-settings/main
+    with:
+      commit: ${{ github.sha }}
+      repository: ${{ github.repository }}
+    secrets:
+      # TODO: migrate away from this account once tfn is migrated
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      # TODO: migrate away from this account once tfn is migrated
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+      AWS_ACCESS_KEY_ID_AUTH: ${{ secrets.AWS_ACCESS_KEY_ID_AUTH }}
+      AWS_SECRET_ACCESS_KEY_AUTH: ${{ secrets.AWS_SECRET_ACCESS_KEY_AUTH }}
+      AWS_ACCESS_KEY_ID_DATASTORE: ${{ secrets.AWS_ACCESS_KEY_ID_DATASTORE }}
+      AWS_SECRET_ACCESS_KEY_DATASTORE: ${{ secrets.AWS_SECRET_ACCESS_KEY_DATASTORE }}
+      AWS_ACCESS_KEY_ID_GEO: ${{ secrets.AWS_ACCESS_KEY_ID_GEO }}
+      AWS_SECRET_ACCESS_KEY_GEO: ${{ secrets.AWS_SECRET_ACCESS_KEY_GEO }}
+      AWS_ACCESS_KEY_ID_STORAGE: ${{ secrets.AWS_ACCESS_KEY_ID_STORAGE }}
+      AWS_SECRET_ACCESS_KEY_STORAGE: ${{ secrets.AWS_SECRET_ACCESS_KEY_STORAGE }}
+      DOMAIN: ${{ secrets.DOMAIN }}
+      PHONE_NUMBER: ${{ secrets.PHONE_NUMBER }}
+      USERNAME: ${{ secrets.USERNAME }}
+      NEW_PASSWORD: ${{ secrets.NEW_PASSWORD }}
+      VALID_PASSWORD: ${{ secrets.VALID_PASSWORD }}
+      SITE_URL: ${{ secrets.SITE_URL }}
+      DOCSEARCH_DOCS_APP_ID: ${{ secrets.DOCSEARCH_DOCS_APP_ID }}
+      DOCSEARCH_DOCS_API_KEY: ${{ secrets.DOCSEARCH_DOCS_API_KEY }}
+      DOCSEARCH_DOCS_INDEX_NAME: ${{ secrets.DOCSEARCH_DOCS_INDEX_NAME }}
+
+  publish:
+    needs: test
+    uses: ./.github/workflows/reusable-tagged-publish.yml
+    with:
+      dist-tag: account-settings
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

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

@@ -0,0 +1,43 @@
+# Description: This workflow runs unit + e2e tests on PRs
+#   targeting `account-settings/main`.
+#
+# Triggered by:
+#   (1) maintainer pushes a commit to PRs targeting those branches.
+
+name: Test / Account Settings / PRs
+
+concurrency:
+  group: e2e-accountsettings-${{ github.event.pull_request.id }}
+  cancel-in-progress: true
+
+on:
+  pull_request:
+    branches: [account-settings/main]
+    types: [opened, synchronize]
+
+jobs:
+  test:
+    uses: aws-amplify/amplify-ui/.github/workflows/reusable-e2e.yml@account-settings/main
+    with:
+      commit: ${{ github.event.pull_request.head.sha }}
+      repository: ${{ github.event.pull_request.head.repo.full_name }}
+    secrets:
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} # TODO: Remove this
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} #TODO: Remove this
+      AWS_ACCESS_KEY_ID_AUTH: ${{ secrets.AWS_ACCESS_KEY_ID_AUTH }}
+      AWS_SECRET_ACCESS_KEY_AUTH: ${{ secrets.AWS_SECRET_ACCESS_KEY_AUTH }}
+      AWS_ACCESS_KEY_ID_DATASTORE: ${{ secrets.AWS_ACCESS_KEY_ID_DATASTORE }}
+      AWS_SECRET_ACCESS_KEY_DATASTORE: ${{ secrets.AWS_SECRET_ACCESS_KEY_DATASTORE }}
+      AWS_ACCESS_KEY_ID_GEO: ${{ secrets.AWS_ACCESS_KEY_ID_GEO }}
+      AWS_SECRET_ACCESS_KEY_GEO: ${{ secrets.AWS_SECRET_ACCESS_KEY_GEO }}
+      AWS_ACCESS_KEY_ID_STORAGE: ${{ secrets.AWS_ACCESS_KEY_ID_STORAGE }}
+      AWS_SECRET_ACCESS_KEY_STORAGE: ${{ secrets.AWS_SECRET_ACCESS_KEY_STORAGE }}
+      DOMAIN: ${{ secrets.DOMAIN }}
+      PHONE_NUMBER: ${{ secrets.PHONE_NUMBER }}
+      USERNAME: ${{ secrets.USERNAME }}
+      NEW_PASSWORD: ${{ secrets.NEW_PASSWORD }}
+      VALID_PASSWORD: ${{ secrets.VALID_PASSWORD }}
+      SITE_URL: ${{ secrets.SITE_URL }}
+      DOCSEARCH_DOCS_APP_ID: ${{ secrets.DOCSEARCH_DOCS_APP_ID }}
+      DOCSEARCH_DOCS_API_KEY: ${{ secrets.DOCSEARCH_DOCS_API_KEY }}
+      DOCSEARCH_DOCS_INDEX_NAME: ${{ secrets.DOCSEARCH_DOCS_INDEX_NAME }}

docs/src/data/links.tsx

@@ -128,6 +128,23 @@ export const connectedComponents: ComponentNavItem[] = [
     platforms: ['react', 'vue', 'angular', 'react-native'],
     tertiary: true,
   },
+  {
+    href: '/connected-components/account-settings',
+    label: 'Account Settings',
+    platforms: ['react'],
+  },
+  {
+    href: '/connected-components/account-settings/change-password',
+    label: 'Change Password',
+    platforms: ['react'],
+    tertiary: true,
+  },
+  {
+    href: '/connected-components/account-settings/delete-user',
+    label: 'Delete User',
+    platforms: ['react'],
+    tertiary: true,
+  },
   {
     href: '/connected-components/geo',
     label: 'Geo',

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

@@ -0,0 +1,15 @@
+import { Alert } from '@aws-amplify/ui-react';
+import { useRouter } from 'next/router';
+
+export const DeveloperPreview = () => {
+  const {
+    query: { platform = 'react' },
+  } = useRouter();
+  if (platform !== 'react') return null;
+
+  return (
+    <Alert variation="info" heading="Developer Preview">
+      Account Settings components are currently in developer preview.
+    </Alert>
+  );
+};

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

@@ -0,0 +1,13 @@
+---
+title: ChangePassword
+metaTitle: ChangePassword
+description: ChangePassword component enables end users to change their password.
+supportedFrameworks: react
+---
+
+import { Fragment } from '@/components/Fragment';
+import { DeveloperPreview } from '../DeveloperPreview';
+
+<DeveloperPreview />
+
+<Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>

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

@@ -0,0 +1,86 @@
+export const CHANGE_PASSWORD = [
+  {
+    name: `onSuccess?`,
+    description:
+      'Callback function triggered when password is successfully updated',
+    type: `() => void`,
+  },
+  {
+    name: `onError?`,
+    description: 'Callback function triggered when change password fails',
+    type: `(error: Error) => void`,
+  },
+  {
+    name: `validators?`,
+    description: 'Custom password validations',
+    type: `ValidatorOptions[]`,
+  },
+  {
+    name: `components?`,
+    description: 'Submit button',
+    type: `ChangePasswordComponents`,
+  },
+];
+
+export const OVERRIDES = [
+  {
+    name: `CurrentPasswordField?`,
+    description: 'Password field for current password',
+    type: `PasswordFieldProps`,
+  },
+  {
+    name: `NewPasswordField?`,
+    description: 'Password field for new password',
+    type: `PasswordFieldProps`,
+  },
+  {
+    name: `ConfirmPasswordField?`,
+    description: 'Password field for confirm password',
+    type: `PasswordFieldProps`,
+  },
+  {
+    name: `ErrorMessage?`,
+    description: 'Error alert that displays on delete user errors',
+    type: `ErrorMessageComponentProps`,
+  },
+  {
+    name: `SubmitButton?`,
+    description: 'Submit button',
+    type: `SubmitButtonProps`,
+  },
+];
+
+export const PASSWORD_FIELDS = [
+  {
+    name: `onBlur`,
+    description:
+      'Blur handler for the input. This must be passed to your input element.',
+    type: `React.FocusEventHandler<HTMLInputElement>`,
+  },
+  {
+    name: `onChange`,
+    description:
+      'Change handler for the input. This must be passed to your input element.',
+    type: `React.ChangeEventHandler<HTMLInputElement>`,
+  },
+  {
+    name: `name`,
+    description:
+      'HTML name for the input. This must be passed to your input element.',
+    type: `React.ChangeEventHandler<HTMLInputElement>`,
+  },
+  {
+    name: `fieldValidationErrors?`,
+    description: 'List of validation errors for the password field.',
+    type: `string[]`,
+  },
+];
+
+export const SUBMIT_BUTTON = [
+  {
+    name: `isDisabled`,
+    description:
+      'Boolean representing whether account deletion is in progress. Your delete button should be disabled if this is set to true.',
+    type: `boolean`,
+  },
+];