Clean up inviteLink handling, harden compose input

main.js

@@ -593,6 +593,12 @@ ipc.on('show-window', () => {
   showWindow();
 });
 
+ipc.on('set-secure-input', (_sender, enabled) => {
+  if (app.setSecureKeyboardEntryEnabled) {
+    app.setSecureKeyboardEntryEnabled(enabled);
+  }
+});
+
 ipc.on('title-bar-double-click', () => {
   if (!mainWindow) {
     return;

preload.js

@@ -138,6 +138,9 @@ try {
     window.log.info('show window');
     ipc.send('show-window');
   };
+  window.setSecureInput = enabled => {
+    ipc.send('set-secure-input', enabled);
+  };
 
   window.titleBarDoubleClick = () => {
     ipc.send('title-bar-double-click');

ts/components/CompositionArea.stories.tsx

@@ -40,6 +40,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   clearQuotedMessage: action('clearQuotedMessage'),
   getQuotedMessage: action('getQuotedMessage'),
   sortedGroupMembers: [],
+  setSecureInput: action('setSecureInput'),
   // EmojiButton
   onPickEmoji: action('onPickEmoji'),
   onSetSkinTone: action('onSetSkinTone'),

ts/components/CompositionArea.tsx

@@ -67,6 +67,7 @@ export type Props = Pick<
   | 'draftBodyRanges'
   | 'clearQuotedMessage'
   | 'getQuotedMessage'
+  | 'setSecureInput'
 > &
   Pick<
     EmojiButtonProps,
@@ -113,6 +114,7 @@ export const CompositionArea = ({
   clearQuotedMessage,
   getQuotedMessage,
   sortedGroupMembers,
+  setSecureInput,
   // EmojiButton
   onPickEmoji,
   onSetSkinTone,
@@ -470,6 +472,7 @@ export const CompositionArea = ({
             clearQuotedMessage={clearQuotedMessage}
             getQuotedMessage={getQuotedMessage}
             sortedGroupMembers={sortedGroupMembers}
+            setSecureInput={setSecureInput}
           />
         </div>
         {!large ? (

ts/components/CompositionInput.stories.tsx

@@ -28,6 +28,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   getQuotedMessage: action('getQuotedMessage'),
   onPickEmoji: action('onPickEmoji'),
   large: boolean('large', overrideProps.large || false),
+  setSecureInput: action('setSecureInput'),
   sortedGroupMembers: overrideProps.sortedGroupMembers || [],
   skinTone: select(
     'skinTone',

ts/components/CompositionInput.tsx

@@ -76,6 +76,7 @@ export type Props = {
   onSubmit(message: string, mentions: Array<BodyRangeType>): unknown;
   getQuotedMessage(): unknown;
   clearQuotedMessage(): unknown;
+  setSecureInput(enabled: boolean): unknown;
 };
 
 const MAX_LENGTH = 64 * 1024;
@@ -103,6 +104,7 @@ export const CompositionInput: React.ComponentType<Props> = props => {
     skinTone,
     draftText,
     draftBodyRanges,
+    setSecureInput,
     getQuotedMessage,
     clearQuotedMessage,
     sortedGroupMembers,
@@ -259,6 +261,20 @@ export const CompositionInput: React.ComponentType<Props> = props => {
     return false;
   };
 
+  const onFocus = (): void => {
+    setSecureInput(true);
+  };
+
+  const onBlur = (): void => {
+    setSecureInput(false);
+  };
+
+  React.useEffect(() => {
+    return () => {
+      setSecureInput(false);
+    };
+  }, [setSecureInput]);
+
   const onEnter = (): boolean => {
     const quill = quillRef.current;
     const emojiCompletion = emojiCompletionRef.current;
@@ -494,6 +510,8 @@ export const CompositionInput: React.ComponentType<Props> = props => {
     onChange,
     onEnter,
     onEscape,
+    onFocus,
+    onBlur,
     onPickEmoji,
     onShortKeyEnter,
     onTab,
@@ -508,6 +526,8 @@ export const CompositionInput: React.ComponentType<Props> = props => {
       return (
         <ReactQuill
           className="module-composition-input__quill"
+          onFocus={() => callbacksRef.current.onFocus()}
+          onBlur={() => callbacksRef.current.onBlur()}
           onChange={() => callbacksRef.current.onChange()}
           defaultValue={delta}
           modules={{

ts/components/ForwardMessageModal.stories.tsx

@@ -53,6 +53,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   onSetSkinTone: action('onSetSkinTone'),
   recentEmojis: [],
   removeLinkPreview: action('removeLinkPreview'),
+  setSecureInput: action('setSecureInput'),
   skinTone: 0,
 });
 

ts/components/ForwardMessageModal.tsx

@@ -49,6 +49,7 @@ export type DataPropsType = {
     caretLocation?: number
   ) => unknown;
   onTextTooLong: () => void;
+  setSecureInput: (enabled: boolean) => void;
 } & Pick<EmojiButtonProps, 'recentEmojis' | 'skinTone'>;
 
 type ActionPropsType = Pick<
@@ -78,6 +79,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
   recentEmojis,
   removeLinkPreview,
   skinTone,
+  setSecureInput,
 }) => {
   const inputRef = useRef<null | HTMLInputElement>(null);
   const inputApiRef = React.useRef<InputApi | undefined>();
@@ -306,6 +308,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
                 onPickEmoji={onPickEmoji}
                 onSubmit={forwardMessage}
                 onTextTooLong={onTextTooLong}
+                setSecureInput={setSecureInput}
               />
               <div className="module-ForwardMessageModal__emoji">
                 <EmojiButton

ts/state/smart/ForwardMessageModal.tsx

@@ -34,6 +34,7 @@ export type SmartForwardMessageModalProps = {
     caretLocation?: number
   ) => unknown;
   onTextTooLong: () => void;
+  setSecureInput: (enabled: boolean) => void;
 };
 
 const mapStateToProps = (
@@ -48,6 +49,7 @@ const mapStateToProps = (
     onClose,
     onEditorStateChange,
     onTextTooLong,
+    setSecureInput,
   } = props;
 
   const candidateConversations = getAllComposableConversations(state);
@@ -68,6 +70,7 @@ const mapStateToProps = (
     recentEmojis,
     skinTone,
     onTextTooLong,
+    setSecureInput,
   };
 };
 

ts/textsecure/WebAPI.ts

@@ -2119,6 +2119,7 @@ export function initialize({
         auth.groupPublicParamsHex,
         auth.authCredentialPresentationHex
       );
+      const safeInviteLinkPassword = toWebSafeBase64(inviteLinkPassword);
 
       const response: ArrayBuffer = await _ajax({
         basicAuth,
@@ -2127,7 +2128,8 @@ export function initialize({
         host: storageUrl,
         httpType: 'GET',
         responseType: 'arraybuffer',
-        urlParameters: `/${toWebSafeBase64(inviteLinkPassword)}`,
+        urlParameters: `/${safeInviteLinkPassword}`,
+        redactUrl: _createRedactor(safeInviteLinkPassword),
       });
 
       return window.textsecure.protobuf.GroupJoinInfo.decode(response);
@@ -2143,6 +2145,9 @@ export function initialize({
         options.authCredentialPresentationHex
       );
       const data = changes.toArrayBuffer();
+      const safeInviteLinkPassword = inviteLinkBase64
+        ? toWebSafeBase64(inviteLinkBase64)
+        : undefined;
 
       const response: ArrayBuffer = await _ajax({
         basicAuth,
@@ -2152,8 +2157,11 @@ export function initialize({
         host: storageUrl,
         httpType: 'PATCH',
         responseType: 'arraybuffer',
-        urlParameters: inviteLinkBase64
+        urlParameters: safeInviteLinkPassword
-          ? `?inviteLinkPassword=${toWebSafeBase64(inviteLinkBase64)}`
+          ? `?inviteLinkPassword=${safeInviteLinkPassword}`
+          : undefined,
+        redactUrl: safeInviteLinkPassword
+          ? _createRedactor(safeInviteLinkPassword)
           : undefined,
       });
 

ts/views/conversation_view.ts

@@ -631,6 +631,9 @@ Whisper.ConversationView = Whisper.View.extend({
         bodyRanges: Array<typeof window.Whisper.BodyRangeType>,
         caretLocation?: number
       ) => this.onEditorStateChange(msg, bodyRanges, caretLocation),
+      setSecureInput: (enabled: boolean) => {
+        window.setSecureInput(enabled);
+      },
       onTextTooLong: () => this.showToast(Whisper.MessageBodyTooLongToast),
       onChooseAttachment: this.onChooseAttachment.bind(this),
       getQuotedMessage: () => this.model.get('quotedMessageId'),
@@ -2255,6 +2258,9 @@ Whisper.ConversationView = Whisper.View.extend({
               {},
               document.querySelector('.module-ForwardMessageModal')
             ),
+          setSecureInput: (enabled: boolean) => {
+            window.setSecureInput(enabled);
+          },
         }
       ),
     });

ts/window.d.ts

@@ -224,6 +224,7 @@ declare global {
     setAutoHideMenuBar: (value: WhatIsThis) => void;
     setBadgeCount: (count: number) => void;
     setMenuBarVisibility: (value: WhatIsThis) => void;
+    setSecureInput: (enabled: boolean) => void;
     showConfirmationDialog: (options: ConfirmationDialogViewProps) => void;
     showKeyboardShortcuts: () => void;
     storage: {