import { Typography, Stack, List, ListItem } from '@krakentech/coral';
import {
    CreatePassword,
    CreatePasswordBody,
    CreatePasswordButton,
    CreatePasswordInput,
    CreatePasswordTitle,
} from '@krakentech/coral-organisms';
import { Formik, Form } from 'formik';
 
const CreatePasswordPage = () => (
    <CreatePassword>
        <Stack gap="lg" flexDirection="column" fullWidth>
            <CreatePasswordTitle title="Setting up your password" />
            <CreatePasswordBody>
                <Stack flexDirection="column" gap="sm">
                    <Typography>
                        In order to keep your account safe there are a few
                        things to avoid when creating your password:
                    </Typography>
                    <Typography component="div">
                        <List listStyleType="disc">
                            <ListItem>
                                Passwords with less than 8 characters{' '}
                            </ListItem>
                            <ListItem>
                                Common passwords like "password" and "football"
                            </ListItem>
                            <ListItem>
                                Passwords based on your name or email address
                            </ListItem>
                        </List>
                    </Typography>
                </Stack>
            </CreatePasswordBody>
 
            <Formik
                initialValues={{}}
                onSubmit={(values) => console.log(values)}
            >
                <Form method="post">
                    <Stack flexDirection="column" gap="lg">
                        <CreatePasswordInput
                            label="Password (8 characters minimum)"
                            strengthLabel="Strength"
                            poorLabel="Lousy..."
                            avgLabel="Probably fine?"
                            goodLabel="Smashed it!"
                        />
                        <CreatePasswordButton
                            buttonText="Set my password"
                            acceptablePasswordStrength={2}
                        />
                    </Stack>
                </Form>
            </Formik>
        </Stack>
    </CreatePassword>
);

 
import {
    CreatePasswordContext,
    ...
} from '@krakentech/coral-organisms';
 
const [showPassword, setShowPassword] = useState(false);
const [currentStrengthLevel, setCurrentStrengthLevel] = useState(0);
return (
    <CreatePasswordContext.Provider
        value={{
            showPassword,
            setShowPassword,
            currentStrengthLevel,
            setCurrentStrengthLevel,
        }}
    >
        <Container
            component="section"
            maxWidthPreset="full"
        >
            <Stack gap="lg" flexDirection="column" fullWidth>
                ...
            </Stack>
        </Container>
    </CreatePasswordContext.Provider>
);