Merge pull request #4724 from crazyserver/MOBILE-5011

Mobile 5011 When handling a site url, add a button to add an account on the site chooser modal

Author: dpalou

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

@@ -1,39 +1,29 @@
-<ion-header>
-    <ion-toolbar>
-        <ion-title>
-            <h1>{{ 'core.contentlinks.chooseaccount' | translate }}</h1>
-        </ion-title>
-        <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
-                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
-            </ion-button>
-        </ion-buttons>
-    </ion-toolbar>
-</ion-header>
-<ion-content>
-    <core-loading [hideUntil]="loaded">
-        <ion-list>
-            <ion-item class="ion-text-wrap">
-                <ion-label>
-                    <h2 class="item-heading">{{ 'core.contentlinks.chooseaccounttoopenlink' | translate }}</h2>
-                    @if (displaySiteUrl) {
-                        <p>{{ url }}</p>
-                    }
-                </ion-label>
-            </ion-item>
-            <ion-item *ngFor="let site of sites" (click)="siteClicked(site.id)" [detail]="false" button>
-                <core-user-avatar [site]="site" slot="start" [linkProfile]="false" />
+<core-loading [hideUntil]="loaded">
+    <ion-list class="ion-margin">
+        <ion-item class="ion-text-wrap">
+            <ion-label>
+                <h2 class="item-heading">{{ 'core.contentlinks.chooseaccounttoopenlink' | translate }}</h2>
+                @if (sites().length && siteName()) {
+                    <p><core-format-text [text]="siteName()" [clean]="true" [siteId]="sites()[0].id" /></p>
+                }
+                @if (siteUrl()) {
+                    <p>{{ siteUrl() }}</p>
+                }
+            </ion-label>
+        </ion-item>
 
+        @for (site of sites(); track site.id) {
+            <ion-item (click)="siteClicked(site.id)" [detail]="false" button>
+                <core-user-avatar [site]="site" slot="start" [linkProfile]="false" />
                 <ion-label>
                     <p class="item-heading">{{site.fullname}}</p>
-                    <p>
-                        <core-format-text [text]="site.siteName" [clean]="true" [siteId]="site.id" />
-                    </p>
-                    @if (displaySiteUrl) {
-                        <p>{{site.siteUrl}}</p>
-                    }
                 </ion-label>
             </ion-item>
-        </ion-list>
-    </core-loading>
-</ion-content>
+        }
+    </ion-list>
+
+    <ion-button expand="block" class="ion-margin" (click)="addNewSite()" [ariaLabel]="'core.login.add' | translate">
+        {{ 'core.login.add' | translate }}
+    </ion-button>
+
+</core-loading>

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

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit, computed, input, signal } from '@angular/core';
 import { CoreSiteBasicInfo, CoreSites } from '@services/sites';
 import { ModalController, Translate } from '@singletons';
 import { CoreContentLinksAction } from '../../services/contentlinks-delegate';
@@ -22,6 +22,7 @@ import { CoreNavigator } from '@services/navigator';
 import { CoreSitesFactory } from '@services/sites-factory';
 import { CoreSharedModule } from '@/core/shared.module';
 import { CoreAlerts } from '@services/overlays/alerts';
