import React from 'react' ; import styled from 'styled-components' ; import Button from 'design/Button' ; import { fade } from 'design/theme/utils/colorManipulator' ; import * as Icons from 'design/Icon' ; import { AuthProviderType } from 'shared/services' ; const ButtonSso = ( props ) => { const { ssoType = 'unknown' , title , ... rest } = props ; const { color , Icon } = getSSOIcon ( ssoType ) ; return ( < StyledButton color = { color } block { ... rest } > { Boolean ( Icon ) && ( < IconBox > < Icon data - testid = "icon" / > < /IconBox>)} { title } < /StyledButton>); } ; type Props = { ssoType : SSOType ; title : string ; [ key ] : any ; } ; type SSOType = 'microsoft' | 'github' | 'bitbucket' | 'google' | 'openid' | 'unknown' ; function getSSOIcon ( type ) { switch ( type . toLowerCase ( ) ) { case 'microsoft' : return { color : '#2672ec' , Icon : Icons . Windows , type } ; case 'github' : return { color : '#444444' , Icon : Icons . Github , type } ; case 'bitbucket' : return { color : '#205081' , Icon : Icons . BitBucket , type } ; case 'google' : return { color : '#dd4b39' , Icon : Icons . Google , type } ; default : return { color : '#f7931e' , Icon : Icons . OpenID } ; } } export function guessProviderType ( displayName = '' , providerType ) { const name = displayName . toLowerCase ( ) ; if ( name . indexOf ( 'microsoft' ) !== - 1 ) { return 'microsoft' ; } if ( name . indexOf ( 'bitbucket' ) !== - 1 ) { return 'bitbucket' ; } if ( name . indexOf ( 'google' ) !== - 1 ) { return 'google' ; } if ( name . indexOf ( 'github' ) !== - 1 || providerType === 'github' ) { return 'github' ; } if ( providerType === 'oidc' ) { return 'openid' ; } return 'unknown' ; } const StyledButton = styled ( Button ) `
  background-color: ${ props => props . color };
  display: block;
  width: 100%;

  &:hover,
  &:focus {
    background: ${ props => fade ( props . color , 0.4 ) };
  }
  height: 40px;
  position: relative;
  box-sizing: border-box;

  ${ Icons . default } {
    font-size: 20px;
    opacity: 0.87;
  }
` ; const IconBox = styled . div `
  align-items: center;
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 56px;
  font-size: 24px;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
` ; export default ButtonSso ;