feat: oauth landing page [SQSERVICES-1775]

src/i18n/en-US.json

@@ -263,6 +263,7 @@
   "clientManager.headline": "Remove a device",
   "clientManager.logout": "Cancel process",
   "clientManager.subhead": "Remove one of your other devices to start using {brandName} on this one.",
+  "clientManager.oauth": "You are adding a new device. Only 7 devices can be active. Remove one of your devices to start using Wire on this one ({device}).",
   "collectionSectionAudio": "Audio",
   "collectionSectionFiles": "Files",
   "collectionSectionImages": "Images",
@@ -956,6 +957,18 @@
   "notificationTitleGroup": "{{user}} in {{conversation}}",
   "notificationVoiceChannelActivate": "Calling",
   "notificationVoiceChannelDeactivate": "Called",
+  "oauth.headline": "Permissions",
+  "oauth.logout": "Switch account",
+  "oauth.cancel": "Don't Allow",
+  "oauth.allow": "Allow",
+  "oauth.subhead": "{app} requires your permission to:",
+  "oauth.learnMore": "<learnMore>Learn more</learnMore> about these permissions in the settings.",
+  "oauth.details": "If you allow the permissions listed, Wire™ will be able to connect to your calendar. It won’t see the content of your calendar, just the ones happening with Wire. If you don’t grant the permissions, you can’t use this add-in.",
+  "oauth.privacypolicy": "Wire's <privacypolicy>Privacy Policy</privacypolicy>",
+  "oauth.scope.write_conversations": "Create conversations",
+  "oauth.scope.write_conversations_code": "Create conversation guest links",
+  "oauth.scope.read_self": "Access user information",
+  "oauth.scope.read_feature_configs": "Access team feature configurations",
   "ongoingAudioCall": "Ongoing audio call with {{conversationName}}.",
   "ongoingGroupAudioCall": "Ongoing conference call with {{conversationName}}.",
   "ongoingGroupVideoCall": "Ongoing video conference call with {{conversationName}}, your camera is {{cameraStatus}}.",
@@ -1309,4 +1322,4 @@
   "wireMacos": "{{brandName}} for macOS",
   "wireWindows": "{{brandName}} for Windows",
   "wire_for_web": "{{brandName}} for Web"
-}
+}

src/script/auth/component/AcceptNewsModal.tsx

