2020-05-27 09:43:28 -04:00
|
|
|
import React from 'react'
|
2020-07-29 16:58:01 -04:00
|
|
|
import { useSelector } from 'react-redux'
|
2020-08-16 10:02:26 -04:00
|
|
|
import { ApplicationState } from '../../../redux'
|
2020-08-23 09:03:42 -04:00
|
|
|
import { IconName } from '../../common/fork-awesome/types'
|
2020-05-27 09:43:28 -04:00
|
|
|
import { SocialLinkButton } from './social-link-button/social-link-button'
|
2020-05-14 09:41:38 -04:00
|
|
|
|
2020-05-16 14:59:59 -04:00
|
|
|
export enum OneClickType {
|
2020-05-27 09:43:28 -04:00
|
|
|
'DROPBOX' = 'dropbox',
|
|
|
|
'FACEBOOK' = 'facebook',
|
|
|
|
'GITHUB' = 'github',
|
|
|
|
'GITLAB' = 'gitlab',
|
|
|
|
'GOOGLE' = 'google',
|
|
|
|
'OAUTH2' = 'oauth2',
|
|
|
|
'SAML' = 'saml',
|
|
|
|
'TWITTER' = 'twitter'
|
2020-05-14 09:41:38 -04:00
|
|
|
}
|
|
|
|
|
2020-07-29 16:58:01 -04:00
|
|
|
interface OneClickMetadata {
|
2020-05-27 09:43:28 -04:00
|
|
|
name: string,
|
2020-05-31 16:21:32 -04:00
|
|
|
icon: IconName,
|
2020-05-27 09:43:28 -04:00
|
|
|
className: string,
|
|
|
|
url: string
|
2020-07-29 16:58:01 -04:00
|
|
|
}
|
2020-05-14 09:41:38 -04:00
|
|
|
|
2020-07-29 16:58:01 -04:00
|
|
|
const buildBackendAuthUrl = (backendUrl: string, backendName: string): string => {
|
|
|
|
return `${backendUrl}/auth/${backendName}`
|
2020-05-27 09:43:28 -04:00
|
|
|
}
|
2020-05-14 09:41:38 -04:00
|
|
|
|
2020-07-29 16:58:01 -04:00
|
|
|
const getMetadata = (backendUrl: string, oneClickType: OneClickType): OneClickMetadata => {
|
|
|
|
const buildBackendAuthUrlWithFirstParameterSet = (backendName: string): string => buildBackendAuthUrl(backendUrl, backendName)
|
2020-05-27 09:43:28 -04:00
|
|
|
switch (oneClickType) {
|
|
|
|
case OneClickType.DROPBOX:
|
|
|
|
return {
|
|
|
|
name: 'Dropbox',
|
2020-05-31 16:21:32 -04:00
|
|
|
icon: 'dropbox',
|
2020-05-27 09:43:28 -04:00
|
|
|
className: 'btn-social-dropbox',
|
2020-07-29 16:58:01 -04:00
|
|
|
url: buildBackendAuthUrlWithFirstParameterSet('dropbox')
|
2020-05-27 09:43:28 -04:00
|
|
|
}
|
|
|
|
case OneClickType.FACEBOOK:
|
|
|
|
return {
|
|
|
|
name: 'Facebook',
|
2020-05-31 16:21:32 -04:00
|
|
|
icon: 'facebook',
|
2020-05-27 09:43:28 -04:00
|
|
|
className: 'btn-social-facebook',
|
2020-07-29 16:58:01 -04:00
|
|
|
url: buildBackendAuthUrlWithFirstParameterSet('facebook')
|
2020-05-27 09:43:28 -04:00
|
|
|
}
|
|
|
|
case OneClickType.GITHUB:
|
|
|
|
return {
|
|
|
|
name: 'GitHub',
|
2020-05-31 16:21:32 -04:00
|
|
|
icon: 'github',
|
2020-05-27 09:43:28 -04:00
|
|
|
className: 'btn-social-github',
|
2020-07-29 16:58:01 -04:00
|
|
|
url: buildBackendAuthUrlWithFirstParameterSet('github')
|
2020-05-27 09:43:28 -04:00
|
|
|
}
|
|
|
|
case OneClickType.GITLAB:
|
|
|
|
return {
|
|
|
|
name: 'GitLab',
|
2020-05-31 16:21:32 -04:00
|
|
|
icon: 'gitlab',
|
2020-05-27 09:43:28 -04:00
|
|
|
className: 'btn-social-gitlab',
|
2020-07-29 16:58:01 -04:00
|
|
|
url: buildBackendAuthUrlWithFirstParameterSet('gitlab')
|
2020-05-27 09:43:28 -04:00
|
|
|
}
|
|
|
|
case OneClickType.GOOGLE:
|
|
|
|
return {
|
|
|
|
name: 'Google',
|
2020-05-31 16:21:32 -04:00
|
|
|
icon: 'google',
|
2020-05-27 09:43:28 -04:00
|
|
|
className: 'btn-social-google',
|
2020-07-29 16:58:01 -04:00
|
|
|
url: buildBackendAuthUrlWithFirstParameterSet('google')
|
2020-05-27 09:43:28 -04:00
|
|
|
}
|
|
|
|
case OneClickType.OAUTH2:
|
|
|
|
return {
|
|
|
|
name: 'OAuth2',
|
|
|
|
icon: 'address-card',
|
|
|
|
className: 'btn-primary',
|
2020-07-29 16:58:01 -04:00
|
|
|
url: buildBackendAuthUrlWithFirstParameterSet('oauth2')
|
2020-05-27 09:43:28 -04:00
|
|
|
}
|
|
|
|
case OneClickType.SAML:
|
|
|
|
return {
|
|
|
|
name: 'SAML',
|
|
|
|
icon: 'users',
|
|
|
|
className: 'btn-success',
|
2020-07-29 16:58:01 -04:00
|
|
|
url: buildBackendAuthUrlWithFirstParameterSet('saml')
|
2020-05-27 09:43:28 -04:00
|
|
|
}
|
|
|
|
case OneClickType.TWITTER:
|
|
|
|
return {
|
|
|
|
name: 'Twitter',
|
2020-05-31 16:21:32 -04:00
|
|
|
icon: 'twitter',
|
2020-05-27 09:43:28 -04:00
|
|
|
className: 'btn-social-twitter',
|
2020-07-29 16:58:01 -04:00
|
|
|
url: buildBackendAuthUrlWithFirstParameterSet('twitter')
|
2020-05-27 09:43:28 -04:00
|
|
|
}
|
|
|
|
default:
|
|
|
|
return {
|
|
|
|
name: '',
|
|
|
|
icon: 'exclamation',
|
|
|
|
className: '',
|
|
|
|
url: '#'
|
|
|
|
}
|
|
|
|
}
|
2020-05-14 09:41:38 -04:00
|
|
|
}
|
|
|
|
|
2020-05-16 14:59:59 -04:00
|
|
|
export interface ViaOneClickProps {
|
2020-05-27 09:43:28 -04:00
|
|
|
oneClickType: OneClickType;
|
|
|
|
optionalName?: string;
|
2020-05-14 09:41:38 -04:00
|
|
|
}
|
|
|
|
|
2020-09-26 03:54:17 -04:00
|
|
|
export const ViaOneClick: React.FC<ViaOneClickProps> = ({ oneClickType, optionalName }) => {
|
2020-07-29 16:58:01 -04:00
|
|
|
const backendUrl = useSelector((state: ApplicationState) => state.apiUrl.apiUrl)
|
|
|
|
const { name, icon, className, url } = getMetadata(backendUrl, oneClickType)
|
2020-05-27 09:43:28 -04:00
|
|
|
const text = optionalName || name
|
2020-07-29 16:58:01 -04:00
|
|
|
|
2020-05-27 09:43:28 -04:00
|
|
|
return (
|
|
|
|
<SocialLinkButton
|
|
|
|
backgroundClass={className}
|
|
|
|
icon={icon}
|
|
|
|
href={url}
|
|
|
|
title={text}
|
|
|
|
>
|
|
|
|
{text}
|
|
|
|
</SocialLinkButton>
|
|
|
|
)
|
2020-05-14 09:41:38 -04:00
|
|
|
}
|