From 34ae766893f4c0aa31a6a5b3c5653c567a03f387 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 27 Jan 2021 14:27:41 +0000 Subject: [PATCH] Wire up MSC2858 brand attribute For better brand adherance. Also removes old support for https IdP icons. --- res/css/views/elements/_SSOButtons.scss | 18 ++++++++++ res/img/element-icons/brands/apple.svg | 3 ++ res/img/element-icons/brands/facebook.svg | 4 +++ res/img/element-icons/brands/github.svg | 3 ++ res/img/element-icons/brands/gitlab.svg | 9 +++++ res/img/element-icons/brands/google.svg | 6 ++++ res/img/element-icons/brands/twitter.svg | 3 ++ src/Login.ts | 10 ++++++ src/components/views/elements/SSOButtons.tsx | 38 +++++++++++++++----- 9 files changed, 86 insertions(+), 8 deletions(-) create mode 100644 res/img/element-icons/brands/apple.svg create mode 100644 res/img/element-icons/brands/facebook.svg create mode 100644 res/img/element-icons/brands/github.svg create mode 100644 res/img/element-icons/brands/gitlab.svg create mode 100644 res/img/element-icons/brands/google.svg create mode 100644 res/img/element-icons/brands/twitter.svg diff --git a/res/css/views/elements/_SSOButtons.scss b/res/css/views/elements/_SSOButtons.scss index c61247655c..d20f2cafce 100644 --- a/res/css/views/elements/_SSOButtons.scss +++ b/res/css/views/elements/_SSOButtons.scss @@ -30,6 +30,8 @@ limitations under the License. width: 100%; padding-left: 32px; padding-right: 32px; + border-color: $input-border-color; + color: $primary-fg-color; > img { object-fit: contain; @@ -56,3 +58,19 @@ limitations under the License. } } } + +.mx_SSOButton.mx_SSOButton_brand_facebook { + background-color: #3c5a99; + border-color: #3c5a99; + color: #ffffff; +} +.mx_SSOButton.mx_SSOButton_brand_google { + background-color: #eb4335; + border-color: #eb4335; + color: #ffffff; +} +.mx_SSOButton.mx_SSOButton_brand_twitter { + background-color: #47acdf; + border-color: #47acdf; + color: #ffffff; +} diff --git a/res/img/element-icons/brands/apple.svg b/res/img/element-icons/brands/apple.svg new file mode 100644 index 0000000000..308c3c5d5a --- /dev/null +++ b/res/img/element-icons/brands/apple.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/brands/facebook.svg b/res/img/element-icons/brands/facebook.svg new file mode 100644 index 0000000000..087ddacdff --- /dev/null +++ b/res/img/element-icons/brands/facebook.svg @@ -0,0 +1,4 @@ + + + + diff --git a/res/img/element-icons/brands/github.svg b/res/img/element-icons/brands/github.svg new file mode 100644 index 0000000000..503719520b --- /dev/null +++ b/res/img/element-icons/brands/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/brands/gitlab.svg b/res/img/element-icons/brands/gitlab.svg new file mode 100644 index 0000000000..df84c41e21 --- /dev/null +++ b/res/img/element-icons/brands/gitlab.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/res/img/element-icons/brands/google.svg b/res/img/element-icons/brands/google.svg new file mode 100644 index 0000000000..25f2bb7f0a --- /dev/null +++ b/res/img/element-icons/brands/google.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/res/img/element-icons/brands/twitter.svg b/res/img/element-icons/brands/twitter.svg new file mode 100644 index 0000000000..4fc3d2f2a2 --- /dev/null +++ b/res/img/element-icons/brands/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Login.ts b/src/Login.ts index 6493b244e0..aecc0493c7 100644 --- a/src/Login.ts +++ b/src/Login.ts @@ -33,10 +33,20 @@ interface IPasswordFlow { type: "m.login.password"; } +export enum IdentityProviderBrand { + Gitlab = "org.matrix.gitlab", + Github = "org.matrix.github", + Apple = "org.matrix.apple", + Google = "org.matrix.google", + Facebook = "org.matrix.facebook", + Twitter = "org.matrix.twitter", +} + export interface IIdentityProvider { id: string; name: string; icon?: string; + brand?: IdentityProviderBrand | string; } export interface ISSOFlow { diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx index 5c3098d807..cc894eaf03 100644 --- a/src/components/views/elements/SSOButtons.tsx +++ b/src/components/views/elements/SSOButtons.tsx @@ -22,13 +22,32 @@ import {MatrixClient} from "matrix-js-sdk/src/client"; import PlatformPeg from "../../../PlatformPeg"; import AccessibleButton from "./AccessibleButton"; import {_t} from "../../../languageHandler"; -import {IIdentityProvider, ISSOFlow} from "../../../Login"; +import {IdentityProviderBrand, IIdentityProvider, ISSOFlow} from "../../../Login"; interface ISSOButtonProps extends Omit { idp: IIdentityProvider; mini?: boolean; } +const getIcon = (brand: IdentityProviderBrand | string) => { + switch (brand) { + case IdentityProviderBrand.Apple: + return require(`../../../../res/img/element-icons/brands/apple.svg`); + case IdentityProviderBrand.Facebook: + return require(`../../../../res/img/element-icons/brands/facebook.svg`); + case IdentityProviderBrand.Github: + return require(`../../../../res/img/element-icons/brands/github.svg`); + case IdentityProviderBrand.Gitlab: + return require(`../../../../res/img/element-icons/brands/gitlab.svg`); + case IdentityProviderBrand.Google: + return require(`../../../../res/img/element-icons/brands/google.svg`); + case IdentityProviderBrand.Twitter: + return require(`../../../../res/img/element-icons/brands/twitter.svg`); + default: + return null; + } +} + const SSOButton: React.FC = ({ matrixClient, loginType, @@ -46,16 +65,19 @@ const SSOButton: React.FC = ({ }; let icon; - if (typeof idp?.icon === "string" && (idp.icon.startsWith("mxc://") || idp.icon.startsWith("https://"))) { - icon = {label}; + let brandClass; + const brandIcon = idp ? getIcon(idp.brand) : null; + if (brandIcon) { + const brandName = idp.brand.split(".").pop(); + brandClass = `mx_SSOButton_brand_${brandName}`; + icon = {brandName}; + } else if (typeof idp?.icon === "string" && idp.icon.startsWith("mxc://")) { + const src = matrixClient.mxcUrlToHttp(idp.icon, 24, 24, "crop", true); + icon = {idp.name}; } const classes = classNames("mx_SSOButton", { + [brandClass]: brandClass, mx_SSOButton_mini: mini, });