MOBILE-4680 login: Show the current oauth method to the top on reconnect

moodlehq · Jan 8, 2025 · 6c132bd · 6c132bd
1 parent ae1c719
commit 6c132bd
Show file tree

Hide file tree

Showing 13 changed files with 220 additions and 66 deletions.
diff --git a/scripts/langindex.json b/scripts/langindex.json
@@ -2168,6 +2168,7 @@
   "core.login.missingfirstname": "moodle",
   "core.login.missinglastname": "moodle",
   "core.login.mobileservicesnotenabled": "local_moodlemobileapp",
+  "core.login.morewaystologin": "local_moodlemobileapp",
   "core.login.mustconfirm": "moodle",
   "core.login.newaccount": "moodle",
   "core.login.notloggedin": "local_moodlemobileapp",

diff --git a/src/core/classes/sites/site.ts b/src/core/classes/sites/site.ts
@@ -195,6 +195,7 @@ export class CoreSite extends CoreAuthenticatedSite {
      * Check if the user authenticated in the site using an OAuth method.
      *
      * @returns Whether the user authenticated in the site using an OAuth method.
+     * @deprecated since 5.0. Use getOAuthId instead.
      */
     isOAuth(): boolean {
         return this.oauthId != null && this.oauthId !== undefined;

diff --git a/src/core/features/login/components/components.module.ts b/src/core/features/login/components/components.module.ts
@@ -16,6 +16,7 @@ import { NgModule } from '@angular/core';
 import { CoreSharedModule } from '@/core/shared.module';
 import { CoreLoginMethodsComponent } from './login-methods/login-methods';
 import { CoreLoginExceededAttemptsComponent } from '@features/login/components/exceeded-attempts/exceeded-attempts';
+import { CoreLoginIdentityProviderComponent } from './identity-provider/identity-provider';
 
 @NgModule({
     declarations: [
@@ -24,6 +25,7 @@ import { CoreLoginExceededAttemptsComponent } from '@features/login/components/e
     ],
     imports: [
         CoreSharedModule,
+        CoreLoginIdentityProviderComponent,
     ],
     exports: [
         CoreLoginExceededAttemptsComponent,

diff --git a/src/core/features/login/components/identity-provider/identity-provider.html b/src/core/features/login/components/identity-provider/identity-provider.html
@@ -0,0 +1,7 @@
+<ion-button class="ion-text-wrap ion-margin core-oauth-provider" (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 = ''" />
+    }
+    <ion-label>{{ provider.name }}</ion-label>
+</ion-button>
diff --git a/src/core/features/login/components/identity-provider/identity-provider.ts b/src/core/features/login/components/identity-provider/identity-provider.ts
@@ -0,0 +1,53 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, Input } from '@angular/core';
+import { CoreSiteIdentityProvider } from '@classes/sites/unauthenticated-site';
+import { CoreLoginHelper } from '@features/login/services/login-helper';
+import { CoreDomUtils } from '@services/utils/dom';
+import { CoreSharedModule } from '@/core/shared.module';
+import { CoreRedirectPayload } from '@services/navigator';
+
+@Component({
+    selector: 'core-identity-provider',
+    templateUrl: 'identity-provider.html',
+    standalone: true,
+    imports: [
+        CoreSharedModule,
+    ],
+})
+export class CoreLoginIdentityProviderComponent {
+
+    @Input({ required: true }) provider!: CoreSiteIdentityProvider;
+    @Input() launchurl = '';
+    @Input() siteUrl = '';
+    @Input() redirectData?: CoreRedirectPayload;
+
+    /**
+     * The button has been clicked.
+     */
+    async openOAuth(): Promise<void> {
+        const result = await CoreLoginHelper.openBrowserForOAuthLogin(
+            this.siteUrl,
+            this.provider,
+            this.launchurl,
+            this.redirectData,
+        );
+
+        if (!result) {
+            CoreDomUtils.showErrorModal('Invalid data.');
+        }
+    }
+
+}
diff --git a/src/core/features/login/components/login-methods/login-methods.html b/src/core/features/login/components/login-methods/login-methods.html
@@ -21,9 +21,6 @@
 <!-- Identity providers. -->
 <ion-list *ngIf="identityProviders.length" class="core-login-identity-providers">
     <h2 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h2>
-    <ion-button [fill]="'outline'" *ngFor="let provider of identityProviders" class="ion-text-wrap ion-margin core-oauth-provider"
-        (click)="oauthClicked(provider)" [ariaLabel]="provider.name" expand="block">
-        <img *ngIf="provider.iconurl" [src]="provider.iconurl" alt="" width="32" height="32" slot="start" aria-hidden="true">
-        <ion-label>{{ provider.name }}</ion-label>
-    </ion-button>
+    <core-identity-provider *ngFor="let provider of identityProviders" [provider]="provider" [launchurl]="siteConfig?.launchurl"
+        [redirectData]="redirectData" [siteUrl]="siteUrl" />
 </ion-list>
diff --git a/src/core/features/login/components/login-methods/login-methods.ts b/src/core/features/login/components/login-methods/login-methods.ts
@@ -12,14 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { toBoolean } from '@/core/transforms/boolean';
 import { Component, Input, OnInit } from '@angular/core';
+import { CorePromisedValue } from '@classes/promised-value';
+import { CoreSite } from '@classes/sites/site';
 import { CoreSiteIdentityProvider, CoreSitePublicConfigResponse } from '@classes/sites/unauthenticated-site';
 import { CoreLoginHelper, CoreLoginMethod } from '@features/login/services/login-helper';
 import { CoreRedirectPayload } from '@services/navigator';
-import { CoreSites } from '@services/sites';
 import { CoreSitesFactory } from '@services/sites-factory';
-import { CoreDomUtils } from '@services/utils/dom';
 
 @Component({
     selector: 'core-login-methods',
@@ -28,27 +27,31 @@ import { CoreDomUtils } from '@services/utils/dom';
 })
 export class CoreLoginMethodsComponent implements OnInit {
 
-    @Input({ transform: toBoolean }) reconnect = false;
     @Input() siteUrl = '';
     @Input() siteConfig?: CoreSitePublicConfigResponse;
     @Input() redirectData?: CoreRedirectPayload;
+    @Input() site?: CoreSite; // Defined when the user is reconnecting.
     @Input() showLoginForm = true;
 
     isBrowserSSO  = false;
     showScanQR  = false;
     loginMethods: CoreLoginMethod[] = [];
     identityProviders: CoreSiteIdentityProvider[] = [];
 
+    protected currentLoginProvider?: CoreSiteIdentityProvider;
+    protected isReady = new CorePromisedValue<void>();
+
     /**
      * @inheritdoc
      */
     async ngOnInit(): Promise<void> {
-        if (this.reconnect) {
+        if (this.site) {
+            this.siteUrl = this.site.getURL();
+
             this.loginMethods = await CoreLoginHelper.getLoginMethods();
 
-            const currentSite = CoreSites.getCurrentSite();
             const defaultMethod = await CoreLoginHelper.getDefaultLoginMethod();
-            if (currentSite?.isLoggedOut() && defaultMethod) {
+            if (this.site.isLoggedOut() && defaultMethod) {
                 await defaultMethod.action();
             }
         }
@@ -59,25 +62,29 @@ export class CoreLoginMethodsComponent implements OnInit {
             // Identity providers won't be shown if login on browser.
             if (!this.isBrowserSSO) {
                 this.identityProviders = await CoreLoginHelper.getValidIdentityProvidersForSite(
-                    CoreSitesFactory.makeUnauthenticatedSite(this.siteUrl, this.siteConfig),
+                    this.site ?? CoreSitesFactory.makeUnauthenticatedSite(this.siteUrl, this.siteConfig),
                 );
             }
 
-            if (this.reconnect) {
+            if (this.site) {
                 this.showScanQR = CoreLoginHelper.displayQRInSiteScreen();
+
+                // 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);
             }
 
             // If still false or credentials screen.
-            if (!this.reconnect || !this.showScanQR) {
+            if (!this.site || !this.showScanQR) {
                 this.showScanQR = await CoreLoginHelper.displayQRInCredentialsScreen(this.siteConfig.tool_mobile_qrcodetype);
             }
         }
+
+        this.isReady.resolve();
     }
 
     /**
      * Show instructions and scan QR code.
-     *
-     * @returns Promise resolved when done.
      */
     async showInstructionsAndScanQR(): Promise<void> {
         try {
@@ -90,21 +97,33 @@ export class CoreLoginMethodsComponent implements OnInit {
     }
 
     /**
-     * An OAuth button was clicked.
+     * Get the current login, removing the identity provider from the list.
      *
-     * @param provider The provider that was clicked.
+     * @returns Current login.
      */
-    async oauthClicked(provider: CoreSiteIdentityProvider): Promise<void> {
-        const result = await CoreLoginHelper.openBrowserForOAuthLogin(
-            this.siteUrl,
-            provider,
-            this.siteConfig?.launchurl,
-            this.redirectData,
-        );
-
-        if (!result) {
-            CoreDomUtils.showErrorModal('Invalid data.');
+    async extractCurrentLogin(): 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);
+
+        return {
+            provider: this.currentLoginProvider,
+            showOther,
+        };
     }
 
 }
+
+export type CoreLoginMethodsCurrentLogin = {
+    provider: CoreSiteIdentityProvider;
+    showOther: boolean;
+};
diff --git a/src/core/features/login/lang.json b/src/core/features/login/lang.json
@@ -71,6 +71,7 @@
     "missingfirstname": "Missing given name",
     "missinglastname": "Missing last name",
     "mobileservicesnotenabled": "Mobile services are not enabled on the site.",
+    "morewaystologin": "More ways to log in",
     "mustconfirm": "You need to confirm your account",
     "newaccount": "New account",
     "notloggedin": "You need to be logged in.",

diff --git a/src/core/features/login/login-reconnect-lazy.module.ts b/src/core/features/login/login-reconnect-lazy.module.ts
@@ -19,6 +19,7 @@ import { CoreSharedModule } from '@/core/shared.module';
 import { CoreLoginComponentsModule } from '@features/login/components/components.module';
 import { CoreLoginReconnectPage } from '@features/login/pages/reconnect/reconnect';
 import { CoreSiteLogoComponent } from '@/core/components/site-logo/site-logo';
+import { CoreLoginIdentityProviderComponent } from './components/identity-provider/identity-provider';
 
 const routes: Routes = [
     {
@@ -33,6 +34,7 @@ const routes: Routes = [
         CoreSharedModule,
         CoreLoginComponentsModule,
         CoreSiteLogoComponent,
+        CoreLoginIdentityProviderComponent,
     ],
     declarations: [
         CoreLoginReconnectPage,

diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
@@ -51,41 +51,62 @@ <h1>{{ 'core.login.reconnect' | translate }}</h1>
             </div>
 
             <div class="core-login-methods">
-                <form *ngIf="showLoginForm && !isBrowserSSO" [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form"
-                    #reconnectForm>
-                    <ion-item class="ion-margin-bottom" lines="inset">
-                        <ion-input class="core-ioninput-password" name="password" type="password"
-                            placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"
-                            autocomplete="current-password" enterkeyhint="go" required="true"
-                            [attr.aria-label]="'core.login.password' | translate">
-                            <ion-input-password-toggle slot="end" showIcon="fas-eye" hideIcon="fas-eye-slash" />
-                        </ion-input>
-                    </ion-item>
-                    <ion-button type="submit" expand="block" [disabled]="!credForm.valid"
-                        class="ion-margin core-login-login-button ion-text-wrap">
-                        {{ 'core.login.loginbutton' | translate }}
-                    </ion-button>
+                @if (currentLogin && currentLogin.provider) {
+                <core-identity-provider [provider]="currentLogin.provider" [launchurl]="siteConfig?.launchurl" [redirectData]="redirectData"
+                    [siteUrl]="site.siteUrl" />
+                @if (currentLogin.showOther) {
+                <ion-accordion-group>
+                    <ion-accordion toggleIconSlot="start">
+                        <ion-item class="ion-text-wrap" slot="header">
+                            <ion-label>
+                                <p class="item-heading">{{ 'core.login.morewaystologin' | translate }}</p>
+                            </ion-label>
+                        </ion-item>
 
-                    <!-- Forgotten password option. -->
-                    <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear"
-                        class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
-                        {{ 'core.login.forgotaccount' | translate }}
-                    </ion-button>
-                </form>
-
-                <ng-container *ngIf="isBrowserSSO">
-                    <ion-button expand="block" (click)="openBrowserSSO()"
-                        class="ion-margin core-login-login-inbrowser-button ion-text-wrap">
-                        {{ 'core.login.loginbutton' | translate }}
-                        <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true" />
-                    </ion-button>
-                    <p class="text-center core-login-inbrowser">{{ 'core.openinbrowserdescription' | translate }}</p>
-                </ng-container>
-
-                <!-- Additional Login methods -->
-                <core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [reconnect]="true" [siteUrl]="site.siteUrl"
-                    [redirectData]="redirectData" [showLoginForm]="showLoginForm" />
+                        <div slot="content">
+                            <ng-template *ngTemplateOutlet="loginMethods" />
+                        </div>
+                    </ion-accordion>
+                </ion-accordion-group>
+                }
+                } @else {
+                <ng-template *ngTemplateOutlet="loginMethods" />
+                }
             </div>
         </div>
     </core-loading>
 </ion-content>
+
+
+<ng-template #loginMethods>
+    <form *ngIf="showLoginForm && !isBrowserSSO" [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #reconnectForm>
+        <ion-item class="ion-margin-bottom" lines="inset">
+            <ion-input class="core-ioninput-password" name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
+                formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go" required="true"
+                [attr.aria-label]="'core.login.password' | translate">
+                <ion-input-password-toggle slot="end" showIcon="fas-eye" hideIcon="fas-eye-slash" />
+            </ion-input>
+        </ion-item>
+        <ion-button type="submit" expand="block" [disabled]="!credForm.valid" class="ion-margin core-login-login-button ion-text-wrap">
+            {{ 'core.login.loginbutton' | translate }}
+        </ion-button>
+
+        <!-- Forgotten password option. -->
+        <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear"
+            class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
+            {{ 'core.login.forgotaccount' | translate }}
+        </ion-button>
+    </form>
+
+    <ng-container *ngIf="isBrowserSSO">
+        <ion-button expand="block" (click)="openBrowserSSO()" class="ion-margin core-login-login-inbrowser-button ion-text-wrap">
+            {{ 'core.login.loginbutton' | translate }}
+            <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true" />
+        </ion-button>
+        <p class="text-center core-login-inbrowser">{{ 'core.openinbrowserdescription' | translate }}</p>
+    </ng-container>
+
+    <!-- Additional Login methods -->
+    <core-login-methods *ngIf="siteConfig" [site]="site" [siteConfig]="siteConfig" [siteUrl]="site.siteUrl" [redirectData]="redirectData"
+        [showLoginForm]="showLoginForm" />
+</ng-template>