Support SSO provider brand + UI fixes

matrix-sdk-android/src/main/java/org/matrix/android/sdk/api/auth/data/SsoIdentityProvider.kt

@@ -38,15 +38,24 @@ data class SsoIdentityProvider(
          * If present then it must be an HTTPS URL to an image resource.
          * This should be hosted by the homeserver service provider to not leak the client's IP address unnecessarily.
          */
-        @Json(name = "icon") val iconUrl: String?
+        @Json(name = "icon") val iconUrl: String?,
+
+        /**
+         * The `brand` field is **optional**. It allows the client to style the login
+         * button to suit a particular brand. It should be a string matching the
+         * "Common namespaced identifier grammar" as defined in
+         * [MSC2758](https://github.com/matrix-org/matrix-doc/pull/2758).
+         */
+        @Json(name = "brand") val brand: String?
+
 ) : Parcelable {
 
     companion object {
-        // Not really defined by the spec, but we may define some ids here
+        const val BRAND_GOOGLE = "org.matrix.google"
-        const val ID_GOOGLE = "google"
+        const val BRAND_GITHUB = "org.matrix.github"
-        const val ID_GITHUB = "github"
+        const val BRAND_APPLE = "org.matrix.apple"
-        const val ID_APPLE = "apple"
+        const val BRAND_FACEBOOK = "org.matrix.facebook"
-        const val ID_FACEBOOK = "facebook"
+        const val BRAND_TWITTER = "org.matrix.twitter"
-        const val ID_TWITTER = "twitter"
+        const val BRAND_GITLAB = "org.matrix.gitlab"
     }
 }

matrix-sdk-android/src/main/java/org/matrix/android/sdk/internal/auth/data/LoginFlowResponse.kt

@@ -43,5 +43,11 @@ internal data class LoginFlow(
          * See MSC #2858
          */
         @Json(name = "org.matrix.msc2858.identity_providers")
-        val ssoIdentityProvider: List<SsoIdentityProvider>?
+        val _devSsoIdentityProvider: List<SsoIdentityProvider>? = null,
-)
+
+        @Json(name = "identity_providers")
+        val _ssoIdentityProvider: List<SsoIdentityProvider>? = null,
+
+) {
+        val ssoIdentityProvider = _ssoIdentityProvider ?: _devSsoIdentityProvider
+}

vector/src/main/java/im/vector/app/features/login/SocialLoginButtonsView.kt

