App.tsx

import { useState } from 'react';
import { Amplify, Auth } from 'aws-amplify';
import {
  withAuthenticator,
  AccountSettings,
  Alert,
  Button,
  Card,
  Flex,
  Heading,
} from '@aws-amplify/ui-react';
import awsconfig from '../../../environments/auth-with-email/src/aws-exports.js';

import CustomWarning from './CustomWarning'
import '@aws-amplify/ui-react/styles.css';

Amplify.configure(awsconfig);

function App() {
  const [isSuccessful, setIsSuccessful] = useState(false);

  return (
    <Flex direction="column" width="600px">
      <Card variation="outlined">
        <Flex direction="column">
          <Heading>Change Password:</Heading>
          <AccountSettings.ChangePassword
            components={{
              CurrentPasswordField: ({
                fieldValidationErrors,
                name,
                value,
                onBlur,
                onChange,
              }) => (
                <>
                  <label htmlFor="new-password">Current Password</label>
                  <input
                    name={name}
                    onBlur={onBlur}
                    value={value}
                    onChange={onChange}
                    type="password"
                    id="new-password"
                  />
                  {fieldValidationErrors?.map((error) => (
                    <p key={error} role="alert">
                      {error}
                    </p>
                  ))}
                </>
              ),
            }}
            onSuccess={() => {
              setIsSuccessful(true);
            }}
          />
          {isSuccessful ? (
            <Alert variation="success" isDismissible>
              Password has been changed succesfully.
            </Alert>
          ) : null}
          <Heading level={4} color="red.80">WARNING ZONE</Heading>

          <Heading>Delete User:</Heading>
          <AccountSettings.DeleteUser
            components={{ WarningView: CustomWarning }}
          />
        </Flex>
      </Card>
      <Button onClick={() => Auth.signOut()}>Sign Out</Button>
    </Flex>
  );
}

export default withAuthenticator(App);