From 1a50c05513e6d5b6dbfb030d2ac28711f761791f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 9 Jan 2025 12:27:00 +0100
Subject: [PATCH] MOBILE-4680 login: Fix button with and duplicated provider

---
 .../identity-provider/identity-provider.html  |  4 +--
 .../login-methods/login-methods.html          |  7 ++--
 .../components/login-methods/login-methods.ts | 13 ++++---
 .../login/pages/reconnect/reconnect.ts        |  2 +-
 src/theme/components/ionic.scss               | 36 +++++++++++++++++++
 src/theme/theme.scss                          | 29 +--------------
 6 files changed, 50 insertions(+), 41 deletions(-)
 create mode 100644 src/theme/components/ionic.scss

diff --git a/src/core/features/login/components/identity-provider/identity-provider.html b/src/core/features/login/components/identity-provider/identity-provider.html
index e36769e20..23c98b27a 100644
--- a/src/core/features/login/components/identity-provider/identity-provider.html
+++ b/src/core/features/login/components/identity-provider/identity-provider.html
@@ -1,5 +1,5 @@
-<ion-button class="ion-text-wrap ion-margin core-oauth-provider" (click)="openOAuth()" [ariaLabel]="provider.name" expand="block"
-    fill="outline">
+<ion-button class="ion-text-wrap ion-margin core-oauth-provider ion-no-margin-horizontal" (click)="openOAuth()" [ariaLabel]="provider.name"
+    expand="block" fill="outline">
     @if (provider.iconurl) {
     <img [src]="provider.iconurl" alt="" width="32" height="32" slot="start" aria-hidden="true" (error)="provider.iconurl = ''" />
     }
diff --git a/src/core/features/login/components/login-methods/login-methods.html b/src/core/features/login/components/login-methods/login-methods.html
index 163766bb9..88be395c2 100644
--- a/src/core/features/login/components/login-methods/login-methods.html
+++ b/src/core/features/login/components/login-methods/login-methods.html
@@ -4,15 +4,16 @@
 </div>
 
 <div class="core-login-methods" *ngIf="loginMethods.length">
-    <ion-button [fill]="'outline'" class="ion-text-wrap ion-margin" *ngFor="let method of loginMethods" (click)="method.action()"
-        [ariaLabel]="method.name" expand="block">
+    <ion-button [fill]="'outline'" class="ion-text-wrap ion-margin ion-no-margin-horizontal" *ngFor="let method of loginMethods"
+        (click)="method.action()" [ariaLabel]="method.name" expand="block">
         <ion-icon *ngIf="method.icon" [name]="method.icon" slot="start" />
         <ion-label>{{ method.name }}</ion-label>
     </ion-button>
 </div>
 
 <ng-container *ngIf="showScanQR">
-    <ion-button expand="block" fill="outline" class="ion-margin core-login-site-qrcode" (click)="showInstructionsAndScanQR()">
+    <ion-button expand="block" fill="outline" class="ion-margin core-login-site-qrcode ion-no-margin-horizontal"
+        (click)="showInstructionsAndScanQR()">
         <ion-icon slot="start" name="fas-qrcode" aria-hidden="true" />
         {{ 'core.scanqr' | translate }}
     </ion-button>
diff --git a/src/core/features/login/components/login-methods/login-methods.ts b/src/core/features/login/components/login-methods/login-methods.ts
index 9d55d49fc..f165bb0aa 100644
--- a/src/core/features/login/components/login-methods/login-methods.ts
+++ b/src/core/features/login/components/login-methods/login-methods.ts
@@ -72,6 +72,10 @@ export class CoreLoginMethodsComponent implements OnInit {
                 // The identity provider set in the site will be shown at the top.
                 const oAuthId = this.site.getOAuthId();
                 this.currentLoginProvider = CoreLoginHelper.findIdentityProvider(this.identityProviders, oAuthId);
+
+                // Remove the identity provider from the array.
+                this.identityProviders = this.identityProviders.filter((provider) =>
+                    provider.url !== this.currentLoginProvider?.url);
             }
 
             // If still false or credentials screen.
@@ -97,21 +101,16 @@ export class CoreLoginMethodsComponent implements OnInit {
     }
 
     /**
-     * Get the current login, removing the identity provider from the list.
+     * Get the current login.
      *
      * @returns Current login.
      */
