Created
February 17, 2023 20:48
-
-
Save wlee221/7ff40156ec477ba012df9763478cffcf to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment