feat: Add ability to create guest links with password (SQSERVICES-1975)

package.json

@@ -5,7 +5,7 @@
     "@emotion/react": "11.10.6",
     "@types/eslint": "8.37.0",
     "@wireapp/avs": "9.1.13",
-    "@wireapp/core": "40.1.9",
+    "@wireapp/core": "40.1.10",
     "@wireapp/lru-cache": "3.8.1",
     "@wireapp/react-ui-kit": "9.6.0",
     "@wireapp/store-engine-dexie": "2.0.5",

server/config.ts

@@ -178,6 +178,7 @@ const config = {
         LEGAL_HOLD_BLOCK: process.env.URL_SUPPORT_LEGAL_HOLD_BLOCK,
         MICROPHONE_ACCESS_DENIED: process.env.URL_SUPPORT_MICROPHONE_ACCESS_DENIED,
         PRIVACY_VERIFY_FINGERPRINT: process.env.URL_SUPPORT_PRIVACY_VERIFY_FINGERPRINT,
+        LEARN_MORE_ABOUT_GUEST_LINKS: process.env.URL_SUPPORT_LEARN_MORE_ABOUT_GUEST_LINKS,
         SCREEN_ACCESS_DENIED: process.env.URL_SUPPORT_SCREEN_ACCESS_DENIED,
       },
       TEAMS_BASE: process.env.URL_TEAMS_BASE,

src/i18n/en-US.json

@@ -572,8 +572,25 @@
   "guestOptionsCreateLink": "Create link",
   "guestOptionsInfoHeader": "Invite others with a link",
   "guestOptionsInfoText": "Invite others with a link to this conversation. Anyone with the link can join the conversation, even if they don’t have {{brandName}}.",
+  "guestOptionsInfoPasswordSecured": "Link is password secured",
+  "guestOptionsInfoTextWithPassword": "Users are asked to enter the password before they can join the conversation with a guest link.",
+  "guestOptionsInfoTextForgetPassword": "Forgot password? Revoke the link and create a new one.",
+  "guestOptionsInfoModalTitle": "Create password secured link",
+  "guestOptionsInfoModalTitleSubTitle": "People who want to join the conversation via the guest link need to enter this password first.",  
+  "guestOptionsInfoModalCancel": "Cancel",  
+  "guestOptionsInfoModalFormLabel": "Guest link password",
+  "guestOptionsInfoModalAction": "Create Link",  
+  "guestOptionsInfoModalTitleBoldSubTitle": "You can't change the password later. Make sure to copy and store it.",  
+  "guestOptionsInfoTextSecureWithPassword": "You can also secure the link with a password.",
+  "guestOptionsPasswordRadioLabel": "Guest link password",
+  "guestOptionsPasswordRadioOptionSecured": "Password secured",
+  "guestOptionsPasswordRadioOptionNotSecured": "Not password secured",
+  "guestOptionsPasswordCopyToClipboard": "Copy Password",
+  "guestOptionsPasswordCopyToClipboardSuccess": "Password Copied!",
+  "guestOptionsPasswordForceToCopy": "You need to copy the password so that you can store and share it with people you want to invite.",
   "guestOptionsRevokeLink": "Revoke link",
   "guestOptionsTitle": "Guests",
+  "generatePassword": "Generate password",
   "guestRoomConversationBadge": "[bold]Guests[/bold] are present",
   "guestRoomConversationBadgeExternal": "[bold]Externals[/bold] are present",
   "guestRoomConversationBadgeExternalAndGuest": "[bold]Externals[/bold] and [bold]guests[/bold] are present",
@@ -596,6 +613,11 @@
   "guestRoomToggleInfoDisabled": "You can't disable the guest option in this conversation, as it has been created by someone from another team.",
   "guestRoomToggleInfoExtended": "Open this conversation to people outside your team. You can always change it later.",
   "guestRoomToggleInfoHead": "Guest Links",
+  "guestLinkPasswordModal.headline": "[Group Conversation] \n Enter password",
+  "guestLinkPasswordModal.description": "Please enter the password you have received with the access link for this conversation.",
+  "guestLinkPasswordModal.passwordInputLabel": "Conversation password",
+  "guestLinkPasswordModal.learnMoreLink": "Learn more about guest links",
+  "guestLinkPasswordModal.joinConversation": "Join Conversation",
   "guestRoomToggleName": "Allow Guests",
   "historyInfo.learnMore": "Learn more",
   "historyInfo.noHistoryHeadline": "It’s the first time you’re using {brandName} on this device.",