@@ -83,25 +83,28 @@ class SocialLoginButtonsView @JvmOverloads constructor(context: Context, attrs:
         ssoIdentityProviders?.forEach { identityProvider ->
             // Use some heuristic to render buttons according to branding guidelines
             val button: MaterialButton = cachedViews[identityProvider.id]
-                    ?: when (identityProvider.id) {
+                    ?: when (identityProvider.brand) {
-                        SsoIdentityProvider.ID_GOOGLE   -> {
+                        SsoIdentityProvider.BRAND_GOOGLE   -> {
                             MaterialButton(context, null, R.attr.vctr_social_login_button_google_style)
                         }
-                        SsoIdentityProvider.ID_GITHUB   -> {
+                        SsoIdentityProvider.BRAND_GITHUB   -> {
                             MaterialButton(context, null, R.attr.vctr_social_login_button_github_style)
                         }
-                        SsoIdentityProvider.ID_APPLE    -> {
+                        SsoIdentityProvider.BRAND_APPLE    -> {
                             MaterialButton(context, null, R.attr.vctr_social_login_button_apple_style)
                         }
-                        SsoIdentityProvider.ID_FACEBOOK -> {
+                        SsoIdentityProvider.BRAND_FACEBOOK -> {
                             MaterialButton(context, null, R.attr.vctr_social_login_button_facebook_style)
                         }
-                        SsoIdentityProvider.ID_TWITTER  -> {
+                        SsoIdentityProvider.BRAND_TWITTER  -> {
                             MaterialButton(context, null, R.attr.vctr_social_login_button_twitter_style)
                         }
+                        SsoIdentityProvider.BRAND_GITLAB  -> {
+                            MaterialButton(context, null, R.attr.vctr_social_login_button_gitlab_style)
+                        }
                         else                            -> {
                             // TODO Use iconUrl
-                            MaterialButton(context, null, R.attr.materialButtonStyle).apply {
+                            MaterialButton(context, null, R.attr.materialButtonOutlinedStyle).apply {
                                 transformationMethod = null
                                 textAlignment = View.TEXT_ALIGNMENT_CENTER
                             }
@@ -131,12 +134,13 @@ class SocialLoginButtonsView @JvmOverloads constructor(context: Context, attrs:
         clipChildren = false
         if (isInEditMode) {
             ssoIdentityProviders = listOf(
-                    SsoIdentityProvider(SsoIdentityProvider.ID_GOOGLE, "Google", null),
+                    SsoIdentityProvider("Google", "Google", null, SsoIdentityProvider.BRAND_GOOGLE),
-                    SsoIdentityProvider(SsoIdentityProvider.ID_FACEBOOK, "Facebook", null),
+                    SsoIdentityProvider("Facebook", "Facebook",null, SsoIdentityProvider.BRAND_FACEBOOK),
-                    SsoIdentityProvider(SsoIdentityProvider.ID_APPLE, "Apple", null),
+                    SsoIdentityProvider("Apple", "Apple",null, SsoIdentityProvider.BRAND_APPLE),
-                    SsoIdentityProvider(SsoIdentityProvider.ID_GITHUB, "GitHub", null),
+                    SsoIdentityProvider("GitHub", "GitHub",null, SsoIdentityProvider.BRAND_GITHUB),
-                    SsoIdentityProvider(SsoIdentityProvider.ID_TWITTER, "Twitter", null),
+                    SsoIdentityProvider("Twitter", "Twitter", null, SsoIdentityProvider.BRAND_TWITTER),
-                    SsoIdentityProvider("Custom_pro", "SSO", null)
+                    SsoIdentityProvider("Gitlab", "Gitlab", null, SsoIdentityProvider.BRAND_GITLAB),
+                    SsoIdentityProvider("Custom_pro", "SSO", null, null)
             )
         }
         val typedArray = context.theme.obtainStyledAttributes(attrs, R.styleable.SocialLoginButtonsView, 0, 0)

vector/src/main/res/drawable/ic_social_gitlab.xml

@@ -0,0 +1,48 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="38dp"
+    android:height="38dp"
+    android:viewportWidth="38"
+    android:viewportHeight="38">
+  <path
+      android:pathData="M19.4782,26.0077l0,0l2.8609,-8.8002l-5.7177,0z"
+      android:strokeWidth="1"
+      android:fillColor="#E24329"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M12.6142,17.2076L11.743,19.8812C11.6642,20.124 11.7493,20.392 11.9574,20.5433L19.4782,26.0077L12.6142,17.2076Z"
+      android:strokeWidth="1"
+      android:fillColor="#FCA326"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M12.6142,17.2076L16.6214,17.2076L14.8968,11.9077C14.8086,11.6366 14.4239,11.6366 14.3325,11.9077L12.6142,17.2076Z"
+      android:strokeWidth="1"
+      android:fillColor="#E24329"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M26.3464,17.2076L27.2145,19.8812C27.2933,20.124 27.2082,20.392 27.0001,20.5433L19.4782,26.0077L26.3464,17.2076Z"
+      android:strokeWidth="1"
+      android:fillColor="#FCA326"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M26.3464,17.2076L22.3392,17.2076L24.0606,11.9077C24.1489,11.6366 24.5335,11.6366 24.625,11.9077L26.3464,17.2076Z"
+      android:strokeWidth="1"
+      android:fillColor="#E24329"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M19.4782,26.0077l2.8609,-8.8001l4.0073,0z"
+      android:strokeWidth="1"
+      android:fillColor="#FC6D26"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="M19.4782,26.0077l-6.864,-8.8001l4.0072,0z"
+      android:strokeWidth="1"
+      android:fillColor="#FC6D26"
+      android:fillType="evenOdd"
+      android:strokeColor="#00000000"/>
+</vector>

vector/src/main/res/layout/fragment_login.xml

@@ -143,7 +143,6 @@
                 android:layout_height="wrap_content"
                 android:gravity="center"
                 android:orientation="vertical"
-                android:padding="8dp"
                 android:visibility="gone"
                 tools:visibility="visible">
 

vector/src/main/res/layout/fragment_login_signup_signin_selection.xml

@@ -88,7 +88,6 @@
                 android:layout_height="wrap_content"
                 android:gravity="center"
                 android:orientation="vertical"
-                android:padding="8dp"
                 app:layout_constraintBottom_toBottomOf="parent"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintStart_toStartOf="parent"

vector/src/main/res/values/attrs.xml

@@ -46,6 +46,7 @@
         <attr name="vctr_social_login_button_facebook_style" format="reference" />
         <attr name="vctr_social_login_button_twitter_style" format="reference" />
         <attr name="vctr_social_login_button_apple_style" format="reference" />
+        <attr name="vctr_social_login_button_gitlab_style" format="reference" />
 
         <attr name="vctr_chat_effect_snow_background" format="color" />
     </declare-styleable>

vector/src/main/res/values/styles_social_login.xml

@@ -1,17 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
-    <style name="WidgetButtonSocialLogin" parent="Widget.MaterialComponents.Button">
+    <style name="WidgetButtonSocialLogin" parent="Widget.MaterialComponents.Button.OutlinedButton">
         <item name="android:textAllCaps">false</item>
         <item name="fontFamily">sans-serif-medium</item>
         <item name="android:layout_width">wrap_content</item>
         <item name="android:layout_height">wrap_content</item>
         <item name="iconGravity">start</item>
         <item name="android:textSize">14sp</item>
-        <item name="android:textAlignment">textStart</item>
+        <item name="android:textAlignment">center</item>
         <item name="android:paddingStart">2dp</item>
-        <item name="android:paddingEnd">8dp</item>
+        <!-- Compensate icon size to center text correctly-->
+        <item name="android:paddingEnd">38dp</item>
         <item name="android:clipToPadding">false</item>
+        <item name="iconSize">38dp</item>
+        <item name="strokeColor">@color/black_54</item>
     </style>
 
     <style name="WidgetButtonSocialLogin.Google">
@@ -99,4 +102,21 @@
         <item name="android:backgroundTint">@color/white</item>
     </style>
 
+    <style name="WidgetButtonSocialLogin.Gitlab" parent="WidgetButtonSocialLogin">
+        <item name="icon">@drawable/ic_social_gitlab</item>
+        <item name="iconTint">@android:color/transparent</item>
+        <item name="iconTintMode">add</item>
+    </style>
+
+    <style name="WidgetButtonSocialLogin.Gitlab.Light">
+        <item name="android:textColor">@color/black</item>
+        <item name="android:backgroundTint">@color/white</item>
+    </style>
+
+    <style name="WidgetButtonSocialLogin.Gitlab.Dark">
+        <item name="android:textColor">@color/white</item>
+        <item name="android:backgroundTint">@color/black</item>
+    </style>
+
+
 </resources>

vector/src/main/res/values/theme_dark.xml

@@ -200,6 +200,7 @@
         <item name="vctr_social_login_button_facebook_style">@style/WidgetButtonSocialLogin.Facebook.Dark</item>
         <item name="vctr_social_login_button_twitter_style">@style/WidgetButtonSocialLogin.Twitter.Dark</item>
         <item name="vctr_social_login_button_apple_style">@style/WidgetButtonSocialLogin.Apple.Dark</item>
+        <item name="vctr_social_login_button_gitlab_style">@style/WidgetButtonSocialLogin.Gitlab.Dark</item>
 
         <!-- chat effect -->
         <item name="vctr_chat_effect_snow_background">@android:color/transparent</item>

vector/src/main/res/values/theme_light.xml

@@ -202,6 +202,7 @@
         <item name="vctr_social_login_button_facebook_style">@style/WidgetButtonSocialLogin.Facebook.Light</item>
         <item name="vctr_social_login_button_twitter_style">@style/WidgetButtonSocialLogin.Twitter.Light</item>
         <item name="vctr_social_login_button_apple_style">@style/WidgetButtonSocialLogin.Apple.Light</item>
+        <item name="vctr_social_login_button_gitlab_style">@style/WidgetButtonSocialLogin.Gitlab.Light</item>
 
         <!-- chat effect -->
         <item name="vctr_chat_effect_snow_background">@color/black_alpha</item>