chore: remove custom logic used for Google

FriendsOfFlarum · Oct 31, 2024 · 57fc986 · 57fc986
1 parent 5ecadcc
commit 57fc986
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 18 deletions.
diff --git a/js/src/forum/extenders/extendLoginSignup.tsx b/js/src/forum/extenders/extendLoginSignup.tsx
@@ -12,6 +12,12 @@ import { openOAuthPopup } from '../utils/popupUtils';
 import type Mithril from 'mithril';
 import type ItemList from 'flarum/common/utils/ItemList';
 
+export type OAuthProvider = {
+  name: string;
+  icon: string;
+  priority: number;
+} | null;
+
 export default function () {
   extend(LogInButton, 'initAttrs', function (_returnedValue, attrs) {
     attrs.onclick = function () {
@@ -21,14 +27,13 @@ export default function () {
 
   extend(LogInButtons.prototype, 'items', function (items: ItemList<Mithril.Children>) {
     const onlyIcons = !!app.forum.attribute('fof-oauth.only_icons');
-    const buttons = app.forum.attribute('fof-oauth').filter(Boolean);
-    const googleButton = buttons.splice(buttons.indexOf(buttons.find((b) => b.name === 'google')), 1);
+    const enabledOAuthProviders = app.forum.attribute<OAuthProvider[]>('fof-oauth').filter(Boolean);
 
-    buttons.concat(googleButton).forEach(({ name, icon, priority }) => {
+    enabledOAuthProviders.forEach(({ name, icon, priority }) => {
       let className = `Button FoFLogInButton LogInButton--${name}`;
 
       // Google branding does not allow inline icon, so we'll keep the full button
-      if (onlyIcons && name !== 'google') {
+      if (onlyIcons) {
         className += ' Button--icon';
       }
 

diff --git a/resources/less/forum.less b/resources/less/forum.less
@@ -43,20 +43,19 @@
     .Button--color(#fff, #2867b2);
   }
 
-  // Custom CSS that meets the bare minimum of https://developers.google.com/identity/branding-guidelines
   &.LogInButton--google {
     .Button--color(#757575, #fff);
 
     .Button-icon {
       &::before {
         content: "";
         display: inline-block;
-        width: 18px; // Same size as other icons, which happen to match Google minimums
-        height: 18px;
+        width: 30px;
+        height: 30px;
         background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAC3UExURUdwTP84AEyxTQ550wx40xp7zv9eAA1505SJXiV8zLiVIv88AP89AP85AE6xTF2yRWSyQf86AP5jAFKxSv89AFyxRlexSU6xTP83AP86AP/DAFCxSw150v/DAP84AP7AAP8/AP/CAAx40w950P89AFCxS1CxS//DAP/CAAt40/nCAhF50B6IsTKah//BAA140rm8G0qxTgl41P/DAP83AP+EAIu3MebBBj+maf9aAP+kAP+2AGS0Q8y4bCgAAAAxdFJOUwDp8hDyNCLTBBUKVobW4C8YvxN+bUdaz/Oo7bik2Ps2RVnEYDWap72m4YVG/f1tfvn45KBTAAAEEklEQVRo3t2a61biMBSF0wI10qb3q4VaEVAHFQt1xrm8/3NNuBdI2iQNzFqz1/If+HH2zjknFQFgU18b60biIKRgIeQkhp9rfSBPUMsNBylZWWb4Z6csRo6hywFBzU9QVlZ+e1WZ4vjjthxXT5SyThiuJLrWAqH5TlayCBmiGM1AJbMUIYzrcyDEMDBnNKqSToZ0riPgGkrJryxOOIrJnVJQSIeMVvlKKazYcNmsysoWylgs05KypZxxI8MpW8txL89Q9IZheHnGNeoAbnJ5BjQuzwB+xjSh4jjOhBl5U5/HCC92PR+Pc903EqQIMNz60Fdr1q3MJeiO/dOl2cioDwQZeJFDeL7+qwuhkVFrFvIp4whC13fYGTVmxfUbz93O7GYG/WRlKK/fEBCMHTaGRt3nLIPbNWIGBnj//NlmBfV1BoY2XP4iUWKfdZkyvOZ9uVz+/jzPg5XBtHCfliudFWNIZICH5Ua/fx4va1ciAz4vd6pahjSJjFXsex0si3OZjL1bG8s+LxFI1a2KZXLNOnLrkL8BLufWzjLJhYBvy3N9Si6k/0yA3N3XvKNzy64OXK86d0iAPNU8zXQGNxwaYPXA/R0B8l5XyM2CU4+E3Jvc4oYMiLkPXamQESDl/gylQm7AEwHyDUiFdMGQM3dpkAe5kAUJUnu4hCB3/w1k+I8gVwlePuQqzXiFsfJCHJBPsgfk+zVGPXFpPUiFzM9vRE2hdEZduoi5P4I+6Xh9WDWXwR5dM1KVLz3SlejH98ITu/rMSKWMOoTLHWYUkS104x2Qc8fX1JPkP/4UWKEIpNclX1bASSirMlYSKYVcyCoScNQpO0YhkgoxkcVgfVIrnbKxai3T4mXcjhY0t6p+fRQVpZyGwfmC7tb+fB2s2hrG96z12F3Q3do9Bv34c8woVK4TNnshz5RZ9RHl45SBKQHH6aVMtFUnbnR/d2rVNnxmSm9EvdEfnraIDExhdGxGm8yj28OLLJMMKVSP5cudx5dFcyEAeAVN08Z+sb036k7sVM+4HVEpZlhbDAzSovh6Jd8gZsevDVUqpUgDKgZak/UbyZTBSaf1p3RIoaYhsf37wWT/2V7pzc6Q/QYTeYF9/Llsy0ur5b8R1u6Z6gzbcKZeaFk2lmWF3iQ6ff1bg1lre72iWapqRpFpkj/PF7VFKvWnRUtV4z8PZBtLJI9CCoQlfCZtKd05vbOC9pRN/PO6XSSJUsvAQ6I95et13rBTYfv0GfYDtFqe5Ihp09kTtQUjZbxKwVA4GNVjvUhBYcuigOca1ffMS5ax737uZKYB/1/eYTDlwOC9JvYvRewYYcSmaTyG3jQnQct/jLLD8x14RJiGNpAgO/BS0jJUzdQL8eaX9U0LxKBJhYS38NQLLEaX/gIGHNymY/90kQAAAABJRU5ErkJggg==");
         background-position: center;
         background-repeat: no-repeat;
-        background-size: 18px 18px;
+        background-size: 30px;
         margin-bottom: -2px; // -2 px is so the button still has the same height as the other ones
       }
     }
@@ -74,7 +73,7 @@
   flex-flow: row wrap;
   margin-bottom: 10px;
 
-  .FoFLogInButton:not(.LogInButton--google) {
+  .FoFLogInButton {
     width: 50px;
     height: 50px;
     padding: 0;
@@ -90,15 +89,6 @@
     height: 50px;
     margin-bottom: 0;
   }
-
-  .LogInButtonContainer--google {
-    flex-basis: 100%;
-
-    .FoFLogInButton {
-      width: min-content;
-      margin: 0 auto;
-    }
-  }
 }
 
 .SettingsPage {