@@ -814,6 +836,8 @@
   "modalConversationGuestOptionsGetCodeMessage": "Could not get access link.",
   "modalConversationGuestOptionsRequestCodeMessage": "Could not request access link. Please try again.",
   "modalConversationGuestOptionsRevokeCodeMessage": "Could not revoke access link. Please try again.",
+  "modalGuestLinkJoinPlaceholder": "Password Input",
+  "modalGuestLinkJoinHelperText": "Must have at least one: uppercase letter, lowercase letter, number, symbol",
   "modalConversationJoinConfirm": "Join",
   "modalConversationJoinFullHeadline": "You could not join the conversation",
   "modalConversationJoinFullMessage": "The conversation is full.",

src/script/Config.ts

@@ -69,6 +69,8 @@ export class Configuration {
       MICROPHONE_ACCESS_DENIED: 'https://support.wire.com/hc/articles/202590081',
       PRIVACY_VERIFY_FINGERPRINT: 'https://support.wire.com/hc/en-us/articles/207692235',
       SCREEN_ACCESS_DENIED: 'https://support.wire.com/hc/articles/202935412',
+      LEARN_MORE_ABOUT_GUEST_LINKS:
+        'https://support.wire.com/hc/en-us/articles/360000574069-Share-a-link-with-a-person-without-a-Wire-account-to-join-a-guest-room-conversation-in-my-team',
     },
     TEAMS_BASE: 'https://teams.wire.com',
     TEAMS_BILLING: 'https://teams.wire.com/billing',

src/script/auth/component/GuestLinkPasswordModal.test.tsx

