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/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/module/action/AuthAction.test.ts

@@ -129,12 +129,10 @@ 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: jasmine.createSpy().and.returnValue({}),
       },
     };
     const mockedCore = {

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 ?? getState().selfState.self.team ?? '');
+        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;
     }

src/script/auth/module/action/creator/AuthActionCreator.ts

@@ -19,6 +19,8 @@
 
 import type {SSOSettings} from '@wireapp/api-client/lib/account/SSOSettings';
 import type {RegisterData} from '@wireapp/api-client/lib/auth/';
+import {OAuthClient} from '@wireapp/api-client/lib/oauth/OAuthClient';
+import {TeamData} from '@wireapp/api-client/lib/team';
 
 import type {LoginDataState, RegistrationDataState} from '../../reducer/authReducer';
 
@@ -29,6 +31,12 @@ export enum AUTH_ACTION {
   ENTER_GENERIC_INVITATION_FLOW = 'ENTER_GENERIC_INVITATION_FLOW',
   ENTER_PERSONAL_CREATION_FLOW = 'ENTER_PERSONAL_CREATION_FLOW',
   ENTER_TEAM_CREATION_FLOW = 'ENTER_TEAM_CREATION_FLOW',
+  FETCH_TEAM_FAILED = 'FETCH_TEAM_FAILED',
+  FETCH_TEAM_START = 'FETCH_TEAM_START',
+  FETCH_TEAM_SUCCESS = 'FETCH_TEAM_SUCCESS',
+  FETCH_OAUTH_APP_FAILED = 'FETCH_OAUTH_APP_FAILED',
+  FETCH_OAUTH_APP_START = 'FETCH_OAUTH_APP_START',
+  FETCH_OAUTH_APP_SUCCESS = 'FETCH_OAUTH_APP_SUCCESS',
   GET_SSO_SETTINGS_FAILED = 'GET_SSO_SETTINGS_FAILED',
   GET_SSO_SETTINGS_START = 'GET_SSO_SETTINGS_START',
   GET_SSO_SETTINGS_SUCCESS = 'GET_SSO_SETTINGS_SUCCESS',
@@ -60,6 +68,9 @@ export enum AUTH_ACTION {
   SEND_PHONE_LOGIN_CODE_FAILED = 'SEND_PHONE_LOGIN_CODE_FAILED',
   SEND_PHONE_LOGIN_CODE_START = 'SEND_PHONE_LOGIN_CODE_START',
   SEND_PHONE_LOGIN_CODE_SUCCESS = 'SEND_PHONE_LOGIN_CODE_SUCCESS',
+  SEND_OAUTH_CODE_FAILED = 'SEND_OAUTH_CODE_FAILED',
+  SEND_OAUTH_CODE_START = 'SEND_OAUTH_CODE_START',
+  SEND_OAUTH_CODE_SUCCESS = 'SEND_OAUTH_CODE_SUCCESS',
   SEND_TWO_FACTOR_CODE_FAILED = 'SEND_TWO_FACTOR_CODE_FAILED',
   SEND_TWO_FACTOR_CODE_START = 'SEND_TWO_FACTOR_CODE_START',
   SEND_TWO_FACTOR_CODE_SUCCESS = 'SEND_TWO_FACTOR_CODE_SUCCESS',
@@ -77,9 +88,18 @@ export type AuthActions =
   | SendPhoneLoginCodeStartAction
   | SendPhoneLoginCodeSuccessAction
   | SendPhoneLoginCodeFailedAction
+  | SendOAuthCodeStartAction
+  | SendOAuthCodeSuccessAction
+  | SendOAuthCodeFailedAction
   | RegisterTeamStartAction
   | RegisterTeamSuccessAction
   | RegisterTeamFailedAction
+  | FetchTeamStartAction
+  | FetchTeamSuccessAction
+  | FetchTeamFailedAction
+  | FetchApplicationStartAction
+  | FetchApplicationSuccessAction
+  | FetchApplicationFailedAction
   | RegisterPersonalStartAction
   | RegisterPersonalSuccessAction
   | RegisterPersonalFailedAction
@@ -134,6 +154,17 @@ export interface SendPhoneLoginCodeFailedAction extends AppAction {
   readonly type: AUTH_ACTION.SEND_PHONE_LOGIN_CODE_FAILED;
 }
 
+export interface SendOAuthCodeStartAction extends AppAction {
+  readonly type: AUTH_ACTION.SEND_OAUTH_CODE_START;
+}
+export interface SendOAuthCodeSuccessAction extends AppAction {
+  readonly type: AUTH_ACTION.SEND_OAUTH_CODE_SUCCESS;
+}
+export interface SendOAuthCodeFailedAction extends AppAction {
+  readonly error: Error;
+  readonly type: AUTH_ACTION.SEND_OAUTH_CODE_FAILED;
+}
+
 export interface SendTwoFactorCodeStartAction extends AppAction {
   readonly type: AUTH_ACTION.SEND_TWO_FACTOR_CODE_START;
 }
@@ -157,6 +188,30 @@ export interface RegisterTeamFailedAction extends AppAction {
   readonly type: AUTH_ACTION.REGISTER_TEAM_FAILED;
 }
 
+export interface FetchTeamStartAction extends AppAction {
+  readonly type: AUTH_ACTION.FETCH_TEAM_START;
+}
+export interface FetchTeamSuccessAction extends AppAction {
+  readonly payload: TeamData;
+  readonly type: AUTH_ACTION.FETCH_TEAM_SUCCESS;
+}
+export interface FetchTeamFailedAction extends AppAction {
+  readonly error: Error;
+  readonly type: AUTH_ACTION.FETCH_TEAM_FAILED;
+}
+
+export interface FetchApplicationStartAction extends AppAction {
+  readonly type: AUTH_ACTION.FETCH_OAUTH_APP_START;
+}
+export interface FetchApplicationSuccessAction extends AppAction {
+  readonly payload: OAuthClient;
+  readonly type: AUTH_ACTION.FETCH_OAUTH_APP_SUCCESS;
+}
+export interface FetchApplicationFailedAction extends AppAction {
+  readonly error: Error;
+  readonly type: AUTH_ACTION.FETCH_OAUTH_APP_FAILED;
+}
+
 export interface RegisterPersonalStartAction extends AppAction {
   readonly type: AUTH_ACTION.REGISTER_PERSONAL_START;
 }
@@ -294,6 +349,19 @@ export class AuthActionCreator {
     type: AUTH_ACTION.SEND_PHONE_LOGIN_CODE_FAILED,
   });
 
+  static startSendOAuthCode = (): SendOAuthCodeStartAction => ({
+    type: AUTH_ACTION.SEND_OAUTH_CODE_START,
+  });
+
+  static successfulSendOAuthCode = (): SendOAuthCodeSuccessAction => ({
+    type: AUTH_ACTION.SEND_OAUTH_CODE_SUCCESS,
+  });
+
+  static failedSendOAuthCode = (error: Error): SendOAuthCodeFailedAction => ({
+    error,
+    type: AUTH_ACTION.SEND_OAUTH_CODE_FAILED,
+  });
+
   static startSendTwoFactorCode = (): SendTwoFactorCodeStartAction => ({
     type: AUTH_ACTION.SEND_TWO_FACTOR_CODE_START,
   });
@@ -321,6 +389,33 @@ export class AuthActionCreator {
     type: AUTH_ACTION.REGISTER_TEAM_FAILED,
   });
 
