core: add separate prop union for SignInPage for using a single provider

packages/core/src/layout/SignInPage/SignInPage.tsx

@@ -14,30 +14,38 @@
  * 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} />;
+};