<div data-options="dxView : { name: 'passwordRecovery', title: 'passwordRecovery' } " >
    <div data-options="dxContent : { targetPlaceholder: 'content' } " >
        
        <div class="centerText" data-bind="visible: !isValidToken">
            <h3>Invalid Token</h3>            
        </div>   

        <div class="centerDiv" style="background-color: white; padding: 20px; width: 400px;" data-bind="visible: isValidToken">
            <h3>Change Password</h3>
            <div id="passwordChangeValidation" data-bind="dxValidationGroup : {}">
                <div class="validationSummaryLogin" data-bind="dxValidationSummary: { }"></div>
                <div style="clear: both; padding-bottom: 0px;"></div>
                <div class="dx-fieldset" style="padding: 0px 15px;">
                    <div class="dx-field">
                        <div tabindex="1" id="username" data-bind="shTextBox: { placeholder: '@password', mode: 'password', value: password, maxLength: 30 }, dxValidator: passwordValidationRules"></div>
                    </div>
                    <div class="dx-field">
                        <div tabindex="2" data-bind="shTextBox: { placeholder: 'Repeat Password', mode: 'password', value: passwordConfirm, onEnterKey: changePasswordClick }, dxValidator: confirmPasswordValidationRules"></div>
                    </div>
                    <div class="dx-field">
                        <div tabindex="3" style="float: right; margin-top:10px;" data-bind="dxButton: { onClick: changePasswordClick, text: 'Reset Password' }"></div>
                    </div>
                </div>
            </div>
        </div>        

    </div>
</div>