<template>
    <div>
        <Head>
            <Title>Vue Password Component</Title>
            <Meta name="description" content="Password displays strength indicator for password fields." />
        </Head>

        <div class="content-section introduction">
            <div class="feature-intro">
                <h1>Password</h1>
                <p>Password displays strength indicator for password fields.</p>
            </div>
            <AppDemoActions />
        </div>

        <div class="content-section implementation">
            <div class="card">
                <h5>Basic</h5>
                <Password v-model="value1" :feedback="false" />

                <h5>Password Meter</h5>
                <Password v-model="value2" />

                <h5>Show Password</h5>
                <Password v-model="value3" toggleMask></Password>

                <h5>Templating</h5>
                <Password v-model="value4">
                    <template #header>
                        <h6>Pick a password</h6>
                    </template>
                    <template #footer>
                        <Divider />
                        <p class="mt-2">Suggestions</p>
                        <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
                            <li>At least one lowercase</li>
                            <li>At least one uppercase</li>
                            <li>At least one numeric</li>
                            <li>Minimum 8 characters</li>
                        </ul>
                    </template>
                </Password>
            </div>
        </div>

        <PasswordDoc />
    </div>
</template>

<script>
import PasswordDoc from './PasswordDoc';

export default {
    data() {
        return {
            value1: null,
            value2: null,
            value3: null,
            value4: null
        };
    },
    components: {
        PasswordDoc: PasswordDoc
    }
};
</script>

<style lang="scss" scoped>
::v-deep(.p-password input) {
    width: 15rem;
}
</style>