+import { NO_SITE_ID } from '@features/login/constants';
 
 /**
  * Page to display the list of sites to choose one to perform a content link action.
@@ -35,35 +36,52 @@ import { CoreAlerts } from '@services/overlays/alerts';
 })
 export class CoreContentLinksChooseSiteModalComponent implements OnInit {
 
-    @Input({ required: true }) url!: string;
+    readonly url = input.required<string>();
+
+    readonly sites = signal<CoreSiteBasicInfo[]>([]);
+    readonly loaded = signal(false);
+    readonly siteUrl = computed(() => {
+        if (!this.sites().length) {
+            return false;
+        }
+        const displayUrl = CoreSitesFactory.makeUnauthenticatedSite(this.sites()[0].siteUrl).shouldDisplayInformativeLinks();
+
+        // All sites have the same URL, use the first one.
+        return displayUrl
+            ? this.sites()[0].siteUrl.replace(/^https?:\/\//, '').toLowerCase()
+            : false;
+    });
+
+    readonly siteName = computed(() => {
+        if (!this.sites().length) {
+            return false;
+        }
+
+        // All sites have the same name, use the first one.
+        return this.sites()[0].siteName;
+    });
 
-    sites: CoreSiteBasicInfo[] = [];
-    loaded = false;
-    displaySiteUrl = false;
     protected action?: CoreContentLinksAction;
     protected isRootURL = false;
 
     /**
      * @inheritdoc
      */
     async ngOnInit(): Promise<void> {
-        if (!this.url) {
-            return this.closeModal();
-        }
-
+        const url = this.url();
         let siteIds: string[] | undefined = [];
 
         try {
             // Check if it's the root URL.
-            const data = await CoreSites.isStoredRootURL(this.url);
+            const data = await CoreSites.isStoredRootURL(url);
             if (data.site) {
                 // It's the root URL.
                 this.isRootURL = true;
 
                 siteIds = data.siteIds;
             } else if (data.siteIds.length) {
                 // Not root URL, but the URL belongs to at least 1 site. Check if there is any action to treat the link.
-                this.action = await CoreContentLinksHelper.getFirstValidActionFor(this.url);
+                this.action = await CoreContentLinksHelper.getFirstValidActionFor(url);
                 if (!this.action) {
                     throw new CoreError(Translate.instant('core.contentlinks.errornoactions'));
                 }
@@ -75,16 +93,14 @@ export class CoreContentLinksChooseSiteModalComponent implements OnInit {
             }
 
             // Get the sites that can perform the action.
-            this.sites = await CoreSites.getSites(siteIds);
-
-            // All sites have the same URL, use the first one.
-            this.displaySiteUrl = CoreSitesFactory.makeUnauthenticatedSite(this.sites[0].siteUrl).shouldDisplayInformativeLinks();
+            const sites = await CoreSites.getSites(siteIds);
+            this.sites.set(sites);
         } catch (error) {
             CoreAlerts.showError(error, { default: Translate.instant('core.contentlinks.errornosites') });
             this.closeModal();
         }
 
-        this.loaded = true;
+        this.loaded.set(true);
     }
 
     /**
@@ -102,6 +118,45 @@ export class CoreContentLinksChooseSiteModalComponent implements OnInit {
         }
     }
 
+    /**
+     * Handler for adding a new site.
+     */
+    async addNewSite(): Promise<void> {
+        if (!this.sites().length) {
+            return;
+        }
+
+        const siteUrl = this.sites()[0].siteUrl;
+
+        const pageParams = {
+            siteUrl,
+            urlToOpen: this.url(),
+        };
+
+        if (CoreSites.isLoggedIn()) {
+            // Ask the user before changing site.
+            try {
+                await CoreAlerts.confirm(Translate.instant('core.contentlinks.confirmurlothersite'));
+            } catch {
+                return; // User canceled.
+            }
+
+            this.closeModal();
+
+            await CoreSites.logout({
+                siteId: NO_SITE_ID,
+                redirectPath: '/login/credentials',
+                redirectOptions: { params: pageParams },
+            });
+
+            return;
+        }
+
+        this.closeModal();
+
+        await CoreNavigator.navigateToLoginCredentials(pageParams);
+    }
+
     /**
      * Close the modal.
      */

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

@@ -163,7 +163,7 @@ export class CoreContentLinksDelegateService {
         }
 
         // Get the list of sites the URL belongs to.
-        const siteIds = await CoreSites.getSiteIdsFromUrl(url, true, username);
+        const siteIds = await CoreSites.getSiteIdsFromUrl(url, { prioritize: true, username });
         if (!siteIds.length) {
             // No sites, no actions.
             return [];

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

@@ -102,9 +102,11 @@ export class CoreContentLinksHelperProvider {
         await CoreModals.openModal({
             component: CoreContentLinksChooseSiteModalComponent,
             componentProps: {
-                url: url,
+                url,
             },
-            cssClass: 'core-modal-fullscreen',
+            initialBreakpoint: 1,
+            breakpoints: [0, 1],
+            cssClass: 'no-header core-modal-auto-height',
         });
     }
 

src/core/services/sites.ts

@@ -261,6 +261,12 @@ class CoreSitesDB {
      *
      * @param tableName Site table name.
      * @param options Options to configure table initialization.
+     * @param options.siteId Site ID.
+     * @param options.config Table configuration.
+     * @param options.database Database instance to create the table in.
+     * @param options.primaryKeyColumns Columns to use as primary key.
+     * @param options.rowIdColumn Column to use as row ID. If null, the table won't have a row ID column.
+     * @param options.onDestroy Callback to be called when the table is destroyed.
      * @returns Site table.
      */
     async getSiteTable<
@@ -1938,21 +1944,37 @@ export class CoreSitesProvider {
         await this.updateSiteInfo(siteId);
     }
 
+    /**
+     * @deprecated since 5.2. Use getSiteIdsFromUrl with options instead.
+     */
+    async getSiteIdsFromUrl(url: string, prioritize?: boolean, username?: string): Promise<string[]>;
     /**
      * Get the site IDs a URL belongs to.
      * Someone can have more than one account in the same site, that's why this function returns an array of IDs.
      *
      * @param url URL to check.
-     * @param prioritize True if it should prioritize current site. If the URL belongs to current site then it won't
-     *                   check any other site, it will only return current site.
-     * @param username If set, it will return only the sites where the current user has this username.
+     * @param options Options to filter the sites.
      * @returns Promise resolved with the site IDs (array).
      */
-    async getSiteIdsFromUrl(url: string, prioritize?: boolean, username?: string): Promise<string[]> {
+    async getSiteIdsFromUrl(url: string, options: GetSiteFromUrlOptions): Promise<string[]>;
+    async getSiteIdsFromUrl(
+        url: string,
+        prioritizeOrOptions: boolean | GetSiteFromUrlOptions = {},
+        username?: string,
+    ): Promise<string[]> {
+        const prioritize = typeof prioritizeOrOptions === 'boolean' ? prioritizeOrOptions : prioritizeOrOptions.prioritize;
+        const userId = typeof prioritizeOrOptions === 'boolean' ? undefined : prioritizeOrOptions.userId;
+        username = typeof prioritizeOrOptions === 'boolean' ? username : prioritizeOrOptions.username;
+
         // If prioritize is true, check current site first.
-        if (prioritize && this.currentSite && this.currentSite.containsUrl(url)) {
-            if (!username || this.currentSite?.getInfo()?.username === username) {
+        if (prioritize && this.currentSite?.containsUrl(url)) {
+            if (!username && !userId) {
                 return [this.currentSite.getId()];
+            } else {
+                const info = this.currentSite?.getInfo();
+                if (info?.username === username || info?.userid === userId) {
+                    return [this.currentSite.getId()];
+                }
             }
         }
 
@@ -1982,8 +2004,14 @@ export class CoreSitesProvider {
                 await this.addSiteFromSiteListEntry(site);
 
                 if (this.sites[site.id].containsUrl(url)) {
-                    if (!username || this.sites[site.id].getInfo()?.username === username) {
+                    if (!username && !userId) {
                         ids.push(site.id);
+                    } else {
+                        const info = this.sites[site.id].getInfo();
+
+                        if (info?.username === username || info?.userid === userId) {
+                            ids.push(site.id);
+                        }
                     }
                 }
             }));
@@ -2096,7 +2124,7 @@ export class CoreSitesProvider {
      */
     async isStoredRootURL(url: string, username?: string): Promise<{ site?: CoreSite; siteIds: string[] }> {
         // Check if the site is stored.
-        const siteIds = await this.getSiteIdsFromUrl(url, true, username);
+        const siteIds = await this.getSiteIdsFromUrl(url, { prioritize: true, username });
 
         const result: { site?: CoreSite; siteIds: string[] } = {
             siteIds,
@@ -2365,6 +2393,7 @@ export class CoreSitesProvider {
      *                    after 'checkAll'.
      * @param checkAll True if it should check all the sites, false if it should check only 1 and treat them all
      *                 depending on this result.
+     * @param args Params to pass to the isEnabledFn function.
      * @returns Promise resolved with the list of enabled sites.
      */
     async filterEnabledSites<P extends unknown[]>(
@@ -2644,3 +2673,13 @@ export type CoreSitesAfterLoginNavigationProcess = {
     priority: number;
     callback: () => Promise<void>;
 };
+
+/**
+ * Options to get a site from a URL.
+ */
+type GetSiteFromUrlOptions = {
+    username?: string; // If set, it will return the site only if the current user has this username.
+    userId?: number; // If set, it will return the site only if the current user has this ID.
+    prioritize?: boolean; // If true, it will prioritize current site.
+        // If the URL belongs to current site then it won't check any other site, it will only return current site.
+};