diff --git a/ts/components/session/SessionPasswordModal.tsx b/ts/components/session/SessionPasswordModal.tsx index 3c415df5a..9a991d2e7 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,13 @@ 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(() => this.passwordInput.current?.focus(), 100); } public render() { @@ -64,6 +70,7 @@ export class SessionPasswordModal extends React.Component { { { } private async setPassword(onSuccess: any) { - const enteredPassword = String($('#password-modal-input').val()); - const enteredPasswordConfirm = String( - $('#password-modal-input-confirm').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(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 &&