Merge pull request #1035 from vincentbavitz/password-whitespace

Password Whitespace Elimation

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,19 @@ 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(() => {
+      if (!this.passwordInput.current) {
+        return;
+      }
+
+      this.passwordInput.current.focus();
+    }, 100);
   }
 
   public render() {
@@ -64,6 +76,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 +86,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 +140,21 @@ export class SessionPasswordModal extends React.Component<Props, State> {
   }
 
   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 &&