message: core: add separate prop union for SignInPage for using a single provider
diff: * limitations under the License.
  */
  -import React from 'react';
  +import React, { useEffect, useState } from 'react';
  import { Page } from '../Page';
  import { Header } from '../Header';
  import { Content } from '../Content/Content';
  import { ContentHeader } from '../ContentHeader/ContentHeader';
  -import { Grid } from '@material-ui/core';
  +import { Grid, Button, Typography } from '@material-ui/core';
  import { SignInPageProps, useApi, configApiRef } from '@backstage/core-api';
  import { useSignInProviders, getSignInProviders } from './providers';
  -import { IdentityProviders } from './types';
  +import { IdentityProviders, SignInConfig } from './types';
  import { Progress } from '../../components/Progress';
  -import { useStyles } from './styles';
  +import { GridItem, useStyles } from './styles';
  +import { InfoCard } from '../InfoCard';
  -export type Props = SignInPageProps & {
  +type MultiSignInPageProps = SignInPageProps & {
  providers: IdentityProviders;
  title?: string;
  align?: 'center' | 'left';
  };
  -export const SignInPage = ({
  +type SingleSignInPageProps = SignInPageProps & {
  + provider: SignInConfig;
  + auto?: boolean;
  +};
  +
  +export type Props = MultiSignInPageProps | SingleSignInPageProps;
  +
  +export const MultiSignInPage = ({
  onResult,
  providers = [],
  title,
  align = 'left',
  -}: Props) => {
  +}: MultiSignInPageProps) => {
  const configApi = useApi(configApiRef);
  const classes = useStyles();
  @@ -69,3 +77,86 @@ export const SignInPage = ({
  </Page>
  );
  };
  +
  +export const SingleSignInPage = ({
  + onResult,
  + provider,
  + auto,
  +}: SingleSignInPageProps) => {
  + const classes = useStyles();
  + const authApi = useApi(provider.apiRef);
  + const configApi = useApi(configApiRef);
  +
  + const [retry, setRetry] = useState<{} | boolean | undefined>(auto);
  + const [error, setError] = useState<Error>();
  +
  + useEffect(() => {
  + const login = async () => {
  + const identity = await authApi.getBackstageIdentity({
  + instantPopup: true,
  + });
  +
  + const profile = await authApi.getProfile();
  + onResult({
  + userId: identity!.id,
  + profile: profile!,
  + getIdToken: () => {
  + return authApi.getBackstageIdentity().then(i => i!.idToken);
  + },
  + signOut: async () => {
  + await authApi.signOut();
  + },
  + });
  + };
  +
  + if (retry) {
  + login().catch(setError);
  + }
  + }, [onResult, authApi, retry]);
  +
  + return (
  + <Page themeId="home">
  + <Header title={configApi.getString('app.title')} />
  + <Content>
  + <Grid
  + container
  + justify="center"
  + spacing={2}
  + component="ul"
  + classes={classes}
  + >
  + <GridItem>
  + <InfoCard
  + variant="fullHeight"
  + title={provider.title}
  + actions={
  + <Button
  + color="primary"
  + variant="outlined"
  + onClick={() => setRetry({})}
  + >
  + Sign In
  + </Button>
  + }
  + >
  + <Typography variant="body1">{provider.message}</Typography>
  + {error && error.name !== 'PopupRejectedError' && (
  + <Typography variant="body1" color="error">
  + {error.message}
  + </Typography>
  + )}
  + </InfoCard>
  + </GridItem>
  + </Grid>
  + </Content>
  + </Page>
  + );
  +};
  +
  +export const SignInPage = (props: Props) => {
  + if ('provider' in props) {
  + return <SingleSignInPage {...props} />;
  + }
  +
  + return <MultiSignInPage {...props} />;
  +};
  