MOBILE-3320 user: Fix address not opened

src/core/directives/format-text.ts

@@ -23,6 +23,7 @@ import {
     Optional,
     ViewContainerRef,
 } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 import { IonContent } from '@ionic/angular';
 
 import { CoreEventLoadingChangedData, CoreEventObserver, CoreEvents } from '@singletons/events';
@@ -90,6 +91,7 @@ export class CoreFormatTextDirective implements OnChanges {
         element: ElementRef,
         @Optional() protected content: IonContent,
         protected viewContainerRef: ViewContainerRef,
+        protected sanitizer: DomSanitizer,
     ) {
 
         this.element = element.nativeElement;
@@ -504,7 +506,7 @@ export class CoreFormatTextDirective implements OnChanges {
         // Important: We need to look for links first because in 'img' we add new links without core-link.
         anchors.forEach((anchor) => {
             // Angular 2 doesn't let adding directives dynamically. Create the CoreLinkDirective manually.
-            const linkDir = new CoreLinkDirective(new ElementRef(anchor), this.content);
+            const linkDir = new CoreLinkDirective(new ElementRef(anchor), this.content, this.sanitizer);
             linkDir.capture = this.captureLinks ?? true;
             linkDir.inApp = this.openLinksInApp;
             linkDir.ngOnInit();

src/core/directives/link.ts

@@ -12,7 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Directive, Input, OnInit, ElementRef, Optional } from '@angular/core';
+import { Directive, Input, OnInit, ElementRef, Optional, SecurityContext } from '@angular/core';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { IonContent } from '@ionic/angular';
 
 import { CoreFileHelper } from '@services/file-helper';
@@ -33,7 +34,7 @@ import { CoreCustomURLSchemes } from '@services/urlschemes';
 })
 export class CoreLinkDirective implements OnInit {
 
-    @Input() href?: string; // Link URL.
+    @Input() href?: string | SafeUrl; // Link URL.
     @Input() capture?: boolean | string; // If the link needs to be captured by the app.
     @Input() inApp?: boolean | string; // True to open in embedded browser, false to open in system browser.
     /* Whether the link should be opened with auto-login. Accepts the following values:
@@ -47,6 +48,7 @@ export class CoreLinkDirective implements OnInit {
     constructor(
         element: ElementRef,
         @Optional() protected content: IonContent,
+        protected sanitizer: DomSanitizer,
     ) {
         this.element = element.nativeElement;
     }
@@ -91,7 +93,13 @@ export class CoreLinkDirective implements OnInit {
             return; // Link already treated, stop.
         }
 
-        let href = this.href || this.element.getAttribute('href') || this.element.getAttribute('xlink:href');
+        let href: string | null = null;
+        if (this.href) {
+            // Convert the URL back to string if needed.
+            href = typeof this.href === 'string' ? this.href : this.sanitizer.sanitize(SecurityContext.URL, this.href);
+        }
+
+        href = href || this.element.getAttribute('href') || this.element.getAttribute('xlink:href');
 
         if (!href || CoreUrlUtils.getUrlScheme(href) == 'javascript') {
             return;

src/core/features/user/pages/about/about.html

@@ -38,21 +38,21 @@
                         </a></p>
                     </ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="user.address">
+                <ion-item class="ion-text-wrap" *ngIf="formattedAddress">
                     <ion-label>
                         <h2>{{ 'core.user.address' | translate}}</h2>
                         <p><a class="core-anchor" [href]="encodedAddress" core-link auto-login="no">
-                            {{ user.address }}
+                            {{ formattedAddress }}
                         </a></p>
                     </ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="user.city && !user.address">
+                <ion-item class="ion-text-wrap" *ngIf="user.city && !formattedAddress">
                     <ion-label>
                         <h2>{{ 'core.user.city' | translate}}</h2>
                         <p>{{ user.city }}</p>
                     </ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="user.country && !user.address">
+                <ion-item class="ion-text-wrap" *ngIf="user.country && !formattedAddress">
                     <ion-label>
                         <h2>{{ 'core.user.country' | translate}}</h2>
                         <p>{{ user.country }}</p>

src/core/features/user/pages/about/about.page.ts

@@ -75,7 +75,7 @@ export class CoreUserAboutPage implements OnInit {
 
             if (user.address) {
                 this.formattedAddress = CoreUserHelper.formatAddress(user.address, user.city, user.country);
-                this.encodedAddress = CoreTextUtils.buildAddressURL(user.address);
+                this.encodedAddress = CoreTextUtils.buildAddressURL(this.formattedAddress);
             }
 
             this.hasContact = !!(user.email || user.phone1 || user.phone2 || user.city || user.country || user.address);