Production pattern · auth
Password Updated
Confirmation surface after a password change succeeds.
Web · liveiOS · native pathAndroid · native path
The preview loads the exact production Pattern Gallery screen in the real Showcase. Routing, backend/data, auth and product side effects remain application-owned.
import { Box, Button, Card, Text, VStack } from '@beemvp/beeui-ui';
import * as React from 'react';
import { AuthShell } from '../components/auth-shared';
export type PasswordUpdatedScreenProps = {
onContinue: () => void;
};
export function PasswordUpdatedScreen({ onContinue }: PasswordUpdatedScreenProps) {
return (
<AuthShell testID="password-updated-screen">
<VStack className="flex-1" justify="center" gap="xl">
<Box className="items-center">
<Box
accessibilityLabel="Password updated successfully"
className="h-20 w-20 items-center justify-center rounded-full border border-success bg-surface"
>
<Text className="text-3xl" tone="success" variant="title">
✓
</Text>
</Box>
</Box>
<Card padding="lg" variant="raised">
<VStack align="center" gap="md">
<Text className="text-center" variant="title">
Password updated
</Text>
<Text className="text-center" tone="muted" variant="body">
Your new password is ready. You can now use it the next time you sign in.
</Text>
<Button className="mt-2 w-full" onPress={onContinue} size="lg">
Continue to sign in
</Button>
</VStack>
</Card>
</VStack>
</AuthShell>
);
}
Composition
Principal BeeUI exports
Each linked symbol opens its component preview-and-code recipe.
Application boundary
Intentionally excluded
The password mutation and any post-change session handling.
Caller contract: PasswordUpdatedScreenProps · onContinue