MOBILE-3742 links: Support choose site when clicking links

src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.html

@@ -4,6 +4,11 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
         <ion-title>{{ 'core.contentlinks.chooseaccount' | translate }}</ion-title>
+        <ion-buttons slot="end">
+            <ion-button (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+                <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
+            </ion-button>
+        </ion-buttons>
     </ion-toolbar>
 </ion-header>
 <ion-content>
@@ -27,11 +32,6 @@
                     <p>{{site.siteUrl}}</p>
                 </ion-label>
             </ion-item>
-            <ion-item>
-                <ion-label>
-                    <ion-button expand="block" (click)="cancel()">{{ 'core.login.cancel' | translate }}</ion-button>
-                </ion-label>
-            </ion-item>
         </ion-list>
     </core-loading>
 </ion-content>

src/core/features/contentlinks/components/choose-site-modal/choose-site-modal.ts

@@ -12,10 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { CoreSiteBasicInfo, CoreSites } from '@services/sites';
 import { CoreDomUtils } from '@services/utils/dom';
-import { Translate } from '@singletons';
+import { ModalController, Translate } from '@singletons';
 import { CoreContentLinksAction } from '../../services/contentlinks-delegate';
 import { CoreContentLinksHelper } from '../../services/contentlinks-helper';
 import { CoreError } from '@classes/errors/error';
@@ -27,12 +27,13 @@ import { CoreNavigator } from '@services/navigator';
  * @todo Include routing and testing.
  */
 @Component({
-    selector: 'page-core-content-links-choose-site',
-    templateUrl: 'choose-site.html',
+    selector: 'core-content-links-choose-site-modal',
+    templateUrl: 'choose-site-modal.html',
 })
-export class CoreContentLinksChooseSitePage implements OnInit {
+export class CoreContentLinksChooseSiteModalComponent implements OnInit {
+
+    @Input() url!: string;
 
-    url!: string;
     sites: CoreSiteBasicInfo[] = [];
     loaded = false;
     protected action?: CoreContentLinksAction;
@@ -42,12 +43,10 @@ export class CoreContentLinksChooseSitePage implements OnInit {
      * Component being initialized.
      */
     async ngOnInit(): Promise<void> {
-        const url = CoreNavigator.getRouteParam<string>('url');
-        if (!url) {
-            return this.leaveView();
+        if (!this.url) {
+            return this.closeModal();
         }
 
-        this.url = url;
         let siteIds: string[] | undefined = [];
 
         try {
@@ -75,25 +74,20 @@ export class CoreContentLinksChooseSitePage implements OnInit {
             this.sites = await CoreSites.getSites(siteIds);
         } catch (error) {
             CoreDomUtils.showErrorModalDefault(error, 'core.contentlinks.errornosites', true);
-            this.leaveView();
+            this.closeModal();
         }
 
         this.loaded = true;
     }
 
-    /**
-     * Cancel.
-     */
-    cancel(): void {
-        this.leaveView();
-    }
-
     /**
      * Perform the action on a certain site.
      *
      * @param siteId Site ID.
      */
-    siteClicked(siteId: string): void {
+    async siteClicked(siteId: string): Promise<void> {
+        await ModalController.dismiss();
+
         if (this.isRootURL) {
             CoreNavigator.navigateToSiteHome({ siteId });
         } else if (this.action) {
@@ -102,14 +96,10 @@ export class CoreContentLinksChooseSitePage implements OnInit {
     }
 
     /**
-     * Cancel and leave the view.
+     * Close the modal.
      */
-    protected async leaveView(): Promise<void> {
-        try {
-            await CoreSites.logout();
-        } finally {
-            await CoreNavigator.navigate('/login/sites', { reset: true });
-        }
+    closeModal(): void {
+        ModalController.dismiss();
     }
 
 }

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

@@ -12,26 +12,19 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
 import { CoreSharedModule } from '@/core/shared.module';
-import { CoreContentLinksChooseSitePage } from './choose-site';
-
-const routes: Routes = [
-    {
-        path: '',
-        component: CoreContentLinksChooseSitePage,
-    },
-];
+import { NgModule } from '@angular/core';
+import { CoreContentLinksChooseSiteModalComponent } from './choose-site-modal/choose-site-modal';
 
 @NgModule({
     declarations: [
-        CoreContentLinksChooseSitePage,
+        CoreContentLinksChooseSiteModalComponent,
     ],
     imports: [
-        RouterModule.forChild(routes),
         CoreSharedModule,
     ],
+    exports: [
+        CoreContentLinksChooseSiteModalComponent,
+    ],
 })
-export class CoreContentLinksChooseSitePageModule {}
+export class CoreContentLinksComponentsModule {}

src/core/features/contentlinks/contentlinks.module.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { NgModule, Type } from '@angular/core';
-
+import { CoreContentLinksComponentsModule } from './components/components.module';
 import { CoreContentLinksDelegateService } from './services/contentlinks-delegate';
 import { CoreContentLinksHelperProvider } from './services/contentlinks-helper';
 
@@ -22,5 +22,9 @@ export const CORE_CONTENTLINKS_SERVICES: Type<unknown>[] = [
     CoreContentLinksHelperProvider,
 ];
 
-@NgModule({})
+@NgModule({
+    imports: [
+        CoreContentLinksComponentsModule,
+    ],
+})
 export class CoreContentLinksModule {}

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

@@ -17,9 +17,10 @@ import { CoreSites } from '@services/sites';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreContentLinksDelegate, CoreContentLinksAction } from './contentlinks-delegate';
 import { CoreSite } from '@classes/site';
-import { makeSingleton, Translate } from '@singletons';
+import { makeSingleton, ModalController, Translate } from '@singletons';
 import { CoreNavigator } from '@services/navigator';
 import { Params } from '@angular/router';
+import { CoreContentLinksChooseSiteModalComponent } from '../components/choose-site-modal/choose-site-modal';
 
 /**
  * Service that provides some features regarding content links.
@@ -111,7 +112,15 @@ export class CoreContentLinksHelperProvider {
      * @todo set correct root.
      */
     async goToChooseSite(url: string): Promise<void> {
-        await CoreNavigator.navigate('CoreContentLinksChooseSitePage @todo', { params: { url }, reset: true });
+        const modal = await ModalController.create({
+            component: CoreContentLinksChooseSiteModalComponent,
+            componentProps: {
+                url: url,
+            },
+            cssClass: 'core-modal-fullscreen',
+        });
+
+        await modal.present();
     }
 
     /**