Prevent illegal username and passwords

js/views/scroll_down_button_view.js

@@ -15,7 +15,7 @@
       this.count += count;
       this.render();
     },
-    
+
     render() {
       this.scrollButtonView = new Whisper.ReactWrapperView({
         className: 'module-scroll-down',
@@ -29,5 +29,4 @@
       return this;
     },
   });
-
 })();

preload.js

@@ -59,6 +59,11 @@ window.isBeforeVersion = (toCheck, baseVersion) => {
   }
 };
 
+window.CONSTANTS = {
+  maxPasswordLength: 32,
+  maxUsernameLength: 20,
+};
+
 window.versionInfo = {
   environment: window.getEnvironment(),
   version: window.getVersion(),

stylesheets/_session.scss

@@ -32,8 +32,12 @@
 }
 
 @keyframes fadein {
-  from {opacity: 0;}
-  to {opacity: 1;}
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 // Session Colors
@@ -154,7 +158,7 @@ div.spacer-lg {
 }
 
 $session-transition-duration: 0.25s;
-$session-fadein-duration: 0.10s;
+$session-fadein-duration: 0.1s;
 
 $session-icon-size-sm: 15px;
 $session-icon-size-md: 20px;
@@ -1375,7 +1379,7 @@ input {
   animation: fadein $session-fadein-duration;
   bottom: 15px;
 
-  .session-icon-button{
+  .session-icon-button {
     display: flex;
     justify-content: center;
     align-items: center;

ts/components/EditProfileDialog.tsx

@@ -208,6 +208,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
             value={this.state.profileName}
             placeholder={placeholderText}
             onChange={this.onNameEdited}
+            maxLength={window.CONSTANTS.maxUsernameLength}
             tabIndex={0}
             required={true}
             aria-required={true}
@@ -260,10 +261,10 @@ export class EditProfileDialog extends React.Component<Props, State> {
     );
   }
 
-  private onNameEdited(e: any) {
-    e.persist();
+  private onNameEdited(event: any) {
+    event.persist();
 
-    const newName = e.target.value.replace(window.displayNameRegex, '');
+    const newName = event.target.value.replace(window.displayNameRegex, '');
 
     this.setState(state => {
       return {
@@ -301,7 +302,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
   private onClickOK() {
     const newName = this.state.profileName.trim();
 
-    if (newName === '') {
+    if (newName.length === 0 || newName.length > window.CONSTANTS.maxUsernameLength) {
       return;
     }
 

ts/components/session/LeftPaneSettingSection.tsx

@@ -218,33 +218,4 @@ export class LeftPaneSettingSection extends React.Component<any, State> {
       settingCategory: category,
     });
   }
-
-  // public updateSearch(searchTerm: string) {
-  //   const { updateSearchTerm, clearSearch } = this.props;
-
-  //   if (!searchTerm) {
-  //     clearSearch();
-
-  //     return;
-  //   }
-  //   // reset our pubKeyPasted, we can either have a pasted sessionID or a sessionID got from a search
-  //   this.setState({ pubKeyPasted: '' }, () => {
-  //     window.Session.emptyContentEditableDivs();
-  //   });
-
-  //   if (updateSearchTerm) {
-  //     updateSearchTerm(searchTerm);
-  //   }
-
-  //   if (searchTerm.length < 2) {
-  //     return;
-  //   }
-
-  //   const cleanedTerm = cleanSearchTerm(searchTerm);
-  //   if (!cleanedTerm) {
-  //     return;
-  //   }
-
-  //   this.debouncedSearch(cleanedTerm);
-  // }
 }

ts/components/session/RegistrationTabs.tsx

@@ -449,6 +449,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
           type="text"
           placeholder={window.i18n('enterDisplayName')}
           value={this.state.displayName}
+          maxLength={window.CONSTANTS.maxUsernameLength}
           onValueChanged={(val: string) => {
             this.onDisplayNameChanged(val);
           }}
@@ -462,6 +463,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
           error={this.state.passwordErrorString}
           type="password"
           placeholder={window.i18n('enterOptionalPassword')}
+          maxLength={window.CONSTANTS.maxPasswordLength}
           onValueChanged={(val: string) => {
             this.onPasswordChanged(val);
           }}
@@ -475,6 +477,7 @@ export class RegistrationTabs extends React.Component<{}, State> {
           error={passwordsDoNotMatch}
           type="password"
           placeholder={window.i18n('optionalPassword')}
+          maxLength={window.CONSTANTS.maxPasswordLength}
           onValueChanged={(val: string) => {
             this.onPasswordVerifyChanged(val);
           }}

ts/components/session/SessionInput.tsx

@@ -9,6 +9,7 @@ interface Props {
   type: string;
   value?: string;
   placeholder: string;
+  maxLength?: number;
   enableShowHide?: boolean;
   onValueChanged?: any;
   onEnterPressed?: any;
@@ -33,7 +34,7 @@ export class SessionInput extends React.PureComponent<Props, State> {
   }
 
   public render() {
-    const { placeholder, type, value, enableShowHide, error } = this.props;
+    const { placeholder, type, value, maxLength, enableShowHide, error } = this.props;
     const { forceShow } = this.state;
 
     const correctType = forceShow ? 'text' : type;
@@ -46,6 +47,7 @@ export class SessionInput extends React.PureComponent<Props, State> {
           type={correctType}
           placeholder={placeholder}
           value={value}
+          maxLength={maxLength}
           onChange={e => {
             this.updateInputValue(e);
           }}

ts/components/session/SessionPasswordModal.tsx

@@ -58,12 +58,14 @@ export class SessionPasswordModal extends React.Component<Props, State> {
             type="password"
             id="password-modal-input"
             placeholder={placeholders[0]}
+            maxLength={window.CONSTANTS.maxPasswordLength}
           />
           {action !== PasswordAction.Remove && (
             <input
               type="password"
               id="password-modal-input-confirm"
               placeholder={placeholders[1]}
+              maxLength={window.CONSTANTS.maxPasswordLength}
             />
           )}
         </div>
@@ -118,6 +120,10 @@ export class SessionPasswordModal extends React.Component<Props, State> {
       $('#password-modal-input-confirm').val()
     );
 
+    if (enteredPassword.length === 0 || enteredPasswordConfirm.length === 0){
+      return;
+    }
+
     // Check passwords enntered
     if (
       enteredPassword.length === 0 ||

ts/components/session/SessionScrollButton.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { SessionIconButton, SessionIconType, SessionIconSize } from './icon';
 
 interface Props {
-  count: number,
+  count: number;
 }
 
 export class SessionScrollButton extends React.PureComponent<Props> {
@@ -12,14 +12,12 @@ export class SessionScrollButton extends React.PureComponent<Props> {
   }
 
   public render() {
-    console.log(`My count is: ${this.props.count}`);
-
     return (
-        <SessionIconButton
-            iconType={SessionIconType.Chevron}
-            iconSize={SessionIconSize.Huge}
-            iconColor={"#FFFFFF"}
-        />
+      <SessionIconButton
+        iconType={SessionIconType.Chevron}
+        iconSize={SessionIconSize.Huge}
+        iconColor={'#FFFFFF'}
+      />
     );
   }
 }

ts/components/session/settings/SessionSettings.tsx

@@ -15,6 +15,7 @@ export enum SessionSettingCategory {
   Permissions = 'permissions',
   Notifications = 'notifications',
   Devices = 'devices',
+  Blocked = 'blocked',
 }
 
 export enum SessionSettingType {
@@ -396,7 +397,7 @@ export class SettingsView extends React.Component<SettingsViewProps, State> {
         id: 'media-permissions',
         title: window.i18n('mediaPermissionsTitle'),
         description: window.i18n('mediaPermissionsDescription'),
-        hidden: false,
+        hidden: true, // Hidden until feature works
         type: SessionSettingType.Toggle,
         category: SessionSettingCategory.Permissions,
         setFn: window.toggleMediaPermissions,

ts/global.d.ts

@@ -1,4 +1,5 @@
 interface Window {
+  CONSTANTS: any;
   versionInfo: any;
 
   Events: any;