-    async extractCurrentLogin(): Promise<CoreLoginMethodsCurrentLogin | undefined> {
+    async getCurrentLogin(): Promise<CoreLoginMethodsCurrentLogin | undefined> {
         await this.isReady;
-
         if (!this.currentLoginProvider) {
             return;
         }
 
-        // Remove the identity provider from the array.
-        this.identityProviders = this.identityProviders.filter((provider) =>
-            provider.url !== this.currentLoginProvider?.url);
-
         const showOther = !!(this.showLoginForm || this.isBrowserSSO) &&
             !!(this.loginMethods.length || this.identityProviders.length || this.showScanQR);
 
diff --git a/src/core/features/login/pages/reconnect/reconnect.ts b/src/core/features/login/pages/reconnect/reconnect.ts
index 8ad3b8a7f..fb0e79408 100644
--- a/src/core/features/login/pages/reconnect/reconnect.ts
+++ b/src/core/features/login/pages/reconnect/reconnect.ts
@@ -49,7 +49,7 @@ export class CoreLoginReconnectPage implements OnInit, OnDestroy {
     @ViewChild('reconnectForm') formElement?: ElementRef;
     @ViewChild(CoreLoginMethodsComponent) set loginMethods(loginMethods: CoreLoginMethodsComponent) {
         if (loginMethods && !this.currentLogin) {
-            loginMethods.extractCurrentLogin().then(login => {
+            loginMethods.getCurrentLogin().then(login => {
                 this.currentLogin = login;
 
                 return;
diff --git a/src/theme/components/ionic.scss b/src/theme/components/ionic.scss
new file mode 100644
index 000000000..656c91d85
--- /dev/null
+++ b/src/theme/components/ionic.scss
@@ -0,0 +1,36 @@
+@import "ion-accordion.scss";
+@import "ion-action-sheet.scss";
+@import "ion-alert.scss";
+@import "ion-avatar.scss";
+@import "ion-back-button.scss";
+@import "ion-badge.scss";
+@import "ion-button.scss";
+@import "ion-card.scss";
+@import "ion-checkbox.scss";
+@import "ion-chip.scss";
+@import "ion-content.scss";
+@import "ion-datetime.scss";
+@import "ion-fab.scss";
+@import "ion-header.scss";
+@import "ion-icon.scss";
+@import "ion-input.scss";
+@import "ion-item.scss";
+@import "ion-item-divider.scss";
+@import "ion-modal.scss";
+@import "ion-loading.scss";
+@import "ion-note.scss";
+@import "ion-popover.scss";
+@import "ion-radio.scss";
+@import "ion-searchbar.scss";
+@import "ion-select.scss";
+@import "ion-spinner.scss";
+@import "ion-toast.scss";
+@import "swiper.scss";
+
+
+.ion-no-margin-horizontal {
+    --margin-start: 0;
+    --margin-end: 0;
+
+    @include margin-horizontal(0);
+}
diff --git a/src/theme/theme.scss b/src/theme/theme.scss
index 23181639d..0fc03a090 100644
--- a/src/theme/theme.scss
+++ b/src/theme/theme.scss
@@ -30,34 +30,7 @@
 @import "components/videojs.scss";
 
 /* Ionic components overrides */
-@import "components/ion-accordion.scss";
-@import "components/ion-action-sheet.scss";
-@import "components/ion-alert.scss";
-@import "components/ion-avatar.scss";
-@import "components/ion-back-button.scss";
-@import "components/ion-badge.scss";
-@import "components/ion-button.scss";
-@import "components/ion-card.scss";
-@import "components/ion-checkbox.scss";
-@import "components/ion-chip.scss";
-@import "components/ion-content.scss";
-@import "components/ion-datetime.scss";
-@import "components/ion-fab.scss";
-@import "components/ion-header.scss";
-@import "components/ion-icon.scss";
-@import "components/ion-input.scss";
-@import "components/ion-item.scss";
-@import "components/ion-item-divider.scss";
-@import "components/ion-modal.scss";
-@import "components/ion-loading.scss";
-@import "components/ion-note.scss";
-@import "components/ion-popover.scss";
-@import "components/ion-radio.scss";
-@import "components/ion-searchbar.scss";
-@import "components/ion-select.scss";
-@import "components/ion-spinner.scss";
-@import "components/ion-toast.scss";
-@import "components/swiper.scss";
+@import "components/ionic.scss";
 
 /* Some styles from 3rd party libraries. */
 @import "components/bootstrap/utilities/screenreaders.scss";