@@ -0,0 +1,65 @@
+/*
+ * Wire
+ * Copyright (C) 2023 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {fireEvent, render} from '@testing-library/react';
+
+import {GuestLinkPasswordModal, GuestLinkPasswordModalProps} from './GuestLinkPasswordModal';
+
+import {withIntl, withTheme} from '../util/test/TestUtil';
+
+describe('GuestLinkPasswordModal', () => {
+  const onSubmitPasswordMock = jest.fn();
+  const props: GuestLinkPasswordModalProps = {
+    onSubmitPassword: onSubmitPasswordMock,
+  };
+
+  beforeEach(() => {
+    onSubmitPasswordMock.mockClear();
+  });
+
+  it('should call onSubmitPassword with the password value when the form is submitted', () => {
+    const {getByTestId} = render(withTheme(withIntl(<GuestLinkPasswordModal {...props} />)));
+    const input = getByTestId('guest-link-join-password-input') as HTMLInputElement;
+    const joinConversationButton = getByTestId('guest-link-join-submit-button') as HTMLButtonElement;
+    fireEvent.change(input, {target: {value: 'password'}});
+    joinConversationButton.click();
+    expect(onSubmitPasswordMock).toHaveBeenCalledWith('password');
+  });
+
+  it('should disable the join conversation button when the password input is empty', () => {
+    const {getByTestId} = render(withTheme(withIntl(<GuestLinkPasswordModal {...props} />)));
+    const joinConversationButton = getByTestId('guest-link-join-submit-button') as HTMLButtonElement;
+    expect(joinConversationButton.disabled).toBe(true);
+  });
+
+  it('should enable the join conversation button when the password input is not empty', () => {
+    const {getByTestId} = render(withTheme(withIntl(<GuestLinkPasswordModal {...props} />)));
+    const input = getByTestId('guest-link-join-password-input');
+    const joinConversationButton = getByTestId('guest-link-join-submit-button') as HTMLButtonElement;
+    fireEvent.change(input, {target: {value: 'password'}});
+    expect(joinConversationButton.disabled).toBe(false);
+  });
+
+  it('should not call onSubmitPassword with an empty string when the form is submitted with an empty password input', () => {
+    const {getByTestId} = render(withTheme(withIntl(<GuestLinkPasswordModal {...props} />)));
+    const joinConversationButton = getByTestId('guest-link-join-submit-button') as HTMLButtonElement;
+    joinConversationButton.click();
+    expect(onSubmitPasswordMock).toHaveBeenCalledTimes(0);
+  });
+});

src/script/auth/component/GuestLinkPasswordModal.tsx

@@ -0,0 +1,89 @@
+/*
+ * Wire
+ * Copyright (C) 2023 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import React, {useState} from 'react';
+
+import {useIntl} from 'react-intl';
+
+import {Button, COLOR, Container, Form, H2, Input, Link, Modal, Text} from '@wireapp/react-ui-kit';
+
+import {Config} from '../../Config';
+import {guestLinkPasswordModalStrings} from '../../strings';
+
+export interface GuestLinkPasswordModalProps {
+  onSubmitPassword: (password: string) => void;
+}
+
+const GuestLinkPasswordModal: React.FC<GuestLinkPasswordModalProps> = ({onSubmitPassword}) => {
+  const {formatMessage: _} = useIntl();
+  const [passwordValue, setPasswordValue] = useState<string>('');
+
+  const onSubmit = () => {
+    onSubmitPassword(passwordValue);
+  };
+
+  return (
+    <Modal>
+      <Container style={{maxWidth: '400px'}}>
+        <H2 style={{whiteSpace: 'break-spaces', fontWeight: 500, marginTop: '10px', textAlign: 'center'}}>
+          {_(guestLinkPasswordModalStrings.headline)}
+        </H2>
+        <Text block fontSize="16px" style={{marginBottom: 24}}>
+          {_(guestLinkPasswordModalStrings.description)}
+        </Text>
+        <Form
+          name="guest-password-join-form"
+          data-uie-name="guest-password-join-form"
+          onSubmit={onSubmit}
+          autoComplete="off"
+        >
+          <Input
+            data-uie-name="guest-link-join-password-input"
+            name="guest-join-password"
+            required
+            placeholder={_(guestLinkPasswordModalStrings.passwordInputLabel)}
+            label={_(guestLinkPasswordModalStrings.passwordInputLabel)}
+            id="guest_link_join_password"
+            className="modal__input"
+            type="password"
+            autoComplete="off"
+            value={passwordValue}
+            onChange={event => setPasswordValue(event.currentTarget.value)}
+          />
+        </Form>
+        <Link href={Config.getConfig().URL.SUPPORT.LEARN_MORE_ABOUT_GUEST_LINKS} target="_blank">
+          <Text block color={COLOR.BLUE} style={{textDecoration: 'underline', marginBottom: 24}}>
+            {_(guestLinkPasswordModalStrings.learnMoreLink)}
+          </Text>
+        </Link>
+        <Button
+          block
+          type="button"
+          disabled={passwordValue === ''}
+          onClick={onSubmit}
+          data-uie-name="guest-link-join-submit-button"
+        >
+          {_(guestLinkPasswordModalStrings.joinConversation)}
+        </Button>
+      </Container>
+    </Modal>
+  );
+};
+
+export {GuestLinkPasswordModal};

src/script/auth/module/action/AuthAction.ts

@@ -66,6 +66,7 @@ export class AuthAction {
     code: string,
     uri?: string,
     getEntropy?: () => Promise<Uint8Array>,
+    password?: string,
   ): ThunkAction => {
     const onBeforeLogin: LoginLifecycleFunction = async (dispatch, getState, {actions: {authAction}}) =>
       dispatch(authAction.doSilentLogout());
@@ -74,7 +75,7 @@ export class AuthAction {
       getState,
       {actions: {localStorageAction, conversationAction}},
     ) => {
-      const conversation = await dispatch(conversationAction.doJoinConversationByCode(key, code, uri));
+      const conversation = await dispatch(conversationAction.doJoinConversationByCode(key, code, uri, password));
       const domain = conversation?.qualified_conversation?.domain;
       return (
         conversation &&

src/script/auth/module/action/BackendError.ts

@@ -60,6 +60,7 @@ export class BackendError extends Error {
     CONVERSATION_CODE_NOT_FOUND: 'no-conversation-code',
     CONVERSATION_NOT_FOUND: 'no-conversation',
     CONVERSATION_TOO_MANY_MEMBERS: 'too-many-members',
+    INVALID_CONVERSATION_PASSWORD: 'invalid-conversation-password',
   };
 
   static GENERAL_ERRORS = {

src/script/auth/module/action/ConversationAction.ts

@@ -37,11 +37,16 @@ export class ConversationAction {
     };
   };
 
-  doJoinConversationByCode = (key: string, code: string, uri?: string): ThunkAction<Promise<ConversationEvent>> => {
+  doJoinConversationByCode = (
+    key: string,
+    code: string,
+    uri?: string,
+    password?: string,
+  ): ThunkAction<Promise<ConversationEvent>> => {
     return async (dispatch, getState, {apiClient}) => {
       dispatch(ConversationActionCreator.startJoinConversationByCode());
       try {
-        const conversationEvent = await apiClient.api.conversation.postJoinByCode({code, key, uri});
+        const conversationEvent = await apiClient.api.conversation.postJoinByCode({code, key, uri, password});
         dispatch(ConversationActionCreator.successfulJoinConversationByCode(conversationEvent));
         return conversationEvent;
       } catch (error) {