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

server/config/client.config.ts

@@ -71,11 +71,11 @@
       SHOW_LOADING_INFORMATION: env.FEATURE_SHOW_LOADING_INFORMATION == 'true',
       USE_CORE_CRYPTO: env.FEATURE_USE_CORE_CRYPTO == 'true',
       MAX_USERS_TO_PING_WITHOUT_ALERT:
         (env.FEATURE_MAX_USERS_TO_PING_WITHOUT_ALERT && Number(env.FEATURE_MAX_USERS_TO_PING_WITHOUT_ALERT)) || 3,
     },
     MAX_GROUP_PARTICIPANTS: (env.MAX_GROUP_PARTICIPANTS && Number(env.MAX_GROUP_PARTICIPANTS)) || 500,
     MAX_VIDEO_PARTICIPANTS: (env.MAX_VIDEO_PARTICIPANTS && Number(env.MAX_VIDEO_PARTICIPANTS)) || 4,
     NEW_PASSWORD_MINIMUM_LENGTH: (env.NEW_PASSWORD_MINIMUM_LENGTH && Number(env.NEW_PASSWORD_MINIMUM_LENGTH)) || 8,
     URL: {
       ACCOUNT_BASE: env.URL_ACCOUNT_BASE,
       MOBILE_BASE: env.URL_MOBILE_BASE,
@@ -95,6 +95,7 @@
         MICROPHONE_ACCESS_DENIED: env.URL_SUPPORT_MICROPHONE_ACCESS_DENIED,
         PRIVACY_VERIFY_FINGERPRINT: env.URL_SUPPORT_PRIVACY_VERIFY_FINGERPRINT,
         SCREEN_ACCESS_DENIED: env.URL_SUPPORT_SCREEN_ACCESS_DENIED,
+        LEARN_MORE_ABOUT_GUEST_LINKS: env.URL_LEARN_MORE_ABOUT_GUEST_LINKS,
         NON_FEDERATING_INFO: env.URL_SUPPORT_NON_FEDERATING_INFO,
         OAUTH_LEARN_MORE: env.URL_SUPPORT_OAUTH_LEARN_MORE,
         OFFLINE_BACKEND: env.URL_SUPPORT_OFFLINE_BACKEND,

server/config/env.ts

@@ -246,6 +246,8 @@ export type Env = {
 
   URL_SUPPORT_SCREEN_ACCESS_DENIED: string;
 
+  URL_LEARN_MORE_ABOUT_GUEST_LINKS: string;
+
   URL_SUPPORT_NON_FEDERATING_INFO: string;
 
   URL_SUPPORT_OAUTH_LEARN_MORE: string;

src/i18n/en-US.json

@@ -8,6 +8,7 @@
   "BackendError.LABEL.CONVERSATION_CODE_NOT_FOUND": "This link is no longer valid. Ask the person who invited you how to join.",
   "BackendError.LABEL.CONVERSATION_NOT_FOUND": "CONVERSATION_NOT_FOUND",
   "BackendError.LABEL.CONVERSATION_TOO_MANY_MEMBERS": "This conversation has reached the limit of participants",
+  "BackendErrorLabel.INVALID_CONVERSATION_PASSWORD": "The password is incorrect, please try again.",
   "BackendError.LABEL.EMAIL_EXISTS": "This email address is already in use. {supportEmailExistsLink}",
   "BackendError.LABEL.EMAIL_REQUIRED": "You can’t use your username as two-factor authentication is activated. Please log in with your email instead.",
   "BackendError.LABEL.HANDLE_EXISTS": "This username is already taken",
@@ -634,8 +635,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",
@@ -658,6 +676,15 @@
   "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": "{conversationName} \n Enter password",
+  "guestLinkPasswordModal.headlineDefault": "Group Conversation \n Enter password",
+  "guestLinkPasswordModal.description": "Please enter the password you have received with the access link for this conversation.",
+  "guestLinkPasswordModal.conversationPasswordProtected": "This conversation is password protected.",
+  "guestLinkPasswordModal.passwordInputLabel": "Conversation password",
+  "guestLinkPasswordModal.passwordInputPlaceholder": "Enter Conversation password",
+  "guestLinkPasswordModal.learnMoreLink": "Learn more about guest links",
+  "guestLinkPasswordModal.joinConversation": "Join Conversation",
+  "guestLinkPasswordModal.passwordIncorrect": "Password is incorrect, please try again.",
   "guestRoomToggleName": "Allow Guests",
   "historyInfo.learnMore": "Learn more",
   "historyInfo.noHistoryHeadline": "It’s the first time you’re using {brandName} on this device.",
@@ -876,6 +903,11 @@
   "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": "Enter password",
+  "modalGuestLinkJoinConfirmPlaceholder": "Confirm your password",
+  "modalGuestLinkJoinLabel": "Set password",
+  "modalGuestLinkJoinConfirmLabel": "Confirm password",
+  "modalGuestLinkJoinHelperText": "Use at least {{minPasswordLength}} characters, with one lowercase letter, one capital letter, a number, and a special character.",
   "modalConversationJoinConfirm": "Join",
   "modalConversationJoinFullHeadline": "You could not join the conversation",
   "modalConversationJoinFullMessage": "The conversation is full.",

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

@@ -0,0 +1,68 @@
+/*
+ * 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 {JoinGuestLinkPasswordModal, JoinGuestLinkPasswordModalProps} from './JoinGuestLinkPasswordModal';
+
+import {withIntl, withTheme} from '../util/test/TestUtil';
+
+describe('JoinGuestLinkPasswordModal', () => {
+  const onSubmitPasswordMock = jest.fn();
+  const props: JoinGuestLinkPasswordModalProps = {
+    onSubmitPassword: onSubmitPasswordMock,
+    onClose: jest.fn(),
+    conversationName: 'test group',
+    error: null,
+  };
+
+  beforeEach(() => {
+    onSubmitPasswordMock.mockClear();
+  });
+
+  it('should call onSubmitPassword with the password value when the form is submitted', () => {
+    const {getByTestId} = render(withTheme(withIntl(<JoinGuestLinkPasswordModal {...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(<JoinGuestLinkPasswordModal {...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(<JoinGuestLinkPasswordModal {...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(<JoinGuestLinkPasswordModal {...props} />)));
+    const joinConversationButton = getByTestId('guest-link-join-submit-button') as HTMLButtonElement;
+    joinConversationButton.click();
+    expect(onSubmitPasswordMock).toHaveBeenCalledTimes(0);
+  });
+});

src/script/auth/component/JoinGuestLinkPasswordModal.tsx

@@ -0,0 +1,112 @@
+/*
+ * 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 {StatusCodes as HTTP_STATUS} from 'http-status-codes';
+import {useIntl} from 'react-intl';
+
+import {Button, COLOR, Container, ErrorMessage, Form, H2, Input, Link, Modal, Text} from '@wireapp/react-ui-kit';
+
+import {Config} from '../../Config';
+import {joinGuestLinkPasswordModalStrings} from '../../strings';
+
+export interface JoinGuestLinkPasswordModalProps {
+  onSubmitPassword: (password: string) => void;
+  isLoading?: boolean;
+  conversationName?: string;
+  error: (Error & {label?: string; code?: number; message?: string}) | null;
+  onClose: () => void;
+}
+
+const JoinGuestLinkPasswordModal: React.FC<JoinGuestLinkPasswordModalProps> = ({
+  error,
+  onClose,
+  isLoading,
+  conversationName,
+  onSubmitPassword,
+}) => {
+  const {formatMessage: _} = useIntl();
+  const [passwordValue, setPasswordValue] = useState<string>('');
+
+  const onSubmit = (event: React.FormEvent<HTMLFormElement | HTMLButtonElement>) => {
+    event.preventDefault();
+    onSubmitPassword(passwordValue);
+  };
+
+  const Error = () => {
+    if (error?.code === HTTP_STATUS.FORBIDDEN || error?.code === HTTP_STATUS.BAD_REQUEST) {
+      return <ErrorMessage>{_(joinGuestLinkPasswordModalStrings.passwordIncorrect)}</ErrorMessage>;
+    }
+    return null;
+  };
+
+  return (
+    <Modal onClose={onClose}>
+      <Container style={{maxWidth: '400px'}}>
+        <H2 style={{whiteSpace: 'break-spaces', fontWeight: 500, marginTop: '10px', textAlign: 'center'}}>
+          {conversationName
+            ? _(joinGuestLinkPasswordModalStrings.headline, {conversationName})
+            : _(joinGuestLinkPasswordModalStrings.headlineDefault)}
+        </H2>
+        <Text block fontSize="var(--font-size-base)" style={{marginBottom: 24}}>
+          {_(joinGuestLinkPasswordModalStrings.description)}
+        </Text>
+        <Form
+          name="guest-password-join-form"
+          data-uie-name="guest-password-join-form"
+          onSubmit={(event: React.FormEvent<HTMLFormElement>) => onSubmit(event)}
+          autoComplete="off"
+        >
+          <Input
+            error={<Error />}
+            data-uie-name="guest-link-join-password-input"
+            name="guest-join-password"
+            required
+            placeholder={_(joinGuestLinkPasswordModalStrings.passwordInputLabel)}
+            label={_(joinGuestLinkPasswordModalStrings.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}}>
+            {_(joinGuestLinkPasswordModalStrings.learnMoreLink)}
+          </Text>
+        </Link>
+        <Button
+          showLoading={isLoading}
+          block
+          type="button"
+          disabled={!passwordValue}
+          onClick={(event: React.FormEvent<HTMLButtonElement>) => onSubmit(event)}
+          data-uie-name="guest-link-join-submit-button"
+        >
+          {_(joinGuestLinkPasswordModalStrings.joinConversation)}
+        </Button>
+      </Container>
+    </Modal>
+  );
+};
+
+export {JoinGuestLinkPasswordModal};

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/ConversationAction.ts

@@ -17,7 +17,11 @@
  *
  */
 
+import type {ConversationJoinData} from '@wireapp/api-client/lib/conversation/data/ConversationJoinData';
 import type {ConversationEvent} from '@wireapp/api-client/lib/event/';
+import {StatusCodes as HTTP_STATUS} from 'http-status-codes';
+
+import {isBackendError} from 'Util/TypePredicateUtil';
 
 import {ConversationActionCreator} from './creator/';
 
@@ -37,18 +41,54 @@ 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) {
+        /*
+          Backend does return a password-invalid error even though we have not submitted any password
+          expected: passsword-required.
+          received: password-invalid.
+          we have to dispatch conversation info with has_password field in order to handle error message in JoinGuestLinkPasswordModal properly.
+        */
+        if (isBackendError(error) && !password && error.code === HTTP_STATUS.FORBIDDEN) {
+          dispatch(
+            ConversationActionCreator.successfulConversationCodeGetInfo({
+              has_password: true,
+            } as ConversationJoinData),
+          );
+          throw error;
+        }
         dispatch(ConversationActionCreator.failedJoinConversationByCode(error));
         throw error;
       }
     };
   };
+
+  doGetConversationInfoByCode = (key: string, code: string): ThunkAction<Promise<ConversationJoinData | undefined>> => {
+    return async (dispatch, getState, {apiClient}) => {
+      dispatch(ConversationActionCreator.startConversationCodeGetInfo());
+      try {
+        const conversationInfo = await apiClient.api.conversation.getJoinByCode({code, key});
+        dispatch(ConversationActionCreator.successfulConversationCodeGetInfo(conversationInfo));
+        return conversationInfo;
+      } catch (error) {
+        if (isBackendError(error)) {
+          dispatch(ConversationActionCreator.failedConversationCodeGetInfo(error));
+          return undefined;
+        }
+        throw error;
+      }
+    };
+  };
 }
 export const conversationAction = new ConversationAction();