Password whitespace trim on set

ts/components/session/SessionPasswordModal.tsx

@@ -20,6 +20,9 @@ interface State {
 }
 
 export class SessionPasswordModal extends React.Component<Props, State> {
+  private readonly passwordInput: React.RefObject<HTMLInputElement>;
+  private readonly passwordInputConfirm: React.RefObject<HTMLInputElement>;
+
   constructor(props: any) {
     super(props);
 
@@ -34,10 +37,13 @@ export class SessionPasswordModal extends React.Component<Props, State> {
 
     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<Props, State> {
           <input
             type="password"
             id="password-modal-input"
+            ref={this.passwordInput}
             placeholder={placeholders[0]}
             onKeyUp={this.onKeyUp}
             maxLength={window.CONSTANTS.MAX_PASSWORD_LENGTH}
@@ -73,6 +80,7 @@ export class SessionPasswordModal extends React.Component<Props, State> {
             <input
               type="password"
               id="password-modal-input-confirm"
+              ref={this.passwordInputConfirm}
               placeholder={placeholders[1]}
               onKeyUp={this.onKeyUp}
               maxLength={window.CONSTANTS.MAX_PASSWORD_LENGTH}
@@ -126,16 +134,19 @@ export class SessionPasswordModal extends React.Component<Props, State> {
   }
 
   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 &&