<template>
    <v-sheet>
        <v-row dense>
            <v-col cols="12">
                <cs-password-box 
                    ref="Password"
                    :control="controls.password"
                    :errors="errorsManager.ByField('password')"

                    v-model="activeRecord.password"
                    
                    @focus="errorsManager.ResetField('password')"
                    @blur="errorsManager.Validate('password')"
                />
            </v-col>
        </v-row>

        <v-row dense>
            <v-col cols="12">
                <cs-password-box 
                    :control="controls.password_confirmation"
                    :errors="errorsManager.ByField('password_confirmation')"

                    v-model="activeRecord.password_confirmation"
                    
                    @focus="errorsManager.ResetField('password_confirmation')"
                    @blur="errorsManager.Validate('password_confirmation')"
                />
            </v-col>
        </v-row>

        <cs-info-alert 
            v-if="formprovider.hasGlobalRequestError"
            color="red"
            icon="mdi-alert"
            :message="formprovider.response.message"
            class="mb-3"
        />

    </v-sheet>
</template>

<script>
    export default {
        props: {
            app: {required: true}
        },

        computed: {
            form() {
                return this.app.forms.Newpassword;
            }
        },

        methods: {
            Focus() {
                this.$refs.Password.Focus();
            }
        },

        mounted() {
            this.Focus();
        },

        mixins: [
            require('@CsVueMix/Forminput/Forminput')
        ],

        components: {
            CsTextBox: require('@CsVueComp/controls/texts/CsTextBox').default, 
            CsPasswordBox: require('@CsVueComp/controls/texts/CsPasswordBox').default, 
            CsCheckBox: require('@CsVueComp/controls/checks/CsCheckBox').default, 
            CsInfoAlert: require('@CsVueComp/sheets/CsInfoAlert').default,
        },

        name: 'NewPasswordFormInput',
    }
</script>