MOBILE-4680 login: Fix button with and duplicated provider

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"
+<ion-button class="ion-text-wrap ion-margin core-oauth-provider ion-no-margin-horizontal" (click)="openOAuth()" [ariaLabel]="provider.name"
-    fill="outline">
+    expand="block" fill="outline">
     @if (provider.iconurl) {
     <img [src]="provider.iconurl" alt="" width="32" height="32" slot="start" aria-hidden="true" (error)="provider.iconurl = ''" />
     }

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()"
+    <ion-button [fill]="'outline'" class="ion-text-wrap ion-margin ion-no-margin-horizontal" *ngFor="let method of loginMethods"
-        [ariaLabel]="method.name" expand="block">
+        (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>

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);
 

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;

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);
+}

src/theme/theme.scss

@@ -30,34 +30,7 @@
 @import "components/videojs.scss";
 
 /* Ionic components overrides */
-@import "components/ion-accordion.scss";
+@import "components/ionic.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";
 
 /* Some styles from 3rd party libraries. */
 @import "components/bootstrap/utilities/screenreaders.scss";