+  static startFetchTeam = (): FetchTeamStartAction => ({
+    type: AUTH_ACTION.FETCH_TEAM_START,
+  });
+
+  static successfulFetchTeam = (teamData: TeamData): FetchTeamSuccessAction => ({
+    payload: teamData,
+    type: AUTH_ACTION.FETCH_TEAM_SUCCESS,
+  });
+
+  static failedFetchTeam = (error: Error): FetchTeamFailedAction => ({
+    error,
+    type: AUTH_ACTION.FETCH_TEAM_FAILED,
+  });
+  static startFetchOAuth = (): FetchApplicationStartAction => ({
+    type: AUTH_ACTION.FETCH_OAUTH_APP_START,
+  });
+
+  static successfulFetchOAuth = (application: OAuthClient): FetchApplicationSuccessAction => ({
+    payload: application,
+    type: AUTH_ACTION.FETCH_OAUTH_APP_SUCCESS,
+  });
+
+  static failedFetchOAuth = (error: Error): FetchApplicationFailedAction => ({
+    error,
+    type: AUTH_ACTION.FETCH_OAUTH_APP_FAILED,
+  });
+
   static startRegisterPersonal = (): RegisterPersonalStartAction => ({
     type: AUTH_ACTION.REGISTER_PERSONAL_START,
   });