@@ -46,8 +46,7 @@ const AcceptNewsModal = ({onConfirm, onDecline}: Props) => {
               <FormattedMessage
                 {...acceptNewsModalStrings.privacyDescription}
                 values={{
-                  // eslint-disable-next-line react/display-name
-                  strong: ((...chunks: any[]) => <strong>{chunks}</strong>) as any,
+                  strong: (...chunks: any[]) => <strong>{chunks}</strong>,
                 }}
               />
             </Text>

src/script/auth/component/AccountForm.tsx

@@ -264,8 +264,7 @@ const AccountFormComponent = ({account, ...props}: Props & ConnectedProps & Disp
             <FormattedMessage
               {...accountFormStrings.termsAndPrivacyPolicy}
               values={{
-                // eslint-disable-next-line react/display-name
-                privacypolicy: ((...chunks: string[] | React.ReactNode[]) => (
+                privacypolicy: (...chunks: string[] | React.ReactNode[]) => (
                   <a
                     target="_blank"
                     rel="noopener noreferrer"
@@ -274,9 +273,8 @@ const AccountFormComponent = ({account, ...props}: Props & ConnectedProps & Disp
                   >
                     {chunks}
                   </a>
-                )) as any,
-                // eslint-disable-next-line react/display-name
-                terms: ((...chunks: string[] | React.ReactNode[]) => (
+                ),
+                terms: (...chunks: string[] | React.ReactNode[]) => (
                   <a
                     target="_blank"
                     rel="noopener noreferrer"
@@ -289,15 +287,14 @@ const AccountFormComponent = ({account, ...props}: Props & ConnectedProps & Disp
                   >
                     {chunks}
                   </a>
-                )) as any,
+                ),
               }}
             />
           ) : (
             <FormattedMessage
               {...accountFormStrings.terms}
               values={{
-                // eslint-disable-next-line react/display-name
-                terms: ((...chunks: string[] | React.ReactNode[]) => (
+                terms: (...chunks: string[] | React.ReactNode[]) => (
                   <a
                     target="_blank"
                     rel="noopener noreferrer"
@@ -310,7 +307,7 @@ const AccountFormComponent = ({account, ...props}: Props & ConnectedProps & Disp
                   >
                     {chunks}
                   </a>
-                )) as any,
+                ),
               }}
             />
           )}

src/script/auth/component/ClientList.tsx

@@ -24,6 +24,7 @@ import {connect} from 'react-redux';
 import {useNavigate} from 'react-router-dom';
 import {AnyAction, Dispatch} from 'redux';
 
+import {UrlUtil} from '@wireapp/commons';
 import {ContainerXS, Loading} from '@wireapp/react-ui-kit';
 
 import {getLogger} from 'Util/Logger';
@@ -56,6 +57,7 @@ const ClientListComponent = ({
 }: Props & ConnectedProps & DispatchProps) => {
   const navigate = useNavigate();
   const [showLoading, setShowLoading] = React.useState(false);
+  const isOauth = UrlUtil.hasURLParameter(QUERY_KEY.SCOPE);
   const [currentlySelectedClient, setCurrentlySelectedClient] = React.useState<string | null>(null);
 
   const setSelectedClient = (clientId: string) => {
@@ -76,6 +78,11 @@ const ClientListComponent = ({
       await doInitializeClient(persist ? ClientType.PERMANENT : ClientType.TEMPORARY, password, SFAcode, entropy);
       removeLocalStorage(QUERY_KEY.CONVERSATION_CODE);
       removeLocalStorage(QUERY_KEY.JOIN_EXPIRES);
+
+      if (isOauth) {
+        return navigate(ROUTE.AUTHORIZE);
+      }
+
       return navigate(ROUTE.HISTORY_INFO);
     } catch (error) {
       logger.error(error);

src/script/auth/component/UnsupportedBrowser.tsx

@@ -84,7 +84,6 @@ export const UnsupportedBrowserComponent = ({
           ) : (
             <H3 css={{marginBottom: 10}} data-uie-name="element-unsupported-general">
               {_(unsupportedStrings.subheadBrowser, {
-                // eslint-disable-next-line react/display-name
                 strong: (...chunks: any[]) => <strong style={{fontWeight: 800}}>{chunks}</strong>,
               })}
             </H3>

src/script/auth/component/WirelessContainer.tsx

@@ -69,8 +69,7 @@ const WirelessContainer: React.FC<Props> = ({showCookiePolicyBanner, onCookiePol
                 {...cookiePolicyStrings.bannerText}
                 values={{
                   newline: <br />,
-                  // eslint-disable-next-line react/display-name
-                  strong: ((...chunks: any[]) => <strong>{chunks}</strong>) as any,
+                  strong: (...chunks: any[]) => <strong>{chunks}</strong>,
                 }}
               />
             </Link>

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

@@ -18,6 +18,7 @@
  */
 
 import {ClientType} from '@wireapp/api-client/lib/client/';
+import {RecursivePartial} from '@wireapp/commons/lib/util/TypeUtil';
 import {StatusCodes as HTTP_STATUS} from 'http-status-codes';
 
 import type {APIClient} from '@wireapp/api-client';
@@ -28,7 +29,7 @@ import {AuthActionCreator} from './creator/';
 
 import {mockStoreFactory} from '../../util/test/mockStoreFactory';
 
-import {actionRoot} from './';
+import {ActionRoot, actionRoot} from './';
 
 describe('AuthAction', () => {
   it('authenticates a user successfully', async () => {
@@ -129,14 +130,12 @@ describe('AuthAction', () => {
     backendError.code = HTTP_STATUS.FORBIDDEN;
     backendError.label = 'invalid-credentials';
     backendError.message = 'Authentication failed.';
-    const spies = {
-      generateClientPayload: jasmine.createSpy().and.returnValue({}),
-    };
+
     const mockedActions = {
       clientAction: {
-        generateClientPayload: spies.generateClientPayload,
+        generateClientPayload: jest.fn().mockReturnValue({}),
       },
-    };
+    } as RecursivePartial<ActionRoot>;
     const mockedCore = {
       login: () => Promise.reject(backendError),
     };

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

@@ -21,6 +21,9 @@ import type {DomainData} from '@wireapp/api-client/lib/account/DomainData';
 import type {LoginData, RegisterData, SendLoginCode} from '@wireapp/api-client/lib/auth/';
 import {VerificationActionType} from '@wireapp/api-client/lib/auth/VerificationActionType';
 import {ClientType} from '@wireapp/api-client/lib/client/';
+import {OAuthBody} from '@wireapp/api-client/lib/oauth/OAuthBody';
+import {OAuthClient} from '@wireapp/api-client/lib/oauth/OAuthClient';
+import type {TeamData} from '@wireapp/api-client/lib/team/';
 import {LowDiskSpaceError} from '@wireapp/store-engine/lib/engine/error';
 import {StatusCodes as HTTP_STATUS, StatusCodes} from 'http-status-codes';
 
@@ -145,6 +148,20 @@ export class AuthAction {
     };
   };
 
+  doPostOAuthCode = (oauthBody: OAuthBody): ThunkAction<Promise<string>> => {
+    return async (dispatch, getState, {apiClient}) => {
+      dispatch(AuthActionCreator.startSendOAuthCode());
+      try {
+        const url = await apiClient.api.oauth.postOAuthCode(oauthBody);
+        dispatch(AuthActionCreator.successfulSendOAuthCode());
+        return url;
+      } catch (error) {
+        dispatch(AuthActionCreator.failedSendOAuthCode(error));
+        throw error;
+      }
+    };
+  };
+
   doSendTwoFactorLoginCode = (email: string): ThunkAction => {
     return async (dispatch, getState, {apiClient}) => {
       dispatch(AuthActionCreator.startSendTwoFactorCode());
@@ -185,6 +202,34 @@ export class AuthAction {
     };
   };
 
+  doGetTeamData = (teamId: string): ThunkAction<Promise<TeamData>> => {
+    return async (dispatch, getState, {apiClient}) => {
+      dispatch(AuthActionCreator.startFetchTeam());
+      try {
+        const teamData = await apiClient.api.teams.team.getTeam(teamId);
+        dispatch(AuthActionCreator.successfulFetchTeam(teamData));
+        return teamData;
+      } catch (error) {
+        dispatch(AuthActionCreator.failedFetchTeam(error));
+        throw error;
+      }
+    };
+  };
+
+  doGetOAuthApplication = (applicationId: string): ThunkAction<Promise<OAuthClient>> => {
+    return async (dispatch, getState, {apiClient}) => {
+      dispatch(AuthActionCreator.startFetchOAuth());
+      try {
+        const application = await apiClient.api.oauth.getClient(applicationId);
+        dispatch(AuthActionCreator.successfulFetchOAuth(application));
+        return application;
+      } catch (error) {
+        dispatch(AuthActionCreator.failedFetchOAuth(error));
+        throw error;
+      }
+    };
+  };
+
   validateSSOCode = (code: string): ThunkAction => {
     return async (dispatch, getState, {apiClient}) => {
       const mapError = (error: any) => {

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

@@ -78,7 +78,7 @@ export class ClientAction {
     };
   };
 
-  generateClientPayload = (clientType: ClientType): ClientInfo | undefined => {
+  private generateClientPayload = (clientType: ClientType): ClientInfo | undefined => {
     if (clientType === ClientType.NONE) {
       return undefined;
     }