MOBILE-4081 reconnect: Create component for identity providers

src/core/features/login/components/components.module.ts

@@ -17,12 +17,14 @@ import { CoreSharedModule } from '@/core/shared.module';
 import { CoreLoginSiteOnboardingComponent } from './site-onboarding/site-onboarding';
 import { CoreLoginSiteHelpComponent } from './site-help/site-help';
 import { CoreLoginSitesComponent } from './sites/sites';
+import { CoreLoginMethodsComponent } from './login-methods/login-methods';
 
 @NgModule({
     declarations: [
         CoreLoginSiteOnboardingComponent,
         CoreLoginSiteHelpComponent,
         CoreLoginSitesComponent,
+        CoreLoginMethodsComponent,
     ],
     imports: [
         CoreSharedModule,
@@ -31,6 +33,7 @@ import { CoreLoginSitesComponent } from './sites/sites';
         CoreLoginSiteOnboardingComponent,
         CoreLoginSiteHelpComponent,
         CoreLoginSitesComponent,
+        CoreLoginMethodsComponent,
     ],
 })
 export class CoreLoginComponentsModule {}

src/core/features/login/components/login-methods/login-methods.html

@@ -0,0 +1,8 @@
+<core-spacer *ngIf="loginMethods?.length" class="core-login-methods__spacer"></core-spacer>
+<ion-list *ngIf="loginMethods?.length" class="ion-padding-top core-login-methods">
+    <ion-button [fill]="'clear'" class="ion-text-wrap" *ngFor="let method of loginMethods" (click)="method.action()"
+        [attr.aria-label]="method.name" expand="block">
+        <ion-icon *ngIf="method.icon" [name]="method.icon" slot="start"></ion-icon>
+        <ion-label>{{ method.name }}</ion-label>
+    </ion-button>
+</ion-list>

src/core/features/login/components/login-methods/login-methods.scss

@@ -0,0 +1,12 @@
+@import "~theme/globals";
+
+ion-item-divider {
+    --item-divider-border-width: 4px;
+    margin: 0 1em;
+}
+.core-login-methods {
+    margin: .5em 0;
+    &__spacer {
+        margin: .5em 1em;
+    }
+}

src/core/features/login/components/login-methods/login-methods.ts

@@ -0,0 +1,33 @@
+// (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, OnInit } from '@angular/core';
+import { CoreLoginHelper, CoreLoginMethod } from '@features/login/services/login-helper';
+
+@Component({
+    selector: 'core-login-methods',
+    templateUrl: 'login-methods.html',
+    styleUrls: ['../../login.scss', 'login-methods.scss'],
+})
+export class CoreLoginMethodsComponent implements OnInit {
+
+    loginMethods?: CoreLoginMethod[];
+
+    /**
+     * @inheritdoc
+     */
+    async ngOnInit(): Promise<void> {
+        this.loginMethods = await CoreLoginHelper.getLoginMethods();
+    }
+
+}

src/core/features/login/pages/reconnect/reconnect.html

@@ -76,17 +76,20 @@
             {{ 'core.login.forgotten' | translate }}
         </ion-button>
 
+        <!-- Login methods -->
+        <core-login-methods></core-login-methods>
+
         <!-- Identity providers. -->
-        <ion-list *ngIf="identityProviders && identityProviders.length" class="ion-padding-top core-login-identity-providers">
+        <ion-list *ngIf="identityProviders?.length" class="ion-padding-top core-login-identity-providers">
             <ion-item class="ion-text-wrap">
                 <ion-label>
                     <h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3>
                 </ion-label>
             </ion-item>
-            <ion-button fill="outline" *ngFor="let provider of identityProviders" class="ion-text-wrap ion-margin core-oauth-provider"
+            <ion-button [fill]="'outline'" *ngFor="let provider of identityProviders" class="ion-text-wrap ion-margin core-oauth-provider"
                 (click)="oauthClicked(provider)" [attr.aria-label]="provider.name" expand="block">
                 <img [src]="provider.iconurl" alt="" width="32" height="32" slot="start">
-                <ion-label>{{provider.name}}</ion-label>
+                <ion-label>{{ provider.name }}</ion-label>
             </ion-button>
         </ion-list>
 

src/core/features/login/pages/reconnect/reconnect.module.ts

@@ -17,6 +17,7 @@ import { RouterModule, Routes } from '@angular/router';
 
 import { CoreSharedModule } from '@/core/shared.module';
 import { CoreLoginReconnectPage } from './reconnect';
+import { CoreLoginComponentsModule } from '@features/login/components/components.module';
 
 const routes: Routes = [
     {
@@ -29,6 +30,7 @@ const routes: Routes = [
     imports: [
         RouterModule.forChild(routes),
         CoreSharedModule,
+        CoreLoginComponentsModule,
     ],
     declarations: [
         CoreLoginReconnectPage,

src/core/features/login/services/login-helper.ts

@@ -1446,6 +1446,15 @@ export class CoreLoginHelperProvider {
         return import('@features/login/pages/credentials/credentials.module').then(m => m.CoreLoginCredentialsPageModule);
     }
 
+    /**
+     * Retrieve login methods.
+     *
+     * @returns Login methods found.
+     */
+    async getLoginMethods(): Promise<CoreLoginMethod[]> {
+        return [];
+    }
+
 }
 
 export const CoreLoginHelper = makeSingleton(CoreLoginHelperProvider);
@@ -1560,3 +1569,9 @@ export type CoreLoginSiteSelectorListMethod =
     'sitefinder'|
     'list'|
     '';
+
+export type CoreLoginMethod = {
+    name: string; // Name of the login method.
+    icon: string; // Icon of the provider.
+    action: () => unknown; // Action to execute on button click.
+};