CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-4680 login: Fix button with and duplicated provider

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2025-01-09 12:27:00 +01:00
parent 6c132bd736
commit 1a50c05513
6 changed files with 50 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/core/features/login/components/identity-provider/identity-provider.html
View File

@ -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 = ''" />
}

7
src/core/features/login/components/login-methods/login-methods.html
View File

@ -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>

13
src/core/features/login/components/login-methods/login-methods.ts
View File

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

2
src/core/features/login/pages/reconnect/reconnect.ts
View File

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

36
src/theme/components/ionic.scss Normal file
View File

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

29
src/theme/theme.scss
View File

@ -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";