Merge pull request #1005 from vincentbavitz/password-len

Password paste control on MAX_PASSWORD_LEN

_locales/en/messages.json

@@ -2296,6 +2296,12 @@
   "confirmPassword": {
     "message": "Confirm password"
   },
+  "pasteLongPasswordToastTitle": {
+    "message":
+      "The clipboard content exceeds the maximum password length of $max_pwd_len$ characters.",
+    "description":
+      "Shown when user pastes a password which is longer than MAX_PASSWORD_LEN"
+  },
   "showSeedPasswordRequest": {
     "message": "Please enter your password",
     "description": "Request for user to enter password to show seed."

password_preload.js

@@ -34,7 +34,7 @@ window.Signal.Logs = require('./js/modules/logs');
 
 window.CONSTANTS = {
   MAX_LOGIN_TRIES: 3,
-  MAX_PASSWORD_LENGTH: 32,
+  MAX_PASSWORD_LENGTH: 64,
   MAX_USERNAME_LENGTH: 20,
 };
 

preload.js

@@ -72,7 +72,7 @@ window.isBeforeVersion = (toCheck, baseVersion) => {
 
 window.CONSTANTS = {
   MAX_LOGIN_TRIES: 3,
-  MAX_PASSWORD_LENGTH: 32,
+  MAX_PASSWORD_LENGTH: 64,
   MAX_USERNAME_LENGTH: 20,
   MAX_GROUP_NAME_LENGTH: 64,
   DEFAULT_PUBLIC_CHAT_URL: appConfig.get('defaultPublicChatServer'),

ts/components/session/SessionPasswordModal.tsx

@@ -33,6 +33,7 @@ export class SessionPasswordModal extends React.Component<Props, State> {
     this.closeDialog = this.closeDialog.bind(this);
 
     this.onKeyUp = this.onKeyUp.bind(this);
+    this.onPaste = this.onPaste.bind(this);
   }
 
   public componentDidMount() {
@@ -66,6 +67,7 @@ export class SessionPasswordModal extends React.Component<Props, State> {
             placeholder={placeholders[0]}
             onKeyUp={this.onKeyUp}
             maxLength={window.CONSTANTS.MAX_PASSWORD_LENGTH}
+            onPaste={this.onPaste}
           />
           {action !== PasswordAction.Remove && (
             <input
@@ -74,6 +76,7 @@ export class SessionPasswordModal extends React.Component<Props, State> {
               placeholder={placeholders[1]}
               onKeyUp={this.onKeyUp}
               maxLength={window.CONSTANTS.MAX_PASSWORD_LENGTH}
+              onPaste={this.onPaste}
             />
           )}
         </div>
@@ -191,6 +194,27 @@ export class SessionPasswordModal extends React.Component<Props, State> {
     }
   }
 
+  private onPaste(event: any) {
+    const clipboard = event.clipboardData.getData('text');
+
+    if (clipboard.length > window.CONSTANTS.MAX_PASSWORD_LENGTH) {
+      const title = String(
+        window.i18n(
+          'pasteLongPasswordToastTitle',
+          window.CONSTANTS.MAX_PASSWORD_LENGTH
+        )
+      );
+
+      window.pushToast({
+        title,
+        type: 'warning',
+      });
+    }
+
+    // Prevent pating into input
+    return false;
+  }
+
   private async onKeyUp(event: any) {
     const { onOk } = this.props;
 

ts/components/session/SessionPasswordPrompt.tsx

@@ -25,6 +25,8 @@ export class SessionPasswordPrompt extends React.PureComponent<{}, State> {
     };
 
     this.onKeyUp = this.onKeyUp.bind(this);
+    this.onPaste = this.onPaste.bind(this);
+
     this.initLogin = this.initLogin.bind(this);
     this.initClearDataView = this.initClearDataView.bind(this);
   }
@@ -62,6 +64,7 @@ export class SessionPasswordPrompt extends React.PureComponent<{}, State> {
         placeholder={' '}
         onKeyUp={this.onKeyUp}
         maxLength={window.CONSTANTS.MAX_PASSWORD_LENGTH}
+        onPaste={this.onPaste}
       />
     );
     const infoIcon = this.state.clearDataView ? (
@@ -120,18 +123,36 @@ export class SessionPasswordPrompt extends React.PureComponent<{}, State> {
     event.preventDefault();
   }
 
+  public onPaste(event: any) {
+    const clipboard = event.clipboardData.getData('text');
+
+    if (clipboard.length > window.CONSTANTS.MAX_PASSWORD_LENGTH) {
+      this.setState({
+        error: String(
+          window.i18n(
+            'pasteLongPasswordToastTitle',
+            window.CONSTANTS.MAX_PASSWORD_LENGTH
+          )
+        ),
+      });
+    }
+
+    // Prevent pating into input
+    return false;
+  }
+
   public async onLogin(passPhrase: string) {
     const trimmed = passPhrase ? passPhrase.trim() : passPhrase;
 
     try {
       await window.onLogin(trimmed);
-    } catch (e) {
+    } catch (error) {
       // Increment the error counter and show the button if necessary
       this.setState({
         errorCount: this.state.errorCount + 1,
       });
 
-      this.setState({ error: e });
+      this.setState({ error });
     }
   }