login.tsx 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. import {Component, Fragment} from 'react';
  2. import type {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import type {Client} from 'sentry/api';
  5. import {Alert} from 'sentry/components/alert';
  6. import {Button} from 'sentry/components/button';
  7. import LoadingError from 'sentry/components/loadingError';
  8. import LoadingIndicator from 'sentry/components/loadingIndicator';
  9. import NavTabs from 'sentry/components/navTabs';
  10. import {t, tct} from 'sentry/locale';
  11. import {space} from 'sentry/styles/space';
  12. import type {AuthConfig} from 'sentry/types';
  13. import withApi from 'sentry/utils/withApi';
  14. import LoginForm from './loginForm';
  15. import RegisterForm from './registerForm';
  16. import SsoForm from './ssoForm';
  17. const FORM_COMPONENTS = {
  18. login: LoginForm,
  19. register: RegisterForm,
  20. sso: SsoForm,
  21. } as const;
  22. type ActiveTab = keyof typeof FORM_COMPONENTS;
  23. type TabConfig = [key: ActiveTab, label: string, disabled?: boolean];
  24. type Props = RouteComponentProps<{orgId?: string}, {}> & {
  25. api: Client;
  26. };
  27. type State = {
  28. activeTab: ActiveTab;
  29. authConfig: null | AuthConfig;
  30. error: null | boolean;
  31. loading: boolean;
  32. };
  33. class Login extends Component<Props, State> {
  34. state: State = {
  35. loading: true,
  36. error: null,
  37. activeTab: 'login',
  38. authConfig: null,
  39. };
  40. componentDidMount() {
  41. this.fetchData();
  42. }
  43. handleSetTab = (activeTab: ActiveTab, event: React.MouseEvent) => {
  44. this.setState({activeTab});
  45. event.preventDefault();
  46. };
  47. fetchData = async () => {
  48. const {api} = this.props;
  49. try {
  50. const response = await api.requestPromise('/auth/config/');
  51. const {vsts_login_link, github_login_link, google_login_link, ...config} = response;
  52. const authConfig = {
  53. ...config,
  54. vstsLoginLink: vsts_login_link,
  55. githubLoginLink: github_login_link,
  56. googleLoginLink: google_login_link,
  57. };
  58. this.setState({authConfig});
  59. } catch (e) {
  60. this.setState({error: true});
  61. }
  62. this.setState({loading: false});
  63. };
  64. get hasAuthProviders() {
  65. if (this.state.authConfig === null) {
  66. return false;
  67. }
  68. const {githubLoginLink, googleLoginLink, vstsLoginLink} = this.state.authConfig;
  69. return !!(githubLoginLink || vstsLoginLink || googleLoginLink);
  70. }
  71. render() {
  72. const {loading, error, activeTab, authConfig} = this.state;
  73. const FormComponent = FORM_COMPONENTS[activeTab];
  74. const tabs: TabConfig[] = [
  75. ['login', t('Login')],
  76. ['sso', t('Single Sign-On')],
  77. ['register', t('Register'), !authConfig?.canRegister],
  78. ];
  79. const renderTab = ([key, label, disabled]: TabConfig) =>
  80. !disabled && (
  81. <li key={key} className={activeTab === key ? 'active' : ''}>
  82. <a href="#" onClick={e => this.handleSetTab(key, e)}>
  83. {label}
  84. </a>
  85. </li>
  86. );
  87. const {orgId} = this.props.params;
  88. return (
  89. <Fragment>
  90. <Header>
  91. <Heading>{t('Sign in to continue')}</Heading>
  92. <AuthNavTabs>{tabs.map(renderTab)}</AuthNavTabs>
  93. </Header>
  94. {loading && <LoadingIndicator />}
  95. {error && (
  96. <StyledLoadingError
  97. message={t('Unable to load authentication configuration')}
  98. onRetry={this.fetchData}
  99. />
  100. )}
  101. {!loading && authConfig !== null && !error && (
  102. <FormWrapper hasAuthProviders={this.hasAuthProviders}>
  103. {orgId !== undefined && (
  104. <Alert
  105. type="warning"
  106. trailingItems={
  107. <Button to="/" size="xs">
  108. Reload
  109. </Button>
  110. }
  111. >
  112. {tct(
  113. "Experimental SPA mode does not currently support SSO style login. To develop against the [org] you'll need to copy your production session cookie.",
  114. {org: this.props.params.orgId}
  115. )}
  116. </Alert>
  117. )}
  118. <FormComponent {...{authConfig}} />
  119. </FormWrapper>
  120. )}
  121. </Fragment>
  122. );
  123. }
  124. }
  125. const StyledLoadingError = styled(LoadingError)`
  126. margin: ${space(2)};
  127. `;
  128. const Header = styled('div')`
  129. border-bottom: 1px solid ${p => p.theme.border};
  130. padding: 20px 40px 0;
  131. `;
  132. const Heading = styled('h3')`
  133. font-size: 24px;
  134. margin: 0 0 20px 0;
  135. `;
  136. const AuthNavTabs = styled(NavTabs)`
  137. margin: 0;
  138. `;
  139. const FormWrapper = styled('div')<{hasAuthProviders: boolean}>`
  140. padding: 35px;
  141. width: ${p => (p.hasAuthProviders ? '600px' : '490px')};
  142. `;
  143. export default withApi(Login);