src/script/auth/module/reducer/authReducer.ts

@@ -20,6 +20,7 @@
 import type {SSOSettings} from '@wireapp/api-client/lib/account/SSOSettings';
 import {LoginData} from '@wireapp/api-client/lib/auth';
 import {ClientType} from '@wireapp/api-client/lib/client/';
+import {OAuthClient} from '@wireapp/api-client/lib/oauth/OAuthClient';
 import type {TeamData} from '@wireapp/api-client/lib/team/';
 import type {UserAsset} from '@wireapp/api-client/lib/user/';
 
@@ -56,6 +57,7 @@ export type AuthState = {
   readonly isAuthenticated: boolean;
   readonly isSendingTwoFactorCode: boolean;
   readonly loginData: LoginDataState;
+  readonly oAuthApp?: OAuthClient;
   readonly ssoSettings?: SSOSettings;
 };
 
@@ -86,6 +88,7 @@ export const initialAuthState: AuthState = {
   loginData: {
     clientType: Config.getConfig().FEATURE.DEFAULT_LOGIN_TEMPORARY_CLIENT ? ClientType.TEMPORARY : ClientType.PERMANENT,
   },
+  oAuthApp: undefined,
   ssoSettings: {
     default_sso_code: undefined,
   },
@@ -124,6 +127,8 @@ export function authReducer(state: AuthState = initialAuthState, action: AppActi
         isSendingTwoFactorCode: false,
       };
     }
+    case AUTH_ACTION.FETCH_OAUTH_APP_START:
+    case AUTH_ACTION.FETCH_TEAM_START:
     case AUTH_ACTION.REFRESH_START: {
       return {
         ...state,
@@ -150,6 +155,14 @@ export function authReducer(state: AuthState = initialAuthState, action: AppActi
         isAuthenticated: false,
       };
     }
+    case AUTH_ACTION.FETCH_OAUTH_APP_FAILED:
+    case AUTH_ACTION.FETCH_TEAM_FAILED: {
+      return {
+        ...state,
+        error: action.error,
+        fetching: false,
+      };
+    }
     case AUTH_ACTION.LOGIN_SUCCESS:
     case AUTH_ACTION.REFRESH_SUCCESS:
     case AUTH_ACTION.REGISTER_JOIN_SUCCESS:
@@ -164,6 +177,24 @@ export function authReducer(state: AuthState = initialAuthState, action: AppActi
         isAuthenticated: true,
       };
     }
+    case AUTH_ACTION.FETCH_TEAM_SUCCESS: {
+      return {
+        ...state,
+        account: {...state.account, team: action.payload},
+        error: null,
+        fetched: true,
+        fetching: false,
+      };
+    }
+    case AUTH_ACTION.FETCH_OAUTH_APP_SUCCESS: {
+      return {
+        ...state,
+        oAuthApp: action.payload,
+        error: null,
+        fetched: true,
+        fetching: false,
+      };
+    }
     case AUTH_ACTION.GET_SSO_SETTINGS_START: {
       return {
         ...state,