diff --git a/app/screens/login/index.tsx b/app/screens/login/index.tsx index d8e644c663..013d57420f 100644 --- a/app/screens/login/index.tsx +++ b/app/screens/login/index.tsx @@ -35,7 +35,7 @@ export interface LoginOptionsProps extends LaunchProps { license: ClientLicense; serverDisplayName: string; serverUrl: string; - ssoOptions: Record; + ssoOptions: SsoWithOptions; theme: Theme; } @@ -85,7 +85,7 @@ const LoginOptions = ({ const isTablet = useIsTablet(); const translateX = useSharedValue(dimensions.width); const numberSSOs = useMemo(() => { - return Object.values(ssoOptions).filter((v) => v).length; + return Object.values(ssoOptions).filter((v) => v.enabled).length; }, [ssoOptions]); const description = useMemo(() => { if (hasLoginForm) { diff --git a/app/screens/login/sso_options.tsx b/app/screens/login/sso_options.tsx index 12cab08715..e4a6c248e6 100644 --- a/app/screens/login/sso_options.tsx +++ b/app/screens/login/sso_options.tsx @@ -2,19 +2,17 @@ // See LICENSE.txt for license information. import React from 'react'; -import {Image, ImageSourcePropType, View} from 'react-native'; +import {useIntl} from 'react-intl'; +import {Image, ImageSourcePropType, Text, View} from 'react-native'; import Button from 'react-native-button'; import CompassIcon from '@components/compass_icon'; -import FormattedText from '@components/formatted_text'; import {Sso} from '@constants'; -import {t} from '@i18n'; import {buttonBackgroundStyle} from '@utils/buttonStyles'; import {makeStyleSheetFromTheme, changeOpacity} from '@utils/theme'; type SsoInfo = { - defaultMessage: string; - id: string; + text: string; imageSrc?: ImageSourcePropType; compassIcon?: string; }; @@ -22,40 +20,38 @@ type SsoInfo = { type Props = { goToSso: (ssoType: string) => void; ssoOnly: boolean; - ssoOptions: Record; + ssoOptions: SsoWithOptions; theme: Theme; } const SsoOptions = ({goToSso, ssoOnly, ssoOptions, theme}: Props) => { + const {formatMessage} = useIntl(); const styles = getStyleSheet(theme); const styleButtonBackground = buttonBackgroundStyle(theme, 'lg', 'primary'); const getSsoButtonOptions = ((ssoType: string): SsoInfo => { const sso: SsoInfo = {} as SsoInfo; + const options = ssoOptions[ssoType]; switch (ssoType) { case Sso.SAML: - sso.defaultMessage = 'SAML'; + sso.text = options.text || formatMessage({id: 'mobile.login_options.saml', defaultMessage: 'SAML'}); sso.compassIcon = 'lock'; - sso.id = t('mobile.login_options.saml'); break; case Sso.GITLAB: - sso.defaultMessage = 'GitLab'; + sso.text = formatMessage({id: 'mobile.login_options.gitlab', defaultMessage: 'GitLab'}); sso.imageSrc = require('@assets/images/Icon_Gitlab.png'); - sso.id = t('mobile.login_options.gitlab'); break; case Sso.GOOGLE: - sso.defaultMessage = 'Google'; + sso.text = formatMessage({id: 'mobile.login_options.google', defaultMessage: 'Google'}); sso.imageSrc = require('@assets/images/Icon_Google.png'); - sso.id = t('mobile.login_options.google'); break; case Sso.OFFICE365: - sso.defaultMessage = 'Office 365'; + sso.text = formatMessage({id: 'mobile.login_options.office365', defaultMessage: 'Office 365'}); sso.imageSrc = require('@assets/images/Icon_Office.png'); - sso.id = t('mobile.login_options.office365'); break; case Sso.OPENID: - sso.defaultMessage = 'Open ID'; - sso.id = t('mobile.login_options.openid'); + sso.text = options.text || formatMessage({id: 'mobile.login_options.openid', defaultMessage: 'Open ID'}); + sso.imageSrc = require('@assets/images/Icon_Openid.png'); break; default: @@ -64,7 +60,7 @@ const SsoOptions = ({goToSso, ssoOnly, ssoOptions, theme}: Props) => { }); const enabledSSOs = Object.keys(ssoOptions).filter( - (ssoType: string) => ssoOptions[ssoType], + (ssoType: string) => ssoOptions[ssoType].enabled, ); let styleViewContainer; @@ -76,7 +72,7 @@ const SsoOptions = ({goToSso, ssoOnly, ssoOptions, theme}: Props) => { const componentArray = []; for (const ssoType of enabledSSOs) { - const {compassIcon, defaultMessage, id, imageSrc} = getSsoButtonOptions(ssoType); + const {compassIcon, text, imageSrc} = getSsoButtonOptions(ssoType); const handlePress = () => { goToSso(ssoType); }; @@ -105,21 +101,21 @@ const SsoOptions = ({goToSso, ssoOnly, ssoOptions, theme}: Props) => { style={styles.buttonTextContainer} > {ssoOnly && ( - + testID={'pretext' + text} + > + {text} + )} - + testID={text} + > + {text} + , ); diff --git a/app/utils/server/index.ts b/app/utils/server/index.ts index 65995608a2..eee4525f6f 100644 --- a/app/utils/server/index.ts +++ b/app/utils/server/index.ts @@ -75,12 +75,12 @@ export function loginOptions(config: ClientConfig, license: ClientLicense) { } const ldapEnabled = isLicensed && config.EnableLdap === 'true' && license.LDAP === 'true'; const hasLoginForm = config.EnableSignInWithEmail === 'true' || config.EnableSignInWithUsername === 'true' || ldapEnabled; - const ssoOptions: Record = { - [Sso.SAML]: samlEnabled, - [Sso.GITLAB]: gitlabEnabled, - [Sso.GOOGLE]: googleEnabled, - [Sso.OFFICE365]: o365Enabled, - [Sso.OPENID]: openIdEnabled, + const ssoOptions: SsoWithOptions = { + [Sso.SAML]: {enabled: samlEnabled, text: config.SamlLoginButtonText}, + [Sso.GITLAB]: {enabled: gitlabEnabled}, + [Sso.GOOGLE]: {enabled: googleEnabled}, + [Sso.OFFICE365]: {enabled: o365Enabled}, + [Sso.OPENID]: {enabled: openIdEnabled, text: config.OpenIdButtonText}, }; const enabledSSOs = Object.keys(ssoOptions).filter((key) => ssoOptions[key]); const numberSSOs = enabledSSOs.length; diff --git a/assets/base/images/Icon_Openid.png b/assets/base/images/Icon_Openid.png new file mode 100644 index 0000000000..e16da3c973 Binary files /dev/null and b/assets/base/images/Icon_Openid.png differ diff --git a/assets/base/images/Icon_Openid@2x.png b/assets/base/images/Icon_Openid@2x.png new file mode 100644 index 0000000000..b622c003c0 Binary files /dev/null and b/assets/base/images/Icon_Openid@2x.png differ diff --git a/assets/base/images/Icon_Openid@3x.png b/assets/base/images/Icon_Openid@3x.png new file mode 100644 index 0000000000..6ad9b87cf8 Binary files /dev/null and b/assets/base/images/Icon_Openid@3x.png differ diff --git a/types/screens/login.d.ts b/types/screens/login.d.ts new file mode 100644 index 0000000000..6bc712f437 --- /dev/null +++ b/types/screens/login.d.ts @@ -0,0 +1,9 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +type SsoOption = { + enabled: boolean; + text?: string; +}; + +type SsoWithOptions = Record;