import * as React from "react" ; import * as ReactDOM from "react-dom" ; import { DialogBase } from "./DialogBase" ; export class ChangePasswordDialog extends DialogBase { public oldPassword = "" ; public newPassword = "" ; constructor ( ) { super ( ) ; } protected render ( ) { const element = React . createElement ( ChangePasswordPanel , { } ) ; ReactDOM . render ( element , this . el , ( ) => { this . init ( ) ; } ) ; } public onOK ( ) { this . oldPassword = ( this . el . querySelector ( '.old-password-input' ) as HTMLInputElement ) . value ; this . newPassword = ( this . el . querySelector ( '.new-password-input' ) as HTMLInputElement ) . value ; super . onOK ( ) ; } } function ChangePasswordPanel ( ) { return ( < div className = "change-password" > < div > < div > < input type = "password" className = "old-password-input" placeholder = "Old password" / > < /div> < div > < input type = "password" className = "new-password-input" placeholder = "New password" / > < /div> < div > < input type = "password" className = "retype-password-input" placeholder = "Retype new password" / > < /div> < /div> < div className = "button-panel" > < button type = "submit" className = "ok-button default-button" > OK < /button> < button type = "button" className = "cancel-button" > Cancel < /button> < /div> < /div>); }