acceptOrganizationInvite.tsx 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. import {Fragment} from 'react';
  2. import {browserHistory, RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {urlEncode} from '@sentry/utils';
  5. import {logout} from 'sentry/actionCreators/account';
  6. import Alert from 'sentry/components/alert';
  7. import Button from 'sentry/components/button';
  8. import ExternalLink from 'sentry/components/links/externalLink';
  9. import Link from 'sentry/components/links/link';
  10. import NarrowLayout from 'sentry/components/narrowLayout';
  11. import {t, tct} from 'sentry/locale';
  12. import ConfigStore from 'sentry/stores/configStore';
  13. import space from 'sentry/styles/space';
  14. import AsyncView from 'sentry/views/asyncView';
  15. import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
  16. type InviteDetails = {
  17. existingMember: boolean;
  18. hasAuthProvider: boolean;
  19. needs2fa: boolean;
  20. needsAuthentication: boolean;
  21. needsEmailVerification: boolean;
  22. orgSlug: string;
  23. requireSso: boolean;
  24. ssoProvider?: string;
  25. };
  26. type Props = RouteComponentProps<{memberId: string; token: string}, {}>;
  27. type State = AsyncView['state'] & {
  28. acceptError: boolean | undefined;
  29. accepting: boolean | undefined;
  30. inviteDetails: InviteDetails;
  31. };
  32. class AcceptOrganizationInvite extends AsyncView<Props, State> {
  33. disableErrorReport = false;
  34. getEndpoints(): ReturnType<AsyncView['getEndpoints']> {
  35. const {memberId, token} = this.props.params;
  36. return [['inviteDetails', `/accept-invite/${memberId}/${token}/`]];
  37. }
  38. getTitle() {
  39. return t('Accept Organization Invite');
  40. }
  41. makeNextUrl(path: string) {
  42. return `${path}?${urlEncode({next: window.location.pathname})}`;
  43. }
  44. handleLogout = async (e: React.MouseEvent) => {
  45. e.preventDefault();
  46. await logout(this.api);
  47. window.location.replace(this.makeNextUrl('/auth/login/'));
  48. };
  49. handleAcceptInvite = async () => {
  50. const {memberId, token} = this.props.params;
  51. this.setState({accepting: true});
  52. try {
  53. await this.api.requestPromise(`/accept-invite/${memberId}/${token}/`, {
  54. method: 'POST',
  55. });
  56. browserHistory.replace(`/${this.state.inviteDetails.orgSlug}/`);
  57. } catch {
  58. this.setState({acceptError: true});
  59. }
  60. this.setState({accepting: false});
  61. };
  62. get existingMemberAlert() {
  63. const user = ConfigStore.get('user');
  64. return (
  65. <Alert type="warning" data-test-id="existing-member">
  66. {tct(
  67. 'Your account ([email]) is already a member of this organization. [switchLink:Switch accounts]?',
  68. {
  69. email: user.email,
  70. switchLink: (
  71. <Link
  72. to=""
  73. data-test-id="existing-member-link"
  74. onClick={this.handleLogout}
  75. />
  76. ),
  77. }
  78. )}
  79. </Alert>
  80. );
  81. }
  82. get authenticationActions() {
  83. const {inviteDetails} = this.state;
  84. return (
  85. <Fragment>
  86. {!inviteDetails.requireSso && (
  87. <p data-test-id="action-info-general">
  88. {t(
  89. `To continue, you must either create a new account, or login to an
  90. existing Sentry account.`
  91. )}
  92. </p>
  93. )}
  94. {inviteDetails.hasAuthProvider && (
  95. <p data-test-id="action-info-sso">
  96. {inviteDetails.requireSso
  97. ? tct(
  98. `Note that [orgSlug] has required Single Sign-On (SSO) using
  99. [authProvider]. You may create an account by authenticating with
  100. the organization's SSO provider.`,
  101. {
  102. orgSlug: <strong>{inviteDetails.orgSlug}</strong>,
  103. authProvider: inviteDetails.ssoProvider,
  104. }
  105. )
  106. : tct(
  107. `Note that [orgSlug] has enabled Single Sign-On (SSO) using
  108. [authProvider]. You may create an account by authenticating with
  109. the organization's SSO provider.`,
  110. {
  111. orgSlug: <strong>{inviteDetails.orgSlug}</strong>,
  112. authProvider: inviteDetails.ssoProvider,
  113. }
  114. )}
  115. </p>
  116. )}
  117. <Actions>
  118. <ActionsLeft>
  119. {inviteDetails.hasAuthProvider && (
  120. <Button
  121. data-test-id="sso-login"
  122. priority="primary"
  123. href={this.makeNextUrl(`/auth/login/${inviteDetails.orgSlug}/`)}
  124. >
  125. {t('Join with %s', inviteDetails.ssoProvider)}
  126. </Button>
  127. )}
  128. {!inviteDetails.requireSso && (
  129. <Button
  130. data-test-id="create-account"
  131. priority="primary"
  132. href={this.makeNextUrl('/auth/register/')}
  133. >
  134. {t('Create a new account')}
  135. </Button>
  136. )}
  137. </ActionsLeft>
  138. {!inviteDetails.requireSso && (
  139. <ExternalLink
  140. href={this.makeNextUrl('/auth/login/')}
  141. openInNewTab={false}
  142. data-test-id="link-with-existing"
  143. >
  144. {t('Login using an existing account')}
  145. </ExternalLink>
  146. )}
  147. </Actions>
  148. </Fragment>
  149. );
  150. }
  151. get warning2fa() {
  152. const {inviteDetails} = this.state;
  153. return (
  154. <Fragment>
  155. <p data-test-id="2fa-warning">
  156. {tct(
  157. 'To continue, [orgSlug] requires all members to configure two-factor authentication.',
  158. {orgSlug: inviteDetails.orgSlug}
  159. )}
  160. </p>
  161. <Actions>
  162. <Button priority="primary" to="/settings/account/security/">
  163. {t('Configure Two-Factor Auth')}
  164. </Button>
  165. </Actions>
  166. </Fragment>
  167. );
  168. }
  169. get warningEmailVerification() {
  170. const {inviteDetails} = this.state;
  171. return (
  172. <Fragment>
  173. <p data-test-id="email-verification-warning">
  174. {tct(
  175. 'To continue, [orgSlug] requires all members to verify their email address.',
  176. {orgSlug: inviteDetails.orgSlug}
  177. )}
  178. </p>
  179. <Actions>
  180. <Button priority="primary" to="/settings/account/emails/">
  181. {t('Verify Email Address')}
  182. </Button>
  183. </Actions>
  184. </Fragment>
  185. );
  186. }
  187. get acceptActions() {
  188. const {inviteDetails, accepting} = this.state;
  189. return (
  190. <Fragment>
  191. {inviteDetails.hasAuthProvider && !inviteDetails.requireSso && (
  192. <p data-test-id="action-info-sso">
  193. {tct(
  194. `Note that [orgSlug] has enabled Single Sign-On (SSO) using
  195. [authProvider]. You may join the organization by authenticating with
  196. the organization's SSO provider or via your standard account authentication.`,
  197. {
  198. orgSlug: <strong>{inviteDetails.orgSlug}</strong>,
  199. authProvider: inviteDetails.ssoProvider,
  200. }
  201. )}
  202. </p>
  203. )}
  204. <Actions>
  205. <ActionsLeft>
  206. {inviteDetails.hasAuthProvider && !inviteDetails.requireSso && (
  207. <Button
  208. data-test-id="sso-login"
  209. priority="primary"
  210. href={this.makeNextUrl(`/auth/login/${inviteDetails.orgSlug}/`)}
  211. >
  212. {t('Join with %s', inviteDetails.ssoProvider)}
  213. </Button>
  214. )}
  215. <Button
  216. data-test-id="join-organization"
  217. priority="primary"
  218. disabled={accepting}
  219. onClick={this.handleAcceptInvite}
  220. >
  221. {t('Join the %s organization', inviteDetails.orgSlug)}
  222. </Button>
  223. </ActionsLeft>
  224. </Actions>
  225. </Fragment>
  226. );
  227. }
  228. renderError() {
  229. return (
  230. <NarrowLayout>
  231. <Alert type="warning">
  232. {t('This organization invite link is no longer valid.')}
  233. </Alert>
  234. </NarrowLayout>
  235. );
  236. }
  237. renderBody() {
  238. const {inviteDetails, acceptError} = this.state;
  239. return (
  240. <NarrowLayout>
  241. <SettingsPageHeader title={t('Accept organization invite')} />
  242. {acceptError && (
  243. <Alert type="error">
  244. {t('Failed to join this organization. Please try again')}
  245. </Alert>
  246. )}
  247. <InviteDescription data-test-id="accept-invite">
  248. {tct('[orgSlug] is using Sentry to track and debug errors.', {
  249. orgSlug: <strong>{inviteDetails.orgSlug}</strong>,
  250. })}
  251. </InviteDescription>
  252. {inviteDetails.needsAuthentication
  253. ? this.authenticationActions
  254. : inviteDetails.existingMember
  255. ? this.existingMemberAlert
  256. : inviteDetails.needs2fa
  257. ? this.warning2fa
  258. : inviteDetails.needsEmailVerification
  259. ? this.warningEmailVerification
  260. : inviteDetails.requireSso
  261. ? this.authenticationActions
  262. : this.acceptActions}
  263. </NarrowLayout>
  264. );
  265. }
  266. }
  267. const Actions = styled('div')`
  268. display: flex;
  269. align-items: center;
  270. justify-content: space-between;
  271. margin-bottom: ${space(3)};
  272. `;
  273. const ActionsLeft = styled('span')`
  274. > a {
  275. margin-right: ${space(1)};
  276. }
  277. `;
  278. const InviteDescription = styled('p')`
  279. font-size: 1.2em;
  280. `;
  281. export default AcceptOrganizationInvite;