diff --git a/ts/components/session/SessionPasswordModal.tsx b/ts/components/session/SessionPasswordModal.tsx index 3c415df5a..4d7091057 100644 --- a/ts/components/session/SessionPasswordModal.tsx +++ b/ts/components/session/SessionPasswordModal.tsx @@ -20,6 +20,9 @@ interface State { } export class SessionPasswordModal extends React.Component { + private readonly passwordInput: React.RefObject; + private readonly passwordInputConfirm: React.RefObject; + constructor(props: any) { super(props); @@ -34,10 +37,19 @@ export class SessionPasswordModal extends React.Component { this.onKeyUp = this.onKeyUp.bind(this); this.onPaste = this.onPaste.bind(this); + + this.passwordInput = React.createRef(); + this.passwordInputConfirm = React.createRef(); } public componentDidMount() { - setTimeout(() => $('#password-modal-input').focus(), 100); + setTimeout(() => { + if (!this.passwordInput.current) { + return; + } + + this.passwordInput.current.focus(); + }, 100); } public render() { @@ -64,6 +76,7 @@ export class SessionPasswordModal extends React.Component { { { } private async setPassword(onSuccess: any) { - const enteredPassword = String($('#password-modal-input').val()); + if (!this.passwordInput.current || !this.passwordInputConfirm.current) { + return; + } + + // Trim leading / trailing whitespace for UX + const enteredPassword = String(this.passwordInput.current.value).trim(); const enteredPasswordConfirm = String( - $('#password-modal-input-confirm').val() - ); + this.passwordInputConfirm.current.value + ).trim(); if (enteredPassword.length === 0 || enteredPasswordConfirm.length === 0) { return; } - // Check passwords enntered + // Check passwords entered if ( enteredPassword.length === 0 || (this.props.action === PasswordAction.Change &&